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.
This commit is contained in:
GitHub
parent
ce42dce036
commit
5e668c4677
|
|
@ -1,15 +1,37 @@
|
|||
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;}
|
||||
/* Full-width */
|
||||
.Row {
|
||||
width: 100%;
|
||||
|
||||
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 */
|
||||
|
||||
.BreadcrumbsWrapper {
|
||||
font-size:13px;
|
||||
padding:6px 10px;
|
||||
|
|
@ -17,65 +39,175 @@ input[type="text"],input[type="email"],input[type="password"], select, textarea{
|
|||
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;
|
||||
padding:0.5em 0;
|
||||
height:1.4em;
|
||||
text-align:center;
|
||||
box-shadow:0 1px 4px rgba(0,0,0,0.3);
|
||||
border-bottom: 1px solid #333;
|
||||
background: #373c4a;
|
||||
border-bottom:2px solid #fff200;
|
||||
background:#ffaec9;
|
||||
z-index:11;
|
||||
}
|
||||
|
||||
#Head .Row{
|
||||
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{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;}
|
||||
|
||||
#Head .SiteMenu>li>a {
|
||||
float:left;
|
||||
color:#9ea0a5;
|
||||
font-weight:normal;
|
||||
padding:0 10px;
|
||||
font-size:13px;
|
||||
color:#9ea0a5;
|
||||
}
|
||||
|
||||
#Head .SiteMenu>li>a:hover {
|
||||
color:#ed1c24;
|
||||
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 .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;}
|
||||
|
||||
.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;}
|
||||
|
||||
.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;
|
||||
|
|
@ -85,47 +217,64 @@ body.Profile.EditMode #Content form{background: transparent !important;}
|
|||
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;
|
||||
}
|
||||
|
||||
/* Backwards compatibility for themes that extended/customized the old version */
|
||||
#Body .Wrapper #Content {
|
||||
margin: 0 215px 0 0;
|
||||
#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;}
|
||||
|
||||
.Banner ul {
|
||||
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 a {
|
||||
color:#666;
|
||||
font-weight:bold;
|
||||
}
|
||||
.Banner ul li,
|
||||
#Menu li { display: inline; }
|
||||
.Banner ul li a,
|
||||
#Menu a {
|
||||
#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 {
|
||||
|
||||
.Banner ul li a:hover, #Menu a:hover {
|
||||
text-decoration:underline;
|
||||
color:#fdfdfd;
|
||||
}
|
||||
|
||||
#Head #Search form {
|
||||
float:right;
|
||||
padding:0;
|
||||
margin-top:-30px;
|
||||
}
|
||||
|
||||
#Head #Search form input.InputBox {
|
||||
width:204px;
|
||||
border:0;
|
||||
|
|
@ -143,40 +292,66 @@ body.Profile.EditMode #Content form{background: transparent !important;}
|
|||
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_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_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_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. */
|
||||
|
||||
/* 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 {
|
||||
#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;
|
||||
}
|
||||
|
||||
.BigButton {padding:8px 20px;}
|
||||
|
||||
.MeBox {width:200px;}
|
||||
|
||||
#Panel {
|
||||
overflow:visible;
|
||||
visibility:hidden;
|
||||
|
|
@ -185,37 +360,37 @@ body.Profile.EditMode #Content form{background: transparent !important;}
|
|||
width:auto;
|
||||
display:block;
|
||||
}
|
||||
.Column.ContentColumn {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
|
||||
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;}
|
||||
|
|
@ -233,9 +408,8 @@ body.Profile.EditMode #Content form{background: transparent !important;}
|
|||
}
|
||||
|
||||
/* Slider in Panel */
|
||||
.cd-main-content {
|
||||
text-align: center;
|
||||
}
|
||||
.cd-main-content {text-align:center;}
|
||||
|
||||
.cd-main-content h3 {
|
||||
color:#000;
|
||||
padding:4em 0;
|
||||
|
|
@ -251,13 +425,14 @@ body.Profile.EditMode #Content form{background: transparent !important;}
|
|||
-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;
|
||||
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);
|
||||
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
@ -266,10 +441,11 @@ body.Profile.EditMode #Content form{background: transparent !important;}
|
|||
height:100%;
|
||||
width:100%;
|
||||
visibility:hidden;
|
||||
transition:visibility 0s 0.6s;
|
||||
-webkit-transition:visibility 0s 0.6s;
|
||||
-moz-transition:visibility 0s 0.6s;
|
||||
transition: visibility 0s 0.6s;
|
||||
}
|
||||
|
||||
.cd-panel::after {
|
||||
/* overlay layer */
|
||||
position:absolute;
|
||||
|
|
@ -279,27 +455,30 @@ body.Profile.EditMode #Content form{background: transparent !important;}
|
|||
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;
|
||||
transition: background 0.3s 0.3s;
|
||||
}
|
||||
|
||||
.cd-panel.is-visible {
|
||||
visibility:visible;
|
||||
transition:visibility 0s 0s;
|
||||
-webkit-transition:visibility 0s 0s;
|
||||
-moz-transition:visibility 0s 0s;
|
||||
transition: visibility 0s 0s;
|
||||
}
|
||||
.cd-panel.is-visible::after {
|
||||
background:rgba(0, 0, 0, 0.6);
|
||||
transition:background 0.3s 0s;
|
||||
-webkit-transition:background 0.3s 0s;
|
||||
-moz-transition:background 0.3s 0s;
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
@ -307,69 +486,59 @@ body.Profile.EditMode #Content form{background: transparent !important;}
|
|||
}
|
||||
|
||||
@-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% {
|
||||
transform:rotate(0);
|
||||
-webkit-transform:rotate(0);
|
||||
-moz-transform:rotate(0);
|
||||
-ms-transform:rotate(0);
|
||||
-o-transform:rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform:rotate(45deg);
|
||||
-webkit-transform:rotate(45deg);
|
||||
-moz-transform:rotate(45deg);
|
||||
-ms-transform:rotate(45deg);
|
||||
-o-transform:rotate(45deg);
|
||||
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% {
|
||||
transform:rotate(0);
|
||||
-webkit-transform:rotate(0);
|
||||
-moz-transform:rotate(0);
|
||||
-ms-transform:rotate(0);
|
||||
-o-transform:rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform:rotate(-45deg);
|
||||
-webkit-transform:rotate(-45deg);
|
||||
-moz-transform:rotate(-45deg);
|
||||
-ms-transform:rotate(-45deg);
|
||||
-o-transform:rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.cd-panel-header {
|
||||
position:fixed;
|
||||
width:75%;
|
||||
|
|
@ -383,6 +552,7 @@ body.Profile.EditMode #Content form{background: transparent !important;}
|
|||
-moz-transition:top 0.3s 0s;
|
||||
transition:top 0.3s 0s;
|
||||
}
|
||||
|
||||
.cd-panel-header h3 {
|
||||
font-weight:bold;
|
||||
font-size:28px;
|
||||
|
|
@ -390,30 +560,26 @@ body.Profile.EditMode #Content form{background: transparent !important;}
|
|||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
transition:top 0.3s 0.3s;
|
||||
-webkit-transition:top 0.3s 0.3s;
|
||||
-moz-transition:top 0.3s 0.3s;
|
||||
transition: top 0.3s 0.3s;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:768px) {
|
||||
.cd-panel-header {
|
||||
width: 70%;
|
||||
}
|
||||
.cd-panel-header {width:70%;}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:1170px) {
|
||||
.cd-panel-header {
|
||||
width: 50%;
|
||||
}
|
||||
.cd-panel-header {width:50%;}
|
||||
}
|
||||
|
||||
.cd-panel-close {
|
||||
|
|
@ -429,6 +595,7 @@ body.Profile.EditMode #Content form{background: transparent !important;}
|
|||
white-space:nowrap;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.cd-panel-close::before, .cd-panel-close::after {
|
||||
/* close icon created in CSS */
|
||||
position:absolute;
|
||||
|
|
@ -438,48 +605,54 @@ body.Profile.EditMode #Content form{background: transparent !important;}
|
|||
width:20px;
|
||||
background-color:#424f5c;
|
||||
/* this fixes a bug where pseudo elements are slighty off position */
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility:hidden;
|
||||
-webkit-backface-visibility:hidden;
|
||||
}
|
||||
|
||||
.cd-panel-close::before {
|
||||
transform:rotate(45deg);
|
||||
-webkit-transform:rotate(45deg);
|
||||
-moz-transform:rotate(45deg);
|
||||
-ms-transform:rotate(45deg);
|
||||
-o-transform:rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.cd-panel-close::after {
|
||||
transform:rotate(-45deg);
|
||||
-webkit-transform:rotate(-45deg);
|
||||
-moz-transform:rotate(-45deg);
|
||||
-ms-transform:rotate(-45deg);
|
||||
-o-transform:rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.no-touch .cd-panel-close:hover {
|
||||
background-color:#ccc;
|
||||
}
|
||||
|
||||
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
|
||||
background-color:#ffffff;
|
||||
transition-property:transform;
|
||||
-webkit-transition-property:-webkit-transform;
|
||||
-moz-transition-property:-moz-transform;
|
||||
transition-property: transform;
|
||||
transition-duration:0.3s;
|
||||
-webkit-transition-duration:0.3s;
|
||||
-moz-transition-duration:0.3s;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
.no-touch .cd-panel-close:hover::before {
|
||||
transform:rotate(220deg);
|
||||
-webkit-transform:rotate(220deg);
|
||||
-moz-transform:rotate(220deg);
|
||||
-ms-transform:rotate(220deg);
|
||||
-o-transform:rotate(220deg);
|
||||
transform: rotate(220deg);
|
||||
}
|
||||
|
||||
.no-touch .cd-panel-close:hover::after {
|
||||
transform:rotate(135deg);
|
||||
-webkit-transform:rotate(135deg);
|
||||
-moz-transform:rotate(135deg);
|
||||
-ms-transform:rotate(135deg);
|
||||
-o-transform:rotate(135deg);
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
.cd-panel-container {
|
||||
|
|
@ -489,16 +662,17 @@ body.Profile.EditMode #Content form{background: transparent !important;}
|
|||
top:0;
|
||||
background:#f0f0f0;
|
||||
z-index:1;
|
||||
transition-property:transform;
|
||||
-webkit-transition-property:-webkit-transform;
|
||||
-moz-transition-property:-moz-transform;
|
||||
transition-property: transform;
|
||||
transition-duration:0.3s;
|
||||
-webkit-transition-duration:0.3s;
|
||||
-moz-transition-duration:0.3s;
|
||||
transition-duration: 0.3s;
|
||||
transition-delay:0.3s;
|
||||
-webkit-transition-delay:0.3s;
|
||||
-moz-transition-delay:0.3s;
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
|
||||
.from-right .cd-panel-container {
|
||||
right:0;
|
||||
-webkit-transform:translate3d(100%, 0, 0);
|
||||
|
|
@ -507,33 +681,32 @@ body.Profile.EditMode #Content form{background: transparent !important;}
|
|||
-o-transform:translate3d(100%, 0, 0);
|
||||
transform:translate3d(100%, 0, 0);
|
||||
}
|
||||
|
||||
.from-left .cd-panel-container {
|
||||
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);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
.is-visible .cd-panel-container {
|
||||
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);
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition-delay:0s;
|
||||
-webkit-transition-delay:0s;
|
||||
-moz-transition-delay:0s;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:768px) {
|
||||
.cd-panel-container {
|
||||
width: 70%;
|
||||
}
|
||||
.cd-panel-container {width:70%;}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:1170px) {
|
||||
.cd-panel-container {
|
||||
width: 50%;
|
||||
}
|
||||
.cd-panel-container {width:50%;}
|
||||
}
|
||||
|
||||
.cd-panel-content {
|
||||
|
|
@ -547,16 +720,15 @@ body.Profile.EditMode #Content form{background: transparent !important;}
|
|||
/* smooth scrolling on touch devices */
|
||||
-webkit-overflow-scrolling:touch;
|
||||
}
|
||||
|
||||
.cd-panel-content p {
|
||||
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;
|
||||
}
|
||||
.cd-panel-content p {line-height:1.6;}
|
||||
}
|
||||
Reference in New Issue