Skip to content

Commit

Permalink
server-status主题优化 (#405)
Browse files Browse the repository at this point in the history 
* server-status主题优化
1.前台增加半透明样式切换按钮，同时适配了深色和浅色模式
2.右小角功能区增加收纳，点击展开，滚动页面关闭
3.vps世界分布地图全屏展示
4.修改默认页底版权信息位置，从跟随container box修改为默认置于页面底部，container box到底底部后再跟随
5.修改container box默认宽度和最大宽度，适配高分辨率显示器
6.优化样式文件结构,删除无用的样式文件
7.一些小优化

* 修改默认背景图

* 修改背景图片

* 1.echart图表适配半透明样式切换
2.echart图表移动端设置更细折线
3.修改半透明样式下的默认背景图

* echart Y轴移动端更细刻度线

* fixbug

* 修改半透明样式默认背景图片为本地调用
  • Loading branch information
@nap0o
nap0o authored Aug 9, 2024
1 parent 6b05a21 commit d909754
Show file tree
Hide file tree
Showing 18 changed files with 647 additions and 597 deletions.
6 changes: 0 additions & 6 deletions resource/static/theme-server-status/css/bootstrap-theme.min.css
View file

This file was deleted.

1 change: 0 additions & 1 deletion resource/static/theme-server-status/css/bootstrap-theme.min.css.map
View file

This file was deleted.

44 changes: 22 additions & 22 deletions resource/static/theme-server-status/css/dark.css
100644 → 100755
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
body[theme="dark"] {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
background: rgba(49, 54, 59, 1);
background-color: rgba(49, 54, 59, 1);
color: #f1f1f1;
}

Expand All @@ -9,7 +9,6 @@ body[theme="dark"] .navbar .navbar-brand {
}

body[theme="dark"] .navbar .dropdown-menu {
list-style-image: initial;
background-color: rgba(23, 26, 30, 1);
border-color: rgba(49, 54, 59, 1);
box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 12px;
Expand All @@ -29,17 +28,16 @@ body[theme="dark"] .navbar .navbar-nav > .open > a:focus,
body[theme="dark"] .navbar .navbar-nav > .open > a:hover,
body[theme="dark"] .navbar .navbar-nav > .active > a,
body[theme="dark"] .navbar .navbar-nav > .open > a{
background-image: none !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none;
box-shadow: none;
background-color: transparent;
}

body[theme="dark"] .navbar .navbar-nav .open .dropdown-menu > li > a {
color: #f1f1f1;
}

body[theme="dark"] .content {
background-image: initial;
background-color: rgba(28, 29, 38, 1);
border: none;
box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
Expand All @@ -48,7 +46,6 @@ body[theme="dark"] .content {
}

body[theme="dark"] .table {
background-image: initial;
background-color: rgba(28, 29, 38, 1);
border-color: #545b5e;
}
Expand All @@ -69,7 +66,6 @@ body[theme="dark"] .table-striped tbody > tr.even > th {
body[theme="dark"] .table-striped tbody > tr,
body[theme="dark"] .table-striped tbody > tr.odd > td,
body[theme="dark"] .table-striped tbody > tr.odd > th {
/* background-color: rgba(28, 29, 38, 1); 282B2E*/
background-color: rgba(34, 35, 46, 1);
}

Expand All @@ -83,7 +79,6 @@ body[theme="dark"] .table-hover > tbody > tr:not(.expandRow):hover > td {

/* expandRow展开部分样式 */
body[theme="dark"] .table > tbody > tr.expandRow.odd > td:before{
/* background-color: rgba(28, 29, 38, 1); 282B2E*/
background-color: rgba(34, 35, 46, 1);
}

Expand All @@ -102,35 +97,35 @@ body[theme="dark"] .progress-bar {
}

body[theme="dark"] .progress-bar-success {
background-image: linear-gradient(#4d853a 0, #367e36 100%);
background-image: linear-gradient(to right, rgba(77, 133, 58, 1) 0, rgba(54, 126, 54, 1) 100%);
}

body[theme="dark"] .progress-offline .progress-bar-success {
background-image: linear-gradient(#808080 0, #808080 100%);
body[theme="dark"] .progress-bar-warning {
background-image: linear-gradient(to right, rgba(153, 95, 13, 1) 0, rgba(181, 113, 15, 1) 100%);
}

body[theme="dark"] .progress-bar-warning {
background-image: linear-gradient(#995f0d 0, #b5710f 100%);
body[theme="dark"] .progress-bar-danger {
background-image: linear-gradient(to right, rgba(145, 35, 32, 1) 0, rgba(161, 38, 35, 1) 100%);
}

body[theme="dark"] .progress-offline .progress-bar-warning {
background-image: linear-gradient(#808080 0, #808080 100%);
body[theme="dark"] .progress-offline .progress-bar-success {
background-image: linear-gradient(rgba(128, 128, 128, 1) 0, rgba(128, 128, 128, 1) 100%);
}

body[theme="dark"] .progress-bar-danger {
background-image: linear-gradient(#942320 0, #a12623 100%);
body[theme="dark"] .progress-offline .progress-bar-warning {
background-image: linear-gradient(rgba(128, 128, 128, 1) 0, rgba(128, 128, 128, 1) 100%);
}

body[theme="dark"] .progress-offline .progress-bar-danger {
background-image: linear-gradient(#808080 0, #808080 100%);
background-image: linear-gradient(rgba(128, 128, 128, 1) 0, rgba(128, 128, 128, 1) 100%);
}

body[theme="dark"] .node-cell.status .status-icon.online {
background-image: linear-gradient(#4d853a 0, #367e36 100%);
background-image: linear-gradient(rgba(77, 133, 58, 1) 0, rgba(54, 126, 54, 1) 100%);
}

body[theme="dark"] .node-cell.status .status-icon.offline {
background-image: linear-gradient(#9b2522 0, #9b2522 100%);
background-image: linear-gradient(rgba(155, 37, 34, 1) 0, rgba(161, 38, 35, 1) 100%);
}

body[theme="dark"] .service-status .danger {
Expand Down Expand Up @@ -160,11 +155,16 @@ body[theme="dark"] .modal-content{
color: #f1f1f1;
}

body[theme="dark"] #earthChartBox .modal-content{
background-color: rgba(0, 0, 0, 1);
color: #f1f1f1;
}

body[theme="dark"] .modal-header{
border-bottom-color:#080808;
}

body[theme="dark"] .modal-header i{
body[theme="dark"] .modal-header i.xclose{
color: #f1f1f1;
}

Expand Down
123 changes: 123 additions & 0 deletions resource/static/theme-server-status/css/dark.plus.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
body[theme="dark"]::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url(/static/theme-server-status/img/bg.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
z-index: -1;
}

body[theme="dark"] {
background-color: rgba(0, 0, 0, 0.8);
color: #f1f1f1;
}

body[theme="dark"] .navbar {
/** 顶部导航条 背景 **/
background-color: rgba(0, 0, 0, 0.8);
box-shadow: none;
border: none;
}

body[theme="dark"] .navbar .navbar-brand {
color: #ffffff;
}

body[theme="dark"] .navbar .dropdown-menu {
/** 二级导航下拉 背景 **/
background-color: rgba(0, 0, 0, 0.85);
border-top: none;
border-color: #31363b;
box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 12px;
}

body[theme="dark"] .navbar .dropdown-menu > li > a {
color: #c8c3bc;
}

body[theme="dark"] .navbar .dropdown-menu > li > a:focus,
body[theme="dark"] .navbar .dropdown-menu > li > a:hover {
/** 二级导航鼠标悬停选中背景 **/
background-color: rgba(0, 0, 0, 0.95);
background-image: linear-gradient(#1c1d26 0, #1c1d26 100%);
}

body[theme="dark"] .navbar .navbar-nav .open .dropdown-menu > li > a {
color: #f1f1f1;
}

body[theme="dark"] .table,
body[theme="dark"] .table-condensed > tbody > tr,
body[theme="dark"] .table-hover > tbody > tr,
body[theme="dark"] .table-hover > tbody > tr:hover,
body[theme="dark"] .table-striped tbody > tr.even,
body[theme="dark"] .table-striped tbody > tr.odd,
body[theme="dark"] .table-striped tbody > tr.even > td,
body[theme="dark"] .table-striped tbody > tr.even > th,
body[theme="dark"] .table-striped tbody > tr.odd > td,
body[theme="dark"] .table-striped tbody > tr.odd > th,
body[theme="dark"] .table-striped tbody > tr.even > td:hover,
body[theme="dark"] .table-striped tbody > tr.even > th:hover,
body[theme="dark"] .table-striped tbody > tr.odd > td:hover,
body[theme="dark"] .table-striped tbody > tr.odd > th:hover,
body[theme="dark"] .table-striped tbody > tr.expandRow:hover {
background-color: transparent !important;
}

body[theme="dark"] .content {
/** 主box 背景 **/
background-color: rgba(28, 29, 38, 0.8);
border: none;
box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
}

body[theme="dark"] .table > thead > tr.node-group-tag > th,
body[theme="dark"] .table > thead > tr.node-group-tag > th:before {
background: unset;
}

body[theme="dark"] .table > tbody > tr > td:before,
body[theme="dark"] .table > tfoot > tr > td:before,
body[theme="dark"] .table > thead > tr > td:before,
body[theme="dark"] .table > thead > tr.node-group-cell > th:before{
/** border-bottom 颜色 **/
background-color: rgba(155, 155, 155, 0.1);
}

body[theme="dark"] .table-hover > tbody > tr:not(.expandRow):hover > td {
background-color: unset;
}

/* expandRow展开部分样式 */
body[theme="dark"] .table > tbody > tr.expandRow.odd > td:before{
background-color: unset;
}

body[theme="dark"] .table > tbody > tr.expandRow.even > td:before{
background-color: unset;
}
/* expandRow展开部分样式结束 */

body[theme="dark"] .progress {
background-image: none;
background-color: rgba(255, 255, 255, 0.075);
}

body[theme="dark"] .progress-bar-success {
background-image: linear-gradient(to right, rgba(77, 133, 58, 0.9) 0, rgba(54, 126, 54, 0.9) 100%);
}

body[theme="dark"] .progress-bar-warning {
background-image: linear-gradient(to right, rgba(153, 95, 13, 0.9) 0, rgba(181, 113, 15, 0.9) 100%);
}

body[theme="dark"] .progress-bar-danger {
background-image: linear-gradient(to right, rgba(145, 35, 32, 0.8) 0, rgba(161, 38, 35, 0.8) 100%);
}
128 changes: 94 additions & 34 deletions resource/static/theme-server-status/css/light.css
100644 → 100755
View file

Large diffs are not rendered by default.

134 changes: 134 additions & 0 deletions resource/static/theme-server-status/css/light.plus.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
body[theme="light"]::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url(/static/theme-server-status/img/bg.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
z-index: -1;
}

body[theme="light"] {
background-image: unset;
}

body[theme="light"]::after {
content: "";
position: fixed;
}

body[theme="light"] .navbar {
/** 顶部导航条 背景 **/
background-color: rgba(255, 255, 255, 0.9);
border-bottom: 1px #cecece solid;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}

body[theme="light"] .navbar .dropdown-menu {
/** 二级导航下拉 **/
background-color: rgba(255, 255, 255, 0.8);
border-color: rgba(0, 0, 0, .05);
}


body[theme="light"] .navbar .dropdown-menu > li > a:focus,
body[theme="light"] .navbar .dropdown-menu > li > a:hover{
/** 二级导航鼠标悬停选中背景 **/
background-color: rgba(0, 0, 0, .05);
}

body[theme="light"] .navbar .navbar-collapse{
border-color:rgba(0, 0, 0, 0.085);
}

body[theme="light"] .navbar .navbar-toggle .icon-bar{
background-color: rgba(0, 0, 0, 0.9);
}

body[theme="light"] .navbar .navbar-toggle:focus,
body[theme="light"] .navbar .navbar-toggle:hover {
background-color: unset;
}

body[theme="light"] .table,
body[theme="light"] .table-condensed > tbody > tr,
body[theme="light"] .table-hover > tbody > tr,
body[theme="light"] .table-hover > tbody > tr:hover,
body[theme="light"] .table-striped tbody > tr.even,
body[theme="light"] .table-striped tbody > tr.odd,
body[theme="light"] .table-striped tbody > tr.even > td,
body[theme="light"] .table-striped tbody > tr.even > th,
body[theme="light"] .table-striped tbody > tr.odd > td,
body[theme="light"] .table-striped tbody > tr.odd > th,
body[theme="light"] .table-striped tbody > tr.even > td:hover,
body[theme="light"] .table-striped tbody > tr.even > th:hover,
body[theme="light"] .table-striped tbody > tr.odd > td:hover,
body[theme="light"] .table-striped tbody > tr.odd > th:hover,
body[theme="light"] .table-striped tbody > tr.expandRow:hover {
background-color: transparent !important;
}

body[theme="light"] .content {
/** 主box 背景 **/
background-color: rgba(245, 245, 245, 0.8);
border: none;
box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
}

body[theme="light"] .table > thead > tr.node-group-tag > th,
body[theme="light"] .table > thead > tr.node-group-tag > th:before {
background: unset;
}

body[theme="light"] .table > tbody > tr > td:before,
body[theme="light"] .table > tfoot > tr > td:before,
body[theme="light"] .table > thead > tr > td:before,
body[theme="light"] .table > thead > tr.node-group-cell > th:before{
/** border-bottom 颜色 **/
background-color: rgba(0, 0, 0, 0.075);
}

body[theme="light"] .table-hover > tbody > tr:not(.expandRow):hover > td {
background-color: unset;
}

/* expandRow展开部分样式 */
body[theme="light"] .table > tbody > tr.expandRow.odd > td:before{
background-color: unset;
}

body[theme="light"] .table > tbody > tr.expandRow.even > td:before{
background-color: unset;
}
/* expandRow展开部分样式结束 */

body[theme="light"] .progress {
background-image: none;
background-color: rgba(0, 0, 0, 0.015);
}

body[theme="light"] .progress-bar-success {
background-image: linear-gradient(to right, rgba(50, 205, 50, 0.6) 0, rgba(68, 157, 68, 0.6) 100%);
}

body[theme="light"] .progress-bar-warning {
background-image: linear-gradient(to right, rgba(236, 151, 31, 0.6) 0, rgba(255, 125, 80, 0.6) 100%);
}

body[theme="light"] .progress-bar-danger {
background-image: linear-gradient(to right, rgba(255, 70, 0, 0.6) 0, rgba(201, 48, 44,0.6) 100%);
}

body[theme="light"] .toolbox i{
background-color: rgba(255, 255, 255, .55);
}

@media only screen and (max-width: 767px) {
body[theme="light"] .navbar .navbar-nav .open .dropdown-menu {
background-color: rgba(235, 235, 235, 0.75);
}
}
Loading

0 comments on commit d909754

Please sign in to comment.