2021-01-21 12:21:38 -05:00
body . transition-theme , body . transition-theme * , body . transition-theme * : before , body . transition-theme * : after { -webkit- transition : cubic-bezier ( 0.68 , -0.55 , 0.27 , 1.55 ) 200 ms !important ; transition : cubic-bezier ( 0.68 , -0.55 , 0.27 , 1.55 ) 200 ms !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 } . dark-mode-toggle , . 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 } . dark-mode-toggle . switcher , . grid-mode-toggle . switcher { -webkit- user-select : none ; -moz- user-select : none ; -ms- user-select : none ; user-select : none ; cursor : pointer ; padding : .8 em 1.2 em ; border-radius : 10 px ; border : 1 px solid rgba ( 255 , 255 , 255 , 0.1 ) ; background : #fbb142 ; -webkit- transition : background-color 400 ms cubic-bezier ( 0.995 , -0.265 , 0.855 , 0.505 ) , -webkit- box-shadow 100 ms linear ; transition : background-color 400 ms cubic-bezier ( 0.995 , -0.265 , 0.855 , 0.505 ) , -webkit- box-shadow 100 ms linear ; transition : background-color 400 ms cubic-bezier ( 0.995 , -0.265 , 0.855 , 0.505 ) , box-shadow 100 ms linear ; transition : background-color 400 ms cubic-bezier ( 0.995 , -0.265 , 0.855 , 0.505 ) , box-shadow 100 ms linear , -webkit- box-shadow 100 ms linear } . dark-mode-toggle . switcher div i + i , . grid-mode-toggle . switcher div i + i { margin-left : 1 em } . dark-mode-toggle . switcher div . fas . fa-sun , . grid-mode-toggle . switcher div . fas . fa-sun , . dark-mode-toggle . switcher div . fas . fa-moon , . grid-mode-toggle . switcher div . fas . fa-moon , . dark-mode-toggle . switcher div . fas . fa-th , . grid-mode-toggle . switcher div . fas . fa-th , . dark-mode-toggle . switcher div . fas . fas . fa-list-ul , . grid-mode-toggle . switcher div . fas . fas . fa-list-ul { font-size : 1.4 em } . dark-mode-toggle . switcher input [ type = "checkbox" ] , . grid-mode-toggle . switcher input [ type = "checkbox" ] { height : 0 ; width : 0 ; display : none } . dark-mode-toggle . switcher input [ type = "checkbox" ] + div > i , . grid-mode-toggle . switcher input [ type = "checkbox" ] + div > i { -webkit- transition : all 400 ms cubic-bezier ( 0.995 , -0.265 , 0.855 , 0.505 ) ; transition : all 400 ms cubic-bezier ( 0.995 , -0.265 , 0.855 , 0.505 ) } . dark-mode-toggle . switcher inp
2021-01-20 09:22:17 -05:00
opacity . 5s , visibility . 5s ; transition : background-color . 3s ,
2021-01-21 12:21:38 -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 } } . toggle-grid-mode input [ type = "checkbox" ] { height : 0 ; width : 0 ; visibility : hidden } . toggle-grid-mode label { cursor : pointer ; text-indent : -9999 px ; width : 52 px ; height : 27 px ; background : grey !important ; display : block ; border-radius : 100 px ; position : relative } . toggle-grid-mode label : after { content : "" ; position : absolute ; top : 3 px ; left : 3 px ; width : 20 px ; height : 20 px ; background : #fff ; border-radius : 90 px ; -webkit- transition : 0.3 s ; transition : 0.3 s } . toggle-grid-mode input : checked + label { background : #444 ; border : 1 px solid rgba ( 255 , 255 , 255 , 0.1 ) } . toggle-grid-mode input : checked + label : after { left : calc ( 100 % - 5 px ) ; -webkit- transform : translateX ( -100 % ) ; transform : translateX ( -100 % ) } . toggle-grid-mode label : active : after { width : 45 px } 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"
"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-21 12:21:38 -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 } . grid-mode-toggle . switcher { background-color : #1670c5 ; border : 1 px solid rgba ( 255 , 255 , 255 , 0.1 ) } . grid-mode-toggle . switcher input [ type = "checkbox" ] : checked + div > : first-child { color : #2a3950 } . grid-mode-toggle . switcher input [ type = "checkbox" ] : checked + div > : last-child { color : #fff ; -webkit- transform : rotate ( 0 deg ) ; transform : rotate ( 0 deg ) } . grid-mode-toggle . switcher input [ type = "checkbox" ] : not ( : checked ) + div > : last-child { color : #121212 } . grid-mode-toggle . switcher input [ type = "checkbox" ] : not ( : checked ) + div > : first-child { color : #fff ; -webkit- transform : rotate ( 0 deg ) ; transform : rotate ( 0 deg ) } . toggle-container { display : -ms- grid ; display : grid ; -webkit- box-pack : center ; -ms- flex-pack : center ; justify-content : center ; -webkit- box-align : center ; -ms- f l e x - a l i g n
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-21 12:21:38 -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