792 lines
15 KiB
CSS
792 lines
15 KiB
CSS
/*
|
|
TABLE OF CONTENTS
|
|
|
|
(todo)
|
|
(use tags so people can jump about)
|
|
|
|
NOTES
|
|
|
|
Colours
|
|
red #ed1c24
|
|
pink #ffaec9
|
|
yellow #fff200
|
|
*/
|
|
|
|
a { color:#333; }
|
|
a:hover { color:#666; }
|
|
|
|
body {
|
|
background-color:#eee;
|
|
font-size:14px;
|
|
padding-top:50px;
|
|
}
|
|
|
|
hr {
|
|
border:none;
|
|
border-top:1px solid #ffaec9;
|
|
margin:1.5em 0;
|
|
}
|
|
|
|
/*
|
|
Input field stuffs - - - - - - - - -
|
|
*/
|
|
|
|
input[type="text"],input[type="email"],input[type="password"], select, textarea {
|
|
padding:3px;
|
|
/*box-shadow:inset 0 1px 1px rgba(0,0,0,0.2);*/
|
|
background-color:#f6f6f6;
|
|
border:1px solid #ffaec9;
|
|
margin-bottom:1em;
|
|
font-size:1em !important;
|
|
}
|
|
|
|
/* Post entry field */
|
|
textarea.TextBox {
|
|
min-height:10em !important;
|
|
padding:1em;
|
|
}
|
|
.textarea-autosize {
|
|
resize:vertical !important;
|
|
}
|
|
|
|
/* ?? */
|
|
textarea.MultiComplete {height:32px;}
|
|
|
|
/* Hides that pointless gender enquiry and display */
|
|
li.Gender { display:none !important; }
|
|
|
|
/*
|
|
Categories - - - - - - - - - - -
|
|
*/
|
|
|
|
.CategoryList .Depth2 {
|
|
margin-top: -6px !important; /* Join to parent category */
|
|
padding-left: 1em !important; /* Overide default indent */
|
|
}
|
|
|
|
/*
|
|
Posts - - - - - - - - - - - -
|
|
*/
|
|
|
|
.ItemDiscussion, .DataList .Item {
|
|
padding: 1em;
|
|
border: 1px solid #ffaec9;
|
|
}
|
|
|
|
.DataList {
|
|
margin-top:10px;
|
|
}
|
|
|
|
.DataList .Item {
|
|
background:#fdfdfd !important;
|
|
margin-bottom:5px;
|
|
}
|
|
|
|
.DataList .Read {
|
|
background:#fdfdfd !important;
|
|
}
|
|
|
|
/* Post author info. */
|
|
.DiscussionHeader, div.Item-Header.CommentHeader {
|
|
margin:0;
|
|
background:#ffaec9;
|
|
}
|
|
|
|
/*
|
|
- - - - - - - - - - - - - -
|
|
*/
|
|
|
|
/* Make full-width ? */
|
|
.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;
|
|
}
|
|
|
|
/*
|
|
Head is top panel, row is within that - - - -
|
|
(beyond here still a mess)
|
|
*/
|
|
|
|
#Head {
|
|
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;
|
|
}
|
|
|
|
/* Title colour */
|
|
#Head a {color:#fff;}
|
|
#Head a:hover {color:#ed1c24;}
|
|
|
|
#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: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;}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
#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;}
|
|
|
|
.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;}
|
|
|
|
.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;
|
|
}
|
|
|
|
#Head #Search form {
|
|
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;
|
|
}
|
|
#Head #Search form input.Button {
|
|
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;}
|
|
}
|
|
|
|
#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 h3 {
|
|
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);
|
|
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;
|
|
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;
|
|
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;
|
|
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);
|
|
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;
|
|
}
|
|
|
|
.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-keyframes cd-close-1 {
|
|
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);}
|
|
}
|
|
|
|
@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);
|
|
}
|
|
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);}
|
|
}
|
|
|
|
@-moz-keyframes cd-close-2 {
|
|
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);
|
|
}
|
|
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;
|
|
}
|
|
|
|
.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;}
|
|
|
|
.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;
|
|
}
|
|
|
|
@media only screen and (min-width:768px) {
|
|
.cd-panel-header {width:70%;}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
.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 */
|
|
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);
|
|
}
|
|
|
|
.cd-panel-close::after {
|
|
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;
|
|
}
|
|
|
|
.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-duration:0.3s;
|
|
-webkit-transition-duration:0.3s;
|
|
-moz-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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.cd-panel-container {
|
|
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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
.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);
|
|
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: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;
|
|
}
|
|
|
|
.cd-panel-content p {
|
|
color:#424f5c;
|
|
line-height:1.4;
|
|
margin:2em 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;}
|
|
}
|