Файл: sngine-v2.8/Script/content/themes/default/css/style.css
Строк: 7178
/**
* Index:
*
* 01. BASIC
* 02. MAIN
* 03. HEADER
* 04.
COMMON
* 05. PUBLISHER
* 06. POST
* 07. COMMENT
* 08. BLOG
* 09.
FORUM
* 10. AUTO-COMPLETE
* 11. LIGHTBOX
* 12. STORIES
* 13. CHAT
* 14. EMOJI
* 15. EMOJI REACTIONS
* 15. PAGE = [BASIC]
* 16. PAGE =
[404]
* 17. PAGE = [OAUTH]
* 18. PAGE = [INDEX]
* 19. PAGE =
[DIRECTORY]
* 20. PAGE = [MESSAGES]
* 21. PAGE = [PROFILE]
* 22. PAGE
= [ADMIN]
* 23. PAGE = [MARKET]
* 24. PAGE = [MOVIES]
* 25. NOTY
NOTIFICATION
* 26. TRANSLATOR
* 27. BIG ICON
* 28. LOADER
* 29.
POST LOADER
* 30. ON/OFF TOGGLE
* 31. CUSTOM RADIO/CHECKBOX TEMPLATES
* 32. SOCIAL BUTTONS
* 33. EXTRAS
* 34. OFFCANVAS
*/
/* BASIC
*/
/* ------------------------------- */
:root {
--body-font-family:
Roboto,-apple-system,system-ui,BlinkMacSystemFont,"Segoe
UI","Helvetica Neue",Arial,sans-serif;
--body-bg-color:
#f0f2f5;
--body-bg-color-dark: #131313;
--body-color:
#555;
--body-color-dark: #dfdfdf;
--link-color: #3367d6;
--header-bg-color: #3367d6;
--header-bg-color-dark:
#212121;
}
body {
font-family:
var(--body-font-family);
padding-top: 50px; /* 50px for header
*/
font-size: 13px;
color: var(--body-color);
background-color:
var(--body-bg-color);
}
body.night-mode {
color:
var(--body-color-dark);
background-color:
var(--body-bg-color-dark);
}
body.n_activated, body.n_live
{
padding-top: 100px; /* 50px for header + 50px for top bar */
}
ul
{
margin: 0;
padding: 0;
list-style: none;
}
a {
color:
var(--link-color);
}
a:hover {
text-decoration: none;
}
pre {
padding: 15px;
font-size: 13px;
word-break: break-all;
word-wrap: break-word;
background-color: #f7f7f7;
border: 1px
solid #dbdbdb;
border-radius: 4px;
}
body.night-mode pre {
color: var(--body-color-dark);
background-color: #363636;
border-color: #121212;
}
/* -- */
/* 02. MAIN */
/*
------------------------------- */
/* == SVG == */
.svg-container {
display: inline-block;
}
.svg-container svg {
width:
inherit!important;
height: inherit!important;
}
/* == */
/* ==
Scrollbar == */
.custom-scrollbar ::-webkit-scrollbar {
visibility:
hidden;
height: 8px;
width: 8px;
}
.custom-scrollbar
::-webkit-scrollbar-thumb {
visibility: hidden;
border-radius:
4px;
background: #808080;
}
.custom-scrollbar:hover
::-webkit-scrollbar,
.custom-scrollbar:hover ::-webkit-scrollbar-thumb
{
visibility: visible;
}
/* == */
/* == Grid == */
@media
(max-width: 576px) {
.container,
.col, .col-1, .col-10, .col-11,
.col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9,
.col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12,
.col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7,
.col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10,
.col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5,
.col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm,
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3,
.col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9,
.col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12,
.col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7,
.col-xl-8, .col-xl-9, .col-xl-auto {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-right: -5px;
margin-left: -5px;
}
}
/* == */
/* == Tooltip ==
*/
.tooltip-inner {
font-family: var(--body-font-family);
font-size: 13px;
white-space: nowrap;
max-width: none;
border-radius: 2px;
}
/* == */
/* == Badge == */
.badge.badge-lg
{
font-size: 100%;
}
/* == */
/* == Img-thumbnail ==
*/
body.night-mode .img-thumbnail {
background: #212121;
border-color:
#424242;
}
/* == */
/* == List-group == */
body.night-mode
.list-group-item {
background: #212121;
border-color: #424242;
}
/*
== */
/* == Nav-pills == */
/* -- Custom Nav
*/
.nav-pills.nav-search .nav-item,
.nav-pills.nav-started .nav-item {
margin-right: 10px;
margin-bottom: 10px;
}
.nav-pills.nav-search
.nav-item:last-child,
.nav-pills.nav-started .nav-item:last-child {
margin-right: 0;
}
.nav-pills.nav-search .nav-link:not(.active) {
background: #fff;
}
.nav-pills.nav-started .nav-link {
padding-top:
15px;
padding-bottom: 15px;
}
.nav-pills.nav-started
.nav-link:not(.active) {
background: #f3f3f3;
}
body.night-mode
.nav-pills.nav-search .nav-link:not(.active),
body.night-mode
.nav-pills.nav-started .nav-link:not(.active) {
background: #414141;
color: #fff;
}
body.night-mode .nav-pills.nav-search
.nav-link:not(.active):hover,
body.night-mode .nav-pills.nav-started
.nav-link:not(.active):hover {
background: #555;
}
/* == */
/* ==
Nav-tabs == */
body.night-mode .nav-tabs {
border-bottom-color:
#363636;
}
body.night-mode .nav-tabs .nav-item.show .nav-link,
body.night-mode .nav-tabs .nav-link.active {
color: #fff;
border-color: #363636 #363636 #212121;
background-color:
#212121;
}
body.night-mode .nav-tabs .nav-link:not(.active):hover
{
border-color: #363636;
}
/* == */
/* == Dropdown ==
*/
.dropdown-menu {
min-width: 200px;
box-shadow: 0 50px 100px
rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0,
0, 0, .1);
}
body.night-mode .dropdown-menu {
color:
#e5e5e5;
background: var(--header-bg-color-dark);
box-shadow: 0 6px
12px rgba(0,0,0,.175);
}
.dropdown-menu .dropdown-item {
font-size:
14px;
padding: 8px 16px;
}
.night-mode .dropdown-item {
color:
#e5e5e5;
}
body.night-mode .dropdown-item:focus,
body.night-mode
.dropdown-item:hover {
color: #e5e5e5;
background-color:
#333;
}
body.night-mode .dropdown-divider {
border-top-color:
#424242;
}
/* == */
/* == Modal == */
.modal {
z-index:
999999;
}
body.night-mode .modal-content {
background-color: #212121;
}
body.night-mode .modal-header,
body.night-mode .modal-footer
{
border-color: #424242;
}
.modal-header.with-nav {
padding-bottom: 0;
border-bottom: 0;
}
/* == */
/* == Alert ==
*/
.alert {
padding: 16px 24px;
}
.alert-link:hover {
text-decoration: underline;
}
.alert-dismissible {
padding-right:
72px;
}
.alert-primary {
color: #fff;
border-color: #7889e8;
background-color: #7889e8;
}
.alert-primary hr {
border-top-color: #6276e4;
}
.alert-secondary {
color: #212529;
border-color: #f6f7f8;
background-color:
#f6f7f8;
}
.alert-secondary hr {
border-top-color:
#e8eaed;
}
.alert-success {
color: #fff;
border-color:
#4fd69c;
background-color: #4fd69c;
}
.alert-success hr {
border-top-color: #3ad190;
}
.alert-info {
color: #fff;
border-color: #37d5f2;
background-color: #37d5f2;
}
.alert-info hr
{
border-top-color: #1fd0f0;
}
.alert-warning {
color:
#fff;
border-color: #fc7c5f;
background-color:
#fc7c5f;
}
.alert-warning hr {
border-top-color:
#fc6846;
}
.alert-danger {
color: #fff;
border-color:
#f75676;
background-color: #f75676;
}
.alert-danger hr {
border-top-color: #f63e62;
}
.alert-light {
color: #fff;
border-color: #bac1c8;
background-color: #bac1c8;
}
.alert-light hr
{
border-top-color: #acb4bd;
}
.alert-dark {
color: #fff;
border-color: #45484b;
background-color: #45484b;
}
.alert-dark hr
{
border-top-color: #393b3e;
}
/* -- Custom Alerts */
.alert-post
{
background: #f8f9fa;
color: var(--link-color);
font-weight: 600;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.night-mode
.alert-post {
background: #212121;
}
.alert-chat {
background:
#8d8d8d;
width: 75%;
padding: 5px 10px!important;
margin: 0
auto!important;
color: #fff;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
body.night-mode .alert-chat {
background: #000;
}
.alert .title {
padding-bottom:
8px;
margin-bottom: 10px;
font-weight: 600;
border-bottom-width:
1px;
border-bottom-style: solid;
}
.alert .icon {
display:
table-cell;
vertical-align: middle;
padding-right:
10px;
}
.alert .text {
display: table-cell;
vertical-align: top;
text-align: left;
}
/* == */
/* == Buttons == */
.btn {
font-size: 12px;
font-weight: 600;
padding: 12px 34px;
white-space: nowrap;
border-radius: 2px;
}
.btn.focus, .btn:focus
{
outline: 0;
box-shadow: none;
}
.btn.disabled, .btn:disabled
{
box-shadow: none;
}
.btn-lg, .btn-group-lg>.btn
{
font-size: 14px;
padding: 16px 96px;
}
.btn-md,
.btn-group-md>.btn {
font-size: 12px;
padding: 16px
56px;
}
.btn-sm, .btn-group-sm>.btn {
font-size: 11px;
padding:
8px 26px;
}
.btn-icon {
padding: 12px;
}
.btn-lg.btn-icon
{
padding: 19px 22px;
}
.btn-md.btn-icon {
padding: 17px
20px;
}
.btn-sm.btn-icon {
padding: 5px
8px;
}
.btn-primary,
.btn-primary.disabled,.btn-primary:disabled,
.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle
{
color: #fff;
border-color: #5e72e4;
background-color:
#5e72e4;
}
.btn-primary {
box-shadow: 0 4px 6px rgba(50,50,93,.11),0
1px 3px rgba(0,0,0,.08);
}
.btn-primary:hover {
color: #fff;
border-color: #4d61cf;
background-color:
#4d61cf;
}
.btn-primary.focus,.btn-primary:focus {
box-shadow: 0 4px
6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0
rgba(94,114,228,.5)
}
.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus
{
box-shadow:
none;
}
.btn-secondary,
.btn-secondary.disabled,.btn-secondary:disabled,
.btn-secondary:not(:disabled):not(.disabled).active,.btn-secondary:not(:disabled):not(.disabled):active,.show>.btn-secondary.dropdown-toggle
{
color: #212529;
border-color: #f7fafc;
background-color:
#f7fafc;
}
.btn-secondary {
box-shadow: 0 4px 6px rgba(50,50,93,.11),0
1px 3px rgba(0,0,0,.08);
}
.btn-secondary:hover {
color: #212529;
border-color: #f1f4f6;
background-color:
#f1f4f6;
}
.btn-secondary.focus,.btn-secondary:focus {
box-shadow: 0
4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0
rgba(247,250,252,.5);
}
.btn-secondary:not(:disabled):not(.disabled).active:focus,.btn-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-secondary.dropdown-toggle:focus
{
box-shadow:
none;
}
.btn-success,
.btn-success.disabled,.btn-success:disabled,
.btn-success:not(:disabled):not(.disabled).active,.btn-success:not(:disabled):not(.disabled):active,.show>.btn-success.dropdown-toggle
{
color: #fff;
border-color: #2dce89;
background-color:
#2dce89;
}
.btn-success {
box-shadow: 0 4px 6px rgba(50,50,93,.11),0
1px 3px rgba(0,0,0,.08);
}
.btn-success:hover {
color: #fff;
border-color: #2bc080;
background-color:
#2bc080;
}
.btn-success.focus,.btn-success:focus {
box-shadow: 0 4px
6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0
rgba(45,206,137,.5);
}
.btn-success:not(:disabled):not(.disabled).active:focus,.btn-success:not(:disabled):not(.disabled):active:focus,.show>.btn-success.dropdown-toggle:focus
{
box-shadow:
none;
}
.btn-info,
.btn-info.disabled,.btn-info:disabled,
.btn-info:not(:disabled):not(.disabled).active,.btn-info:not(:disabled):not(.disabled):active,.show>.btn-info.dropdown-toggle
{
color: #fff;
border-color: #11cdef;
background-color:
#11cdef;
}
.btn-info {
box-shadow: 0 4px 6px rgba(50,50,93,.11),0
1px 3px rgba(0,0,0,.08);
}
.btn-info:hover {
color: #fff;
border-color: #10bede;
background-color:
#10bede;
}
.btn-info.focus,.btn-info:focus {
box-shadow: 0 4px 6px
rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0
rgba(17,205,239,.5);
}
.btn-info:not(:disabled):not(.disabled).active:focus,.btn-info:not(:disabled):not(.disabled):active:focus,.show>.btn-info.dropdown-toggle:focus
{
box-shadow:
none;
}
.btn-warning,
.btn-warning.disabled,.btn-warning:disabled,
.btn-warning:not(:disabled):not(.disabled).active,.btn-warning:not(:disabled):not(.disabled):active,.show>.btn-warning.dropdown-toggle
{
color: #fff;
border-color: #fb6340;
background-color:
#fb6340;
}
.btn-warning {
box-shadow: 0 4px 6px rgba(50,50,93,.11),0
1px 3px rgba(0,0,0,.08);
}
.btn-warning:hover {
color: #fff;
border-color: #f0603f;
background-color:
#f0603f;
}
.btn-warning.focus,.btn-warning:focus {
box-shadow: 0 4px
6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0
rgba(251,99,64,.5);
}
.btn-warning:not(:disabled):not(.disabled).active:focus,.btn-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-warning.dropdown-toggle:focus
{
box-shadow:
none;
}
.btn-danger,
.btn-danger.disabled,.btn-danger:disabled,
.btn-danger:not(:disabled):not(.disabled).active,.btn-danger:not(:disabled):not(.disabled):active,.show>.btn-danger.dropdown-toggle
{
color: #fff;
border-color: #f5365c;
background-color:
#f5365c;
}
.btn-danger {
box-shadow: 0 4px 6px rgba(50,50,93,.11),0
1px 3px rgba(0,0,0,.08);
}
.btn-danger:hover {
color: #fff;
border-color: #eb3357;
background-color:
#eb3357;
}
.btn-danger.focus,.btn-danger:focus {
box-shadow: 0 4px
6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0
rgba(245,54,92,.5);
}
.btn-danger:not(:disabled):not(.disabled).active:focus,.btn-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-danger.dropdown-toggle:focus
{
box-shadow:
none;
}
.btn-light,
.btn-light.disabled,.btn-light:disabled,
.btn-light:not(:disabled):not(.disabled).active,.btn-light:not(:disabled):not(.disabled):active,.show>.btn-light.dropdown-toggle
{
color: #fff;
border-color: #adb5bd;
background-color:
#adb5bd;
}
.btn-light {
box-shadow: 0 4px 6px rgba(50,50,93,.11),0
1px 3px rgba(0,0,0,.08);
}
.btn-light:hover {
color: #fff;
border-color: #a5adb4;
background-color:
#a5adb4
}
.btn-light.focus,.btn-light:focus {
box-shadow: 0 4px 6px
rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0
rgba(173,181,189,.5);
}
.btn-light:not(:disabled):not(.disabled).active:focus,.btn-light:not(:disabled):not(.disabled):active:focus,.show>.btn-light.dropdown-toggle:focus
{
box-shadow:
none;
}
.btn-dark,
.btn-dark.disabled,.btn-dark:disabled,
.btn-dark:not(:disabled):not(.disabled).active,.btn-dark:not(:disabled):not(.disabled):active,.show>.btn-dark.dropdown-toggle
{
color: #fff;
border-color: #212529;
background-color:
#212529;
}
.btn-dark {
box-shadow: 0 4px 6px rgba(50,50,93,.11),0
1px 3px rgba(0,0,0,.08);
}
.btn-dark:hover {
color: #fff;
border-color: #212529;
background-color:
#212529
}
.btn-dark.focus,.btn-dark:focus {
box-shadow: 0 4px 6px
rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0
rgba(33,37,41,.5);
}
.btn-dark:not(:disabled):not(.disabled).active:focus,.btn-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-dark.dropdown-toggle:focus
{
box-shadow: none;
}
.btn-link {
font-weight: 400;
color: #5e72e4;
background-color: transparent
}
.btn-link:hover {
text-decoration: none;
color: #233dd2;
border-color:
transparent;
background-color:
transparent
}
.btn-link.focus,.btn-link:focus {
text-decoration:
none;
border-color: transparent;
box-shadow:
none
}
.btn-link.disabled,.btn-link:disabled {
pointer-events:
none;
color: #8898aa
}
.btn-outline-primary {
color:
#5e72e4;
border-color: #5e72e4;
background-color: transparent;
background-image: none
}
.btn-outline-primary:hover {
color:
#fff;
border-color: #5e72e4;
background-color:
#5e72e4
}
.btn-outline-primary.focus,.btn-outline-primary:focus {
box-shadow: 0 0 0 0
rgba(94,114,228,.5);
}
.btn-outline-primary.disabled,.btn-outline-primary:disabled
{
color: #5e72e4;
background-color:
transparent
}
.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle
{
color: #fff;
border-color: #5e72e4;
background-color:
#5e72e4
}
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-primary.dropdown-toggle:focus
{
box-shadow: 0 0 0 0 rgba(94,114,228,.5)
}
.btn-outline-secondary
{
color: #f7fafc;
border-color: #f7fafc;
background-color:
transparent;
background-image: none
}
.btn-outline-secondary:hover
{
color: #212529;
border-color: #f7fafc;
background-color:
#f7fafc
}
.btn-outline-secondary.focus,.btn-outline-secondary:focus {
box-shadow: 0 0 0 0
rgba(247,250,252,.5)
}
.btn-outline-secondary.disabled,.btn-outline-secondary:disabled
{
color: #f7fafc;
background-color:
transparent
}
.btn-outline-secondary:not(:disabled):not(.disabled).active,.btn-outline-secondary:not(:disabled):not(.disabled):active,.show>.btn-outline-secondary.dropdown-toggle
{
color: #212529;
border-color: #f7fafc;
background-color:
#f7fafc
}
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-secondary.dropdown-toggle:focus
{
box-shadow: 0 0 0 0 rgba(247,250,252,.5)
}
.btn-outline-success
{
color: #2dce89;
border-color: #2dce89;
background-color:
transparent;
background-image: none
}
.btn-outline-success:hover {
color: #fff;
border-color: #2dce89;
background-color:
#2dce89
}
.btn-outline-success.focus,.btn-outline-success:focus {
box-shadow: 0 0 0 0
rgba(45,206,137,.5)
}
.btn-outline-success.disabled,.btn-outline-success:disabled
{
color: #2dce89;
background-color:
transparent
}
.btn-outline-success:not(:disabled):not(.disabled).active,.btn-outline-success:not(:disabled):not(.disabled):active,.show>.btn-outline-success.dropdown-toggle
{
color: #fff;
border-color: #2dce89;
background-color:
#2dce89
}
.btn-outline-success:not(:disabled):not(.disabled).active:focus,.btn-outline-success:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-success.dropdown-toggle:focus
{
box-shadow: 0 0 0 0 rgba(45,206,137,.5)
}
.btn-outline-info {
color: #11cdef;
border-color: #11cdef;
background-color:
transparent;
background-image: none
}
.btn-outline-info:hover {
color: #fff;
border-color: #11cdef;
background-color:
#11cdef
}
.btn-outline-info.focus,.btn-outline-info:focus {
box-shadow: 0 0 0 0
rgba(17,205,239,.5)
}
.btn-outline-info.disabled,.btn-outline-info:disabled
{
color: #11cdef;
background-color:
transparent
}
.btn-outline-info:not(:disabled):not(.disabled).active,.btn-outline-info:not(:disabled):not(.disabled):active,.show>.btn-outline-info.dropdown-toggle
{
color: #fff;
border-color: #11cdef;
background-color:
#11cdef
}
.btn-outline-info:not(:disabled):not(.disabled).active:focus,.btn-outline-info:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-info.dropdown-toggle:focus
{
box-shadow: 0 0 0 0 rgba(17,205,239,.5)
}
.btn-outline-warning
{
color: #fb6340;
border-color: #fb6340;
background-color:
transparent;
background-image: none
}
.btn-outline-warning:hover {
color: #fff;
border-color: #fb6340;
background-color:
#fb6340
}
.btn-outline-warning.focus,.btn-outline-warning:focus {
box-shadow: 0 0 0 0
rgba(251,99,64,.5)
}
.btn-outline-warning.disabled,.btn-outline-warning:disabled
{
color: #fb6340;
background-color:
transparent
}
.btn-outline-warning:not(:disabled):not(.disabled).active,.btn-outline-warning:not(:disabled):not(.disabled):active,.show>.btn-outline-warning.dropdown-toggle
{
color: #fff;
border-color: #fb6340;
background-color:
#fb6340
}
.btn-outline-warning:not(:disabled):not(.disabled).active:focus,.btn-outline-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-warning.dropdown-toggle:focus
{
box-shadow: 0 0 0 0 rgba(251,99,64,.5)
}
.btn-outline-danger {
color: #f5365c;
border-color: #f5365c;
background-color:
transparent;
background-image: none
}
.btn-outline-danger:hover {
color: #fff;
border-color: #f5365c;
background-color:
#f5365c
}
.btn-outline-danger.focus,.btn-outline-danger:focus {
box-shadow: 0 0 0 0
rgba(245,54,92,.5)
}
.btn-outline-danger.disabled,.btn-outline-danger:disabled
{
color: #f5365c;
background-color:
transparent
}
.btn-outline-danger:not(:disabled):not(.disabled).active,.btn-outline-danger:not(:disabled):not(.disabled):active,.show>.btn-outline-danger.dropdown-toggle
{
color: #fff;
border-color: #f5365c;
background-color:
#f5365c
}
.btn-outline-danger:not(:disabled):not(.disabled).active:focus,.btn-outline-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-danger.dropdown-toggle:focus
{
box-shadow: 0 0 0 0 rgba(245,54,92,.5)
}
.btn-outline-light {
color: #adb5bd;
border-color: #adb5bd;
background-color:
transparent;
background-image: none
}
.btn-outline-light:hover {
color: #fff;
border-color: #adb5bd;
background-color:
#adb5bd
}
.btn-outline-light.focus,.btn-outline-light:focus {
box-shadow: 0 0 0 0
rgba(173,181,189,.5)
}
.btn-outline-light.disabled,.btn-outline-light:disabled
{
color: #adb5bd;
background-color:
transparent
}
.btn-outline-light:not(:disabled):not(.disabled).active,.btn-outline-light:not(:disabled):not(.disabled):active,.show>.btn-outline-light.dropdown-toggle
{
color: #fff;
border-color: #adb5bd;
background-color:
#adb5bd
}
.btn-outline-light:not(:disabled):not(.disabled).active:focus,.btn-outline-light:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-light.dropdown-toggle:focus
{
box-shadow: 0 0 0 0 rgba(173,181,189,.5)
}
.btn-outline-dark {
color: #212529;
border-color: #212529;
background-color:
transparent;
background-image: none
}
.btn-outline-dark:hover {
color: #fff;
border-color: #212529;
background-color:
#212529
}
.btn-outline-dark.focus,.btn-outline-dark:focus {
box-shadow: 0 0 0 0
rgba(33,37,41,.5)
}
.btn-outline-dark.disabled,.btn-outline-dark:disabled
{
color: #212529;
background-color:
transparent
}
.btn-outline-dark:not(:disabled):not(.disabled).active,.btn-outline-dark:not(:disabled):not(.disabled):active,.show>.btn-outline-dark.dropdown-toggle
{
color: #fff;
border-color: #212529;
background-color:
#212529
}
.btn-outline-dark:not(:disabled):not(.disabled).active:focus,.btn-outline-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-dark.dropdown-toggle:focus
{
box-shadow: 0 0 0 0 rgba(33,37,41,.5)
}
/* -- Custom Buttons
*/
.btn-rounded {
border: 0!important;
border-radius:
50%;
}
.btn-delete:hover {
color: #fff;
border-color: #eb3357;
background-color: #eb3357;
}
.btn-delete:hover .fa:before {
content:
"\f1f8";
}
.btn-payment {
background:
#f7f7f7;
}
.btn-payment:hover {
background:
#f1f1f1;
}
.btn-voice-start,
.btn-voice-stop {
display:
inline-block;
padding: 4px 14px;
background: #007bff;
color:
#fff;
cursor: pointer;
border-radius: 18px;
}
.btn-voice-stop
{
background: red;
}
/* == */
/* == Inputs ==
*/
.form-control, .input-group-text {
border-color:
#ddd;
border-radius: 2px;
}
body.night-mode .form-control,
body.night-mode .input-group-text {
background-color:
#232323;
border-color: #363636;
color: #dfdfdf;
}
.form-control:focus
{
box-shadow: none;
}
.form-control-label {
font-weight: 600;
color: #525f7f;
margin-bottom: 0;
}
body.night-mode
.form-control-label {
color: #a3afce;
}
body.night-mode
.form-control-plaintext {
color: #eee;
}
.input-group .btn {
padding-top: 9px;
padding-bottom: 9px;
}
.custom-control-label
{
padding-top: 2px;
}
/* -- Custom Inputs */
.form-table-row
{
display: flex;
margin-bottom: 30px;
}
.form-table-row > div
{
flex: 1;
}
.form-table-row > div:last-child {
flex-basis:
auto;
flex-grow: 0;
margin-left: 10px;
}
.form-table-row >
div.avatar {
flex-basis: auto;
flex-grow: 0;
margin-right:
10px;
}
.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;
}
/* == */
/* == Card ==
*/
.card {
border: 1px solid #e6ecf5;
margin-bottom:
20px;
}
body.night-mode .card {
background: #212121;
border-color:
#212121;
}
.card-header {
background-color: #f6f9fc;
border-color:
#e6ecf5;
}
body.night-mode .card-header {
background:
#212121;
border-color: #363636;
}
/* -- Custom Cards
*/
.card-header.with-icon {
padding-top: 20px;
padding-bottom:
20px;
}
.card-header.with-nav {
padding-bottom: 0;
border-bottom: 0;
}
@media (min-width: 768px) {
.card-header.with-icon
{
font-size: 14px;
font-weight: 500;
}
}
.card-header.block-title
{
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
padding: 10px 35px;
background:
transparent;
}
.card-body.with-nav,
.card-body.with-list,
.card-body.with-form
{
padding: 10px;
}
.card-body .divider {
border-top: 1px solid
#e6ecf5;
margin: 25px 0;
}
.card-body .divider.dashed {
border-top-style: dashed;
}
body.night-mode .card-body .divider
{
border-color: #131313;
}
@media (min-width: 768px)
{
.card-body.page-content {
padding: 50px;
}
}
body.night-mode
.card-pricing,
body.night-mode .card-pricing .list-group-item
{
background: #292929;
}
/* == */
/* == Bg-gradient ==
*/
.bg-gradient-primary {
color: #fff!important;
background:
linear-gradient(87deg,#5e72e4 0,#825ee4
100%)!important;
}
.bg-gradient-secondary {
background:
linear-gradient(87deg,#f7fafc 0,#f7f8fc
100%)!important;
}
.bg-gradient-success {
color: #fff!important;
background: linear-gradient(87deg,#2dce89 0,#2dcecc
100%)!important;
}
.bg-gradient-info {
color: #fff!important;
background: linear-gradient(87deg,#11cdef 0,#1171ef
100%)!important;
}
.bg-gradient-warning {
color: #fff!important;
background: linear-gradient(87deg,#fb6340 0,#fbb140
100%)!important;
}
.bg-gradient-danger {
color: #fff!important;
background: linear-gradient(87deg,#f5365c 0,#f56036
100%)!important;
}
.bg-gradient-light {
background:
linear-gradient(87deg,#adb5bd 0,#adaebd
100%)!important;
}
.bg-gradient-dark {
color: #eee;
background: linear-gradient(87deg,#212529 0,#212229
100%)!important;
}
.bg-gradient-default {
color: #eee;
background: linear-gradient(87deg,#172b4d 0,#1a174d
100%)!important;
}
.bg-gradient-white {
background:
linear-gradient(87deg,#fff 0,#fff
100%)!important;
}
.bg-gradient-neutral {
background:
linear-gradient(87deg,#fff 0,#fff
100%)!important;
}
.bg-gradient-darker {
color: #eee;
background: linear-gradient(87deg,#000 0,#000
100%)!important;
}
.bg-gradient-blue {
color: #fff!important;
background: linear-gradient(87deg,#5e72e4 0,#825ee4
100%)!important;
}
.bg-gradient-indigo {
color: #fff!important;
background: linear-gradient(87deg,#5603ad 0,#9d03ad
100%)!important;
}
.bg-gradient-purple {
color: #fff!important;
background: linear-gradient(87deg,#8965e0 0,#bc65e0
100%)!important;
}
.bg-gradient-pink {
color: #fff!important;
background: linear-gradient(87deg,#f3a4b5 0,#f3b4a4
100%)!important;
}
.bg-gradient-red {
color: #fff!important;
background: linear-gradient(87deg,#f5365c 0,#f56036
100%)!important;
}
.bg-gradient-orange {
color: #fff!important;
background: linear-gradient(87deg,#fb6340 0,#fbb140
100%)!important;
}
.bg-gradient-yellow {
color: #666;
background: linear-gradient(87deg,#ffd600 0,#beff00
100%)!important;
}
.bg-gradient-green {
color: #fff!important;
background: linear-gradient(87deg,#2dce89 0,#2dcecc
100%)!important;
}
.bg-gradient-teal {
color: #fff!important;
background: linear-gradient(87deg,#11cdef 0,#1171ef
100%)!important;
}
.bg-gradient-cyan {
color: #fff!important;
background: linear-gradient(87deg,#2bffc6 0,#2be0ff
100%)!important;
}
.bg-gradient-white {
background:
linear-gradient(87deg,#fff 0,#fff 100%)!important;
}
.bg-gradient-gray
{
color: #fff!important;
background:
linear-gradient(87deg,#8898aa 0,#888aaa
100%)!important;
}
.bg-gradient-gray-dark {
color:
#fff!important;
background: linear-gradient(87deg,#32325d 0,#44325d
100%)!important;
}
.bg-gradient-light {
background:
linear-gradient(87deg,#ced4da 0,#cecfda
100%)!important;
}
.bg-gradient-lighter {
background:
linear-gradient(87deg,#e9ecef 0,#e9eaef 100%)!important;
}
/* ==
*/
/* == Callout == */
.bs-callout {
background: #fff;
padding: 20px;
margin: 20px 0;
border-left: 5px solid #eee;
border-radius: 3px;
}
body.night-mode .bs-callout {
background:
#212121;
}
.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;
}
/* ==
*/
/* == Bootstrap-select ==
*/
.bootstrap-select:not(.input-group-btn) {
height:
100%;
}
.bootstrap-select .dropdown-toggle .filter-option {
display:
inline-block!important;
position: static!important;
padding:
0!important;
}
.bootstrap-select .btn-outline-light {
color:
#495057;
border-color: #ddd;
}
.bootstrap-select .option .icon {
display: table-cell;
vertical-align: middle;
padding-right:
10px
}
.bootstrap-select .option .text {
display: table-cell;
vertical-align: top;
text-align: left
}
/* == */
/* == MCE
Editor == */
div.mce-fullscreen {
z-index: 99999;
}
/* == */
/*
== jQuery-UI [autocomplete] == */
.ui-autocomplete {
position:
absolute;
top: 0;
left: 0;
cursor: default;
z-index:
9999;
}
.ui-widget-content {
background: #fff;
color: #444;
z-index: 99999;
padding: 10px;
border-radius: 0 0 3px 3px;
box-shadow: 0 3px 4px rgba(0,0,0,.15);
}
body.night-mode
.ui-widget-content {
background: var(--header-bg-color-dark);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.ui-menu-item {
position:
relative;
margin: 0;
padding: 5px 0;
border-radius: 3px;
cursor: pointer;
}
.ui-menu-item:hover {
background:
#efefef;
}
body.night-mode .ui-menu-item:hover {
background:
#424242;
}
.ui-menu-item a {
color: #444;
}
body.night-mode
.ui-menu-item a {
color: #e5e5e5;
}
.ui-menu-item img {
width:
30px;
margin: 5px;
border-radius: 50%;
}
.ui-menu-item span {
font-size: 13px;
}
/* -- */
/* == Tagify == */
body.night-mode
.tagify {
border-color: #363636;
}
body.night-mode .tagify__dropdown
{
border-color: #363636;
background-color:
#424242;
}
body.night-mode .tagify__dropdown__item--active {
background-color: #212121;
}
/* == */
/* HEADER */
/*
------------------------------- */
/* main-wrapper */
.main-wrapper {
width: 100%;
min-width: 260px; /* to show scroll for small size
browsers ;) */
}
/* -- */
/* top-bar */
.top-bar {
position:
fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
font-size:
12px;
line-height: 50px;
background: #fff2cc;
color: #333;
z-index:
1001;
}
@media (min-width: 768px) {
.top-bar {
font-size:
13px;
}
.top-bar .col-sm-5 {
text-align:
right;
}
}
.top-bar.danger {
background: #ce3426;
color:
#fff;
}
.top-bar.danger a {
color: #fff200;
}
.top-bar.danger a:hover
{
text-decoration: underline;
}
/* -- */
/* main-header
*/
.main-header {
position: fixed;
top: 0;
left: 0;
right:
0;
height: 50px;
background: var(--header-bg-color);
z-index:
1001;
}
body.night-mode:not(.visitor) .main-header {
background:
var(--header-bg-color-dark);
box-shadow: 0 1px 4px rgba(0, 0, 0,
0.2);
}
/* ** fix bootstrap modal padding-right for hiding scroll
*/
body.modal-open .main-header,
body.modal-open .top-bar
{
padding-right: 17px !important;
}
@media (min-width: 768px) {
body.modal-open:not(.n_chat) .main-header,
body.modal-open:not(.n_chat)
.top-bar {
padding-right: 227px !important;
}
}
/* -- */
@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;
}
}
body.n_activated .main-header,
body.n_live .main-header {
top: 50px; /* for top bar */
}
/* --
*/
/* logo-wrapper */
.main-header .logo-wrapper {
padding-left:
15px;
padding-right: 20px;
height: 50px;
overflow: hidden;
word-break: break-all;
}
.main-header .logo {
display:
block;
font-size: 11px;
font-weight: 600;
line-height: 50px;
color:
#fff;
opacity: 1;
text-transform: uppercase;
}
.main-header
.logo:hover {
opacity: 0.8;
text-decoration: none;
}
.main-header
.logo img {
max-height: 50px;
}
.main-header .home-icon {
position: absolute;
top: 0;
right: 0;
display: block;
text-align: center;
color: #fff;
height: 50px;
padding: 18px
8px;
line-height: 100%;
}
.main-header .home-icon:hover {
opacity: 0.8;
}
/* -- */
/* search-wrapper */
.main-header
.search-wrapper {
position: relative;
}
.main-header .search-input-icon
{
position: absolute;
top: 8px;
left: 12px;
color:
#96aad4;
}
.main-header .search-wrapper .form-control {
height:
34px;
margin-top: 8px;
margin-bottom: 8px;
padding-left: 34px;
box-shadow: none;
background: #2850a7;
border: 0 none;
border-radius: 18px;
color: #fff;
}
body.night-mode:not(.visitor)
.main-header .search-wrapper .form-control {
background:
var(--body-bg-color-dark);
}
.main-header .search-wrapper
.form-control::-webkit-input-placeholder {
color:
#96aad4;
}
.main-header .search-wrapper .form-control:-moz-placeholder
{
color: #96aad4;
opacity: 1;
}
.main-header .search-wrapper
.form-control:-ms-input-placeholder {
color: #96aad4;
}
/* -- */
/*
navbar-wrapper */
@media (min-width: 768px) {
.navbar-wrapper
{
float: right;
}
}
.navbar-wrapper > ul > li {
float:
left;
display: block;
width: 14.28571428571429%;
}
@media (min-width:
768px) {
.navbar-wrapper > ul > li {
width: auto!important;
margin-right: 2px;
}
.navbar-wrapper > ul > li:last-child
{
margin-right: 0;
}
}
body.visitor .navbar-wrapper > ul > li
{
width: auto;
}
.navbar-wrapper > ul > li > a {
position: relative;
display: block;
text-align: center;
color:
#fff;
height: 50px;
padding: 18px 8px;
line-height:
100%;
}
.navbar-wrapper > ul > li > a:hover
{
background-color: rgba(255, 255, 255, 0.1);
}
body.night-mode
.navbar-wrapper > ul > li > a:hover {
background-color: rgba(0,
0, 0, 0.1);
}
.navbar-wrapper > ul > li.dropdown.show > a
{
background-color: rgba(255, 255, 255, 0.1);
}
body.night-mode
.navbar-wrapper > ul > li.dropdown.show > a {
background-color:
#494c62;
}
@media (min-width: 992px) {
.navbar-wrapper > ul > li
> a {
padding: 18px 10px;
}
}
.navbar-wrapper .counter
{
position: absolute;
top: 5px;
right: 0;
padding: 2px
4px;
color: #fff;
font-size: 10px;
font-weight: 600;
border-radius:
3px;
}
.navbar-wrapper .counter.red {
background:
#ff5e3a;
}
.navbar-wrapper .counter.blue {
background:
#38a9ff;
}
.navbar-wrapper .counter.purple {
background:
#7c5ac2;
}
/* -- user-menu */
.navbar-wrapper .user-menu > img
{
display: inline-block;
margin-top: -5px;
height: 20px;
width:
20px;
border-radius: 50%;
}
@media (min-width: 768px)
{
.navbar-wrapper .user-menu > img {
height: 25px;
width:
25px;
}
}
@media (min-width: 1400px) {
.navbar-wrapper .user-menu
> span {
display: inline-block!important;
max-width: 70px;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* --
dropdown-menu */
.navbar-wrapper .dropdown-menu:not(.dropdown-widget)
{
margin-top: 0;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.navbar-wrapper > ul > li.dropdown
{
position: static;
}
@media (min-width: 768px) {
.navbar-wrapper > ul > li.dropdown {
position: relative;
}
}
/* -- dropdown-widget */
.dropdown-widget {
width:
100%;
padding-bottom: 0;
padding-top: 0;
border:
0;
}
.dropdown-widget-header {
padding: 10px;
font-size:
11px;
border-bottom: 1px solid #e4e4e4;
}
body.night-mode
.dropdown-widget-header {
border-color:
#424242;
}
.dropdown-widget-header .title {
text-transform:
uppercase;
color: #9a9fbf;
font-size: 9px;
font-weight:
700;
}
.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: #9a9fbf;
padding:
8px;
display: block;
font-size: 11px;
font-weight:
600;
line-height: 16px;
}
body.night-mode .dropdown-widget-body .title
{
border-color: #424242;
}
.dropdown-widget-footer {
background:
#f6f9fc;
display: block;
padding: 10px 0;
border-top: 1px solid
#e5e5e5;
border-bottom: 0 none;
text-align: center;
font-size:
11px;
border-radius: 0 0 4px 4px;
}
body.night-mode
.dropdown-widget-footer {
background: #1b1b1b;
border-color:
#424242;
}
.dropdown-widget-footer:hover {
text-decoration:
underline;
}
@media (min-width: 768px) {
.dropdown-widget
{
min-width: 380px!important;
}
.dropdown-widget.with-arrow:before
{
position: absolute;
display: inline-block;
content:
'';
top: -7px;
right: 10px;
border-right: 7px solid
transparent;
border-left: 7px solid transparent;
border-bottom:
7px solid #fff;
}
body.night-mode .dropdown-widget.with-arrow:before
{
border-bottom-color:
var(--header-bg-color-dark);
}
.dropdown-widget.dropdown-search
{
border-radius: 2px 2px 0 0;
}
}
/* -- */
/* COMMON */
/*
------------------------------- */
/* section-title */
.section-title
{
background: #f5f5f5;
padding: 10px;
font-size: 13px;
font-weight: 600;
text-align: center;
border-radius:
2px;
}
body.night-mode .section-title {
color: #5e72e4;
background-color: #111111;
}
/* -- */
/* heading */
.heading-small
{
font-size: 12px;
padding: 4px 0;
letter-spacing: .04em;
text-transform: uppercase
}
/* -- */
/* hr-heading */
.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: '';
}
body.night-mode .hr-heading-text:before,
body.night-mode .hr-heading-text:after {
background:
#323232;
}
.hr-heading-text:before {
right: 100%;
margin-right:
15px;
}
.hr-heading-text:after {
left: 100%;
margin-left:
15px;
}
/* -- */
/* user-box */
.user-box {
display: block;
margin: 5px;
text-align: center;
text-decoration:
none;
}
.circled-user-box {
margin: 5px;
}
.circled-user-box
.user-box {
position: relative;
padding-top: 100%;
margin:
0;
margin-bottom: 20px;
}
.pro-box-wrapper .user-box {
width:
71px;
float: left;
opacity:
.55;
}
.pro-box-wrapper.full-opacity .user-box {
opacity:
1;
}
.pro-box-wrapper .user-box.slick-center {
opacity: 1;
transform: scale(1.1);
font-weight: 600;
}
.user-box img {
width: 100%;
height: 100%;
margin: 0 auto;
border-radius:
50%;
}
.circled-user-box .user-box img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
object-fit:
cover;
}
.pro-box-wrapper .user-box img {
width: 60px;
height:
60px;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.user-box .name {
margin-top: 5px;
font-size: 11px;
word-break: break-word;
white-space: nowrap;
overflow: hidden;
text-overflow:
ellipsis;
}
.circled-user-box .user-box .name {
position:
absolute;
left: 0;
right: 0;
}
/* -- */
/* ui-box
*/
.ui-box {
position: relative;
background: #f6f9fc;
padding: 50px 15px 15px;
margin-top: 50px;
margin-bottom: 20px;
text-align: center;
border-radius: 4px;
}
body.night-mode .ui-box
{
background: #292929;
}
.ui-box .img {
position: absolute;
top: -50px;
left: 50%;
transform: translate(-50%);
background: #fff;
padding: 4px;
margin: 0 auto;
border-radius: 50%;
}
body.night-mode .ui-box .img {
background:
#212121;
}
.ui-box img {
height: 92px;
width: 92px;
border-radius: 50%;
}
.ui-box .btn {
box-shadow: none;
}
/* --
*/
/* stat-panel */
.stat-panel {
border-radius: 4px;
margin-bottom: 20px;
overflow: hidden;
}
.stat-panel.border {
border: 1px solid #e6ecf5;
}
body.night-mode .stat-panel.border {
border-color: #363636!important;
}
.stat-cell {
position:
relative;
padding: 20px;
}
.stat-cell .icon {
position:
absolute;
top: 20px;
right: 20px;
background: #fff;
font-size: 20px;
width: 48px;
height: 48px;
padding: 14px;
border-radius: 50%;
}
.stat-cell .bg-icon {
position: absolute;
bottom: 0;
right: 0;
font-size: 100px;
opacity:
0.25;
}
.stat-cell a {
font-size: 12px;
color:
#fff;
}
.stat-cell a:hover {
text-decoration: underline;
}
/* --
*/
/* main-side-nav */
.main-side-nav-card {
background:
transparent!important;
border: 0;
}
.main-side-nav {
z-index:
2;
}
.main-side-nav img {
width: 24px;
height: 24px;
margin-right: 10px;
}
.main-side-nav a, .main-side-nav .static {
display: block;
font-weight: 500;
padding: 8px 16px;
color:
#5a5a5a;
}
.night-mode .main-side-nav a, .night-mode .main-side-nav
.static {
color: #bfbfbf;
}
.main-side-nav
a[data-toggle=collapse]:after {
font-family: 'Font Awesome 5 Free';
font-weight: 700;
font-style: normal;
font-variant: normal;
display: inline-block;
float: right;
content: '\f107';
transition: all .15s ease;
color: #5e72e4;
text-rendering:
auto;
-webkit-font-smoothing: antialiased;
}
.main-side-nav
a[data-toggle=collapse][aria-expanded=true]:after {
/*transform:
rotate(180deg);*/
content: '\f106';
/*color:
#5e72e4;*/
}
.main-side-nav a:hover {
color:
#5e72e4;
}
.main-side-nav a.no-border {
border-bottom:
0;
}
.main-side-nav > li.active > a {
background-color:
#e5eaef;
color: #5e72e4;
border-radius: 5px;
}
body.night-mode
.main-side-nav > li.active > a {
background-color:
#2b2b2b;
}
.main-side-nav ul > li.active > a {
color:
#5e72e4;
}
.main-side-nav ul a {
margin-left: 32px;
padding:
10px 20px;
font-size: 11px;
color: #5a5a5a;
border-left: 1px
solid #e4e4e4;
}
body.night-mode .main-side-nav ul a {
color:
#bfbfbf;
border-left-color: #363636;
}
/* side-nav */
.side-nav
a, .side-nav .static {
display: block;
font-weight: 500;
padding: 15px 25px;
color: #919191;
}
.side-nav a:hover {
color:
#5e72e4;
}
.side-nav a[data-toggle=collapse]:after {
font-family:
'Font Awesome 5 Free';
font-weight: 700;
font-style: normal;
font-variant: normal;
display: inline-block;
float: right;
content: '\f105';
transition: all .15s ease;
color: #ced4da;
text-rendering: auto;
-webkit-font-smoothing:
antialiased;
}
.side-nav
a[data-toggle=collapse][aria-expanded=true]:after {
transform:
rotate(90deg);
color: #5e72e4;
}
.side-nav > li.active > a
{
background-color: #f6f9fc;
color: #5e72e4;
border-radius:
5px;
}
body.night-mode .side-nav > li.active > a
{
background-color: #111111;
}
.side-nav ul > li.active > a
{
color: #5e72e4;
}
.side-nav ul a {
margin-left: 32px;
padding:
10px 20px;
font-size: 11px;
color: #888da8;
border-left: 1px
solid #eee;
}
body.night-mode .side-nav ul a {
border-left-color:
#363636;
}
/* -- */
/* content-tabs */
.content-tabs {
background: #fff;
margin-bottom: 20px;
padding: 0
5px;
}
body.night-mode .content-tabs {
background: #212121;
}
@media
(min-width: 768px) {
.content-tabs {
padding: 0
10px;
}
}
.content-tabs > ul > li {
float:
left;
}
.content-tabs > ul > li > a {
display: block;
padding: 12px 14px;
font-size: 12px;
line-height: 20px;
color: #666;
transition: all .2s ease;
}
body.night-mode
.content-tabs > ul > li > a {
color: #eee;
}
@media
(min-width: 768px) {
.content-tabs > ul > li > a {
padding:
14px 24px;
font-size: 13px;
}
}
.content-tabs > ul > li.active
> a {
color: var(--link-color);
font-weight: 600;
border-bottom: 2px solid var(--link-color);
}
/* -- */
/* 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;
}
/* --*/
/* feeds-item */
.feeds-item {
border-bottom: 1px
solid #e6ecf5;
}
body.night-mode .feeds-item {
border-color:
#323232;
}
.feeds-item:last-child {
border-bottom: 0
none;
}
.feeds-item.unread {
background: #e9eaed;
}
body.night-mode
.feeds-item.unread {
background: #2b2b2b;
}
/* -- */
/*
data-container */
.data-container {
display: block;
width:
100%;
padding: 8px;
min-height: 56px; /* 40px avatar + 16px padding
*/
}
.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;
}
body.night-mode a.data-container:hover,
body.night-mode
.data-container.clickable:hover {
background:
#424242;
}
.data-avatar {
display: block;
position: relative;
/* relative for .data-reaction to be absolute */
float:
left;
}
.data-avatar img {
width: 30px;
height: 30px;
text-align: center;
border-radius: 50%;
}
@media (min-width: 768px)
{
.data-avatar img {
width: 40px;
height: 40px;
border-radius: 50%;
}
.data-container.small .data-avatar img
{
width: 30px; /* override the previous */
height:
30px;
}
}
.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: 20px 0 0 20px;
}
.data-avatar .right-avatar
{
width: 15px;
margin-right: 0;
border-radius: 0 20px 20px
0;
}
@media (min-width: 768px) {
.data-avatar .left-avatar,
.data-avatar .right-avatar {
width: 19px;
height: 40px;
border-radius: 20px 0 0 20px;
}
.data-avatar .right-avatar
{
width: 20px;
border-radius: 0 20px 20px 0;
}
.data-container.small .data-avatar .left-avatar,
.data-container.small .data-avatar .right-avatar {
width: 14px;
height: 30px;
}
.data-container.small .data-avatar
.right-avatar {
width: 15px;
}
}
.data-reaction {
position: absolute;
bottom: -4px;
right:
-6px;
}
.data-content {
padding-left: 38px;
color:
#818181;
font-size: 11px;
}
@media (min-width: 768px) {
.data-content {
padding-left: 48px;
word-wrap:
break-word;
}
.data-container.small .data-content {
padding-left: 38px; /* override the previous */
}
}
.data-content
.data-img {
background-color: #fff;
border: 1px solid #ddd;
padding:
1px;
width: 48px;
height: 48px;
object-fit:
cover;
}
.data-content .btn {
padding: 2px 6px;
font-size:
10px;
}
@media (min-width: 576px) {
.data-content .btn {
padding:
4px 12px;
font-size: 12px;
}
}
.data-content .name
{
font-weight: bold;
}
.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 > li {
float: left;
margin-left:
4px;
padding: 4px 2px;
border-radius: 50%;
}
.x-form-tools >
li:first-child {
margin-left: 0;
}
.x-form-tools > li:hover
{
background: #f3f3f3;
cursor: pointer;
}
body.night-mode
.x-form-tools > li:hover {
background:
#333;
}
.x-form-tools-post,
.x-form-tools-attach,
.x-form-tools-voice,
.x-form-tools-emoji {
position: relative; /* for
input & menus */
overflow: hidden;
display: inline-block;
cursor:
pointer;
}
@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;
transition: padding
.5s;
}
@media (min-width: 768px) {
.attachments li {
width:
96px;
height: 96px;
}
}
.attachments li.item {
position:
relative; /* for :before & button */
border: 1px solid
#eee;
cursor: pointer;
}
body.night-mode .attachments li.item {
border-color: #424242;
}
.attachments li.item img {
width:
64px;
height: 64px;
}
@media (min-width: 768px) {
.attachments
li.item img {
width: 94px;
height: 94px;
}
}
.attachments li.item .name {
background: #fafafa;
height: 100%;
width: 100%;
padding: 10px;
color: #999;
font-size:
10px;
word-break: break-all;
}
.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;
}
@media (min-width: 768px) {
.attachments li.item.deletable:before {
width: 94px;
height: 94px;
}
}
.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;
}
@media (min-width:
768px) {
.attachments li.loading {
padding-top: 45px; /*
96px-5px(loader) / 2 */
}
}
body.night-mode .attachments li.loading
{
background: #212121;
border-color: #424242;
}
.attachments
li.add {
position: relative;
overflow: hidden;
padding: 20px
0 0 25px;
color: #ddd;
font-size: 16px;
cursor: pointer;
border-radius: 4px;
border: 2px dashed #cecece;
}
@media
(min-width: 768px) {
.attachments li.add {
padding: 30px 0 0
35px;
font-size: 24px;
}
}
/* -- */
/* 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;
}
body.night-mode .x-image
{
background-color: #333;
}
.x-image.full {
width:
100%;
}
.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-success
{
display: none;
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
background: #000;
width: 100%;
height: 100%;
padding-top: 30%;
text-align: center;
color: #fff;
font-size: 12px;
transition: all .5s;
}
.x-image-loader {
display:
none;
position: absolute;
top: 0;
left: 0;
opacity:
0.5;
background: #000;
width: 100%;
height: 100%;
padding-top: 50%;
transition: all .5s;
}
.x-image.full
.x-image-loader {
padding-top: 20%;
}
.x-image .x-uploader
{
position: absolute;
bottom: 5px;
right: 5px;
}
.x-image button
{
position: absolute;
top: 0;
right: 5px;
}
/* -- */
/*
x-progress (uploading progress) */
.x-progress {
height: 5px;
margin: 0 1.5rem;
border-radius: 25px;
}
/* -- */
/* tbl-image
*/
.tbl-image {
width: 24px;
height: 24px;
float: left;
margin-right: 5px;
border-radius: 50%;
}
.tbl-image.app-icon {
width: 34px;
height: 34px;
border-radius: 4px;
}
/* --
*/
/* 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-word;
}
.adblock-warning-message {
display: none;
padding:
20px;
background: #D30000;
text-align: center;
color: #fff;
border-radius: 2px;
}
.adblock-detector {
position: fixed;
top:
46px;
left: 0;
right: 0;
display: none;
margin-bottom:
30px;
padding: 20px 10px;
background: #D30000;
text-align:
center;
font-weight: bold;
color: #fff;
}
/* -- */
/*
user-popover */
@media (min-width: 768px) {
.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 #e6ecf5;
top: 0;
}
body.night-mode
.user-popover-wrapper:before {
border-bottom-color:
#000000;
}
.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;
}
body.night-mode .user-popover-wrapper:after
{
border-bottom-color: #212121;
}
.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 #e6ecf5;
border-radius:
3px;
background-color: #fff;
box-shadow: 0 6px 12px
rgba(0,0,0,.175);
z-index: 999999;
}
body.night-mode
.user-popover-content {
background: #212121;
border-color:
#000000;
}
.user-card {
position:
relative;
}
.user-card-cover {
width: 100%;
height:
120px;
background-color: #424242;
background-size:
cover;
background-position: center center;
border-bottom: 1px solid
#e6ecf5;
}
body.night-mode .user-card-cover {
border-color:
#000000;
}
.user-card-avatar {
position: absolute;
left:
15px;
bottom: -15px;
padding: 3px;
border-radius:
50%;
background: #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0,
.3);
}
body.night-mode .user-card-avatar {
background:
#212121;
}
.user-card-avatar img {
width: 60px;
height:
60px;
border-radius: 50%;
}
.user-card-info {
position:
absolute;
left: 96px;
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: 96px;
padding-top:
10px;
font-size: 12px;
}
.user-card-meta .fa {
color:
#b2b2b2;
}
.user-popover-content .footer {
text-align:
right;
padding: 6px 7px;
margin-bottom: 0;
margin-top:
0;
background: #f6f9fc;
border-top: 1px solid
#e5e5e5;
border-radius: 0 0 3px 3px;
}
body.night-mode
.user-popover-content .footer {
background: #1b1b1b;
border-color:
#424242;
}
.user-popover-content .footer .btn {
padding: 6px
12px;
}
/* -- */
}
/* -- */
/* trending */
.trending-item {
word-break: break-word;
display: block;
padding: 5px 0;
font-size: 13px;
}
.trending-item .hash {
display: block;
color: #ffffff;
font-weight: bold;
font-size:
14px;
}
.trending-item .frequency {
font-size: 12px;
color:
#ffeb00;
}
.trending-item:hover .hash {
text-decoration:
underline;
}
/* -- */
/* PUBLISHER */
/*
------------------------------- */
.publisher-overlay {
background:
#000;
position: fixed;
top: 0;
left: 0;
right: 0;
opacity: 0;
transition: opacity .5s;
z-index:
1002;
}
body.publisher-focus .publisher-overlay {
bottom: 0;
opacity: .6;
transition: opacity .5s;
}
.publisher {
margin-bottom: 20px;
background: #fff;
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
body.night-mode .publisher
{
background: #212121;
}
body.publisher-focus .publisher {
z-index: 1003;
}
.publisher.mini {
margin-bottom: 0;
border-radius: 0;
}
.publisher-loader {
display: none;
position: absolute;
top: 5px;
right: 10px;
z-index:
1;
}
.publisher-close {
position: absolute;
top: 5px;
right: 10px;
z-index: 1;
}
.publisher-message {
position:
relative;
padding: 15px 15px 20px
65px;
}
.publisher-message.colored,
.post-colored,
.post-colored-preview
{
height: 300px;
padding: 30px;
background-repeat:
no-repeat!important;
background-size:
cover!important;
}
.publisher-message.colored {
border-radius: 2px
2px 0 0;
}
.post-colored-preview {
border-radius:
2px;
}
.post-colored-preview.small {
height:
180px;
}
.post-colored-preview h2 {
text-align: center;
padding-top: 100px;
}
.post-colored-preview h4 {
text-align:
center;
padding-top: 50px;
}
.publisher-message.colored
.colored-text-wrapper,
.post-colored-text-wrapper {
height: 240px;
display: flex;
text-align: center;
}
.publisher-message.colored
.colored-text-wrapper {
overflow-x: auto;
}
/* publisher-avatar
*/
.publisher-avatar {
position: absolute;
left: 15px;
top:
15px;
width: 40px;
height: 40px;
padding: 2px;
border:
1px solid #efefef;
border-radius: 50%;
}
body.night-mode
.publisher-avatar {
border-color:
#424242;
}
.publisher-message.colored .publisher-avatar {
display:
none;
}
/* -- */
/* publisher textarea */
.publisher textarea {
background: transparent;
direction: ltr;
resize: none;
outline: none;
width: 100%;
margin-top: 5px;
padding: 0;
font-size: 14px;
line-height: 20px;
height: 20px;
border: 0
none;
}
body.night-mode .publisher textarea {
color:
#eee;
}
.publisher textarea::placeholder {
color: inherit;
opacity: 0.65;
}
.publisher textarea:-ms-input-placeholder {
color:
inherit;
opacity: 0.65;
}
.publisher textarea::-ms-input-placeholder
{
color: inherit;
opacity: 0.65;
}
.publisher-message.colored
textarea,
.post-colored .post-text {
text-align: center;
font-size: 25px;
line-height: 30px;
font-weight: 600;
margin: auto;
}
.publisher-message.colored textarea {
min-height:
60px;
}
.post-colored .post-text a {
color: inherit!important;
text-decoration: underline!important;
}
.post-colored .post-text a:hover
{
text-decoration: none!important;
}
/* -- */
/* publisher-emojis
*/
.publisher-emojis {
display: none;
position: absolute;
bottom: 5px;
right: 10px;
}
.publisher-emojis .far {
cursor:
pointer;
color: #999;
}
/* -- */
/* publisher-slider
*/
.publisher-slider {
display: none;
}
/* -- */
/*
publisher-scraper */
.publisher-scraper {
display: none;
position: relative;
padding: 10px;
}
.publisher-scraper-remover {
position: absolute;
top: 15px;
right: 20px;
width: 26px;
height: 26px;
padding-right: 6px;
background: #fbfbfb;
border: 1px solid #eaeaea;
border-radius: 50%;
z-index:
1;
}
.publisher-scraper-remover:hover {
background:
#fff;
}
.publisher-scraper-remover button.close {
opacity:
0.5
}
/* -- */
/* publisher-attachments */
.publisher-attachments {
padding: 10px 10px 5px;
}
/* -- */
/* publisher-meta
*/
.publisher-meta {
position: relative; /* for fa icon */
border-top: 1px dashed #eee;
font-weight: 600;
margin: 0 15px;
padding: 8px 0;
display: none;
}
body.night-mode .publisher-meta
{
border-color: #424242;
}
.publisher-meta.top {
border-top:
0;
border-bottom: 1px dashed #eee;
}
.publisher-meta .svg-container
{
position: absolute;
top: 15px;
left:
15px;
}
.publisher-meta .svg-container.static {
position:
static;
}
.publisher-meta input,
.publisher-meta select {
background: #f3f3f3;
width: 100%;
color: #5e72e4;
font-weight: 600;
font-size: 14px;
line-height: 20px;
padding: 8px 16px 8px 40px;
outline: 0 none;
border: 0 none;
border-radius: 18px;
}
.publisher-meta input.no-icon {
padding: 8px
16px;
}
body.night-mode .publisher-meta input,
body.night-mode
.publisher-meta select {
color: #b6c1ff;
background:
#121212;
}
.publisher-meta select {
color:
#9c9c9c;
}
.publisher-meta select:focus {
color:
#4e5665;
}
.publisher-meta input::-webkit-input-placeholder {
color:
#9c9c9c;
}
.publisher-meta input:-moz-placeholder {
color:
#9c9c9c;
opacity: 1;
}
.publisher-meta input:-ms-input-placeholder
{
color: #9c9c9c;
}
/* -- */
/* publisher-custom-thumbnail
*/
.publisher-custom-thumbnail {
display: none;
position:
relative;
margin: 10px 15px;
padding: 8px 0;
border-top: 1px
dashed #eee;
overflow: hidden;
}
body.night-mode
.publisher-custom-thumbnail {
border-color:
#424242;
}
.publisher-custom-thumbnail .x-image {
width: 100%;
height: 160px;
margin-top: 5px;
}
.publisher-custom-thumbnail
.x-image-loader {
padding-top: 80px;
}
/* -- */
/* feelings
*/
#feelings-menu-toggle {
white-space: nowrap;
padding: 5px;
cursor: pointer;
padding: 8px 18px;
background: #f3f3f3;
color: #6f6f6f;
font-weight: 600;
border-radius:
18px;
}
body.night-mode #feelings-menu-toggle {
background:
#121212;
}
#feelings-menu-toggle.active {
display: table-cell;
background: #e2e8f6;
}
body.night-mode #feelings-menu-toggle.active {
background: #121212;
}
#feelings-data {
display: table-cell;
width: 100%;
padding-left: 5px;
}
#feelings-data span {
white-space: nowrap;
padding: 10px 14px;
background: #5e72e4;
color: #ffffff;
font-weight: 600;
border-radius: 18px;
cursor: pointer;
}
#feelings-data span .twa {
vertical-align:
middle;
}
.feeling-item {
padding: 5px;
cursor: pointer;
color: #666;
}
body.night-mode .feeling-item {
color:
#cacaca;
}
.feeling-item:hover {
background:
var(--header-bg-color);
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;
}
/* -- */
/* colored-pattern-item
*/
.colored-pattern-item {
display: inline-block;
height:
36px;
width: 36px;
padding: 0;
border: 2px solid #fff;
border-radius: 50%;
background-size: cover;
cursor:
pointer;
}
body.night-mode .colored-pattern-item {
border-color:
#212121;
}
.colored-pattern-item.active {
box-shadow: 0px 0px 0px
2px rgba(51, 103, 214, 0.65);
}
/* -- */
/* gif-search
*/
.dropdown-menu.gif-search {
display: none;
left: 0;
padding: 5px;
margin-top: 0;
border: 1px solid #efefef;
border-radius: 2px;
box-shadow: none;
}
body.night-mode
.dropdown-menu.gif-search {
border-color: #424242;
}
.gif-search
.item {
width: 33%;
float: left;
margin-right: 1px;
margin-bottom: 1px;
}
.gif-search .item > img {
width: 100%;
height: fit-content;
cursor: pointer;
}
/* -- */
/*
publisher-tools-tabs */
.publisher-tools-tabs {
margin: 0 15px;
padding-top: 15px;
border-top: 1px solid #e6ecf5;
border-bottom:
1px solid #e6ecf5;
}
body.night-mode .publisher-tools-tabs {
border-color: #424242;
}
.publisher-tools-tab {
display: block;
background: #f7f7f7;
padding: 7px 14px;
color: #7f838a;
font-size: 13px;
font-weight: 700;
border-radius: 25px;
margin-bottom: 15px;
}
body.night-mode .publisher-tools-tab {
background: #424242;
color: #d5d5d5;
}
.publisher-tools-tab:hover
{
background: #f3f3f3;
color: #7f838a;
cursor:
pointer;
}
body.night-mode .publisher-tools-tab:hover {
background:
#525252;
color:
#d5d5d5;
}
.publisher-tools-tab.active,
body.night-mode
.publisher-tools-tab.active {
color:
#5e72e4;
}
.publisher-tools-tab.activated {
background:
#d2e0ff;
}
body.night-mode .publisher-tools-tab.activated {
background:
#111111;
}
.publisher-tools-tab[data-tab='video'].activated:after,
.publisher-tools-tab[data-tab='audio'].activated:after,
.publisher-tools-tab[data-tab='file'].activated:after {
content:
"";
background: transparent;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
cursor:
initial;
}
.publisher-tools-tab.disabled {
position:
relative;
}
.publisher-tools-tab.disabled:hover {
background:
#f7f7f7;
color: #7f838a;
cursor: initial;
}
body.night-mode
.publisher-tools-tab.disabled:hover {
background: #424242;
color:
#d5d5d5;
}
.publisher-tools-tab.disabled:after {
content:
"";
background: #fff;
position: absolute;
top:
0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.6;
border-radius: 25px;
}
body.night-mode
.publisher-tools-tab.disabled:after {
background:
#000;
}
.publisher-tools-tab.attach {
position: relative; /* for
input file */
overflow: hidden;
}
.publisher-tools-tab.attach form
{
display: initial;
}
.publisher-tools-tab img {
width: 24px;
height: 24px;
margin-right: 5px;
}
/* -- */
/*
publisher-footer */
.publisher-footer {
text-align: right;
padding: 15px;
}
.publisher-anonymous-lable {
padding: 8px 10px;
background: #f7f7f7;
border-radius: 4px;
font-weight: 500;
cursor: pointer;
}
body.night-mode .publisher-anonymous-lable {
background: #121212;
}
/* -- */
/* posts-filter */
.posts-filter {
margin-bottom: 20px;
padding-bottom: 5px;
border-bottom: 1px
solid #dfdfdf;
line-height: 34px;
font-weight:
600;
}
body.night-mode .posts-filter {
border-bottom-color:
#212121;
}
.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;
padding-left: 0!important;
padding-right:
0!important;
}
body.night-mode .posts-filter .btn-group .btn,
body.night-mode .posts-filter .btn-group .open .btn.dropdown-toggle,
body.night-mode .posts-filter .btn-group .btn-default.active,
body.night-mode .posts-filter .btn-group .btn-default:active,
body.night-mode .posts-filter .btn-group .open
.btn-default.dropdown-toggle {
color:
var(--body-color-dark);
}
.posts-filter .dropdown-menu {
min-width:
100%;
}
.posts-filter .dropdown-menu .dropdown-item {
padding: 2px
16px;
}
/* -- */
/* POST */
/* -------------------------------
*/
.post {
position: relative;
margin-bottom: 20px;
background:
#fff;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0,
0.2);
}
body.night-mode .post {
background: #212121;
border-color: #000000;
}
.post.flagged {
padding: 15px;
background:
#f6f7f8;
}
.post .pin-icon {
position: absolute;
right: 18px;
top: -10px;
width: auto;
font-size: 25px;
color:
#f9b340;
}
.post.boosted,
body.night-mode .post.boosted {
border:
2px solid #ffa412;
}
.post .boosted-icon {
position: absolute;
left: -5px;
top: -15px;
width: auto;
padding: 3px 6px;
font-size: 16px;
background: #ffa412;
color: #ffffff;
border-radius: 50%;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform:
rotate(-20deg); /* Standard syntax */
}
.post.pending,
body.night-mode
.post.pending {
border: 1px dashed #9b9b9b;
}
.post .pending-icon
{
position: absolute;
right: 18px;
top: -18px;
width:
auto;
font-size: 25px;
color: #f9b340;
}
.post.highlighted
{
border: 1px solid #4083a9;
box-shadow: inset 0 0 0 1px
#4083a9;
}
.post.is_hidden,
body.night-mode .post.is_hidden {
border: 2px dashed #aeaeae;
filter: grayscale(1);
z-index:
1;
}
.post a:not(.dropdown-item):hover {
text-decoration:
underline;
}
.post-memory-header {
padding: 10px 20px;
border-bottom: 1px solid #f4f4f4;
font-size: 14px;
font-weight:
600;
text-transform: capitalize;
}
body.night-mode
.post-memory-header {
border-color: #424242;
}
.post-body
{
}
.post-top-alert {
padding: 10px 0;
background:
repeating-linear-gradient(
45deg,
#606dbc,
#606dbc
10px,
#465298 10px,
#465298 20px
);
border-radius:
8px 8px 0 0;
color: #fff;
font-weight: 500;
text-align:
center;
}
.post-header {
padding: 16px 16px 0;
margin-bottom:
10px;
}
.post-avatar {
position: relative;
display:
table-cell;
vertical-align: top;
padding-right:
10px;
}
.post-avatar-anonymous {
background: #17a2b8;
padding:
5px;
border-radius: 50%;
overflow:
hidden;
}
.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-avatar .online-dot {
font-size: 9px;
margin-right:
3px;
position: absolute;
top: 25px;
right: 2px;
border:
2px solid #fff;
border-radius: 50%;
color:
#65a830;
}
.night-mode .post-avatar .online-dot {
border-color:
#212121;
}
/* -- */
.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;
}
body.night-mode
.post-meta .dropdown .dropdown-toggle:hover {
background:
#333;
}
.post-meta .dropdown-toggle:after {
display:
none!important;
}
.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-group {
}
.post-time
.btn-group,
.post-time .btn-group .btn {
background:
transparent!important;
box-shadow: none!important;
border: 0
none!important;
padding: 2px 4px!important;
color:
#999!important;
}
.post-time .btn-group .btn:hover {
background:
#f3f3f3!important;
}
.post-text {
padding: 0 16px;
text-align:
initial;
word-break: initial;
word-wrap: break-word;
overflow:
hidden;
margin-bottom: 5px;
transition: height .2s;
}
.post-replace
> a[data-readmore-toggle] {
margin-left:
16px;
}
.post-text-translation {
border-left: 2px solid #e9eaee;
padding-left: 10px;
margin-top: 10px;
}
.post-text .twa
{
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;
}
.post-stats {
margin-top: 15px;
padding: 0 16px;
font-size: 11px;
color:
#999;
}
.post-actions {
margin-top: 10px;
padding: 6px 16px 6px
16px;
border-top: 1px solid #f4f4f4;
}
body.night-mode .post-actions
{
border-color: #424242;
}
.post-actions .action-btn {
float:
left;
width: 33.3%;
padding: 10px;
color: #555;
font-size: 13px;
font-weight: 700;
line-height: 14px;
text-align: center;
border-radius: 2px;
transition: all .1s
ease-in-out;
}
body.night-mode .post-actions .action-btn {
color:
#bfbfbf;
}
.post-actions .action-btn:hover {
background:
#f7f7f7;
cursor: pointer;
}
body.night-mode .post-actions
.action-btn:hover {
background: #333;
}
.post-actions .action-btn
svg {
fill: #555;
}
body.night-mode .post-actions .action-btn svg
{
fill: #bfbfbf;
}
.post-footer {
background:
#f9f9f9;
border-top: 1px solid #eee;
border-radius: 0 0 4px
4px;
padding: 0 15px;
}
.night-mode .post-footer {
background:
#212121;
border-top-color: #363636;
}
.post-approval {
background: #f9f9f9;
border-top: 1px solid #eee;
padding: 15px;
text-align: right;
}
.night-mode .post-approval {
background:
#212121;
border-top-color: #363636;
}
.post-social-share {
padding-bottom: 15px;
margin-bottom: 20px;
text-align: center;
border-bottom: 1px solid #f4f4f4;
}
body.night-mode .post-social-share
{
border-color: #424242;
}
.post-comments {
padding-top:
10px;
}
/* comments-filter */
.comments-filter {
margin-bottom:
10px;
padding-bottom: 10px;
border-bottom: 1px solid
#e6ecf5;
}
body.night-mode .comments-filter {
border-bottom-color:
#363636;
}
.comments-filter .btn-group .btn,
.comments-filter
.btn-group .open .btn.dropdown-toggle,
.comments-filter .btn-group
.btn-default.active,
.comments-filter .btn-group .btn-default:active,
.comments-filter .btn-group .open .btn-default.dropdown-toggle {
background: transparent!important;
box-shadow: none!important;
border: 0 none!important;
padding-left: 0!important;
padding-right: 0!important;
color:
var(--link-color)!important;
}
.comments-filter .dropdown-menu {
min-width: 100%;
}
.comments-filter .dropdown-menu .dropdown-item {
padding: 4px 16px;
}
/* -- */
/* post images */
.pg_wrapper a
{
display: block;
position: relative;
width: 100%;
height:
100%;
background-size: cover;
background-position: center
center;
background-color: #f5f5f5;
}
body.night-mode .pg_wrapper a {
background-color: #414141;
}
.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 */
.post-media {
background: #f3f3f3;
}
body.night-mode .post-media {
background:
#2f2f2f;
}
.post-media.list {
background: #fff;
box-shadow:
none;
margin-bottom: 15px;
border: 0;
}
body.night-mode
.post-media.list {
background: #212121;
}
.post-media img.img-fluid
{
width: 100%;
max-height: 350px;
}
.post-media-image-wrapper
{
position: relative;
}
.post-media-image-meta {
position:
absolute;
bottom: 15px;
left: 15px;
}
.post-media-image {
display: block;
overflow: hidden;
position:
relative;
}
.post-media-image .image {
background-size:
cover;
background-repeat: no-repeat;
background-position: center
center;
background-color: #eee;
width: 100%;
height:
100%;
padding-top: 50%;
overflow: hidden;
min-width:
100px;
min-height: 100px;
}
body.night-mode .post-media-image .image
{
background-color: transparent;
}
.post-media-image .source {
position: absolute;
bottom: 10px;
left: 10px;
padding:
6px;
background: rgba(0, 0, 0, 0.65);
color: #fff;
font-size: 11px;
border-radius: 3px;
text-transform:
uppercase;
}
.post-media-embed-responsive iframe {
width:
100%!important;
}
.embed-ifram-wrapper * {
width:
100%!important;
}
.embed-ifram-wrapper iframe {
min-height: 441px;
max-height: 441px;
}
.post-media-meta {
padding: 15px;
width:
100%;
transition: all .2s;
}
.post-media-meta .title {
display:
block;
font-size: 16px;
font-weight: 600;
line-height: 22px;
word-break: break-word;
}
.post-media-meta .title:hover
{
text-decoration: none;
}
.post-media-meta .text {
max-height:
90px;
overflow: hidden;
}
.post-media-meta .info {
color:
#999;
font-size: 11px;
}
/* -- */
/* post-downloader
*/
.post-downloader {
border-top: 1px solid #eee;
border-bottom:
1px solid #eee;
padding: 10px 16px;
margin-top:
10px;
}
body.night-mode .post-downloader {
border-color:
#323232;
}
.post-downloader .icon {
display: table-cell;
vertical-align: middle;
background-color: #f9f9f9;
padding: 10px
20px;
border-radius: 2px;
}
.night-mode .post-downloader .icon {
background-color: #131313;
}
.post-downloader .info {
display:
table-cell;
vertical-align: top;
padding-left: 10px;
width:
100%;
}
/* -- */
/* post product */
.post-product-container {
padding: 0 16px;
}
.post-product-wrapper {
padding: 10px 5px;
border:
1px solid #e5e5e5;
font-size: 14px;
border-radius:
2px;
}
body.night-mode .post-product-wrapper {
border-color:
#424242;
}
.post-product-details {
display: inline-block;
width:
32%;
border-right: 1px solid #e5e5e5;
text-align: center;
vertical-align: middle;
}
body.night-mode .post-product-details
{
border-color: #424242;
}
.post-product-details:last-child
{
border-right: 0;
}
.post-product-details .title {
font-weight:
600;
margin-bottom: 3px;
}
.post-product-details .description
{
color: #555;
}
/* -- */
/* post-dropdown-menu
*/
.post-dropdown-menu {
width: 240px;
}
.post-dropdown-menu .fa
{
margin-right: 10px;
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: 30px;
color: #999;
font-size: 11px;
line-height:
16px;
}
/* -- */
/* post-map*/
.post-map img {
}
body.night-mode
.post-map img {
}
/* -- */
/* polls */
.poll-options {
padding:
0 16px;
}
.poll-option {
display: table-cell;
vertical-align:
top;
position: relative;
width: 100%;
padding: 8px 12px;
background-color: #ebebeb;
font-weight: 600;
border-radius:
12px;
}
body.night-mode .poll-option {
background-color:
#323232;
}
.poll-option:hover {
cursor: pointer;
background:
#d4d4d4;
}
.poll-option .percentage-bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #89a8e8;
border-radius: 12px;
}
body.night-mode .poll-option .percentage-bg {
background-color: #121212;
}
.poll-option .custom-control-input:checked
+ .custom-control-label {
color: #fff;
}
.poll-voters {
display:
table-cell;
vertical-align: top;
padding-left: 5px;
}
.poll-voters
.more {
width: 35px;
height: 35px;
background-color:
#ebebeb;
padding: 8px 0;
border-radius: 50%;
font-size:
13px;
font-weight: 600;
text-align: center;
cursor:
pointer;
}
body.night-mode .poll-voters .more {
background-color:
#323232;
}
/* -- */
/* 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;
-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('../images/youtube.png') no-repeat;
cursor: pointer;
}
/* --
*/
/* COMMENT */
/* ------------------------------- */
.comment
{
padding-bottom: 10px;
}
.comment-avatar {
float:
left;
}
.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:
36px;
min-height: 36px;
display: block;
border-radius:
50%;
}
.comment-data, .comment-edit {
margin-left:
46px;
}
.comment-data .img-fluid {
max-width: 30%;
max-height:
100px;
margin: 5px 0;
}
.comment-inner-wrapper {
display:
flex;
margin-bottom: 5px;
}
.comment-inner {
position:
relative; /* :before */
padding: 8px 12px;
background-color:
#fff;
border-radius: 18px;
box-shadow: 0 0 1px rgba(0, 0, 0,
0.1);
}
body.night-mode .comment-inner {
background-color:
#121212;
}
.comment-inner:before {
content: '';
display:
block;
position: absolute;
left: -6px;
top: 9px;
width:
0;
height: 0;
border: 8px solid transparent;
border-left-width: 0;
border-right-color: #ffffff;
cursor:
default;
z-index: 1;
filter: drop-shadow(-1px 1px 0px rgba(0, 0,
0, 0.02));
}
body.night-mode .comment-inner:before {
border-right-color: #121212;
}
.comment-author {
font-weight:
500;
}
.comment-text {
text-align: initial;
word-break:
break-word;
word-wrap: break-word;
overflow: hidden;
margin-bottom:
5px;
}
.comment-text .twa {
font-size: 1.4em;
}
.comment-actions
> li {
float: left;
margin-right: 8px;
}
.comment-replies
{
padding-top: 10px;
}
.comment-replies > ul {
width:
100%;
}
/* comment-form */
.comment-form textarea {
background:
#fff;
direction: ltr;
display: block;
border: 0;
resize:
none;
outline: none;
width: 100%;
padding: 8px 16px;
padding-right:
128px;
margin: 0;
font-size: 13px;
line-height: 18px;
height:
36px;
border: 1px solid #ededed;
border-radius:
18px
}
body.night-mode .comment-form textarea {
color: #eee;
background: #121212;
border-color: #424242;
}
@media (min-width:
992px) {
.comment-form textarea {
padding-right:
100px;
}
}
.comment-form .x-form-tools {
bottom: 4px;
right:
14px;
}
/* -- */
.comment-voice-notes,
.comment-attachments
{
background: #fff;
padding: 10px 14px 4px 14px;
margin-top:
5px;
border: 1px solid #eee;
border-radius:
18px;
}
.comment-voice-notes {
display: none;
padding:
10px;
}
body.night-mode .comment-voice-notes,
body.night-mode
.comment-attachments {
background: transparent;
border-color:
#424242;
}
.comment .comment-btn {
display: none;
}
.comment:hover
.comment-btn {
display: block;
}
.comment-btn button.close {
font-size: 1.4em;
}
.comment .dropdown-toggle {
color:
#d3d3d3;
}
.comment .dropdown-toggle:hover {
color: #b3b3b3;
cursor:
pointer;
}
/* BLOG */
/* ------------------------------- */
/*
blog-container */
.blog-container {
background: #ffffff;
border-radius: 4px;
overflow: hidden;
margin-bottom: 20px;
display: block;
color: inherit;
text-decoration: none;
position: relative;
}
.night-mode .blog-container {
background:
#212121;
}
@media (min-width: 768px) {
.blog-container {
height: 400px;
}
.blog-container.primary {
background:
var(--header-bg-color);
}
}
.blog-image {
min-height:
150px;
}
@media (min-width: 576px) {
.blog-image {
overflow: hidden;
height: 150px;
}
}
.blog-image img
{
height: 100%;
width: 100%;
object-fit: cover;
}
@media
(min-width: 768px) {
.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-content
{
padding: 10px;
}
@media (min-width: 768px) {
.blog-container.primary .blog-content {
display: inline-block;
vertical-align: top;
width: 49%;
color: #ffffff;
}
}
.blog-content h3 {
margin: 0;
font-weight: 900;
font-size: 20px;
text-transform: uppercase;
}
@media (min-width:
576px) {
.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;
}
}
@media (min-width: 768px) {
.blog-container.primary
.blog-content h3 {
font-size: 26px;
line-height: 30px;
max-height: 180px;
-webkit-line-clamp: 6;
}
}
.blog-content .text {
margin: 12px 0;
font-size: 13px;
}
@media
(min-width: 576px) {
.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;
}
}
@media (min-width: 768px) {
.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;
}
}
@media (min-width: 768px)
{
.blog-container.primary .text-link {
color: #eee;
}
}
.blog-content .post-avatar {
padding-right: 5px;
padding-top:
3px;
}
.blog-more {
width: 0%;
height: 100%;
color: #aaa;
background-color: var(--header-bg-color);
position: absolute;
top: 0;
opacity: 0.0;
text-align: center;
-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;
}
/* -- */
/* article
*/
.article-wrapper {
background: #fff;
padding: 25px;
border-radius: 3px 3px 0 0;
}
.night-mode .article-wrapper {
background: #212121;
}
.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 {
max-width:
100%!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: var(--header-bg-color);
color: #fff;
}
/*
-- */
/* articles-widget */
.articles-widget-header {
margin-bottom:
20px;
border-bottom: 1px solid #e1e1e1;
}
.night-mode
.articles-widget-header {
border-color:
#212121;
}
.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 */
.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:
var(--header-bg-color);
color: #fff;
}
/* -- */
/* FORUM
*/
/* ------------------------------- */
/* forum-breadcrumb
*/
.forum-breadcrumb {
padding: 16px 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: var(--header-bg-color);
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;
}
body.night-mode .forum-head > .column {
background:
#000;
border-right-color: #151515;
border-left-color:
#121212;
}
.forum-head.threads > .column {
background-color:
#576c7c;
border-right: 1px solid #374855;
border-left: 1px solid
#6d8292;
}
body.night-mode .forum-head.threads > .column {
background: #121212;
}
.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:
#ffffff;
border-bottom: 1px solid #e6e6e6;
color: #808080;
font-size:
12px;
word-wrap: break-word;
}
body.night-mode .forum-row > .column
{
background: #212121;
border-color: #323232;
}
.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;
}
body.night-mode .forum-meta-head {
background: #000;
}
.forum-meta-conent {
padding: 15px 20px 15px
20px;
background-color: #fff;
color: #808080;
font-size:
12px;
}
body.night-mode .forum-meta-conent {
background-color:
#212121;
}
/* -- */
/* 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);
}
body.night-mode .forum-thread {
background:
#212121;
border-color: #323232;
}
.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;
}
body.night-mode .forum-thread .time {
border-color:
#323232;
}
.forum-thread .text {
word-wrap:
break-word;
}
.forum-thread .text img,
.forum-thread .text iframe {
max-width: 100%;
}
.forum-thread ul {
margin: initial;
padding-inline-start: 40px;
list-style: initial;
}
/* -- */
/*
forum-result */
.forum-result {
margin-top: 20px;
}
.forum-result
.head {
padding: 10px 20px;
background-color: #576c7c;
color:
#fff;
font-weight: 300;
font-size: 12px;
}
body.night-mode
.forum-result .head {
background-color: #000;
}
.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;
}
body.night-mode .forum-result .content {
background-color:
#212121;
}
.forum-result .title {
font-size: 14px;
}
.forum-result
.snippet {
background: #fff;
border: solid 1px #e6e6e6;
padding: 8px 10px;
word-wrap: break-word;
}
body.night-mode
.forum-result .snippet {
background: #121212;
border-color:
#323232;
}
/* -- */
/* AUTO-COMPLETE */
/*
------------------------------- */
.dropdown-menu.auto-complete
{
display: none;
left: 0;
margin-top: 0;
border-radius:
0;
box-shadow: none;
}
.typeahead {
position: relative; /* for
dropdown-menu */
float: left;
}
.typeahead input {
background:
transparent;
width: 100%;
color: #4e5665;
font-size:
13px;
line-height: 20px;
outline: 0 none;
border: 0
none;
}
body.night-mode .typeahead input {
color: #fff;
}
.tags li
{
float: left;
padding: 2px 4px;
margin: 0 3px 3px 0;
background:
#EEF2F5;
color: #245774;
font-size: 11px;
line-height:
16px;
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.75);
z-index: 99999;
overflow-y: scroll;
}
@media
(min-width: 768px) {
.lightbox {
overflow-y: none;
}
}
.lightbox-container {
display: table;
width:
100%;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.6);
padding-right:
0;
padding-left: 0;
}
@media (min-width: 768px) {
.lightbox-container {
margin-top: 46px;
width: inherit;
}
}
.lightbox-preview {
position: relative;
display:
block;
width: 100%;
vertical-align: middle;
background: #000;
text-align: center;
}
@media (min-width: 768px) {
.lightbox-preview
{
display: table-cell;
width: 65%;
max-width:
800px;
}
}
.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;
}
@media (min-width:
768px) {
.lightbox-data {
display: table-cell;
width: 35%;
}
}
body.night-mode .lightbox-data {
background:
#212121;
}
.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);
}
/* -- */
/* STORIES */
/*
------------------------------- */
.stories-wrapper {
overflow:
auto;
padding-bottom: 0;
margin-bottom:
5px;
}
.stories.carousel {
overflow:
unset!important;
}
.add-story {
position: relative;
display:
inline-block;
width: 12vw;
max-width: 60px;
height: 12vw;
max-height: 60px;
margin-bottom: 22px;
cursor:
pointer;
}
.add-story .img {
display: block;
width: 100%;
height: 100%;
background-size: cover;
background-position:
center;
border-radius: 50%;
}
.add-story .add {
position:
absolute;
right: 0;
bottom: 0;
padding: 1px 3px 0px 3px;
border-radius: 50%;
background: #fff;
font-size: 14px;
color: #2795e9;
}
body.night-mode .add-story .add {
background:
#212121;
}
.stories.sngine .story > a
{
text-decoration:none;
}
.stories.sngine .story > a > .img
{
border-radius:50%;
padding:2px;
background: #d6249f;
background:
radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949
45%,#d6249f 60%,#285AEB 90%);
}
.stories.sngine .story > a > .img
> * {
border-radius: 50%;
border:3px solid
#fff;
}
.stories.sngine .story.seen{
opacity:.5;
}
.stories.sngine
.story.seen > a > .img {
background:#999;
}
/* -- */
/*
CHAT */
/* ------------------------------- */
/* chat-sidebar
*/
.chat-sidebar {
background: #fefefe;
display: none;
position:
fixed;
right: 0;
top: 50px;
bottom: 0;
width: 210px;
box-shadow:
0 0 4px rgba(0,0,0,.1);
}
body.night-mode .chat-sidebar {
background: #212121;
box-shadow: -6px 0 20px rgba(0, 0, 0,
0.04);
}
@media (min-width: 1200px) {
.chat-sidebar {
display:
block;
}
}
/* chat-sidebar-header */
.chat-sidebar-header
{
position: absolute;
top: 0;
width: 100%;
padding:
10px;
line-height: 20px;
}
.chat-sidebar-header .fa {
color:
#c2c2c2;
}
.chat-sidebar-header .fa:hover {
color: #999;
cursor:
pointer;
}
/* -- */
/* chat-sidebar-content */
.chat-sidebar-content
{
position: absolute;
top: 40px;
bottom: 34px;
width:
100%;
border-top: 1px solid #ededed;
}
body.night-mode
.chat-sidebar-content {
border-color:
#363636;
}
.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
*/
.chat-sidebar-footer {
position: absolute;
bottom: 0;
width:
100%;
padding: 10px;
}
.chat-sidebar-footer .form-control
{
border: 0;
box-shadow: none;
background: #ebebeb;
border-radius: 4px;
}
body.night-mode .chat-sidebar-footer .form-control
{
background: #010101;
}
/* -- */
/* chat-widget */
.chat-widget
{
display: none;
position: fixed;
bottom: 0;
right: 10px;
width:
260px;
z-index: 1000;
box-shadow: 0 0 4px rgba(0,0,0,.1);
}
@media
(min-width: 992px) {
.chat-widget {
display: block;
}
}
/* --
*/
/* chat-head-title */
.chat-widget-head {
background:
var(--header-bg-color);
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: var(--body-bg-color);
padding:
0;
}
body.night-mode .chat-widget-content {
background:
#212121;
box-shadow: 0 1px 1px rgb(0, 0, 0);
}
/* -- */
/*
chat-to */
.chat-to {
position: absolute;
top: 0;
left: 0;
right:
0;
background: #fff;
border-bottom: 1px solid #e6ecf5;
color:
#cdcdcd;
padding: 5px 10px 5px 38px;
}
body.night-mode .chat-to
{
background: #212121;
border-color: #121212;
}
.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-typing
*/
.chat-typing {
display: none;
padding:
10px;
}
body.night-mode .chat-typing {
background: #212121;
border-color: #121212;
}
.loading-dots:after {
content: ' .';
animation: dots 1s steps(5, end) infinite;}
@keyframes dots {
0%, 20%
{
color: rgba(0,0,0,0);
text-shadow:
.25em 0 0
rgba(0,0,0,0),
.5em 0 0 rgba(0,0,0,0);}
40% {
color:
var(--body-color);
text-shadow:
.25em 0 0 rgba(0,0,0,0),
.5em 0 0 rgba(0,0,0,0);}
60% {
text-shadow:
.25em 0 0
var(--body-color),
.5em 0 0 rgba(0,0,0,0);}
80%, 100% {
text-shadow:
.25em 0 0 var(--body-color),
.5em 0 0
var(--body-color);}}
/* -- */
/* chat-voice-notes &
chat-attachments */
.chat-voice-notes {
display:
none;
}
.chat-voice-notes,
.chat-attachments {
background:
#fff;
padding: 10px;
border-top: 1px solid #dfe8f5;
}
body.night-mode
.chat-voice-notes,
body.night-mode .chat-attachments {
background:
#212121;
border-color: #121212;
}
/* -- */
/* chat-form
*/
.chat-form {
background: #fff;
}
body.night-mode .chat-form
{
background: #212121;
}
.chat-form-message {
background:
transparent;
padding: 7px;
overflow-y: auto;
overflow-x:
hidden;
max-height: 69px; /* 14px*4 (lines) + 14px (padding) + 1px
(top-border) */
border-top: 1px solid #dfe8f5;
}
body.night-mode
.chat-form-message {
border-color: #121212;
}
.chat-form-message
textarea,
.chat-form-message input[type="text"] {
background:
transparent;
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;
}
body.night-mode
.chat-form-message textarea,
body.night-mode .chat-form-message
input[type="text"] {
color: #fff;
}
.chat-form
.x-form-tools {
position: static;
padding: 0 7px 7px
7px;
}
.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:
38px;
}
.chat-form .emoji-menu:after{
right: auto;
left: 39px;
}
/*
-- */
/* 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: 42px;
content:
"";
border-color: #d4d5d6 transparent transparent
transparent;
border-style: solid;
border-width:
8px;
}
.chat-colors-menu:after {
position: absolute;
top:
100%;
left: 43px;
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: 6px 8px;
font-size:
13px;
border-radius: 12px;
border-bottom-left-radius: 0;
word-break:
initial;
word-wrap: break-word;
}
body.night-mode .conversation-body
.text {
background: #121212;
}
.conversation.right .conversation-body
.text {
background: #3367d6;
color: #fff;
border-radius:
12px;
border-bottom-right-radius: 0;
}
.conversation.right
.conversation-body .text a {
color: #fff;
}
.conversation-body .text a
{
text-decoration: underline;
}
.conversation-body .text a:hover
{
text-decoration: none;
}
.conversation-body .text .twa {
font-size: 2em;
}
/* -- */
/* 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;
}
/* -- */
/* time
*/
.conversation-body .time {
position: absolute;
top: 100%;
left:
0px;
width: 204px;
margin-top: 2px;
color: #605f5f;
font-size:
10px;
}
body.night-mode .conversation-body .time {
color:
#999;
}
.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;
}
/* -- */
/* seen */
.conversation-body .seen {
position: absolute;
top: 100%;
right: 0px;
width: 204px;
margin-top: 18px;
margin-bottom: 4px;
color:
var(--header-bg-color);
font-size: 10px;
text-align:
right;
}
.conversation-body .seen:before {
content:
"\f00c";
font-family: 'Font Awesome\ 5 Free';
font-style: normal;
font-weight: 900;
text-decoration: inherit;
margin-top: 4px;
padding-right: 4px;
font-size:
0.875em;
}
/* -- */
/* twilio-stream (video/audio chat)
*/
.twilio-stream-wrapper {
position: relative;
background:
#222;
}
.twilio-stream-local {
display: none;
width: 180px;
height: 240px;
position: absolute;
top: 20px;
right:
20px;
background: #000;
box-shadow: 0 2px 5px rgba(0, 0, 0,
0.3);
border: 1px solid #fff;
}
/* -- */
/* EMOJI */
/*
------------------------------- */
.emoji-menu {
display:
none;
position: absolute;
bottom: 30px;
right: 0;
min-width:
228px;
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;
}
body.night-mode .emoji-menu {
background-color: #212121;
border-color:
#424242;
}
.emoji-menu:before {
position: absolute;
top:
100%;
right: 3px;
content: "";
border-color: #d4d5d6
transparent transparent transparent;
border-style: solid;
border-width:
8px;
}
body.night-mode .emoji-menu:before {
border-color: #424242
transparent transparent transparent;
}
.emoji-menu:after {
position:
absolute;
top: 100%;
right: 4px;
content:
"";
border-color: #f6f7f9 transparent transparent
transparent;
border-style: solid;
border-width:
7px;
}
body.night-mode .emoji-menu:after {
border-color: #212121
transparent transparent transparent;
}
.publisher .emoji-menu {
bottom:
auto;
top: 25px;
right: -4px;
}
.publisher .emoji-menu:before
{
top: auto;
bottom: 100%;
border-color: transparent transparent
#d4d5d6 transparent;
}
body.night-mode .publisher .emoji-menu:before {
border-color: transparent transparent #424242 transparent;
}
.publisher
.emoji-menu:after {
top: auto;
bottom: 100%;
border-color:
transparent transparent #fff transparent;
}
body.night-mode .publisher
.emoji-menu:after {
border-color: transparent transparent #212121
transparent;
}
.lightbox .emoji-menu {
bottom: auto;
top:
27px;
right: -7px;
}
.lightbox .emoji-menu:before {
top:
auto;
bottom: 100%;
border-color: transparent transparent #d4d5d6
transparent;
}
body.night-mode .lightbox .emoji-menu:before {
border-color: transparent transparent #424242 transparent;
}
.lightbox
.emoji-menu:after {
top: auto;
bottom: 100%;
border-color:
transparent transparent #fff transparent;
}
body.night-mode .lightbox
.emoji-menu:after {
border-color: transparent transparent #212121
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;
}
body.night-mode .emoji-menu .item:hover {
background:
#111111;
}
.emoji-menu .item > img {
width: 65px;
height:
65px;
}
.emoji-menu .nav-tabs {
border-top: 1px #dddfe2
solid;
border-bottom: 0;
margin: 0 -2px 0px -6px;
padding: 0
10px;
}
body.night-mode .emoji-menu .nav-tabs {
border-color:
#424242;
}
.emoji-menu .nav-tabs > li > .nav-link {
color:
#555;
padding: 12px 16px;
margin: 0;
border: 0;
border-radius:
0;
border-top: 2px solid transparent;
}
.emoji-menu .nav-tabs > li
> .nav-link:hover {
background: transparent;
color:
var(--link-color);
border-color: transparent;
border-bottom:
0;
}
.emoji-menu .nav-tabs > li > .nav-link.active,
.emoji-menu
.nav-tabs > li > .nav-link.active:hover,
.emoji-menu .nav-tabs >
li > .nav-link.active:focus {
border: 0;
color:
var(--link-color);
background: transparent;
border-top: 2px solid
var(--link-color);
}
/* -- */
/* REACTIONS */
/*
------------------------------- */
/* reactions-stats
*/
.reactions-stats {
display: flex;
cursor: pointer;
line-height: 24px;
}
.reactions-stats > .reactions-stats-item {
background: #fff;
margin: 0 0 0 -6px;
padding: 3px;
border-radius: 50%;
}
body.night-mode .reactions-stats >
.reactions-stats-item {
background: #212121;
}
.reactions-stats >
.reactions-stats-item:nth-child(1) {
z-index: 3;
}
.reactions-stats
> .reactions-stats-item:nth-child(2) {
z-index:
2;
}
.reactions-stats > .reactions-stats-item:nth-child(3) {
z-index: 1;
}
/* -- */
.reactions-wrapper {
position:
relative;
}
/* reaction-btn */
.reaction-btn {
display: flex;
align-items: center;
justify-content: center
}
.reaction-btn
.reaction-btn-icon {
display: inline-block;
}
.reaction-btn
.reaction-btn-name {
text-transform: capitalize;
margin-left:
5px;
}
.reaction-btn .reaction-btn-name.blue {
color:
#1e8bd2;
}
.reaction-btn .reaction-btn-name.red {
color:
#f25268;
}
.reaction-btn .reaction-btn-name.yellow {
color:
#f3b715;
}
.reaction-btn .reaction-btn-name.orange {
color:
#f7806c;
}
/* -- */
.reactions-container {
display: none;
position: fixed;
width: 336px; /* (48px * 7) reatcions */
background: #fff;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
border-radius: 40px;
z-index: 4; /* reactions-stats-item z-index = 3
*/
}
body.night-mode .reactions-container {
background:
#424242;
}
@media (max-width: 480px) {
.reactions-container {
width: 144px;
border-radius: 20px;
}
}
.reactions_item
{
width: 48px;
height: 48px;
float: left;
transform:
scale(1);
transition: transform .25s ease;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: slideUp cubic-bezier(0.49, 0, 0.46, 1);
animation:
slideUp cubic-bezier(0.49, 0, 0.46, 1);
}
.reactions_item.duration-1 {
-webkit-animation-duration: 0.1s;
animation-duration:
0.1s;
}
.reactions_item.duration-2 {
-webkit-animation-duration:
0.2s;
animation-duration: 0.2s;
}
.reactions_item.duration-3 {
-webkit-animation-duration: 0.3s;
animation-duration:
0.3s;
}
.reactions_item.duration-4 {
-webkit-animation-duration:
0.4s;
animation-duration: 0.4s;
}
.reactions_item.duration-5 {
-webkit-animation-duration: 0.5s;
animation-duration:
0.5s;
}
.reactions_item.duration-6 {
-webkit-animation-duration:
0.6s;
animation-duration: 0.6s;
}
.reactions_item.duration-7 {
-webkit-animation-duration: 0.7s;
animation-duration:
0.7s;
}
.reactions_item:hover {
transform: scale(1.25) translate(0,
-3px);
}
.reactions_item:after {
content: attr(data-title);
position: absolute;
background-color: rgba(0, 0, 0, .75);
border-radius: 16px;
box-sizing: border-box;
color: #fff;
display: inline-block;
font-size: 10px;
font-weight: bold;
font-style: normal;
line-height: 16px;
opacity: 0;
overflow:
hidden;
padding: 0 8px;
text-decoration: none;
text-overflow: ellipsis;
transition: opacity 50ms ease;
-webkit-user-select: none;
text-transform: capitalize;
visibility: hidden;
top: 0;
left: 50%;
-webkit-transform:
translate(-50%, -100%);
transform: translate(-50%,
-100%);
}
.reactions_item:hover:after {
opacity: 1;
visibility:
visible;
}
@-webkit-keyframes slideUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity:
1;
transform: translateY(0px);
}
}
@keyframes slideUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
/* -- Reaction Emoji */
.inline-emoji {
width: 18px;
height: 18px;
}
.inline-emoji .emoji {
transform: scale(0.15);
top: -285%;
right: 285%;
}
.no_animation *,
.no_animation
*:after,
.no_animation *:before {
animation:
none!important;
}
.emoji {
width: 120px;
height: 120px;
background: #FFDA6A;
display: inline-block;
border-radius: 50%;
position: relative;
transform: scale(0.325);
top: -76%;
right: 76%;
}
/* DON'T CONVERT TO RTL */
.emoji__face,
.emoji__eyebrows, .emoji__eyes, .emoji__mouth, .emoji__tongue,
.emoji__heart, .emoji__hand, .emoji__thumb {
position:
absolute;
}
.emoji__face:before, .emoji__face:after,
.emoji__eyebrows:before, .emoji__eyebrows:after, .emoji__eyes:before,
.emoji__eyes:after, .emoji__mouth:before, .emoji__mouth:after,
.emoji__tongue:before, .emoji__tongue:after, .emoji__heart:before,
.emoji__heart:after, .emoji__hand:before, .emoji__hand:after,
.emoji__thumb:before, .emoji__thumb:after {
position: absolute;
content: '';
}
.emoji__face {
width: inherit;
height:
inherit;
}
.emoji--like {
background: #548DFF;
}
.emoji--like
.emoji__hand {
left: 25px;
bottom: 30px;
width: 20px;
height: 40px;
background: #FFFFFF;
border-radius: 5px;
z-index: 0;
-webkit-animation: hands-up 2s linear infinite;
animation: hands-up 2s linear infinite;
}
.emoji--like
.emoji__hand:before {
left: 25px;
bottom: 5px;
width:
40px;
background: inherit;
height: 10px;
border-radius: 2px
10px 10px 2px;
box-shadow: 1px -9px 0 1px #FFFFFF, 2px -19px 0 2px
#FFFFFF, 3px -29px 0 3px #FFFFFF;
}
.emoji--like .emoji__thumb {
border-bottom: 20px solid #FFFFFF;
border-left: 20px solid
transparent;
top: -25px;
right: -25px;
z-index: 2;
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-animation: thumbs-up 2s linear infinite;
animation: thumbs-up
2s linear infinite;
}
.emoji--like .emoji__thumb:before {
border-radius: 50% 50% 0 0;
background: #FFFFFF;
width: 10px;
height: 12px;
left: -10px;
top: -8px;
-webkit-transform:
rotate(-15deg);
transform: rotate(-15deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
box-shadow: -1px 4px 0 -1px #FFFFFF;
}
.emoji--love {
background:
#F55064;
}
.emoji--love .emoji__heart {
left: calc(50% - 40px);
top: calc(50% - 40px);
width: 80px;
height: 80px;
-webkit-animation: heart-beat 1s linear infinite alternate;
animation:
heart-beat 1s linear infinite alternate;
}
.emoji--love
.emoji__heart:before, .emoji--love .emoji__heart:after {
left:
calc(50% - 20px);
top: calc(50% - 32px);
width: 40px;
height: 64px;
background: #FFFFFF;
border-radius: 20px 20px 0
0;
}
.emoji--love .emoji__heart:before {
-webkit-transform:
translate(20px) rotate(-45deg);
transform: translate(20px)
rotate(-45deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.emoji--love .emoji__heart:after {
-webkit-transform: translate(-20px) rotate(45deg);
transform:
translate(-20px) rotate(45deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.emoji--haha .emoji__face {
-webkit-animation: haha-face 2s linear infinite;
animation: haha-face
2s linear infinite;
}
.emoji--haha .emoji__eyes {
width: 26px;
height: 6px;
border-radius: 2px;
left: calc(50% - 13px);
top: 35px;
-webkit-transform: rotate(20deg);
transform:
rotate(20deg);
background: transparent;
box-shadow: -25px 5px 0 0
#000000, 25px -5px 0 0 #000000;
}
.emoji--haha .emoji__eyes:after {
left: 0;
top: 0;
width: 26px;
height: 6px;
border-radius: 2px;
-webkit-transform: rotate(-40deg);
transform:
rotate(-40deg);
background: transparent;
box-shadow: -25px -5px 0
0 #000000, 25px 5px 0 0 #000000;
}
.emoji--haha .emoji__mouth {
width: 80px;
height: 40px;
left: calc(50% - 40px);
top:
50%;
background: #000000;
border-radius: 0 0 40px 40px;
overflow: hidden;
z-index: 1;
-webkit-animation: haha-mouth 2s
linear infinite;
animation: haha-mouth 2s linear
infinite;
}
.emoji--haha .emoji__tongue {
width: 70px;
height:
30px;
background: #F55064;
left: calc(50% - 35px);
bottom:
-10px;
border-radius: 50%;
}
.emoji--yay .emoji__face {
-webkit-animation: yay 1s linear infinite alternate;
animation: yay 1s
linear infinite alternate;
}
.emoji--yay .emoji__eyebrows {
left:
calc(50% - 3px);
top: 30px;
height: 6px;
width: 6px;
border-radius: 50%;
background: transparent;
box-shadow: -6px 0 0
0 #000000, -36px 0 0 0px #000000, 6px 0 0 0 #000000, 36px 0 0 0px
#000000;
}
.emoji--yay .emoji__eyebrows:before, .emoji--yay
.emoji__eyebrows:after {
width: 36px;
height: 18px;
border-radius: 60px 60px 0 0;
background: transparent;
border:
6px solid black;
box-sizing: border-box;
border-bottom: 0;
bottom: 3px;
left: calc(50% - 18px);
}
.emoji--yay
.emoji__eyebrows:before {
margin-left: -21px;
}
.emoji--yay
.emoji__eyebrows:after {
margin-left: 21px;
}
.emoji--yay
.emoji__mouth {
top: 60px;
background: transparent;
left:
50%;
}
.emoji--yay .emoji__mouth:after {
width: 80px;
height:
80px;
left: calc(50% - 40px);
top: -75px;
border-radius:
50%;
background: transparent;
border: 6px solid #000000;
box-sizing: border-box;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
z-index: 1;
}
.emoji--yay .emoji__mouth:before {
width: 6px;
height: 6px;
background: transparent;
border-radius: 50%;
bottom: 5px;
left: calc(50% - 3px);
box-shadow: -25px 0 0 0
#000000, 25px 0 0 0 #000000, -35px -2px 30px 10px #D5234C, 35px -2px 30px
10px #D5234C;
}
.emoji--wow .emoji__face {
-webkit-animation:
wow-face 3s linear infinite;
animation: wow-face 3s linear
infinite;
}
.emoji--wow .emoji__eyebrows {
left: calc(50% - 3px);
height: 6px;
width: 6px;
border-radius: 50%;
background:
transparent;
box-shadow: -18px 0 0 0 #000000, -33px 0 0 0 #000000,
18px 0 0 0 #000000, 33px 0 0 0 #000000;
-webkit-animation: wow-brow 3s
linear infinite;
animation: wow-brow 3s linear
infinite;
}
.emoji--wow .emoji__eyebrows:before, .emoji--wow
.emoji__eyebrows:after {
width: 24px;
height: 20px;
border:
6px solid #000000;
box-sizing: border-box;
border-radius: 50%;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
top: -3px;
left: calc(50% -
12px);
}
.emoji--wow .emoji__eyebrows:before {
margin-left:
-25px;
}
.emoji--wow .emoji__eyebrows:after {
margin-left:
25px;
}
.emoji--wow .emoji__eyes {
width: 16px;
height: 24px;
left: calc(50% - 8px);
top: 35px;
border-radius: 50%;
background: transparent;
box-shadow: 25px 0 0 0 #000000, -25px 0 0 0
#000000;
}
.emoji--wow .emoji__mouth {
width: 30px;
height:
45px;
left: calc(50% - 15px);
top: 50%;
border-radius:
50%;
background: #000000;
-webkit-animation: wow-mouth 3s linear
infinite;
animation: wow-mouth 3s linear infinite;
}
.emoji--sad
.emoji__face {
-webkit-animation: sad-face 2s ease-in infinite;
animation: sad-face 2s ease-in infinite;
}
.emoji--sad .emoji__eyebrows
{
left: calc(50% - 3px);
top: 35px;
height: 6px;
width:
6px;
border-radius: 50%;
background: transparent;
box-shadow: -40px 9px 0 0 #000000, -25px 0 0 0 #000000, 25px 0 0 0 #000000,
40px 9px 0 0 #000000;
}
.emoji--sad .emoji__eyebrows:before, .emoji--sad
.emoji__eyebrows:after {
width: 30px;
height: 20px;
border:
6px solid #000000;
box-sizing: border-box;
border-radius: 50%;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
top: 2px;
left: calc(50% -
15px);
}
.emoji--sad .emoji__eyebrows:before {
margin-left: -30px;
-webkit-transform: rotate(-30deg);
transform:
rotate(-30deg);
}
.emoji--sad .emoji__eyebrows:after {
margin-left:
30px;
-webkit-transform: rotate(30deg);
transform:
rotate(30deg);
}
.emoji--sad .emoji__eyes {
width: 14px;
height: 16px;
left: calc(50% - 7px);
top: 50px;
border-radius: 50%;
background: transparent;
box-shadow: 25px 0 0
0 #000000, -25px 0 0 0 #000000;
}
.emoji--sad .emoji__eyes:after {
background: #548DFF;
width: 12px;
height: 12px;
margin-left:
6px;
border-radius: 0 100% 40% 50% / 0 50% 40% 100%;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-animation: tear-drop 2s ease-in infinite;
animation: tear-drop
2s ease-in infinite;
}
.emoji--sad .emoji__mouth {
width: 60px;
height: 80px;
left: calc(50% - 30px);
top: 80px;
box-sizing:
border-box;
border: 6px solid #000000;
border-radius: 50%;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
background: transparent;
-webkit-animation: sad-mouth 2s ease-in infinite;
animation: sad-mouth
2s ease-in infinite;
}
.emoji--sad .emoji__mouth:after {
width:
6px;
height: 6px;
background: transparent;
border-radius:
50%;
top: 4px;
left: calc(50% - 3px);
box-shadow: -18px 0 0
0 #000000, 18px 0 0 0 #000000;
}
.emoji--angry {
background:
linear-gradient(#D5234C -10%, #FFDA6A);
background-size: 100%;
-webkit-animation: angry-color 2s ease-in infinite;
animation:
angry-color 2s ease-in infinite;
}
.emoji--angry .emoji__face {
-webkit-animation: angry-face 2s ease-in infinite;
animation:
angry-face 2s ease-in infinite;
}
.emoji--angry .emoji__eyebrows {
left: calc(50% - 3px);
top: 55px;
height: 6px;
width: 6px;
border-radius: 50%;
background: transparent;
box-shadow: -44px
5px 0 0 #000000, -7px 16px 0 0 #000000, 7px 16px 0 0 #000000, 44px 5px 0 0
#000000;
}
.emoji--angry .emoji__eyebrows:before, .emoji--angry
.emoji__eyebrows:after {
width: 50px;
height: 20px;
border:
6px solid #000000;
box-sizing: border-box;
border-radius: 50%;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
top: 0;
left: calc(50% -
25px);
}
.emoji--angry .emoji__eyebrows:before {
margin-left:
-25px;
-webkit-transform: rotate(15deg);
transform:
rotate(15deg);
}
.emoji--angry .emoji__eyebrows:after {
margin-left:
25px;
-webkit-transform: rotate(-15deg);
transform:
rotate(-15deg);
}
.emoji--angry .emoji__eyes {
width: 12px;
height: 12px;
left: calc(50% - 6px);
top: 70px;
border-radius: 50%;
background: transparent;
box-shadow: 25px 0 0
0 #000000, -25px 0 0 0 #000000;
}
.emoji--angry .emoji__mouth {
width: 36px;
height: 18px;
left: calc(50% - 18px);
bottom:
15px;
background: #000000;
border-radius: 50%;
-webkit-animation: angry-mouth 2s ease-in infinite;
animation:
angry-mouth 2s ease-in infinite;
}
@-webkit-keyframes heart-beat {
25% {
-webkit-transform: scale(1.1);
transform:
scale(1.1);
}
75% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
}
}
@keyframes heart-beat {
25% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
75% {
-webkit-transform: scale(0.6);
transform:
scale(0.6);
}
}
@-webkit-keyframes haha-face {
10%, 30%, 50%
{
-webkit-transform: translateY(25px);
transform:
translateY(25px);
}
20%, 40% {
-webkit-transform:
translateY(15px);
transform: translateY(15px);
}
60%,
80% {
-webkit-transform: translateY(0);
transform:
translateY(0);
}
70%, 90% {
-webkit-transform:
translateY(-10px);
transform: translateY(-10px);
}
}
@keyframes haha-face {
10%, 30%, 50% {
-webkit-transform: translateY(25px);
transform:
translateY(25px);
}
20%, 40% {
-webkit-transform:
translateY(15px);
transform: translateY(15px);
}
60%,
80% {
-webkit-transform: translateY(0);
transform:
translateY(0);
}
70%, 90% {
-webkit-transform:
translateY(-10px);
transform: translateY(-10px);
}
}
@-webkit-keyframes haha-mouth {
10%, 30%, 50% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
top: 45%;
}
20%, 40% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
top: 45%;
}
60%, 80% {
-webkit-transform: scale(1);
transform: scale(1);
top: 50%;
}
70% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
top: 50%;
}
90% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
top: 50%;
}
}
@keyframes haha-mouth {
10%, 30%, 50% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
top: 45%;
}
20%, 40% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
top: 45%;
}
60%, 80% {
-webkit-transform: scale(1);
transform: scale(1);
top: 50%;
}
70% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
top: 50%;
}
90% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
top: 50%;
}
}
@-webkit-keyframes yay {
25% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
75% {
-webkit-transform: rotate(15deg);
transform:
rotate(15deg);
}
}
@keyframes yay {
25% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
75% {
-webkit-transform: rotate(15deg);
transform:
rotate(15deg);
}
}
@-webkit-keyframes wow-face {
15%, 25% {
-webkit-transform: rotate(20deg) translateX(-25px);
transform: rotate(20deg) translateX(-25px);
}
45%, 65% {
-webkit-transform: rotate(-20deg) translateX(25px);
transform:
rotate(-20deg) translateX(25px);
}
75%, 100% {
-webkit-transform: rotate(0deg) translateX(0);
transform:
rotate(0deg) translateX(0);
}
}
@keyframes wow-face {
15%, 25%
{
-webkit-transform: rotate(20deg) translateX(-25px);
transform: rotate(20deg) translateX(-25px);
}
45%, 65% {
-webkit-transform: rotate(-20deg) translateX(25px);
transform:
rotate(-20deg) translateX(25px);
}
75%, 100% {
-webkit-transform: rotate(0deg) translateX(0);
transform:
rotate(0deg) translateX(0);
}
}
@-webkit-keyframes wow-brow {
15%, 65% {
top: 25px;
}
75%, 100%, 0% {
top:
15px;
}
}
@keyframes wow-brow {
15%, 65% {
top:
25px;
}
75%, 100%, 0% {
top: 15px;
}
}
@-webkit-keyframes wow-mouth {
10%, 30% {
width:
20px;
height: 20px;
left: calc(50% - 10px);
}
50%, 70% {
width: 30px;
height: 40px;
left:
calc(50% - 15px);
}
75%, 100% {
height: 50px;
}
}
@keyframes wow-mouth {
10%, 30% {
width: 20px;
height: 20px;
left: calc(50% - 10px);
}
50%, 70% {
width: 30px;
height: 40px;
left: calc(50% - 15px);
}
75%, 100% {
height: 50px;
}
}
@-webkit-keyframes
sad-face {
25%, 35% {
top: -15px;
}
55%, 95% {
top: 10px;
}
100%, 0% {
top: 0;
}
}
@keyframes sad-face {
25%, 35% {
top: -15px;
}
55%, 95% {
top: 10px;
}
100%, 0% {
top: 0;
}
}
@-webkit-keyframes sad-mouth {
25%, 35% {
-webkit-transform: scale(0.85);
transform: scale(0.85);
top: 70px;
}
55%, 100%, 0% {
-webkit-transform:
scale(1);
transform: scale(1);
top: 80px;
}
}
@keyframes sad-mouth {
25%, 35% {
-webkit-transform:
scale(0.85);
transform: scale(0.85);
top: 70px;
}
55%, 100%, 0% {
-webkit-transform: scale(1);
transform:
scale(1);
top: 80px;
}
}
@-webkit-keyframes tear-drop {
0%, 100% {
display: block;
left: 35px;
top:
15px;
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
}
25% {
display:
block;
left: 35px;
-webkit-transform: rotate(45deg)
scale(2);
transform: rotate(45deg) scale(2);
}
49.9% {
display: block;
left: 35px;
top: 65px;
-webkit-transform: rotate(45deg) scale(0);
transform:
rotate(45deg) scale(0);
}
50% {
display: block;
left: -35px;
top: 15px;
-webkit-transform: rotate(45deg)
scale(0);
transform: rotate(45deg) scale(0);
}
75% {
display: block;
left: -35px;
-webkit-transform:
rotate(45deg) scale(2);
transform: rotate(45deg) scale(2);
}
99.9% {
display: block;
left: -35px;
top:
65px;
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
}
}
@keyframes tear-drop {
0%, 100% {
display: block;
left: 35px;
top:
15px;
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
}
25% {
display:
block;
left: 35px;
-webkit-transform: rotate(45deg)
scale(2);
transform: rotate(45deg) scale(2);
}
49.9% {
display: block;
left: 35px;
top: 65px;
-webkit-transform: rotate(45deg) scale(0);
transform:
rotate(45deg) scale(0);
}
50% {
display: block;
left: -35px;
top: 15px;
-webkit-transform: rotate(45deg)
scale(0);
transform: rotate(45deg) scale(0);
}
75% {
display: block;
left: -35px;
-webkit-transform:
rotate(45deg) scale(2);
transform: rotate(45deg) scale(2);
}
99.9% {
display: block;
left: -35px;
top:
65px;
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
}
}
@-webkit-keyframes hands-up
{
25% {
-webkit-transform: rotate(15deg);
transform:
rotate(15deg);
}
50% {
-webkit-transform: rotate(-15deg)
translateY(-10px);
transform: rotate(-15deg) translateY(-10px);
}
75%, 100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes hands-up {
25% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
50% {
-webkit-transform: rotate(-15deg)
translateY(-10px);
transform: rotate(-15deg) translateY(-10px);
}
75%, 100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes thumbs-up {
25%
{
-webkit-transform: rotate(20deg);
transform:
rotate(20deg);
}
50%, 100% {
-webkit-transform:
rotate(5deg);
transform: rotate(5deg);
}
}
@keyframes
thumbs-up {
25% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
50%, 100% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
}
@-webkit-keyframes angry-color {
45%, 60% {
background-size: 250%;
}
85%, 100%, 0% {
background-size: 100%;
}
}
@keyframes angry-color {
45%, 60%
{
background-size: 250%;
}
85%, 100%, 0% {
background-size: 100%;
}
}
@-webkit-keyframes angry-face {
35%,
60% {
-webkit-transform: translateX(0) translateY(10px)
scale(0.9);
transform: translateX(0) translateY(10px)
scale(0.9);
}
40%, 50% {
-webkit-transform:
translateX(-5px) translateY(10px) scale(0.9);
transform:
translateX(-5px) translateY(10px) scale(0.9);
}
45%, 55% {
-webkit-transform: translateX(5px) translateY(10px) scale(0.9);
transform: translateX(5px) translateY(10px) scale(0.9);
}
}
@keyframes angry-face {
35%, 60% {
-webkit-transform:
translateX(0) translateY(10px) scale(0.9);
transform:
translateX(0) translateY(10px) scale(0.9);
}
40%, 50% {
-webkit-transform: translateX(-5px) translateY(10px) scale(0.9);
transform: translateX(-5px) translateY(10px) scale(0.9);
}
45%,
55% {
-webkit-transform: translateX(5px) translateY(10px)
scale(0.9);
transform: translateX(5px) translateY(10px)
scale(0.9);
}
}
@-webkit-keyframes angry-mouth {
25%, 50% {
height: 6px;
bottom: 25px;
}
}
@keyframes angry-mouth
{
25%, 50% {
height: 6px;
bottom: 25px;
}
}
/* DON'T CONVERT TO RTL */
/* -- */
/* PAGE = [BASIC] */
/*
------------------------------- */
/* page-title */
.page-title
{
background-image: url(../images/patterns/bright_squares.png);
background-repeat: repeat;
color: var(--link-color);
text-align:
center;
font-size: 34px;
font-weight: 300;
line-height:
70px;
padding: 70px 0;
}
.night-mode .page-title
{
background-image: url(../images/patterns/crissXcross.png);
}
/* --
*/
/* page-header */
.page-header {
background: #457fca; /*
fallback for old browsers */
background: linear-gradient(to bottom,
#5691c8, #457fca); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera
12+, Safari 7+ */
position: relative;
text-align: center;
padding: 70px 15px;
overflow: hidden;
color: #fff;
z-index:
-999;
}
.page-header.mini {
padding: 35px 15px;
}
@media
(min-width: 768px) {
.page-header {
padding: 90px 15px;
}
.page-header.mini {
padding: 45px 15px;
}
}
.page-header.movies-header {
background-image:
url(../images/movies.jpg);
background-repeat: repeat;
background-size: contain;
z-index:
auto;
}
.page-header.market-header {
background-image:
url('../images/market.jpg');
background-repeat: repeat;
z-index:
auto;
}
.page-header.bg-1 {
background: #667db6; /* fallback for old
browsers */
background: linear-gradient(to right, #667db6, #0082c8,
#0082c8, #667db6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera
12+, Safari 7+ */
}
.page-header.bg-2 {
background: #3a7bd5; /*
fallback for old browsers */
background: linear-gradient(to right,
#3a6073, #3a7bd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera
12+, Safari 7+ */
}
.page-header.bg-3 {
background: #005C97; /*
fallback for old browsers */
background: linear-gradient(to right,
#363795, #005C97); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera
12+, Safari 7+ */
}
.page-header.bank-transfer {
z-index: 1;
padding: 20px;
background-color: #2196f3; /* fallback for old browsers
*/
background: linear-gradient(90deg, #03A9F4 0%, #2196f3 35%, #3F51B5
100%);
}
.page-header .floating-img {
position: absolute;
bottom: 10px;
left: 10%;
width: 300px;
opacity: 0.5;
z-index: -997;
}
.page-header .circle-1 {
position: absolute;
top: 60px;
left: -180px;
width: 290px;
height: 290px;
background-image: radial-gradient(circle 800px at 75% -25%,#000000
0,rgba(255, 255, 255, 0) 100%);
border-radius: 50%;
opacity:
.05;
}
.page-header .circle-2 {
position: absolute;
top:
17px;
right: -242px;
width: 500px;
height: 500px;
background-image: radial-gradient(circle 800px at 10% -25%,#000000
0,rgba(255, 255, 255, 0) 100%);
border-radius: 50%;
opacity:
.03;
}
.page-header .circle-3 {
position: absolute;
top:
-73px;
right: 78px;
width: 200px;
height: 200px;
background-image: radial-gradient(circle 800px at 10% -25%,#000000
0,rgba(255, 255, 255, 0) 100%);
border-radius: 50%;
opacity:
.04;
}
.page-header .ellipse-1 {
position: absolute;
top:
-50px;
left: 0;
width: 200px;
height: 100px;
background-color: rgba(2,136,209,0.3);
border-radius: 50%;
z-index: -998;
}
.page-header .crystal {
width: 0;
height: 0;
position: absolute;
z-index: -998;
}
.page-header .crystal.c01 {
border-bottom: 100px solid rgba(0,96,100,0.1);
border-right: 100vw solid
transparent;
bottom: 0;
right: 0;
}
.page-header .crystal.c02 {
border-bottom: 160px solid rgba(2,136,209,0.3);
border-left: 100vw solid
transparent;
bottom: 0;
left: 0;
}
.page-header .crystal.c03 {
border-top: 200px solid rgba(0,96,155,0.2);
border-right: 40vw solid
transparent;
border-left: 60vw solid transparent;
top: 0;
right:
0;
}
.page-header .crystal.c04 {
border-top: 400px solid
rgba(24,255,255,0.3);
border-right: 80vw solid transparent;
border-left: 20vw solid transparent;
top: 0;
left:
0;
}
.page-header .crystal.c05 {
border-bottom: 250px solid
transparent;
border-top: 100px solid transparent;
border-right: 100vw
solid rgba(128,216,255,0.3);
bottom: 10px;
right: 0;
}
.page-header
.crystal.c06 {
border-bottom: 400px solid rgba(79,195,247,0.4);
border-right: 10vw solid transparent;
border-left: 30vw solid
transparent;
bottom: 0;
right: 20vw;
}
.page-header .crystal.c07
{
border-top: 367px solid rgba(0,131,143,0.2);
border-left: 60vw
solid transparent;
top: 0;
right: 0;
}
.page-header .crystal.c08
{
border-top: 50px solid rgba(167,255,235,0.4);
border-right: 60vw
solid transparent;
top: 0;
left: 0;
}
.page-header .crystal.c09 {
border-top: 400px solid rgba(0,176,255,0.3);
border-right: 30vw solid
transparent;
top: 0;
left: 0;
}
.page-header .crystal.c10 {
border-bottom: 400px solid rgba(128,222,234,0.2);
border-right: 20vw
solid transparent;
border-left: 20vw solid transparent;
bottom: 0;
right: 60vw;
}
.page-header h2 {
font-family: -apple-system,
system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
font-weight:
normal;
}
.page-header .inner {
z-index:
999;
}
.page-header.bank-transfer .inner {
border: 6px solid
rgba(255, 255, 255, 0.3);
padding: 20px;
border-radius:
5px;
}
.page-header.bank-transfer .bank-info-meta {
font-size:
18px;
}
.page-header.bank-transfer .bank-info-help {
font-size:
12px;
color: #eee;
text-transform: uppercase;
}
/* -- */
/*
footer */
.footer {
border-top: 1px solid #e6ecf5;
padding-top:
10px;
padding-bottom: 10px;
margin-top: 25px;
margin-bottom:
25px;
}
.night-mode .footer {
border-top: 1px solid #212121;
}
@media
(min-width: 768px) {
.footer .links {
text-align: right;
}
}
/* --
*/
/* mini-footer */
.mini-footer {
font-size:
12px;
}
.mini-footer .copyrights {
display: flex;
align-items:
center;
justify-content: space-between;
padding-bottom: 5px;
margin-bottom: 5px;
color: #858585;
font-weight: 500;
border-bottom: 1px solid #e9e9e9;
}
.night-mode .mini-footer .copyrights
{
border-bottom-color: #212121;
}
.mini-footer .links {
display: flex;
align-items: center;
justify-content:
space-between;
flex-wrap: wrap;
margin: 0 -5px
0;
}
.mini-footer .links li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
/* -- */
/* PAGE =
[404] */
/* ------------------------------- */
.notfound-wrapper {
position: relative;
min-height: 560px;
}
.notfound {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform:
translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 560px;
width:
100%;
padding-left: 160px;
line-height: 1.1;
}
.notfound
.notfound-circle {
position: absolute;
left: 0;
top: 0;
width: 140px;
height: 140px;
font-size: 140px;
}
.notfound
.notfound-circle:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
-webkit-transform: scale(2.4);
-ms-transform: scale(2.4);
transform: scale(2.4);
border-radius:
50%;
background-color: #f2f5f8;
z-index: -1;
}
body.night-mode
.notfound .notfound-circle:before {
background-color:
#212121;
}
@media only screen and (max-width: 767px) {
.notfound {
padding-left: 15px;
padding-right: 15px;
padding-top: 110px;
}
.notfound .notfound-circle {
width: 110px;
height: 110px;
font-size: 110px;
}
}
.notfound h1 {
font-family: 'Nunito', sans-serif;
font-size: 65px;
font-weight: 700;
margin-top: 0px;
margin-bottom: 10px;
color: #151723;
text-transform:
uppercase;
}
.notfound h2 {
font-family: 'Nunito', sans-serif;
font-size: 21px;
font-weight: 400;
margin: 0;
text-transform: uppercase;
color: #151723;
}
body.night-mode
.notfound h1,
body.night-mode .notfound h2 {
color: #fff;
}
/* --
*/
/* PAGE = [OAUTH] */
/* ------------------------------- */
/*
ouath-card */
.card-ouath-overlay {
background: #000;
position:
fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: .6;
transition: opacity .5s;
z-index:
1002;
}
.card-ouath {
background: #fff;
border: 0;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
z-index: 1003;
}
/* --
*/
/* PAGE = [INDEX] */
/* ------------------------------- */
/*
index-body */
body.index-body {
background-image:
url('../images/home/dots.png');
background-size: contain;
background-color: #f9f9f9;
}
body.night-mode.index-body {
background-image: url('../images/home/dots-night.png');
background-color: var(--body-bg-color-dark);
}
/* -- */
/*
card-register */
.card-register {
background: #fff;
border: 0;
box-shadow: 0 1px 20px 0 rgba(0,0,0,.1);
overflow:
hidden;
}
.card-register .card-header {
border: 0;
padding: 0 0
15px;
background: transparent;
}
.card-register .card-header img {
position: absolute;
left: 0;
top: -135px;
margin-left:
-50px;
margin-top: -150px;
border-radius: 20%;
width:
350px;
}
.card-register .card-header .card-title {
position:
relative;
font-size: 4em;
font-weight: 900;
color: #eee;
text-transform: lowercase;
margin-left: -5px;
}
body.night-mode
.card-register .card-header .card-title {
color:
#222a42;
}
.card-register .form-control {
border-radius: 18px;
background: #f7f7f7;
}
.card-register
.input-group>.input-group-prepend>.input-group-text {
background: #f7f7f7;
border-radius: 18px 0 0 18px;
}
body.night-mode
.card-register .form-control {
background: #232323;
border-color:
#363636;
}
body.night-mode .card-register
.input-group>.input-group-prepend>.input-group-text {
background: #232323;
border-color: #363636;
color:
#dfdfdf;
}
/* -- */
/* index-intro */
.index-intro {
text-align:
center;
margin-bottom: 20px;
}
.index-intro h1 {
font-size:
34px;
font-weight: 100;
color: #4d4d4d;
}
@media (min-width: 768px)
{
.index-intro h1 {
font-size: 48px;
}
}
body.night-mode
.index-intro h1 {
color: #fff;
}
.index-intro p {
font-weight:
100;
font-size: 18px;
line-height: 24px;
color:
#6a6a6a;
}
body.night-mode .index-intro p {
color: #ccc;
}
/* --
*/
/* daytime_message */
.daytime_message {
display:
none;
padding: 15px;
margin-bottom: 20px;
border-left: 2px
solid #fba540!important;
}
.daytime_message button {
margin-top: 4px;
font-size: 18px;
}
/* -- */
/* PAGE = [DIRECTORY] */
/*
------------------------------- */
.directory-card {
display:
block;
width: 100%;
height: 100%;
background: #f6f7f9;
padding:
25px;
font-size: 14px;
line-height: 20px;
text-align:
center;
color: #898f9c;
border-radius: 4px;
}
body.night-mode
.directory-card {
background: #292929;
}
.directory-card:hover
{
background: #eee;
color: #898f9c;
}
body.night-mode
.directory-card:hover {
background: #333333;
}
.directory-card .title
{
margin-top: 15px;
color: #4b4f56;
}
body.night-mode .directory-card
.title {
color: #9a9fbf;
}
.directory-card p {
margin-bottom:
0;
}
/* -- */
/* PAGE = [MESSAGES] */
/*
------------------------------- */
/* panel-messages */
.panel-messages
.card-header .fa-circle {
color: #65a830;
font-size:
9px;
}
.panel-messages .card-body {
padding:
0;
}
.panel-messages.fresh .card-body {
position:
relative;
}
.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 */
.profile-header {
position: relative;
margin-bottom:
20px;
border: 1px solid #e6ecf5;
border-top: 0;
}
body.night-mode
.profile-header {
border-color: #424242;
}
@media (min-width: 992px)
{
.profile-header {
margin-bottom: 40px;
}
}
/* -- */
/*
profile-cover-wrapper */
.profile-cover-wrapper {
background:
#424242;
position: relative;
height: 180px;
overflow:
hidden;
border-radius: 0 0 2px 2px;
}
@media (min-width: 576px)
{
.profile-cover-wrapper {
height: 240px;
}
}
@media (min-width:
768px) {
.profile-cover-wrapper {
height: 300px;
}
}
@media
(min-width: 992px) {
.profile-cover-wrapper {
height:
360px;
}
}
/* -- */
/* profile-cover-wrapper -> img
*/
.profile-cover-wrapper img.js_position-cover-cropped {
width:
100%;
height: 100%;
object-fit: cover;
}
.profile-cover-wrapper
img.js_lightbox:hover {
cursor: pointer;
}
.profile-cover-wrapper
img.js_position-cover-full {
width: 100%;
height: auto;
cursor: move;
}
/* -- */
/* profile-cover-wrapper -> buttons
*/
.profile-cover-buttons {
position: absolute;
top: 10px;
left:
10px;
color: #fff;
font-size: 12px;
opacity: 0.4;
transition: all
.5s;
}
@media (min-width: 768px) {
.profile-cover-buttons {
top:
15px;
left: 15px;
font-size: 16px;
}
}
.profile-cover-buttons
> div {
float: left;
margin-right: 5px;
padding: 4px
8px;
border-radius: 50%;
text-align: center;
background: rgba(0, 0,
0, 0.10);
transition: all .5s;
}
.profile-cover-buttons > div:hover
{
cursor: pointer;
background: rgba(0, 0, 0,
0.25);
}
.profile-cover-wrapper:hover .profile-cover-buttons {
opacity: 1;
}
.profile-cover-buttons form.x-uploader {
position:
relative;
}
.profile-cover-buttons >
div.profile-cover-position-buttons {
display: none;
padding: 4px
6px;
}
/* -- */
/* profile-cover-wrapper -> loaders
*/
.profile-cover-change-loader {
display: none;
position:
absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity:
0.5;
background: #000;
width: 100%;
height: 100%;
padding-top:
20%;
transition: all .5s;
}
@media (min-width: 768px)
{
.profile-cover-change-loader {
padding-top:
15%;
}
}
.profile-cover-position-loader {
display: none;
position: absolute;
top: 15px;
left: 50%;
padding: 8px
10px;
background: rgba(0,0,0,0.45);
color: #fff;
font-size:
11px;
border-radius: 2px;
transform: translate(-50%);
}
@media
(min-width: 768px) {
.profile-cover-position-loader {
padding: 8px
24px;
font-size: 13px;
font-weight: 600;
}
}
/* -- */
/*
profile-avatar-wrapper */
.profile-avatar-wrapper {
position:
absolute;
top: 112px;
left: 50%;
transform:
translate(-50%);
padding: 2px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0, 0, 0,
.3);
}
@media (min-width: 576px) {
.profile-avatar-wrapper {
top: 140px;
}
}
@media (min-width: 768px) {
.profile-avatar-wrapper {
top: 170px;
}
}
body.night-mode
.profile-avatar-wrapper {
background:
#121212;
}
.profile-avatar-wrapper.static {
top: 0;
}
@media
(min-width: 992px) {
.profile-avatar-wrapper {
padding: 4px;
}
.profile-avatar-wrapper:not(.static) {
top: auto;
bottom:
-25px;
left: 55px;
transform: none;
}
}
/*
profile-avatar-wrapper -> img */
.profile-avatar-wrapper img {
width:
90px;
height: 90px;
border-radius: 50%;
transition: all
.5s;
}
.profile-avatar-wrapper img.js_lightbox:hover {
cursor:
pointer;
}
@media (min-width: 576px) {
.profile-avatar-wrapper img
{
width: 120px;
height: 120px;
}
}
@media (min-width: 768px)
{
.profile-avatar-wrapper img {
width: 150px;
height:
150px;
}
}
@media (min-width: 992px) {
.profile-avatar-wrapper img
{
width: 160px;
height: 160px;
}
}
/* -- */
/*
profile-avatar-wrapper -> buttons
*/
.profile-avatar-change,
.profile-avatar-crop,
.profile-avatar-delete
{
display: block;
position: absolute;
bottom: 5px;
right:
5px;
opacity: 0.4;
color: #fff;
font-size: 12px;
padding: 4px 8px;
border-radius: 50%;
text-align: center;
background: rgba(0, 0, 0, 0.10);
transition: all
.5s;
}
.profile-avatar-change:hover,
.profile-avatar-crop:hover,
.profile-avatar-delete:hover
{
cursor: pointer;
background: rgba(0, 0, 0,
0.25);
}
.profile-avatar-crop {
bottom: 35px;
right:
-15px;
}
.profile-avatar-delete {
bottom: 75px;
right:
5px;
}
.profile-avatar-change form.x-uploader {
position:
relative;
}
@media (min-width: 576px) {
.profile-avatar-delete
{
bottom: 75px;
right: -15px;
}
}
@media (min-width: 768px)
{
.profile-avatar-change,
.profile-avatar-crop,
.profile-avatar-delete
{
bottom: 10px;
right: 10px;
font-size:
16px;
}
.profile-avatar-crop {
bottom: 45px;
right:
-10px;
}
.profile-avatar-delete {
bottom: 85px;
right:
-15px;
}
}
.profile-avatar-wrapper:hover
.profile-avatar-change,
.profile-avatar-wrapper:hover
.profile-avatar-delete,
.profile-avatar-wrapper:hover .profile-avatar-crop
{
opacity: 1;
}
/* -- */
/* profile-avatar-wrapper -> loaders
*/
.profile-avatar-change-loader {
display: none;
position:
absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity:
0.5;
background: #000;
width: 100%;
height: 100%;
border-radius:
50%;
padding-top: 50%;
transition: all .5s;
}
/* -- */
/*
profile-name-wrapper */
.profile-name-wrapper {
background: #fff;
padding-top: 30px;
padding-bottom: 10px;
text-align: center;
font-size: 1.2em;
font-weight: 600;
}
body.night-mode
.profile-name-wrapper {
background: #212121;
}
@media (min-width:
992px) {
.profile-name-wrapper {
position: absolute;
bottom: 50px;
left: 285px;
right: auto;
background: transparent!important;
padding-top: 0;
padding-bottom: 0;
text-align: left;
font-size: 1.9em;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}
.no-avatar
.profile-name-wrapper {
left: 85px;
bottom: 70px;
}
}
.profile-name-wrapper a {
color: #333;
}
body.night-mode
.profile-name-wrapper a {
color: #fff;
}
.profile-name-wrapper
a.badge {
color: #fff;
}
@media (min-width: 992px) {
.profile-name-wrapper a {
color: #fff;
}
.profile-name-wrapper a.badge {
font-size: 14px;
}
}
/* --
*/
/* profle-date-wrapper */
.profle-date-wrapper {
position:
absolute;
width: 45px;
left: 10px;
top: 120px;
padding:
6px;
border-radius: 6px;
border: 2px solid white;
background: rgba(0, 0, 0, 0.1);
text-align: center;
font-size:
12px;
color: #fff;
transition: all .5s;
}
@media (min-width:
576px) {
.profle-date-wrapper {
top: 180px;
}
}
@media
(min-width: 768px) {
.profle-date-wrapper {
top: 240px;
}
}
@media (min-width: 992px) {
.profle-date-wrapper {
width: 55px;
left: 15px;
top: auto;
bottom:
50px;
font-size: 14px;
}
}
/* -- */
/*
profle-meta-wrapper */
.profle-meta-wrapper {
position: absolute;
left: 65px;
top: 140px;
color: #e9e9e9;
font-size: 12px;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}
@media (min-width: 576px)
{
.profle-meta-wrapper {
top: 200px;
}
}
@media
(min-width: 768px) {
.profle-meta-wrapper {
top: 260px;
}
}
@media (min-width: 992px) {
.profle-meta-wrapper {
left: 85px;
top: auto;
bottom: 50px;
font-size:
14px;
}
}
/* -- */
/* profile-buttons-wrapper
*/
.profile-buttons-wrapper {
background: #fff;
padding-bottom:
20px;
text-align: center;
}
body.night-mode .profile-buttons-wrapper
{
background: #212121;
}
@media (min-width: 992px) {
.profile-buttons-wrapper {
background: transparent!important;
position: absolute;
bottom: 50px;
right: 15px;
padding-bottom: 0;
text-align: left;
}
}
@media
(max-width: 992px) {
.profile-buttons-wrapper .btn {
box-shadow: none;
}
}
/* -- */
/* profile-tabs-wrapper
*/
.profile-tabs-wrapper {
padding: 0 5px;
background: #fff;
box-shadow: 0 1px 13px rgba(0, 0, 0, 0.08);
border-top: 1px solid
#e6ecf5;
border-radius: 0 0 2px 2px;
}
body.night-mode
.profile-tabs-wrapper {
background: #212121;
border-color:
#323232;
}
@media (min-width: 992px) {
.profile-tabs-wrapper {
position: absolute;
bottom: -25px;
left: 285px;
right:
15px;
padding: 0;
box-shadow: none;
border-radius:
2px;
}
.no-avatar .profile-tabs-wrapper {
left:
15px;
}
}
.profile-tabs-wrapper > ul {
overflow: hidden;
overflow-x: auto;
white-space: nowrap;
}
.profile-tabs-wrapper >
ul > li {
display: inline-block;
}
.profile-tabs-wrapper > ul
> li > a {
display: block;
padding: 18px 25px;
line-height:
20px;
font-weight: 600;
color: #666;
transition: all .2s
ease;
}
.profile-tabs-wrapper.narrow > ul > li > a {
padding:
18px 28px;
}
body.night-mode .profile-tabs-wrapper > ul > li > a
{
color: #eee;
}
.profile-tabs-wrapper > ul > li >
a:hover,
body.night-mode .profile-tabs-wrapper > ul > li >
a:hover {
color: var(--link-color);
}
.profile-tabs-wrapper > ul
> li > a.active,
body.night-mode .profile-tabs-wrapper > ul >
li > a.active {
color: var(--link-color);
border-bottom: 2px solid
var(--link-color);
}
/* -- */
/* panel-mutual-friends */
@media
(max-width: 559px) {
.panel-mutual-friends {
display:
none;
}
}
.panel-mutual-friends li {
float: left;
width:
40px;
height: 40px;
margin-right: -8px;
}
/* -- */
/* panel
[about] */
.about-bio {
word-wrap: break-word;
text-align:
center;
border-bottom: 1px solid #eee;
margin-bottom: 10px;
padding-bottom: 10px;
}
body.night-mode .about-bio {
border-color:
#424242;
}
.about-bio a {
display: inline-block;
margin-top:
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:
-20px;
margin-right: -20px;
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;
}
/* -- */
/* panel [photos] */
.panel-photos
div[class^="col-"], .panel-photos div[class*=" col-"]
{
padding: 1px;
padding-bottom: 0;
}
.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 [videos] */
.panel-videos
div[class^="col-"], .panel-videos div[class*=" col-"]
{
padding: 1px;
padding-bottom: 0;
}
.pg_video {
position:
relative;
background: #eee;
display: block;
padding-bottom:
100%;
overflow: hidden;
}
.pg_video video {
position:
absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
width: 100%;
height: 100%;
}
.pg_video
.play-button {
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
display: block;
width: 50px;
height:
50px;
padding-top: 11px;
padding-left: 6px;
border-radius:
50%;
color: #f5f5f5;
text-align: center;
background-color:
rgba(0,0,0,0.5);
transition: all 0.3s ease;
}
.pg_video:hover
.play-button {
background-color: rgba(0,0,0,0.8);
box-shadow: 0px
0px 10px rgba(255,255,100,1);
}
/* -- */
/* album-card */
.album-card
{
border: 1px solid #ededed;
border-radius: 1px;
margin-bottom:
10px;
}
body.night-mode .album-card {
border-color:
#121212;
}
.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;
font-size: 11px;
}
.album-details .fa {
cursor:
pointer;
}
.album-details .tooltip {
width: auto;
min-width:
110px;
font-size: 11px;
}
/* -- */
/* album */
.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] */
/*
------------------------------- */
/* admin-chart */
.admin-chart
{
min-width: 100%;
height: 400px;
margin: 0 auto;
border: 1px
solid #e6ecf5;
}
body.night-mode .admin-chart {
border-color:
#424242;
}
/* -- */
/* table-img-thumbnail */
.table-img-thumbnail
{
max-width: 100px;
}
/* -- */
/* change-log-list
*/
.change-log-list {
margin-left: 30px;
}
.change-log-list > li
{
margin-left: 30px;
list-style-type: disc;
}
/* -- */
/*
PAGE = [MARKET] */
/* ------------------------------- */
.product {
position: relative;
}
.product:hover{
box-shadow: 0 2px 10px
rgba(0, 0, 0, 0.2);
}
.product.boosted {
border: 2px solid
#f9b340;
}
.product .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 */
z-index: 2;
}
.product-image
{
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
}
.product-image img {
width: 100%;
height:
100%;
object-fit: cover;
}
.product-price {
position:
absolute;
left: 10px;
bottom: 10px;
background: rgba(0, 0,
0, 0.65);
color: #fff;
font-size: 16px;
font-weight: bold;
line-height: 1;
padding: 6px 10px;
border-radius:
6px;
}
.product-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
padding-top: 100px;
background: rgba(0, 0, 0, 0.5);
color:
#fff;
text-align: center;
opacity: 0;
transition: all
300ms;
}
.product:hover .product-overlay {
opacity:
1;
}
.product-info {
padding: 10px;
}
.product-meta {
overflow: hidden;
word-break: break-all;
text-overflow:
ellipsis;
white-space: nowrap;
margin-bottom:
10px;
}
.product-meta .title {
font-size: 14px;
font-weight:
500;
}
/* -- */
/* PAGE = [MOVIES] */
/*
------------------------------- */
.movie-card {
margin-bottom:
20px;
}
.movie-card-top {
position: relative;
display:
block;
border: 5px solid #fff;
border-radius: 4px;
margin-bottom: 10px;
}
body.night-mode .movie-card-top {
border-color: #212121;
}
.movie-picture {
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
background-color: #fff;
width: 100%;
height: 100%;
min-height: 330px;
}
.movie-info {
position: absolute;
top:
0;
left: 0;
right: 0;
width: 100%;
height: 100%;
padding-top:
70px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
text-align:
center;
opacity: 0;
transition: all 300ms;
transition-delay:
100ms;
}
.movie-info .meta {
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
}
.movie-card-top:hover .movie-info {
opacity:
1;
}
.movie-card-bottom {
margin: 0 auto;
padding: 0 5px;
text-align: left;
}
.movie-title {
display: block;
font-size: 14px;
font-weight: 700;
transition: color .15s ease-in-out;
overflow: hidden;
white-space: nowrap;
text-overflow:
ellipsis;
}
.movie-year {
font-size: 14px;
}
/* -- */
/* NOTY
NOTIFICATION */
/* -------------------------------
*/
.noty_theme__mint.noty_type__info,
.noty_theme__mint.noty_type__information {
background-color: rgba(51,
103, 214, 0.8)!important;
border-bottom: 1px solid
#3367d6!important
}
.noty_bar {
margin-bottom:
5px!important;
}
.noty_body {
color: #fff!important;
padding:
5px!important;
}
.noty_body .data-content,
.noty_close_button {
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.warning
{
border-color: rgba(255, 153, 0, 0.21);
}
.big-icon .fa
{
padding-top: 17px;
padding-left: 3px;
}
.big-icon.success .fa
{
color: #4cae4c;
}
.big-icon.error .fa {
color:
#d9534f;
}
.big-icon.warning .fa {
color: #d9954f;
}
/* --
*/
/* LOADER */
/* ------------------------------- */
.x-loader
{
text-align: center;
}
.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;
}
.switch
.slider {
position: absolute;
cursor: pointer;
top: 0;
left:
0;
right: 0;
bottom: 0;
background-color: #ccc;
transition:
.4s;
}
body.night-mode .switch .slider {
background-color:
#666;
}
.switch .slider:before {
position: absolute;
content:
"";
height: 26px;
width: 26px;
left: 4px;
bottom:
4px;
background-color: white;
transition: .4s;
}
.switch.sm
.slider:before {
height: 13px;
width: 13px;
left: 2px;
bottom:
2px;
}
.switch input:checked + .slider {
background-color:
var(--link-color);
}
.switch input:focus + .slider {
box-shadow: 0 0
1px #2196F3;
}
.switch 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);
}
.switch .slider.round {
border-radius:
34px;
}
.switch .slider.round:before {
border-radius: 50%;
}
/* --
*/
/* CUSTOM RADIO/CHECKBOX TEMPLATES */
/*
------------------------------- */
.button-label {
display:
inline-block;
padding: 1em 2em;
margin: 0.5em;
cursor:
pointer;
color: #6c6c6c;
border-radius: 6px;
transition:
0.3s;
box-shadow: 0 0 0 1px #e6e6e6;
min-width:
115px;
}
body.night-mode .button-label {
box-shadow: 0 0 0 1px
#424242;
}
.button-label-image {
display: block;
padding:
5px;
margin: 0px;
width: 100%;
height: 100%;
box-shadow: none;
cursor: pointer;
transition: 0.3s;
border-radius: 2px;
}
.button-label .icon {
display: flex;
align-items: center;
justify-content: center;
background:
#f3f3f3;
height: 60px;
width: 60px;
margin: 0 auto;
border-radius: 50%;
transition: all 0.2s;
opacity: .75;
filter: grayscale(1);
}
.button-label .icon img {
width: 32px;
height: 32px;
}
.button-label-image img {
width: 100%;
height:
100%;
border-radius: 2px;
}
.button-label .title {
font-weight:
500;
font-size: 14px;
margin-top: 15px;
text-transform:
capitalize;
text-align: center;
}
.button-label:hover,
.button-label-image:hover {
box-shadow: 0px 0px 0px 2px rgba(51,
103, 214, 0.65);
}
.input-label:checked +
.button-label,
.input-label:checked + .button-label-image {
box-shadow: 0px 0px 0px 2px rgba(51, 103, 214,
0.65);
}
.input-label:checked + .button-label .icon {
filter:
grayscale(0);
opacity: 1;
}
/* -- */
/* SOCIAL BUTTONS */
/*
------------------------------- */
.btn-social,.btn-social-icon {
white-space: nowrap;
overflow: hidden;
text-overflow:
ellipsis
}
.btn-adn.active,.btn-adn:active,.btn-bitbucket.active,.btn-bitbucket:active,.btn-dropbox.active,.btn-dropbox:active,.btn-facebook.active,.btn-facebook:active,.btn-flickr.active,.btn-flickr:active,.btn-foursquare.active,.btn-foursquare:active,.btn-github.active,.btn-github:active,.btn-google.active,.btn-google:active,.btn-instagram.active,.btn-instagram:active,.btn-microsoft.active,.btn-microsoft:active,.btn-openid.active,.btn-openid:active,.btn-pinterest.active,.btn-pinterest:active,.btn-reddit.active,.btn-reddit:active,.btn-soundcloud.active,.btn-soundcloud:active,.btn-tumblr.active,.btn-tumblr:active,.btn-twitter.active,.btn-twitter:active,.btn-vimeo.active,.btn-vimeo:active,.btn-vk.active,.btn-vk:active,.btn-yahoo.active,.btn-yahoo:active,.open>.dropdown-toggle.btn-adn,.open>.dropdown-toggle.btn-bitbucket,.open>.dropdown-toggle.btn-dropbox,.open>.dropdown-toggle.btn-facebook,.open>.dropdown-toggle.btn-flickr,.open>.dropdown-toggle.btn-foursquare,.open>.dropdown-toggle.btn-github,.open>.dropdown-toggle.btn-google,.open>.dropdown-toggle.btn-instagram,.open>.dropdown-toggle.btn-microsoft,.open>.dropdown-toggle.btn-openid,.open>.dropdown-toggle.btn-pinterest,.open>.dropdown-toggle.btn-reddit,.open>.dropdown-toggle.btn-soundcloud,.open>.dropdown-toggle.btn-tumblr,.open>.dropdown-toggle.btn-twitter,.open>.dropdown-toggle.btn-vimeo,.open>.dropdown-toggle.btn-vk,.open>.dropdown-toggle.btn-yahoo
{
background-image: none
}
.btn-social {
position:
relative;
padding-left: 44px;
text-align:
left
}
.btn-social>:first-child {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 32px;
line-height:
34px;
font-size: 1.6em;
text-align: center;
border-right:
1px solid rgba(0,0,0,.2)
}
.btn-social.btn-lg {
padding-left:
61px
}
.btn-social.btn-lg>:first-child {
line-height: 45px;
width: 45px;
font-size: 1.8em
}
.btn-social.btn-sm {
padding-left: 38px
}
.btn-social.btn-sm>:first-child {
line-height: 28px;
width: 28px;
font-size:
1.4em
}
.btn-social.btn-xs {
padding-left:
30px
}
.btn-social.btn-xs>:first-child {
line-height: 20px;
width: 20px;
font-size: 1.2em
}
.btn-social-icon {
position:
relative;
text-align: left;
height: 34px;
width: 34px;
padding: 0
}
.btn-social-icon>:first-child {
position:
absolute;
left: 0;
top: 0;
bottom: 0;
line-height:
34px;
font-size: 1.6em
}
.btn-social-icon.btn-lg>:first-child
{
line-height: 45px;
width: 45px;
font-size:
1.8em
}
.btn-social-icon.btn-sm>:first-child {
line-height:
28px;
width: 28px;
font-size:
1.4em
}
.btn-social-icon.btn-xs>:first-child {
line-height:
20px;
width: 20px;
font-size:
1.2em
}
.btn-social-icon>:first-child {
border: none;
text-align: center;
width:
100%!important
}
.btn-social-icon.btn-lg {
height: 45px;
width: 45px;
padding-left: 0;
padding-right:
0
}
.btn-social-icon.btn-sm {
height: 30px;
width: 30px;
padding-left: 0;
padding-right: 0
}
.btn-social-icon.btn-xs {
height: 22px;
width: 22px;
padding-left: 0;
padding-right:
0
}
.btn-adn {
color: #fff;
background-color: #d87a68;
border-color:
rgba(0,0,0,.2)
}
.btn-adn.active,.btn-adn:active,.btn-adn:focus,.btn-adn:hover,.open>.dropdown-toggle.btn-adn
{
color: #fff;
background-color: #ce563f;
border-color:
rgba(0,0,0,.2)
}
.btn-adn.disabled,.btn-adn.disabled.active,.btn-adn.disabled:active,.btn-adn.disabled:focus,.btn-adn.disabled:hover,.btn-adn[disabled],.btn-adn[disabled].active,.btn-adn[disabled]:active,.btn-adn[disabled]:focus,.btn-adn[disabled]:hover,fieldset[disabled]
.btn-adn,fieldset[disabled] .btn-adn.active,fieldset[disabled]
.btn-adn:active,fieldset[disabled] .btn-adn:focus,fieldset[disabled]
.btn-adn:hover {
background-color: #d87a68;
border-color:
rgba(0,0,0,.2)
}
.btn-adn .badge {
color: #d87a68;
background-color: #fff
}
.btn-bitbucket {
color: #fff;
background-color: #205081;
border-color:
rgba(0,0,0,.2)
}
.btn-bitbucket.active,.btn-bitbucket:active,.btn-bitbucket:focus,.btn-bitbucket:hover,.open>.dropdown-toggle.btn-bitbucket
{
color: #fff;
background-color: #163758;
border-color:
rgba(0,0,0,.2)
}
.btn-bitbucket.disabled,.btn-bitbucket.disabled.active,.btn-bitbucket.disabled:active,.btn-bitbucket.disabled:focus,.btn-bitbucket.disabled:hover,.btn-bitbucket[disabled],.btn-bitbucket[disabled].active,.btn-bitbucket[disabled]:active,.btn-bitbucket[disabled]:focus,.btn-bitbucket[disabled]:hover,fieldset[disabled]
.btn-bitbucket,fieldset[disabled] .btn-bitbucket.active,fieldset[disabled]
.btn-bitbucket:active,fieldset[disabled]
.btn-bitbucket:focus,fieldset[disabled] .btn-bitbucket:hover {
background-color: #205081;
border-color:
rgba(0,0,0,.2)
}
.btn-bitbucket .badge {
color: #205081;
background-color: #fff
}
.btn-dropbox {
color: #fff;
background-color: #1087dd;
border-color:
rgba(0,0,0,.2)
}
.btn-dropbox.active,.btn-dropbox:active,.btn-dropbox:focus,.btn-dropbox:hover,.open>.dropdown-toggle.btn-dropbox
{
color: #fff;
background-color: #0d6aad;
border-color:
rgba(0,0,0,.2)
}
.btn-dropbox.disabled,.btn-dropbox.disabled.active,.btn-dropbox.disabled:active,.btn-dropbox.disabled:focus,.btn-dropbox.disabled:hover,.btn-dropbox[disabled],.btn-dropbox[disabled].active,.btn-dropbox[disabled]:active,.btn-dropbox[disabled]:focus,.btn-dropbox[disabled]:hover,fieldset[disabled]
.btn-dropbox,fieldset[disabled] .btn-dropbox.active,fieldset[disabled]
.btn-dropbox:active,fieldset[disabled]
.btn-dropbox:focus,fieldset[disabled] .btn-dropbox:hover {
background-color: #1087dd;
border-color:
rgba(0,0,0,.2)
}
.btn-dropbox .badge {
color: #1087dd;
background-color: #fff
}
.btn-facebook {
color: #fff;
background-color: #3b5998;
border-color:
rgba(0,0,0,.2)
}
.btn-facebook.active,.btn-facebook:active,.btn-facebook:focus,.btn-facebook:hover,.open>.dropdown-toggle.btn-facebook
{
color: #fff;
background-color: #2d4373;
border-color:
rgba(0,0,0,.2)
}
.btn-facebook.disabled,.btn-facebook.disabled.active,.btn-facebook.disabled:active,.btn-facebook.disabled:focus,.btn-facebook.disabled:hover,.btn-facebook[disabled],.btn-facebook[disabled].active,.btn-facebook[disabled]:active,.btn-facebook[disabled]:focus,.btn-facebook[disabled]:hover,fieldset[disabled]
.btn-facebook,fieldset[disabled] .btn-facebook.active,fieldset[disabled]
.btn-facebook:active,fieldset[disabled]
.btn-facebook:focus,fieldset[disabled] .btn-facebook:hover {
background-color: #3b5998;
border-color:
rgba(0,0,0,.2)
}
.btn-facebook .badge {
color: #3b5998;
background-color: #fff
}
.btn-flickr {
color: #fff;
background-color: #ff0084;
border-color:
rgba(0,0,0,.2)
}
.btn-flickr.active,.btn-flickr:active,.btn-flickr:focus,.btn-flickr:hover,.open>.dropdown-toggle.btn-flickr
{
color: #fff;
background-color: #cc006a;
border-color:
rgba(0,0,0,.2)
}
.btn-flickr.disabled,.btn-flickr.disabled.active,.btn-flickr.disabled:active,.btn-flickr.disabled:focus,.btn-flickr.disabled:hover,.btn-flickr[disabled],.btn-flickr[disabled].active,.btn-flickr[disabled]:active,.btn-flickr[disabled]:focus,.btn-flickr[disabled]:hover,fieldset[disabled]
.btn-flickr,fieldset[disabled] .btn-flickr.active,fieldset[disabled]
.btn-flickr:active,fieldset[disabled] .btn-flickr:focus,fieldset[disabled]
.btn-flickr:hover {
background-color: #ff0084;
border-color:
rgba(0,0,0,.2)
}
.btn-flickr .badge {
color: #ff0084;
background-color: #fff
}
.btn-foursquare {
color: #fff;
background-color: #f94877;
border-color:
rgba(0,0,0,.2)
}
.btn-foursquare.active,.btn-foursquare:active,.btn-foursquare:focus,.btn-foursquare:hover,.open>.dropdown-toggle.btn-foursquare
{
color: #fff;
background-color: #f71752;
border-color:
rgba(0,0,0,.2)
}
.btn-foursquare.disabled,.btn-foursquare.disabled.active,.btn-foursquare.disabled:active,.btn-foursquare.disabled:focus,.btn-foursquare.disabled:hover,.btn-foursquare[disabled],.btn-foursquare[disabled].active,.btn-foursquare[disabled]:active,.btn-foursquare[disabled]:focus,.btn-foursquare[disabled]:hover,fieldset[disabled]
.btn-foursquare,fieldset[disabled]
.btn-foursquare.active,fieldset[disabled]
.btn-foursquare:active,fieldset[disabled]
.btn-foursquare:focus,fieldset[disabled] .btn-foursquare:hover {
background-color: #f94877;
border-color:
rgba(0,0,0,.2)
}
.btn-foursquare .badge {
color: #f94877;
background-color: #fff
}
.btn-github {
color: #fff;
background-color: #444;
border-color:
rgba(0,0,0,.2)
}
.btn-github.active,.btn-github:active,.btn-github:focus,.btn-github:hover,.open>.dropdown-toggle.btn-github
{
color: #fff;
background-color: #2b2b2b;
border-color:
rgba(0,0,0,.2)
}
.btn-github.disabled,.btn-github.disabled.active,.btn-github.disabled:active,.btn-github.disabled:focus,.btn-github.disabled:hover,.btn-github[disabled],.btn-github[disabled].active,.btn-github[disabled]:active,.btn-github[disabled]:focus,.btn-github[disabled]:hover,fieldset[disabled]
.btn-github,fieldset[disabled] .btn-github.active,fieldset[disabled]
.btn-github:active,fieldset[disabled] .btn-github:focus,fieldset[disabled]
.btn-github:hover {
background-color: #444;
border-color:
rgba(0,0,0,.2)
}
.btn-github .badge {
color: #444;
background-color: #fff
}
.btn-google {
color: #fff;
background-color: #dd4b39;
border-color:
rgba(0,0,0,.2)
}
.btn-google.active,.btn-google:active,.btn-google:focus,.btn-google:hover,.open>.dropdown-toggle.btn-google
{
color: #fff;
background-color: #c23321;
border-color:
rgba(0,0,0,.2)
}
.btn-google.disabled,.btn-google.disabled.active,.btn-google.disabled:active,.btn-google.disabled:focus,.btn-google.disabled:hover,.btn-google[disabled],.btn-google[disabled].active,.btn-google[disabled]:active,.btn-google[disabled]:focus,.btn-google[disabled]:hover,fieldset[disabled]
.btn-google,fieldset[disabled] .btn-google.active,fieldset[disabled]
.btn-google:active,fieldset[disabled] .btn-google:focus,fieldset[disabled]
.btn-google:hover {
background-color: #dd4b39;
border-color:
rgba(0,0,0,.2)
}
.btn-google .badge {
color: #dd4b39;
background-color: #fff
}
.btn-instagram {
color: #fff;
background-color: #3f729b;
border-color:
rgba(0,0,0,.2)
}
.btn-instagram.active,.btn-instagram:active,.btn-instagram:focus,.btn-instagram:hover,.open>.dropdown-toggle.btn-instagram
{
color: #fff;
background-color: #305777;
border-color:
rgba(0,0,0,.2)
}
.btn-instagram.disabled,.btn-instagram.disabled.active,.btn-instagram.disabled:active,.btn-instagram.disabled:focus,.btn-instagram.disabled:hover,.btn-instagram[disabled],.btn-instagram[disabled].active,.btn-instagram[disabled]:active,.btn-instagram[disabled]:focus,.btn-instagram[disabled]:hover,fieldset[disabled]
.btn-instagram,fieldset[disabled] .btn-instagram.active,fieldset[disabled]
.btn-instagram:active,fieldset[disabled]
.btn-instagram:focus,fieldset[disabled] .btn-instagram:hover {
background-color: #3f729b;
border-color:
rgba(0,0,0,.2)
}
.btn-instagram .badge {
color: #3f729b;
background-color: #fff
}
.btn-linkedin {
color: #fff;
background-color: #007bb6;
border-color:
rgba(0,0,0,.2)
}
.btn-linkedin.active,.btn-linkedin:active,.btn-linkedin:focus,.btn-linkedin:hover,.open>.dropdown-toggle.btn-linkedin
{
color: #fff;
background-color: #005983;
border-color:
rgba(0,0,0,.2)
}
.btn-linkedin.active,.btn-linkedin:active,.open>.dropdown-toggle.btn-linkedin
{
background-image:
none
}
.btn-linkedin.disabled,.btn-linkedin.disabled.active,.btn-linkedin.disabled:active,.btn-linkedin.disabled:focus,.btn-linkedin.disabled:hover,.btn-linkedin[disabled],.btn-linkedin[disabled].active,.btn-linkedin[disabled]:active,.btn-linkedin[disabled]:focus,.btn-linkedin[disabled]:hover,fieldset[disabled]
.btn-linkedin,fieldset[disabled] .btn-linkedin.active,fieldset[disabled]
.btn-linkedin:active,fieldset[disabled]
.btn-linkedin:focus,fieldset[disabled] .btn-linkedin:hover {
background-color: #007bb6;
border-color:
rgba(0,0,0,.2)
}
.btn-linkedin .badge {
color: #007bb6;
background-color: #fff
}
.btn-microsoft {
color: #fff;
background-color: #2672ec;
border-color:
rgba(0,0,0,.2)
}
.btn-microsoft.active,.btn-microsoft:active,.btn-microsoft:focus,.btn-microsoft:hover,.open>.dropdown-toggle.btn-microsoft
{
color: #fff;
background-color: #125acd;
border-color:
rgba(0,0,0,.2)
}
.btn-microsoft.disabled,.btn-microsoft.disabled.active,.btn-microsoft.disabled:active,.btn-microsoft.disabled:focus,.btn-microsoft.disabled:hover,.btn-microsoft[disabled],.btn-microsoft[disabled].active,.btn-microsoft[disabled]:active,.btn-microsoft[disabled]:focus,.btn-microsoft[disabled]:hover,fieldset[disabled]
.btn-microsoft,fieldset[disabled] .btn-microsoft.active,fieldset[disabled]
.btn-microsoft:active,fieldset[disabled]
.btn-microsoft:focus,fieldset[disabled] .btn-microsoft:hover {
background-color: #2672ec;
border-color:
rgba(0,0,0,.2)
}
.btn-microsoft .badge {
color: #2672ec;
background-color: #fff
}
.btn-openid {
color: #fff;
background-color: #f7931e;
border-color:
rgba(0,0,0,.2)
}
.btn-openid.active,.btn-openid:active,.btn-openid:focus,.btn-openid:hover,.open>.dropdown-toggle.btn-openid
{
color: #fff;
background-color: #da7908;
border-color:
rgba(0,0,0,.2)
}
.btn-openid.disabled,.btn-openid.disabled.active,.btn-openid.disabled:active,.btn-openid.disabled:focus,.btn-openid.disabled:hover,.btn-openid[disabled],.btn-openid[disabled].active,.btn-openid[disabled]:active,.btn-openid[disabled]:focus,.btn-openid[disabled]:hover,fieldset[disabled]
.btn-openid,fieldset[disabled] .btn-openid.active,fieldset[disabled]
.btn-openid:active,fieldset[disabled] .btn-openid:focus,fieldset[disabled]
.btn-openid:hover {
background-color: #f7931e;
border-color:
rgba(0,0,0,.2)
}
.btn-openid .badge {
color: #f7931e;
background-color: #fff
}
.btn-pinterest {
color: #fff;
background-color: #cb2027;
border-color:
rgba(0,0,0,.2)
}
.btn-pinterest.active,.btn-pinterest:active,.btn-pinterest:focus,.btn-pinterest:hover,.open>.dropdown-toggle.btn-pinterest
{
color: #fff;
background-color: #9f191f;
border-color:
rgba(0,0,0,.2)
}
.btn-pinterest.disabled,.btn-pinterest.disabled.active,.btn-pinterest.disabled:active,.btn-pinterest.disabled:focus,.btn-pinterest.disabled:hover,.btn-pinterest[disabled],.btn-pinterest[disabled].active,.btn-pinterest[disabled]:active,.btn-pinterest[disabled]:focus,.btn-pinterest[disabled]:hover,fieldset[disabled]
.btn-pinterest,fieldset[disabled] .btn-pinterest.active,fieldset[disabled]
.btn-pinterest:active,fieldset[disabled]
.btn-pinterest:focus,fieldset[disabled] .btn-pinterest:hover {
background-color: #cb2027;
border-color:
rgba(0,0,0,.2)
}
.btn-pinterest .badge {
color: #cb2027;
background-color: #fff
}
.btn-reddit {
color: #000;
background-color: #eff7ff;
border-color:
rgba(0,0,0,.2)
}
.btn-reddit.active,.btn-reddit:active,.btn-reddit:focus,.btn-reddit:hover,.open>.dropdown-toggle.btn-reddit
{
color: #000;
background-color: #bcddff;
border-color:
rgba(0,0,0,.2)
}
.btn-reddit.disabled,.btn-reddit.disabled.active,.btn-reddit.disabled:active,.btn-reddit.disabled:focus,.btn-reddit.disabled:hover,.btn-reddit[disabled],.btn-reddit[disabled].active,.btn-reddit[disabled]:active,.btn-reddit[disabled]:focus,.btn-reddit[disabled]:hover,fieldset[disabled]
.btn-reddit,fieldset[disabled] .btn-reddit.active,fieldset[disabled]
.btn-reddit:active,fieldset[disabled] .btn-reddit:focus,fieldset[disabled]
.btn-reddit:hover {
background-color: #eff7ff;
border-color:
rgba(0,0,0,.2)
}
.btn-reddit .badge {
color: #eff7ff;
background-color: #000
}
.btn-soundcloud {
color: #fff;
background-color: #f50;
border-color:
rgba(0,0,0,.2)
}
.btn-soundcloud.active,.btn-soundcloud:active,.btn-soundcloud:focus,.btn-soundcloud:hover,.open>.dropdown-toggle.btn-soundcloud
{
color: #fff;
background-color: #c40;
border-color:
rgba(0,0,0,.2)
}
.btn-soundcloud.disabled,.btn-soundcloud.disabled.active,.btn-soundcloud.disabled:active,.btn-soundcloud.disabled:focus,.btn-soundcloud.disabled:hover,.btn-soundcloud[disabled],.btn-soundcloud[disabled].active,.btn-soundcloud[disabled]:active,.btn-soundcloud[disabled]:focus,.btn-soundcloud[disabled]:hover,fieldset[disabled]
.btn-soundcloud,fieldset[disabled]
.btn-soundcloud.active,fieldset[disabled]
.btn-soundcloud:active,fieldset[disabled]
.btn-soundcloud:focus,fieldset[disabled] .btn-soundcloud:hover {
background-color: #f50;
border-color:
rgba(0,0,0,.2)
}
.btn-soundcloud .badge {
color: #f50;
background-color: #fff
}
.btn-tumblr {
color: #fff;
background-color: #2c4762;
border-color:
rgba(0,0,0,.2)
}
.btn-tumblr.active,.btn-tumblr:active,.btn-tumblr:focus,.btn-tumblr:hover,.open>.dropdown-toggle.btn-tumblr
{
color: #fff;
background-color: #1c2d3f;
border-color:
rgba(0,0,0,.2)
}
.btn-tumblr.disabled,.btn-tumblr.disabled.active,.btn-tumblr.disabled:active,.btn-tumblr.disabled:focus,.btn-tumblr.disabled:hover,.btn-tumblr[disabled],.btn-tumblr[disabled].active,.btn-tumblr[disabled]:active,.btn-tumblr[disabled]:focus,.btn-tumblr[disabled]:hover,fieldset[disabled]
.btn-tumblr,fieldset[disabled] .btn-tumblr.active,fieldset[disabled]
.btn-tumblr:active,fieldset[disabled] .btn-tumblr:focus,fieldset[disabled]
.btn-tumblr:hover {
background-color: #2c4762;
border-color:
rgba(0,0,0,.2)
}
.btn-tumblr .badge {
color: #2c4762;
background-color: #fff
}
.btn-twitter {
color: #fff;
background-color: #55acee;
border-color:
rgba(0,0,0,.2)
}
.btn-twitter.active,.btn-twitter:active,.btn-twitter:focus,.btn-twitter:hover,.open>.dropdown-toggle.btn-twitter
{
color: #fff;
background-color: #2795e9;
border-color:
rgba(0,0,0,.2)
}
.btn-twitter.disabled,.btn-twitter.disabled.active,.btn-twitter.disabled:active,.btn-twitter.disabled:focus,.btn-twitter.disabled:hover,.btn-twitter[disabled],.btn-twitter[disabled].active,.btn-twitter[disabled]:active,.btn-twitter[disabled]:focus,.btn-twitter[disabled]:hover,fieldset[disabled]
.btn-twitter,fieldset[disabled] .btn-twitter.active,fieldset[disabled]
.btn-twitter:active,fieldset[disabled]
.btn-twitter:focus,fieldset[disabled] .btn-twitter:hover {
background-color: #55acee;
border-color:
rgba(0,0,0,.2)
}
.btn-twitter .badge {
color: #55acee;
background-color: #fff
}
.btn-vimeo {
color: #fff;
background-color: #1ab7ea;
border-color:
rgba(0,0,0,.2)
}
.btn-vimeo.active,.btn-vimeo:active,.btn-vimeo:focus,.btn-vimeo:hover,.open>.dropdown-toggle.btn-vimeo
{
color: #fff;
background-color: #1295bf;
border-color:
rgba(0,0,0,.2)
}
.btn-vimeo.disabled,.btn-vimeo.disabled.active,.btn-vimeo.disabled:active,.btn-vimeo.disabled:focus,.btn-vimeo.disabled:hover,.btn-vimeo[disabled],.btn-vimeo[disabled].active,.btn-vimeo[disabled]:active,.btn-vimeo[disabled]:focus,.btn-vimeo[disabled]:hover,fieldset[disabled]
.btn-vimeo,fieldset[disabled] .btn-vimeo.active,fieldset[disabled]
.btn-vimeo:active,fieldset[disabled] .btn-vimeo:focus,fieldset[disabled]
.btn-vimeo:hover {
background-color: #1ab7ea;
border-color:
rgba(0,0,0,.2)
}
.btn-vimeo .badge {
color: #1ab7ea;
background-color: #fff
}
.btn-vk {
color: #fff;
background-color: #587ea3;
border-color:
rgba(0,0,0,.2)
}
.btn-vk.active,.btn-vk:active,.btn-vk:focus,.btn-vk:hover,.open>.dropdown-toggle.btn-vk
{
color: #fff;
background-color: #466482;
border-color:
rgba(0,0,0,.2)
}
.btn-vk.disabled,.btn-vk.disabled.active,.btn-vk.disabled:active,.btn-vk.disabled:focus,.btn-vk.disabled:hover,.btn-vk[disabled],.btn-vk[disabled].active,.btn-vk[disabled]:active,.btn-vk[disabled]:focus,.btn-vk[disabled]:hover,fieldset[disabled]
.btn-vk,fieldset[disabled] .btn-vk.active,fieldset[disabled]
.btn-vk:active,fieldset[disabled] .btn-vk:focus,fieldset[disabled]
.btn-vk:hover {
background-color: #587ea3;
border-color:
rgba(0,0,0,.2)
}
.btn-vk .badge {
color: #587ea3;
background-color: #fff
}
.btn-whatsapp {
color: #fff;
background-color: #04aa24;
border-color:
rgba(0,0,0,.2)
}
.btn-whatsapp.active,.btn-whatsapp:active,.btn-whatsapp:focus,.btn-whatsapp:hover,.open>.dropdown-toggle.btn-whatsapp
{
color: #fff;
background-color: #3c983b;
border-color:
rgba(0,0,0,.2)
}
.btn-whatsapp.disabled,.btn-whatsapp.disabled.active,.btn-whatsapp.disabled:active,.btn-whatsapp.disabled:focus,.btn-whatsapp.disabled:hover,.btn-whatsapp[disabled],.btn-whatsapp[disabled].active,.btn-whatsapp[disabled]:active,.btn-whatsapp[disabled]:focus,.btn-whatsapp[disabled]:hover,fieldset[disabled]
.btn-whatsapp,fieldset[disabled] .btn-whatsapp.active,fieldset[disabled]
.btn-whatsapp:active,fieldset[disabled]
.btn-whatsapp:focus,fieldset[disabled] .btn-whatsapp:hover {
background-color: #04aa24;
border-color:
rgba(0,0,0,.2)
}
.btn-whatsapp .badge {
color: #04aa24;
background-color: #fff
}
.btn-yahoo {
color: #fff;
background-color: #720e9e;
border-color:
rgba(0,0,0,.2)
}
.btn-yahoo.active,.btn-yahoo:active,.btn-yahoo:focus,.btn-yahoo:hover,.open>.dropdown-toggle.btn-yahoo
{
color: #fff;
background-color: #500a6f;
border-color:
rgba(0,0,0,.2)
}
.btn-yahoo.disabled,.btn-yahoo.disabled.active,.btn-yahoo.disabled:active,.btn-yahoo.disabled:focus,.btn-yahoo.disabled:hover,.btn-yahoo[disabled],.btn-yahoo[disabled].active,.btn-yahoo[disabled]:active,.btn-yahoo[disabled]:focus,.btn-yahoo[disabled]:hover,fieldset[disabled]
.btn-yahoo,fieldset[disabled] .btn-yahoo.active,fieldset[disabled]
.btn-yahoo:active,fieldset[disabled] .btn-yahoo:focus,fieldset[disabled]
.btn-yahoo:hover {
background-color: #720e9e;
border-color:
rgba(0,0,0,.2)
}
.btn-yahoo .badge {
color: #720e9e;
background-color: #fff
}
/* -- */
/* EXTRAS */
/*
------------------------------- */
/* == margins == */
.ml0
{
margin-left: 0!important;
}
.mr0 {
margin-right:
0!important;
}
.mlr0 {
margin-left: 0!important;
margin-right:
0!important;
}
.mt0 {
margin-top: 0!important;
}
.mb0
{
margin-bottom: 0!important;
}
.mtb0 {
margin-top:
0!important;
margin-bottom: 0!important;
}
.ml5 {
margin-left:
5px!important;
}
.mr5 {
margin-right: 5px!important;
}
.mlr5
{
margin-left: 5px!important;
margin-right: 5px!important;
}
.mt5
{
margin-top: 5px!important;
}
.mb5 {
margin-bottom:
5px!important;
}
.mtb5 {
margin-top: 5px!important;
margin-bottom:
5px!important;
}
.ml10 {
margin-left: 10px!important;
}
.mr10
{
margin-right: 10px!important;
}
.mlr10 {
margin-left:
10px!important;
margin-right: 10px!important;
}
.mt10 {
margin-top:
10px!important;
}
.mb10 {
margin-bottom: 10px!important;
}
.mtb10
{
margin-top: 10px!important;
margin-bottom: 10px!important;
}
.ml15
{
margin-left: 15px!important;
}
.mr15 {
margin-right:
15px!important;
}
.mlr15 {
margin-left: 15px!important;
margin-right: 15px!important;
}
.mt15 {
margin-top:
15px!important;
}
.mb15 {
margin-bottom: 15px!important;
}
.mtb15
{
margin-top: 15px!important;
margin-bottom:
15px!important;
}
.ml20 {
margin-left: 20px!important;
}
.mr20
{
margin-right: 20px!important;
}
.mlr20 {
margin-left:
20px!important;
margin-right: 20px!important;
}
.mt20 {
margin-top:
20px!important;
}
.mb20 {
margin-bottom: 20px!important;
}
.mtb20
{
margin-top: 20px!important;
margin-bottom: 20px!important;
}
.ml25
{
margin-left: 25px!important;
}
.mr25 {
margin-right:
25px!important;
}
.mlr25 {
margin-left: 25px!important;
margin-right:
25px!important;
}
.mt25 {
margin-top: 25px!important;
}
.mb25
{
margin-bottom: 25px!important;
}
.mtb25 {
margin-top:
25px!important;
margin-bottom: 25px!important;
}
.ml30 {
margin-left:
30px!important;
}
.mr30 {
margin-right: 30px!important;
}
.mlr30
{
margin-left: 30px!important;
margin-right: 30px!important;
}
.mt30
{
margin-top: 30px!important;
}
.mb30 {
margin-bottom:
30px!important;
}
.mtb30 {
margin-top: 30px!important;
margin-bottom:
30px!important;
}
/* -- */
/* == paddings == */
.pl0
{
padding-left: 0px!important;
}
.pr0 {
padding-right:
0px!important;
}
.plr0 {
padding-left: 0px!important;
padding-right:
0px!important;
}
.pt0 {
padding-top: 0px!important;
}
.pb0
{
padding-bottom: 0px!important;
}
.ptb0 {
padding-top:
0px!important;
padding-bottom: 0px!important;
}
.pl5 {
padding-left:
5px!important;
}
.pr5 {
padding-right: 5px!important;
}
.plr5
{
padding-left: 5px!important;
padding-right: 5px!important;
}
.pt5
{
padding-top: 5px!important;
}
.pb5 {
padding-bottom:
5px!important;
}
.ptb5 {
padding-top: 5px!important;
padding-bottom:
5px!important;
}
.pl10 {
padding-left: 10px!important;
}
.pr10
{
padding-right: 10px!important;
}
.plr10 {
padding-left:
10px!important;
padding-right: 10px!important;
}
.pt10 {
padding-top:
10px!important;
}
.pb10 {
padding-bottom: 10px!important;
}
.ptb10
{
padding-top: 10px!important;
padding-bottom:
10px!important;
}
.pl15 {
padding-left: 15px!important;
}
.pr15
{
padding-right: 15px!important;
}
.plr15 {
padding-left:
15px!important;
padding-right: 15px!important;
}
.pt15 {
padding-top: 15px!important;
}
.pb15 {
padding-bottom:
15px!important;
}
.ptb15 {
padding-top: 15px!important;
padding-bottom: 15px!important;
}
.pl20 {
padding-left:
20px!important;
}
.pr20 {
padding-right: 20px!important;
}
.plr20
{
padding-left: 20px!important;
padding-right:
20px!important;
}
.pt20 {
padding-top: 20px!important;
}
.pb20
{
padding-bottom: 20px!important;
}
.ptb20 {
padding-top:
20px!important;
padding-bottom: 20px!important;
}
.pl25
{
padding-left: 25px!important;
}
.pr25 {
padding-right:
25px!important;
}
.plr25 {
padding-left:
25px!important;
padding-right: 25px!important;
}
.pt25 {
padding-top:
25px!important;
}
.pb25 {
padding-bottom: 25px!important;
}
.ptb25
{
padding-top: 25px!important;
padding-bottom:
25px!important;
}
.pl30 {
padding-left: 30px!important;
}
.pr30
{
padding-right: 30px!important;
}
.plr30 {
padding-left:
30px!important;
padding-right: 30px!important;
}
.pt30 {
padding-top:
30px!important;
}
.pb30 {
padding-bottom: 30px!important;
}
.ptb30
{
padding-top: 30px!important;
padding-bottom: 30px!important;
}
/*
-- */
/* == text == */
.text-link {
color:
var(--link-color);
}
.text-link:hover {
cursor:
pointer;
text-decoration: underline;
}
.text-underline:hover
{
cursor: pointer;
text-decoration: underline;
}
.text-active
{
color: #1e8bd2!important;
}
.text-readable {
font-size:
1.3em;
line-height: 1.8em;
}
.text-lg {
font-size:
1.3em;
}
.text-xlg {
font-size: 2.3em;
font-weight:
700;
}
.text-with-list ul {
list-style-type: disc;
padding-inline-start: 40px
}
.red {
color: red;
}
.green {
color:
green;
}
.yellow {
color: #ebba16;
}
/* -- */
/* == user-select ==
*/
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select:
none;
}
/* -- */
/* == cursor == */
.pointer {
cursor:
pointer;
}
/* -- */
/* == vertical-align == */
.vertical-align-top
{
vertical-align: top;
}
.vertical-align-middle {
vertical-align: middle;
}
.vertical-align-bottom {
vertical-align:
bottom;
}
/* -- */
/* == x == */
.x-notifier {
background:
#ffffcd!important;
}
body.night-mode .x-notifier {
background:
#000000!important;
}
.x-hidden {
display: none;
}
.x-blured {
overflow: hidden;
}
.x-blured .js_lightbox,
.x-blured .album-cover {
filter: blur(10px);
}
/* -- */
/* OFFCANVAS */
/*
------------------------------- */
@media (max-width: 767px)
{
.offcanvas {
position: relative;
overflow: hidden;
}
.offcanvas.active {
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.offcanvas .offcanvas-sidebar
{
position: absolute!important;
top: 0;
left: -80%;
width:
80%;
height: 100%;
z-index: 100;
-moz-transition: all 0.25s
ease-out;
transition: all 0.25s ease-out;
}
.offcanvas.active
.offcanvas-sidebar {
left: 0;
}
.offcanvas .offcanvas-mainbar
{
left: 0;
-moz-transition: all 0.25s ease-out;
transition: all
0.25s ease-out;
}
.offcanvas.active .offcanvas-mainbar {
left:
80%;
}
}