优化default和serverstatus主题模版 (#327)

1.优化default主题模版
2.优化serverstatus主题模版
This commit is contained in:
nap0o
2024-02-25 10:16:57 -05:00
committed by GitHub
parent 07e0382598
commit 8df863a3e0
31 changed files with 1710 additions and 510 deletions

View File

@@ -6,58 +6,120 @@ body {
/* 导航部分 开始*/
.navbar {
min-height: 40px !important;
}
.navbar-inner{
margin:0 auto;
font-size: 14px;
}
.pl-md-unset {
.navbar .container{
max-width: 95vw;
margin: 0 auto;
}
.navbar-collapse:not([aria-expanded]) .navbar-nav .dropdown-toggle {
.navbar-inverse{
background-image: none;
background-color: #1C2127;
box-shadow: 0 1px 40px -8px #00000080;
}
.navbar-inverse .navbar-toggle:focus,
.navbar-inverse .navbar-toggle:hover {
background-color: #1C2127;
}
.navbar .navbar-collapse:not([aria-expanded]) .navbar-nav .dropdown-toggle {
margin-top: 18px;
padding: 0 !important;
}
.navbar-toggle {
.navbar .navbar-toggle {
margin-right:0
}
.navbar-brand {
.navbar .navbar-brand {
font-size: 20px;
text-align: center;
padding:12px 0 0 0;
margin-right:30px;
}
.node-cell-expand {
max-width: 420px;
.navbar .node-cell-expand {
word-break: break-all;
}
.node-cell-expand-label {
margin-right: 5px;
.navbar .node-cell-expand-label {
/*margin-right: 5px;*/
}
.dropdown .dropdown-toggle {
.navbar .dropdown .dropdown-toggle {
padding-bottom: 10px;
padding-top: 10px;
}
.navbar-inverse, .nav.navbar-nav {
background-image: linear-gradient(rgb(60, 60, 60) 0px, rgb(34, 34, 34) 100%) !important;
.navbar .navbar-nav {
margin:0px -15px;
}
.navbar-inverse .navbar-nav>li>a {
.navbar .navbar-nav>li>a {
color:#f1f1f1;
}
.navbar-inverse .navbar-brand {
font-size: 20px;
.navbar-nav li a span{
margin-right: 4px;
}
.navbar .navbar-collapse{
max-height: 500px;
}
/* 导航部分 结束 */
/* toolbox 开始 */
.toolbox {
position: fixed;
bottom:20px;
right: 12px;
z-index: 999999;
}
.toolbox span{
display: block;
width: 2.75rem;
margin-bottom: 10px;
}
.toolbox i{
display: block;
color: rgba(241,241,241,1);
cursor: pointer;
border-radius: 5px;
font-size: 1.5rem;
height: 2.75rem;
width: 2.75rem;
line-height: 2.75rem;
text-align: center;
}
.toolbox .toggleView i.show-nogroup {
font-size: 1.85rem;
}
.toolbox .setTheme i.setTheme-dark {
font-size: 1.35rem;
}
.toolbox .setTheme i.setTheme-light {
font-size: 1.45rem;
}
.toolbox .showGoTop i.goTop {
font-size: 1.55rem;
}
/* toolbox 结束 */
/* 正文部分 开始 */
.content {
padding: 20px;
@@ -75,15 +137,40 @@ body {
text-align: left;
}
.table>thead>tr>th{
border:none;
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
position: relative;
border:none;
line-height:20px;
}
.table .node-group-tag {
.table > tbody > tr > td:before,
.table > tbody > tr > th:before,
.table > tfoot > tr > td:before,
.table > tfoot > tr > th:before,
.table > thead > tr > td:before,
.table > thead > tr > th:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.7px;
}
.table .node-group-tag th{
font-size: 18px;
padding-bottom:15px;
}
.table .node-cell-os-text {
text-transform: capitalize;
}
.progress {
margin-bottom: 0;
}
@@ -93,7 +180,6 @@ body {
padding-left: 5px;
}
.expandRow > td {
padding: 0 !important;
border-top: 0 !important;
@@ -131,25 +217,49 @@ body {
}
.node-cell.network {
min-width: 110px;
max-width: 110px;
min-width: 100px;
max-width: 100px;
}
.node-cell.cpu, .node-cell.ram, .node-cell.hdd {
min-width: 45px;
max-width: 90px;
.node-cell.traffic {
min-width: 100px;
}
.node-cell.cpu, .node-cell.ram, .node-cell.hdd, .node-cell.memory {
min-width: 50px;
max-width: 50px;
}
/*正文结束*/
/* 服务页 正文*/
.service-status {
}
.service-status .service-status-th{
min-width:60px;
}
.service-status .service-name-th{
min-width:50px;
}
.service-status .service-averagelatency-th{
min-width:80px;
}
.service-status .service-30daysonline-th{
min-width:80px;
}
.service-status .delay-today {
display: flex;
align-items: center;
justify-content: left;
}
.service-status .delay-today > i {
.service-status .delay-today i {
width: 12px;
height: 12px;
border-radius: 50%;
@@ -163,26 +273,29 @@ body {
width: 18px;
height: 18px;
margin-right: 4px;
margin-bottom: -3.25px;
border-radius: 3px;
box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1);
}
.service-status {
.service-status .tooltip-inner {
max-width: 500px;
}
/* 服务页 正文结束 */
@media only screen and (max-width: 1200px) {
.accordian-body{
margin: 5px 0px 5px 10px;
}
.table .node-group-tag {
.table .node-group-tag th{
font-size:16px;
padding-bottom:6px;
}
}
@media only screen and (max-width: 720px) {
@media only screen and (max-width: 767px) {
body {
font-size: 10px !important;
padding-top:60px !important;
@@ -191,6 +304,23 @@ body {
padding: 0;
margin-bottom: 10px;
}
.navbar .navbar-nav .open .dropdown-menu>li>a {
color: #f1f1f1;
}
.navbar .navbar-nav .open .dropdown-menu {
list-style-image: initial;
background-color: #181a1b;
border-color: rgba(140, 130, 115, 0.15);
box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 12px;
}
.table > tbody > tr > td:before,
.table > tbody > tr > th:before,
.table > tfoot > tr > td:before,
.table > tfoot > tr > th:before,
.table > thead > tr > td:before,
.table > thead > tr > th:before {
height: 0.5px;
}
.node-cell.os,
.node-cell.uptime,
.node-cell.traffic{
@@ -208,10 +338,33 @@ body {
.accordian-body{
margin: 5px 0px 5px 10px;
}
.table .node-group-tag {
font-size:12px;
.table .node-group-tag th{
font-size:16px;
padding-bottom:6px;
}
.service-status .service-status-th{
min-width:30px;
}
.service-status .delay-today{
margin-top:4px;
justify-content: center;
}
.service-status .delay-today i{
margin-right:0px;
}
.service-status .delay-today-text{
display: none;
visibility: hidden;
}
.service-status .service-averagelatency-th{
min-width:70px;
}
.service-status .service-30daysonline-th{
min-width:75px;
}
.toolbox {
right: 18px;
}
}
@media only screen and (min-width: 768px) {