// background color $backgroundColor : #0e79ab; // text settings $textColor : #7e838b; $textFont : Arial, sans-serif; $accentFont : Ubuntu, "Futura", Futura, "Dosis", Arial, sans-serif; $accentColor : #ef4723; $accentDarker : adjust-lightness($accentColor, -15%); // colors $succesColor : #39884c; $errorColor : #cb2524; // alert colors $warningColor : #eab84e; $errorColor : #d85c5b; $successColor : #6ba679; $infoColor : #4a9bc0; @charset "utf-8"; @import "compass"; @import 'twitter/bootstrap'; @import "icons/*.png"; @import 'font-awesome-2.0'; @import 'full-calendar-1.5.4'; @import 'datatables'; @import 'general'; @import 'general_classes'; // @import 'specific'; @import url(http://fonts.googleapis.com/css?family=Ubuntu:400,700); $icons-spacing: 10px; $icons-sprite-dimensions: true; @for $i from 1 through 20 { .color#{$i} { color: adjust-hue(#efa923, ($i - 1)*150) !important; } } ul.messages_layout { & { position:relative; margin:0; padding:0; } li { float:left; width:100%; list-style:none; position:relative; &.left { padding-left:75px; } &.right { padding-right:75px; .avatar { right:0; left:auto; } .message_wrap .arrow { right:-12px; left:auto; @include icons-sprite(comment-right); } } &.by_myself .message_wrap { border:1px solid #b3cdf8; .info a.name { color:#4a8cf7; } } a.avatar { position:absolute; left:0; top:0; img { @include border-radius(5px); } } .message_wrap { @include border-radius(3px); position:relative; border: 1px solid #e9e9e9; padding:10px; border:1px solid #cbcbcb; margin-bottom:20px; float:left; width:100%; background:#fefefe; @include box-shadow (rgba(0, 0, 0, 0.1) 0 1px 0px); .arrow { @include icons-sprite(comment); height: icons-sprite-height(comment); width: icons-sprite-width(comment); position:absolute; left:-12px; top:13px; } .info { float:left; width:100%; border-bottom:1px solid #fff; line-height:23px; .name { float:left; font-weight:bold; color:#483734; } .time { float:left; font-size:11px; margin-left:6px; } } .text { float:left; width:100%; border-top:1px solid #cfcfcf; padding-top:5px; } } } } a.responsive_menu { display:block; font-size:21px; float:left; z-index:10; line-height:15px; cursor:pointer; } // sidebar #sidebar { float:left; width:200px; margin:0 0 0 10px; height:auto; overflow:hidden; &.collapse.in { overflow:hidden; } } .sidebar_box { float:left; width:100%; margin:0 0 15px 0; padding:0; display:block; &.statistics { & > .container > .row-fluid.fluid { background: url("../img/patterns/bg_dark2.png") left bottom repeat-x #E9ECF1; } } .container { @extend .button; @include border-radius(10px 0 0 10px); padding:0; margin-top:5px; overflow:hidden; border-left-color:#fff; border-top-color:#fff; border-bottom-color:#fff; .title { padding: 5px; background: url("../img/gradient1.png") left bottom repeat-x #E9ECF1; box-shadow: inset 0 1px 0 white, 0 1px 2px rgba(0, 0, 0, 0.02); border-radius: 2px 2px 0 0; border-bottom: 1px solid #C0C8D0; } h1, h2, h3, h4, h5, h6 { margin:0; padding:0; // line-height:1.2; } & > .row-fluid { padding:5px; } .row-fluid { min-height:auto; [class*="span"] { min-height:20px; } } } } #sidebar_menu { & > li { &.active, &:hover, &.opened { @extend .button; @include border-radius(5px 0 0 5px); padding:0; opacity:1; border-color:#fff; } &.active { border-right-color:#fff; background:#fff; } & > a { float:left; width:100%; img { float:left; margin-right:10px; } } } & > li { background:#fff url(../img/patterns/bg_dark2.png) top right repeat-y; } & li { & { @include border-radius(5px 0 0 5px); border:1px solid #f1f1f1; margin-bottom:4px; list-style:none; padding:0; float:left; width:100%; opacity:0.7; overflow:hidden; -webkit-transition: .2s all ease-in-out; -moz-transition: .2s all ease-in-out; -o-transition: .2s all ease-in-out; transition: .2s all ease-in-out; &:hover { opacity:1; } &.active { padding:0; opacity:1; } a { & { @extend .dropdown_arrow; -webkit-transition: .2s all ease-out; -moz-transition: .2s all ease-out; -o-transition: .2s all ease-out; transition: .2s all ease-out; padding:10px; color:#483734; position:relative; } } ul { margin:0; padding:0; width:100%; float:left; li { padding:0; margin:0; a { // padding:3px 3px 3px 42px; margin:0; float:left; width:100%; &:before { width:0; height:0; } &:hover { text-decoration:none; background:#fff; padding:10px 5px 10px 15px; } } } } } } } // DEFAULT html { background:url(../img/patterns/whitey.png); font-size: 62.5%; text-rendering: optimizeLegibility; } body { font-size : 13px; font-size: 1.3rem; font-family : $textFont; color : $textColor; // background: rgba(0, 0, 0, 0.5); width:100%; float:left; overflow-x:hidden; padding:15px 0 0 0; // background:transparent; background:url(../img/patterns/bg_dark.png) top left repeat-y; } .wrapper { position: relative; padding-bottom: 100px; overflow: hidden; } // SIDEBAR .stripe { width: 123px; position: absolute; top: 0; left: 10px; z-index: -1; border: 1px solid $black; background-color: #2e6983; @include box-shadow(rgba(0,0,0,0.6) 1px 2px 4px inset); &.top { height: 10px; } &.bottom { top: 82px; height: 9999px; } } .logo { display:inline-block; a { // @include icons-sprite(logo); // height: icons-sprite-height(logo); // width: icons-sprite-width(logo); background:url(../img/logo.png) 0 0 no-repeat; height:44px; width:157px; float:left; margin:0 15px 15px; &:hover { background-position:0 -44px; } } } #responsive_part { display:none; float:left; width:100%; margin:12px 0 0; .logo { float:left; } ul.responsive { float:right; margin:3px 0 0 0 ; li { padding:0px; float:left; btn { padding: 7px 7px 4px; } i { font-size:28px; } a { float:right; } } } } #header { & { width:100%; padding:20px 10px; display:block; float:right; } .breadcrumbs { display:inline-block; margin: 0 0 -3px 15px; ul { float:left; width:100%; margin:0; li { float:left; list-style:none; line-height:13px; a { color:#aaa5a4; font-size:12px; } .arrow { float:right; @include icons-sprite(arrow_next_small); height: icons-sprite-height(arrow_next_small); width: icons-sprite-width(arrow_next_small); margin:3px 8px 0 0; opacity:0.5; } } } } } // Start top_right buttons #main .top_right { float:right; margin:7px; ul { float:left; margin:0; padding:0; &.responsive { display:none; } .icon_item { & { height:35px; } i { font-size:24px; width:0.9em; height:13px; color:#483734; } } &.nav > li { @extend .button; } & > li { float:left; list-style:none; margin-left:10px; line-height:16px; & > ul { opacity:0; height:0; overflow:hidden; -webkit-transition: .2s all ease-in-out; -moz-transition: .2s all ease-in-out; -o-transition: .2s all ease-in-out; transition: .2s all ease-in-out; margin-top:2px; display:block; } ul[role="menu"] { border-top:none; @include border-radius(3px); overflow:hidden; li { & { margin:0; width:100%; @include border-radius(0); overflow:hidden; } &:hover { background:#fff; a { padding:10px 4px 10px 16px; } } a { & { -webkit-transition: .2s all ease-out; -moz-transition: .2s all ease-out; -o-transition: .2s all ease-out; transition: .2s all ease-out; } &:before { width:0; height:0; } // Sub menu icons i { font-size:17px; color:#483734; } } } } &.open { ul.dropdown-menu { opacity:1; height:auto; margin-top:10px; display:block; overflow:visible; } } ul.messages { right:-2px; left:auto; width:300px; &:before { right:9px; left:auto; } &:after { right:10px; left:auto; } i { font-size:inherit; margin-right:5px; } .heading { float:left; width:100%; .title { font-weight: bold; color: #483734; margin: 10px 0 0 12px; float: left; font-size:14px; } .link { float:right; a { float:left; font-size:13px; } } } .container { margin:0; padding:0; width:auto; @include box-shadow(none); } ul { & { float:left; width:100%; margin:0; } li { & { float:left; width:100%; margin:0; &:first-child { border-top:1px solid #ccc; } } a { float:left; width:100%; height:auto; margin:0; padding:0; } .avatar { float:left; position:absolute; left:0; img { float:left; margin:3px; padding:0; @include border-radius(3px); } } .container { width:auto; padding:0 0 3px 60px; -webkit-transition: .2s all ease-out; -moz-transition: .2s all ease-out; -o-transition: .2s all ease-out; transition: .2s all ease-out; &:hover { background:#f1f1f1; } & > span { float:left; color:#483734; } .name { font-size:13px; font-weight:bold; } .message { color:#917c78; font-size:12px; line-height:22px; vertical-align:top; width:100%; } .date { color:#917c78; font-size:10px; line-height:11px; } } } } .footer { float:left; width:100%; a { background: #F1F1F1; float: left; width: 100%; text-align: center; font-weight: bold; margin-top: 1px; border-top:1px solid #ccc; -webkit-transition: .2s all ease-out; -moz-transition: .2s all ease-out; -o-transition: .2s all ease-out; transition: .2s all ease-out; padding:10px 10px 10px 20px; @include border-radius(0 3px 3px 0); &:hover { background:#dbdbdb; text-decoration:none; padding-right:3px; } } } } a[role="button"] { & { @extend .dropdown_arrow; &.dropdown-toggle { padding-right:30px; } &:after { top:16px !important; } span.title { display:block; float:left; padding:0 5px; } height:35px; } span.icon { float:left; img { float:left; } } } } } } // End top_right buttons ul.general_statistics { margin:0; .box { padding:12px; } li { list-style:none; // @include box-shadow2( inset #ccc 0 1px 1px , #fcfcfc 0 1px 1px, #fff 0 0 1px 1px); box-shadow: inset 0 1px 1px #CCC, 0 1px 2px #CCC , 0 0px 0px 1px #F3F3F2; -webkit-box-shadow: inset 0 1px 1px #CCC, 0 1px 2px #CCC , 0 0px 0px 1px #F3F3F2; -moz-box-shadow: inset 0 1px 1px #CCC, 0 1px 2px #CCC , 0 0px 0px 1px #F3F3F2; border: 1px solid #fff; // background: #EEE; padding:10px; } a { & { color:#a0a0a0; // margin:10px; padding:10px; width:100%; height:100%; float:left; @include border-radius(4px); box-shadow: inset #fff 0 1px 0px, 0 1px 1px #B5B5B5; -webkit-box-shadow: inset #fff 0 1px 0px, 0 1px 1px #B5B5B5; -moz-box-shadow: inset #fff 0 1px 0px, 0 1px 1px #B5B5B5; border: 1px solid #DFDFDF; @include background-image(linear-gradient(#f7f7f7, #e8e8e8)); } &:hover { text-decoration:none; color:#4a8cf7; .icon img { transform: scale(2.3); -webkit-transform: scale(2.3); -moz-transform: scale(2.3); -o-transform: scale(2.3); -ms-transform: scale(2.3); opacity: 0; &.hover { opacity:1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); } } } } .icon, .heading, .desc, .icon img { width:100%; text-align:center; opacity:1; // float:left; } .icon { position:relative; height: 44px; img { width:auto; height:auto; border: none; margin:0 auto; display:block; // position:absolute; -webkit-transition: .2s all ease-in-out; -moz-transition: .2s all ease-in-out; -o-transition: .2s all ease-in-out; transition: .2s all ease-in-out; &.hover { margin-top:-43px; opacity:0; transform: scale(0.3); -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -o-transform: scale(0.3); -ms-transform: scale(0.3); } } } .heading { font-size:36px; line-height:45px; } .desc { text-transform:uppercase; font-size: 11px; line-height:15px; opacity:0.7; } } #main { padding:0 10px 0 210px; width:100%; clear:right; #container { float:left; width:100%; } .container_top { background:#e94522; height:50px; @include border-radius(3px 3px 0 0); margin: -9px -9px 15px -9px; position:relative; .row-fluid { // padding-left:8px; } form { float:right; width:100%; position:relative; &.form-search { margin:0; width:100%; float:left; } .input-append { float:left; width:100%; input.search-query { @include border-radius(3px); width: 198px; float: right; font-size: 14px; padding: 2px 5px 2px 30px; line-height: 17px; height: 2.2em; margin: 2px; background: url('images/search.png') no-repeat 9px 7px white; -webkit-transition: width 100ms; -moz-transition: width 100ms; -o-transition: width 100ms; -ms-transition: width 100ms; transition: width 100ms; &:focus { width: 240px; -webkit-transition: width 100ms; -moz-transition: width 100ms; -o-transition: width 100ms; -ms-transition: width 100ms; transition: width 100ms; } } button.btn_search { @include icons-sprite(search); height: icons-sprite-height(search); width: icons-sprite-width(search); text-indent:-9999px; border:none; float:right; position:absolute; left:4px; top:13px; z-index:20; } } } } .container { overflow:hidden; @include border-radius(3px); @include box-shadow(0px 1px 2px 1px #afafaf); } } // Editor ul.wysihtml5-toolbar { margin: 0; padding: 0; display: block; } ul.wysihtml5-toolbar::after { clear: both; display: table; content: ""; } ul.wysihtml5-toolbar > li { float: left; display: list-item; list-style: none; margin: 0 5px 10px 0; } ul.wysihtml5-toolbar a[data-wysihtml5-command=bold] { font-weight: bold; } ul.wysihtml5-toolbar a[data-wysihtml5-command=italic] { font-style: italic; } ul.wysihtml5-toolbar a[data-wysihtml5-command=underline] { text-decoration: underline; } ul.wysihtml5-toolbar a.btn.wysihtml5-command-active { background-image: none; -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),0 0 0 rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),0 0 0 rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),0 0 0 rgba(0, 0, 0, 0.05); background-color: #E6E6E6; background-color: #D9D9D9 9; outline: 0; } ul.wysihtml5-commands-disabled .dropdown-menu { display: none !important; } .wysihtml5-toolbar i { font-size:14px; width:14px !important; height:14px; } // Stats .simple_stats { i { margin-bottom:0; &.well { padding:17px; } } .value { margin:5px 0 0 15px } } // icons .icons-list { list-style:none; } #fontawesome-icons { i { color:#333; font-size:20px; line-height:1.5; vertical-align:middle; } li:hover { cursor:pointer; background:#ffffff; @include border-radius(5px); line-height:48px; i { font-size:48px; color:#e94522; } } } [class^="entypo-icon-"], [class*=" entypo-icon-"] { vertical-align: middle; font-size:36px; color:#333; } // Login page #login { width:400px; height:495px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; #arrow_register { height:50px; width:23px; background:url(../img/arrow.png); position:absolute; right: -21px; top: 24px; } .logo a { background-position:0 -44px; } .members { position:absolute; right:0; top:0px; } a { outline:none; &:hover { text-decoration:none; } } .top-background { display:block; height:56px; width:100%; z-index:100; .fill-background { float:left; width:100%; height:56px; z-index:1; position:relative; &.right { padding-right:53px; } &.left { // padding-left:53px; // padding-right:0; } .bg { background:#fff; float:left; height:56px; @include border-radius(5px 0 0 0); } } #login-corner-shadow { background:url(../img/login-corner.png) 0 0 no-repeat; height:56px; width:53px; position:absolute; top:0; right:0; &.left { background:url(../img/login-corner2.png) 0 0 no-repeat; } } } .container { position:relative; z-index:99; padding:25px 35px; @include border-radius( 0 0 5px 5px); height:300px; display:inline-block; // background:none; .content { margin-top: -50px; float: left; width: 100%; z-index: 6; position: relative; } } .message { // margin-top:-20px; h3, h4 { margin:0; line-height:30px; } } .alternative_login { a { border:none; padding:6px; } .btn { color:#fff; box-shadow: inset #6ca0da 0 1px 0px, inset 0 0px 1px #1d325e; -webkit-box-shadow: inset #6ca0da 0 1px 0px, inset 0 0px 1px #1d325e; -moz-box-shadow: inset #6ca0da 0 1px 0px, inset 0 0px 1px #1d325e; @include border-radius(4px); } .btn { position:relative; padding-left:20px; color:#fff; text-shadow:none; } li { border:none; } .box { @include border-radius(5px); padding:4px; } i { font-size:22px; float:left; position:absolute; left:4px; top:6px; } .desc { text-transform: none; font-size: 12px; position:relative; } .btn-twitter { background-color:#2684ad; @include background-image(linear-gradient(#2ba5da, #2684ad)); } .btn-facebook { background-color:#324b7f; @include background-image(linear-gradient(#5179c7, #324b7f)); } .facebook { i { // width:0.8em; top:8px; left:2px; } } } .login { z-index:1; .top-background .fill-background .bg { // background:blue; } } .register { z-index:0; .top-background .fill-background .bg { // background:red; } } } // Flip effect .support-note span{ color: #ac375d; font-size: 16px; display: none; font-weight: bold; text-align: center; padding: 5px 0; } .no-cssanimations .support-note span.no-cssanimations, .no-csstransforms .support-note span.no-csstransforms, .no-csstransforms3d .support-note span.no-csstransforms3d, .no-csstransitions .support-note span.no-csstransitions{ display: block; } /* Content Flip Style */ .bb-bookblock { width: 100%; height: 355px; position: relative; // background: pink; z-index: 100; // overflow:hidden; } .bb-page { width: 50%; height: 100%; left: 50%; position: absolute; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; background:none; } .bb-page > div, .bb-outer, .bb-content { position: absolute; height: 100%; top: 0; left: 0; } .bb-content { // background: #fff; } .bb-inner { position: relative; width: 100%; height: 100%; } .bb-overlay, .bb-outer { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .bb-page > div { width: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .bb-back { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); } .bb-outer { width: 100%; overflow: hidden; z-index: 999; } .bb-overlay, .bb-flipoverlay { // background-color: rgba(0, 0, 0, 0.7); position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; z-index:100; } .bb-flipoverlay { background-color: rgba(0, 0, 0, 0.2); } .bb-bookblock > div.bb-page:first-child, .bb-bookblock > div.bb-page:first-child .bb-back { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); } .bb-item { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; // background: blue; } // 404 page #error404 { width:600px; height:400px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; .container { padding:10px 10px 0 10px; } img { position:relative; } h1 { font-size: 60px; font-family: arial; font-weight: bold; } h2 { font-size: 36px; margin: 40px 0 -15px 0; } h3 { font-size:26px; } } // Profile .profile .legend { min-height:65px !important; } // File Explorer .container { #elfinder { @include border-radius(3px); border: 1px solid #e9e9e9; background-color: #fff; border-color: #cbcbcb #cbcbcb #8F8F8F; border-image: none; border-style: solid; border-width: 1px; margin-bottom:0px; overflow:hidden; @include box-shadow (rgba(0, 0, 0, 0.1) 0 1px 0px); } .elfinder .elfinder-button { width:auto !important; height:auto !important; } .elfinder .elfinder-navbar { background:#F9F9F9; } .ui-widget-header { position: relative; background: url("../img/gradient1.png") repeat-x #E9ECF1; box-shadow: inset 0 1px 0 white,0 1px 2px rgba(0, 0, 0, 0.02); border-radius: 2px 2px 0 0; border-bottom: 1px solid #C0C8D0; padding:3px 10px; } .elfinder-button-search input { @include border-radius(3px); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 198px; float: right; font-size: 14px; padding: 2px 5px 2px 30px; line-height: 17px; height: 2.2em; margin: 2px; background: url("images/search.png") no-repeat 9px 7px white; } .elfinder-button-search .ui-icon { background:none; } .elfinder-buttonset { margin:5px 4px; } .ui-widget-header.ui-corner-bottom { border-bottom:0; border-top: 1px solid #CCC; @include border-radius(0 0 3px 3px); overflow:hidden; } }