Файл: style/version/touch/style.css
Строк: 1384
/*
------------------
Стиль версии
Touch
------------------
*/
body {
font-family: 'Montserrat',
sans-serif;
font-size: 14px;
margin: auto;
color: #3C4549;
max-width: 650px;
background-color: #F7F8F8;
position:
relative;
}
body a{
text-decoration: none;
}
textarea {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
resize:
vertical;
}
/*-----Добавлено с версии
1.1.2------*/
.fa-heart {
display: inline-block;
transform-origin:
50% 50% 0;
vertical-align: middle;
line-height: 27px
!important;
}
.heartwrap span {
text-align:
center;
}
.heartwrap:hover > span i {
animation: 1500ms ease 0s
normal none 1 running pulse;
}
@keyframes pulse {
0% {
transform:
scaleX(1) scaleY(1);
}
10% {
transform: scaleX(0.60)
scaleY(0.60);
}
20% {
transform: scaleX(1) scaleY(1);
}
30% {
transform: scaleX(0.60) scaleY(0.60);
}
40% {
transform: scaleX(1)
scaleY(1);
}
50% {
transform: scaleX(0.60) scaleY(0.60);
}
60% {
transform: scaleX(1) scaleY(1);
}
70% {
transform: scaleX(0.60)
scaleY(0.60);
}
80% {
transform: scaleX(1) scaleY(1);
}
90% {
transform: scaleX(0.60) scaleY(0.60);
}
100% {
transform: scaleX(1)
scaleY(1);
}
}
.rating_progress {
position: absolute;
width:
160px;
z-index: 1;
top: 20%;
left: 115px;
transform:
translateY(-0%);
}
.rating_progress2 {
border-radius: 10px;
padding: 4px;
background-color: #3B3F44;
color: white;
font-size:
9px;
position: relative;
}
.rating_progress5 {
position:
absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.rating_progress6 {
background-color: #565D64;
border-radius:
10px;
width: 100%;
box-sizing: border-box;
}
.rating_progress3 {
background: linear-gradient(45deg, #FF6666, #00BCD4);
padding: 5px;
border-radius: 10px;
color: white;
font-size: 10px;
width: 100%;
box-sizing: border-box;
}
.rating_progress4 {
border-radius: 10px 10px 0 0;
padding: 0px;
background-color: #3B3F44;
color: white;
font-size: 10px;
width:
80px;
position: relative;
top: 1px;
font-size: 9px;
}
/*-----------------------------------*/
.list-menu-title {
background-color: #C4DAEC;
text-transform: uppercase;
font-weight:
bold;
color: #3E4C57;
}
button {
font-family: 'Montserrat',
sans-serif;
font-size: 14px;
}
.mail-list {
vertical-align: top;
width: 90%;
position: relative;
top: 3px;
left: 5px;
}
.mail-list-avatar {
vertical-align: top;
width: 20px;
}
.mail-mess-send {
margin-top: 5px;
background-color: #E3EDF1;
padding: 5px;
border-radius: 4px;
}
.mail-mess-send-o {
margin-top: 5px;
padding: 5px;
border-radius: 4px;
}
.mail-message-user {
text-align: left;
padding: 7px;
}
.mail-message-user-form {
max-width: 60%;
background-color:
#F0F1F1;
display: inline-block;
padding: 6px 1em;
border-radius:
13px;
margin: 2px;
text-align: left;
position: relative;
margin-left: 12px;
vertical-align: top;
}
.mail-message-avatar {
position: relative;
top: 7px;
}
.mail-message-eye {
position:
relative;
top: 5px;
margin: 5px;
}
.mail-message-user-form::after
{
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
border: 10px solid transparent;
border-right: 15px solid
#F0F1F1;
left: -18px;
top: 7px;
}
.mail-message-my {
text-align:
right;
padding: 7px;
}
.mail-message-my-form {
max-width: 60%;
background-color: #DDECF8;
display: inline-block;
padding: 6px 1.5em;
border-radius: 13px;
margin: 2px;
text-align: left;
position:
relative;
margin-right: 12px;
vertical-align: top;
}
.mail-message-my-form::after {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
border: 10px solid
transparent;
border-left: 15px solid #DDECF8;
right: -18px;
top:
7px;
}
.mail-time {
font-size: 10px;
color: #9AA2A8;
}
.left-optimize {
background-color: white;
box-shadow: 0 1px 4px
rgba(0, 0, 0, .2);
margin-bottom: 11px;
box-sizing: border-box;
overflow: hidden;
z-index: -1;
word-break: break-all;
}
.left-title
{
padding: 10px;
background-color: #E3E8EB;
text-transform:
uppercase;
font-weight: bold;
}
/*----Обновлено с
версии 1.1.2----*/
.file_body {
padding: 7px;
width: 100%;
z-index: 1;
box-sizing: border-box;
}
.file_body-fixed {
border:
2px #CFD8DC solid;
border-radius: 4px;
padding: 7px 0.7em;
background-color: white;
margin-bottom: 11px;
position: fixed;
width:
90%;
left: 50%;
bottom: 93px;
transform: translateX(-50%);
z-index: 1;
overflow: hidden;
width: 100vw;
max-width: 650px;
box-sizing: border-box;
}
.bb_body {
border: 2px #CFD8DC solid;
border-radius: 4px;
padding: 7px 0.7em;
background-color: white;
margin-bottom: 11px;
position: fixed;
width: 90%;
left: 50%;
bottom: 93px;
transform: translateX(-50%);
z-index: 999999999;
overflow: hidden;
width: 100vw;
color: white;
max-width: 650px;
align-items: center;
justify-content: center;
display: flex;
box-sizing: border-box;
}
.bb2 {
border: 1px #CFD8DC solid;
border-radius: 4px;
padding: 5px 0.7em;
margin: 2px;
background-color: white;
line-height: 18px;
color: #555A5C;
display:
inline-block;
}
.bb {
border: 1px #CFD8DC solid;
border-radius:
4px;
padding: 5px 0.7em;
margin: 2px;
background-color: white;
line-height: 18px;
color: #555A5C;
display: inline-block;
}
.smiles_body2 {
margin-bottom: 11px;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.smile-spis {
height:
120px;
border: 2px #7EA2BE solid;
background-color: white;
overflow:
auto;
}
.smile-optimize {
width: 14.2%;
height: 40px;
text-align: center;
overflow: hidden;
display: inline-block;
position: relative;
margin-bottom: -4px;
color: #C6D7E4;
}
._smile
{
position: absolute;
left: 50%;
top: 50%;
transform:
translate(-50%, -50%);
}
.smile-optimize:hover {
box-shadow: inset
0px 0px 20px rgba(0,0,0,0.4);
}
/*----Обновлено с
версии 1.1.2----*/
.smiles_body-fixed {
margin-bottom: 11px;
border-radius: 4px;
overflow: hidden;
position: fixed;
width: 98%;
left: 50%;
bottom: 93px;
transform: translateX(-50%);
z-index:
999999999;
width: 100vw;
max-width: 650px;
}
.smiles_body {
margin-bottom: 11px;
border-radius: 4px;
overflow: hidden;
position:
relative;
width: 100%;
box-sizing: border-box;
}
.smiles_section_optimize {
background-color: #7EA2BE;
}
/*--------------------------------*/
.files-wrapper {
display: block;
width: 50%;
float: left;
}
.__files {
display: block;
border: 1px #E0E7EB solid;
border-radius: 4px;
position: relative;
background: #fff;
margin: 4px;
color: #474747;
z-index: 0;
height: 160px;
overflow: hidden;
}
@media only screen
and (min-width: 420px) {
.files-wrapper {
width:
33.333%;
}
.__files {
height: 180px;
}
}
.__files:hover {
background: #F0F5F8;
}
.files-body {
list-style: none;
padding: 0;
box-sizing: border-box;
margin: 3px;
}
.files-like_ {
background: rgba(50, 50, 50, 0.8);
color: white;
padding: 5px 0.7em;
text-align: center;
position: absolute;
top: 0;
right: 0;
border-radius: 0 4px 0 4px;
font-size: 13px;
}
.files-or-dir {
font-size: 13px;
background: rgba(50, 50, 50,
0.8);
color: white;
padding: 5px 0.7em;
text-align: center;
position: absolute;
top: 0;
left: 0;
border-radius: 4px 0 4px 0;
}
.files-or-dir-text {
background: rgba(50, 50, 50, 0.8);
color:
white;
padding: 5px;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-radius: 0 0 4px 4px;
}
.files-folder {
color: #666C70;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
text-align: center;
width: 100%;
}
.files-folder-status {
position: absolute;
left:
50%;
transform: translate(-50%, -40%);
top: 40%;
text-align:
center;
width: 100%;
color: #3B3E41;
}
.menu-list-text-main {
overflow: hidden;
position: absolute;
bottom: 9px;
left: 50%;
transform: translateX(-50%);
font-size: 13px;
font-weight: bold;
color: #3A474C;
width: 100%;
text-align:
center;
}
.menu-list-count-main {
overflow: hidden;
background-color: #7A888D;
padding: 0 0.8em;
height: 16px;
line-height: 16px;
text-align: center;
position: absolute;
top:
65px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
font-weight: bold;
color: white;
border-radius:
5px;
}
.menu-icons-main {
overflow: hidden;
text-align: center;
line-height: 63px;
width: 63px;
height: 63px;
color: white;
display: inline-block;
border-radius: 100%;
position: absolute;
top:
26%;
left: 50%;
transform: translate(-50%, -26%);
}
/*-------Обновлено с версии
1.1.3-------*/
.main-wrapper {
display: block;
width: 33.333%;
float: left;
}
@media (max-width: 350px) {
.main-wrapper {
width: 50%;
}
}
/*--------------------------------------*/
.main2 {
display: block;
border: 1px #E0E7EB solid;
border-radius: 4px;
position: relative;
background: #fff;
margin:
4px;
color: #474747;
z-index: 0;
height: 110px;
overflow: hidden;
}
.main2:hover {
background: #F0F5F8;
}
.main-body
{
list-style: none;
padding: 0;
box-sizing: border-box;
margin:
3px;
}
.input-tumb {
display: none;
}
scrollbar {
width:
1px;
height: 8px;
}
scrollbar-track {
background-color: white;
border-top: 1px #EAEDEE solid;
}
scrollbar-thumb {
background-color: #6F889C;
border-radius: 5px;
}
::-webkit-scrollbar {
width: 1px;
height: 8px;
}
::-webkit-scrollbar-track {
background-color: white;
border-top: 1px #EAEDEE solid;
}
::-webkit-scrollbar-thumb {
background-color: #6F889C;
border-radius: 5px;
}
.tumb {
position: relative;
display:
inline-block;
width: 45px;
height: 24px;
cursor: pointer;
border-radius: 1.5em;
transition: 350ms;
background:
linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)), #ddd;
box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em
-0.01em rgba(255, 255, 255, 0.7);
}
.tumb::after {
position:
absolute;
content: '';
width: 18px;
height: 18px;
top: 2.5px;
left: 3px;
border-radius: 50%;
transition: 250ms ease-in-out;
background: white;
}
.tumb::before {
position: absolute;
content: '';
width: 38px;
height: 18px;
top: 3px;
left: 4px;
border-radius: 0.75em;
transition: 250ms ease-in-out;
background-color:
#B4C1CA;
}
.input-tumb:checked + .tumb::before {
background-color: #15C51D;
}
.input-tumb:checked + .tumb::after {
left: 24px;
}
.tumb2 {
position: relative;
display:
inline-block;
width: 45px;
height: 24px;
cursor: pointer;
border-radius: 1.5em;
transition: 350ms;
background:
linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)), #ddd;
box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em
-0.01em rgba(255, 255, 255, 0.7);
}
.tumb2::after {
position:
absolute;
content: '';
width: 18px;
height: 18px;
top: 2.5px;
right: 3px;
border-radius: 50%;
transition: 250ms ease-in-out;
background: white;
}
.tumb2::before {
position: absolute;
content: '';
width: 38px;
height: 18px;
top: 3px;
right: 4px;
border-radius: 0.75em;
transition: 250ms ease-in-out;
background-color:
#15C51D;
}
.input-tumb:checked + .tumb2::before {
background-color: #B4C1CA;
}
.input-tumb:checked + .tumb2::after {
right: 24px;
}
.menu-list-all {
height: 75px;
width: 75px;
line-height: 75px;
background-color: #DFE8EC;
border-radius: 4px;
max-width: 75px;
margin: 1px;
margin-right: 5px;
display:
inline-block;
vertical-align: top;
text-align: center;
}
.us-info
{
width: 89%;
vertical-align: middle;
position: relative;
left: 4px;
}
.us-avatar {
width: 30px;
vertical-align: top;
text-align: center;
}
.h1 {
padding: 7px 0.8em;
margin: 2px;
line-height: 18px;
color: #546E7A;
display: inline-block;
}
.h {
border-bottom: 3px solid #28B82D;
}
.menu-list-count {
overflow:
hidden;
background-color: #7A888D;
padding: 0 0.6em;
height: 16px;
line-height: 16px;
text-align: center;
position: absolute;
top:
52px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
font-weight: bold;
color: white;
border-radius:
5px;
}
.menu-list-text {
overflow: hidden;
position: absolute;
bottom: 2.5px;
left: 50%;
transform: translateX(-50%);
font-size:
12px;
font-weight: bold;
color: #3A474C;
}
.menu-list-optimize {
/*overflow-x: scroll;*/
overflow-x: auto;
padding: 5px;
white-space:
nowrap;
}
.menu-list {
overflow: hidden;
width: 90px;
height: 90px;
display: inline-block;
margin-bottom: -4px;
position:
relative;
}
.menu-icons-small {
overflow: hidden;
text-align:
center;
line-height: 26px;
width: 26px;
height: 26px;
color:
white;
border-radius: 100%;
display: inline-block;
margin-bottom:
-8px;
}
.menu-icons-optimize {
display: inline-block;
vertical-align: middle;
position: relative;
left: 5px;
}
.menu-icons
{
overflow: hidden;
text-align: center;
line-height: 55px;
width: 55px;
height: 55px;
color: white;
display: inline-block;
border-radius: 100%;
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
}
.count-panel-bottom {
background-color: red;
font-size: 11px;
padding: 0px 0.5em;
line-height: 16px;
border-radius: 10px;
display: inline-block;
color:
white;
position: absolute;
right: 9px;
top: 0;
z-index: 1;
border: 1px white solid;
}
.count-notif {
background-color: red;
color: white;
font-size: 10px;
padding: 1px 0.5em;
border-radius:
5px;
}
.icons-notif {
width: 20px;
height: 20px;
text-align:
center;
line-height: 20px;
border-radius: 100%;
border: 2px white
solid;
position: absolute;
bottom: -20px;
right: -1px;
color:
white;
}
.notif-info {
width: 100%;
vertical-align: top;
position: relative;
top: 4px;
left: 4px;
}
.notif-avatar {
width: 25px;
vertical-align: top;
text-align:
center;
}
.avatar-choose {
top: 2px;
right: 2px;
color: white;
z-index: 1;
position: absolute;
background-color: #39CF3F;
line-height: 33px;
width: 33px;
height: 33px;
border-radius: 100%;
text-align: center;
}
.avatar-choose:hover {
background-color:
#36AD3A;
}
.photos-wrapper-avatar {
display: inline-block;
width: 50%;
}
.photos-avatar {
display: block;
border: 1px
#E0E7EB solid;
border-radius: 4px;
position: relative;
background:
#fff;
margin: 4px;
color: #474747;
z-index: 0;
height: 100px;
overflow: hidden;
}
.photos-avatar:hover {
background:
#F0F5F8;
}
.photos-body-avatar {
list-style: none;
padding:
0;
box-sizing: border-box;
margin: 3px;
}
.avatar {
position:
relative;
bottom: 1px;
display: inline-block;
vertical-align:
middle;
font-weight: bold;
color: white;
text-align: center;
overflow: hidden;
border-radius: 50%;
text-transform:
uppercase;
}
.tmenu_body {
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
margin-bottom: 11px;
text-align: center;
}
.tmenu-50-o::after {
content: '';
display: block;
position: absolute;
transform:
translateX(-50%);
width: 0;
height: 0;
left: 50%;
border-left:
10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #28B82D;
}
.tmenu-50 {
position: relative;
display: inline-block;
height: 40px;
line-height: 40px;
background-color: white;
word-break: break-all;
width: 49.5%;
background-color: white;
text-transform: uppercase;
font-weight: bold;
color: #49555F;
border-left: 1px #E0E6EB solid;
}
.tmenu-50:hover {
background-color: #DAFFDC;
}
.tmenu-33-o::after {
content: '';
display: block;
position: absolute;
transform: translateX(-50%);
width: 0;
height: 0;
left: 50%;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid
#28B82D;
}
.tmenu-33 {
position: relative;
display: inline-block;
height: 40px;
line-height: 40px;
background-color: white;
word-break:
break-all;
width: 33%;
background-color: white;
text-transform:
uppercase;
font-weight: bold;
color: #49555F;
border-left: 1px
#E0E6EB solid;
}
.tmenu-33:hover {
background-color:
#DAFFDC;
}
.comments-reply-user {
font-size: 12px;
margin-bottom:
5px;
color: #6E7479;
}
.comments-reply {
padding: 7px;
margin:
4px;
background-color: #EFF2F5;
border-radius: 4px;
}
.comment-like
{
color: #8897A3;
float: right;
position: relative;
top: 2px;
font-size: 13px;
font-weight: bold;
}
.comments-reply-no {
color:
#E28781;
}
.comments-info {
width: 100%;
vertical-align: top;
position: relative;
top: 4px;
left: 4px;
}
.comments-optimize {
padding: 4px;
position: relative;
}
.comments-avatar {
width:
25px;
vertical-align: top;
}
.time {
font-size: 12px;
color:
#75848B;
}
/*----Обновлено с версии
1.1.2----*/
.btn-send {
width: 39px;
height: 39px;
line-height:
39px;
position: relative;
left: 3px;
display: inline-block;
color:
white;
border-radius: 100%;
border: none;
background-color:
#68996A;
}
.btn-send-fixed {
width: 39px;
height: 39px;
line-height: 39px;
color: white;
border-radius: 100%;
border:
none;
background-color: #68996A;
}
.panel-bottom-comments-send {
text-align: center;
display: inline-block;
width:
12%;
}
.panel-bottom-comments-bb-files {
width: 12%;
display:
inline-block;
text-align: center;
font-size: 19px;
vertical-align:
top;
box-sizing: border-box;
position: relative;
top:
2px;
}
.panel-bottom-comments-text-form {
font-size: 14px;
position: relative;
border: none;
top: 3px;
width: 100%;
vertical-align: middle;
resize: none;
overflow:
auto;
}
.panel-bottom-comments-text {
width: 64%;
display:
inline-block;
text-align: center;
box-sizing:
border-box;
}
.panel-bottom-comments-smiles {
width: 12%;
display: inline-block;
text-align: left;
font-size: 24px;
vertical-align: top;
box-sizing: border-box;
position: relative;
right: 0px;
}
.panel-bottom-comments {
overflow: hidden;
vertical-align: top;
padding: 3px;
background-color: white;
display: inline-block;
border: 2px #D6D6D6 solid;
width: 86%;
border-radius: 30px;
box-sizing:
border-box;
}
.panel-bottom-comments-optimize-fixed {
box-sizing:
border-box;
max-width: 650px;
z-index: 2;
position: fixed;
bottom: 56px;
width: 100vw;
align-items: center;
justify-content:
center;
display: flex;
left: 50%;
transform: translateX(-50%);
}
.panel-bottom-comments-optimize {
box-sizing: border-box;
z-index: 2;
text-align:
center;
}
/*----------------------------*/
.panel-bottom-title {
font-size: 10px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.panel-bottom-optimize {
background-color: #F9FCFD;
position: fixed;
bottom: 0;
width: 100vw;
color: #616A6F;
max-width: 650px;
align-items: center;
justify-content: center;
display: flex;
z-index: 2;
border-top: 1px
#D6D6D6 solid;
border-left: 1px #D6D6D6 solid;
border-right: 1px
#D6D6D6 solid;
}
.panel-bottom-user {
display: inline-block;
width: 25%;
height: 50px;
line-height: 22px;
color: #616A6F;
position: relative;
text-align: center;
}
.panel-bottom-user:hover {
box-shadow: inset 0px 0px 20px rgba(0,0,0,0.2);
}
.opacity_message {
border-top: 8px solid transparent;
box-shadow: 0 0 8px rgba(255, 255,
255, 0.5);
background-color: rgba(255, 255, 255, 0.5);
width: 100%;
bottom: 30px;
padding: 3px;
position: absolute;
}
.chevron {
text-align: center;
font-size: 18px;
color: #616A6F;
}
.icons {
color: #616A6F;
}
.btn-size-photo {
background-color:
rgba(0,0,0,0.6);
position: absolute;
top: 0;
left: 50%;
color:
white;
padding: 5px 2.5em;
text-align: center;
border-radius: 0 0
14px 14px;
z-index: 1;
border-left: 2px white solid;
border-right:
2px white solid;
border-bottom: 2px white solid;
transform:
translateX(-50%);
}
.btn-request-likes-photo {
background-color:
rgba(0,0,0,0.6);
position: absolute;
top: 10px;
right: 10px;
color:
white;
width: 36px;
height: 36px;
line-height: 36px;
text-align:
center;
border-radius: 100%;
z-index: 1;
border: 2px white
solid;
}
.btn-request-likes-photo:hover {
background-color:
rgba(0,0,0,0.8);
}
.td-file2 {
vertical-align: top;
position:
relative;
top: 2px;
left: 3px;
word-break: break-all;
overflow:
hidden;
}
.td-file {
width: 60px;
vertical-align: top;
position: relative;
text-align: center;
}
.photos-wrapper {
display: block;
width: 50%;
float: left;
}
.photos {
display: block;
border: 1px #E0E7EB solid;
border-radius: 4px;
position: relative;
background: #fff;
margin: 4px;
color: #474747;
z-index: 0;
height: 160px;
overflow: hidden;
}
@media only screen
and (min-width: 420px) {
.photos-wrapper {
width:
33.333%;
}
.photos {
height: 180px;
}
}
.photos:hover {
background: #F0F5F8;
}
.photos-body {
list-style: none;
padding: 0;
box-sizing: border-box;
margin: 3px;
}
.photos-like_ {
background: rgba(50, 50, 50, 0.8);
color:
white;
padding: 5px 0.7em;
text-align: center;
position: absolute;
top: 0;
right: 0;
border-radius: 0 4px 0 4px;
font-size: 13px;
}
.photos-or-dir {
font-size: 13px;
background: rgba(50, 50, 50,
0.8);
color: white;
padding: 5px 0.7em;
text-align: center;
position: absolute;
top: 0;
left: 0;
border-radius: 4px 0 4px 0;
}
.photos-or-dir-text {
background: rgba(50, 50, 50, 0.8);
color:
white;
padding: 5px;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-radius: 0 0 4px 4px;
}
.photos-folder {
color: #666C70;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
text-align: center;
width: 100%;
}
.photos-folder-status {
position: absolute;
left: 50%;
transform: translate(-50%, -40%);
top: 40%;
text-align:
center;
width: 100%;
color: #3B3E41;
}
.proccess-load {
padding: 3px;
-webkit-transition: width .4s ease-in-out;
-moz-transition: width .4s ease-in-out;
-ms-transition: width .4s
ease-in-out;
-o-transition: width .4s ease-in-out;
transition: width
.4s ease-in-out;
}
.animate-load .proccess-load {
background-color: #B1D6B3;
}
.stripes-load .proccess-load{
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
background-size: 30px 30px;
background-image: -webkit-gradient(linear,
left top, right bottom,
color-stop(.25, rgba(255, 255, 255, 1.10)),
color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5,
rgba(255, 255, 255, 1.10)),
color-stop(.75, rgba(255, 255, 255,
1.10)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 1.10)
25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, 1.10) 50%,
rgba(255, 255, 255, 1.10) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 1.10)
25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, 1.10) 50%,
rgba(255, 255, 255, 1.10) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, 1.10)
25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, 1.10) 50%,
rgba(255, 255, 255, 1.10) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, 1.10) 25%,
transparent 25%,
transparent 50%, rgba(255, 255, 255, 1.10) 50%,
rgba(255, 255, 255, 1.10) 75%,
transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, 1.10) 25%,
transparent 25%,
transparent 50%, rgba(255, 255, 255, 1.10) 50%,
rgba(255, 255, 255, 1.10) 75%,
transparent 75%, transparent);
-webkit-animation: animate-stripes 3s linear infinite;
-moz-animation:
animate-stripes 3s linear infinite;
}
@-webkit-keyframes
animate-stripes {
0% {background-position: 0 0;} 100%
{background-position: 60px 0;}
}
@-moz-keyframes animate-stripes {
0% {background-position: 0 0;} 100% {background-position: 60px
0;}
}
.btn-avatar {
background-color: #577CA5;
position:
absolute;
bottom: -45px;
right: -5px;
color: white;
width: 28px;
height: 28px;
line-height: 28px;
text-align: center;
border-radius:
100%;
border: 3px white solid;
vertical-align:
center;
}
.btn-avatar:hover {
box-shadow: inset 0px 0px 20px
rgba(0,0,0,0.3);
}
.status {
position: relative;
background-color:
#E5EDF5;
padding: 8px;
color: #222;
border-radius: 3px;
margin: 8px;
color: #696E74;
font-size: 12px;
}
.status::after {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
border:
10px solid transparent;
border-bottom: 11px solid #E5EDF5;
left: 50px;
top: -18px;
}
.login-info {
position: relative;
left: 28px;
font-size: 17px;
padding: 5px;
width: 270px;
}
.img {
border:
1px #EAEFF5 solid;
padding: 3px;
border-radius:
4px;
}
.file-upload-progress {
margin-top: 12px;
border-radius:
4px;
background-color: white;
color: #596066;
padding: 10px;
font-size: 13px;
border: 1px #EAEFF5
solid;
}
.file-upload-progress-ind-green {
border-radius: 2px;
background: #4BBB62;
color: white;
font-size: 12px;
height: 15px;
line-height: 15px;
box-sizing: border-box;
font-weight:
bold;
}
.file-upload-progress-ind {
border-radius: 2px;
background-color: #78A2CC;
color: white;
font-size: 12px;
padding:
2px;
font-weight: bold;
height: 15px;
line-height: 15px;
box-sizing: border-box;
}
.file-upload-progress-ind-o {
border-radius:
2px;
background-color: #D2DCE6;
position: relative;
text-align:
center;
}
.file-upload-progress-pr {
top: 50%;
left: 0;
right:
0;
position: absolute;
transform: translateY(-50%);
}
.count {
background-color: #AAB6C2;
font-size: 11px;
padding: 0px 0.8em;
line-height: 20px;
border-radius: 10px;
display: inline-block;
color:
white;
}
.btn-modal-close {
text-align: center;
color: #73777C;
padding: 1px 0.1em;
background-color: #fff;
line-height: 25px;
height: 25px;
display: inline-block;
border-radius: 4px;
border: 1px
#C2C5C9 solid;
position: relative;
float: right;
}
.btn-modal-close:hover {
background-color: #F3F3F3;
}
.btn-screensaver {
background-color: rgba(0,0,0,0.6);
position:
absolute;
top: 12px;
right: 12px;
color: white;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius:
100%;
}
.btn-screensaver:hover {
background-color: rgba(0,0,0,0.8);
}
.file-upload {
border-radius: 2px;
background: #45565E;
color: #CFD8DC;
text-align: center;
padding: 9px
1.2em;
}
.file-label{
line-height: 2.7;
}
.file-upload:hover {
background: #344046;
}
.file-form {
display: none;
}
.form-control-100:focus {
border: 3px #9CDD9F solid;
background-color: #EEFDEE;
}
.form-control-95:focus {
border: 3px
#9CDD9F solid;
background-color: #EEFDEE;
}
.form-control-50:focus {
border: 3px #9CDD9F solid;
background-color: #EEFDEE;
}
.form-control-30:focus {
border: 3px #9CDD9F solid;
background-color: #EEFDEE;
}
.form-control-20:focus {
border: 3px
#9CDD9F solid;
background-color: #EEFDEE;
}
.time_loading {
position: absolute;
top: 0;
z-index: 3;
left: 0;
right: 0;
top:
0;
background-color: #52AAF0;
color: white;
-webkit-animation:
err_msg 600ms;
animation: err_msg 600ms;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
text-align: center;
}
.error_loading {
position: absolute;
top: 0;
z-index: 3;
left:
0;
right: 0;
top: 0;
background-color: #F86E5B;
color: white;
-webkit-animation: err_msg 600ms;
animation: err_msg 600ms;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
text-align: center;
}
@keyframes err_msg {
from {
height:
0;
}
to {
height: 18px;
padding: 5px;
}
}
.optimize {
padding: 7px;
}
.captcha {
background-color:
#FCE6DF;
padding: 5px 1em;
margin: 3px;
line-height: 20px;
}
.overlay {
z-index: 10;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 40px;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.75);
opacity: 0;
pointer-events:
none;
transition: 0.5s ease-in-out;
max-height: 100vh;
overflow-y:
auto;
}
.overlay.open {
opacity: 1;
pointer-events: inherit;
}
.form-control-select {
padding: 9px;
width: 50%;
border-radius: 4px;
border: 1px #CFD7DD solid;
-webkit-box-sizing:
border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
}
.form-control-95 {
padding: 9px;
width: 95%;
border-radius: 4px;
border: 1px #CFD7DD solid;
-webkit-box-sizing:
border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
}
.form-control-page {
padding: 6px;
width:
100px;
border-radius: 4px;
border: 1px #CFD7DD solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
}
.form-control-100 {
padding: 9px;
width: 100%;
border-radius: 4px;
border: 1px #CFD7DD
solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
}
.form-control-30 {
padding: 9px;
width: 30%;
border-radius: 4px;
border: 1px #CFD7DD
solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
}
.modal {
position:
fixed;
top: 15%;
left: 50%;
transform: translateX(-50%);
background: white;
box-shadow: 0px 1px 10px rgba(255, 255, 255, 0.35);
opacity: 0;
width: 270px;
height: 370px;
pointer-events: none;
transition: 0.5s ease-in-out;
max-height: 100vh;
z-index: 99999;
/*max-width: 100vh;*/
}
.modal-optimize {
width: 270px;
height:
315px;
overflow-y: auto;
box-sizing: border-box;
}
.modal-title {
border-bottom: 1px #E2E8EC solid;
background-color: #E7EAEE;
padding: 8px;
color: #3F4549;
position: relative;
box-sizing:
border-box;
overflow: hidden;
font-size: 20px;
}
.btn-registration
{
text-align: center;
color: white;
background-color: #68996A;
padding: 0px;
height: 37px;
line-height: 37px;
border-radius: 4px;
width: 100%;
border: none;
display: block;
-webkit-box-sizing:
border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn-registration:hover {
box-shadow: inset 0px 0px 20px
rgba(0,0,0,0.4);
}
.btn-login {
text-align: center;
color: white;
background-color: #577CA5;
padding: 10px;
border-radius: 4px;
width:
100%;
border: none;
font-size: 14px;
margin-bottom: 17px;
}
.btn-login:hover {
box-shadow: inset 0px 0px 20px rgba(0,0,0,0.4);
}
.btn-page {
text-align: center;
color: #fff;
padding: 0 1.1em;
background-color: #68996A;
line-height: 30px;
height: 30px;
display:
inline-block;
border-radius: 4px;
border: none;
margin-top: 5px;
margin-left: 2px;
}
.btn-page:hover {
box-shadow: inset 0px 0px 20px
rgba(0,0,0,0.4);
}
.btn-page-o {
text-align: center;
color: #fff;
padding: 0 1.1em;
background-color: #fff;
line-height: 28.95px;
height: 28.95px;
display: inline-block;
border-radius: 4px;
margin-top: 5px;
margin-left: 2px;
border: 1px #C2C5C9 solid;
font-weight: bold;
color: black;
}
.btn-o {
text-align: center;
color: #73777C;
padding: 2.1px 1.2em;
background-color: #fff;
line-height: 25px;
height: 25px;
display: inline-block;
border-radius: 4px;
border: 1px #C2C5C9 solid;
margin: 2px;
}
.btn-o:hover {
background-color: #F3F3F3;
}
.btn-big {
text-align: center;
color: #fff;
padding: 0 1.5em;
background-color:
#68996A;
line-height: 35px;
height: 35px;
display: inline-block;
border-radius: 4px;
border: none;
}
.btn-big:hover {
box-shadow:
inset 0px 0px 20px rgba(0,0,0,0.4);
}
.btn {
text-align: center;
color: #fff;
padding: 3px 1.2em;
background-color: #68996A;
line-height: 25px;
height: 25px;
display: inline-block;
border-radius: 4px;
margin: 2px;
}
.btn:hover {
box-shadow: inset
0px 0px 20px rgba(0,0,0,0.4);
}
.overlay .modal.open {
opacity:
1;
pointer-events: inherit;
}
.hover{}
.hover:hover {
background-color: #DEEAF1;
}
.list {
box-shadow: 0 1px 4px rgba(0,
0, 0, .2);
margin-bottom: 11px;
background-color: white;
box-sizing:
border-box;
overflow: hidden;
z-index: -1;
padding: 10px;
box-sizing: border-box;
overflow-wrap: normal;
word-break: normal;
line-break: auto;
hyphens: manual;
word-wrap:
break-word;
}
.list-body {
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
margin-bottom: 11px;
background-color: white;
box-sizing: border-box;
overflow: hidden;
z-index: -1;
overflow-wrap: normal;
word-break:
normal;
line-break: auto;
hyphens: manual;
word-wrap:
break-word;
}
.list-menu {
border-top: 1px #E2E8EC solid;
padding:
10px;
color: #3F4549;
box-sizing: border-box;
overflow: hidden;
position: relative;
top: -1px;
bottom: -1px;
overflow-wrap: normal;
word-break: normal;
line-break: auto;
hyphens: manual;
word-wrap:
break-word;
}
a{
color: #5986AA;
}
.list-menu + .list-menu
{margin: -1px 0;}
.success {
background-color: #84C087;
padding:
10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
color: white;
margin-bottom: 11px;
text-align: center;
}
.error {
background-color: #ECA49D;
padding: 10px;
box-shadow: 0 1px 4px rgba(0,
0, 0, .2);
color: white;
margin-bottom: 11px;
text-align: center;
}
.title {
background-color: white;
padding: 12px;
box-shadow: 0
1px 4px rgba(0, 0, 0, .2);
}
.navigation {
background-color:
white;
padding: 7px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
color:
#777A7C;
margin-bottom: 11px;
position: relative;
}
.nav-optimize
{
top: 50%;
left: 0;
right: 0;
bottom: 0;
position: absolute;
}
.navigation a {
color: #7696AF;
}
.navigation a:hover {
color: #4E6F8A;
}
.panel-top-optimize {
background-color:
#577CA5;
position: fixed;
top: 0;
width: 100vw;
color: white;
max-width: 650px;
align-items: center;
justify-content: center;
display: flex;
z-index: 101;
}
.panel-top {
display:
inline-block;
width: 19%;
text-align: center;
height: 51px;
line-height: 51px;
}
.panel-top:hover {
box-shadow: inset 0px 0px
20px rgba(0,0,0,0.3);
}
.panel-top-center {
display: inline-block;
width: 62%;
text-align: center;
height: 51px;
line-height:
51px;
}
.panel-top-optimize a{
color: white;
}
.bar-progress_num1
{
height: 4px;
display: block;
background-color: #72E477;
-webkit-animation: progressbar_num1 700ms;
animation: progressbar_num1
700ms;
animation-iteration-count: 1;
-webkit-animation-iteration-count:
1;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
@-webkit-keyframes progressbar_num1 {
from {
width: 0;
}
to {
width: 50%;
}
}
@keyframes progressbar_num1 {
from
{
width: 0;
}
to {
width: 50%;
}
}
.bar-progress_num2 {
height: 4px;
display: block;
background-color: #72E477;
-webkit-animation: progressbar_num2 700ms;
animation: progressbar_num2 700ms;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
@-webkit-keyframes
progressbar_num2 {
from {
width: 50%;
}
to {
width: 100%;
}
}
@keyframes progressbar_num2 {
from
{
width: 50%;
}
to {
width: 100%;
}
}
.indicator_loading {
position: absolute;
top: 0;
z-index: 4;
left: 0;
right: 0;
top: 0;
}
.foot {
padding: 10px;
text-align: center;
margin-top: -7px;
color: #777C80;
}
.foot a{
color: #5986AA;
}
.custom-checkbox>input {
position: absolute;
z-index: -1;
opacity: 0;
}
.custom-checkbox>span {
display:
inline-flex;
align-items: center;
user-select:
none;
}
.custom-checkbox>span::before {
content: '';
display:
inline-block;
width: 1em;
height: 1em;
flex-shrink: 0;
flex-grow:
0;
border: 1px solid #adb5bd;
border-radius: 0.25em;
margin-right:
0.5em;
background-repeat: no-repeat;
background-position: center
center;
background-size: 50%
50%;
}
.custom-checkbox>input:not(:disabled):not(:checked)+span:hover::before
{
border-color:
#b3d7ff;
}
.custom-checkbox>input:not(:disabled):active+span::before {
background-color: #b3d7ff;
border-color:
#b3d7ff;
}
.custom-checkbox>input:focus+span::before {
box-shadow: 0
0 0 0.2rem rgba(0, 123, 255,
0.25);
}
.custom-checkbox>input:focus:not(:checked)+span::before {
border-color: #80bdff;
}
.custom-checkbox>input:checked+span::before {
border-color: #0b76ef;
background-color: #0b76ef;
background-image:
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59
3.612-1.538-1.55L0 4.26 2.974 7.25 8
2.193z'/%3e%3c/svg%3e");
}
.custom-checkbox>input:disabled+span::before
{
background-color: #e9ecef;
}
.custom-radio>input {
position:
absolute;
z-index: -1;
opacity: 0;
}
.custom-radio>span {
display: inline-flex;
align-items: center;
user-select:
none;
}
.custom-radio>span::before {
content: '';
display:
inline-block;
width: 1em;
height: 1em;
flex-shrink: 0;
flex-grow:
0;
border: 1px solid #adb5bd;
border-radius: 50%;
margin-right:
0.5em;
background-repeat: no-repeat;
background-position: center
center;
background-size: 50%
50%;
}
.custom-radio>input:not(:disabled):not(:checked)+span:hover::before
{
border-color:
#b3d7ff;
}
.custom-radio>input:not(:disabled):active+span::before {
background-color: #b3d7ff;
border-color:
#b3d7ff;
}
.custom-radio>input:focus+span::before {
box-shadow: 0 0 0
0.2rem rgba(0, 123, 255,
0.25);
}
.custom-radio>input:focus:not(:checked)+span::before {
border-color: #80bdff;
}
.custom-radio>input:checked+span::before {
border-color: #0b76ef;
background-color: #0b76ef;
background-image:
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'
viewBox='-4 -4 8 8'%3e%3ccircle r='3'
fill='%23fff'/%3e%3c/svg%3e");
}
.custom-radio>input:disabled+span::before
{
background-color: #e9ecef;
}
/*-----Добавлено с версии
1.1.3------*/
.online {
padding: 5px;
text-align: center;
background-color: #C8DAE9;
}
.onlineg {
padding: 5px 0.8em;
text-align: center;
display: inline-block;
border: 1px #99B6CE solid;
border-radius: 4px;
background-color: white;
color: black;
font-size:
13px;
}
/*------------------------------------*/