Файл: install/css/styles.css
Строк: 355
html, body{ height: 100%; margin: 0; padding: 0}
body {
background:
url("../images/bg.jpg");
font-family: 'Trebuchet MS',
Helvetica, 'DejaVu Sans', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida
Sans', sans-serif;
font-size:14px;
font-style: normal;
font-variant:
normal;
}
a { will-change: all; transition: background 0.15s linear, color
0.2s ease-in-out; }
.loading-overlay{
position: absolute;
width:100%;
height:100%;
left:0;
top:0;
background-color:rgba(255, 255, 255, 0.7);
}
.section{
width:850px;
margin-left: auto;
margin-right: auto;
}
.positive { color:#27ae60;
}
.negative { color:red; }
.warning {
padding-left:30px;
background: url("../images/icons/exclamation-triangle.svg")
no-repeat left center;
background-size: 20px;
}
.image{ float:right;
margin:10px; }
#layout a{ color:#09c; }
#layout a:hover{ color:#F90;
}
#layout a.ajaxlink{ color:#09c; border-bottom: dashed 1px #09c;
text-decoration: none; }
#layout a.ajaxlink:hover{ color:#F90;
border-bottom: dashed 1px #F90; }
#layout #header{ padding:25px 0;
}
#layout #footer{ padding:20px 0; }
#layout #header .logo {
padding-left: 220px;
background: url("../images/logo.svg")
no-repeat left center;
}
#layout #header .logo span {
display:inline-block;
font-size: 26px;
color:#FFF;
text-shadow:
0 1px 2px #000;
padding-left:20px;
border-left: solid 1px
#77879c;
}
#langs {
display: flex;
float: right;
margin: 5px 0
0 0;
}
#langs a.language {
text-decoration: none;
color:#7D929D;
display: block;
}
#langs a.language > img {
display: block;
height: 20px;
filter: grayscale(0.8);
opacity: 0.8;
transition:
all ease-in-out .2s;
}
#langs a.language:hover > img {
opacity:
1;
}
#langs a.language + a.language {
margin-left: 10px;
}
#langs
a.selected > img {
filter: grayscale(0);
}
#langs a:hover {
color:#354247;
}
#layout #main{
box-shadow: 0 0 18px #000;
border-collapse: collapse;
}
#layout #sidebar{
width:196px;
background:#d0dee5;
border-right: solid 1px #7d929d;
padding:0;
}
#layout #sidebar #steps,
#layout #sidebar #steps li{
margin:0; padding:0; list-style: none; }
#layout #sidebar #steps li{
height:40px;
line-height:40px;
padding:0 20px;
color:#7d929d;
}
#layout #sidebar #steps li.active{
color:#FFF;
text-shadow: 0 1px 1px #000;
background: rgb(125,146,157);
background: linear-gradient(to right, rgba(125,146,157,1)
0%,rgba(89,106,114,1) 100%);
}
#layout #body{
padding:20px;
width:520px;
background: #FFF;
color:#7D929D;
position:
relative;
}
#layout #body h1,
#layout #body h2{
font-size:24px;
font-weight: normal;
color:#354247;
margin-bottom:10px;
}
#layout
#body h1{
margin-top: 0;
}
#layout #body h2{
font-size:20px;
margin-bottom: 0;
}
#layout #body p {
line-height:22px;
}
#layout
#body .license-text {
height:330px;
border: solid 1px #AAA;
border-radius: 3px;
padding: 4px;
box-shadow: inset 0 1px 4px
#DDD;
color: #333;
outline: none;
font-size:12px;
resize:
vertical;
}
#layout #body .page {padding-bottom: 50px;}
#layout #body
.grid{
width:100%;
border-top: solid 1px #ECECEC;
font-size:13px;
color:#666;
border-collapse: collapse;
}
#layout
#body .grid td,
#layout #body .grid th { padding:10px 0; border-bottom:
solid 1px #ECECEC; }
#layout #body .grid .value { width:100px; text-align:
center; background: #F9F9F9; }
#layout #body .buttons{
background:#F9F9F9;
border-top:solid 1px #ECECEC;
padding:10px;
padding-top:8px;
text-align:right;
position:absolute;
left: 0;
right:0;
bottom:0;
}
#layout #body .buttons input{
padding: 10px
15px;
line-height: 100%;
border-radius: 5px;
cursor: pointer;
width:
auto;
font-size: 1.2em;
text-shadow: 0 1px 3px #FFF;
color:
#333;
text-decoration: none;
vertical-align: middle;
border: 1px solid
#CCC;
background: linear-gradient(to right, rgba(246, 246, 246, 1)
0%,rgba(224, 224, 224, 1) 100%);
}
#layout #body .buttons
input:hover{
border: 1px solid #BBB;
background: linear-gradient(to
right, rgba(246, 246, 246, 1) 0%,rgba(237, 237, 237, 1) 100%);
}
#layout
#body .buttons input:active{
box-shadow: inset 0 2px 3px
#ccc;
}
#layout #footer{
color:#FFF;
overflow: hidden;
}
#layout
#footer #copyright{ float:left; }
#layout #footer #copyright a { color:
#FFF; }
#layout #footer #copyright a:hover { color:#F90; }
#layout #footer
#version{ float:right; }
form .field{
margin-bottom:10px;
}
form
.field:last-child{
margin-bottom: 0;
}
form fieldset{
padding:10px
15px 15px;
border-radius:4px;
border:solid 1px #D0DEE5;
margin-bottom:12px;
}
form fieldset legend{
color:#354247;
font-size:14px;
}
form .field label {
display:block;
font-size:14px;
color:#697D87;
}
form .opt-group{
margin:6px
0;
}
form .opt-group label{
color:#666;
}
.input, textarea{
border: solid 1px #aaa;
border-radius:3px;
padding:4px;
box-shadow: inset 0 2px 8px #DDD;
color:#333;
outline:none;
width:100%;
box-sizing: border-box;
line-height: 1.5;
display:
block;
margin: 6px 0 0;
font-family: inherit;
font-size:
inherit;
transition: border-color .25s ease-in-out,box-shadow .25s
ease-in-out;
}
.input:focus, textarea:focus {
border-color: #a9beca;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(125,146,157,.4);
}
.input{
height: 30px;
}
.input-icon{
padding-left: 28px;
background:
no-repeat 4px center;
background-size: auto 18px;
}
.swal2-popup
.swal2-styled:focus {
outline: 0!important;
box-shadow:
none!important;
}
.swal2-popup {
width: 30em !important;
border-radius: 0 !important;
}
.icon-folder {
background-image:url("../images/icons/folder.svg"); }
.icon-url {
background-image:url("../images/icons/link.svg"); }
.icon-email {
background-image:url("../images/icons/envelope.svg");
}
.icon-user { background-image:url("../images/icons/user.svg");
}
.icon-password {
background-image:url("../images/icons/key.svg");
}
.icon-password2 {
background-image:url("../images/icons/key.svg"); }
.icon-db {
background-image:url("../images/icons/database.svg");
}
.icon-db-server {
background-image:url("../images/icons/server.svg");
}
.icon-db-prefix {
background-image:url("../images/icons/divide.svg");
}
.icon-db-table {
background-image:url("../images/icons/table.svg"); }
.icon-text {
background-image:url("../images/icons/text-width.svg");
}
.hint{
font-size:13px;
color:#999;
float:right;
}
pre, code
{
display:block;
overflow: auto;
border: 1px solid #CCCCCC;
border-radius: 2px;
box-shadow: inset 0 0 .5em #CCCCCC;
padding:
10px 15px;
margin:0;
color:#666;
white-space:
pre-wrap;
}
select.input {
background: #fff
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'
width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0
2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px
10px;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-left:
8px;
}
span.root-path{
font-weight:bold;
font-family:
mono;
}
a.root-path-change{
margin-left:10px;
font-size:12px;
}
.sk-circle {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0
-50px;
}
.sk-circle .sk-child {
width: 100%;
height: 100%;
position:
absolute;
left: 0;
top: 0;
}
.sk-circle .sk-child:before {
content:
'';
display: block;
margin: 0 auto;
width: 15%;
height: 15%;
background-color: #f6ab2f;
border-radius: 100%;
-webkit-animation:
sk-circleBounceDelay 1.2s infinite ease-in-out both;
animation:
sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle
.sk-circle2 {
-webkit-transform: rotate(30deg);
-ms-transform:
rotate(30deg);
transform: rotate(30deg); }
.sk-circle .sk-circle3
{
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg); }
.sk-circle .sk-circle4 {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); }
.sk-circle .sk-circle5 {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg); }
.sk-circle .sk-circle6 {
-webkit-transform: rotate(150deg);
-ms-transform: rotate(150deg);
transform: rotate(150deg); }
.sk-circle .sk-circle7 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }
.sk-circle .sk-circle8 {
-webkit-transform: rotate(210deg);
-ms-transform: rotate(210deg);
transform: rotate(210deg); }
.sk-circle .sk-circle9 {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg); }
.sk-circle .sk-circle10 {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg); }
.sk-circle .sk-circle11 {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg); }
.sk-circle .sk-circle12 {
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.sk-circle .sk-circle3:before {
-webkit-animation-delay: -1s;
animation-delay: -1s; }
.sk-circle .sk-circle4:before {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.sk-circle .sk-circle5:before {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.sk-circle .sk-circle7:before {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.sk-circle .sk-circle9:before {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.sk-circle .sk-circle11:before {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@-webkit-keyframes sk-circleBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes sk-circleBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}