Файл: style/panel/version/touch/style.css
Строк: 776
/*
----------------------------------------
Стиль версии Touch
для панели
управления
----------------------------------------
*/
body {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
margin:
auto;
color: #CFD8DC;
max-width: 650px;
background-color: #2F3238;
position: relative;
}
body a{
text-decoration: none;
}
a{
color: #F7F0B4;
}
.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;
}
.form-control-page {
padding:
6px;
width: 100px;
border-radius: 4px;
-webkit-box-sizing:
border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
background-color: #3C3E41;
box-sizing: border-box;
border: 1px #46494D solid;
color: #CFD8DC;
}
.btn-page {
text-align:
center;
color: #fff;
padding: 0 1.1em;
background-color: #4B5055;
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: #5D6166;
line-height: 28.95px;
height:
28.95px;
display: inline-block;
border-radius: 4px;
margin-top: 5px;
margin-left: 2px;
font-weight: bold;
color: white;
}
.btn-modal-close {
text-align: center;
padding: 1px 0.1em;
background-color: #50545A;
line-height: 25px;
height: 25px;
display:
inline-block;
border-radius: 4px;
border: 1px #6F7379 solid;
position: relative;
float: right;
}
.btn-modal-close:hover {
background-color: #3A3D41;
}
.modal-title {
border-bottom: 1px
#6F7379 solid;
background-color: #242729;
padding: 8px;
position:
relative;
box-sizing: border-box;
overflow: hidden;
font-size:
20px;
}
.content-center-fixed {
position: relative;
}
.content-center {
display: inline-block;
box-sizing: border-box;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
overflow: hidden;
border-radius: 4px;
margin: 15px;
}
.content-center2 {
box-sizing: border-box;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
overflow: hidden;
margin: 15px;
}
.list-title {
color: #CFD8DC;
background-color: #242729;
padding: 12px;
margin-bottom: -1px;
text-transform: uppercase;
}
.list {
color: #CFD8DC;
background-color: #323638;
padding: 11px;
border-top: 1px #464C4E
solid;
border-bottom: 1px #26292A solid;
}
.count {
background-color: #556679;
font-size: 11px;
padding: 0px 0.8em;
line-height: 20px;
border-radius: 10px;
display: inline-block;
}
.count2 {
background-color: #556679;
padding: 2px 0.8em;
line-height: 20px;
border-radius: 10px;
}
.td-file2 {
vertical-align: top;
position: relative;
top: 2px;
word-break:
break-all;
overflow: hidden;
}
.td-file {
width: 60px;
vertical-align: top;
}
.file-list {
padding: 5px;
border-bottom:
1px #464C4E solid;
}
.fon2 {
border-radius: 4px;
overflow:
hidden;
margin-bottom: 18px;
margin-top: 4px;
background-color:
#323538;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.file-content2 {
overflow: auto;
margin-top: 15px;
max-height:
350px;
border-radius: 4px;
border: 3px #46494D
solid;
}
.file-upload-progress {
margin-top: 7px;
border-radius:
2px;
background: #43484B;
color: #CFD8DC;
padding: 8px;
font-size:
13px;
}
.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: #565C5F;
color: white;
font-size: 12px;
padding: 2px;
font-weight: bold;
height: 15px;
line-height: 15px;
box-sizing:
border-box;
}
.file-upload-progress-ind-o {
padding: 2px;
border-radius: 2px;
background: #202324;
position: relative;
text-align: center;
}
.file-upload-progress-pr {
top: 50%;
left:
0;
right: 0;
position: absolute;
transform:
translateY(-50%);
}
.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 {
border-radius: 4px;
padding: 10px;
background-color: #383B3D;
box-sizing: border-box;
border: 3px #46494D
solid;
width: 100%;
color: #CFD8DC;
margin-bottom: 10px;
}
.form-control-100:placeholder {
color: #647481;
}
.form-control-100::-webkit-input-placeholder {color:
#647481;}
.form-control-100::-moz-placeholder {color:
#647481;}
.form-control-100:-moz-placeholder {color:
#647481;}
.form-control-100:-ms-input-placeholder {color:
#647481;}
.form-control-50:placeholder {
color: #647481;
}
.form-control-50::-webkit-input-placeholder {color:
#647481;}
.form-control-50::-moz-placeholder {color:
#647481;}
.form-control-50:-moz-placeholder {color:
#647481;}
.form-control-50:-ms-input-placeholder {color:
#647481;}
.form-control-50 {
border-radius: 4px;
padding: 10px;
background-color: #3C3E41;
box-sizing: border-box;
border: 3px #46494D
solid;
width: 70%;
color: #CFD8DC;
margin-bottom: 10px;
}
.form-control-select {
border-radius: 4px;
padding: 10px;
background-color: #3C3E41;
box-sizing: border-box;
border: 3px #46494D
solid;
width: 70%;
color: #CFD8DC;
margin-bottom: 10px;
}
.form-control-50:focus {
border: 3px #9CDD9F solid;
background-color: #EEFDEE;
color: #000000;
}
.form-control-100:focus
{
border: 3px #9CDD9F solid;
background-color: #EEFDEE;
color:
#000000;
}
.fon {
border-radius: 4px;
overflow: hidden;
padding:
15px;
margin-bottom: 18px;
margin-top: 4px;
background-color:
#323538;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.navi {
padding-bottom: 10px;
color: #CFD8DC;
border-bottom: 2px #CFD8DC
solid;
margin-bottom: 22px;
font-size: 17px;
}
.navi a{
color:
#CFD8DC;
}
.navi a:hover{
color: #909CA7;
}
.panel-button2 {
background-color: #45565E;
padding: 10px 1em;
border-radius: 2px;
line-height: 1.2;
display: inline-block;
color: #CFD8DC;
border:
none;
}
.panel-button2:hover {
background-color: #344046;
}
.panel-button3 {
background-color: #3B4147;
padding: 7px 1em;
border-radius: 2px;
line-height: 1.2;
display: inline-block;
color:
#CFD8DC;
margin-right: 7px;
}
.panel-button3:hover {
background-color: #33383D;
}
.panel-button {
background-color:
#45565E;
padding: 5px 1em;
border-radius: 2px;
line-height: 1.2;
margin-bottom: 4px;
display: inline-block;
color: #CFD8DC;
}
.panel-button:hover {
background-color: #344046;
}
.panel-desktop-info {
color: #CFD8DC;
border-radius: 4px;
overflow: hidden;
padding: 7px;
margin-bottom: 6px;
margin-top: 4px;
background-color: rgba(0, 0, 0, 0.2);
}
.panel-desktop-vidget {
color: #CFD8DC;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0,
0, 0.3);
overflow: hidden;
vertical-align: top;
margin-bottom: 13px;
}
.panel-desktop-vidget-title {
color: #fff;
border-radius: 4px
4px 0 0;
overflow: hidden;
padding: 10px;
text-transform: uppercase;
text-shadow: 1px 1px black;
border-bottom: 1px black solid;
font-size:
15px;
}
.panel-desktop-vidget-content {
color: #CFD8DC;
border-radius: 0 0 4px 4px;
overflow: hidden;
padding: 10px;
background-color: #3B4144;
border-top: 1px #A8ADA8 solid;
}
.blue-dvt
{
background-color: #698397;
}
.green-dvt {
background-color:
#618A62;
}
.red-dvt {
background-color: #B1736E;
}
.panel-left-menu-button {
color: #CFD8DC;
background-color:
#3B4144;
padding: 9px;
border-top: 1px #464C4E solid;
border-bottom:
1px #26292A solid;
text-align: center;
text-transform: uppercase;
}
.panel-left-menu-button:hover {
color: #F5665C;
background-color: #272C2E;
}
.panel-left-menu-list {
color:
#CFD8DC;
background-color: #323638;
padding: 11px;
border-top: 1px
#464C4E solid;
border-bottom: 1px #26292A solid;
}
.panel-left-menu-title {
color: #CFD8DC;
background-color:
#242729;
padding: 12px;
margin-bottom: -1px;
text-transform:
uppercase;
}
.panel-left-menu {
color: #CFD8DC;
border-radius:
4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
overflow: hidden;
margin-bottom: 20px;
}
.panel-left-menu-list:hover {
background-color: #2C3031;
border-left: 4px #CFD8DC solid;
}
.panel-left-menu-title:hover {
background-color: #1F2122;
}
.panel-left {
width: 260px;
display: inline-block;
vertical-align: top;
margin-top: 6px;
margin-left: 6px;
margin-right:
9px;
vertical-align: top;
}
.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: 10px;
}
.captcha {
background-color: #FCE6DF;
padding: 5px 1em;
margin: 3px;
line-height: 20px;
}
.overlay {
z-index: 2;
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;
}
.modal {
position: fixed;
top: 15%;
left: 50%;
transform: translateX(-50%);
background: #323538;
box-shadow: 0px 1px 10px rgba(255, 255, 255, 0.35);
opacity: 0;
width:
280px;
height: 350px;
pointer-events: none;
transition: 0.5s
ease-in-out;
max-height: 100vh;
overflow-y: auto;
max-width: 100vh;
}
.modal-optimize {
width: 280px;
height: 290px;
overflow-y:
auto;
}
.modal-bottom {
text-align: center;
border-top: 1px
#26292A solid;
padding: 8px;
}
.btn-green {
background-color:
#45565E;
padding: 10px 1em;
border-radius: 2px;
line-height: 1.2;
display: inline-block;
color: #CFD8DC;
}
.btn-green:hover {
background-color: #344046;
}
.overlay .modal.open {
opacity: 1;
pointer-events: inherit;
}
.hover{}
.hover:hover {
background-color: #5D6163;
}
.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;
}
.list-menu
{
color: #CFD8DC;
background-color: #323638;
padding: 11px;
border-top: 1px #464C4E solid;
border-bottom: 1px #26292A
solid;
}
.list-menu + .list-menu {margin: -1px 0;}
.success {
position: relative;
padding: 12px;
color: #fff;
box-sizing:
border-box;
background: #60C564;
overflow: hidden;
text-align:
center;
margin-bottom: 12px;
word-wrap: break-word;
font-size: 15px;
}
.success:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #ECF0F1 #2F3238 transparent transparent;
background:
transparent;
display: block;
width: 0;
-webkit-box-shadow: 0 1px 1px
rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 1px
rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
box-shadow: 0 1px 1px
rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
.error {
position: relative;
padding: 12px;
color: #fff;
box-sizing:
border-box;
background: #FF493D;
overflow: hidden;
text-align:
center;
margin-bottom: 12px;
word-wrap: break-word;
font-size: 15px;
}
.error:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #ECF0F1 #2F3238 transparent transparent;
background:
transparent;
display: block;
width: 0;
-webkit-box-shadow: 0 1px 1px
rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 1px
rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
box-shadow: 0 1px 1px
rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
.proccess_load {
padding: 4px;
border: 0;
-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;
}
.proccess {
padding: 7px;
border: 0;
margin-left: 18px;
margin-right: 18px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 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;
}
.red .proccess {
background-color: #C62828;
}
.gray .proccess_load {
background-color: gray;
}
.green .proccess {
background-color:
#4B9B4E;
}
.stripes2 .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, .15)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(135deg,
rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255,
255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%,
transparent);
background-image: -moz-linear-gradient(135deg, rgba(255,
255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255,
.15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%,
transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255,
255, 255, .15) 75%,
transparent 75%, transparent);
background-image:
-o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15)
75%,
transparent 75%, transparent);
background-image:
linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15)
75%,
transparent 75%, transparent);
-webkit-animation:
animate-stripes 3s linear infinite;
-moz-animation: animate-stripes 3s
linear infinite;
}
.stripes .proccess{
-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, .15)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(135deg,
rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255,
255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%,
transparent);
background-image: -moz-linear-gradient(135deg, rgba(255,
255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255,
.15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%,
transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255,
255, 255, .15) 75%,
transparent 75%, transparent);
background-image:
-o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15)
75%,
transparent 75%, transparent);
background-image:
linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15)
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;}
}
.title {
background-color:
#46494B;
padding: 11px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
border-radius: 4px;
text-transform: uppercase;
}
.panel-top-optimize
{
background-color: #1E2122;
position: fixed;
top: 0;
width:
100vw;
color: white;
max-width: 650px;
align-items: center;
justify-content: center;
display: flex;
z-index:
999;
}
.panel-top-left {
display: inline-block;
width: 18%;
text-align: center;
height: 55px;
line-height:
55px;
}
.panel-top-left:hover {
box-shadow: inset 0px 0px 20px
rgba(0,0,0,0.7);
}
.panel-top-center {
display: inline-block;
width: 82%;
height: 55px;
line-height: 55px;
color: #F5665C;
text-transform: none;
text-align: right;
}
.panel-top-optimize a{
color: white;
}
.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;
}
.form-control-30:focus {
border: 3px
#9CDD9F solid;
background-color: #EEFDEE;
color: #000000;
}
.form-control-30 {
border-radius: 4px;
padding: 10px;
background-color: #383B3D;
box-sizing: border-box;
border: 3px #46494D
solid;
width: 40%;
color: #CFD8DC;
margin-bottom: 10px;
}
.form-control-30:placeholder {
color: #647481;
}