Файл: sngine-v2.8/Updates/Update 2.5.4 to 2.5.5/Update_2.5.5/content/themes/default/css/style.css
Строк: 3963
{strip}
/**
* Index:
*
* 00. BASIC
* 01. MAIN
* 02. HEADER
*
03. COMMON
* 04. POST
* 05. COMMENT
* 06. BOX
* 07. BLOG
* 08.
FORUM
* 09. PUBLISHER
* 10. AUTO-COMPLETE
* 11. LIGHTBOX
* 12.
CHAT
* 13. EMOJI
* 14. PAGE = [BASIC]
* 15. PAGE = [INDEX]
* 16.
PAGE = [STARTED]
* 17. PAGE = [HOME]
* 18. PAGE = [MESSAGES]
* 19.
PAGE = [PROFILE]
* 20. PAGE = [ADMIN]
* 21. PAGE = [PACKAGES]
* 22.
PAGE = [MARKET]
* 23. NOTY NOTIFICATION
* 24. TRANSLATOR
* 25. BIG
ICON
* 26. SEE MORE
* 27. LOADER
* 28. POST LOADER
* 39. ON/OFF
TOGGLE
* 30. FANCY CHECKBOX
* 31. PROGRESS BAR
* 32. EXTRAS
* 33.
RESPONSIVE 480
* 34. RESPONSIVE 786
* 35. RESPONSIVE 786
* 36.
OFFCANVAS
*/
/* BASIC */
/* -------------------------------
*/
body {
background: #e9eaee;
font-family: "Helvetica
Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
line-height:
1.42857143;
color: #555;
padding-top: 46px; /* 46px for header
*/
}
body.n_activated, body.n_live {
padding-top: 92px; /* 46px for
header + 46px for top bar */
}
a {
color: #4083a9;
text-decoration:
none;
}
a, a:hover, a:focus {
text-decoration: none;
}
ul
{
margin: 0;
padding: 0;
list-style: none;
}
small
{
line-height: 100%;
}
video, audio {
width:
100%!important;
height: 100%!important;
}
/* -- */
/* MAIN */
/*
------------------------------- */
.main-wrapper {
width:
100%;
min-width: 260px; /* to show scroll for small size browsers ;)
*/
}
/* Grid */
.container {
-webkit-transition: all
.5s;
transition: all .5s;
}
@media (min-width: 1200px) {
.container
{
width: 970px !important; /* override bootstrap 1200px container but
lightbox */
}
.container.lightbox-container {
width: 1170px
!important;
}
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2,
.col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3,
.col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5,
.col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6,
.col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8,
.col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9,
.col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11,
.col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12,
.col-lg-12 {
padding-left: 10px; /* override bootstrap 15px padding
*/
padding-right: 10px;
}
.row {
margin-left: -10px; /* override
bootstrap -15px margin */
margin-right: -10px;
}
.form-horizontal
.form-group {
margin-right: 0;
margin-left: -10px;
}
/* -- */
/*
Tooltip */
.tooltip-inner {
border-radius: 2px;
max-width: none;
white-space: nowrap;
}
/* -- */
/* Alert */
.alert {
border-radius:
0;
}
.alert-warning {
background-color: #fdf6cd;
}
.alert .title
{
padding-bottom: 8px;
margin-bottom: 10px;
font-weight:
600;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.alert
.icon, .option .icon {
display: table-cell;
vertical-align:
middle;
padding-right: 10px;
}
.alert .text, .option .text
{
display: table-cell;
vertical-align: top;
text-align:
left;
}
.alert .text.middle, .option .text.middle {
vertical-align:
middle;
}
.alert-success,
.alert-success .title {
border-color:
#d6e9c6;
}
.alert-info,
.alert-info .title {
border-color:
#bce8f1;
}
.alert-warning ,
.alert-warning .title {
border-color:
#e1d4a9;
}
.alert-danger,
.alert-danger .title {
border-color:
#ce9291;
}
/* -- */
/* Custome Alerts */
.alert-post
{
margin-bottom: 20px;
background: #f6f7f8;
border: 1px solid
#ddd;
border-radius: 1px;
box-shadow: 0 1px 1px
rgba(0,0,0,.05);
}
.alert-chat {
background: #6b6b6b;
width:
75%;
padding: 5px 10px!important;
margin: 0 auto!important;
color: #fff;
}
/* -- */
/* Modal */
.modal {
z-index:
999999;
}
.modal-content {
border-radius: 0;
}
.modal-header
{
background: #f8f8f8;
}
.modal-footer {
padding: 10px 15px;
}
/*
-- */
/* Tables */
.table-responsive .row {
margin-left:
0;
margin-right: 0;
}
/* -- */
/* Panels */
.panel
{
border-radius: 3px;
}
.panel-heading.light {
background:
transparent;
}
.panel-heading.no_border {
border-bottom:
0;
}
.panel-heading.dark a {
color: inherit;
}
.panel-heading a:hover
{
text-decoration: underline;
}
.panel-heading a.btn:hover
{
text-decoration: none;
}
.panel-heading .panel-icon {
color:
#ADB3BC;
}
.panel-heading.with-icon {
padding-top:
20px;
padding-bottom: 20px;
}
.panel-heading.with-icon .btn
{
padding: 1px 5px;
font-size: 10px;
line-height:
1.5;
-webkit-transition: padding .5s;
transition: padding
.5s;
}
.panel-heading.with-nav {
padding-bottom: 0;
border-bottom:
0;
}
.panel-heading.with-nav .nav>li>a {
padding: 10px
10px;
font-size: 11px;
}
.panel-body .divider {
border-top: 1px
solid #E7E7E7;
margin-bottom: 25px;
}
.panel-body li.divider{
height:
1px;
margin: 9px 0;
padding: 0;
overflow: hidden;
background-color:
#e5e5e5;
}
.panel-body .panel-title {
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #ccc;
font-size:
14px;
font-weight: 600;
}
.panel-body .panel-sub-title
{
background: #f5f5f5;
padding: 10px;
font-size: 13px;
font-weight: 600;
text-align: center;
border-radius:
2px;
}
.panel-body.with-nav {
padding: 0;
}
.panel-widget
.panel-heading {
font-size: 12px;
color: #909090;
}
.panel-widget
.panel-body {
padding: 5px;
}
/* -- */
/* Dropdowns
*/
.dropdown-menu:not(.colorpicker) {
right: 0; /* override bootstrap
default left dropdowns */
left: inherit;
}
.dropdown-menu>li>a
{
font-size: 12px;
white-space: normal;
outline:
0;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus
{
color: #fff;
background: #5e86b8;
}
/* -- */
/* Custome
Dropdowns */
.dropdown-menu.auto-complete {
display: none;
left: 0; /*
override the override just for auto-complete */
margin-top:
0;
border-radius: 0;
box-shadow: none;
}
/* -- */
/* Inputs
*/
.form-control {
border-radius: 0;
box-shadow:
none;
}
.input-group-addon {
border-radius: 0;
}
.input-money
{
position: relative;
}
.input-money span {
font-size: 20px;
position: absolute;
top: 15px;
left: 0;
width: 45px;
text-align: center;
}
.input-money input {
font-size: 40px;
line-height: 40px;
font-family: opensanslight;
margin: 0;
padding: 10px;
padding-left: 45px;
height: 60px;
outline:
0;
}
/* -- */
/* Buttons */
.btn {
text-shadow: none;
outline:
0!important;
border-radius: 2px;
}
.btn, .btn:active {
box-shadow:
none;
}
.btn-default {
color: #555!important;
}
.btn-default,
.btn-default:focus {
border-color: #ddd;
border-bottom-color:
#cecece;
background: #f4f4f4;
background-image:
-webkit-linear-gradient(top,#f4f4f4 0,#eaeaea 100%);
background-image:
linear-gradient(to bottom,#f4f4f4 0,#eaeaea 100%);
background-repeat:
repeat-x;
}
.btn-default:hover {
color: #555!important;
border-color:
#d5d5d5;
border-bottom-color: #bcbcbc;
background:
#eaeaea!important;
background-image: -webkit-linear-gradient(top,#efefef
0,#e5e5e5 100%)!important;
background-image: linear-gradient(to
bottom,#efefef 0,#e5e5e5 100%)!important;
background-repeat:
repeat-x;
text-decoration: none!important;
}
.open
.btn.dropdown-toggle,
.btn-default.active, .btn-default:active,
.open
.btn-default.dropdown-toggle {
background: 0 0;
background:
#ebebeb!important;
border-color: #c6c6c6;
border-bottom-color:
#c6c6c6!important;
color: #555;
box-shadow: 0 0 12px
rgba(0,0,0,.1)inset;
}
.btn-primary, .btn-primary:focus {
color:
#fff!important;
border-color: #1a7ab9;
border-bottom-color:
#16689e;
background: #1d89cf;
background-image:
-webkit-linear-gradient(top,#1e8cd3 0,#1a7ab9 100%);
background-image:
linear-gradient(to bottom,#1e8cd3 0,#1a7ab9 100%);
background-repeat:
repeat-x;
}
.btn-primary:hover {
color: #fff!important;
border-color:
#1871ab;
border-bottom-color: #12547e;
background:
#1a7ab9!important;
background-image: -webkit-linear-gradient(top,#1c83c6
0,#1871ab 100%)!important;
background-image: linear-gradient(to
bottom,#1c83c6 0,#1871ab 100%)!important;
background-repeat:
repeat-x;
text-decoration: none!important;
}
.open
.btn-primary.dropdown-toggle,
.btn-primary.active, .btn-primary:active
{
background: 0 0;
background: #1a7dbd!important;
border-color:
#146090;
border-bottom-color: #146090!important;
color:
#fff;
box-shadow: 0 0 12px rgba(0,0,0,.1)inset;
}
.btn-success,
.btn-success:focus {
color: #fff!important;
border-color:
#4cb64c;
border-bottom-color: #42a142;
background:
#5ebd5e;
background-image: -webkit-linear-gradient(top,#62be62 0,#4cb64c
100%);
background-image: linear-gradient(to bottom,#62be62 0,#4cb64c
100%);
background-repeat: repeat-x;
}
.btn-success:hover {
color:
#fff!important;
border-color: #46ac46;
border-bottom-color:
#388838;
background: #4cb64c!important;
background-image:
-webkit-linear-gradient(top,#57ba57 0,#46ac46
100%)!important;
background-image: linear-gradient(to bottom,#57ba57
0,#46ac46 100%)!important;
background-repeat:
repeat-x;
text-decoration: none!important;
}
.btn-success.active,
.btn-success:active,
.open .btn-success.dropdown-toggle {
background: 0
0;
background: #50b750!important;
border-color:
#3e963e;
border-bottom-color: #3e963e!important;
color:
#fff;
box-shadow: 0 0 12px rgba(0,0,0,.1)inset;
}
.btn-danger,
.btn-danger:focus {
color: #fff!important;
border-color:
#e3503e;
border-bottom-color: #df3823;
background:
#e66454;
background-image: -webkit-linear-gradient(top,#e76858 0,#e3503e
100%);
background-image: linear-gradient(to bottom,#e76858 0,#e3503e
100%);
background-repeat: repeat-x;
}
.btn-danger:hover {
color:
#fff!important;
border-color: #e14430;
border-bottom-color:
#c22e1c;
background: #e3503e!important;
background-image:
-webkit-linear-gradient(top,#e55c4b 0,#e14430
100%)!important;
background-image: linear-gradient(to bottom,#e55c4b
0,#e14430 100%)!important;
background-repeat:
repeat-x;
text-decoration: none!important;
}
.open
.btn-danger.dropdown-toggle,
.btn-danger.active, .btn-danger:active
{
background: 0 0;
background: #e3503e!important;
border-color:
#e3503e;
border-bottom-color: #e3503e!important;
color:
#fff;
box-shadow: 0 0 12px rgba(0,0,0,.1)inset;
}
/* -- */
/*
Custome Buttons */
.btn-delete:hover {
color:
#fff!important;
border-color: #e3503e!important;
border-bottom-color:
#df3823!important;
background: #e66454!important;
background-image:
-webkit-linear-gradient(top,#e76858 0,#e3503e
100%)!important;
background-image: linear-gradient(to bottom,#e76858
0,#e3503e 100%)!important;
background-repeat:
repeat-x!important;
}
.btn-delete:hover .fa:before {
content:
"\f1f8";
}
.btn-option {
background: #fff;
border: 1px
solid #ccc;
}
.bootstrap-select.btn-group:not(.input-group-btn)
{
height: 100%;
}
/* -- */
/* Callout */
.bs-callout {
padding: 20px;
margin: 20px 0;
border: 1px solid #eee;
border-left-width: 5px;
border-radius: 3px;
}
.bs-callout h4 {
margin-top: 0;
margin-bottom: 5px;
}
.bs-callout p:last-child {
margin-bottom: 0;
}
.bs-callout code {
border-radius:
3px;
}
.bs-callout+.bs-callout {
margin-top:
-5px;
}
.bs-callout-default {
border-left-color:
#777;
}
.bs-callout-default h4 {
color:
#777;
}
.bs-callout-primary {
border-left-color:
#428bca;
}
.bs-callout-primary h4 {
color:
#428bca;
}
.bs-callout-success {
border-left-color:
#5cb85c;
}
.bs-callout-success h4 {
color:
#5cb85c;
}
.bs-callout-danger {
border-left-color:
#d9534f;
}
.bs-callout-danger h4 {
color:
#d9534f;
}
.bs-callout-warning {
border-left-color:
#f0ad4e;
}
.bs-callout-warning h4 {
color:
#f0ad4e;
}
.bs-callout-info {
border-left-color:
#5bc0de;
}
.bs-callout-info h4 {
color: #5bc0de;
}
/* -- */
/*
Twemoji-Awesome */
.twa-xlg {
height: 1.6em!important;
width:
1.6em!important;
margin: 0 0.0665em 0 0.15em!important;
vertical-align:
-0.15em!important;
background-size: 1.6em 1.6em!important;
}
/* --
*/
/* mce editor */
div.mce-fullscreen {
z-index: 99999;
}
/*
HEADER */
/* ------------------------------- */
/* top-bar */
.top-bar
{
position: fixed;
left: 0;
right: 0;
top: 0;
width:
100%;
min-height: 46px;
font-size: 0.9em;
line-height:
46px;
background: #fff2cc;
z-index: 1001;
}
.top-bar.alert-bar
{
background: #ce3426;
color: #fff;
}
.top-bar.alert-bar a {
color:
#FFF200;
}
.top-bar.alert-bar a:hover {
text-decoration:
underline;
}
/* -- */
/* main-header */
.main-header {
position:
fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
min-height:
46px;
background: #597ba5;
box-shadow: 0 2px 2px rgba(0,0,0,.04),0 1px
0 rgba(0,0,0,.04);
z-index: 1001;
}
body.modal-open
.main-header,
body.modal-open .top-bar {
padding-right: 17px !important;
/* fix bootstrap modal padding-right for hiding scroll */
}
@media
(min-width: 768px) {
body.modal-open:not(.n_chat)
.main-header,
body.modal-open:not(.n_chat) .top-bar {
padding-right:
223px !important; /* fix bootstrap modal padding-right for hiding scroll
*/
}
}
body.n_activated .main-header, body.n_live .main-header {
top:
46px; /* for activation bar */
}
.main-header .header-container
{
position: relative; /* relative for .navbar-container to be absolute
*/
min-height: 46px;
}
/* -- */
/* - brand-container -
*/
.main-header .brand-container {
float: left;
padding:
0;
margin-right: 15px;
width: auto;
max-width: 110px;
height:
46px;
overflow: hidden;
word-break: break-all;
}
.main-header
.brand {
display: inline-block;
width: 100%;
padding: 0 0 0
14px;
font-size: 11px;
font-weight: 600;
line-height: 46px;
color:
#fff;
opacity: 1;
text-transform: uppercase;
-webkit-transition: all
.2s;
transition: all .2s;
}
.main-header .brand:hover {
opacity:
0.8;
text-decoration: none;
}
/* -- */
/* - navbar-form -
*/
.main-header .navbar-form {
position: relative; /* relative for
.navbar-toggle to be absolute */
border: none;
margin: 0;
padding: 0;
width: 100%;
box-shadow: none;
}
.main-header .navbar-form
.form-control {
width: 100%;
box-shadow: none;
background:
#fff;
border: 0 none;
border-radius: 3px;
color:
#7697b7;
-webkit-transition: all .5s;
transition: all
.5s;
}
.main-header .navbar-form .form-control::-webkit-input-placeholder
{
color: #7697b7;
}
.main-header .navbar-form
.form-control:-moz-placeholder {
color: #7697b7;
opacity:
1;
}
.main-header .navbar-form .form-control:-ms-input-placeholder
{
color: #7697b7;
}
/* -- */
/* navbar-container */
body.visitor
.navbar-container {
float: right;
}
/* -- */
/* navbar-nav
*/
.main-header .navbar-nav {
width: 100%;
margin:
0;
}
.main-header .nav>li {
float: left;
width:
14.28571428571429%;
}
body.visitor .main-header .nav>li {
width:
auto;
}
.main-header .nav>li>a {
background:
transparent;
color: #ddd;
height: 46px;
padding: 12px
10px;
text-align: center;
}
.main-header .nav>li>a:hover,
.main-header .nav>li>a:active,
.main-header .nav>li>a:focus
{
color: #efefef;
background-color: transparent;
}
.main-header
.nav>li.dropdown.open>a {
color:
#fff!important;
background-color: #40628a;
}
.main-header
.nav>li>a .fa {
font-size: 1.4em;
}
.main-header
.nav>li>a .label {
display: block;
position: absolute;
right:
7px;
top: 7px;
padding: 2px 4px;
background: #e66454;
font-size:
10px;
font-weight: 600;
}
/* -- */
.main-header
.nav>li,
.main-header .dropdown.main-header .nav>li>a
{
position: static;
}
/* dropdown-menu */
.navbar-nav .open
.dropdown-menu {
position: absolute;
float: left;
width:
100%;
margin-top: 0;
background-color: #fff;
border: 1px solid
#ccc;
border: 1px solid rgba(0,0,0,.15);
border-top:
0;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px
12px rgba(0,0,0,.175);
}
.navbar-nav .open .dropdown-menu {
right:
0!important;
left: 0!important;
}
.main-header ul.dropdown-menu
{
top: 46px;
}
.main-header .user-menu>img {
display:
inline-block;
margin: -2px 0 0 0;
height: 20px;
width:
20px;
border-radius: 50%;
}
.main-header .user-menu>.caret
{
display: none;
}
@media (min-width: 480px) {
.main-header
.user-menu>.caret {
display: inline-block;
}
}
/* -- */
/*
dropdown-widget */
.dropdown-widget {
padding-bottom:
0!important;
padding-top: 0!important;
border-top: 0
none!important;
width: 100%;
border-radius:
0;
}
.dropdown-widget-header {
padding: 8px;
border-bottom: 1px
solid #e4e4e4;
display: block;
font-size: 11px;
font-weight:
600;
line-height: 16px;
}
.dropdown-widget-header a:hover
{
text-decoration: underline;
}
.dropdown-widget-body {
padding:
0;
font-size: 12px
}
.dropdown-widget-body .title {
border-top: 1px
solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
color:
#555;
padding: 8px;
display: block;
font-size: 11px;
font-weight:
600;
line-height: 16px;
}
.dropdown-widget-footer {
background:
#f7f7f7;
display: block;
padding: 8px 0;
height: auto;
border-top:
1px solid #e5e5e5;
border-bottom: 0 none;
color: #428bca;
text-align:
center;
font-size: 11px;
font-weight: 600;
line-height:
18px;
}
.dropdown-widget-footer:hover {
color:
#428bca;
text-decoration: underline;
}
/* -- */
/* COMMON */
/*
------------------------------- */
/* side-nav */
.side-nav
{
padding: 0;
margin: 0;
list-style: none;
}
.side-nav ul
{
background-color: #F9F9F9;
}
.side-nav ul a {
padding: 14px
30px;
}
.side-nav li, .side-nav a {
display: block;
}
.side-nav a,
.side-nav .static {
padding: 14px 15px;
color:
#6a6a6a;
border-bottom: 1px solid #e7e7e7;
}
.side-nav a:hover
{
text-decoration: none;
background-color: #eee;
}
.side-nav
a.no-border {
border-bottom: 0;
}
.side-nav li.selected a {
color:
#4083a9;
}
.side-nav ul li a {
font-size:
12px;
}
.side-nav>li.active>a {
background-color:
#F5F5F5;
color: #597BA5;
font-weight: bold;
}
.side-nav
ul>li.active>a {
background-color: #eee;
color:
#597BA5;
font-weight: bold;
}
/* -- */
/* feeds-item */
.feeds-item
{
border-bottom: 1px solid #e4e4e4;
}
.feeds-item:last-child
{
border-bottom: 0 none;
}
.feeds-item.unread {
background:
#E9EAED;
}
.feeds-item.active {
background: #D0E2FF;
}
/* --
*/
/* data-container */
.data-container-wrapper {
border: 1px solid
#EFEFEF;
border-radius: 1px;
margin-bottom: 15px;
}
.data-container
{
position: relative; /* relative for .data-avatar to be absolute
*/
display: block;
width: 100%;
padding: 8px;
min-height: 64px; /*
50px avatar + 16px padding */
border-radius:
3px;
}
.data-container.small {
min-height: 46px; /* 30px avatar + 16px
padding */
}
a.data-container:hover, .data-container.clickable:hover
{
background: #f6f7f8;
text-decoration: none;
cursor:
pointer;
}
.data-avatar {
position: absolute;
top: 8px;
left:
8px;
width: 30px;
height: 30px;
text-align: center;
border-radius:
2px;
}
.data-avatar .left-avatar,
.data-avatar .right-avatar
{
background-size: cover;
background-position: center center;
float:
left;
overflow: hidden;
width: 14px;
height: 30px;
margin-right:
1px;
border-radius: 2px 0 0 2px;
}
.data-avatar .right-avatar
{
width: 15px;
margin-right: 0;
border-radius: 0 2px 2px
0;
}
.data-avatar .fa, .data-avatar .fab {
font-size:
2.4em;
}
.data-content {
padding-left: 38px;
color:
#818181;
font-size: 11px;
line-height: 16px;
}
.data-content a
{
color: #818181;
}
.data-content .data-img {
background-color:
#fff;
border: 1px solid #ddd;
padding: 1px;
width:
48px;
}
.data-content a:hover {
text-decoration:
underline;
}
.data-content .btn {
padding: 1px 5px;
font-size:
10px;
line-height: 1.5;
-webkit-transition: padding
.5s;
transition: padding .5s;
}
.data-content .name {
font-weight:
bold;
}
.data-content .name a {
color: #4083a9;
}
.data-content
.time {
font-size: 10px;
color: #bbb;
}
.data-content .text
{
word-break: break-all;
}
/* -- */
/* x-form */
.x-form
{
position: relative; /* for x-form-tools */
}
.x-form-tools
{
position: absolute;
color: #afafaf;
}
.x-form-tools-post,
.x-form-tools-attach,
.x-form-tools-emoji {
position: relative; /*
for input & menus */
overflow: hidden;
display:
inline-block;
cursor: pointer;
}
.x-form-tools-post,
.x-form-tools-attach {
margin-right:
3px;
}
.x-form-tools-*:last-child {
margin-right: 0;
}
@media
(min-width: 992px) {
.x-form-tools-post {
display:
none;
}
}
.x-form-tools-attach input[type=file] {
position:
absolute;
top: 0;
right: 0;
min-width: 100%;
min-height:
100%;
font-size: 100px;
text-align: right;
filter:
alpha(opacity=0);
opacity: 0;
outline: none;
background:
white;
cursor: inherit;
display: block;
}
/* -- */
/* attachments
*/
.attachments li {
float: left;
width: 64px;
height:
64px;
margin-right: 5px;
margin-bottom: 5px;
-webkit-transition:
padding .5s;
transition: padding .5s;
}
.attachments li.item
{
position: relative; /* for :before & button */
border: 1px solid
#eee;
cursor: pointer;
}
.attachments li.item img {
width:
64px;
height: 64px;
}
.attachments li.item.deletable:before
{
position: absolute;
top: 0;
left: 0;
right: 0;
background:
rgba(0, 0, 0, 0.6);
width: 64px;
height: 64px;
content:
"";
display: none;
}
.attachments
li.item.deletable:hover:before {
display: block;
}
.attachments li.item
button {
position: absolute;
top: 0;
right: 5px;
color:
#fff;
text-shadow: 0 1px 0 #000;
filter: alpha(opacity=40);
opacity:
0.4;
display: none;
}
.attachments li.item.deletable:hover button
{
display: block;
}
.attachments li.item.deletable button:hover
{
filter: alpha(opacity=80);
opacity: 0.8;
}
.attachments li.loading
{
padding-top: 22px; /* 64px-20px(loader) / 2 */
background:
#f3f3f3;
border: 1px solid #eee;
display: none;
}
/* -- */
/*
x-uploader */
.x-uploader {
overflow: hidden;
}
.x-uploader
input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
opacity: 0;
outline: none;
background:
white;
cursor: pointer;
display: block;
}
.x-uploader .fa
{
cursor: pointer;
}
/* -- */
/* x-image */
.x-image {
position:
relative;
background-size: cover;
background-repeat:
no-repeat;
background-position: center;
background-color:
#eee;
width: 96px;
height: 96px;
overflow: hidden;
display:
block;
border-radius: 2px;
}
.x-image.sm {
width: 48px;
height:
48px;
}
.x-image:before {
position: absolute;
top: 0;
left:
0;
right: 0;
width: 100%;
height: 100%;
background:
#000;
content: '';
opacity: 0;
}
.x-image:hover.x-image:before
{
opacity: 0.2;
}
.x-image .loader {
margin-top:
39px;
}
.x-image .x-uploader {
position: absolute;
bottom:
5px;
right: 5px;
}
.x-image button {
position: absolute;
top:
0;
right: 5px;
}
/* -- */
/* tbl-image */
.tbl-image {
width:
24px;
height: 24px;
float: left;
margin-right: 5px;
border-radius: 2px;
}
/* -- */
/* badges */
.verified-badge
{
color: #55acee;
}
.pro-badge {
color: #e13c4c;
}
.privacy-badge
{
color: #fff;
font-size: 16px;
}
.verified-badge:hover,
.pro-badge:hover, .privacy-badge:hover {
cursor: pointer;
}
/* --
*/
/* ads */
.ads-title {
font-size: 14px;
padding: 5px 0;
margin: 0;
word-break: break-all;
}
.ads-descrition {
font-size:
12px;
word-break: break-all;
}
/* -- */
/* POST */
/*
------------------------------- */
.post {
position:
relative;
margin-bottom: 20px;
background: #fff;
border: 1px solid
#ddd;
border-radius: 3px;
box-shadow: 0 1px 1px
rgba(0,0,0,.05);
}
.post.flagged {
padding: 15px;
background:
#f6f7f8;
}
.post .pin-icon {
position: absolute;
right: 18px;
top: -10px;
width: auto;
font-size: 25px;
color:
#f9b340;
}
.post.boosted {
border: 2px solid #f9b340;
}
.post
.boosted-icon {
position: absolute;
left: -15px;
top: -15px;
width: auto;
padding: 3px 6px;
font-size: 16px;
background: #f9b340;
color: #ffffff;
border-radius: 50%;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform:
rotate(-20deg); /* Safari */
transform: rotate(-20deg); /* Standard
syntax */
}
.post a:hover {
text-decoration:
underline;
}
.post-body {
padding: 15px 15px 5px;
}
.post-header
{
margin-bottom: 10px;
}
.post-avatar {
display:
table-cell;
vertical-align: top;
padding-right:
10px;
}
.post-avatar-picture {
background-size:
cover;
background-repeat: no-repeat;
background-position:
center;
background-color: #eee;
width: 100%;
height:
100%;
padding-top: 100%;
overflow: hidden;
min-width:
40px;
min-height: 40px;
display: block;
border-radius:
50%;
}
.post-avatar-picture.small {
min-width: 25px;
min-height:
25px;
}
.post-avatar-picture.rounded {
border-radius:
50%;
}
.post-meta {
display: table-cell;
vertical-align:
top;
width: 100%;
word-break: break-word;
word-wrap:
break-word;
}
.post-meta .dropdown .dropdown-toggle {
color:
#d3d3d3;
padding: 5px;
border-radius: 50%;
}
.post-meta .dropdown
.dropdown-toggle:hover {
background: #e9eaee;
color: #b3b3b3;
cursor: pointer;
}
.post-author {
font-size: 14px;
line-height:
20px;
font-weight: bold;
}
.post-time {
color: #999;
font-size:
11px;
line-height: 16px;
}
.post-time a {
color: #999;
}
.post-time
.fa:hover {
cursor: pointer;
}
.post-time .btn-default {
background:
transparent;
border: 0;
}
.post-time .btn-default > .fa {
color:
#999!important;
}
.post-text, .post-text-translated {
text-align:
initial;
word-break: initial;
word-wrap: break-word;
overflow:
hidden;
margin-bottom: 5px;
-webkit-transition: height
.2s;
transition: height .2s;
}
.post-text-translation
{
border-left: 2px solid #e9eaee;
padding-left: 10px;
margin-top: 10px;
}
.post-stats {
margin-top: 15px;
font-size:
11px;
color: #999;
}
.post-actions {
margin-top:
10px;
padding-top: 5px;
border-top: 1px solid
#f4f4f4;
}
.post-actions .action-btn {
background: #fff;
float:
left;
width: 33.3%;
padding: 10px;
color: #7f838a;
font-size: 13px;
font-weight: 700;
line-height: 14px;
text-align: center;
border-radius: 2px;
transition: all .1s
ease-in-out;
}
.post-actions .action-btn:hover {
background:
#f7f7f7;
cursor: pointer;
}
.post-footer {
background:
#f9f9f9;
border-top: 1px solid #eee;
border-radius: 0 0 3px
3px;
padding: 0 15px;
}
.post-sharing {
padding: 8px
0;
border-bottom: 1px solid #eee;
}
.post-comments {
padding-top:
10px;
}
/* post types */
.pg_wrapper a {
display: block;
position:
relative;
width: 100%;
height: 100%;
background-size:
cover;
background-position: center center;
background-color:
#f5f5f5;
}
.pg_wrapper .more {
position: absolute;
top: 0;
right:
0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
color:
#fff;
font-size: 2em;
font-weight: 600;
line-height:
100%;
text-align: center;
padding-top: 40%;
}
.pg_1x
{
text-align: center;
}
.pg_1x img {
max-width: 100%;
}
.pg_2x
{
width: 50%;
float: left;
padding-right: 1px;
}
.pg_2x > a
{
padding-bottom: 100%;
}
.pg_2o3, .pg_1o3 {
float:
left;
margin-right: 1px;
}
.pg_1o3 {
margin-right:
-1px;
}
.pg_2o3 .pg_2o3_in {
margin-bottom: 1px;
}
.pg_2o3
.pg_2o3_in:last-child {
margin-bottom: 0;
}
.pg_1o3 .pg_1o3_in
{
margin-bottom: 1px;
}
.pg_1o3 .pg_1o3_in:last-child
{
margin-bottom: 0;
}
.post-media {
border: 1px solid
#eee;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.post-media.list
{
background: #fff;
box-shadow: none;
margin-bottom: 15px;
border:
0;
}
.post-media img.img-responsive {
width: 100%;
max-height:
350px;
}
.post-media-image-wrapper {
position:
relative;
}
.post-media-image-meta {
position: absolute;
bottom:
15px;
left: 15px;
}
.post-media-image {
overflow:
hidden;
}
.post-media-image div {
background-size:
cover;
background-repeat: no-repeat;
background-position: center
center;
background-color: #eee;
width: 100%;
height:
100%;
padding-top: 100%;
overflow: hidden;
min-width:
100px;
min-height: 100px;
}
.embed-ifram-wrapper * {
width:
100%!important;
}
.post-media-meta {
padding: 10px;
width:
100%;
-webkit-transition: all .2s;
transition: all
.2s;
}
.post-media-meta .title{
display: block;
font-size:
16px;
font-weight: 600;
line-height: 22px;
color:
#333;
}
.post-media-meta .title:hover{
text-decoration:
none;
}
.post-media-meta .text {
max-height: 90px;
overflow:
hidden;
}
.post-media-meta .source {
color: #999;
font-size:
11px;
text-transform: uppercase;
}
.post-media-meta .info {
color:
#999;
font-size: 11px;
}
/* -- */
/* post-downloader
*/
.post-downloader {
border-top: 1px solid #eee;
border-bottom:
1px solid #eee;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
}
.post-downloader .icon {
display: table-cell;
vertical-align: middle;
background-color: #f9f9f9;
padding:
10px 20px;
border-radius: 2px;
}
.post-downloader .info {
display:
table-cell;
vertical-align: top;
padding-left: 10px;
width:
100%;
}
/* -- */
/* post-dropdown-menu */
.post-dropdown-menu
{
width: 240px;
}
.post-dropdown-menu .fa {
padding-right:
5px;
color: #8b8b8b;
}
.post-dropdown-menu .action {
font-size:
14px;
line-height: 18px;
font-weight: 600;
}
.post-dropdown-menu
.action.no-icon {
padding-left: 22px;
font-weight:
normal;
}
.post-dropdown-menu .action.no-desc {
font-weight:
normal;
}
.post-dropdown-menu .action-desc {
padding-left:
22px;
color: #999;
font-size: 11px;
line-height:
16px;
}
.post-dropdown-menu a:hover .action-desc,
.post-dropdown-menu
a:hover .fa {
color: #fff;
}
/* -- */
/* post-map*/
.post-map img
{
border: 1px solid #ededed;
border-radius: 3px;
padding:
2px;
margin-top: 5px;
}
/* -- */
/* polls */
.poll-option
{
display: table-cell;
vertical-align: top;
position:
relative;
width: 100%;
padding: 6px 8px;
height: 35px;
background-color: #fff;
border: 1px solid #dddfe2;
border-radius:
2px;
}
.poll-option:hover {
border: 1px solid #ced0d4;
cursor:
pointer;
}
.poll-option .percentage-bg {
position: absolute;
top:
0;
left: 0;
height: 100%;
background-color: #ecf0f7;
}
.poll-voters
{
display: table-cell;
vertical-align: top;
padding-left:
5px;
}
.poll-voters .more {
width: 35px;
height: 35px;
background-color: #ecf0f7;
padding: 8px 0;
border: 1px solid
#ddd;
border-radius: 2px;
font-size: 11px;
font-weight:
600;
text-align: center;
cursor: pointer;
}
/* -- */
/*
youtube-player */
.youtube-player {
position: relative;
padding-top: 56%;
height: 0;
overflow: hidden;
max-width:
100%;
background: #000;
}
.youtube-player iframe {
position:
absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
}
.youtube-player img {
position:
absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
margin: auto;
max-width: 100%;
width:
100%;
height: auto;
cursor: pointer;
-webkit-transition: .4s
all;
-moz-transition: .4s all;
transition: .4s
all;
}
.youtube-player img:hover {
-webkit-filter:
brightness(75%);
}
.youtube-player .play {
width: 72px;
height:
72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background:
url('{$system['system_url']}/content/themes/{$system['theme']}/images/youtube.png')
no-repeat;
cursor: pointer;
}
/* -- */
/* video player
*/
.js_mediaelementplayer,
.js_mediaelementplayer .mejs__overlay-play
{
width: 100%!important;
}
/* -- */
/* COMMENT */
/*
------------------------------- */
.comment {
font-size:
12px;
line-height: 16px;
padding-bottom: 10px;
-webkit-transition:
all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all
0.5s ease;
transition: all 0.5s ease;
}
.comment.reply
{
padding-left: 10px;
padding-bottom: 0;
margin-bottom:
10px;
border-left: 2px solid #eee;
}
.comment-avatar {
display:
table-cell;
vertical-align: top;
padding-right:
10px;
}
.comment-avatar-picture {
background-size:
cover;
background-repeat: no-repeat;
background-position:
center;
background-color: #eee;
width: 100%;
height:
100%;
padding-top: 100%;
overflow: hidden;
min-width:
30px;
min-height: 30px;
display: block;
border-radius:
50%;
}
.comment-data, .comment-edit {
display:
table-cell;
vertical-align: top;
width: 100%;
}
.comment-data
.img-responsive {
max-width: 30%;
max-height: 100px;
margin: 5px
0;
}
.comment-text {
text-align: initial;
word-break:
break-word;
word-wrap: break-word;
overflow: hidden;
margin-bottom:
5px;
}
.comment-replies {
padding-top: 10px;
}
.comment-replies
> ul {
width: 100%;
}
/* comment-form */
.comment-form
{
border: 1px solid #eee;
}
.comment-form textarea {
direction:
ltr;
display: block;
border: 0;
resize: none;
outline:
none;
width: 100%;
padding: 7px 64px 7px 7px;
margin: 0;
font-size:
12px;
line-height: 16px;
height: 30px;
border-radius: 2px
}
@media
(min-width: 992px) {
.comment-form textarea {
padding-right:
47px;
}
}
.comment-form .x-form-tools {
bottom: 4px;
right:
8px;
}
/* -- */
.comment-attachments {
background: #fff;
padding:
10px;
border: 1px solid #eee;
border-top: 0;
}
.comment
.comment-btn {
display: none;
}
.comment:hover .comment-btn
{
display: block;
}
.comment .dropdown-toggle {
color:
#d3d3d3;
}
.comment .dropdown-toggle:hover {
color: #b3b3b3;
cursor:
pointer;
}
/* BOX */
/* -------------------------------
*/
.box-tabs-wrapper {
background: #fff;
padding: 0
5px;
margin-bottom: 20px;
}
.box-tabs-wrapper>ul>li {
float:
left;
margin-right: 2px;
}
.box-tabs-wrapper>ul>li>a
{
color: #333;
padding: 12px 8px;
font-size: 11px;
line-height: 20px;
border-bottom: 2px solid transparent;
}
@media
(min-width: 480px) {
.box-tabs-wrapper>ul>li {
margin-right:
5px;
}
.box-tabs-wrapper>ul>li>a {
padding: 12px
10px;
font-size: 12px;
}
}
@media (min-width: 768px)
{
.box-tabs-wrapper {
padding: 0
10px;
}
.box-tabs-wrapper>ul>li {
margin-right:
10px;
}
.box-tabs-wrapper>ul>li>a {
padding: 12px;
font-size: 13px;
line-height:
20px;
}
}
.box-tabs-wrapper>ul>li>a:hover {
background:
transparent;
border-bottom: 2px solid
#ccc;
}
.box-tabs-wrapper>ul>li.active>a {
color:
#4083a9;
font-weight: 600;
border-bottom: 2px solid #597ba5;
}
.box
{
position: relative;
margin-bottom: 20px;
background: #fff;
border: 1px solid #ddd;
}
.box-picture {
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
background-color: #fff;
width: 100%;
height: 100%;
padding-top: 101%;
overflow: hidden;
display:
block;
}
.box-content {
padding: 10px;
}
.box-content .title
{
margin-bottom: 10px;
font-size: 14px;
font-weight: 500;
overflow:
hidden;
text-overflow: ellipsis;
display: block;
display:
-webkit-box;
line-height: 18px;
max-height: 18px;
-webkit-line-clamp:
1; /* number of lines to show */
-webkit-box-orient:
vertical;
}
.box-content .text {
font-size: 11px;
line-height:
26px;
color: #999;
}
.box-content .btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
/* BLOG */
/*
------------------------------- */
.blogs-wrapper h2 {
text-align:
center;
font-weight: 200;
margin-bottom: 30px;
font-size:
20px;
text-transform: uppercase;
}
.blog-container {
background:
#ffffff;
border-radius: 3px;
overflow: hidden;
margin-bottom: 20px;
display: block;
color: inherit;
text-decoration: none;
position: relative;
}
.blog-container
.blog-image img {
height: 100%;
width: 100%;
}
.blog-container
.blog-content {
padding: 10px;
}
.blog-container .blog-content h3
{
margin: 0;
font-weight: 900;
font-size: 20px;
text-transform: uppercase;
}
.blog-container .blog-content .text
{
margin: 12px 0;
font-size: 13px;
}
.blog-container .post-avatar
{
padding-right: 5px;
padding-top: 3px;
}
.blog-more {
width:
0%;
height: 100%;
color: #aaa;
background-color: #597ba5;
position: absolute;
top: 0;
opacity: 0.0;
text-align:
center;
-webkit-transition: all 0.4s ease-out 0s;
-o-transition:
all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;
}
.blog-more
span {
position: absolute;
top: calc(50% - 22px);
left:
calc(50% - 45px);
border: 1px solid #fff;
display:
inline-block;
padding: 10px 30px;
border-radius: 3px;
color:
#fff;
font-size: 16px;
}
.blog-container:hover .blog-more {
width: 100%;
opacity: 0.95;
}
@media (min-width: 768px)
{
.blogs-wrapper h2 {
font-size: 32px;
}
.blog-container
{
height: 400px;
}
.blog-container.primary {
background:
#597ba5;
}
.blog-container .blog-image {
overflow:
hidden;
height: 142px;
}
.blog-container.primary .blog-image {
display: inline-block;
width: 50%;
height: 100%;
max-height: 100%;
}
.blog-container.primary .blog-image img {
width:
auto;
max-width: inherit;
}
.blog-container.primary .blog-content
{
display: inline-block;
vertical-align: top;
width:
49%;
color: #ffffff;
}
.blog-container .blog-content h3
{
overflow: hidden;
text-overflow: ellipsis;
display:
-webkit-box;
line-height: 24px;
max-height: 72px;
-webkit-line-clamp: 3;
-webkit-box-orient:
vertical;
}
.blog-container.primary .blog-content h3 {
font-size:
26px;
line-height: 30px;
max-height: 180px;
-webkit-line-clamp: 6;
}
.blog-container .blog-content .text {
overflow: hidden;
text-overflow: ellipsis;
display:
-webkit-box;
line-height: 18px;
max-height: 108px;
-webkit-line-clamp: 6;
-webkit-box-orient:
vertical;
}
.blog-container.primary .blog-content .text {
margin:
13px 0;
font-size: 16px;
font-weight: 300;
line-height:
20px;
max-height: 140px;
-webkit-line-clamp:
7;
}
.blog-container.primary .text-link {
color:
#eee;
}
}
.article-wrapper {
background: #fff;
padding:
25px;
border-radius: 3px 3px 0 0;
}
.article-wrapper h3
{
margin-top: 0;
margin-bottom: 20px;
}
.article-meta-counter
{
display: inline-block;
padding: 4px 12px;
margin-bottom:
5px;
font-size: 14px;
line-height: 24px;
color: #999;
background: #f5f5f5;
border-radius:
2px;
}
.article-meta-counter:hover {
color: #999;
background:
#e1e1e1;
cursor: pointer;
}
.article-text {
font-size:
1.2em;
line-height: 1.6em;
word-wrap: break-word;
}
.article-text img
{
width: 100%!important;
height: auto!important;
}
.article-text
iframe {
width: 100%!important;
}
.article-tags {
margin-top:
20px
}
.article-tags ul > li {
display: inline-block;
margin-right: 4px;
margin-top: 4px;
}
.article-tags ul > li >
a {
border-radius: 2px;
background: #f5f5f5;
padding: 0
12px;
line-height: 24px;
color: #999;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
text-align: center;
white-space: nowrap;
display: inline-block;
}
.article-tags ul
> li > a:hover {
background: #597ba5;
color:
#fff;
}
.articles-widget-header {
margin-bottom: 20px;
border-bottom: 1px solid #e1e1e1;
}
.articles-widget-title {
display:
inline-block;
margin: 0;
margin-bottom: -1px;
text-transform: uppercase;
white-space: nowrap;
font-weight:
300;
font-size: 18px;
line-height: 40px;
color: #999;
border-bottom: 1px solid #aaa;
}
.article-categories {
margin-bottom:
15px;
}
.article-categories li {
float: left;
margin-right:
5px;
margin-bottom: 5px;
}
.article-category {
border-radius:
12px;
background: #777;
padding: 0 12px;
line-height:
24px;
color: #fff;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
text-align: center;
white-space:
nowrap;
display: inline-block;
}
.article-category.small
{
font-size: 9px;
}
.article-category:hover {
background:
#597ba5;
color: #fff;
}
/* FORUM */
/*
------------------------------- */
/* forum-navbar */
.forum-navbar
{
background-color: #597ba5;
border: 0;
border-radius:
2px;
margin-bottom: 0;
}
.forum-navbar .navbar-nav > li > a
{
color: #ecf0f1;
}
.forum-navbar .navbar-nav > li >
a:hover,
.forum-navbar .navbar-nav > li > a:focus {
color:
#ffffff;
background: transparent;
}
.forum-navbar .navbar-nav >
.active > a,
.forum-navbar .navbar-nav > .active >
a:hover,
.forum-navbar .navbar-nav > .active > a:focus {
color:
#ffffff;
background-color: #40628a;
}
.forum-navbar .navbar-nav >
.open > a,
.forum-navbar .navbar-nav > .open >
a:hover,
.forum-navbar .navbar-nav > .open > a:focus {
color:
#ffffff;
background-color: #40628a;
}
.forum-navbar .navbar-toggle
{
border-color: #40628a;
}
.forum-navbar
.navbar-toggle:hover,
.forum-navbar .navbar-toggle:focus
{
background-color: #40628a;
}
.forum-navbar .navbar-toggle .icon-bar
{
background-color: #ecf0f1;
}
.forum-navbar
.navbar-collapse,
.forum-navbar .navbar-form {
border-color:
#40628a;
}
@media (min-width: 768px) {
.forum-navbar .navbar-collapse
{
padding-left: 0;
}
}
/* -- */
/* forum-breadcrumb
*/
.forum-breadcrumb {
padding: 8px 20px;
margin-top:
20px;
margin-bottom: 0;
word-wrap: break-word;
word-break:
break-all;
}
/* -- */
/* forum-title */
.forum-title {
margin-top:
20px;
margin-bottom: 20px;
word-wrap: break-word;
}
.forum-title h1
{
font-size: 18px;
margin-top: 0;
margin-bottom:
5px;
}
.forum-title p {
margin-bottom: 0;
}
/* -- */
/*
forum-category */
.forum-category {
padding: 15px 20px;
margin-top:
20px;
background-color: #597ba5;
color: #fff;
font-weight:
600;
font-size: 13px;
border-radius: 2px 2px 0 0;
}
.forum-category a
{
color: #fff
}
.forum-category a:hover {
text-decoration:
underline;
}
/* -- */
/* forum-head */
.forum-head {
margin-right:
0;
margin-left: 0;
}
.forum-head > .column {
padding:
20px;
background-color: #16232d;
color: #fff;
font-weight:
300;
font-size: 12px;
text-align: center;
border-right: 1px solid
#192534;
border-left: 1px solid #161e27;
}
.forum-head.threads >
.column {
background-color: #576c7c;
border-right: 1px solid
#374855;
border-left: 1px solid #6d8292;
}
.forum-head >
.column:first-child {
text-align: left;
border-left:
none;
}
.forum-head > .column:last-child {
border-right:
none;
}
/* -- */
/* forum-row */
.forum-row {
display:
flex;
display: -webkit-box;
display: -webkit-flex;
display:
-ms-flexbox;
flex-wrap: wrap;
margin-right: 0;
margin-left:
0;
}
.forum-row > .column {
display: flex;
display:
-webkit-box;
display: -webkit-flex;
display:
-ms-flexbox;
flex-direction: column;
padding: 20px;
background-color:
#f5f5f5;
border-bottom: 1px solid #e6e6e6;
color: #808080;
font-size:
12px;
word-wrap: break-word;
}
.forum-row > .column.icon {
color:
#999999;
text-align: center;
}
.forum-row .sub-forums li {
float:
left;
margin-right: 10px;
}
/* -- */
/* forum-meta
*/
.forum-meta-head {
padding: 15px 20px 15px 20px;
background-color:
#16232d;
color: #fff;
font-size: 12px;
font-weight:
300;
}
.forum-meta-conent {
padding: 15px 20px 15px
20px;
background-color: #f5f5f5;
color: #808080;
font-size:
12px;
}
/* -- */
/* forum-thread */
.forum-thread {
padding: 20px
10px;
margin-top: 10px;
background: #fff;
border: 1px solid
#ddd;
border-radius: 3px;
box-shadow: 0 1px 1px
rgba(0,0,0,.05);
}
.forum-thread .row {
margin-left: 0;
margin-right:
0;
}
.forum-thread .avatar {
width: 80px;
height: 80px;
border-radius: 50%;
}
.forum-thread .time {
padding-bottom:
5px;
margin-bottom: 10px;
border-bottom: 1px solid
#f4f4f4;
}
.forum-thread .text {
word-wrap:
break-word;
}
.forum-thread .text img,
.forum-thread .text iframe {
max-width: 100%;
}
/* -- */
/* forum-result */
.forum-result
{
margin-top: 20px;
}
.forum-result .head {
padding: 10px 20px;
background-color: #576c7c;
color: #fff;
font-weight: 300;
font-size: 12px;
}
.forum-result .head a {
color:
#fff
}
.forum-result .head a:hover {
text-decoration:
underline;
}
.forum-result .content {
padding: 10px 20px;
background-color: #f5f5f5;
color: #808080;
font-size:
12px;
}
.forum-result .title {
font-size: 14px;
}
.forum-result
.snippet {
background: #fff;
border: solid 1px #e6e6e6;
padding: 8px 10px;
word-wrap: break-word;
}
/* -- */
/*
PUBLISHER */
/* ------------------------------- */
.publisher
{
margin-bottom: 20px;
background: #fff;
border: 1px solid
#ddd;
border-radius: 3px;
box-shadow: 0 1px 1px
rgba(0,0,0,.05);
}
.publisher.mini {
margin-bottom: 0;
border-radius:
0;
border: 0;
}
.publisher-loader {
display: none;
position:
absolute;
top: 5px;
right: 10px;
z-index: 1;
}
/* publisher-tabs
*/
.publisher-tabs {
margin: 8px 10px 0;
padding-bottom: 5px;
border-bottom: 1px solid #efefef;
}
.publisher-tabs > li {
float:
left;
margin-right: 4px;
border-right: 1px solid
#efefef;
}
.publisher-tabs > li:last-child {
border-right:
0;
}
.publisher-tabs > li > span {
padding: 4px 8px;
display:
block;
color: #4083a9;
cursor: pointer;
}
.publisher-tabs > li
> span:hover {
text-decoration: none;
background-color:
#eee;
border-radius: 2px;
}
.publisher-tabs > li > span.active
{
position: relative;
background-color: #fff;
color:
#4b4f56;
}
.publisher-tabs > li > span.active:before {
content: "";
position: absolute;
border-left: 6px solid
transparent;
border-right: 6px solid transparent;
border-bottom:
6px solid #efefef;
border-bottom-color: rgba(0,0,0,.15);
bottom:
-5px;
left: 50%;
}
.publisher-tabs > li > span.active:after
{
content: "";
position: absolute;
border-left:
6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
border-bottom-color: rgb(255, 255,
255);
bottom: -6px;
left: 50%;
}
.publisher-tabs
.dropdown-menu span, .publisher-tabs .dropdown-menu a {
display: block;
padding: 4px 20px;
font-size: 13px;
color: #4083a9;
cursor: pointer;
}
.publisher-tabs .dropdown-menu span:hover,
.publisher-tabs .dropdown-menu a:hover {
color: #fff;
background:
#5e86b8;
}
.publisher-tabs .dropdown-menu span.active {
color:
#4b4f56;
font-weight: 400;
}
.publisher-tabs .dropdown-menu
span.active:hover {
background: #fff;
}
.publisher-tabs form
{
display: inline;
}
.publisher-tabs form input[type=file] {
width:
100%;
}
/* -- */
.publisher textarea {
direction: ltr;
resize:
none;
outline: none;
width: 100%;
padding: 10px;
font-size:
13px;
line-height: 20px;
height: 60px;
border: 0
none;
border-radius: 3px 3px 0 0;
}
.publisher .btn {
padding: 6px
12px;
font-size: 11px;
line-height: 15px;
}
.publisher-scraper
{
display: none;
position: relative;
padding:
10px;
}
.publisher-scraper-remover {
position: absolute;
top:
15px;
right: 20px;
background: #dedede;
border: 1px solid
#eaeaea;
padding: 0 4px;
border-radius: 50%;
z-index:
1;
}
.publisher-scraper-remover:hover {
background:
#fff;
}
.publisher-scraper-remover button.close {
opacity:
0.5
}
.publisher-attachments {
padding: 10px 10px 5px;
}
/*
publisher-meta */
.publisher-meta {
position: relative; /* for fa icon
*/
border-top: 1px dashed #eee;
color: #cdcdcd;
padding: 5px 10px 5px
38px;
display: none;
}
.publisher-meta.top {
border-top:
0;
border-bottom: 1px dashed #eee;
}
.publisher-meta .fa {
position:
absolute;
top: 10px;
left: 10px;
border-right: 1px solid
#ccc;
padding-right: 20px;
}
.publisher-meta input, .publisher-meta
select {
width: 100%;
color: #4e5665;
font-size: 13px;
line-height:
20px;
outline: 0 none;
border: 0 none;
}
.publisher-meta select
{
color: #cdcdcd;
}
.publisher-meta select:focus {
color:
#4e5665;
}
.publisher-meta input::-webkit-input-placeholder {
color:
#cdcdcd;
}
.publisher-meta input:-moz-placeholder {
color:
#cdcdcd;
opacity: 1;
}
.publisher-meta input:-ms-input-placeholder
{
color: #cdcdcd;
}
/* -- */
/* feelings
*/
.publisher-meta.feelings {
padding: 0;
}
#feelings-menu-toggle
{
padding: 5px;
cursor: pointer;
}
#feelings-menu-toggle.active
{
display: table-cell;
white-space: nowrap;
padding: 5px;
background: #e2e8f6;
border-right: 1px dotted #dddfe2;
color:
#6f6f6f;
cursor: pointer;
}
#feelings-data {
display:
table-cell;
width: 100%;
padding: 5px;
}
.feeling-item
{
padding: 5px;
cursor: pointer;
color: #666;
}
.feeling-item:hover
{
background: #5e86b8;
color: #fff!important;
}
.feeling-item .icon
{
display: table-cell;
vertical-align: top;
padding-right:
5px;
}
.feeling-item .data {
display: table-cell;
vertical-align:
middle;
width: 100%;
font-size: 1.2em;
font-weight: 600;
}
/* --
*/
.publisher-footer {
background: #f9f9f9;
border-top: 1px solid
#eee;
border-radius: 0 0 3px 3px;
height: 40px;
}
.publisher.mini
.publisher-footer {
border-radius: 0;
}
.publisher-tools {
float:
left;
}
.publisher-tools li {
float: left;
}
.publisher-tools li
> span {
padding: 3px 10px 4px;
display: block;
line-height:
32px;
color: #999;
cursor: pointer;
}
.publisher-tools li:first-child
> span {
border-radius: 0 0 0 3px;
}
.publisher.mini
.publisher-tools li:first-child > span {
border-radius:
0;
}
.publisher-tools li > span:hover {
text-decoration:
none;
background-color: #eee;
}
.publisher-tools li > span.active
{
padding: 3px 9px 4px;
background-color: #fff;
border-right: 1px
solid #eee;
border-left: 1px solid #eee;
}
.publisher-tools li >
span.activated {
color: #4083a9;
}
.publisher-tools-attach
{
position: relative; /* for input file */
overflow: hidden;
}
/*
posts-filter */
.posts-filter {
margin-bottom: 20px;
padding-bottom: 5px;
border-bottom: 1px solid #ddd;
line-height:
34px;
font-weight: 600;
}
.posts-filter span {
color:
#999;
}
.posts-filter .btn-group .btn,
.posts-filter .btn-group .open
.btn.dropdown-toggle,
.posts-filter .btn-group .btn-default.active,
.posts-filter .btn-group .btn-default:active,
.posts-filter .btn-group
.open .btn-default.dropdown-toggle {
background:
transparent!important;
box-shadow: none!important;
border: 0
none!important;
}
/* -- */
/* AUTO-COMPLETE */
/*
------------------------------- */
.typeahead {
position: relative; /*
for dropdown-menu */
float: left;
}
.typeahead input {
width:
100%;
color: #4e5665;
font-size: 13px;
line-height: 20px;
outline:
0 none;
border: 0 none;
}
.tags li {
float: left;
padding: 2px
4px;
margin: 0 3px 3px 0;
background: #EEF2F5;
color:
#245774;
font-size: 11px;
line-height: 16px;
border: 1px dotted
#9FB8CB;
border-radius: 3px;
}
.tags button {
filter:
alpha(opacity=50);
opacity: 0.5;
font-size: 16px;
margin-left:
4px;
}
.tags button:hover {
filter: alpha(opacity=80);
opacity:
0.8;
}
/* Google Geo-Autocomplete */
.pac-container {
z-index:
999999;
}
/* -- */
/* LIGHTBOX */
/*
------------------------------- */
.lightbox-open {
overflow: hidden;
/* hide the page scroll */
padding-right: 17px
!important;
}
.lightbox-open .main-header {
padding-right: 17px
!important;
}
.lightbox {
position: fixed;
top: 0;
right:
0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background:
rgba(0, 0, 0, 0.9);
z-index: 99999;
overflow-y:
scroll;
}
.lightbox-container {
display: table;
width:
100%;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.6);
padding-right:
0;
padding-left: 0;
}
.lightbox-preview {
position:
relative;
display: block;
width: 100%;
vertical-align:
middle;
background: #000;
}
.lightbox-preview.nodata {
width:
100%;
}
.lightbox-next,
.lightbox-prev {
position: absolute;
top:
50%;
right: 2%;
opacity: 0.5;
}
.lightbox-prev {
left: 2%;
right:
auto;
}
.lightbox-next:hover,
.lightbox-prev:hover {
opacity:
1;
cursor: pointer;
}
.lightbox-next .fa,
.lightbox-prev .fa
{
color: #fff;
text-shadow: 0 2px 2px
rgba(0,0,0,.5);
}
.lightbox-preview img {
margin: 0
auto;
max-width: 100%;
max-height: -moz-calc(100vh - 92px); /* 92px =
46*2 (header) */
max-height: -webkit-calc(100vh - 92px);
max-height:
-o-calc(100vh - 92px);
max-height: calc(100vh -
92px);
}
.lightbox-data {
display: block;
width:
100%;
vertical-align: top;
background: #fff;
}
.lightbox-data
.lightbox-close {
padding: 4px 8px;
border-radius:
4px;
}
.lightbox-data .lightbox-close:hover {
background: #e9eaee;
color: #666;
cursor: pointer;
}
.lightbox-post {
padding: 0
8px;
height: -moz-calc(100vh - 113px); /* 113px = 46*2 (header) + 21px
(close btn) */
height: -webkit-calc(100vh - 113px);
height:
-o-calc(100vh - 113px);
height: calc(100vh - 113px);
}
/* CHAT
*/
/* ------------------------------- */
/* chat-sidebar
*/
.chat-sidebar {
display: none;
position: fixed;
right: 0;
top:
46px;
bottom: 0;
width: 210px;
border-left: 1px solid
#dedede;
box-shadow: 0 0 4px rgba(0,0,0,.1);
}
@media (min-width:
1200px) {
.main-wrapper,
.top-bar,
.main-header {
padding-right:
210px;
}
body.n_chat .main-wrapper,
body.n_chat
.top-bar,
body.n_chat .main-header{
padding-right:
0;
}
.chat-sidebar {
display: block;
}
}
/*
chat-sidebar-header */
.chat-sidebar-header {
position: absolute;
top:
0;
width: 100%;
background: #f3f3f3;
padding: 10px;
line-height:
20px;
}
.chat-sidebar-header .fa {
color:
#c2c2c2;
}
.chat-sidebar-header .fa:hover {
color: #999;
cursor:
pointer;
}
/* -- */
.chat-sidebar-content {
position:
absolute;
top: 40px;
bottom: 34px;
width: 100%;
background:
#e9eaee;
border-top: 1px solid #dedede;
border-bottom: 1px solid
#dedede;
}
.chat-sidebar-content .online,
.chat-sidebar-content .offline
{
font-size: 9px;
margin-right: 3px;
}
.chat-sidebar .online
{
color: #65a830;
}
.chat-sidebar.disabled .chat-sidebar-content
{
opacity: 0.3;
}
.chat-sidebar.disabled .chat-sidebar-content
.online,
.chat-sidebar.disabled .chat-sidebar-content .offline
{
display: none;
}
.chat-sidebar-footer {
position:
absolute;
bottom: 0;
width: 100%;
}
.chat-sidebar-footer
.form-control {
border: 0;
box-shadow: none;
}
/* -- */
/*
chat-widget */
.chat-widget {
display: none;
position:
fixed;
bottom: 0;
right: 10px;
width: 260px;
z-index:
1000;
}
.chat-widget.js_chat-widget-master {
display: block;
}
@media
(min-width: 992px) {
.chat-widget {
display: block;
}
}
@media
(min-width: 1200px) {
.chat-widget.js_chat-widget-master {
display:
none;
}
}
/* -- */
/* chat-head-title */
.chat-widget-head
{
background: #597ba5;
position: relative; /* for close button
*/
color: #fff;
width: 100%;
font-size: 12px;
padding:
10px 8px;
border-radius: 2px 2px 0 0;
cursor:
pointer;
}
.chat-widget-head .fa-circle {
color:
#65a830;
font-size: 9px;
}
.chat-widget-head a {
color:
#fff;
}
.chat-widget-head a:hover {
text-decoration:
underline;
}
.chat-head-label {
display: none;
position:
absolute;
top: -15px;
right: 5px;
}
.chat-widget.chat-box.new
.chat-head-label {
display: block;
}
/* -- */
/* chat-widget-content
*/
.chat-widget-content {
position: relative; /* for chat-to
*/
display: none;
background: #e9eaee;
padding: 0;
border-left: 1px
solid #d4d5d6;
border-right: 1px solid #d4d5d6;
}
/* -- */
/*
chat-to */
.chat-to {
position: absolute;
top: 0;
left: 0;
right:
0;
background: #fff;
border-bottom: 1px solid #d4d5d6;
color:
#cdcdcd;
padding: 5px 10px 5px 38px;
}
.chat-to .to {
position:
absolute;
top: 5px;
left: 10px;
}
.panel-messages .chat-to
{
padding-top: 10px;
padding-bottom: 10px;
}
.panel-messages .chat-to
.to {
top: 10px;
}
/* -- */
/* chat-conversations
*/
.chat-conversations {
padding: 0 7px;
}
/* -- */
/*
chat-attachments */
.chat-attachments {
background: #fff;
padding:
10px;
border-top: 1px solid #d4d5d6;
}
/* -- */
/* chat-form
*/
.chat-form {
background: #fff;
}
.chat-form-message {
background:
#fff;
padding: 7px;
overflow-y: auto;
overflow-x:
hidden;
max-height: 69px; /* 14px*4 (lines) + 14px (padding) + 1px
(top-border) */
border-top: 1px solid #d4d5d6;
}
.chat-form-message
textarea, .chat-form-message input[type="text"] {
direction:
ltr;
display: block;
border: 0 none;
resize: none;
outline:
none;
box-shadow: none;
width: 100%;
padding: 0;
margin:
0;
font-size: 13px;
line-height: 18px;
height: 18px;
overflow:
hidden;
}
.chat-form .x-form-tools {
position: static;
padding: 0
7px 7px 7px;
}
.chat-form ul.x-form-tools > li {
float: left;
margin-right: 6px;
padding: 4px;
border-radius:
50%;
}
.chat-form ul.x-form-tools > li:hover {
background:
#f3f3f3;
cursor: pointer;
}
.chat-form ul.x-form-tools > li .fa
{
font-size: 1.125em;
}
.chat-form ul.x-form-tools >
li.x-form-tools-colors {
color: #597ba5;
}
.chat-form .emoji-menu
{
bottom: 40px;
right: 100%;
left: 2px;
}
.chat-form
.emoji-menu:before {
right: auto;
left: 41px;
}
.chat-form
.emoji-menu:after{
right: auto;
left: 42px;
}
/* -- */
/*
chat-colors-menu */
.chat-colors-menu {
display: none;
position:
absolute;
bottom: 40px;
left: 28px;
width: 189px;
margin: 0;
padding: 6px;
font-size: 13px;
line-height:
100%;
background-color: #fff;
border: 1px solid #d4d5d6;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
z-index: 99999;
}
.chat-colors-menu:before {
position: absolute;
top:
100%;
left: 47px;
content: "";
border-color: #d4d5d6
transparent transparent transparent;
border-style: solid;
border-width:
8px;
}
.chat-colors-menu:after {
position: absolute;
top:
100%;
left: 48px;
content: "";
border-color: #fff
transparent transparent transparent;
border-style: solid;
border-width:
7px;
}
.chat-colors-menu .item {
float: left;
padding: 4px;
margin-right: 1px;
margin-bottom: 1px;
}
.chat-colors-menu
.item:hover {
cursor: pointer;
background: #f3f3f3;
border-radius:
4px;
}
/* -- */
/* conversation */
.conversation {
padding-top:
10px;
margin-bottom: 20px;
}
.conversation-user {
width:
30px;
height: 30px;
float: left;
border-radius: 50%;
overflow:
hidden;
margin-right: 10px;
}
.conversation-user img {
width:
30px;
height: 30px;
}
.conversation-body {
position: relative; /*
for arrow */
float: left;
max-width: -moz-calc(100% - 40px); /* 40px =
(30px+10px) (avatar + margin) */
max-width: -webkit-calc(100% -
40px);
max-width: -o-calc(100% - 40px);
max-width: calc(100% -
40px);
}
.conversation.right .conversation-user,
.conversation.right
.conversation-body {
float: right;
}
.conversation-body .text
{
background: #fff;
padding: 5px 7px;
margin-bottom:
3px;
font-size: 0.875em;
border-radius: 12px;
word-break:
initial;
word-wrap: break-word;
}
.conversation.right
.conversation-body .text {
background: #597ba5;
color:
#fff;
text-align: right;
}
/* attachments */
.conversation-body
.attachments li {
float: left;
width: 64px;
height:
64px;
margin-right: 5px;
margin-bottom: 5px;
}
.conversation-body
.attachments li.item {
border: 1px solid #eee;
cursor:
pointer;
}
.conversation-body .attachments li.item img {
width:
64px;
height: 64px;
}
.conversation-body .attachments li.loading
{
padding-top: 22px; /* 64px-20px(loader) / 2 */
background:
#f3f3f3;
border: 1px solid #eee;
}
/* -- */
.conversation-body .time
{
position: absolute;
top: 100%;
left: 0px;
width:
204px;
margin-top: 2px;
color: #605f5f;
font-size:
0.875em;
font-weight: 300;
}
.conversation.right .conversation-body
.time {
right: 0;
left: auto;
text-align:
right;
}
.conversation-body .time:before {
content:
"\f017";
font-family: 'Font Awesome\ 5 Free';
font-style:
normal;
font-weight: normal;
text-decoration: inherit;
margin-top:
4px;
padding-right: 2px;
font-size: 0.875em;
}
/* -- */
/* EMOJI
*/
/* ------------------------------- */
.emoji-menu {
display:
none;
position: absolute;
bottom: 27px;
right: -3px;
min-width:
224px;
margin: 0;
padding: 6px 2px 0 6px;
font-size:
13px;
line-height: 100%;
background-color: #fff;
border: 1px solid
#d4d5d6;
border-radius: 2px;
box-shadow: 0 1px 1px
rgba(0,0,0,.05);
z-index: 99999;
}
.emoji-menu:before {
position:
absolute;
top: 100%;
right: 3px;
content:
"";
border-color: #d4d5d6 transparent transparent
transparent;
border-style: solid;
border-width:
8px;
}
.emoji-menu:after {
position: absolute;
top: 100%;
right:
4px;
content: "";
border-color: #f6f7f9 transparent
transparent transparent;
border-style: solid;
border-width:
7px;
}
.publisher .emoji-menu {
bottom: auto;
top: 47px;
left:
0;
}
.lightbox .emoji-menu {
bottom: auto;
top: 27px;
right:
-7px;
}
.publisher .emoji-menu:before {
right: auto;
left:
12px;
top: auto;
bottom: 100%;
border-color: transparent transparent
#d4d5d6 transparent;
}
.lightbox .emoji-menu:before {
top:
auto;
bottom: 100%;
border-color: transparent transparent #d4d5d6
transparent;
}
.publisher .emoji-menu:after {
right: auto;
left:
13px;
top: auto;
bottom: 100%;
border-color: transparent transparent
#fff transparent;
}
.lightbox .emoji-menu:after {
top: auto;
bottom:
100%;
border-color: transparent transparent #fff
transparent;
}
.emoji-menu .item {
float: left;
padding: 2px;
margin-right: 1px;
margin-bottom: 1px;
}
.emoji-menu .item:hover
{
cursor: pointer;
background: #f3f3f3;
border-radius:
4px;
}
.emoji-menu .item > img {
width: 66px;
height:
66px;
}
.emoji-menu .nav-tabs {
border-top: 1px #dddfe2
solid;
border-bottom: 0;
background: #f6f7f9;
margin: 0 -2px
0px -6px;
padding: 0 10px;
}
.emoji-menu .nav-tabs > li > a
{
color: #555;
padding: 10px;
margin: 0;
border:
0;
border-radius: 0;
border-top: 2px solid transparent;
}
.emoji-menu
.nav-tabs > li > a:hover {
background: transparent;
color:
#4083a9;
border-color: transparent;
border-bottom: 0;
}
.emoji-menu
.nav-tabs > li.active > a,
.emoji-menu .nav-tabs > li.active
> a:hover,
.emoji-menu .nav-tabs > li.active > a:focus
{
border: 0;
color: #4083a9;
background:
transparent;
border-top: 2px solid #4083a9;
}
/* PAGE = [BASIC]
*/
/* ------------------------------- */
.page-title {
background:
#EBE8D7;
background-image:
url('{$system['system_url']}/content/themes/{$system['theme']}/images/shattered.png');
background-repeat:
repeat;
color: #40628A;
text-align: center;
font-size:
34px;
font-weight: 100;
line-height: 50px;
padding: 70px
0;
margin-bottom: 25px;
}
.hr-heading {
display: block;
overflow:
hidden;
text-align: center;
white-space: nowrap;
}
.hr-heading-text
{
position: relative;
display: inline-block;
color:
#999;
}
.hr-heading-text:before, .hr-heading-text:after {
position:
absolute;
top: 50%;
width: 9999px;
height: 1px;
background:
#ddd;
content: '';
}
.hr-heading-text:before {
right:
100%;
margin-right: 15px;
}
.hr-heading-text:after {
left:
100%;
margin-left: 15px;
}
.footer {
border-top: 1px solid
#ddd;
padding: 10px 0;
margin-top: 25px;
margin-bottom:
25px;
}
/* PAGE = [INDEX] */
/* -------------------------------
*/
.index-wrapper {
background-image:
url('{$system['system_url']}/content/themes/{$system['theme']}/images/index-wallpaper.jpg');
background-repeat:
no-repeat;
background-position: center center;
background-size:
cover;
padding: 30px 0;
}
.index-intro {
text-align:
center;
margin: 0 auto;
}
.index-intro h1 {
font-size:
50px;
font-weight: 100;
color: #fff;
}
.index-intro p
{
font-weight: 100;
font-size: 18px;
line-height: 24px;
color:
#ccc;
}
.fly-head {
display: block;
position:
absolute;
opacity: 0.6;
-webkit-transition: all .5s;
transition: all
.5s;
}
.fly-head:hover {
opacity: 1;
}
.fly-head img {
width:
64px;
height: 64px;
padding: 2px;
border: 1px dashed
#999;
border-radius: 50%;
}
.panel-login {
margin-top: 20px;
border: 0 none;
border-radius: 0;
background-color: #fff;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0,
0.24);
}
@media (min-width: 768px) {
.panel-login {
min-width:
330px;
}
}
.panel-login h4 {
margin-top: 0;
margin-bottom:
20px;
}
.directory-intro {
text-align: center;
margin: 0
auto;
padding: 30px 0;
}
.directory-intro h2 {
font-size:
38px;
color: #000;
font-weight: 200;
}
.directory-intro p
{
font-size: 16px;
line-height: 22px;
color: #999;
font-weight:
400;
}
.panel-directory {
display: block;
background:
#f6f7f9;
padding: 20px;
margin-bottom: 15px;
font-size:
14px;
line-height: 20px;
text-align: center;
color:
#898f9c;
border-radius: 4px;
}
.panel-directory:hover {
background:
#eee;
color: #898f9c;
}
.panel-directory .title {
margin: 15px 0 5px
0;
font-size: 22px;
line-height: 28px;
color:
#4b4f56;
}
.daytime_message {
padding: 5px 10px;
display:
none;
}
.daytime_message img {
width: 28px;
height:
28px;
margin-right: 5px;
}
.daytime_message button {
margin-top:
4px;
font-size: 18px;
}
/* PAGE = [STARTED] */
/*
------------------------------- */
.wizard-header h3 {
font-weight:
200;
text-align: center;
margin-bottom: 20px;
}
/* PAGE =
[HOME] */
/* ------------------------------- */
.nav-home
{
background: #e9eaee;
z-index: 2;
}
.nav-home img {
width:
20px;
margin-right: 2px;
border-radius:
2px;
}
.nav-home.nav-pills>li>a {
padding: 5px 10px;
color:
#555;
border-radius: 2px;
}
.nav-home.nav-pills>li.active>a,
.nav-home.nav-pills>li.active>a:hover,
.nav-home.nav-pills>li.active>a:focus {
color:
#fff;
background-color: #597BA5;
}
/* PAGE = [MESSAGES] */
/*
------------------------------- */
/* panels */
.panel-conversations
.panel-heading {
background: #fff;
padding: 15px;
font-weight:
600;
}
.panel-conversations .panel-body {
padding: 10px
0;
height:66vh;
}
.panel-messages .panel-heading {
background:
#fff;
line-height: 24px;
font-weight: 600;
}
.panel-messages
.panel-heading .fa-circle {
color: #65a830;
font-size:
9px;
}
.panel-messages .panel-heading .btn {
padding: 5px
11px;
font-size: 12px;
}
.panel-messages .panel-body {
padding:
0;
}
.panel-messages.empty .panel-body {
padding: 15px;
padding-top:
100px;
height: 66vh;
color: #DEDEDE;
text-align:
center;
}
.panel-messages.fresh .panel-body {
position:
relative;
background-color: #f3f3f3;
}
/* -- */
/* conversation
*/
.panel-messages .conversation-user {
width: 50px;
height:
50px;
}
.panel-messages .conversation-user img {
width: 50px;
height:
50px;
}
.panel-messages .conversation-body {
max-width:
-moz-calc(100% - 120px); /* 120px = (50px+10px)*2 (avatars + margins)
*/
max-width: -webkit-calc(100% - 120px);
max-width: -o-calc(100% -
120px);
max-width: calc(100% - 120px);
}
.panel-messages
.conversation-body .text {
background: #e9eaee;
}
/* -- */
/* PAGE
= [PROFILE] */
/* ------------------------------- */
.profile-header
{
position: relative;
width: 100%;
margin-bottom: 20px;
background:
#fff;
border: 1px solid #d4d5d4;
border-top: 0;
border-radius: 0 0
3px 3px;
}
.profile-cover-wrapper {
display: block;
position:
relative;
width: 100%;
height: 145px;
overflow:
hidden;
background-color: #C4CCDF;
-webkit-transition: height
.5s;
transition: height .5s;
}
.profile-cover-wrapper img {
position:
relative;
width: 100%;
height: auto;
cursor: pointer;
}
@media
(max-width: 768px) {
.profile-cover-wrapper img {
top:
0!important;
}
}
.profile-cover-wrapper img.ui-draggable {
cursor:
move;
}
.profile-cover-wrapper:hover
.profile-cover-change,
.profile-cover-wrapper:hover
.profile-cover-position,
.profile-cover-wrapper:hover
.profile-cover-delete {
opacity:
0.8;
}
.profile-cover-change,
.profile-cover-position,
.profile-cover-delete
{
display: block;
position: absolute;
top: 15px;
left:
15px;
opacity: 0.4;
color: #fff;
font-size:
16px;
-webkit-transition: all .5s;
transition: all
.5s;
}
.profile-cover-change form.x-uploader {
position:
relative;
}
.profile-cover-position {
left:
50px;
}
.profile-cover-delete {
left: auto;
right:
15px;
}
.profile-cover-change i,
.profile-cover-position
i,
.profile-cover-delete i {
cursor: pointer;
text-shadow: 0 0 2px
rgba(0, 0, 0, 0.5);
}
.profile-cover-change-loader {
display:
none;
position: absolute;
top: 0;
left: 0;
opacity:
0.5;
background: #000;
width: 100%;
height: 100%;
padding-top:
62px;
-webkit-transition: all .5s;
transition: all
.5s;
}
.profile-cover-position-loader {
display: none;
position:
absolute;
top: 15px;
left: 50%;
width: auto;
background: rgba(0,0,0,.15);
color: #fff;
font-weight: 700;
padding: 7px;
border: 1px solid rgba(0,0,0,.1);
border-radius:
3px;
transform: translate(-50%);
}
.profile-cover-position-buttons
{
display: none;
position: absolute;
bottom: 15px;
right:
15px;
}
.profile-avatar-wrapper {
position: absolute;
left:
15px;
bottom: 15px;
padding: 2px;
background: #fff;
border-radius:
2px;
box-shadow: 0 0 0 1px rgba(0, 0, 0,
.3);
}
.profile-avatar-wrapper.static {
padding:
4px!important;
bottom: 0!important;
left:
30%;
}
.profile-avatar-wrapper img {
width: 60px;
height:
60px;
-webkit-transition: all .5s;
transition: all
.5s;
}
.profile-avatar-wrapper img.js_lightbox {
cursor:
pointer;
}
.profile-avatar-wrapper.static img {
width:
150px!important;
height:
150px!important;
}
.profile-avatar-wrapper:hover
.profile-avatar-change,
.profile-avatar-wrapper:hover
.profile-avatar-delete,
.profile-avatar-wrapper:hover .profile-avatar-crop
{
background: rgba(0, 0, 0, 0.25);
opacity: 0.9;
border-radius:
1px;
}
.profile-avatar-change,
.profile-avatar-delete,
.profile-avatar-crop
{
display: block;
position: absolute;
bottom: 5px;
left:
5px;
opacity: 0.4;
color: #fff;
font-size: 14px;
padding: 0
4px;
-webkit-transition: all .5s;
transition: all
.5s;
}
.profile-avatar-delete {
right: 5px;
left: auto;
top:
5px;
bottom: auto;
}
.profile-avatar-crop {
left:
35px;
}
.profile-avatar-change i,
.profile-avatar-delete
i,
.profile-avatar-crop i {
cursor: pointer;
text-shadow: 0 0 2px
rgba(0, 0, 0, 0.5);
}
.profile-avatar-change form.x-uploader
{
position: relative;
}
.profile-avatar-change-loader {
display:
none;
position: absolute;
top: 0;
left: 0;
opacity:
0.5;
background: #000;
width: 100%;
height: 100%;
padding-top:
31px;
-webkit-transition: all .5s;
transition: all
.5s;
}
.profle-date-wrapper {
position: absolute;
width:
45px;
left: 15px;
bottom: 50px;
padding: 6px;
border-radius: 6px;
border: 2px solid white;
background: rgba(0,
0, 0, 0.1);
text-align: center;
font-size: 12px;
color:
#fff;
-webkit-transition: all .5s;
transition: all
.5s;
}
.profile-name-wrapper {
position: absolute;
left:
94px;
bottom: 50px;
color: rgba(255, 255, 255, 0.5);
text-shadow: 0 0
3px rgba(0, 0, 0, 0.9);
font-size: 1.0em;
-webkit-transition: all
.5s;
transition: all .5s;
}
.no-avatar .profile-name-wrapper {
left:
70px;
bottom: 75px;
}
.profile-name-wrapper a {
color:
#fff;
word-break: break-all;
}
.profle-meta-wrapper {
position:
absolute;
left: 70px;
bottom: 55px;
color: #e9e9e9;
font-size: 12px;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
-webkit-transition: all .5s;
transition: all
.5s;
}
.profile-buttons-wrapper {
position: absolute;
bottom:
50px;
right: 15px;
display: none;
-webkit-transition: all
.5s;
transition: all .5s;
}
.profile-buttons-wrapper .btn,
.profile-buttons-wrapper-alt .btn {
padding: 1px 5px;
font-size:
10px;
line-height: 17px;
-webkit-transition: padding
.5s;
transition: padding .5s;
}
.profile-buttons-wrapper-alt
{
display: block;
-webkit-transition: padding .5s;
transition:
padding .5s;
}
@media (min-width: 560px) {
.profile-buttons-wrapper
{
display: block;
}
.profile-buttons-wrapper-alt {
display:
none;
}
.profile-buttons-wrapper .btn {
padding: 5px
10px;
font-size: 11px;
}
}
@media (min-width: 390px)
{
.profile-buttons-wrapper-alt .btn {
padding: 5px 10px;
font-size:
11px;
}
}
.profile-tabs-wrapper {
padding-left:
94px;
-webkit-transition: all .2s;
transition: all
.2s;
}
.no-avatar .profile-tabs-wrapper {
padding-left:
0!important;
}
.profile-tabs-wrapper>ul>li {
float:
left;
}
.profile-tabs-wrapper .middle-tabs {
display:
none;
}
.profile-tabs-wrapper .middle-tabs-alt {
display:
block;
}
@media (min-width: 430px) {
.profile-tabs-wrapper
.middle-tabs {
display: block;
}
.profile-tabs-wrapper
.middle-tabs-alt {
display:
none;
}
}
.profile-tabs-wrapper>ul>li>a {
padding: 12px
8px;
font-size: 11px;
line-height: 20px;
font-weight:
600;
border-right: 1px solid #e5e6e7;
-webkit-transition: all
.5s;
transition: all .5s;
}
.profile-tabs-wrapper .nav .open>a,
.profile-tabs-wrapper .nav .open>a:hover,
.profile-tabs-wrapper .nav
.open>a:focus {
border-color: transparent;
}
/*
panel-mutual-friends */
@media (max-width: 559px)
{
.panel-mutual-friends {
display: none;
}
}
.panel-mutual-friends
.btn {
padding: 5px 11px;
font-size: 12px;
}
.panel-mutual-friends
.panel-heading {
text-transform: uppercase;
}
.panel-mutual-friends li
{
width: 40px;
height: 40px;
margin-right: 8px;
float: left;
}
/*
-- */
/* panel-friends */
.panel-friends .col-xs-3,
.panel-friends
.col-xs-4 {
padding-left: 5px;
padding-right: 5px;
}
.panel-friends
.friend-picture {
position: relative;
display:
block;
background-size: cover;
background-repeat:
no-repeat;
background-position: center;
background-color:
#eee;
width: 100%;
height: 100%;
padding-top: 100%;
overflow:
hidden;
min-width: 40px;
min-height: 40px;
border-radius:
1px;
margin-bottom: 10px;
}
.panel-friends .friend-name {
position:
absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 5px;
color:
#fff;
font-size: 11px;
background: #000;
background:
-webkit-gradient(linear, center top, center bottom, from(transparent),
to(rgba(0, 0, 0, .7)));
background: -webkit-linear-gradient(transparent,
rgba(0, 0, 0, .7));
background: -moz-linear-gradient(transparent, rgba(0,
0, 0, .7));
}
/* -- */
/* panel-users */
.panel-users .col-xs-2
{
padding-left: 5px;
padding-right: 5px;
}
.panel-users
.user-picture-wrapper {
padding: 2px;
border: 2px solid #597ba5;
border-radius: 50%;
}
.panel-users .user-picture {
position:
relative;
display: block;
background-size: cover;
background-repeat:
no-repeat;
background-position: center;
background-color:
#eee;
width: 100%;
height: 100%;
padding-top: 100%;
border-radius:
50%;
cursor: pointer;
}
.panel-users .user-picture .add {
position:
absolute;
right: 0;
bottom: 0;
padding: 1px;
border-radius:
50%;
background: #fff;
font-size: 18px;
color:
#2795e9;
}
.panel-users .user-picture .add .fa{
display:
block;
}
/* -- */
/* panel-about */
.about-bio {
padding: 1px 16px
16px;
word-wrap: break-word;
text-align: center;
border-bottom: 1px solid #eee;
margin-bottom: 10px;
}
.about-list
{
list-style: none;
padding: 0;
margin: 0;
}
.about-list li
{
position: relative;
padding-bottom: 5px;
margin-bottom:
8px;
font-size: 12px;
line-height: 18px;
font-weight:
500;
}
.about-list li.package {
background: #597ba5;
color:
#fff;
padding: 10px 15px;
margin-left: -15px;
margin-right:
-15px;
margin-bottom: 15px;
text-align: center;
}
.about-list
li:last-child {
border-bottom: 0 none;
padding-bottom:
0;
margin-bottom: 0;
}
.about-list-item {
padding-left:
30px;
word-break: break-word;
}
.about-list-item a:hover
{
text-decoration: underline;
}
.about-list-item .fa {
position:
absolute;
top: 4px;
left: 0;
color: #a5a9b3;
}
.about-list-item
.details {
padding-top: 2px;
color: #b2b2b2;
font-size:
11px;
line-height: 16px;
font-weight: normal;
}
/* -- */
/* photos
& albums */
.panel-photos .row {
margin-left: -5px;
margin-right: -5px;
}
.panel-photos .col-xs-6 {
padding-left: 1px;
padding-right: 1px;
}
.pg_photo {
position: relative;
display:
block;
background-size: cover;
background-repeat:
no-repeat;
background-position: center;
background-color:
#eee;
width: 100%;
height: 100%;
padding-top: 100%;
min-width:
40px;
min-height: 40px;
border-radius: 1px;
margin-bottom:
2px;
}
.pg_photo.large {
min-width: 100px;
min-height:
100px;
}
.pg_photo-btn {
position: absolute;
right: 5px;
top:
5px;
}
.panel-albums .col-xs-6 {
padding-left: 5px;
padding-right:
5px;
}
.album-card {
border: 1px solid #ededed;
border-radius:
1px;
margin-bottom: 10px;
}
.album-cover {
display:
block;
background-size: cover;
background-repeat:
no-repeat;
background-position: center;
background-color:
#eee;
width: 100%;
height: 100%;
padding-top: 100%;
overflow:
hidden;
min-width: 40px;
min-height: 40px;
}
.album-details
{
padding: 10px;
color: #696969;
font-size:
11px;
}
.album-details .fa {
cursor: pointer;
}
.album-details
.tooltip {
width: auto;
min-width: 110px;
font-size:
11px;
}
.album-title {
text-align: center;
font-size:
1.5em;
font-weight: 600;
margin-top: 20px;
}
.album-meta
{
text-align: center;
margin-bottom: 40px;
}
/* -- */
/* PAGE =
[ADMIN] */
/* ------------------------------- */
.nav.admin>li>a
{
padding: 10px 10px;
}
.stat-panel {
background:
#597ba5;
border-radius: 2px;
display: table;
margin-bottom:
22px;
overflow: hidden;
position: relative;
table-layout:
fixed;
width: 100%;
}
.stat-panel.info {
background:
#5bc0de;
}
.stat-panel.success {
background:
#51ab51;
}
.stat-panel.danger {
background:
#e66454;
}
.stat-panel.warning {
background: #f4b04f;
}
.stat-cell
{
float: none;
}
.stat-cell {
display:
table-cell;
vertical-align: middle;
overflow: hidden;
padding:
20px;
position: relative;
color: #fff;
}
.stat-cell>*
{
position: relative;
}
.stat-cell .bg-icon {
bottom: 0;
color:
rgba(0,0,0,.05);
font-size: 100px;
line-height: 100px;
height:
100px;
position: absolute;
right: 0;
text-align: center;
width:
120px;
}
.stat-cell.small .bg-icon {
font-size: 70px;
line-height:
70px;
height: 74px;
}
.stat-cell a {
font-size: 12px;
color:
#fff;
}
.stat-cell a:hover {
text-decoration:
underline;
}
.admin-chart {
min-width: 100%;
height:
400px;
margin: 0 auto;
border: 1px solid #ddd;
}
/* -- */
/*
PAGE = [PACKAGES] */
/* -------------------------------
*/
.panel-pricing {
-moz-transition: all .3s ease;
-o-transition:
all .3s ease;
-webkit-transition: all .3s ease;
}
.panel-pricing:hover
{
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
}
.panel-pricing
.panel-heading {
background-color: #fff;
padding: 20px
10px;
}
.panel-pricing .panel-heading .fa {
margin-top:
10px;
font-size: 58px;
}
.panel-pricing .panel-body {
font-size:
18px;
color: #777777;
padding: 20px;
margin: 0px;
}
.panel-pricing
.price {
font-size: 2em;
}
.panel-pricing .period {
font-size:
0.8em;
color: #999;
}
.panel-pricing .panel-footer
{
background-color: #fff;
}
.panel-pricing .list-group-item {
color:
#777777;
border-bottom: 1px solid rgba(250, 250, 250,
0.5);
}
.panel-pricing .list-group-item:last-child
{
border-bottom-right-radius: 0px;
border-bottom-left-radius:
0px;
}
.panel-pricing .list-group-item:first-child
{
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
/* --
*/
/* PAGE = [MARKET] */
/* -------------------------------
*/
.market-header {
background: #EBE8D7;
background-image:
url('{$system['system_url']}/content/themes/{$system['theme']}/images/market.jpg');
background-repeat:
repeat;
color: #FFF;
text-align: center;
font-size:
2em;
font-weight: 200;
padding: 40px 0;
margin-bottom:
25px;
}
.market-header .form-control {
border: 1px solid #ffffff;
border-radius: 2px 0 0 2px;
color: #7697b7;
font-weight:
300;
}
.market-header .form-control::-webkit-input-placeholder {
color:
#aab8c5;
}
.market-header .form-control:-moz-placeholder {
color:
#aab8c5;
opacity: 1;
}
.market-header
.form-control:-ms-input-placeholder {
color: #aab8c5;
}
.market-header
.btn {
border: 1px solid #ffffff;
}
.thumbnail {
padding:
10px;
-webkit-transition: all 0.5s;
transition: all
0.5s;
}
.thumbnail:hover{
opacity:1.00;
box-shadow: 0px 0px 10px
#4bc6ff;
}
.thumbnail.boosted {
border: 2px solid
#f9b340;
}
.thumbnail .boosted-icon {
position: absolute;
left:
0;
top: -15px;
width: auto;
padding: 3px 6px;
font-size: 16px;
background: #f9b340;
color: #ffffff;
border-radius: 50%;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform:
rotate(-20deg); /* Standard syntax */
}
.thumbnail-picture
{
background-size: contain;
background-repeat: no-repeat;
background-position: top center;
background-color: #fff;
width:
100%;
height: 100%;
padding-top: 56%;
overflow: hidden;
min-width: 198px;
min-height: 198px;
display: block;
border-radius: 2px;
}
.thumbnail .title {
display: block;
margin-top:
10px;
margin-bottom: 10px;
font-size: 14px;
font-weight:
500;
overflow: hidden;
text-overflow: ellipsis;
display:
-webkit-box;
line-height: 18px;
max-height: 18px;
-webkit-line-clamp:
1; /* number of lines to show */
-webkit-box-orient:
vertical;
}
.thumbnail .text {
font-size: 13px;
overflow:
hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 18px;
min-height: 112px;
max-height: 112px;
-webkit-line-clamp: 6; /* number of lines to show */
-webkit-box-orient: vertical;
}
.thumbnail-footer {
border-top: 1px
solid #eee;
padding-top: 10px;
margin-top: 10px;
text-align:
center;
}
.thumbnail-footer .price {
font-size: 1.6em;
font-weight:
500;
color: #219FD1;
border-right: 1px solid #eee;
}
/* -- */
/*
NOTY NOTIFICATION */
/* -------------------------------
*/
.noty_theme__mint.noty_type__info,
.noty_theme__mint.noty_type__information {
background-color: rgba(89,
123, 165, 0.8)!important;
border-bottom: 1px solid
#597ba5!important;
}
.noty_body {
padding:
5px!important;
}
.noty_body .data-content {
color:
#fff!important;
}
/* -- */
/* TRANSLATOR */
/*
------------------------------- */
.translator-language {
display:
block;
font-size: 15px;
line-height: 100%;
padding:
15px;
margin-bottom: 5px;
border: 1px solid #eee;
border-radius:
1px;
}
.translator-language:hover {
background: #f3f3f3;
cursor:
pointer;
}
/* -- */
/* BIG ICON */
/*
------------------------------- */
.big-icon {
width: 80px;
height:
80px;
border: 4px solid rgba(128, 128, 128, 0.15);
border-radius:
50%;
margin: 20px auto;
position: relative;
}
.big-icon.success
{
border-color: rgba(76, 174, 76, 0.15);
}
.big-icon.error
{
border-color: rgba(217, 83, 79, 0.15);
}
.big-icon .fa
{
padding-top: 17px;
padding-left: 3px;
}
.big-icon.success .fa
{
color: #4cae4c;
}
.big-icon.error .fa {
color: #d9534f;
}
/* --
*/
/* SEE MORE */
/* ------------------------------- */
.see-more
{
text-align: center;
margin: 10px 0 0;
padding:
10px;
}
.see-more:hover {
text-decoration: underline;
cursor:
pointer;
}
.see-more.loading:hover {
text-decoration: none;
cursor:
default;
}
.see-more.done:hover {
text-decoration: underline;
cursor:
text;
}
/* -- */
/* LOADER */
/* -------------------------------
*/
.loader {
width: 100%;
display: -webkit-box;
display:
-webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display:
flex;
-webkit-box-align: center;
-webkit-align-items:
center;
-moz-box-align: center;
-ms-flex-align: center;
align-items:
center;
-webkit-box-pack: center;
-webkit-justify-content:
center;
-moz-box-pack: center;
-ms-flex-pack:
center;
justify-content: center;
padding: 5px 0;
}
.loader:after
{
display: block;
position: relative;
width: 20px;
height:
20px;
-webkit-animation: rotate 0.6s linear infinite;
-moz-animation:
rotate 0.6s linear infinite;
-ms-animation: rotate 0.6s linear
infinite;
-o-animation: rotate 0.6s linear infinite;
animation: rotate
0.6s linear infinite;
-webkit-border-radius: 100%;
-moz-border-radius:
100%;
border-radius: 100%;
border-top: 1px solid
#545a6a;
border-bottom: 1px solid #d4d4db;
border-left: 1px solid
#545a6a;
border-right: 1px solid #d4d4db;
content: '';
opacity:
.5;
}
.loader.loader_large:after {
width: 40px;
height:
40px;
}
.loader.loader_medium:after {
width: 25px;
height:
25px;
}
.loader.loader_small:after {
width: 10px;
height:
10px;
}
.loader.loader_green:after {
opacity: 1;
border-top: 1px
solid #42a26e;
border-bottom: 1px solid #fff;
border-left: 1px solid
#42a26e;
border-right: 1px solid #fff;
}
@keyframes rotate {
0%
{
transform: rotateZ(-360deg);
-webkit-transform:
rotateZ(-360deg);
-moz-transform: rotateZ(-360deg);
-o-transform:
rotateZ(-360deg);
}
100% {
transform:
rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
-moz-transform:
rotateZ(0deg);
-o-transform: rotateZ(0deg);
}
}
@-webkit-keyframes
rotate {
0% {
transform: rotateZ(-360deg);
-webkit-transform:
rotateZ(-360deg);
-moz-transform: rotateZ(-360deg);
-o-transform:
rotateZ(-360deg);
}
100% {
transform:
rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
-moz-transform:
rotateZ(0deg);
-o-transform: rotateZ(0deg);
}
}
@-moz-keyframes
rotate {
0% {
transform: rotateZ(-360deg);
-webkit-transform:
rotateZ(-360deg);
-moz-transform: rotateZ(-360deg);
-o-transform:
rotateZ(-360deg);
}
100% {
transform:
rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
-moz-transform:
rotateZ(0deg);
-o-transform: rotateZ(0deg);
}
}
@-o-keyframes rotate
{
0% {
transform: rotateZ(-360deg);
-webkit-transform:
rotateZ(-360deg);
-moz-transform: rotateZ(-360deg);
-o-transform:
rotateZ(-360deg);
}
100% {
transform:
rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
-moz-transform:
rotateZ(0deg);
-o-transform: rotateZ(0deg);
}
}
/* -- */
/*
POST LOADER */
/* ------------------------------- */
@keyframes anim {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
@-o-keyframes anim {
0% {
background-position: -468px 0;
}
100% {
background-position:
468px 0;
}
}
@-ms-keyframes anim {
0% {
background-position:
-468px 0;
}
100% {
background-position: 468px 0;
}
}
@-moz-keyframes anim {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
@-webkit-keyframes
anim {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
.panel-effect {
position:
relative;
background: #f6f7f8 no-repeat 800px 104px;
background-image:
url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2ZjdmOCIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZWRlZWYxIi8+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNmNmY3ZjgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNmY3ZjgiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, 0%
50%, 100% 50%, color-stop(0%, #f6f7f8), color-stop(20%, #edeef1),
color-stop(40%, #f6f7f8), color-stop(100%, #f6f7f8));
background-image:
-moz-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8
100%);
background-image: -webkit-linear-gradient(left, #f6f7f8 0%,
#edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
background-image:
linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8
100%);
height: 104px;
-moz-animation: anim 1s forwards infinite
linear;
-webkit-animation: anim 1s forwards infinite linear;
animation: anim 1s forwards infinite linear;
}
.fake-effect {
position: absolute;
background: #fff;
right: 0;
left: 0;
height: 6px;
}
.fe-0 {
height: 40px;
left: 40px;
width:
8px;
}
.fe-1 {
height: 8px;
left: 48px;
top: 0;
right:
0;
}
.fe-2 {
left: 136px;
top: 8px;
}
.fe-3 {
height:
12px;
left: 48px;
top: 14px;
}
.fe-4 {
left: 100px;
top:
26px;
}
.fe-5 {
height: 10px;
left: 48px;
top:
32px;
}
.fe-6 {
height: 20px;
top: 40px;
}
.fe-7 {
left:
410px;
top: 60px;
}
.fe-8 {
height: 13px;
top:
66px;
}
.fe-9 {
left: 440px;
top: 79px;
}
.fe-10 {
height:
13px;
top: 85px;
}
.fe-11 {
left: 178px;
top: 98px;
}
/* --
*/
/* ON/OFF TOGGLE */
/* -------------------------------
*/
.switch {
position: relative;
display: inline-block;
width:
60px;
height: 34px;
margin: 0;
}
.switch.sm {
width:
30px;
height: 17px;
}
.switch input {
display:none;
}
.slider
{
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right:
0;
bottom: 0;
background-color: #ccc;
-webkit-transition:
.4s;
transition: .4s;
}
.slider:before {
position:
absolute;
content: "";
height: 26px;
width: 26px;
left:
4px;
bottom: 4px;
background-color: white;
-webkit-transition:
.4s;
transition: .4s;
}
.switch.sm .slider:before {
height:
13px;
width: 13px;
left: 2px;
bottom: 2px;
}
input:checked +
.slider {
background-color: #2196F3;
}
input:focus + .slider
{
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before
{
-webkit-transform: translateX(26px);
-ms-transform:
translateX(26px);
transform: translateX(26px);
}
.switch.sm
input:checked + .slider:before {
-webkit-transform:
translateX(13px);
-ms-transform: translateX(13px);
transform:
translateX(13px);
}
.slider.round {
border-radius:
34px;
}
.slider.round:before {
border-radius: 50%;
}
/* -- */
/*
FANCY CHECKBOX */
/* ------------------------------- */
.checkbox
{
padding-left: 20px;
}
.checkbox label {
display:
inline-block;
vertical-align: middle;
position:
relative;
padding-left: 5px;
}
.checkbox label::before {
content:
"";
display: inline-block;
position: absolute;
width:
17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid
#cccccc;
border-radius: 3px;
background-color:
#fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s
ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s
ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s
ease-in-out;
}
.checkbox label::after {
display:
inline-block;
position: absolute;
width: 16px;
height: 16px;
left:
0;
top: 0;
margin-left: -20px;
padding-left: 3px;
padding-top:
1px;
font-size: 10px;
color: #555555;
}
.checkbox
input[type="checkbox"],
.checkbox input[type="radio"]
{
opacity: 0;
z-index: 1;
cursor: pointer;
}
.checkbox
input[type="checkbox"]:focus + label::before,
.checkbox
input[type="radio"]:focus + label::before {
outline: thin
dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset:
-2px;
}
.checkbox input[type="checkbox"]:checked +
label::after,
.checkbox input[type="radio"]:checked +
label::after {
content:"\e013";
font-family:'Glyphicons
Halflings';
}
.checkbox input[type="checkbox"]:indeterminate +
label::after,
.checkbox input[type="radio"]:indeterminate +
label::after {
display: block;
content: "";
width:
10px;
height: 3px;
background-color: #555555;
border-radius:
2px;
margin-left: -16.5px;
margin-top: 7px;
}
.checkbox
input[type="checkbox"]:disabled,
.checkbox
input[type="radio"]:disabled {
cursor:
not-allowed;
}
.checkbox input[type="checkbox"]:disabled +
label,
.checkbox input[type="radio"]:disabled + label
{
opacity: 0.65;
}
.checkbox input[type="checkbox"]:disabled
+ label::before,
.checkbox input[type="radio"]:disabled +
label::before {
background-color: #eeeeee;
cursor:
not-allowed;
}
.checkbox.checkbox-circle label::before {
border-radius:
50%;
}
.checkbox.checkbox-inline {
margin-top:
0;
}
.checkbox-primary input[type="checkbox"]:checked +
label::before,
.checkbox-primary input[type="radio"]:checked +
label::before {
background-color: #337ab7;
border-color:
#337ab7;
}
.checkbox-primary input[type="checkbox"]:checked +
label::after,
.checkbox-primary input[type="radio"]:checked +
label::after {
color: #fff;
}
.checkbox-danger
input[type="checkbox"]:checked + label::before,
.checkbox-danger
input[type="radio"]:checked + label::before {
background-color:
#d9534f;
border-color: #d9534f;
}
.checkbox-danger
input[type="checkbox"]:checked + label::after,
.checkbox-danger
input[type="radio"]:checked + label::after {
color:
#fff;
}
.checkbox-info input[type="checkbox"]:checked +
label::before,
.checkbox-info input[type="radio"]:checked +
label::before {
background-color: #5bc0de;
border-color:
#5bc0de;
}
.checkbox-info input[type="checkbox"]:checked +
label::after,
.checkbox-info input[type="radio"]:checked +
label::after {
color: #fff;
}
.checkbox-warning
input[type="checkbox"]:checked +
label::before,
.checkbox-warning input[type="radio"]:checked +
label::before {
background-color: #f0ad4e;
border-color:
#f0ad4e;
}
.checkbox-warning input[type="checkbox"]:checked +
label::after,
.checkbox-warning input[type="radio"]:checked +
label::after {
color: #fff;
}
.checkbox-success
input[type="checkbox"]:checked +
label::before,
.checkbox-success input[type="radio"]:checked +
label::before {
background-color: #5cb85c;
border-color:
#5cb85c;
}
.checkbox-success input[type="checkbox"]:checked +
label::after,
.checkbox-success input[type="radio"]:checked +
label::after {
color: #fff;
}
.checkbox-primary
input[type="checkbox"]:indeterminate +
label::before,
.checkbox-primary
input[type="radio"]:indeterminate + label::before
{
background-color: #337ab7;
border-color:
#337ab7;
}
.checkbox-primary
input[type="checkbox"]:indeterminate +
label::after,
.checkbox-primary
input[type="radio"]:indeterminate + label::after
{
background-color: #fff;
}
.checkbox-danger
input[type="checkbox"]:indeterminate +
label::before,
.checkbox-danger
input[type="radio"]:indeterminate + label::before
{
background-color: #d9534f;
border-color:
#d9534f;
}
.checkbox-danger
input[type="checkbox"]:indeterminate +
label::after,
.checkbox-danger input[type="radio"]:indeterminate
+ label::after {
background-color: #fff;
}
.checkbox-info
input[type="checkbox"]:indeterminate +
label::before,
.checkbox-info input[type="radio"]:indeterminate
+ label::before {
background-color: #5bc0de;
border-color:
#5bc0de;
}
.checkbox-info
input[type="checkbox"]:indeterminate +
label::after,
.checkbox-info input[type="radio"]:indeterminate +
label::after {
background-color: #fff;
}
.checkbox-warning
input[type="checkbox"]:indeterminate +
label::before,
.checkbox-warning
input[type="radio"]:indeterminate + label::before
{
background-color: #f0ad4e;
border-color:
#f0ad4e;
}
.checkbox-warning
input[type="checkbox"]:indeterminate +
label::after,
.checkbox-warning
input[type="radio"]:indeterminate + label::after
{
background-color: #fff;
}
.checkbox-success
input[type="checkbox"]:indeterminate +
label::before,
.checkbox-success
input[type="radio"]:indeterminate + label::before
{
background-color: #5cb85c;
border-color:
#5cb85c;
}
.checkbox-success
input[type="checkbox"]:indeterminate +
label::after,
.checkbox-success
input[type="radio"]:indeterminate + label::after
{
background-color: #fff;
}
.radio {
padding-left: 20px;
}
.radio
label {
display: inline-block;
vertical-align: middle;
position:
relative;
padding-left: 5px;
}
.radio label::before {
content:
"";
display: inline-block;
position: absolute;
width:
17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid
#cccccc;
border-radius: 50%;
background-color:
#fff;
-webkit-transition: border 0.15s ease-in-out;
-o-transition:
border 0.15s ease-in-out;
transition: border 0.15s
ease-in-out;
}
.radio label::after {
display: inline-block;
position:
absolute;
content: " ";
width: 11px;
height: 11px;
left:
3px;
top: 3px;
margin-left: -20px;
border-radius:
50%;
background-color: #555555;
-webkit-transform: scale(0,
0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform:
scale(0, 0);
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8,
-0.33, 0.2, 1.33);
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8,
-0.33, 0.2, 1.33);
-o-transition: -o-transform 0.1s cubic-bezier(0.8,
-0.33, 0.2, 1.33);
transition: transform 0.1s cubic-bezier(0.8, -0.33,
0.2, 1.33);
}
.radio input[type="radio"] {
opacity:
0;
z-index: 1;
cursor: pointer;
}
.radio
input[type="radio"]:focus + label::before {
outline: thin
dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset:
-2px;
}
.radio input[type="radio"]:checked + label::after
{
-webkit-transform: scale(1, 1);
-ms-transform: scale(1,
1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.radio
input[type="radio"]:disabled {
cursor: not-allowed;
}
.radio
input[type="radio"]:disabled + label {
opacity:
0.65;
}
.radio input[type="radio"]:disabled + label::before
{
cursor: not-allowed;
}
.radio.radio-inline {
margin-top:
0;
}
.radio-primary input[type="radio"] + label::after
{
background-color: #337ab7;
}
.radio-primary
input[type="radio"]:checked + label::before {
border-color:
#337ab7;
}
.radio-primary input[type="radio"]:checked +
label::after {
background-color: #337ab7;
}
.radio-danger
input[type="radio"] + label::after {
background-color:
#d9534f;
}
.radio-danger input[type="radio"]:checked +
label::before {
border-color: #d9534f;
}
.radio-danger
input[type="radio"]:checked + label::after {
background-color:
#d9534f;
}
.radio-info input[type="radio"] + label::after
{
background-color: #5bc0de;
}
.radio-info
input[type="radio"]:checked + label::before {
border-color:
#5bc0de;
}
.radio-info input[type="radio"]:checked +
label::after {
background-color: #5bc0de;
}
.radio-warning
input[type="radio"] + label::after {
background-color:
#f0ad4e;
}
.radio-warning input[type="radio"]:checked +
label::before {
border-color: #f0ad4e;
}
.radio-warning
input[type="radio"]:checked + label::after {
background-color:
#f0ad4e;
}
.radio-success input[type="radio"] + label::after
{
background-color: #5cb85c;
}
.radio-success
input[type="radio"]:checked + label::before {
border-color:
#5cb85c;
}
.radio-success input[type="radio"]:checked +
label::after {
background-color:
#5cb85c;
}
input[type="checkbox"].styled:checked +
label:after,
input[type="radio"].styled:checked + label:after
{
content:"\e013";
font-family:'Glyphicons
Halflings';
}
input[type="checkbox"] .styled:checked +
label::before,
input[type="radio"] .styled:checked +
label::before {
color: #fff;
}
input[type="checkbox"]
.styled:checked + label::after,
input[type="radio"]
.styled:checked + label::after {
color: #fff;
}
/* -- */
/*
PROGRESS BAR */
/* ------------------------------- */
#ProgressBar {
position: fixed;
top: 0;
width: 0%;
height: 5px;
background-color: #597ba5;
z-index: 99999;
-webkit-transition:
padding .5s;
transition: padding .5s;
}
/* -- */
/* EXTRAS */
/*
------------------------------- */
/* margins */
.mt0 {
margin-top:
0!important;
}
.mb0 {
margin-bottom: 0!important;
}
.ml0
{
margin-left: 0!important;
}
.mr0 {
margin-right:
0!important;
}
.ml5 {
margin-left: 5px;
}
.mr5 {
margin-right:
5px;
}
.mlr5 {
margin-left: 5px;
margin-right: 5px;
}
.mt5
{
margin-top: 5px;
}
.mb5 {
margin-bottom: 5px;
}
.mtb5
{
margin-top: 5px;
margin-bottom: 5px;
}
.ml10 {
margin-left:
10px;
}
.mr10 {
margin-right: 10px;
}
.mlr10 {
margin-left:
10px;
margin-right: 10px;
}
.mt10 {
margin-top: 10px;
}
.mb10
{
margin-bottom: 10px;
}
.mtb10 {
margin-top: 10px;
margin-bottom:
10px;
}
.ml20 {
margin-left: 20px;
}
.mr20 {
margin-right:
20px;
}
.mlr20 {
margin-left: 20px;
margin-right: 20px;
}
.mt20
{
margin-top: 20px;
}
.mb20 {
margin-bottom: 20px;
}
.mtb20
{
margin-top: 20px;
margin-bottom: 20px;
}
/* -- */
/* paddings
*/
.pl0 {
padding-left: 0px;
}
.pr0 {
padding-right: 0px;
}
.plr0
{
padding-left: 0px;
padding-right: 0px;
}
.pt0 {
padding-top:
0px;
}
.pb0 {
padding-bottom: 0px;
}
.ptb0 {
padding-top:
0px;
padding-bottom: 0px;
}
.pl5 {
padding-left: 5px;
}
.pr5
{
padding-right: 5px;
}
.plr5 {
padding-left: 5px;
padding-right:
5px;
}
.pt5 {
padding-top: 5px;
}
.pb5 {
padding-bottom:
5px;
}
.ptb5 {
padding-top: 5px;
padding-bottom: 5px;
}
.pl10
{
padding-left: 10px;
}
.pr10 {
padding-right: 10px;
}
.plr10
{
padding-left: 10px;
padding-right: 10px;
}
.pt10 {
padding-top:
10px;
}
.pb10 {
padding-bottom: 10px;
}
.ptb10 {
padding-top:
10px;
padding-bottom: 10px;
}
.pl20 {
padding-left: 20px;
}
.pr20
{
padding-right: 20px;
}
.plr20 {
padding-left:
20px;
padding-right: 20px;
}
.pt20 {
padding-top: 20px;
}
.pb20
{
padding-bottom: 20px;
}
.ptb20 {
padding-top:
20px;
padding-bottom: 20px;
}
.pl30 {
padding-left: 30px;
}
.pr30
{
padding-right: 30px;
}
.plr30 {
padding-left:
30px;
padding-right: 30px;
}
.pt30 {
padding-top: 30px;
}
.pb30
{
padding-bottom: 30px;
}
.ptb30 {
padding-top:
30px;
padding-bottom: 30px;
}
/* -- */
/* text */
.text-x-muted
{
color: #999;
}
.text-link {
color: #4083a9;
}
.text-link:hover
{
cursor: pointer;
text-decoration:
underline;
}
.text-underline:hover {
cursor:
pointer;
text-decoration: underline;
}
.text-clickable:hover
{
cursor: pointer;
}
.text-clickable:hover span {
text-decoration:
underline;
}
.text-active {
color:
#1e8bd2!important;
}
.text-readable {
font-size: 1.3em;
line-height:
1.8em;
}
.text-bg {
font-size: 1em;
}
.text-lg {
font-size:
1.3em;
}
.text-xlg {
font-size: 2.3em;
font-weight:
700;
}
.fw-normal {
font-weight: normal;
}
.fw-bold {
font-weight:
bold;
}
.red {
color: red;
}
.green {
color: green;
}
.yellow
{
color: #ebba16;
}
/* -- */
/* positions */
.relative
{
position: relative;
}
.fixed {
position: fixed;
}
.absolute
{
position: absolute;
}
/* -- */
/* cursor */
.pointer {
cursor:
pointer;
}
/* x */
.x-muted {
color: #a7a7a7;
}
.x-notifier
{
background: #ffffcd!important;
}
.x-hidden {
display:
none;
}
.x-visible {
visibility: hidden;
}
/* -- */
/* ---
RESPONSIVE 480 --- */
/* ------------------------------- */
@media
(min-width: 480px) {
/* --- COMMON --- */
/*
------------------------------- */
/* data-container */
.data-content
.btn {
padding: 4px 12px;
font-size:
12px;
}
.data-container.small .btn {
padding: 4px 8px;
font-size:
11px;
}
/* -- */
/* PROFILE */
/*
------------------------------- */
.profile-cover-wrapper {
height:
180px;
}
.profile-avatar-wrapper.static {
left:
35%;
}
.profile-avatar-wrapper img {
width: 80px;
height:
80px;
}
.profle-date-wrapper {
width: 55px;
bottom:
60px;
font-size: 14px;
}
.profile-name-wrapper {
left:
118px;
font-size: 1.4em;
}
.no-avatar .profile-name-wrapper
{
left: 80px;
bottom: 80px;
}
.profle-meta-wrapper {
left: 80px;
bottom: 60px;
font-size:
14px;
}
.profile-tabs-wrapper {
padding-left:
118px;
}
.profile-tabs-wrapper>ul>li>a {
padding: 12px
10px;
font-size: 12px;
}
/* -- */
}
/* --- RESPONSIVE 786 ---
*/
/* ------------------------------- */
@media (min-width: 768px)
{
/* --- MAIN --- */
/* ------------------------------- */
/*
Panels */
.panel-heading.with-icon {
font-size:
16px;
}
.panel-heading.with-icon .btn {
padding: 4px
12px;
font-size: 12px;
}
.panel-heading.with-nav .nav>li>a
{
padding: 10px 15px;
font-size: 13px;
}
/* -- */
/* ---
HEADER --- */
/* ------------------------------- */
/* top-bar
*/
.top-bar {
font-size: 1em;
}
.top-bar .col-sm-5
{
text-align: right;
}
/* -- */
/* - navbar-form -
*/
.main-header .navbar-form {
width: 45%;
height:
46px;
}
.main-header .navbar-form .form-control {
height:
30px;
line-height: 20px;
margin-top: 8px;
padding-bottom:
5px;
padding-top: 5px;
}
/* -- */
/* navbar-container
*/
.navbar-container {
float: right;
}
.main-header .nav>li
{
width: auto!important;
}
.main-header
.nav>li.dropdown.open>a {
color:
#fff!important;
background-color: transparent;
}
.main-header
.nav>li,
.main-header .dropdown {
position: relative;
}
/*
dropdown-menu */
.navbar-nav .open .dropdown-menu {
right:
0!important;
left: inherit!important;
}
.main-header .user-menu
{
border-left: 1px solid #5e86b8;
}
.main-header .nav
.open>a.user-menu,
.main-header .nav .open>a.user-menu:hover,
.main-header .nav .open>a.user-menu:focus {
background:
#40628a;
border-left: 1px solid #40628a;
}
.main-header
.user-menu>img {
margin-top: -3px;
height: 25px;
width:
25px;
}
.main-header .user-menu>span {
padding-left:
5px;
}
/* -- */
/* dropdown-widget */
.navbar-container
.dropdown-widget {
min-width:
400px!important;
}
.dropdown-widget.with-arrow:before {
content:
"";
position: absolute;
width: 13px;
height:
13px;
background: white;
border: 1px solid #25618c;
border-bottom:
0 none;
border-right: 0 none;
transform: rotate(45deg);
top:
-7px;
right: 10px;
}
.dropdown-widget.dropdown-search {
left:
0!important;
top: 39px!important;
right: inherit!important;
}
/*
-- */
/* --- COMMON --- */
/* -------------------------------
*/
/* feeds-item */
.navbar-container .feeds-item {
border-bottom:
1px solid #e4e4e4;
}
.navbar-container .feeds-item.unread
{
background: #E9EAED;
border-radius: 0;
}
.navbar-container
.feeds-item:last-child {
border-bottom: 0 none;
}
/* -- */
/*
data-container */
.data-container {
border-radius:
0;
}
.navbar-container a.data-container:hover {
background:
#f6f7f8;
}
.data-avatar {
width: 50px;
height:
50px;
border-radius: 3px;
}
.data-avatar.rounded {
border-radius:
50%;
}
.data-avatar .left-avatar,
.data-avatar .right-avatar
{
width: 24px;
height: 50px;
border-radius: 3px 0 0
3px;
}
.data-avatar .right-avatar {
width: 25px;
border-radius: 0
3px 3px 0;
}
.data-container.small .data-avatar {
width: 30px; /*
override the previous */
height: 30px;
}
.data-container.small
.data-avatar .left-avatar,
.data-container.small .data-avatar
.right-avatar {
width: 24px;
height:
50px;
}
.data-container.small .data-avatar .right-avatar {
width:
25px;
}
.data-avatar .fa {
font-size: 4em;
}
.data-content
{
padding-left: 58px;
word-wrap:
break-word;
}
.data-container.small .data-content {
padding-left:
38px; /* override the previous */
}
.navbar-container .data-content
{
color: #818181;
}
.navbar-container .data-content a {
color:
#818181;
}
.navbar-container .data-content .name a {
color:
#4083a9;
}
/* -- */
/* attachments */
.attachments li {
width:
96px;
height: 96px;
}
.attachments li.item img {
width:
94px;
height: 94px;
}
.attachments li.item.deletable:before
{
width: 94px;
height: 94px;
}
.attachments li.loading
{
padding-top: 38px; /* 96px-20px(loader) / 2 */
background:
#f3f3f3;
border: 1px solid #eee;
}
/* -- */
/* USER POPOVER
*/
/* ------------------------------- */
.user-popover {
position:
relative;
}
.user-popover-wrapper {
width: 400px;
height:
174px;
z-index: 99999;
}
.user-popover-wrapper:before
{
content: "";
position: absolute;
border-left: 10px
solid transparent;
border-right: 10px solid
transparent;
border-bottom: 10px solid #ccc;
border-bottom-color:
rgba(0,0,0,.15);
top: 0;
}
.user-popover-wrapper.tr:before
{
left: 10px;
}
.user-popover-wrapper.tl:before {
right:
10px;
}
.user-popover-wrapper:after {
content: '';
position:
absolute;
border-left: 8px solid transparent;
border-right: 8px solid
transparent;
border-bottom: 9px solid #fff;
top: 1px;
z-index:
99999;
}
.user-popover-wrapper.tr:after {
left:
12px;
}
.user-popover-wrapper.tl:after {
right:
12px;
}
.user-popover-content {
width: 400px;
position:
absolute;
top: 9px;
left: 0;
font-size: 14px;
text-align:
left;
border: 1px solid #ccc;
border: 1px solid
rgba(0,0,0,.15);
border-radius: 3px;
background-color:
#fff;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
z-index:
999999;
}
.user-card {
position: relative;
padding:
2px;
}
.user-card-cover {
width: 100%;
height:
120px;
background-color: #C4CCDF;
background-size:
cover;
background-position: center center;
border-bottom: 1px solid
#e5e6e7;
}
.user-card-avatar {
position: absolute;
left:
15px;
bottom: -15px;
padding: 3px;
border-radius:
3px;
background: #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0,
.3);
}
.user-card-avatar img {
width: 60px;
height:
60px;
border-radius: 2px;
}
.user-card-info {
position:
absolute;
left: 91px;
bottom: 10px;
color:
#fff;
}
.user-card-info a {
color: #fff;
text-shadow: 0 0 3px
rgba(0, 0, 0, 0.9);
}
.user-card-info a:hover {
text-decoration:
underline;
}
.user-card-info a.name {
font-size:
1.3em;
font-weight: 600;
}
.user-card-info .info {
font-size:
12px;
line-height: 15px;
text-shadow: 0 0 3px rgba(0, 0, 0,
0.9);
}
.user-card-meta {
padding-left: 91px;
padding-top:
5px;
padding-bottom: 5px;
font-size: 12px;
line-height:
15px;
}
.user-card-meta .fa {
color:
#b2b2b2;
}
.user-popover-content .footer {
text-align:
right;
padding: 6px 7px;
margin-bottom: 0;
margin-top:
0;
background: #f6f7f8;
border-top: 1px solid #ccc;
border-top:
1px solid rgba(0,0,0,.15);
border-radius: 0 0 3px
3px;
}
.user-popover-content .btn {
padding: 5px
11px;
font-size: 11px;
}
/* -- */
/* PUBLISHER */
/*
------------------------------- */
.publisher .btn {
padding: 6px
12px;
font-size: 12px;
}
/* -- */
/* LIGHTBOX */
/*
------------------------------- */
.lightbox {
overflow-y:
none;
}
.lightbox-container {
margin-top: 46px;
width:
inherit;
}
.lightbox-preview {
display: table-cell;
width:
70%;
max-width: 800px;
}
.lightbox-data {
display:
table-cell;
width: 30%;
}
/* -- */
/* PAGE = [BASIC] */
/*
------------------------------- */
.footer .links{
text-align:
right;
}
/* -- */
/* PAGE = [PROFILE] */
/*
------------------------------- */
.profile-cover-wrapper {
height:
300px;
}
.profile-cover-change,
.profile-cover-position,
.profile-cover-delete
{
font-size: 22px;
}
.profile-cover-change-loader {
padding-top:
125px;
}
.profile-avatar-wrapper {
padding: 4px;
border-radius:
3px;
}
.profile-avatar-wrapper.static {
left:
40%;
}
.profile-avatar-wrapper img {
width: 150px;
height:
150px;
}
.profile-avatar-wrapper:hover
.profile-avatar-change,
.profile-avatar-wrapper:hover
.profile-avatar-delete,
.profile-avatar-wrapper:hover
.profile-avatar-crop {
border-radius:
3px;
}
.profile-avatar-change,
.profile-avatar-delete,
.profile-avatar-crop
{
bottom: 10px;
left: 10px;
font-size:
18px;
}
.profile-avatar-delete {
right: 10px;
left: auto;
top: 10px;
bottom: auto;
}
.profile-avatar-crop {
left:
45px;
}
.profile-avatar-change-loader {
padding-top:
62px;
}
.profile-name-wrapper {
left: 195px;
bottom:
60px;
font-size: 1.9em;
font-weight:
600;
}
.profile-buttons-wrapper {
bottom:
60px;
}
.profile-buttons-wrapper .btn {
padding: 5px
11px;
font-size: 12px;
}
.profile-tabs-wrapper {
padding-left:
185px;
}
.profile-tabs-wrapper>ul>li>a {
padding: 12px
28px;
font-size: 13px;
line-height: 20px;
font-weight:
600;
}
/* -- */
}
/* OFFCANVAS */
/*
------------------------------- */
@media (max-width: 767px)
{
.offcanvas {
position:
relative;
}
.offcanvas>.row{
overflow:
hidden;
}
.offcanvas-sidebar {
position: absolute;
top:
0;
left: -80%;
width: 80%;
height: 100%;
z-index:
100;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all
0.25s ease-out;
transition: all 0.25s ease-out;
}
.offcanvas.active
.offcanvas-sidebar {
left: 0;
}
.offcanvas-mainbar {
left:
0;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s
ease-out;
transition: all 0.25s ease-out;
}
.offcanvas.active
.offcanvas-mainbar {
left: 80%;
}
}
{/strip}