File: /home/httpd/html/baretube.com.new/admin/public/scss/_site.scss
/* Globals */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
fieldset { border: 0; margin: 0; padding: 0; }
ol, ul { padding: 0; margin: 0; list-style: none; }
ol li, ul li { padding: 0; margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
a.btn:hover { text-decoration: none; }
img { display: block; max-width: 100%; @include no-select; }
strong, b { font-weight: 700; }
em { font-style: italic; }
button { margin: 0; }
.f-left, .pull-left { float: left !important; }
.f-right, .pull-right { float: right !important; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }
.hidden { display: none!important; }
.color-red { color: $c-red !important; }
.color-green { color: $c-green !important; }
/* Forms Placeholders */
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder { color: $c-gray; font-style: normal; font-family: $font-family; line-height: 35px; }
/* Viewport settings */
@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{box-shadow:0 0 2px rgba(255,255,255,0.2) inset;}
::-webkit-scrollbar-thumb{background:rgba(127,127,127,0.8);}
body ::-webkit-scrollbar{width:8px;}
/* Elements transitions */
a, .tf, button, .btn,
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="password"],
select, textarea, div.selector { @include transition($trans); }
/* HTML, BODY, MAIN WRAPPERS */
html {
min-width: 600px;
height: 100%;
&.auto-height {
height: auto;
}
}
body {
font-family: $font-family;
font-size: 14px;
font-weight: 400;
color: #333744;
width: 100%;
min-width: 600px;
min-height: 768px;
background-color: #f0f0f0;
&.colorbox-opened {
overflow: hidden;
}
&.login {
height: 100%;
}
}
header,
section,
footer { position: relative; }
.wrapper { max-width: 100%; position: relative; margin: 0 auto; z-index: 1; }
#page {
height: 100%;
width: 100%;
position: relative;
padding-bottom: 50px;
overflow-x: hidden;
}
.copyright {
position: absolute;
left: 0; bottom: 0;
margin-bottom: 24px;
width: 100%;
text-align: center;
font-size: 12px;
color: #fff;
text-shadow: 1px 1px 1px #647092;
b { font-weight: 300; }
}
/* MESSAGES
-------------------------- */
.notification, .msg {
background: #fff;
font-size: 14px;
min-height: 32px;
line-height: 32px;
vertical-align: middle;
margin: 20px 0 0 0;
padding: 10px 10px 10px 50px;
position: relative;
&:before {
font-size: 24px;
position: absolute;
top: 14px; left: 17px;
@extend .ion;
}
&.error {
border: 1px solid $c-red;
color: $c-red !important;
&:before {
color: $c-red;
@extend .ion-bug;
}
}
&.success {
border: 1px solid $c-green;
color: $c-green !important;
&:before {
color: $c-green;
@extend .ion-checkmark-circled;
}
}
&.warning {
border: 1px solid $c-orange;
&:before {
color: $c-orange;
@extend .ion-close-circled;
}
}
&.alert {
border: 1px solid $c-orange;
&:before {
color: $c-orange;
@extend .ion-alert-circled;
}
}
&.info {
border: 1px solid $c-darkblue;
background: $c-lightgray-bg;
&:before {
color: $c-darkblue;
@extend .ion-information-circled;
}
}
& + .form {
margin-bottom: -20px;
}
header + & {
margin-bottom: 20px;
}
table tr td:only-child > & {
margin: 0 -18px;
}
p { line-height: 32px !important; }
a { color: $c-red; }
}
.notification + .content-inner,
.notification + .form,
.notification + .pagetable {
margin-top: 20px;
}
.fine-uploader-status .notification {
margin: 0 0 10px 0;
}
/* ICONS
----------------------- */
i[class^="icon-"] {
display: inline-block;
text-indent: -9999px;
line-height: 20em;
overflow: hidden;
vertical-align: middle;
@extend .ion;
}
.icn, .icon, .ion {
&.ion-checkmark { color: $c-green; }
&.ion-close { color: $c-red; }
&.ion-unlocked { color: $c-green; }
&.ion-locked { color: $c-red; }
&.spin:before { @include animation(spin 2s linear infinite); }
.large & { font-size: 20px; }
}
.icon-status {
font-size: 22px;
&.enabled { color: $c-green; }
&.disabled { color: $c-red; }
}
/* PROGRESS BAR
------------------------ */
.progress-bar {
height: 40px;
margin-top: 10px;
border: 1px solid $c-green;
background: #fff image-url('bg-progressbar.png') repeat-x;
position: relative;
@include animation(progressbar .3s linear infinite);
span {
display: block;
color: #fff;
height: 38px;
background: $c-green;
position: relative;
i {
display: block;
position: absolute;
top: 0; left: 0;
font-size: 16px;
height: 38px;
line-height: 38px;
text-align: center;
font-style: normal;
color: #fff;
width: 100%;
}
}
&.short span i {
color: $c-green;
padding-left: 10px;
left: 100%;
width: auto;
}
}
.queue-processing {
height: 50px;
line-height: 50px;
border-bottom: 1px solid #d2d3d6;
margin-bottom: 10px;
font-size: 14px;
}
/* COLORBOX
------------------------- */
#colorbox,
#cboxOverlay,
#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;}
#cboxWrapper{max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay,
#cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious,
#cboxNext,
#cboxClose,
#cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox,
#cboxContent,
#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;}
#cboxOverlay{
background: image-url('bg-page.jpg') no-repeat center center;
background-size: cover;
opacity: 0.82;
}
#colorbox{outline:0;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{position:relative;z-index:10;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxLoadingOverlay{}
#cboxLoadingGraphic{}
#cboxPrevious,
#cboxNext,
#cboxSlideshow,
#cboxClose{overflow:visible;width:auto;background:none;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; width:25px; height:25px; }
#cboxNext{position:absolute; bottom:0; left:27px; width:25px; height:25px; }
#cboxClose{display:block;}
/* MCUSTOMSCROLLBAR
------------------------- */
.mCustomScrollbar,
.mCustomScrollbar.mCS_no_scrollbar { -ms-touch-action: auto; touch-action: auto; }
.mCustomScrollBox {
position: relative;
overflow: hidden;
height: 100%;
max-width: 100%;
outline: none;
direction: ltr;
}
.mCSB_container {
overflow: hidden;
width: auto; height: auto;
}
.mCSB_inside > .mCSB_container { margin-right: 20px; }
.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { margin-right: 0; }
.mCSB_scrollTools {
position: absolute;
width: 16px; height: auto;
left: auto; top: 0;
right: 0; bottom: 0;
}
.mCSB_outside + .mCSB_scrollTools { right: -26px; }
.mCSB_scrollTools .mCSB_draggerContainer {
position: absolute;
top: 0; left: 0;
bottom: 0; right: 0;
height: auto;
}
.mCSB_scrollTools a + .mCSB_draggerContainer { margin: 20px 0; }
.mCSB_scrollTools .mCSB_draggerRail {
width: 12px; height: 100%;
margin: 0 auto;
border: 1px solid #666;
@include radius(16px);
}
.mCSB_scrollTools .mCSB_dragger {
cursor: pointer;
width: 100%; height: 30px;
z-index: 1;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
width: 6px; height: auto;
margin: 3px auto;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
text-align: center;
background: #ccc;
@include radius(16px);
}
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; }
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; }
/* UNIFORM SELECTBOX
------------------------- */
div.selector {
@extend select;
width: 30%;
min-width: 300px!important;
padding: 0!important;
display: -moz-inline-box;
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
position: relative;
overflow: hidden;
-webkit-font-smoothing: antialiased;
&:after {
position: absolute;
top: 1px; right: 1px;
display: block;
content: "";
z-index: 1;
width: 34px; height: 32px;
background: #fff image-url('bg-select-arrow.png') no-repeat left center;
}
span {
color: $sidebar-bg-item-active-color;
text-overflow: ellipsis;
display: block;
overflow: hidden;
white-space: nowrap;
background-position: right 0;
width: 100%; height: 32px;
padding: 0 35px 0 10px;;
line-height: 32px;
position: absolute;
top: 1px; left: 0;
bottom: 0; right: 0;
z-index: 2;
cursor: pointer;
display: block;
}
select {
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
border: none;
background: none;
width: 100%; height: 32px;
line-height: 32px;
position: absolute;
top: 1px; left: 0;
bottom: 0; right: 0;
z-index: 2;
}
}
.col div.selector {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
select {
min-width: 0 !important;
width: 100% !important;
}
}
.columnized-input .col { padding-bottom: 10px; }
/* Content Defaults
------------------------- */
h1 {
font-size: 48px;
line-height: 50px;
font-weight: 300;
}
/* DEFAULT FORM FIELDS STYLES (a'ka reset)
------------------------- */
form input[type="text"],
form input[type="tel"],
form input[type="email"],
form input[type="number"],
form input[type="password"],
select, textarea {
height: 34px;
margin: 0;
padding: 0 10px;
line-height: normal;
font-size: 14px;
font-weight: 400;
color: $sidebar-bg-item-active-color;
background: #fff;
border: 1px solid #dbdddf;
-webkit-appearance: none;
@include radius(0);
&.short {
max-width: 140px;
}
&.full-width {
width: 100%!important;
}
&:focus {
border-color: $c-lightblue;
}
}
form .error-empty,
form .error {
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="password"],
select, textarea {
border-color: #f00;
}
span.error {
padding: 5px 0;
display: block;
color: #e00;
}
}
form input[type="number"] {
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
}
textarea {
margin: 0;
height: auto;
min-height: 150px;
resize: vertical;
&.large {
min-height: 300px;
}
&.small-text {
font-size: 11px;
}
}
h2.form-title {
background: #dbdddf;
height: 57px;
padding: 0 24px;
font-size: 24px;
font-weight: 400;
line-height: 54px;
color: #484b57;
}
label.checkbox {
font-size: 12px;
line-height: 20px;
color: #484b57;
position: relative;
input[type="checkbox"] {
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
position: absolute;
top: 0; left: 0;
&+i {
display: inline-block;
width: 17px; height: 17px;
background: #fff;
border: 1px solid #cbcccd;
position: relative;
vertical-align: middle;
margin-left: 3px;
top: -2px;
&:after {
display: none;
content: "";
position: absolute;
top: 2px; left: 2px;
right: 2px; bottom: 2px;
background: #cbcccd;
}
}
&.checked+i:after { display: block; }
}
}
label.radio {
font-size: 12px;
line-height: 20px;
color: #484b57;
position: relative;
input[type="radio"] {
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
position: absolute;
top: 0; left: 0;
&+i {
display: inline-block;
width: 16px; height: 16px;
background: #fff;
border: 1px solid #bfbfbf;
position: relative;
vertical-align: middle;
margin-right: 5px;
@include radius(20px);
&:after {
display: none;
content: "";
position: absolute;
top: 3px; left: 3px;
right: 3px; bottom: 3px;
background: #bfbfbf;
@include radius(20px);
}
}
&:checked+i:after { display: block; }
}
}
div.radios:after { @include clearfix; }
/* TABLES DEFAULTS
--------------------------- */
table {
width: 100%;
th {
font-size: 14px;
font-weight: bold;
background: #dbdddf;
height: 38px;
padding: 0 18px;
vertical-align: middle;
text-align: left;
&.options {
width: 180px;
text-align: right;
}
}
tr {
td {
padding: 10px 18px;
vertical-align: middle;
border-bottom: 1px solid #ccc;
text-align: left;
font-size: 12px;
line-height: 18px;
position: relative;
td.no-padding { padding: 0; }
&.icon-cell {
width: 40px;
padding: 10px;
}
&.current-thumb {
padding: 10px;
a { display: inline-block; }
img {
margin: 0 8px;
max-width: 300px;
border: 1px solid #cbcccd;
& + .upload {
padding: 8px;
}
}
}
.field.inline {
margin: 0;
display: inline-block;
span.label {
display: inline-block;
margin-right: 20px;
}
&:not(:first-child) {
margin-left: 50px;
}
}
.action-search.pull-right {
width: 100px;
padding: 0;
height: 34px;
line-height: 34px;
min-width: 0;
& + .inline-input {
padding-right: 110px;
}
}
&.options {
text-align: right;
white-space: nowrap;
label.checkbox input[type="checkbox"] + i { top: 0; }
a {
display: inline-block;
text-align: center;
padding: 0;
margin: 0 -1px;
font-size: 18px;
}
}
h6 { font-size: 14px; }
.move-position { cursor: move; }
.icon-lang {
display: inline-block;
margin-right: 10px;
position: relative;
}
.flag-icon {
margin-right: 10px;
position: relative;
top: -2px;
width: 20px;
height: 15px;
}
}
&:last-child td { border-bottom: 0; }
&:nth-child(even) {
background-color: $c-lightgray-bg;
}
&.selected {
background: rgba(255, 250, 205, 0.5) !important;
}
&.warning {
background: #ffd;
color: #220;
th {
font-size: 12px;
line-height: 18px;
height: auto;
color: #a84;
background-color: #fff4c0;
}
}
&.error {
background: #fcc;
color: #200;
th {
font-size: 12px;
line-height: 18px;
height: auto;
color: #965;
background-color: #ffe4e0;
}
td {
background-color: #ffe4e0 !important;
}
}
&.ok,
&.info {
background: #dfd;
color: #020;
th {
font-size: 12px;
line-height: 18px;
height: auto;
color: #687;
background-color: #ecf8f4;
}
}
&.blink td {
@include animation(blink-row 1s linear 1s 3);
}
&.sortable-placeholder,
&.sortable-placeholder td {
background: #fff4c0 !important;
}
}
tr {
th.thumb,
td.thumb {
width: 120px !important;
min-width: 0 !important;
a { display: inline-block; }
img {
width: 100px;
height: auto;
max-width: 100%;
border: 1px solid #cbcccd;
}
&.large {
width: 206px !important;
img {
width: 170px;
}
}
}
}
.td-box {
display: inline-block;
background: #ffd7d7;
padding: 5px 8px;
margin-bottom: 3px;
&.active {
background: #d6fedb;
}
}
}
/* TABLE FORM (TABLES LISTINGS)
--------------------------- */
.form-table {
padding: 25px;
width: 100%;
&:after { @include clearfix; }
.actions {
display: table;
width: 100%;
clear: both;
padding-bottom: 10px;
select {
height: 35px;
float: left;
margin-right: 10px;
min-width: 200px;
&[multiple] {
height: 240px;
padding: 10px;
}
}
div.selector ~ div {
float: left;
}
& + .msg {
margin-top: 10px;
clear: both;
}
&:before,
&:after { @include clearfix; }
}
.sub-actions {
padding: 10px 0;
margin-bottom: 20px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.action-link,
.action-process,
.action-delete {
float: right;
background: $c-gray;
padding: 0 25px;
min-width: 200px;
&:hover {
background: $c-red;
}
}
a.action-link {
background: $c-red;
&:hover {
background: lighten($c-red, 5%);
}
}
td a {
color: $c-red;
i[class^="icon-"] {
position: relative;
top: -2px;
margin-right: 8px;
}
&.btn {
color: #fff;
}
}
}
.form .form-table {
padding: 0;
}
/* PAGER BAR
---------------------------- */
.pager {
font-size: 14px;
padding: 10px 0;
margin-bottom: 20px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
ul {
li {
display: block;
float: left;
margin-right: 5px;
a {
display: block;
float: left;
min-width: 26px;
height: 26px;
line-height: 24px;
color: $sidebar-bg-item-active-color;
text-align: center;
border: 1px solid $sidebar-bg-item-active-color;
&:hover,
&.active {
background: #9a9ca2;
color: #fff;
text-decoration: none;
}
}
}
}
label.checkbox {
margin-right: 18px;
margin-top: 4px;
font-size: 12px;
float: right;
}
&:after { @include clearfix; }
}
/* DEFAULT FORM STYLES
--------------------------- */
.form {
padding: 25px;
position: relative;
&.has-sticky-foot { padding-bottom: 80px !important; }
&.form-embed {
padding: 0;
.pagetable {
td:first-child {
min-width: 0;
width: 200px;
}
}
}
a {
color: $c-red;
&.btn {
color: #fff;
&.btn-add {
padding: 0 10px;
width: 80px;
& + .inline-field {
padding-right: 80px;
}
}
}
}
.pagetable td:not(.options) > .btn {
padding: 0 10px;
.ion {
font-size: 20px;
display: block;
float: left;
line-height: 32px;
margin-right: 5px;
}
}
center {
position: relative;
& > span {
display: inline-block;
text-align: left;
& > div.selector {
left: auto;
right: 0;
top: 0;
}
& + input[type="submit"] {
left: auto;
right: 0;
top: 0;
}
& + span ~ input[type="submit"] {
top: 1.2em; left: auto !important; right: 0;
height: 32px;
line-height: 32px;
}
}
}
.item {
margin-bottom: 12px;
&.submit {
margin: 20px 0;
padding: 20px 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
width: 100%;
&.sticky-foot {
padding: 20px;
margin: 0;
background: #f0f0f0;
position: fixed;
left: 0; width: 100%;
bottom: 0;
z-index: 2;
@include shadow(0 -10px 10px -5px rgba(0,0,0,0.5));
}
& div { display: table; }
&.save .btn { background-color: $c-green; }
&:after { content: ""; display: table; clear: both; }
& > td {
&:after { content: ""; display: table; clear: both; }
}
.processing-option {
display: inline-block;
vertical-align: top;
select, div.selector {
width: 25%;
min-width: 260px!important;
}
&.short {
select, div.selector {
width: 15%;
min-width: 200px!important;
}
}
}
}
& + .form-table {
.pager:first-child {
border-top: 0;
padding-top: 0;
}
}
}
label {
font-size: 14px;
line-height: 34px;
color: #333744;
display: inline-block;
vertical-align: top;
width: 160px;
float: left;
position: relative;
z-index: 2;
&.checkbox,
&.radio {
width: auto;
}
&.block {
display: block;
float: none;
width: 100%;
}
}
.field {
margin-left: 160px;
position: relative;
z-index: 1;
.field-info { padding: 5px; }
&.link a { line-height: 34px; }
&.text-only { line-height: 22px; font-size: 12px; }
}
.field-thumb {
.field {
a {
display: inline-block;
}
}
}
.field-select-multi {
&:after {
display: table;
content: " ";
clear: left;
}
.selector {
width: 32%;
margin: 0 1.5% 10px 0;
display: block;
float: left;
&:nth-child(3n) {
margin-right: 0;
}
}
}
&.form-full-width {
& > label {
width: auto;
float: none;
}
& > .field {
padding-left: 0;
margin-left: 0;
}
}
input[type="text"],
input[type="tel"],
input[type="password"],
input[type="email"],
input[type="number"],
select, textarea {
width: 100%;
font-family: $font-family;
font-size: 14px;
font-weight: 400;
line-height: normal;
padding: 5px 10px;
&[readonly],
&[disabled] {
background: #eee;
color: #aaa;
}
&.short {
width: 150px;
}
&.tiny {
width: 75px;
}
& + .suffix {
display: inline-block;
padding: 0 10px;
margin-left: -5px;
border: 1px solid #ccc;
background: #fafafa;
vertical-align: top;
height: 34px;
line-height: 34px;
@include radius(0 3px 3px 0);
}
}
.prefix {
display: inline-block;
padding: 0 10px;
border: 1px solid #ccc;
background: #fafafa;
vertical-align: top;
height: 34px;
min-width: 34px;
line-height: 34px;
text-align: center;
float: left;
@include radius(3px 0 0 3px);
& + input[type="text"],
& + input[type="tel"],
& + input[type="password"],
& + input[type="email"],
& + input[type="number"],
& + select,
& + textarea,
& + div.selector {
width: auto !important;
position: absolute;
top: 0; left: 43px;
right: 10px; bottom: 0;
}
}
select,
div.selector {
width: 30%;
min-width: 300px;
}
input[type="number"] {
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
}
select{padding:0 10px;}
select[multiple] {
height: 13em;
padding: 10px;
min-height: 150px;
}
button[type="submit"] {
float: right;
background: $c-gray;
padding: 0 25px;
min-width: 200px;
&:hover { background-color: $c-red; }
&.processing {
opacity: 0.8;
cursor: not-allowed;
}
.spin {
font-size: 20px;
position: relative;
top: 0;
margin-right: 10px;
@include animation(spin .5s linear infinite);
}
}
p.hint {
margin: 10px 0 20px;
padding: 0 0 0 20px;
position: relative;
&:before {
@extend .ion;
@extend .ion-help-circled;
position: absolute;
top: 1px; left: 0;
font-size: 13px;
}
}
small.hint {
display: block;
margin-bottom: 20px;
padding: 10px 0 0 16px;
font-size: 12px;
background: image-url('icon/bulb.png') no-repeat left 9px;
}
.msg {
font-size: 14px;
line-height: 18px;
}
&.form-search .item.submit {
margin: 0;
padding: 0 0 20px 0;
border-top: 0;
}
.csv-selects {
font-size: 0;
line-height: 0;
.selector {
width: 13%;
min-width: 100px;
margin-right: 1.5%;
&:last-child {
margin-right: 0;
}
}
}
.autocomplete-wrapper {
position: relative;
z-index: 2;
.autocomplete-container {
position: absolute;
top: 34px; left: 0;
min-width: 100%;
max-width: 200%;
ul {
width: 100%;
max-width: 100%;
display: block;
background: #fff;
border: 1px solid #ddd;
position: relative;
top: 0; left: 0; right: 0;
li {
white-space: nowrap;
cursor: pointer;
a {
display: block;
padding: 7px 10px;
&:hover {
background: #eee;
}
}
& + li a {
padding-top: 0;
}
}
}
}
}
table {
th:first-child:not(:last-child),
td:first-child:not(:last-child) {
width: 20%;
min-width: 250px;
}
&.form-table {
th:first-child:not(:last-child),
td:first-child:not(:last-child) {
width: auto;
}
}
tr:last-child td {
position: relative;
center {
display: block;
position: relative;
min-height: 48px;
width: 100%;
text-align: left;
}
}
a i.icon-login-as { @include transformCustom(rotate(-90deg)); }
}
center:last-child {
display: block;
position: relative;
min-height: 48px;
width: 100%;
text-align: left;
}
input[type="submit"] { margin-left: 250px; }
table {
tr {
td:nth-child(3) {
input[type="submit"] {
position: absolute;
top: 10px; right: 0;
height: 33px;
line-height: 32px;
}
}
}
thead + tbody {
tr:first-child {
td.lang-selection {
padding-top: 20px;
}
}
}
}
}
.form-search {
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
select { max-width: 400px; }
.selects {
div.selector { margin-bottom: 10px; }
select { max-width: 198px; }
}
&+.form-table { padding-top: 0; }
}
.pagetable + .pagetable {
margin-top: 20px;
}
.pagetable {
&.table-fixed {
table-layout: fixed;
th, td:not([colspan]) {
select, div.selector {
width: 100%!important;
min-width: 100%!important;
}
}
}
}
.ff-upload {
font-size: 14px;
color: #969696;
.ff-widget {
position: relative;
background: #dbdddf;
padding: 10px 15px;
cursor: pointer;
line-height: 24px;
}
i.icon {
@extend .ion;
@extend .ion-upload;
display: inline-block;
margin-right: 10px;
position: relative;
vertical-align: middle;
font-size: 36px;
}
em.ff-destroy {
font-style: normal;
font-size: 12px;
display: block;
padding: .5em 0;
cursor: pointer;
}
input[type="file"].ff-processed {
position: absolute;
top: 0; left: 0;
visibility: hidden;
}
}
/* LANGUAGE WRAPPER
------------------------- */
.langWrapper {
width: 100%;
margin-bottom: 8px;
a {
display: inline-block;
padding: 4px 10px;
background: #999;
color: #fff;
text-decoration: none;
&.active {
background: #484b56;
}
}
}
/* LOGIN PAGE
------------------------- */
#page.page-login {
background: image-url('bg-page.jpg') no-repeat center center;
background-size: cover;
.login-content {
display: table;
width: 100%;
height: 100%;
}
}
#form-login {
width: 100%;
display: table-cell;
vertical-align: middle;
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
-webkit-text-fill-color: #333;
}
.right {
.notification {
width: 340px;
margin-bottom: 12px;
}
}
input[type="text"],
input[type="password"] {
width: 340px;
display: block;
margin-bottom: 12px;
}
button {
width: 122px;
display: block;
margin-top: 3px;
background: $sidebar-bg-item-active-color;
float: left;
}
.logo { display: inline-block; }
.left {
float: left;
width: 50%;
padding-right: 24px;
color: #fff;
text-align: right;
border-right: 1px solid #ffffff;
min-height: 260px;
strong {
font-size: 14px;
line-height: 50px;
}
ul li {
font-size: 12px;
line-height: 18px;
}
}
.right {
float: right;
width: 50%;
padding-left: 24px;
padding-top: 66px;
text-align: left;
}
&:after { @include clearfix; }
}
/* SIDEBAR LEFT PANEL
------------------------- */
.sidebar-left {
background: $sidebar-bg-color;
position: fixed;
left: 0; top: 0;
width: $sidebar-left-width;
height: 100%;
z-index: 2;
@include transition($trans);
.logo {
display: block;
padding: 35px 0 40px;
margin: 0 auto;
position: relative;
z-index: 2;
img { margin: 0 auto; }
}
.toggle {
position: absolute;
top: 33px; right: -19px;
display: block;
width: 38px; height: 38px;
background: $sidebar-bg-toggle-color;
text-align: center;
line-height: 38px;
color: #fff;
font-size: 24px;
z-index: 3;
&:before {
@extend .ion;
@extend .ion-close-round;
}
@include radius(40px);
&:hover {
background-color: lighten($sidebar-bg-toggle-color, 10);
}
}
nav {
overflow: auto;
overflow-x: hidden;
}
ul {
li {
position: relative;
a {
color: #fff;
display: block;
font-size: 14px;
font-weight: 300;
height: 46px; width: 100%;
line-height: 46px;
text-transform: uppercase;
border-left: $sidebar-item-border-width solid transparent;
position: relative;
white-space: nowrap;
.icn {
display: inline-block;
width: 38px;
text-align: center;
margin: 0 5px;
vertical-align: middle;
font-size: 28px;
position: relative;
top: -2px;
}
&.active,
&:hover {
background: $sidebar-bg-item-active-color;
border-left-color: $sidebar-item-border-color;
}
&.active:after {
display: block;
content: "";
width: 0; height: 0;
position: absolute;
top: 16px; right: -18px;
border: 9px solid transparent;
border-left-color: $sidebar-bg-item-active-color;
}
}
ul {
background: $sidebar-submenu-bg-color;
display: none;
li {
a {
color: $sidebar-submenu-link-color-default;
border: 0!important;
font-size: 12px;
height: 28px;
line-height: 28px;
padding-left: 48px;
&:hover,
&.active {
background: lighten($sidebar-bg-item-active-color, 10%);
color: $sidebar-submenu-link-color-active;
&:after { display: none; }
}
span {
padding-left: 15px;
border-left: $sidebar-submenu-link-border-left-width solid $sidebar-submenu-link-border-left-color;
}
}
}
&.expanded { display: block; }
}
&.separator {
span {
display: block;
border-bottom: 1px solid rgba(255,255,255,0.2);
margin-bottom: 1px;
}
}
}
}
.copyright {
background: $sidebar-bg-copy-color;
color: $sidebar-copy-color;
font-size: 11px;
text-shadow: none;
line-height: 18px;
padding: 16px;
margin: 0;
@include shadow(0px -10px 10px -10px rgba(0,0,0,.5));
b { color: #fff; }
}
&.toggled {
width: $sidebar-left-width-toggled;
.toggle {
right: auto;
left: 50%;
margin-left: -19px;
&:before {
@extend .ion-navicon-round;
}
}
nav ul li a span { display: none; }
nav ul li ul {
position: absolute;
top: 0; left: $sidebar-left-width-toggled;
li a { padding: 0 10px; }
}
ul li a .icn {
font-size: 28px;
margin: 0 20px;
}
ul li a .icn + span {
display: none;
}
ul.expanded { display: none !important; }
ul li:hover ul { display: block !important; }
nav,
.mCustomScrollBox,
.mCSB_container { overflow: visible; }
.copyright { display: none; }
}
nav.mCS_no_scrollbar + .copyright {
@include shadow(none);
}
}
.nav-scrollable .sidebar-left .logo {
@include shadow(0px 10px 10px -10px rgba(0, 0, 0, 0.5));
}
.sidebar-left + .page-content {
margin-left: $sidebar-left-width;
padding-left: $gutter-width;
padding-right: $gutter-width;
position: relative;
z-index: 1;
@include transition(all .2s ease-in-out);
}
.sidebar-left.toggled + .page-content {
margin-left: $sidebar-left-width-toggled;
}
/* PAGE HEADER
--------------------------- */
.page-header {
height: 42px!important;
margin-bottom: 75px;
border-bottom: 1px solid #dadbdd;
h1 {
font-size: 40px;
line-height: 40px;
margin-bottom: 20px;
color: $heading-color;
span {
color: $heading-subcolor;
}
}
.logged {
.view-website {
vertical-align: middle;
height: 32px;
line-height: 32px;
i {
display: inline-block;
vertical-align: middle;
font-size: 24px;
line-height: 32px;
margin: 0 10px 0 0;
}
}
span.user {
display: inline-block;
vertical-align: middle;
height: 32px;
line-height: 32px;
& > span {
display: inline-block;
vertical-align: middle;
height: 32px;
line-height: 32px;
padding-right: 10px;
margin-right: 5px;
border-right: 1px solid #484b57;
i {
display: inline-block;
vertical-align: middle;
font-size: 24px;
line-height: 32px;
padding: 0 10px;
&:before {
@extend .ion;
@extend .ion-person;
}
}
}
}
.logout {
display: inline-block;
vertical-align: middle;
font-size: 28px;
line-height: 32px;
color: $c-red;
}
}
.page-hint {
color: #333744;
font-size: 12px;
min-height: 32px;
line-height: 32px;
vertical-align: middle;
padding-left: 40px;
margin-bottom: 18px;
&:before {
@extend .ion;
@extend .ion-information-circled;
}
p {
line-height: 16px;
display: inline-block;
}
}
& ~ .notification {
margin-left: 0;
margin-right: 0;
}
}
#breadcrumbs {
margin-bottom: 34px;
i.spr {
display: block;
float: left;
width: 16px; height: 16px;
background-position: -123px -33px;
margin: 3px 10px 0 0;
}
li {
display: inline-block;
height: 24px;
font-size: 14px;
line-height: 24px;
padding-right: 8px;
margin-right: 4px;
border-right: 1px solid #484b57;
&:last-child {
border: 0;
a { color: $c-red; }
}
}
}
/* old tube theming */
.content-inner {
& > .form {
padding: 0;
}
}
/* old mixed tube breadcrumbs */
#right_right,
.breadcrumbs {
margin-bottom: 34px;
margin-top: 40px;
display: block;
a {
display: inline-block;
height: 24px;
font-size: 14px;
line-height: 24px;
padding-right: 8px;
margin-right: 4px;
border-right: 1px solid #484b57;
}
& > a:last-child,
span a:last-of-type {
border:0;
color: #e55c5c;
}
}
/* eof old tube breadcrumbs */
.content-outer {
h2 {
font-size: 2em;
line-height: 2em;
margin-bottom: .5em;
font-weight: 300;
}
}
.main-content {
.content-area {
margin-bottom: 32px;
&:after { @include clearfix; }
}
}
.sidebar-right + .main-content {
margin-right: $sidebar-right-width + 40px;
}
/* RIGHT SIDEBAR
------------------------ */
.sidebar-right {
float: right;
width: $sidebar-right-width;
@include transition($trans);
}
.sidebar-right {
div.block {
margin-bottom: 20px;
h2 {
background: $sidebar-right-block-heading-bg-color;
background: #dbdddf;
height: 57px;
padding: 0 24px;
font-size: 24px;
font-weight: 400;
line-height: 54px;
color: $sidebar-right-block-heading-text-color;
}
.content {
background: $c-lightgray-bg;
padding: $gutter-width/2;
& > ul {
margin-top: -($gutter-width/2);
margin-bottom: -($gutter-width/2);
}
}
ul li {
a {
display: block;
font-size: 14px;
line-height: 50px;
color: #484b56;
padding-left: 10px;
height: 50px;
border-bottom: 1px solid #d2d3d6;
&:before {
@extend .ion;
@extend .ion-arrow-right-c;
position: relative;
left: -10px;
font-size: 16px;
}
span { float: right; }
}
&:last-child a { border: 0; }
}
&:last-child { margin-bottom: 0; }
.msg:first-child { margin-top: 0; }
.notification:first-child { margin-top: 0; }
}
}
/* CUSTOM CONTENTS
------------------------- */
#mb-news {
padding: 24px;
font-size: 12px;
line-height: 18px;
color: #333744;
.header {
background: #dbdddf;
height: 57px;
padding: 0 24px;
font-size: 24px;
font-weight: 400;
line-height: 54px;
color: #484b57;
margin: -24px -24px 24px -24px;
span {
float: right;
font-size: 12px;
line-height: 57px;
a { color: $c-red; }
}
}
a { color: $c-red; }
* { font-size: 12px; }
}
/* TABS
------------------------- */
.vtabs {
& > ul {
display: block;
float: left;
width: 49%;
li {
display: block;
height: 38px;
margin-bottom: 2px;
a {
display: block;
height: 38px;
line-height: 36px;
font-size: 24px;
font-weight: 100;
text-transform: uppercase;
text-align: right;
background: $vertical-tabs-bg-default;
padding-right: 34px;
color: $vertical-tabs-link-color-default;
}
&:hover a,
&.active a {
background: $vertical-tabs-bg-active;
color: $vertical-tabs-link-color-active;
}
&:last-child { margin: 0; }
}
}
.content {
float: right;
width: 49%;
.tab {
padding-top: 4px;
}
}
}
.lang-selection { padding: 0; }
.tabs {
background: $c-lightgray-bg;
margin-bottom: $gutter-width/2;
border-bottom: 1px solid #ccc;
min-height: 36px;
padding: 0;
li {
display: block;
float: left;
height: 36px;
a {
padding: 0 12px;
display: block;
height: 35px;
line-height: 36px;
background: $tab-bg;
border-top: 2px solid transparent;
&:hover,
&.active {
background: $tab-bg-active;
border-top-color: $c-default;
color: #000;
}
}
}
}
/* COLUMNS (SIMPLE COLUMN GRID)
------------------------- */
.columns {
clear: both;
width: 100%;
padding: 0 15px;
.col {
float: left;
width: 50%;
padding: 15px;
&:first-child { padding-left: 0; }
&:last-child {
padding-right: 0;
float: right;
}
.col {
padding: 0 5px;
&:first-child { padding-left: 0; }
&:last-child { padding-right: 0; }
}
&.col-3 { width: 33.33333%; }
&.col-4 { width: 25%; }
&.col-5 { width: 20%; }
}
.columns {
padding-left: 0;
padding-right: 0;
}
&:after { @include clearfix; }
}
/* LISTS
------------------------- */
ul.list {
text-align: left;
li {
color: #6e6e6e;
font-size: 14px;
font-weight: 300;
line-height: 18px;
a { color: $c-red; }
}
&.cols li {
float: left;
width: 49%;
&:nth-child(even) { margin-left: 2%; }
&:nth-child(odd) { clear: both; }
}
}
/* THUMBNAILS GRID
------------------------- */
.thumbs {
ul {
margin: 0 -4px;
li, .thumb-item {
display: block;
float: left;
width: 172px;
height: 128px;
margin: 0 3px 14px 4px;
font-size: 12px;
position: relative;
overflow: hidden;
text-align: center;
label.radio {
font-size: 12px;
line-height: 22px;
width: 100%;
text-align: left;
i { top: -1px; }
}
.thumb {
display: block;
max-width: 100%;
max-height: 104px;
margin: 0 auto;
}
.options {
display: block;
position: absolute;
top: 0; left: 0;
width: 100%; height: 30px;
padding: 0 10px;
line-height: 30px;
font-size: 20px;
background: rgba(255,255,255,0.5);
@include transition($trans);
.option {
font-size: 20px;
color: #fff;
display: block;
}
a.option:hover { color: $c-red; }
}
a {
font-size: 11px;
color: $c-red;
position: relative;
display: inline-block;
}
}
}
img { border: 1px solid #d0d0d0; }
&.grid-approve {
ul {
li {
margin-bottom: 7px;
width: 175px;
padding: 2px;
border: 1px solid #ddd;
background: #fff;
a {
display: block;
text-align: center;
}
img {
display: block;
margin: 0 auto;
max-height: 114px;
}
}
}
}
&:after { @include clearfix; }
}
/* POPUPS
------------------------- */
.window-head {
border-bottom: 1px solid #555;
position: relative;
h1 {
font-size: 20px;
line-height: 44px;
position: relative;
padding: 0 15px;
color: #4a4d57;
float: left;
}
a.close {
display: block;
position: absolute;
top: 12px; right: 12px;
font-size: 20px;
}
.btn-back {
padding: 0 10px;
margin: 6px 0 0 18px;
}
& + .content:before {
display: table;
clear: both;
content: "";
}
}
.ajax-popup {
header {
border-bottom: 2px solid #606f91;
position: relative;
h1.title {
font-size: 24px;
font-weight: 400;
line-height: 50px;
position: relative;
padding: 0 12px;
color: #4a4d57;
}
a.close {
display: block;
width: 27px; height: 24px;
background-position: -50px -70px;
position: absolute;
top: 12px; right: 12px;
}
a.link-back {
display: block;
line-height: 24px;
position: absolute;
top: 13px;
right: 22px;
}
}
.notification {
margin: 15px;
}
.form {
label { width: 140px; }
label + .field { margin-left: 140px; }
label.block { width: 100%; }
textarea { resize: none; }
.item.submit {
padding: 15px 10px 0 10px;
border-bottom: 0;
}
}
}
/* MISC
------------------------- */
.text-content {
line-height: 1.5em;
.log, .log-table {
margin: 20px 0 40px;
&:last-child {
margin-bottom: 0
}
}
.toc {
list-style-type: decimal;
padding-left: 30px;
padding-top: 20px;
> li {
padding: 5px 0;
}
a {
color: #ff002a;
}
ul {
padding-left: 20px;
list-style-type: disc;
li {
padding: 3px 0;
}
}
}
h2 {
font-size: 1.3em;
margin: .5em 0;
}
h3 {
font-size: 1.1em;
margin: .5em 0;
}
&.home-content {
overflow: auto;
-webkit-overflow-scrolling: touch;
iframe {
min-width: 100%;
width: 100px;
*width: 100%;
}
}
}
.crop-image-popup {
min-width: 640px;
min-height: 480px;
.notification {
margin: 15px 15px 0px 15px;
}
.form {
padding: 15px;
}
.form .item.submit {
margin-left: 0;
margin-right: 0;
}
#preview img {
max-width: none;
}
}
#cboxClose {
display: none;
}
#galleryThumb img.thumb {
min-height: 70px;
}
/* DATEPICKER */
.ui-datepicker {
background: #fff;
border: 1px solid #ccc;
z-index: 10000 !important;
table {table-layout: fixed; }
.ui-datepicker-prev,
.ui-datepicker-next {
float: left;
padding: 6px 10px;
margin: 5px;
background: #fff;
color: #fff;
cursor: pointer;
font-size: 13px;
text-decoration: none;
border: 1px solid #fff;
&:hover {
background: #ccc;
}
}
.ui-datepicker-prev { top: 2px !important; left: 2px !important; }
.ui-datepicker-next { top: 2px !important; right: 2px !important; float: right; }
.ui-datepicker-title {
padding: 5px 0;
clear: both;
text-align: center;
}
}
.ui-datepicker-calendar {
tr {
td {
padding: 0;
a {
display: block;
padding: 5px;
&.ui-state-active {
font-weight: 700;
color: #e55c5c;
}
}
&.ui-datepicker-today {
font-weight: 700;
}
}
}
}
/* TIMEPICKER */
.ui-timepicker-wrapper {
overflow-y: auto;
height: 150px;
width: 6.5em;
background: #fff;
border: 1px solid #ddd;
-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
box-shadow:0 5px 10px rgba(0,0,0,0.2);
outline: none;
z-index: 10000 !important;
margin: 0;
}
.ui-timepicker-wrapper.ui-timepicker-with-duration {
width: 13em;
}
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
width: 11em;
}
.ui-timepicker-list {
margin: 0;
padding: 0;
list-style: none;
}
.ui-timepicker-duration {
margin-left: 5px; color: #888;
}
.ui-timepicker-list:hover .ui-timepicker-duration {
color: #888;
}
.ui-timepicker-list li {
padding: 3px 0 3px 5px;
cursor: pointer;
white-space: nowrap;
color: #000;
list-style: none;
margin: 0;
}
.ui-timepicker-list:hover .ui-timepicker-selected {
background: #fff; color: #000;
}
li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
background: #1980EC; color: #fff;
}
li.ui-timepicker-selected .ui-timepicker-duration,
.ui-timepicker-list li:hover .ui-timepicker-duration {
color: #ccc;
}
.ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
color: #888;
cursor: default;
}
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
background: #f2f2f2;
}
.collapsible {
.api-head {
font-size: 14px;
}
.head {
background-color: $c-lightgray-bg;
border-top: 1px solid #ccc;
margin-top: 10px;
padding: 10px 18px;
color: $c-red;
cursor: pointer;
margin: 0;
font-size: 16px;
i.arr {
display: inline-block;
background: image-url('icon/arr-r.png') no-repeat center center;
width: 9px; height: 9px;
margin-right: 5px;
@include transformCustom(rotate(-90deg));
}
&.small {
font-size: 13px;
}
}
& > .contents {
@include transition($trans);
display: block;
padding: 10px 20px 10px 32px;
h4, .text {
margin-bottom: 10px;
}
.text {
font-size: 13px;
}
.text + h4 {
margin-top: 15px;
padding-top: 15px;
border-top: 1px dotted #aaa;
}
a {
color: $c-red;
}
p + p {
margin-top: 10px;
}
&.padding {
padding: 10px 18px;
}
}
&.collapsed {
.head {
i.arr {
@include transformCustom(rotate(90deg));
}
}
& > .contents {
display: none;
margin-top: 10px;
}
}
}
/* API Page */
.api-about {
padding: 10px 18px;
p {
font-size: 13px;
}
}
.api-head {
font-size: 13px;
padding-top: 10px;
background-color: $c-lightgray-bg;
border-top: 1px solid #ccc;
margin-top: 10px;
padding: 10px 18px;
color: $c-red;
}
.form-configuration {
.head {
border-bottom: 1px solid #ccc;
padding-bottom: .75em;
margin-bottom: .75em;
}
.item:before,
.item:after {
display: table;
content: "";
}
.item:after { clear: left; }
label { width: 300px; }
.field { margin-left: 300px; }
input[type="number"] { max-width: 150px; }
select { max-width: 300px; }
& > .description {
p + p { margin-top: 15px; }
ol { list-style: decimal; margin: 15px 20px; }
ol li + li { margin-top: 15px; }
}
}
.ui-helper-hidden-accessible {
display: none;
}
#block-quick-stats {
padding-top: 15px;
}
/* PAGER BAR
---------------------------- */
#adminPagination {
font-size: 14px;
padding: 10px 18px;
margin-bottom: 20px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
&:empty { padding: 0; margin: 0; border: 0; }
a, span {
display: block;
float: left;
min-width: 26px;
height: 26px;
line-height: 24px;
color: $sidebar-bg-item-active-color;
text-align: center;
border: 1px solid $sidebar-bg-item-active-color;
margin-left: 5px;
}
span {
background: #9a9ca2;
color: #fff;
text-decoration: none;
}
&:after {
clear: left;
display: table;
content: "";
}
}
#statusBarTop {
clear: both;
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
height: 25px;
background-color: #000000;
color: #ffffff;
width: 100%;
overflow: hidden;
padding-top: 5px;
padding-left: 10px;
font-size: 10px;
line-height: 16px;
}
/* Media queries */
@media screen and (max-width: 1680px) {
.sidebar-left + .page-content { padding-left: 20px; padding-right: 20px; }
.sidebar-right { width: 260px; }
.sidebar-right + .main-content { margin-right: 280px; }
}
@media screen and (max-width: 1440px) {
.sidebar-left { width: 230px; }
.sidebar-left + .page-content { margin-left: 230px; }
.sidebar-left ul li a { font-size: 12px; }
.sidebar-left ul li a > i.spr { margin-right: 10px; margin-left: 10px; }
.sidebar-left ul li ul li a { padding-left: 28px; }
.sidebar-left .copyright { font-size: 10px; line-height: 14px; padding: 8px; }
.sidebar-left .copyright b { display: block; }
.sidebar-right div.block .content { padding: 16px; }
.sidebar-right div.block .content ul { margin-top: -16px; margin-bottom: -16px; }
#breadcrumbs { margin-left: 10px; }
.msg.success { font-size: 12px; }
.notification { font-size: 13px; min-height: 20px; line-height: 20px; margin: 10px 0 0 0; }
.notification:before { top: 8px; left: 15px; }
}
@media screen and (max-width: 1366px) {
.sidebar-left nav,
.mCustomScrollBox,
.mCSB_container { overflow: visible; }
.sidebar-left .toggle { display: none; }
.sidebar-left { width: 80px!important; }
.sidebar-left nav { margin-right: 0; }
.sidebar-left ul li span { display: none; }
.sidebar-left ul li a { text-align: center; }
.sidebar-left ul li a.active:after { display: none; }
.sidebar-left ul li a i { margin: -4px 27px 0 25px; }
.sidebar-left ul li ul { position: absolute; top: 0; left: 80px; background: lighten($sidebar-submenu-bg-color, 2); }
.sidebar-left ul li ul li a { padding: 0 10px; text-align: left; }
.sidebar-left .copyright { display: none!important; }
.sidebar-left .logo { background: $sidebar-bg-logo-color; position: relative; z-index: 2; }
.sidebar-left .logo img { width: 50px; }
.sidebar-left + .page-content { margin-left: 80px; padding-left: 10px; padding-right: 10px; }
.sidebar-left .mCustomScrollbar:not(.mCS_no_scrollbar) ul li a i { margin: 0 30px 0 17px; }
.content-outer h2 { font-size: 1.4em; line-height: 1.4em; }
#right_right, .breadcrumbs { margin-bottom: 15px; margin-top: 10px; }
}
@media screen and (max-width: 1280px) {
.sidebar-right { right: -280px; position: absolute; top: 0; padding-right: 10px; z-index: 10; @include shadow(-5px 0 10px rgba(0,0,0,0.2)); }
.sidebar-right + .main-content { margin-right: 0; }
}
@media screen and (max-width: 1140px) {
.form div.selector { display: block; }
.form div.selector + div.selector { margin-top: 8px; }
}
@media screen and (max-width: 991px) {
h2.form-title { padding: 0 12px; font-size: 18px; line-height: 40px; height: 42px; }
#breadcrumbs { margin-bottom: 20px; margin-left: 0; }
.page-header { padding-top: 20px; }
.page-header h1 { font-size: 32px; line-height: 32px; }
table th { height: 32px; padding: 0 12px; }
table tr td { padding: 8px 12px; }
table tr td:only-child .notification { margin: 0 -12px; }
table tr td.main-cell { display: block !important; width: 100% !important; }
.window-head .btn-back { margin-left: 12px; }
.form { padding-top: 12px; padding-bottom: 12px; }
.form-table, .form { padding-left: 12px; padding-right: 12px; }
.form .field-select-multi .selector { width: 49.5%; margin-right: 1%; }
.form .field-select-multi .selector:nth-child(3n) { margin-right: 1%; }
.form .field-select-multi .selector:nth-child(2n) { margin-right: 0!important; }
}
@media screen and (max-width: 767px) {
html, body { min-width: 0; min-height: 0; }
#form-login .left,
#form-login .right { float: none; width: 80%; margin: 0 auto; padding: 0; text-align: center; }
#form-login .left { border: 0; }
#form-login .right { margin-top: 1em; }
#form-login button,
#form-login input[type="text"],
#form-login input[type="password"] { margin: 0 auto 12px; }
#form-login .notification { margin: 0 auto 20px; }
.form label { float: none; }
.form .field { padding-left: 0; margin-left: 0; }
.form p.hint { margin-left: 0; }
.form .item { margin-bottom: 6px; }
table.responsive { margin-bottom: 0; }
.pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
.pinned table { border-right: none; border-left: none; width: 100%; }
.pinned table th, .pinned table td { white-space: nowrap; }
.pinned td:last-child { border-bottom: 0; }
div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
div.table-wrapper div.scrollable table { margin-left: 35%; }
div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }
table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; overflow: hidden; }
table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; }
.form table td { display: block !important; width: 100% !important; word-break: break-all; }
.form table td:first-child { font-weight: bold; }
}
@media screen and (max-width: 479px) {}