First commit (Fancy 1.1, unchanged)
This commit is contained in:
GitHub
parent
90c79321c2
commit
03c2650885
|
|
@ -0,0 +1,11 @@
|
|||
<?php if (!defined('APPLICATION')) exit();
|
||||
|
||||
$ThemeInfo['Fancy'] = array(
|
||||
'Name' => 'Fancy',
|
||||
'Description' => "Vanilla Forums Responsive Template by Hoangsoft.com",
|
||||
'Version' => '1.1',
|
||||
'Author' => "Hoangsoft.com",
|
||||
'License'=>"GNU GPL2",
|
||||
'AuthorEmail' => 'info@hoangsoft.com',
|
||||
'AuthorUrl' => 'http://hoangsoft.com'
|
||||
);
|
||||
|
|
@ -0,0 +1,562 @@
|
|||
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%;
|
||||
}
|
||||
.fl{float: left;}
|
||||
.fr{float: right;}
|
||||
.clear{clear: both;}
|
||||
/* Breadcrumbs */
|
||||
.BreadcrumbsWrapper {
|
||||
font-size: 13px;
|
||||
padding: 6px 10px;
|
||||
background: #fafafa;
|
||||
border: 1px dashed #eee;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#Frame{
|
||||
|
||||
}
|
||||
/* #fdfdfd Head & Menu */
|
||||
#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;
|
||||
}
|
||||
#Head .Row{
|
||||
width: auto !important;
|
||||
min-width: 760px;
|
||||
max-width: 1000px;
|
||||
margin: auto;
|
||||
}
|
||||
#Head a {
|
||||
color: #1E79A7;
|
||||
}
|
||||
#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;}
|
||||
.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;}
|
||||
#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);
|
||||
-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);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.cd-panel.is-visible {
|
||||
visibility: visible;
|
||||
-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);
|
||||
-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;
|
||||
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% {
|
||||
-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);
|
||||
}
|
||||
}
|
||||
@-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% {
|
||||
-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);
|
||||
}
|
||||
}
|
||||
.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;
|
||||
-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%;
|
||||
}
|
||||
}
|
||||
@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 */
|
||||
-webkit-backface-visibility: hidden;
|
||||
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);
|
||||
}
|
||||
.cd-panel-close::after {
|
||||
-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;
|
||||
-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;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
-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 {
|
||||
-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;
|
||||
}
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
jQuery(document).ready(function($){
|
||||
//open the lateral panel
|
||||
$('.cd-btn').on('click', function(event){
|
||||
event.preventDefault();
|
||||
$('.cd-panel').addClass('is-visible');
|
||||
});
|
||||
//clode the lateral panel
|
||||
$('.cd-panel').on('click', function(event){
|
||||
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-close') ) {
|
||||
$('.cd-panel').removeClass('is-visible');
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
{asset name='Head'}
|
||||
<script src="/themes/Fancy/design/slidepanel.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
<body id="{$BodyID}" class="{$BodyClass}">
|
||||
|
||||
<div id="Frame">
|
||||
<div id="Head">
|
||||
<div class="Row">
|
||||
<ul class="fl SiteMenu HiddenOnDesktop">
|
||||
{home_link}
|
||||
</ul>
|
||||
<ul class="fl SiteMenu HiddenOnMobile">
|
||||
{home_link}
|
||||
{activity_link}
|
||||
{discussions_link}
|
||||
</ul>
|
||||
<strong class="SiteTitle"><a href="{link path="/"}">{logo}</a></strong>
|
||||
<ul class="fr SiteMenu HiddenOnDesktop">
|
||||
<li><a href="#0" class="cd-btn">Menu</a></li>
|
||||
</ul>
|
||||
<ul class="fr SiteMenu HiddenOnMobile">
|
||||
{dashboard_link}
|
||||
{inbox_link}
|
||||
{profile_link}
|
||||
{signinout_link}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="Body">
|
||||
<div class="SiteSearch">{searchbox}</div>
|
||||
<div class="clear"></div>
|
||||
<ul class="SiteMenu">
|
||||
{custom_menu}
|
||||
</ul>
|
||||
<div class="Row">
|
||||
<div class="BreadcrumbsWrapper P">{breadcrumbs}</div>
|
||||
<div class="Column PanelColumn" id="Panel">
|
||||
{asset name="Panel"}
|
||||
</div>
|
||||
<div class="Column ContentColumn" id="Content">{asset name="Content"}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="Foot">
|
||||
<div class="Row">
|
||||
<a href="http://hoangsoft.com" rel="nofollow" class="DesignedByHoangsoft">Designed by Hoangsoft, LLC</a>
|
||||
{asset name="Foot"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{event name="AfterBody"}
|
||||
<div class="cd-panel from-right">
|
||||
<header class="cd-panel-header">
|
||||
<strong class="SiteTitle"><a href="{link path="/"}">{logo}</a></strong>
|
||||
<a href="#0" class="cd-panel-close cd-close"><span class="cd-close">Close</span></a>
|
||||
</header>
|
||||
<div class="cd-panel-container">
|
||||
<div class="cd-panel-content">
|
||||
<ul class="FilterMenu">
|
||||
{activity_link}
|
||||
{discussions_link}
|
||||
{dashboard_link}
|
||||
{inbox_link}
|
||||
{profile_link}
|
||||
{signinout_link}
|
||||
</ul>
|
||||
{asset name="Panel"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue