2021-01-24 01:56:16 -05:00
body . transition-theme , body . transition-theme * , body . transition-theme * : before , body . transition-theme * : after { -webkit- transition : 400 ms cubic-bezier ( 0.995 , -0.265 , 0.855 , 0.505 ) !important ; transition : 400 ms cubic-bezier ( 0.995 , -0.265 , 0.855 , 0.505 ) !important ; -webkit- transition-delay : 0 !important ; transition-delay : 0 !important } body [ data-theme = "dark" ] { background-color : #121212 } body [ data-theme = "dark" ] . switcher { background-color : #124b8c } body [ data-theme = "dark" ] . grid-mode-toggle . switcher { background-color : #2f2f2f } body [ data-theme = "dark" ] . grid-mode-toggle . switcher input [ type = "checkbox" ] : checked + div > : first-child { color : #121212 } body [ data-theme = "dark" ] # app { background-color : #121212 } body [ data-theme = "dark" ] . toggle-container { color : #c8c8c8 } body [ data-theme = "dark" ] . toggle-container . fas . fa-th . fa-lg { color : #c8c8c8 } body [ data-theme = "dark" ] . toggle-container . fas . fa-list-ul . fa-lg { color : #c8c8c8 } body [ data-theme = "dark" ] . state-online { background-color : #4ba242 } body [ data-theme = "dark" ] . server-info-container { background-color : #1e1e1e ; color : #e1e1e1 ; border : 1 px solid rgba ( 255 , 255 , 255 , 0.1 ) ; -webkit- box-shadow : 0 2 px 10 px rgba ( 255 , 255 , 255 , 0.1 ) ; box-shadow : 0 2 px 10 px rgba ( 255 , 255 , 255 , 0.1 ) } body [ data-theme = "dark" ] . info-body ul li { border-bottom : 1 px solid rgba ( 255 , 255 , 255 , 0.2 ) } body [ data-theme = "dark" ] . info-body ul li p { color : #fff } body [ data-theme = "dark" ] . info-body ul li img { border : 1 px solid rgba ( 255 , 255 , 255 , 0.3 ) } body [ data-theme = "dark" ] . info-body ul li : nth-child ( -n + 3 ) { border : none } body [ data-theme = "dark" ] . info-body ul li : nth-last-child ( -n + 3 ) { border : none } body [ data-theme = "dark" ] . info-body ul li : nth-child ( n + 4 ) :: before { color : #959595 } body [ data-theme = "dark" ] . info-body ul li h4 { color : #959595 } body [ data-theme = "dark" ] . info-body . cpu-bar h4 , body [ data-theme = "dark" ] . info-body . ram-bar h4 , body [ data-theme = "dark" ] . info-body . disk-bar h4 { color : #959595 } body [ data-theme = "dark" ] . info-body . cpu-bar p , body [ data-theme = "dark" ] . info-body . ram-bar p , body [ data-theme = "dark" ] . info-body . disk-bar p { color : #fff !important } body [ data-theme = "dark" ] . info-body . ui . progress { background-color : #111 ; border : 1 px solid rgba ( 255 , 255 , 255 , 0.15 ) } body [ data-theme = "dark" ] . info-body . ui . progress . fine > . bar { background-color : #1670c5 !important } body [ data-theme = "dark" ] . info-body . ui . progress . warning > . bar { background-color : #975fe4 !important } footer { background-color : #2f2f2f ; color : #f2f2f2 ; font-size : 14 px } footer . footer-container { display : -webkit- box ; display : -ms- flexbox ; display : flex ; -webkit- box-pack : center ; -ms- flex-pack : center ; justify-content : center ; -webkit- box-orient : vertical ; -webkit- box-direction : normal ; -ms- flex-direction : column ; flex-direction : column ; text-align : center ; padding : 1 rem } footer . footer-container p { width : 100 % ; margin-top : 1 rem } footer . footer-container a { color : #f2f2f2 } footer . footer-container div { width : 100 % } # back-to-top { display : -webkit- box ; display : -ms- flexbox ; display : flex ; -webkit- box-pack : center ; -ms- flex-pack : center ; justify-content : center ; -webkit- box-align : center ; -ms- flex-align : center ; align-items : center ; background-color : #FF9800 ; width : 45 px ; height : 45 px ; border-radius : 50 % ; position : fixed ; bottom : 30 px ; right : 30 px ; -webkit- transition : background-color .3 s ,
2021-01-20 09:22:17 -05:00
opacity . 5s , visibility . 5s ; transition : background-color . 3s ,
2021-01-24 01:56:16 -05:00
opacity . 5s , visibility . 5s ; opacity : 0 ; visibility : hidden ; z-index : 1000 } # back-to-top : after { font-family : "Font Awesome 5 Free" ; font-weight : 900 ; content : "\f106" ; font-size : 2.2 em ; color : #fff } # back-to-top : hover { cursor : pointer ; background-color : #cc7a00 } # back-to-top : active { background-color : #cc7a00 } # back-to-top . show { opacity : 1 ; visibility : visible } . nav-bar { display : -ms- grid ; display : grid ; -webkit- box-align : center ; -ms- flex-align : center ; align-items : center ; -ms- grid-columns : 1 fr 3 fr ; grid-template-columns : 1 fr 3 fr ; -ms- grid-rows : auto 1 fr ; grid-template-rows : auto 1 fr ; background-color : #2a3950 ; padding : .8 em 8 em } @ media ( max-width : 1250px ) { . nav-bar { padding : .8 em 3 em } } @ media ( max-width : 900px ) { . nav-bar { padding : .8 em 1 em } } @ media ( max-width : 500px ) { . nav-bar { -ms- grid-columns : auto 3 fr ; grid-template-columns : auto 3 fr } } . nav-bar . logo { color : #f2f2f2 ; -ms- grid-column-align : start ; justify-self : start ; font-size : 1.2 em } . nav-bar a { color : #f2f2f2 } . nav-bar li : last-child { background-color : #07090d } . icon-container { -ms- grid-column-align : end ; justify-self : end ; display : none } . icon-container . col { display : block ; float : left ; margin : 1 % 0 1 % 1.6 % } . icon-container . col : first-of-type { margin-left : 0 } . icon-container . cf : before , . icon-container . cf : after { content : " " ; display : table } . icon-container . cf : after { clear : both } . icon-container . cf { * zoom : 1 } . icon-container . three { color : #ecf0f1 ; text-align : center } . icon-container . hamburger . line { width : 50 px ; height : 5 px ; background-color : #ecf0f1 ; display : block ; margin : 8 px auto ; -webkit- transition : all 0.3 s ease-in-out ; transition : all 0.3 s ease-in-out } . icon-container . hamburger : hover { cursor : pointer } . icon-container # hamburger-icon . is-active { -webkit- transition : all 0.3 s ease-in-out ; transition : all 0.3 s ease-in-out ; -webkit- transition-delay : 0.6 s ; transition-delay : 0.6 s ; -webkit- transform : rotate ( 45 deg ) ; transform : rotate ( 45 deg ) } . icon-container # hamburger-icon . is-active . line : nth-child ( 2 ) { width : 0 px } . icon-container # hamburger-icon . is-active . line : nth-child ( 1 ) , . icon-container # hamburger-icon . is-active . line : nth-child ( 3 ) { -webkit- transition-delay : 0.3 s ; transition-delay : 0.3 s } . icon-container # hamburger-icon . is-active . line : nth-child ( 1 ) { -webkit- transform : translateY ( 13 px ) ; transform : translateY ( 13 px ) } . icon-container # hamburger-icon . is-active . line : nth-child ( 3 ) { -webkit- transform : translateY ( -13 px ) rotate ( 90 deg ) ; transform : translateY ( -13 px ) rotate ( 90 deg ) } . nav-menu { -ms- grid-column-align : end ; justify-self : end } . nav-menu li { display : inline-block } . nav-menu li a { display : block ; padding : .8 em 1.6 em } @ media screen and ( max-width : 900px ) { . icon-container { display : -webkit- box ; display : -ms- flexbox ; display : flex ; -webkit- transform : scale ( 0.8 ) ; transform : scale ( 0.8 ) } . nav-menu { display : none ; width : 100 % } . nav-menu . active { display : block ; grid-column : 1 / -1 } . nav-menu li { display : block ; border-bottom : 1 px solid rgba ( 255 , 255 , 255 , 0.3 ) } . nav-menu li : last-child { border : none } . nav-menu li a { padding : 1 em ; font-weight : bold } } body [ data-gridlist = "list" ] # app { -ms- grid-columns : 1 fr ; grid-template-columns : 1 fr ; grid-gap : 2 em } @ media ( max-width : 1250px ) { body [ data-gridlist = "list" ] # app { grid-row-gap : 3 em } } body [ data-gridlist = "list" ] . server-info-container { -ms- grid-rows : 1 fr auto ; grid-template-rows : 1 fr auto } body [ data-gridlist = "list" ] . info-body ul { grid-template-areas : "state flag . system location memory boot ram disk down up cpu-bar cpu-bar ram-bar ram-bar disk-bar disk-bar"
2021-01-21 12:21:38 -05:00
"name name name system location memory boot ram disk down up cpu-bar cpu-bar ram-bar ram-bar disk-bar disk-bar" } @ media ( max-width : 1250px ) { body [ data-gridlist = "list" ] . info-body ul { grid-template-areas : "state state state name name name name name flag flag flag flag flag flag"
"system location memory boot ram disk down up cpu-bar cpu-bar ram-bar ram-bar disk-bar disk-bar" } } @ media ( max-width : 900px ) { body [ data-gridlist = "list" ] . info-body ul { grid-template-areas : "state state state state name name name name name name name flag flag flag"
2021-01-20 09:22:17 -05:00
"system system system system system system system location location location location location location location"
"memory memory memory memory memory memory memory boot boot boot boot boot boot boot"
"ram ram ram ram ram ram ram disk disk disk disk disk disk disk"
"down down down down down down down up up up up up up up"
"cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar"
"ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar"
2021-01-24 01:56:16 -05:00
"disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar" } body [ data-gridlist = "list" ] . info-body ul li { -webkit- box-orient : horizontal !important ; -webkit- box-direction : normal !important ; -ms- flex-direction : row !important ; flex-direction : row !important } body [ data-gridlist = "list" ] . info-body ul li : nth-child ( n + 4 ) :: before { padding-bottom : 0 !important } body [ data-gridlist = "list" ] . info-body ul li : nth-last-child ( -n + 3 ) : before { content : "" !important } body [ data-gridlist = "list" ] . info-body ul li . cpu-bar , body [ data-gridlist = "list" ] . info-body ul li . ram-bar , body [ data-gridlist = "list" ] . info-body ul li . disk-bar { -ms- grid-columns : 15 % auto !important ; grid-template-columns : 15 % auto !important ; width : 100 % } body [ data-gridlist = "list" ] . info-body ul li . cpu-bar h4 , body [ data-gridlist = "list" ] . info-body ul li . ram-bar h4 , body [ data-gridlist = "list" ] . info-body ul li . disk-bar h4 { display : block !important } } body [ data-gridlist = "list" ] . info-body ul li { -webkit- box-orient : vertical ; -webkit- box-direction : normal ; -ms- flex-direction : column ; flex-direction : column } body [ data-gridlist = "list" ] . info-body ul li : nth-child ( n + 4 ) : before { padding-bottom : 0.5 em } body [ data-gridlist = "list" ] . info-body ul li : nth-child ( 1 ) { -ms- grid-column : 1 ; -ms- grid-column-span : 1 ; grid-column : 1 / 2 ; -ms- grid-column-align : start ; justify-self : start } body [ data-gridlist = "list" ] . info-body ul li : nth-child ( 2 ) { -ms- grid-column : 1 ; -ms- grid-column-span : 2 ; grid-column : 1 / 3 ; -ms- grid-column-align : start ; justify-self : start } @ media ( max-width : 1250px ) { body [ data-gridlist = "list" ] . info-body ul li : nth-child ( 2 ) { -ms- grid-column : 2 ; -ms- grid-column-span : 10 ; grid-column : 2 / 12 ; -ms- grid-column-align : center ; justify-self : center } } body [ data-gridlist = "list" ] . info-body ul li : nth-child ( 3 ) { -ms- grid-column-align : end ; justify-self : end ; -ms- grid-column : 2 ; -ms- grid-column-span : 1 ; grid-column : 2 / 3 } @ media ( max-width : 1250px ) { body [ data-gridlist = "list" ] . info-body ul li : nth-child ( 3 ) { grid-column : 1 / -1 } } body [ data-gridlist = "list" ] . info-body ul li : nth-child ( n + 4 ) : nth-child ( -n + 11 ) { border : none } body [ data-gridlist = "list" ] . info-body ul li : nth-child ( 12 ) { display : -webkit- box ; display : -ms- flexbox ; display : flex ; -webkit- box-orient : vertical ; -webkit- box-direction : normal ; -ms- flex-direction : column ; flex-direction : column ; padding : .6 em } body [ data-gridlist = "list" ] . info-body ul li : nth-child ( 12 ) : before { content : "CPU" } body [ data-gridlist = "list" ] . info-body ul li : nth-child ( 13 ) { display : -webkit- box ; display : -ms- flexbox ; display : flex ; -webkit- box-orient : vertical ; -webkit- box-direction : normal ; -ms- flex-direction : column ; flex-direction : column ; padding : .6 em } body [ data-gridlist = "list" ] . info-body ul li : nth-child ( 13 ) : before { content : "RAM" } body [ data-gridlist = "list" ] . info-body ul li : nth-child ( 14 ) { display : -webkit- box ; display : -ms- flexbox ; display : flex ; -webkit- box-orient : vertical ; -webkit- box-direction : normal ; -ms- flex-direction : column ; flex-direction : column ; padding : .6 em } body [ data-gridlist = "list" ] . info-body ul li : nth-child ( 14 ) : before { content : "硬盘" } body [ data-gridlist = "list" ] . info-body ul li . cpu-bar , body [ data-gridlist = "list" ] . info-body ul li . ram-bar , body [ data-gridlist = "list" ] . info-body ul li . disk-bar { -ms- grid-columns : 1 fr ; grid-template-columns : 1 fr } body [ data-gridlist = "list" ] . info-body ul li . cpu-bar h4 , body [ data-gridlist = "list" ] . info-body ul li . ram-bar h4 , body [ data-gridlist = "list" ] . info-body ul li . disk-bar h4 { display : none } . toggle-container { display : -ms- grid ; display : grid ; -webkit- box-pack : center ; -ms- flex-pack : center ; justify-content : center ; -webkit- box-align : center ; -ms- flex-align : center ; align-items : center ; -ms- grid-columns : 1 fr 1 fr ; grid-template-columns : 1 fr 1 fr ; padding-top : 2 em } . toggle-container . dark-mode-toggle , . toggle-container . grid-mode-toggle { display : -webkit- box ; display : -ms- flexbox ; display : flex ; -webkit- box-align : center ; -ms- flex-align : center ; align-items : center ; -webkit- box-pack : center ; -ms- flex-pack : center ; justify-content : center } . toggle-container . dark-mode-toggle . switcher , . toggle-container . grid-mode-toggle . switcher { -webkit- user-select : none ; -moz- user-select : none ; -ms- user-select : none ; user-select : none ; cursor : pointer ; padding : .6 em .8
2021-01-20 09:22:17 -05:00
"system system system location location location"
"memory memory memory boot boot boot"
"ram ram ram disk disk disk"
"down down down up up up"
"cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar"
"ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar"
2021-01-24 01:56:16 -05:00
"disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar" } . info-body ul li { list-style : none ; padding : .6 em ; margin : 0.3 em ; display : -webkit- box ; display : -ms- flexbox ; display : flex ; -webkit- box-pack : justify ; -ms- flex-pack : justify ; justify-content : space-between ; word-break : break-all ; border-bottom : 1 px solid #d9d9d9 } . info-body ul li p { padding : 0.3 em 1 em ; font-size : 0.6 em } . info-body ul li h3 { font-size : 1.05 em } . info-body ul li . state-online { background-color : #53b449 ; border-radius : 4 px } . info-body ul li . state-offline { background-color : #ef4b4c ; border-radius : 4 px } . info-body ul li img { border : 1 px solid rgba ( 0 , 0 , 0 , 0.25 ) ; border-radius : 6 px } . info-body ul li : not ( : nth-child ( 1 ) ) :: before { font-weight : bold } . info-body ul li : nth-child ( 1 ) { -ms- grid-row : 1 ; -ms- grid-column : 1 ; -ms- grid-column-span : 2 ; grid-area : state ; -ms- flex-item-align : center ; -ms- grid-row-align : center ; align-self : center ; -ms- grid-column-align : center ; justify-self : center ; border : none ; font-size : 1.2 em } @ media ( max-width : 500px ) { . info-body ul li : nth-child ( 1 ) { -ms- grid-column-align : start ; justify-self : start } } . info-body ul li : nth-child ( 2 ) { -ms- grid-row : 1 ; -ms- grid-column : 3 ; -ms- grid-column-span : 2 ; grid-area : name ; -ms- flex-item-align : center ; -ms- grid-row-align : center ; align-self : center ; -ms- grid-column-align : center ; justify-self : center ; border : none } . info-body ul li : nth-child ( 3 ) { -ms- grid-row : 1 ; -ms- grid-column : 5 ; -ms- grid-column-span : 2 ; grid-area : flag ; -ms- flex-item-align : center ; -ms- grid-row-align : center ; align-self : center ; -ms- grid-column-align : center ; justify-self : center ; border : none } @ media ( max-width : 500px ) { . info-body ul li : nth-child ( 3 ) { -ms- grid-column-align : end ; justify-self : end } } . info-body ul li : nth-child ( 4 ) { -ms- grid-row : 2 ; -ms- grid-column : 1 ; -ms- grid-column-span : 3 ; grid-area : system ; text-transform : capitalize } . info-body ul li : nth-child ( 4 ) : before { content : "系统" } . info-body ul li : nth-child ( 5 ) { -ms- grid-row : 2 ; -ms- grid-column : 4 ; -ms- grid-column-span : 3 ; grid-area : location } . info-body ul li : nth-child ( 5 ) : before { content : "位置" } . info-body ul li : nth-child ( 6 ) { -ms- grid-row : 3 ; -ms- grid-column : 1 ; -ms- grid-column-span : 3 ; grid-area : memory } . info-body ul li : nth-child ( 6 ) : before { content : "内存" } . info-body ul li : nth-child ( 7 ) { -ms- grid-row : 3 ; -ms- grid-column : 4 ; -ms- grid-column-span : 3 ; grid-area : boot } . info-body ul li : nth-child ( 7 ) : before { content : "在线" } . info-body ul li : nth-child ( 8 ) { -ms- grid-row : 4 ; -ms- grid-column : 1 ; -ms- grid-column-span : 3 ; grid-area : ram } . info-body ul li : nth-child ( 8 ) : before { content : "交换" } . info-body ul li : nth-child ( 9 ) { -ms- grid-row : 4 ; -ms- grid-column : 4 ; -ms- grid-column-span : 3 ; grid-area : disk } . info-body ul li : nth-child ( 9 ) : before { content : "硬盘" } . info-body ul li : nth-child ( 10 ) { -ms- grid-row : 5 ; -ms- grid-column : 1 ; -ms- grid-column-span : 3 ; grid-area : down } . info-body ul li : nth-child ( 10 ) : before { content : "下载 \f884" ; font-family : "Font Awesome 5 Free" ; font-weight : 900 } . info-body ul li : nth-child ( 11 ) { -ms- grid-row : 5 ; -ms- grid-column : 4 ; -ms- grid-column-span : 3 ; grid-area : up } . info-body ul li : nth-child ( 11 ) : before { content : "上传 \f161" ; font-family : "Font Awesome 5 Free" ; font-weight : 900 } . info-body ul li : nth-child ( 12 ) { -ms- grid-row : 6 ; -ms- grid-column : 1 ; -ms- grid-column-span : 6 ; grid-area : cpu-bar ; border : none ; display : inline-block ; padding : .3 em .6 em } . info-body ul li : nth-child ( 13 ) { -ms- grid-row : 7 ; -ms- grid-column : 1 ; -ms- grid-column-span : 6 ; grid-area : ram-bar ; border : none ; display : inline-block ; padding : .3 em .6 em } . info-body ul li : nth-child ( 14 ) { -ms- grid-row : 8 ; -ms- grid-column : 1 ; -ms- grid-column-span : 6 ; grid-area : disk-bar ; border : none ; display : inline-block ; padding : .3 em .6 em .6 em } . info-body ul li . cpu-bar , . info-body ul li . ram-bar , . info-body ul li . disk-bar { display : -ms- grid ; display : grid ; -ms- grid-columns : 15 % auto ; grid-template-columns : 15 % auto ; -webkit- box-align : center ; -ms- flex-align : center ; align-items : center } . info-body ul li . cpu-bar div : first-child , . info-body ul li . ram-bar div : first-child , . info-body ul li . disk-bar div : first-child { -ms- flex-item-align : center ; -ms- grid-row-align : center ; align-self : center } . info-body ul li . cpu-bar p , . info-body ul li . ram-bar p , . info-body ul li . disk-bar p { word-break : keep-all ; font-size : 0.8 em } @ media ( max-width : 500px ) { . info-body ul li . cpu-bar p , . info-body ul li . ram-bar p , . info-bod