phpservermon/src/templates/default/static/scss/style.scss

191 lines
3.5 KiB
SCSS

html {
position: relative;
min-height: 100%;
}
html[dir='rtl'] {
#auto_refresh_description,
#log_retention_period_help {
border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;
}
}
html[dir='ltr'] {
#auto_refresh_description,
#log_retention_period_help {
border-top-right-radius: .25rem;
border-bottom-right-radius: .25rem;
}
}
body {
padding-top: 4.5rem;
margin-bottom: 80px;
}
.container-fluid {
max-width: 1920px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #f5f5f5;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, .64);
&:focus,
&:hover {
color: rgba(255, 255, 255, .85);
}
}
dl,
dt,
dd {
margin-bottom: 0;
}
footer .text-muted {
color: #4C5557 !important;
}
a,
button,
.nav-link {
min-height: 44px !important;
min-width: 44px !important;
}
a.icon {
text-decoration: none;
cursor: pointer;
padding-left: 10px;
}
form.form-signin input[type="text"],
form.form-reset input[type="text"] {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
form.form-signin input[type="password"] {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
form.form-reset {
input#input-password {
border-radius: 0;
}
input#input-password-repeat {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
form.form-signin,
form.form-forgot,
form.form-reset {
margin: auto;
}
table {
table-layout: fixed;
}
th, td {
max-width:1px;
}
.content {
word-wrap:break-word;
overflow-wrap:break-word;
}
table tr[visible='false'],
.no-result {
display: none;
}
table tr[visible='true'] {
display: table-row;
}
.bootstrap-select>.dropdown-toggle.bs-placeholder,
.bootstrap-select>.dropdown-toggle.bs-placeholder:active,
.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
.bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
color: unset;
}
#meter {
border-radius: 200px 200px 0 0;
height: 100px;
margin: 50px auto 0;
overflow: hidden;
position: relative;
width: 200px;
&:before {
background: #fbfbfb;
border-radius: 200px 200px 0 0;
box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15) inset;
content: "";
height: 100px;
position: absolute;
width: 200px;
}
&:after {
background: #fff;
border-radius: 140px 140px 0 0;
bottom: 0;
-webkit-box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15);
box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15);
content: "\A" attr(data-value) "%\A"attr(translation);
font-size: 1.5em;
font-weight: 100;
height: 80px;
left: 20px;
line-height: 25px;
position: absolute;
text-align: center;
width: 160px;
z-index: 3;
white-space: pre;
}
}
#needle {
background: rgba(52, 52, 64, 0.7);
border-radius: 4px;
bottom: -4px;
box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.4);
display: block;
height: 8px;
left: 5px;
position: absolute;
width: 95px;
transform-origin: 100% 4px;
transition: all 1s;
border-radius: 4px;
bottom: -4px;
box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.4);
display: block;
height: 8px;
left: 5px;
position: absolute;
width: 95px;
transform-origin: 100% 4px;
transition: all 1s;
}
.dropdown-menu.show {
left: inherit;
right: 0px;
}