You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
haproxy-wi/inc/style.css

673 lines
11 KiB

html {
font-size: 10px;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #000;
background-color: #eee;
margin: 0;
padding: 0;
}
h2 {
background: #5D9CEB;
border: 1px solid #5D9CEB;
padding: 3px;
padding-left: 2%;
color: #fff;
margin-top: 0px;
margin-bottom: 0px;
}
h3 {
margin-top: 10px;
margin-bottom: 0px;
}
form {
margin: 0;
}
iframe {
width: 33%;
}
pre {
padding-left: 15px;
//padding-top: 20px;
}
.icon {
max-width: 20px;
margin-left: 2px;
cursor: pointer;
}
.top-menu {
position: fixed;
height: 100%;
width: 207px;
float: left;
margin-bottom: 20px;
top: 0;
right: 0;
left: 0;
z-index: 1000;
display: block;
}
.top-menu, .footer {
background-color: #33414E;
}
.logoText {
color: #EBF1F1;
font-size: 25px;
font-style: italic;
font-weight: bold;
height: 32px;
border-bottom: 1px solid aliceblue;
padding-left: 20px;
padding-top: 2px;
padding-bottom: 3px;
}
.top-menu img {
max-width: 125px;
float: left;
padding-left: 20px;
}
.container {
min-height: calc(99vh - 0px);
max-width: 91%;
min-width: 40%;
background-color: #fff;
margin-left: 207px;
margin-right: 20px;
padding-bottom: 10px;
}
#cover {
position: absolute;
display: none;
top:0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.1);
z-index: 500;
}
.login {
float: right;
margin-top: 5px;
margin-left: 14px;
margin-right: 15px;
color: #fff !important;
font-size: 15px;
}
.auto-refresh {
margin-left: auto;
float: right;
margin-top: 5px;
margin-right: 5px;
}
.auto-refresh a {
color: #fff !important;
cursor: pointer;
font-size: 15px;
}
.auto-refresh-div {
display: none;
position: relative;
padding: 10px 10px 14px;
background-color: #F5F5F5;
border-bottom: solid 1px #D9D9D9;
border-top: solid 1px #D9D9D9;
margin-bottom: 10px;
line-height: 20px;
}
.auto-refresh-div a {
color: #000;
cursor: pointer;
}
.auto-refresh-head {
font-size: 16px;
color: #2d2d2d;
font-weight: bold;
margin-left: 83%;
}
.auto-refresh-interval {
float: right;
padding: 0px 15px;
margin-left: 70%;
border-bottom: solid 1px #D9D9D9;
}
.auto-refresh-ul{
float: left;
padding-left: 0;
list-style: none;
margin-top: 10px;
}
.auto-refresh-ul ul li {
margin: 0;
padding: 0;
border: 0;
font-family: inherit;
vertical-align: baseline;
list-style: none;
}
.auto-refresh-pause, .auto-refresh-resume {
margin-top: 10px;
margin-left: -100px;
position: fixed;
color: #000;
font-size: 12px;
height: 15;
}
.configShow, .diff {
margin-left: 16%;
//height: 78%;
overflow: auto;
width: 70%;
border: 1px solid #DCDCDC;
border-radius: 5px;
}
.config {
height: 70%;
}
.diffHead {
background-color: #F5F5F5;
padding: 10px;
}
.lineDog {
background-color: #dbedff;
margin-bottom: 10px;
}
.lineDiffMinus, .lineDiffPlus, .lineDog, .lineDiff {
padding-left: 15px;
}
.lineDiffMinus {
background-color: #ffdce0;
}
.lineDiffPlus {
background-color: #cdffd8;
}
.param {
font-weight: bold;
padding-left: 13px;
}
.numRow {
padding-left: 10px;
padding-right: 20px;
}
.paramInSec {
font-weight: bold;
}
.conteinerIndex {
width: 20%;
background-color: #fff;
padding: 20px;
border-radius: 10px;
margin-top: 2%;
}
.conteinerIndex img {
max-width: 250px;
}
.copyright {
color: #23527c;
margin-left: 15px;
}
.copyright-menu {
font-weight: bold;
font-style: italic;
color: #fff;
margin-left: 30px;
}
.line {
background-color: #f5faf4;
border: 1px solid #ddd;
}
.line, .line3 {
padding-top:5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
}
.line:hover, .line3:hover {
background-color: #f6f8fa;
}
.time-range {
border: 0;
background-color: #f5faf4;
font-weight: bold;
width: 18px;
padding-left: 0;
padding-right: 0;
}
.overviewHead:hover {
background-color: #f4f9f3e6;
}
.comment {
color: #aaa;
}
.add-table {
width: 100%;
}
.addName {
background-color: #f6f6f6;
width: 120px;
}
.addOption, .addName {
border-bottom: 1px solid #ddd;
padding: 15px;
}
.advance {
display: none;
}
.advance-show {
font-size: 13px !important;
}
.advance-show a{
color: #9d9d9d !important;
}
.addButton {
padding-top: 15px;
padding-left: 15px;
padding-bottom: 5px;
}
.addButton:hover {
background-color: #fff;
}
.addSuc {
padding-left: 20px;
padding-top: 20px;
color: #23527c;
}
.add-note {
width: 30%;
padding-left: 10px;
font-style: italic;
}
.tooltip {
font-size: 12px;
padding-bottom: 10px;
}
.tooltipTop {
margin-bottom: -20px;
padding-top: 10px;
}
.footer {
box-shadow: 1px 1px 5px grey;
min-height: 50px;
top: 0;
right: 0;
left: 0;
}
.overview {
width: 100%;
}
.overviewHead {
border-radius: 5px;
background-color: #f4f9f3e6;
font-weight: bold;
}
.overview tr{
border-bottom: 1px solid #ddd;
border-radius: 5px;
}
.checkbox {
width: 60px;
padding-left: 5px;
}
.checkbox-head {
padding: 0;
}
.ip-field {
width: 100px;
}
.group-field, .slave-field {
width: 10%;
}
.slave-field {
padding-left: 10px;
}
.cred-field {
width: 17%;
}
.overviewTr {
margin: 0;
background-color: #f6f8fa;
padding-left: 15px;
font-size: 15px;
}
.serverUp, .serverDown {
padding: 3px;
border-radius: 3px;
color: #fff;
font-weight: bold;
}
.serverUp {
background-color: #5CB85C;
}
.add-button {
background-color: #5CB85C;
border-radius: 5px;
color: #fff;
padding: 5px;
padding-right: 10px;
padding-left: 10px;
float: right;
margin-right: 10px;
cursor: pointer;
}
.serverDown {
background-color: red;
}
.padding10 {
padding: 10px;
padding-left: 0px;
border: none;
width: 23%;
}
.padding20 {
padding: 15px;
width: 30%;
}
.first-collumn {
padding-left: 15px;
width: 15%;
}
.second-collumn {
width: 25%;
}
.third-collumn {
width: 35%;
}
.ro {
border: none;
}
.remove {
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.1);
background-color: #ca4333;
background-image: linear-gradient(180deg,#d44a3a,#bc3829);
background-repeat: repeat-x;
border-color: #d44a3a;
padding: 5px;
border-radius: 3px;
}
.menu {
font-weight: bold;
font-style: italic;
min-height: calc(100vh - 95px);
}
.menu ul li{
padding: 1px;
padding-left: 33px;
margin-right: 0px !important;
}
.menu ul ul > li:hover{
background-color: #69e;
}
.menu ul{
position: relative;
margin: 0;
padding: 0;
background-color: #33414E;
list-style-type: none;
}
.menu ul a{
color: #fff;
text-decoration: none;
}
.menu ul a:hover, .menu li:hover, .current {
background-color: #69e;
}
.menu ul ul a{
color: #fff;
text-decoration: none;
}
.head-submenu {
margin-left: 20px;
}
@keyframes shadow {
from {box-shadow: 0px 0px 0px red inset;}
50% {text-shadow: 0 0 30px black;}
to {box-shadow: 0 -5px 5px -5px rgb(38, 137, 60) inset}
}
@keyframes shadow-red {
from {box-shadow: 0px 0px 0px red inset;}
50% {text-shadow: 0 0 30px black;}
to {box-shadow: 0 -5px 5px -5px #5D9CEB inset}
}
.form-control:hover {
animation: shadow-red 0.3s forwards;
}
.form-control:invalid, .form-control:valid {
background-image: linear-gradient(0deg,#d50000 2px,rgba(213,0,0,0) 0),linear-gradient(0deg,rgba(0,0,0,.26) 1px,transparent 0);
}
.form-control {
background: no-repeat bottom,50% calc(100% - 1px);
background-size: 0 100%,100% 100%;
border: 0;
transition: background 1s ease-out;
padding-left: 0;
padding-right: 0;
}
.ui-button {
padding-left: 10px !important;
padding-right: 10px !important;
background: #f4f9f380 !important;
}
.ui-state-default {
background-color: #EBF1F1 !important;
}
.ui-state-active {
background-color: #4A89D8 !important;
border: none !important;
border-color: #5D9CEB !important;
}
.ui-tooltip, .arrow:after {
background: #33414E !important;
border: 1px solid #33414E !important;
border-radius: 5px !important;
color: #fff !important;
}
.ui-tabs-nav {
border-radius: 0 !important;
padding-left: 25px !important;
}
.ui-tabs .ui-tabs-panel {
padding: 0 !important;
padding-bottom: 10px !important;
}
.ui-tabs {
padding-left: 0 !important;
margin-top: -5px !important;
margin-left: -2px;
}
.ui-widget-header {
background: #5d9ceb !important;
}
.ui-menu, .ui-menu-item {
background: #EBF1F1 !important;
}
.ui-dialog {
z-index: 1000 !important;
}
.ui-selectmenu-open, .ui-selectmenu-menu {
z-index: 1010 !important;
}
.need-field {
color: red;
}
a {
background-color: transparent;
}
a:active, a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
//button,
input,
optgroup,
select,
textarea {
margin: 0;
font: inherit;
color: inherit;
border-radius: 7px;
padding: 3px;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
select {
color: #000;
}
button {
background-color: #337ab7;
border-color: #2e6da4;
color: #fff;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
}
input {
line-height: normal;
border-radius: 4px;
}
table {
border-spacing: 0;
border-collapse: collapse;
background-color: transparent;
width: 100%;
}
caption {
color: #777;
text-align: left;
}
td,th {
padding: 0;
text-align: left;
min-width: 30px;
}
a,
a:visited {
text-decoration: underline;
}
a {
color: #9d9d9d;
text-decoration: none;
}
a:hover,
a:focus {
color: #23527c;
text-decoration: underline;
}
a:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.update {
background-color: #dff0d8 !important;
}
.alert {
padding:15px;
margin-bottom:20px;
border:1px solid transparent;
border-radius:4px
}
.alert a {
cursor: pointer;
font-weight: bold;
padding-left: 10px;
margin-bottom: 10px;
}
.alert-danger, .alert-info, .alert-success, .alert-warning, .added {
width: 400px;
margin-left: 15px;
margin-top: 15px;
display: block;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
width: 400px;
margin-bottom: -50px;
}
.alert-success, .added{
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-info {
color: #0c5460;
background-color: #d1ecf1;
border-color: #bee5eb;
}
.alert-warning {
color: #856404;
background-color: #fff3cd;
border-color: #ffeeba;
}
.validateTips {
width: 540px;
margin: 0;
margin-bottom: 10px;
}
#errorMess {
float: right;
}
.added {
position: absolute;
margin-left: 30px;
margin-top: 790px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 10px;
}
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
padding-right: 10px;
}
.even {
background-color: #f3f8fb;
}
.mCSB_container {
overflow-y: hidden !important;
overflow-x: auto !important;
}