From 5e668c4677e5c9067523a009178e0686c7d72560 Mon Sep 17 00:00:00 2001 From: ryliejamesthomas Date: Sat, 3 Jun 2017 00:53:52 +1000 Subject: [PATCH] My updates Mostly just reorganising the CSS (adding tabs, making the formatting consistent, etc.), changed the header (padding; colours in bg, border, text; size), and used CSS to hide the gender variable. --- design/custom.css | 1088 ++++++++++++++++++++++++++------------------- 1 file changed, 630 insertions(+), 458 deletions(-) diff --git a/design/custom.css b/design/custom.css index 14f6e71..05e7177 100644 --- a/design/custom.css +++ b/design/custom.css @@ -1,562 +1,734 @@ -a{color: #333;} -a:hover{color: #666;} -body{background-color: #eee; font-size: 14px; padding-top: 50px;} -input[type="text"],input[type="email"],input[type="password"], select, textarea{border-radius: 2px; padding: 6px 12px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.2); background-color: #f6f6f6; border: 0; margin-bottom: 10px; font-size: 13px !important;} +a {color:#333;} + +a:hover {color:#666;} + +body { + background-color:#eee; + font-size:14px; + padding-top:50px; +} + +input[type="text"],input[type="email"],input[type="password"], select, textarea { + border-radius:2px; + padding:6px 12px; + box-shadow:inset 0 1px 1px rgba(0,0,0,0.2); + background-color:#f6f6f6; + border:0; + margin-bottom:10px; + font-size:13px !important; +} + +li.Gender { + display:none !important; +} + /* Full-width */ -.Row { - width: 100%; -} -.fl{float: left;} -.fr{float: right;} -.clear{clear: both;} -/* Breadcrumbs */ + +.Row {width:100%;} + +.fl {float:left;} + +.fr {float:right;} + +.clear {clear:both;} + .BreadcrumbsWrapper { - font-size: 13px; - padding: 6px 10px; - background: #fafafa; - border: 1px dashed #eee; - margin-bottom: 10px; + font-size:13px; + padding:6px 10px; + background:#fafafa; + border:1px dashed #eee; + margin-bottom:10px; } -#Frame{ - -} -/* #fdfdfd Head & Menu */ + +#Frame{} + +/* Head is top panel, row is within that */ + #Head { - position: fixed; - top: 0; - width: 100%; - content: ''; - padding: 4px 0; - height: 35px; - text-align: center; - box-shadow: 0 1px 4px rgba(0,0,0,0.3); - border-bottom: 1px solid #333; - background: #373c4a; - z-index: 11; + position:fixed; + top:0; + width:100%; + content:''; + padding:0.5em 0; + height:1.4em; + text-align:center; + box-shadow:0 1px 4px rgba(0,0,0,0.3); + border-bottom:2px solid #fff200; + background:#ffaec9; + z-index:11; } + #Head .Row{ - width: auto !important; - min-width: 760px; - max-width: 1000px; - margin: auto; + width:auto !important; + min-width:760px; + max-width:1000px; + margin:auto; } -#Head a { - color: #1E79A7; + +/* Title colour */ +#Head a {color:#fff;} +#Head a:hover {color:#ed1c24;} + +#Head .SiteMenu { + list-style:none; + margin:0; + padding:0; } -#Head a:hover { - color: #ff0084; + +#Head .SiteMenu>li {float:left;} + +#Head .SiteMenu>li>a { + float:left; + color:#9ea0a5; + font-weight:normal; + padding:0 10px; + font-size:13px; + color:#9ea0a5; } -#Head .SiteMenu{list-style: none; margin: 0; padding: 0;} -#Head .SiteMenu>li{float: left;} -#Head .SiteMenu>li>a{float: left; color: #9ea0a5; font-weight: normal; padding: 6px 10px; font-size: 13px; color: #9ea0a5;} -#Head .SiteMenu>li>a:hover{color: #fdfdfd; text-decoration: none;} -.SiteSearch{margin-top: 6px; width: 100%;} -#Form_Search{border-radius: 2px; padding: 6px 12px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.2); background-color: #f0f0f0; border: 0; margin-bottom: 10px; width: 100% !important; font-size: 13px !important;} -#Form_Go{top: 9px; right: 10px; background: url('http://vanilla.com/applications/dashboard/design/images/sprites.png') 0 -196px no-repeat transparent !important;} -.SiteTitle img{height: 28px;} -.PageControls{min-height: inherit;} -.DataList{margin-top: 10px;} -.DataList .Item{border: 0 !important; border-bottom: 1px dashed #ccc !important; background: #fdfdfd !important; border-radius: 2px; margin-bottom: 5px;} -.DataList .Read{background: #fdfdfd !important;} -.FilterMenu, .PanelCategories, .PanelInfo{ - border-left: 1px solid #ddd; - border-right: 1px solid #ddd; + +#Head .SiteMenu>li>a:hover { + color:#ed1c24; + text-decoration:none; } -.FilterMenu li, .PanelCategories li, .PanelInfo li{padding: 6px 8px !important;} -.FormWrapper{background: transparent !important; padding: 0 !important;} -ul.token-input-list{border-radius: 2px; padding: 3px 0 !important; box-shadow: inset 0 1px 1px rgba(0,0,0,0.2); background-color: #f6f6f6 !important; border: 0 !important; font-size: 13px !important;} -ul.token-input-list input{border: 0 !important; background: transparent !important; box-shadow: 0 0 0 transparent !important;} -.TagCloud li{width: 100%; background: #fdfdfd !important; float: left; padding: 6px 0; border-radius: 0 !important} -.TagCloud li>span{float: left; margin: 0 10px;} -.TagCloud li .Count{float: right;} -.ProfilePhotoLarge{width: 100%; border-radius: 3px;} -textarea.TextBox{min-height: 50px !important; height: 50px !important; border-color: #ddd; border-radius: 2px;} -.Button{padding: 8px 12px; text-shadow: 0 0 0 transparent !important; background: #fdfdfd !important; box-shadow: 0 0 0 transparent !important; border-radius: 0 !important; border-color: #ddd !important; color: #666 !important;} -textarea.MultiComplete{height: 32px;} -body.Profile.EditMode #Content form{background: transparent !important;} + +.SiteSearch { + margin-top:6px; + width:100%; +} + +#Form_Search { + border-radius:2px; + padding:6px 12px; + box-shadow:inset 0 1px 1px rgba(0,0,0,0.2); + background-color:#f0f0f0; + border:0; + margin-bottom:10px; + width:100% !important; + font-size:13px !important; +} + +#Form_Go { + top:9px; + right:10px; + background:url('http://vanilla.com/applications/dashboard/design/images/sprites.png') 0 -196px no-repeat transparent !important; +} + +.SiteTitle img {height:28px;} + +.PageControls {min-height:inherit;} + +.DataList {margin-top:10px;} + +.DataList .Item { + border:0 !important; + border-bottom:1px dashed #ccc !important; + background:#fdfdfd !important; + border-radius:2px; + margin-bottom:5px; +} + +.DataList .Read{background:#fdfdfd !important;} + +.FilterMenu, .PanelCategories, .PanelInfo { + border-left:1px solid #ddd; + border-right:1px solid #ddd; +} + +.FilterMenu li, .PanelCategories li, .PanelInfo li {padding:6px 8px !important;} + +.FormWrapper { + background:transparent !important; + padding:0 !important; +} + +ul.token-input-list { + border-radius:2px; + padding:3px 0 !important; + box-shadow:inset 0 1px 1px rgba(0,0,0,0.2); + background-color:#f6f6f6 !important; + border:0 !important; + font-size:13px !important; +} + +ul.token-input-list input { + border:0 !important; + background:transparent !important; + box-shadow:0 0 0 transparent !important; +} + +.TagCloud li { + width:100%; + background:#fdfdfd !important; + float:left; + padding:6px 0; + border-radius:0 !important; +} + +.TagCloud li>span { + float:left; + margin:0 10px; +} + +.TagCloud li .Count {float:right;} + +.ProfilePhotoLarge { + width:100%; + border-radius:3px; +} + +textarea.TextBox { + min-height:50px !important; + height:50px !important; + border-color:#ddd; + border-radius:2px; +} + +.Button { + padding:8px 12px; + text-shadow:0 0 0 transparent !important; + background:#fdfdfd !important; + box-shadow:0 0 0 transparent !important; + border-radius:0 !important; + border-color:#ddd !important; + color:#666 !important; +} + +textarea.MultiComplete {height:32px;} + +body.Profile.EditMode #Content form {background:transparent !important;} + /* Panel on the right */ -#Panel {float: right; width: 240px; background: #fdfdfd; box-shadow: 0 1px 1px rgba(0,0,0,0.1); padding: 10px; border-radius: 3px;} + +#Panel { + float:right; + width:240px; + background:#fdfdfd; + box-shadow:0 1px 1px rgba(0,0,0,0.1); + padding:10px; + border-radius:3px; +} + #Body{ - min-width: 320px; - max-width: 1000px; - margin: 10px auto; - box-shadow: 0 1px 1px rgba(0,0,0,.3); - padding: 10px; - background-color: #f6f6f6; - border-radius: 3px; + min-width:320px; + max-width:1000px; + margin:10px auto; + box-shadow:0 1px 1px rgba(0,0,0,.3); + padding:10px; + background-color:#f6f6f6; + border-radius:3px; } -#Body .SiteMenu{display: block; float: right; margin-top: 12px;} -#Body .SiteMenu li a{font-size: 13px;} -#Body .ContentColumn {margin: 0 270px 0 0; background: #fdfdfd; box-shadow: 0 1px 1px rgba(0,0,0,0.1); padding: 10px; border-radius: 3px;} -#Panel input.InputBox { - width: 192px; + +#Body .SiteMenu { + display:block; + float:right; + margin-top:12px; } +#Body .SiteMenu li a {font-size:13px;} + +#Body .ContentColumn { + margin:0 270px 0 0; + background:#fdfdfd; + box-shadow:0 1px 1px rgba(0,0,0,0.1); + padding:10px; + border-radius:3px; +} + +#Panel input.InputBox {width:192px;} + /* Backwards compatibility for themes that extended/customized the old version */ -#Body .Wrapper #Content { - margin: 0 215px 0 0; -} + +#Body .Wrapper #Content {margin:0 215px 0 0;} + .Banner ul { - background: none repeat scroll 0 0 #3B5998; - margin: 0; - padding: 0; + background:none repeat scroll 0 0 #3B5998; + margin:0; + padding:0; } -#Foot{margin-bottom: 10px;} -#Foot a{color: #666; font-weight: bold;} -#Menu { - margin-right: 0 !important; + +#Foot {margin-bottom:10px;} + +#Foot a { + color:#666; + font-weight:bold; } -.Banner ul li, -#Menu li { display: inline; } -.Banner ul li a, -#Menu a { - display: inline-block; - padding: 3px 7px; - font-size: 13px; - font-weight: bold; - color: #fdfdfd; +#Menu {margin-right:0 !important;} + +.Banner ul li, #Menu li {display:inline;} + +.Banner ul li a, #Menu a { + display:inline-block; + padding:3px 7px; + font-size:13px; + font-weight:bold; + color:#fdfdfd; } -.Banner ul li a:hover, -#Menu a:hover { - text-decoration: underline; - color: #fdfdfd; + +.Banner ul li a:hover, #Menu a:hover { + text-decoration:underline; + color:#fdfdfd; } + #Head #Search form { - float: right; - padding: 0; - margin-top: -30px; + float:right; + padding:0; + margin-top:-30px; } + #Head #Search form input.InputBox { - width: 204px; - border: 0; - padding: 4px; - margin: 0 6px 0 0; - background: #fdfdfd; - -moz-border-radius: 2px; - -webkit-border: 2px; - border-bottom: 2px; - color: #969696; - font-size: 13px; - vertical-align: bottom; + width:204px; + border:0; + padding:4px; + margin:0 6px 0 0; + background:#fdfdfd; + -moz-border-radius:2px; + -webkit-border:2px; + border-bottom:2px; + color:#969696; + font-size:13px; + vertical-align:bottom; } #Head #Search form input.Button { - font-size: 13px; - border: none; + font-size:13px; + border:none; } -/* Custom for CKeditor */ -#cke_Form_Body{border: 1px solid #ddd !important; background: #fdfdfd;} -.cke_editable{min-height: 200px; white-space: pre-wrap; background-color: transparent !important;} -.cke_inner{background: #f0f0f0 !important;} -.cke_chrome{border: 0 !important; box-shadow: 0 0 0 #fdfdfd !important;} -.cke_1 .cke_top{border: 0 !important; box-shadow: 0 0 0 transparent !important; border-radius: 2px; background: transparent !important;} -.cke_float .cke_top{border: 0 !important;} -.cke_bottom{background: transparent !important; border-top: 1px solid #ddd !important;} -.cke_wysiwyg_frame, .cke_wysiwyg_div{background: transparent !important;} -/* If window is less than 800px wide, hide the panel for all pages except profile. */ -@media screen and (max-width: 799px) { - /* Hide the "started by" column of the discussions table. */ - body.Discussions .DataTable .FirstUser { display: none; } - - /* Hide the panel on non-profile pages. */ - #Body .Row { - position: relative; - } - #Body .ContentColumn { - padding-top: 50px; - } - .MeBox, - .BigButton { - visibility: visible; - position: relative; - width: 120px; - display: inline-block; - } - .BigButton { - padding: 8px 20px; - } - .MeBox { - width: 200px; - } - #Panel { - overflow: visible; - visibility: hidden; - position: absolute; - right: 2px; /* Don't know why this is adding some extra padding */ - width: auto; - display: block; - } - .Column.ContentColumn { - margin: 0 !important; - } - /* Don't hide the panel on the profile page */ - body.Profile #Body .ContentColumn { - padding-top: 0; - } - body.Profile .MeBox, - body.Profile .BigButton { - visibility: visible; - position: relative; - top: auto; - right: auto; - width: auto; - } - body.Profile .MeBox { - width: auto; - right: auto; - } - body.Profile #Panel { - visibility: visible; - position: relative; - right: auto; - width: 200px; - } - body.Profile .Column.ContentColumn { - margin: 0 220px 0 0 !important; - } +/* Custom for CKeditor */ + +#cke_Form_Body { + border:1px solid #ddd !important; + background:#fdfdfd; } -#Head .HiddenOnDesktop{display: none;} -@media screen and (max-width: 780px) { - .Discussion .PageTitle h1{font-size: 18px;} - #Head .Row{min-width: 320px;} - #Head .HiddenOnMobile{display: none;} - #Head .HiddenOnDesktop{display: block;} - .cd-panel-header .SiteTitle{padding: 10px !important; line-height: 2.2 !important;} - .cd-panel-content .PanelInfo.PanelCategories{width: 90%;} - .cd-panel-content .BoxButtons.BoxNewDiscussion>.Button{margin: 10px 0;} + +.cke_editable { + min-height:200px; + white-space:pre-wrap; + background-color:transparent !important; } -@media screen and (max-width: 600px) { - body.Profile #Panel .Photo.PhotoWrap.PhotoWrapLarge, body.Profile #Panel .BoxFilter.BoxProfileFilter{padding: 10px;} - body.Profile #Panel, body.Profile #Body .ContentColumn{width: 100%; padding: 0; float: left;} - body.Profile #Body .ContentColumn{margin-top: 10px !important; float: left;} - body.Profile #Body .ContentColumn .Profile, body.Profile #Body .ContentColumn .ProfileOptions{padding: 10px;} + +.cke_inner {background:#f0f0f0 !important;} + +.cke_chrome { + border:0 !important; + box-shadow:0 0 0 #fdfdfd !important; +} + +.cke_1 .cke_top { + border:0 !important; + box-shadow:0 0 0 transparent !important; + border-radius:2px; + background:transparent !important; +} + +.cke_float .cke_top {border:0 !important;} + +.cke_bottom { + background:transparent !important; + border-top:1px solid #ddd !important; +} + +.cke_wysiwyg_frame, .cke_wysiwyg_div {background:transparent !important;} + +/* If window is less than 800px wide, hide the panel for + * all pages except profile. */ +@media screen and (max-width:799px) { + + /* Hide the "started by" column of the discussions table. */ + body.Discussions .DataTable .FirstUser { display:none; } + + /* Hide the panel on non-profile pages. */ + #Body .Row {position:relative;} + + #Body .ContentColumn {padding-top:50px;} + + .MeBox, .BigButton { + visibility:visible; + position:relative; + width:120px; + display:inline-block; + } + + .BigButton {padding:8px 20px;} + + .MeBox {width:200px;} + + #Panel { + overflow:visible; + visibility:hidden; + position:absolute; + right:2px; /* Don't know why this is adding some extra padding */ + width:auto; + display:block; + } + + .Column.ContentColumn {margin:0 !important;} + + /* Don't hide the panel on the profile page */ + body.Profile #Body .ContentColumn {padding-top:0;} + + body.Profile .MeBox, body.Profile .BigButton { + visibility:visible; + position:relative; + top:auto; + right:auto; + width:auto; + } + + body.Profile .MeBox { + width:auto; + right:auto; + } + + body.Profile #Panel { + visibility:visible; + position:relative; + right:auto; + width:200px; + } + + body.Profile .Column.ContentColumn {margin:0 220px 0 0 !important;} +} + +#Head .HiddenOnDesktop {display:none;} + +@media screen and (max-width:780px) { + .Discussion .PageTitle h1 {font-size:18px;} + #Head .Row {min-width:320px;} + #Head .HiddenOnMobile {display:none;} + #Head .HiddenOnDesktop {display:block;} + .cd-panel-header .SiteTitle {padding:10px !important; line-height:2.2 !important;} + .cd-panel-content .PanelInfo.PanelCategories {width:90%;} + .cd-panel-content .BoxButtons.BoxNewDiscussion>.Button {margin:10px 0;} +} +@media screen and (max-width:600px) { + body.Profile #Panel .Photo.PhotoWrap.PhotoWrapLarge, body.Profile #Panel .BoxFilter.BoxProfileFilter {padding:10px;} + body.Profile #Panel, body.Profile #Body .ContentColumn {width:100%; padding:0; float:left;} + body.Profile #Body .ContentColumn {margin-top:10px !important; float:left;} + body.Profile #Body .ContentColumn .Profile, body.Profile #Body .ContentColumn .ProfileOptions {padding:10px;} } /* Slider in Panel */ -.cd-main-content { - text-align: center; -} +.cd-main-content {text-align:center;} + .cd-main-content h3 { - color: #000; - padding: 4em 0; + color:#000; + padding:4em 0; } .cd-main-content .cd-btn { - position: relative; - display: inline-block; - padding: 1em 2em; - background-color: #89ba2c; - color: #ffffff; - font-weight: bold; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - border-radius: 50em; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1); - -webkit-transition: all 0.2s; - -moz-transition: all 0.2s; - transition: all 0.2s; -} -.no-touch .cd-main-content .cd-btn:hover { - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3); + position:relative; + display:inline-block; + padding:1em 2em; + background-color:#89ba2c; + color:#ffffff; + font-weight:bold; + -webkit-font-smoothing:antialiased; + -moz-osx-font-smoothing:grayscale; + border-radius:50em; + box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1); + transition:all 0.2s; + -webkit-transition:all 0.2s; + -moz-transition:all 0.2s; + } + +.no-touch .cd-main-content .cd-btn:hover {box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);} + .cd-panel { - position: fixed; - top: 0; - left: 0; - z-index: 9999; - height: 100%; - width: 100%; - visibility: hidden; - -webkit-transition: visibility 0s 0.6s; - -moz-transition: visibility 0s 0.6s; - transition: visibility 0s 0.6s; + position:fixed; + top:0; + left:0; + z-index:9999; + height:100%; + width:100%; + visibility:hidden; + transition:visibility 0s 0.6s; + -webkit-transition:visibility 0s 0.6s; + -moz-transition:visibility 0s 0.6s; } + .cd-panel::after { - /* overlay layer */ - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: transparent; - cursor: pointer; - -webkit-transition: background 0.3s 0.3s; - -moz-transition: background 0.3s 0.3s; - transition: background 0.3s 0.3s; + /* overlay layer */ + position:absolute; + top:0; + left:0; + width:100%; + height:100%; + background:transparent; + cursor:pointer; + transition:background 0.3s 0.3s; + -webkit-transition:background 0.3s 0.3s; + -moz-transition:background 0.3s 0.3s; } + .cd-panel.is-visible { - visibility: visible; - -webkit-transition: visibility 0s 0s; - -moz-transition: visibility 0s 0s; - transition: visibility 0s 0s; + visibility:visible; + transition:visibility 0s 0s; + -webkit-transition:visibility 0s 0s; + -moz-transition:visibility 0s 0s; } .cd-panel.is-visible::after { - background: rgba(0, 0, 0, 0.6); - -webkit-transition: background 0.3s 0s; - -moz-transition: background 0.3s 0s; - transition: background 0.3s 0s; + background:rgba(0, 0, 0, 0.6); + transition:background 0.3s 0s; + -webkit-transition:background 0.3s 0s; + -moz-transition:background 0.3s 0s; } + .cd-panel.is-visible .cd-panel-close::before { - -webkit-animation: cd-close-1 0.6s 0.3s; - -moz-animation: cd-close-1 0.6s 0.3s; - animation: cd-close-1 0.6s 0.3s; + -webkit-animation:cd-close-1 0.6s 0.3s; + -moz-animation:cd-close-1 0.6s 0.3s; + animation:cd-close-1 0.6s 0.3s; } + .cd-panel.is-visible .cd-panel-close::after { - -webkit-animation: cd-close-2 0.6s 0.3s; - -moz-animation: cd-close-2 0.6s 0.3s; - animation: cd-close-2 0.6s 0.3s; + -webkit-animation:cd-close-2 0.6s 0.3s; + -moz-animation:cd-close-2 0.6s 0.3s; + animation:cd-close-2 0.6s 0.3s; } @-webkit-keyframes cd-close-1 { - 0%, 50% { - -webkit-transform: rotate(0); - } - 100% { - -webkit-transform: rotate(45deg); - } + 0%, 50% {-webkit-transform:rotate(0);} + 100% {-webkit-transform:rotate(45deg);} } + @-moz-keyframes cd-close-1 { - 0%, 50% { - -moz-transform: rotate(0); - } - 100% { - -moz-transform: rotate(45deg); - } + 0%, 50% {-moz-transform:rotate(0);} + 100% {-moz-transform:rotate(45deg);} } + @keyframes cd-close-1 { - 0%, 50% { - -webkit-transform: rotate(0); - -moz-transform: rotate(0); - -ms-transform: rotate(0); - -o-transform: rotate(0); - transform: rotate(0); - } - 100% { - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - -o-transform: rotate(45deg); - transform: rotate(45deg); - } + 0%, 50% { + transform:rotate(0); + -webkit-transform:rotate(0); + -moz-transform:rotate(0); + -ms-transform:rotate(0); + -o-transform:rotate(0); + } + 100% { + transform:rotate(45deg); + -webkit-transform:rotate(45deg); + -moz-transform:rotate(45deg); + -ms-transform:rotate(45deg); + -o-transform:rotate(45deg); + } } + @-webkit-keyframes cd-close-2 { - 0%, 50% { - -webkit-transform: rotate(0); - } - 100% { - -webkit-transform: rotate(-45deg); - } + 0%, 50% {-webkit-transform:rotate(0);} + 100% {-webkit-transform:rotate(-45deg);} } + @-moz-keyframes cd-close-2 { - 0%, 50% { - -moz-transform: rotate(0); - } - 100% { - -moz-transform: rotate(-45deg); - } + 0%, 50% {-moz-transform:rotate(0);} + 100% {-moz-transform:rotate(-45deg);} } + @keyframes cd-close-2 { - 0%, 50% { - -webkit-transform: rotate(0); - -moz-transform: rotate(0); - -ms-transform: rotate(0); - -o-transform: rotate(0); - transform: rotate(0); - } - 100% { - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - transform: rotate(-45deg); - } + 0%, 50% { + transform:rotate(0); + -webkit-transform:rotate(0); + -moz-transform:rotate(0); + -ms-transform:rotate(0); + -o-transform:rotate(0); + } + 100% { + transform:rotate(-45deg); + -webkit-transform:rotate(-45deg); + -moz-transform:rotate(-45deg); + -ms-transform:rotate(-45deg); + -o-transform:rotate(-45deg); + } } + .cd-panel-header { - position: fixed; - width: 75%; - height: 43px; - line-height: 38px; - z-index: 9999; - box-shadow: 0 1px 4px rgba(0,0,0,0.3); - border-bottom: 1px solid #333; - background: #373c4a; - -webkit-transition: top 0.3s 0s; - -moz-transition: top 0.3s 0s; - transition: top 0.3s 0s; + position:fixed; + width:75%; + height:43px; + line-height:38px; + z-index:9999; + box-shadow:0 1px 4px rgba(0,0,0,0.3); + border-bottom:1px solid #333; + background:#373c4a; + -webkit-transition:top 0.3s 0s; + -moz-transition:top 0.3s 0s; + transition:top 0.3s 0s; } + .cd-panel-header h3 { - font-weight: bold; - font-size: 28px; - color: #000; - margin-top: 10px; - padding: 0 10px; -} -.from-right .cd-panel-header, .from-left .cd-panel-header { - top: -50px; -} -.from-right .cd-panel-header { - right: 0; -} -.from-left .cd-panel-header { - left: 0; + font-weight:bold; + font-size:28px; + color:#000; + margin-top:10px; + padding:0 10px; } + +.from-right .cd-panel-header, .from-left .cd-panel-header {top:-50px;} + +.from-right .cd-panel-header {right:0;} + +.from-left .cd-panel-header {left:0;} + .is-visible .cd-panel-header { - top: 0; - -webkit-transition: top 0.3s 0.3s; - -moz-transition: top 0.3s 0.3s; - transition: top 0.3s 0.3s; + top:0; + transition:top 0.3s 0.3s; + -webkit-transition:top 0.3s 0.3s; + -moz-transition:top 0.3s 0.3s; } -@media only screen and (min-width: 768px) { - .cd-panel-header { - width: 70%; - } + +@media only screen and (min-width:768px) { + .cd-panel-header {width:70%;} } -@media only screen and (min-width: 1170px) { - .cd-panel-header { - width: 50%; - } + +@media only screen and (min-width:1170px) { + .cd-panel-header {width:50%;} } .cd-panel-close { - position: absolute; - top: 0; - right: 0; - height: 100%; - padding: 4px 20px; - /* image replacement */ - display: inline-block; - overflow: hidden; - text-align: center; - white-space: nowrap; - color: #fff; + position:absolute; + top:0; + right:0; + height:100%; + padding:4px 20px; + /* image replacement */ + display:inline-block; + overflow:hidden; + text-align:center; + white-space:nowrap; + color:#fff; } + .cd-panel-close::before, .cd-panel-close::after { - /* close icon created in CSS */ - position: absolute; - top: 22px; - left: 20px; - height: 3px; - width: 20px; - background-color: #424f5c; - /* this fixes a bug where pseudo elements are slighty off position */ - -webkit-backface-visibility: hidden; - backface-visibility: hidden; + /* close icon created in CSS */ + position:absolute; + top:22px; + left:20px; + height:3px; + width:20px; + background-color:#424f5c; + /* this fixes a bug where pseudo elements are slighty off position */ + backface-visibility:hidden; + -webkit-backface-visibility:hidden; } + .cd-panel-close::before { - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - -o-transform: rotate(45deg); - transform: rotate(45deg); + transform:rotate(45deg); + -webkit-transform:rotate(45deg); + -moz-transform:rotate(45deg); + -ms-transform:rotate(45deg); + -o-transform:rotate(45deg); } + .cd-panel-close::after { - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - transform: rotate(-45deg); + transform:rotate(-45deg); + -webkit-transform:rotate(-45deg); + -moz-transform:rotate(-45deg); + -ms-transform:rotate(-45deg); + -o-transform:rotate(-45deg); } + .no-touch .cd-panel-close:hover { - background-color: #ccc; + background-color:#ccc; } + .no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after { - background-color: #ffffff; - -webkit-transition-property: -webkit-transform; - -moz-transition-property: -moz-transform; - transition-property: transform; - -webkit-transition-duration: 0.3s; - -moz-transition-duration: 0.3s; - transition-duration: 0.3s; + background-color:#ffffff; + transition-property:transform; + -webkit-transition-property:-webkit-transform; + -moz-transition-property:-moz-transform; + transition-duration:0.3s; + -webkit-transition-duration:0.3s; + -moz-transition-duration:0.3s; } + .no-touch .cd-panel-close:hover::before { - -webkit-transform: rotate(220deg); - -moz-transform: rotate(220deg); - -ms-transform: rotate(220deg); - -o-transform: rotate(220deg); - transform: rotate(220deg); + transform:rotate(220deg); + -webkit-transform:rotate(220deg); + -moz-transform:rotate(220deg); + -ms-transform:rotate(220deg); + -o-transform:rotate(220deg); } + .no-touch .cd-panel-close:hover::after { - -webkit-transform: rotate(135deg); - -moz-transform: rotate(135deg); - -ms-transform: rotate(135deg); - -o-transform: rotate(135deg); - transform: rotate(135deg); + transform:rotate(135deg); + -webkit-transform:rotate(135deg); + -moz-transform:rotate(135deg); + -ms-transform:rotate(135deg); + -o-transform:rotate(135deg); } .cd-panel-container { - position: fixed; - width: 75%; - height: 100%; - top: 0; - background: #f0f0f0; - z-index: 1; - -webkit-transition-property: -webkit-transform; - -moz-transition-property: -moz-transform; - transition-property: transform; - -webkit-transition-duration: 0.3s; - -moz-transition-duration: 0.3s; - transition-duration: 0.3s; - -webkit-transition-delay: 0.3s; - -moz-transition-delay: 0.3s; - transition-delay: 0.3s; + position:fixed; + width:75%; + height:100%; + top:0; + background:#f0f0f0; + z-index:1; + transition-property:transform; + -webkit-transition-property:-webkit-transform; + -moz-transition-property:-moz-transform; + transition-duration:0.3s; + -webkit-transition-duration:0.3s; + -moz-transition-duration:0.3s; + transition-delay:0.3s; + -webkit-transition-delay:0.3s; + -moz-transition-delay:0.3s; } + .from-right .cd-panel-container { - right: 0; - -webkit-transform: translate3d(100%, 0, 0); - -moz-transform: translate3d(100%, 0, 0); - -ms-transform: translate3d(100%, 0, 0); - -o-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); + right:0; + -webkit-transform:translate3d(100%, 0, 0); + -moz-transform:translate3d(100%, 0, 0); + -ms-transform:translate3d(100%, 0, 0); + -o-transform:translate3d(100%, 0, 0); + transform:translate3d(100%, 0, 0); } + .from-left .cd-panel-container { - left: 0; - -webkit-transform: translate3d(-100%, 0, 0); - -moz-transform: translate3d(-100%, 0, 0); - -ms-transform: translate3d(-100%, 0, 0); - -o-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); + left:0; + transform:translate3d(-100%, 0, 0); + -webkit-transform:translate3d(-100%, 0, 0); + -moz-transform:translate3d(-100%, 0, 0); + -ms-transform:translate3d(-100%, 0, 0); + -o-transform:translate3d(-100%, 0, 0); } .is-visible .cd-panel-container { - -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - -o-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - -webkit-transition-delay: 0s; - -moz-transition-delay: 0s; - transition-delay: 0s; + transform:translate3d(0, 0, 0); + -webkit-transform:translate3d(0, 0, 0); + -moz-transform:translate3d(0, 0, 0); + -ms-transform:translate3d(0, 0, 0); + -o-transform:translate3d(0, 0, 0); + transition-delay:0s; + -webkit-transition-delay:0s; + -moz-transition-delay:0s; } -@media only screen and (min-width: 768px) { - .cd-panel-container { - width: 70%; - } + +@media only screen and (min-width:768px) { + .cd-panel-container {width:70%;} } -@media only screen and (min-width: 1170px) { - .cd-panel-container { - width: 50%; - } + +@media only screen and (min-width:1170px) { + .cd-panel-container {width:50%;} } .cd-panel-content { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - padding: 60px 15px; - overflow: auto; - /* smooth scrolling on touch devices */ - -webkit-overflow-scrolling: touch; + position:absolute; + top:0; + left:0; + width:100%; + height:100%; + padding:60px 15px; + overflow:auto; + /* smooth scrolling on touch devices */ + -webkit-overflow-scrolling:touch; } + .cd-panel-content p { - color: #424f5c; - line-height: 1.4; - margin: 2em 0; + color:#424f5c; + line-height:1.4; + margin:2em 0; } -.cd-panel-content p:first-of-type { - margin-top: 0; + +.cd-panel-content p:first-of-type {margin-top:0;} + +@media only screen and (min-width:768px) { + .cd-panel-content p {line-height:1.6;} } -@media only screen and (min-width: 768px) { - .cd-panel-content p { - line-height: 1.6; - } -} \ No newline at end of file