From 863e92fc246f081eaddd02142a3f381f7cfbf841 Mon Sep 17 00:00:00 2001 From: Bailey Matthews Date: Sat, 9 Sep 2023 13:19:10 +0100 Subject: [PATCH 01/99] feat: convert colours to CSS3 variables --- .../plugins/dynamix/styles/default-white.css | 590 ++++++++++-------- 1 file changed, 328 insertions(+), 262 deletions(-) diff --git a/emhttp/plugins/dynamix/styles/default-white.css b/emhttp/plugins/dynamix/styles/default-white.css index 3c7509976..1fa1ecce7 100644 --- a/emhttp/plugins/dynamix/styles/default-white.css +++ b/emhttp/plugins/dynamix/styles/default-white.css @@ -1,262 +1,328 @@ -html{font-family:clear-sans,sans-serif;font-size:62.5%;height:100%} -body{font-size:1.3rem;color:#1c1b1b;background-color:#f2f2f2;padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} -img{border:none;text-decoration:none;vertical-align:middle} -p{text-align:justify} -p.centered{text-align:left} -p:empty{display:none} -a:hover{text-decoration:underline} -a{color:#486dba;text-decoration:none} -a.none{color:#1c1b1b} -a.img{text-decoration:none;border:none} -a.info{position:relative} -a.info span{display:none;white-space:nowrap;font-variant:small-caps;position:absolute;top:16px;left:12px;line-height:2rem;color:#f2f2f2;padding:5px 8px;border:1px solid rgba(255,255,255,0.25);border-radius:3px;background-color:rgba(25,25,25,0.95);box-shadow:0 0 3px #303030} -a.info:hover span{display:block;z-index:1} -a.nohand{cursor:default} -a.hand{cursor:pointer;text-decoration:none} -a.static{cursor:default;color:#909090;text-decoration:none} -a.view{display:inline-block;width:20px} -i.spacing{margin-left:-6px} -i.icon{font-size:1.6rem;margin-right:4px;vertical-align:middle} -i.title{margin-right:8px} -i.control{cursor:pointer;color:#909090;font-size:1.8rem} -i.favo{display:none;font-size:1.8rem;position:absolute;margin-left:12px} -hr{border:none;height:1px!important;color:#e3e3e3;background-color:#e3e3e3} -input[type=text],input[type=password],input[type=number],input[type=url],input[type=email],input[type=date],input[type=file],textarea,.textarea{font-family:clear-sans;font-size:1.3rem;background-color:transparent;border:none;border-bottom:1px solid #1c1b1b;padding:4px 0;text-indent:0;min-height:2rem;line-height:2rem;outline:none;width:300px;margin:0 20px 0 0;box-shadow:none;border-radius:0;color:#1c1b1b} -input[type=button],input[type=reset],input[type=submit],button,button[type=button],a.button,.sweet-alert button{font-family:clear-sans;font-size:1.1rem;font-weight:bold;letter-spacing:1.8px;text-transform:uppercase;min-width:86px;margin:10px 12px 10px 0;padding:8px;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;outline:none;border-radius:4px;border:none;color:#ff8c2f;background:-webkit-gradient(linear,left top,right top,from(#e22828),to(#ff8c2f)) 0 0 no-repeat,-webkit-gradient(linear,left top,right top,from(#e22828),to(#ff8c2f)) 0 100% no-repeat,-webkit-gradient(linear,left bottom,left top,from(#e22828),to(#e22828)) 0 100% no-repeat,-webkit-gradient(linear,left bottom,left top,from(#ff8c2f),to(#ff8c2f)) 100% 100% no-repeat;background:linear-gradient(90deg,#e22828 0,#ff8c2f) 0 0 no-repeat,linear-gradient(90deg,#e22828 0,#ff8c2f) 0 100% no-repeat,linear-gradient(0deg,#e22828 0,#e22828) 0 100% no-repeat,linear-gradient(0deg,#ff8c2f 0,#ff8c2f) 100% 100% no-repeat;background-size:100% 2px,100% 2px,2px 100%,2px 100%} -input[type=checkbox]{vertical-align:middle;margin-right:6px} -input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance: none} -input[type=number]{-moz-appearance:textfield} -input:focus[type=text],input:focus[type=password],input:focus[type=number],input:focus[type=url],input:focus[type=email],input:focus[type=file],textarea:focus,.sweet-alert button:focus{background-color:#e8e8e8;outline:0} -input:hover[type=button],input:hover[type=reset],input:hover[type=submit],button:hover,button:hover[type=button],a.button:hover,.sweet-alert button:hover{color:#f2f2f2;background:-webkit-gradient(linear,left top,right top,from(#e22828),to(#ff8c2f));background:linear-gradient(90deg,#e22828 0,#ff8c2f)} -input[disabled],textarea[disabled]{color:#1c1b1b;border-bottom-color:#a2a2a2;opacity:0.5;cursor:default} -input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled],button[disabled],button[type=button][disabled],a.button[disabled] -input:hover[type=button][disabled],input:hover[type=reset][disabled],input:hover[type=submit][disabled],button:hover[disabled],button:hover[type=button][disabled],a.button:hover[disabled] -input:active[type=button][disabled],input:active[type=reset][disabled],input:active[type=submit][disabled],button:active[disabled],button:active[type=button][disabled],a.button:active[disabled],.sweet-alert button[disabled]{opacity:0.5;cursor:default;color:#808080;background:-webkit-gradient(linear,left top,right top,from(#404040),to(#808080)) 0 0 no-repeat,-webkit-gradient(linear,left top,right top,from(#404040),to(#808080)) 0 100% no-repeat,-webkit-gradient(linear,left bottom,left top,from(#404040),to(#404040)) 0 100% no-repeat,-webkit-gradient(linear,left bottom,left top,from(#808080),to(#808080)) 100% 100% no-repeat;background:linear-gradient(90deg,#404040 0,#808080) 0 0 no-repeat,linear-gradient(90deg,#404040 0,#808080) 0 100% no-repeat,linear-gradient(0deg,#404040 0,#404040) 0 100% no-repeat,linear-gradient(0deg,#808080 0,#808080) 100% 100% no-repeat;background-size:100% 2px,100% 2px,2px 100%,2px 100%} -input::-webkit-input-placeholder{color:#486dba} -select{-webkit-appearance:none;font-family:clear-sans;font-size:1.3rem;min-width:166px;max-width:300px;padding:5px 8px 5px 0;text-indent:0;margin:0 10px 0 0;border:none;border-bottom:1px solid #1c1b1b;box-shadow:none;border-radius:0;color:#1c1b1b;background-color:transparent;background-image:linear-gradient(66.6deg, transparent 60%, #1c1b1b 40%),linear-gradient(113.4deg, #1c1b1b 40%, transparent 60%);background-position:calc(100% - 4px),100%;background-size:4px 6px,4px 6px;background-repeat:no-repeat;outline:none;display:inline-block;cursor:pointer} -select option{color:#1c1b1b;background-color:#e8e8e8} -select:focus{outline:0} -select[disabled]{color:#1c1b1b;border-bottom-color:#a2a2a2;opacity:0.5;cursor:default} -select[name=enter_view]{margin:0;padding:0 12px 0 0;border:none;min-width:auto} -select[name=enter_share]{font-size:1.1rem;padding:0;border:none;min-width:40px;float:right;margin-top:13px;margin-right:20px} -select[name=port_select]{border:none;min-width:54px;padding-top:0;padding-bottom:0} -select.narrow{min-width:76px} -select.auto{min-width:auto} -select.slot{min-width:44rem;max-width:44rem} -input.narrow{width:166px} -input.trim{width:76px;min-width:76px} -textarea{resize:none} -#header{position:absolute;top:0;left:0;width:100%;height:91px;z-index:102;margin:0;color:#f2f2f2;background-color:#1c1b1b;background-size:100% 90px;background-repeat:no-repeat} -#header .logo{float:left;margin-left:10px;color:#e22828;text-align:center} -#header .logo svg{width:160px;display:block;margin:25px 0 8px 0} -#header .block{margin:0;float:right;text-align:right;background-color:rgba(28,27,27,0.2);padding:10px 12px} -#header .text-left{float:left;text-align:right;padding-right:5px;border-right:solid medium #f15a2c} -#header .text-right{float:right;text-align:left;padding-left:5px} -#header .text-right a{color:#f2f2f2} -#header .text-right #licensetype{font-weight:bold;font-style:italic;margin-right:4px} -div.title{margin:20px 0 32px 0;padding:8px 10px;clear:both;border-bottom:1px solid #e3e3e3;background-color:#e8e8e8;letter-spacing:1.8px} -div.title span.left{font-size:1.4rem} -div.title span.right{font-size:1.4rem;padding-top:2px;padding-right:10px;float:right} -div.title span img{padding-right:4px} -div.title.shift{margin-top:-30px} -#menu{position:absolute;top:90px;left:0;right:0;display:grid;grid-template-columns:auto max-content;z-index:101} -.nav-tile{height:4rem;line-height:4rem;padding:0;margin:0;font-size:1.2rem;letter-spacing:1.8px;background-color:#1c1b1b;white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin} -.nav-tile::-webkit-scrollbar{height:5px} -.nav-tile.right{text-align:right} -.nav-item,.nav-user{position:relative;display:inline-block;text-align:center;margin:0} -.nav-item a{min-width:0} -.nav-item a span{display:none} -.nav-item .system{vertical-align:middle;padding-bottom:2px} -.nav-item a{color:#f2f2f2;background-color:transparent;text-transform:uppercase;font-weight:bold;display:block;padding:0 10px} -.nav-item a{text-decoration:none;text-decoration-skip-ink:auto;-webkit-text-decoration-skip:objects;-webkit-transition:all .25s ease-out;transition:all .25s ease-out} -.nav-item:after,.nav-user.show:after{border-radius:4px;display:block;background-color:transparent;content:"";width:32px;height:2px;bottom:8px;position:absolute;left:50%;margin-left:-16px;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out;pointer-events:none} -.nav-item:focus:after,.nav-item:hover:after,.nav-user.show:hover:after{background-color:#f15a2c} -.nav-item.active:after{background-color:#f2f2f2} -.nav-user a{color:#f2f2f2;background-color:transparent;display:block;padding:0 10px} -.nav-user .system{vertical-align:middle;padding-bottom:2px} -#clear{clear:both} -#footer{position:fixed;bottom:0;left:0;color:#2b2a29;background-color:#d4d5d6;padding:5px 0;width:100%;height:1.6rem;line-height:1.6rem;text-align:center;z-index:10000} -#statusraid{float:left;padding-left:10px} -#countdown{margin:0 auto} -#copyright{font-family:bitstream;font-size:1.1rem;float:right;padding-right:10px} -.green{color:#4f8a10;padding-left:5px;padding-right:5px} -.red{color:#f0000c;padding-left:5px;padding-right:5px} -.orange{color:#e68a00;padding-left:5px;padding-right:5px} -.blue{color:#486dba;padding-left:5px;padding-right:5px} -.green-text,.passed{color:#4f8a10} -.red-text,.failed{color:#f0000c} -.orange-text,.warning{color:#e68a00} -.blue-text{color:#486dba} -.grey-text{color:#606060} -.green-orb{color:#33cc33} -.grey-orb{color:#c0c0c0} -.blue-orb{color:#0099ff} -.yellow-orb{color:#ff9900} -.red-orb{color:#ff3300} -.usage-bar{float:left;height:2rem;line-height:2rem;width:14rem;padding:1px 1px 1px 2px;margin:8px 12px;border-radius:3px;background-color:#585858;box-shadow:0 1px 0 #989898,inset 0 1px 0 #202020} -.usage-bar>span{display:block;height:100%;text-align:right;border-radius:2px;color:#f2f2f2;background-color:#808080;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)} -.usage-disk{position:relative;height:1.8rem;background-color:#dcdcdc;margin:0} -.usage-disk>span:first-child{position:absolute;left:0;margin:0!important;height:1.8rem;background-color:#a8a8a8} -.usage-disk>span:last-child{position:relative;top:-0.4rem;right:0;padding-right:6px;z-index:1} -.usage-disk.sys{height:12px;margin:-1.4rem 20px 0 44px} -.usage-disk.sys>span{height:12px;padding:0} -.usage-disk.sys.none{background-color:transparent} -.usage-disk.mm{height:3px;margin:5px 20px 0 0} -.usage-disk.mm>span:first-child{height:3px} -.notice{background:url(../images/notice.png) no-repeat 30px 50%;font-size:1.5rem;text-align:left;vertical-align:middle;padding-left:100px;height:6rem;line-height:6rem} -.notice.shift{margin-top:160px} -.greenbar{background:-webkit-gradient(linear,left top,right top,from(#127a05),to(#17bf0b));background:linear-gradient(90deg,#127a05 0,#17bf0b)} -.orangebar{background:-webkit-gradient(linear,left top,right top,from(#ce7c10),to(#ce7c10));background:linear-gradient(90deg,#ce7c10 0,#ce7c10)} -.redbar{background:-webkit-gradient(linear,left top,right top,from(#941c00),to(#de1100));background:linear-gradient(90deg,#941c00 0,#de1100)} -.graybar{background:-webkit-gradient(linear,left top,right top,from(#949494),to(#d9d9d9));background:linear-gradient(90deg,#949494 0,#d9d9d9)} -table{border-collapse:collapse;border-spacing:0;border-style:hidden;margin:-30px 0 0 0;width:100%;background-color:#f5f5f5} -table thead td{line-height:2.8rem;height:2.8rem;white-space:nowrap} -table tbody td{line-height:2.6rem;height:2.6rem;white-space:nowrap} -table tbody tr.alert{color:#f0000c} -table tbody tr.warn{color:#e68a00} -table.unraid thead tr:first-child>td{font-size:1.1rem;text-transform:uppercase;letter-spacing:1px;background-color:#e8e8e8} -table.unraid thead tr:last-child{border-bottom:1px solid #e3e3e3} -table.unraid tbody tr:nth-child(even){background-color:#ededed} -table.unraid tbody tr:not(.tr_last):hover>td{background-color:rgba(0,0,0,0.1)} -table.unraid tr>td{overflow:hidden;text-overflow:ellipsis;padding-left:8px} -table.unraid tr>td:hover{overflow:visible} -table.legacy{table-layout:auto!important} -table.legacy thead td{line-height:normal;height:auto;padding:7px 0} -table.legacy tbody td{line-height:normal;height:auto;padding:5px 0} -table.disk_status{table-layout:fixed} -table.disk_status tr>td:last-child{padding-right:8px} -table.disk_status tr>td:nth-child(1){width:13%} -table.disk_status tr>td:nth-child(2){width:30%} -table.disk_status tr>td:nth-child(3){width:8%;text-align:right} -table.disk_status tr>td:nth-child(n+4){width:7%;text-align:right} -table.disk_status tr.offline>td:nth-child(2){width:43%} -table.disk_status tr.offline>td:nth-child(n+3){width:5.5%} -table.disk_status tbody tr.tr_last{line-height:3rem;height:3rem;background-color:#ededed;border-top:1px solid #e3e3e3} -table.array_status{table-layout:fixed} -table.array_status tr>td{padding-left:8px;white-space:normal} -table.array_status tr>td:nth-child(1){width:33%} -table.array_status tr>td:nth-child(2){width:22%} -table.array_status.noshift{margin-top:0} -table.array_status td.line{border-top:1px solid #e3e3e3} -table.share_status{table-layout:fixed} -table.share_status tr>td{padding-left:8px} -table.share_status tr>td:nth-child(1){width:15%} -table.share_status tr>td:nth-child(2){width:30%} -table.share_status tr>td:nth-child(n+3){width:10%} -table.share_status tr>td:nth-child(5){width:15%} -table.dashboard{margin:0;border:none;background-color:#f7f9f9} -table.dashboard tbody{border:1px solid #dfdfdf} -table.dashboard tbody td{line-height:normal;height:auto;padding:3px 10px} -table.dashboard tr:first-child>td{height:3.6rem;padding-top:12px;font-size:1.6rem;font-weight:bold;letter-spacing:1.8px;text-transform:none;vertical-align:top} -table.dashboard tr:nth-child(even){background-color:transparent} -table.dashboard tr:last-child>td{padding-bottom:20px} -table.dashboard tr.last>td{padding-bottom:20px} -table.dashboard tr.header>td{padding-bottom:10px} -table.dashboard td{line-height:2.4rem;height:2.4rem} -table.dashboard td.stopgap{height:20px!important;line-height:20px!important;padding:0!important;background-color:#f2f2f2} -table.dashboard td.vpn{font-size:1.1rem;font-weight:bold;text-transform:uppercase;letter-spacing:1px} -table.dashboard td div.section{display:inline-block;vertical-align:top;margin-left:4px;font-size:1.2rem;font-weight:bold;text-transform:uppercase;letter-spacing:1px} -table.dashboard td div.section span{font-weight:normal;text-transform:none;letter-spacing:0;white-space:normal} -table.dashboard td span.info{float:right;margin-right:20px;font-size:1.2rem;font-weight:normal;text-transform:none;letter-spacing:0} -table.dashboard td span.info.title{font-weight:bold} -table.dashboard td span.load{display:inline-block;width:38px;text-align:right} -table.dashboard td span.finish{float:right;margin-right:24px} -table.dashboard i.control{float:right;font-size:1.4rem!important;margin:0 3px 0 0;cursor:pointer;color:#f7f9f9;background-color:rgba(0,0,0,0.3);padding:2px;border-radius:5px} -[name=arrayOps]{margin-top:12px} -span.error{color:#f0000c;background-color:#ff9e9e;display:block;width:100%} -span.warn{color:#e68a00;background-color:#feefb3;display:block;width:100%} -span.system{color:#0099ff;background-color:#bde5f8;display:block;width:100%} -span.array{color:#4f8a10;background-color:#dff2bf;display:block;width:100%} -span.login{color:#d63301;background-color:#ffddd1;display:block;width:100%} -span.lite{background-color:#ededed} -span.label{font-size:1.2rem;padding:2px 0 2px 6px;margin-right:6px;border-radius:4px;display:inline;width:auto;vertical-align:middle} -span.cpu-speed{display:block;color:#3b5998} -span.status{float:right;font-size:1.4rem;margin-top:30px;padding-right:8px;letter-spacing:1.8px} -span.status.vhshift{margin-top:0;margin-right:-9px} -span.status.vshift{margin-top:-16px} -span.status.hshift{margin-right:-20px} -span.diskinfo{float:left;clear:both;margin-top:5px;padding-left:10px} -span.bitstream{font-family:bitstream;font-size:1.1rem} -span.ucfirst{text-transform:capitalize} -span.strong{font-weight:bold} -span.big{font-size:1.4rem} -span.small{font-size:1.2rem} -span.outer{margin-bottom:20px;margin-right:0} -span.outer.solid{background-color:#F7F9F9} -span.hand{cursor:pointer} -span.outer.started>img,span.outer.started>i.img{opacity:1.0} -span.outer.stopped>img,span.outer.stopped>i.img{opacity:0.3} -span.outer.paused>img,span.outer.paused>i.img{opacity:0.6} -span.inner{display:inline-block;vertical-align:top} -span.state{font-size:1.1rem;margin-left:7px} -span.slots{display:inline-block;width:44rem;margin:0!important} -span.slots-left{float:left;margin:0!important} -input.subpool{float:right;margin:2px 0 0 0} -i.padlock{margin-right:8px;cursor:default;vertical-align:middle} -i.nolock{visibility:hidden;margin-right:8px;vertical-align:middle} -i.lock{margin-left:8px;cursor:default;vertical-align:middle} -i.orb{font-size:1.1rem;margin:0 8px 0 3px} -img.img,i.img{width:32px;height:32px;margin-right:10px} -img.icon{margin:-3px 4px 0 0} -img.list{width:auto;max-width:32px;height:32px} -i.list{font-size:32px} -a.list{text-decoration:none;color:inherit} -div.content{position:absolute;top:0;left:0;width:100%;padding-bottom:30px;z-index:-1;clear:both} -div.content.shift{margin-top:1px} -label+.content{margin-top:86px} -div.tabs{position:relative;margin:130px 0 0 0} -div.tab{float:left;margin-top:30px} -div.tab input[id^="tab"]{display:none} -div.tab [type=radio]+label:hover{background-color:transparent;border:1px solid #ff8c2f;border-bottom:none;cursor:pointer;opacity:1} -div.tab [type=radio]:checked+label{cursor:default;background-color:transparent;border:1px solid #ff8c2f;border-bottom:none;opacity:1} -div.tab [type=radio]+label~.content{display:none} -div.tab [type=radio]:checked+label~.content{display:inline} -div.tab [type=radio]+label{position:relative;font-size:1.4rem;letter-spacing:1.8px;padding:4px 10px;margin-right:2px;border-top-left-radius:6px;border-top-right-radius:6px;border:1px solid #b2b2b2;border-bottom:none;background-color:#e2e2e2;opacity:0.5} -div.tab [type=radio]+label img{padding-right:4px} -div.Panel{text-align:center;float:left;margin:0 0 30px 10px;padding-right:50px;height:8rem} -div.Panel a{text-decoration:none} -div.Panel span{height:42px;display:block} -div.Panel:hover .PanelText{text-decoration:underline} -div.Panel img.PanelImg{width:auto;max-width:32px;height:32px} -div.Panel i.PanelIcon{font-size:32px;color:#1c1b1b} -div.user-list{float:left;padding:10px;margin-right:10px;margin-bottom:24px;border:1px solid #dedede;border-radius:5px;line-height:2rem;height:10rem;width:10rem;background-color:#e8e8e8} -div.user-list img{width:auto;max-width:48px;height:48px;margin-bottom:16px} -div.up{margin-top:-30px;border:1px solid #e3e3e3;padding:4px 6px;overflow:auto} -div.spinner{text-align:center;cursor:wait} -div.spinner.fixed{display:none;position:fixed;top:0;left:0;z-index:99999;bottom:0;right:0;margin:0} -div.spinner .unraid_mark{height:64px; position:fixed;top:50%;left:50%;margin-top:-16px;margin-left:-64px} -div.spinner .unraid_mark_2,div .unraid_mark_4{animation:mark_2 1.5s ease infinite} -div.spinner .unraid_mark_3{animation:mark_3 1.5s ease infinite} -div.spinner .unraid_mark_6,div .unraid_mark_8{animation:mark_6 1.5s ease infinite} -div.spinner .unraid_mark_7{animation:mark_7 1.5s ease infinite} -div.domain{margin-top:-20px} -@keyframes mark_2{50% {transform:translateY(-40px)} 100% {transform:translateY(0px)}} -@keyframes mark_3{50% {transform:translateY(-62px)} 100% {transform:translateY(0px)}} -@keyframes mark_6{50% {transform:translateY(40px)} 100% {transform:translateY(0px)}} -@keyframes mark_7{50% {transform:translateY(62px)} 100% {transform: translateY(0px)}} -pre.up{margin-top:-30px} -pre{border:1px solid #e3e3e3;font-family:bitstream;font-size:1.3rem;line-height:1.8rem;padding:4px 6px;overflow:auto} -iframe#progressFrame{position:fixed;bottom:32px;left:0;margin:0;padding:8px 8px 0 8px;width:100%;height:1.2rem;line-height:1.2rem;border-style:none;overflow:hidden;font-family:bitstream;font-size:1.1rem;color:#808080;white-space:nowrap;z-index:-10} -dl{margin:0;padding-left:12px;line-height:2.6rem} -dt{width:35%;clear:left;float:left;font-weight:normal;text-align:right;margin-right:4rem} -dd{margin-bottom:12px;white-space:nowrap} -dd p{margin:0 0 4px 0} -dd blockquote{padding-left:0} -blockquote{width:90%;margin:10px auto;text-align:left;padding:4px 20px;border-top:2px solid #bce8f1;border-bottom:2px solid #bce8f1;color:#222222;background-color:#d9edf7} -blockquote.ontop{margin-top:-20px;margin-bottom:46px} -blockquote a{color:#ff8c2f;font-weight:600} -blockquote a:hover,blockquote a:focus{color:#f15a2c} -label.checkbox{display:block;position:relative;padding-left:28px;margin:3px 0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} -label.checkbox input{position:absolute;opacity:0;cursor:pointer} -span.checkmark{position:absolute;top:0;left:6px;height:14px;width:14px;background-color:#e3e3e3;border-radius:100%} -label.checkbox:hover input ~ .checkmark{background-color:#b3b3b3} -label.checkbox input:checked ~ .checkmark{background-color:#ff8c2f} -label.checkbox input:disabled ~ .checkmark{opacity:0.5} -a.bannerDismiss {float:right;cursor:pointer;text-decoration:none;margin-right:1rem} -.bannerDismiss::before {content:"\e92f";font-family:Unraid;color:#e68a00} -a.bannerInfo {cursor:pointer;text-decoration:none} -.bannerInfo::before {content:"\f05a";font-family:fontAwesome;color:#e68a00} -::-webkit-scrollbar{width:8px;height:8px;background:transparent} -::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px} -::-webkit-scrollbar-corner{background:lightgray;border-radius:10px} -::-webkit-scrollbar-thumb:hover{background:gray} +:root{--gray-000:rgb(255,255,255);/*#ffffff*/--gray-100:rgb(242,242,242);/*#f2f2f2*/--gray-200:rgb(211,211,211);/*#d3d3d3#d9d9d9#dcdcdc#d4d5d6*/--gray-300:rgb(204,204,204);/*gray#c0c0c0#a8a8a8*/--gray-400:rgb(144,144,144);/*#909090#989898#a2a2a2#949494*/--gray-500:rgb(128,128,128);/*#808080#606060#585858*/--gray-600:rgb(048,048,048);/*#303030#202020*/--gray-700:rgb(064,064,064);/*#404040*/--gary-800:rgb(025,025,025);/*#191919#2b2a29*/--gray-900:rgb(029,027,027);/*#1c1b1b*/ +--orange-200:rgb(255,153,0);/*#ff9900*/--orange-300:rgb(230,138,0);/*#e68a00*/--orange-400:rgb(206,124,16);/*#ce7c10*/--orange-500:rgb(255,140,47);/*#ff8c2f*/--orange-800:rgb(241,90,44);/*#f15a2c*/--orange-900:rgb(214,51,1);/*#d63301*/ +--red-100:rgb(255,221,209);/*#ffddd1*/--red-300:rgb(255,158,158);/*#ff9e9e*/--red-500:rgb(255,51,0);/*#ff3300*/--red-600:rgb(240,0,12);/*#f0000c*/--red-700:rgb(222,17,0);/*#de1100*/--red-800:rgb(226,40,40);/*#e22828*/--red-900:rgb(148,28,0);/*#941c00*/ +--green-100:rgb(223,242,191);/*#dff2bf*/--green-200:rgb(51,204,51);/*#33cc33*/--green-500:rgb(23,191,11);/*#17bf0b*/--green-800:rgb(79,138,16);/*#4f8a10*/--green-900:rgb(18,122,5);/*#127a05*/ +--blue-100:rgb(217,237,247);/*#d9edf7*/--blue-200:rgb(188,232,241);/*#bce8f1*/--blue-300:rgb(189,229,248);/*#bde5f8*/--blue-700:rgb(0,153,255);/*#0099ff*/--blue-800:rgb(072,109,186);/*#486dba*/--blue-900:rgb(59,89,152);/*#3b5998*/ +--yellow-100:rgb(255,246,191);/*#fff6bf*/--yellow-200:rgb(254,239,179);/*#feefb3*/--yellow-500:rgb(255,211,36);/*#ffd324*/ +--text-color:var(--gray-900);--background-color:var(--gray-100);} + +html{font-family:clear-sans;font-size:62.5%;height:100%;} +body{font-size:1.3rem;color:var(--text-color);background-color:var(--background-color);padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} +@media(max-width:1280px){#template{min-width:1260px;max-width:1260px;margin:0;}} +@media(min-width:1281px){#template{min-width:1260px;margin:010px;}} +@media(min-width:1921px){#template{min-width:1260px;max-width:1920px;margin:0auto;}} +img{border:none;text-decoration:none;vertical-align:middle;} +p{text-align:justify;} +p.centered{text-align:left;} +p:empty{display:none;} +a:hover{text-decoration:underline;} +a{color:var(--blue-800);text-decoration:none;} +a.none{color:var(--text-color);} +a.img{text-decoration:none;border:none;} +a.info{position:relative;} +a.infospan{display:none;white-space:nowrap;font-variant:small-caps;position:absolute;top:16px;left:12px;line-height:2rem;color:var(--gray-100);padding:5px8px;border:1pxsolidrgba(var(--gray-000),0.25);border-radius:3px;background-color:rgba(var(--gray-800),0.95);box-shadow:003pxvar(--gray-700);} +a.info:hoverspan{display:block;z-index:1;} +a.nohand{cursor:default;} +a.hand{cursor:pointer;text-decoration:none;} +a.static{cursor:default;color:var(--gray-400);text-decoration:none;} +a.view{display:inline-block;width:20px;} +i.spacing{margin-left:-6px;} +i.icon{font-size:1.6rem;margin-right:4px;vertical-align:middle;} +i.title{margin-right:8px;} +i.control{cursor:pointer;color:var(--gray-400);font-size:1.8rem;} +hr{border:none;height:1px!important;color:var(--gray-300);background-color:var(--gray-300);} +input[type="text"], +input[type="password"], +input[type="number"], +input[type="url"], +input[type="email"], +input[type="date"], +input[type="file"], +textarea, +.textarea{font-family:clear-sans;font-size:1.3rem;background-color:transparent;border:none;border-bottom:1pxsolidvar(--gray-900);padding:4px0;text-indent:0;min-height:2rem;line-height:2rem;outline:none;width:300px;margin:020px00;box-shadow:none;border-radius:0;color:var(--text-color);} +input[type="button"], +input[type="reset"], +input[type="submit"], +button, +button[type="button"], +a.button{font-family:clear-sans;font-size:1.1rem;font-weight:bold;letter-spacing:1.8px;text-transform:uppercase;min-width:86px;margin:10px12px10px0;padding:8px;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;outline:none;border-radius:4px;border:none;color:var(--orange-500);background:-webkit-gradient(linear,lefttop,righttop,from(var(--red-800)),to(var(--orange-500)))00no-repeat,-webkit-gradient(linear,lefttop,righttop,from(var(--red-800)),to(var(--orange-500)))0100%no-repeat,-webkit-gradient(linear,leftbottom,lefttop,from(var(--red-800)),to(var(--red-800)))0100%no-repeat,-webkit-gradient(linear,leftbottom,lefttop,from(var(--orange-500)),to(var(--orange-500)))100%100%no-repeat;background:linear-gradient(90deg,var(--red-800)0,var(--orange-500))00no-repeat,linear-gradient(90deg,var(--red-800)0,var(--orange-500))0100%no-repeat,linear-gradient(0deg,var(--red-800)0,var(--red-800))0100%no-repeat,linear-gradient(0deg,var(--orange-500)0,var(--orange-500))100%100%no-repeat;background-size:100%2px,100%2px,2px100%,2px100%;} +input[type="checkbox"]{vertical-align:middle;margin-right:6px;} +input[type="number"]::-webkit-outer-spin-button, +input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;} +input[type="number"]{-moz-appearance:textfield;} +input:focus[type="text"], +input:focus[type="password"], +input:focus[type="number"], +input:focus[type="url"], +input:focus[type="email"], +input:focus[type="file"], +textarea:focus{background-color:var(--gray-300);outline:0;} +input:hover[type="button"], +input:hover[type="reset"], +input:hover[type="submit"], +button:hover, +button:hover[type="button"], +a.button:hover{color:var(--gray-100);background:-webkit-gradient(linear,lefttop,righttop,from(var(--red-800)),to(var(--orange-500)));background:linear-gradient(90deg,var(--red-800)0,var(--orange-500));} +input[disabled], +textarea[disabled]{color:var(--text-color);border-bottom-color:var(--gray-400);opacity:0.5;cursor:default;} +input[type="button"][disabled], +input[type="reset"][disabled], +input[type="submit"][disabled], +button[disabled], +button[type="button"][disabled], +a.button[disabled]input:hover[type="button"][disabled], +input:hover[type="reset"][disabled], +input:hover[type="submit"][disabled], +button:hover[disabled], +button:hover[type="button"][disabled], +a.button:hover[disabled]input:active[type="button"][disabled], +input:active[type="reset"][disabled], +input:active[type="submit"][disabled], +button:active[disabled], +button:active[type="button"][disabled], +a.button:active[disabled]{cursor:default;color:var(--gray-500);background:-webkit-gradient(linear,lefttop,righttop,from(var(--gray-700)),to(var(--gray-500)))00no-repeat,-webkit-gradient(linear,lefttop,righttop,from(var(--gray-700)),to(var(--gray-500)))0100%no-repeat,-webkit-gradient(linear,leftbottom,lefttop,from(var(--gray-700)),to(var(--gray-700)))0100%no-repeat,-webkit-gradient(linear,leftbottom,lefttop,from(var(--gray-500)),to(var(--gray-500)))100%100%no-repeat;background:linear-gradient(90deg,var(--gray-700)0,var(--gray-500))00no-repeat,linear-gradient(90deg,var(--gray-700)0,var(--gray-500))0100%no-repeat,linear-gradient(0deg,var(--gray-700)0,var(--gray-700))0100%no-repeat,linear-gradient(0deg,var(--gray-500)0,var(--gray-500))100%100%no-repeat;background-size:100%2px,100%2px,2px100%,2px100%;} +input::-webkit-input-placeholder{color:var(--blue-800);} +select{-webkit-appearance:none;font-family:clear-sans;font-size:1.3rem;min-width:166px;max-width:300px;padding:5px8px5px0;text-indent:0;margin:010px00;border:none;border-bottom:1pxsolidvar(--gray-900);box-shadow:none;border-radius:0;color:var(--text-color);background-color:transparent;background-image:linear-gradient(66.6deg,transparent60%,var(--gray-900)40%),linear-gradient(113.4deg,var(--gray-900)40%,transparent60%);background-position:calc(100%-4px),100%;background-size:4px6px,4px6px;background-repeat:no-repeat;outline:none;display:inline-block;cursor:pointer;} +selectoption{color:var(--text-color);background-color:var(--gray-300);} +select:focus{outline:0;} +select[disabled]{color:var(--text-color);border-bottom-color:var(--gray-500);opacity:0.5;cursor:default;} +select[name="enter_view"]{margin:0;padding:012px00;border:none;min-width:auto;} +select[name="enter_share"]{font-size:1.1rem;padding:0;border:none;min-width:40px;float:right;margin-top:13px;margin-right:20px;} +select[name="port_select"]{border:none;min-width:54px;padding-top:0;padding-bottom:0;} +select.narrow{min-width:76px;} +select.auto{min-width:auto;} +select.slot{min-width:44rem;max-width:44rem;} +input.narrow{width:166px;} +input.trim{width:76px;min-width:76px;} +textarea{resize:none;} +#header{position:absolute;top:0;left:0;width:100%;min-width:1260px;height:91px;z-index:102;margin:0;color:var(--gray-100);background-color:var(--gray-900);background-size:100%90px;background-repeat:no-repeat;} +#header.logo{float:left;margin-left:10px;color:var(--red-800);text-align:center;} +#header.logosvg{width:160px;display:block;margin:25px08px0;} +#header.block{margin:0;float:right;text-align:right;background-color:rgba(var(--gray-900),0.3);padding:10px12px;} +#header.text-left{float:left;text-align:right;padding-right:5px;border-right:solidmediumvar(--orange-800);} +#header.text-right{float:right;text-align:left;padding-left:5px;} +#header.text-righta{color:var(--gray-100);} +#header.text-right#licensetype{font-weight:bold;font-style:italic;margin-right:4px;} +div.title{margin:20px032px0;padding:8px10px;clear:both;border-bottom:1pxsolidvar(--gray-300);background-color:var(--gray-300);letter-spacing:1.8px;} +div.titlespan.left{font-size:1.4rem;} +div.titlespan.right{font-size:1.4rem;padding-top:2px;padding-right:10px;float:right;} +div.titlespanimg{padding-right:4px;} +div.title.shift{margin-top:-30px;} +#menu{position:absolute;top:90px;left:0;right:0;display:grid;grid-template-columns:automax-content;z-index:101;} +.nav-tile{height:4rem;line-height:4rem;padding:0;margin:0;font-size:1.2rem;letter-spacing:1.8px;background-color:var(--gray-900);white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;} +.nav-tile::-webkit-scrollbar{height:8px;} +.nav-tile.right{text-align:right;} +.nav-item, +.nav-user{position:relative;display:inline-block;text-align:center;margin:0;} +.nav-itema{min-width:0;} +.nav-itemaspan{display:none;} +.nav-item.system{vertical-align:middle;padding-bottom:2px;} +.nav-itema{color:var(--gray-100);background-color:transparent;text-transform:uppercase;font-weight:bold;display:block;padding:010px;} +.nav-itema{text-decoration:none;text-decoration-skip-ink:auto;-webkit-text-decoration-skip:objects;-webkit-transition:all0.25sease-out;transition:all0.25sease-out;} +.nav-item:after, +.nav-user.show:after{border-radius:4px;display:block;background-color:transparent;content:"";width:32px;height:2px;bottom:8px;position:absolute;left:50%;margin-left:-16px;-webkit-transition:all0.25sease-in-out;transition:all0.25sease-in-out;pointer-events:none;} +.nav-item:focus:after, +.nav-item:hover:after, +.nav-user.show:hover:after{background-color:var(--orange-800);} +.nav-item.active:after{background-color:var(--background-color);} +.nav-usera{color:var(--gray-100);background-color:transparent;display:block;padding:010px;} +.nav-user.system{vertical-align:middle;padding-bottom:2px;} +#clear{clear:both;} +#footer{position:fixed;bottom:0;left:0;color:var(--gray-800);background-color:var(--gray-200);padding:5px0;width:100%;height:1.6rem;line-height:1.6rem;text-align:center;z-index:10000;} +#statusraid{float:left;padding-left:10px;} +#countdown{margin:0auto;} +#copyright{font-family:bitstream;font-size:1.1rem;float:right;padding-right:10px;} +.green{color:var(--green-800);padding-left:5px;padding-right:5px;} +.red{color:var(--red-600);padding-left:5px;padding-right:5px;} +.orange{color:var(--orange-300);padding-left:5px;padding-right:5px;} +.blue{color:var(--blue-800);padding-left:5px;padding-right:5px;} +.green-text, +.passed{color:var(--green-800);} +.red-text, +.failed{color:var(--red-600);} +.orange-text, +.warning{color:var(--orange-300);} +.blue-text{color:var(--blue-800);} +.grey-text{color:var(--gray-500);} +.green-orb{color:var(--green-200);} +.grey-orb{color:var(--gray-300);} +.blue-orb{color:var(--blue-700);} +.yellow-orb{color:var(--orange-200);} +.red-orb{color:var(--red-500);} +.usage-bar{float:left;height:2rem;line-height:2rem;width:14rem;padding:1px1px1px2px;margin:8px12px;border-radius:3px;background-color:var(--gray-500);box-shadow:01px0var(--gray-400),inset01px0var(--gray-600);} +.usage-bar>span{display:block;height:100%;text-align:right;border-radius:2px;color:var(--gray-100);background-color:var(--gray-500);box-shadow:inset01px0rgba(var(--gray-000),0.5);} +.usage-disk{position:relative;height:1.8rem;background-color:var(--gray-200);margin:0;} +.usage-disk>span:first-child{position:absolute;left:0;margin:0!important;height:1.8rem;background-color:var(--gray-300);} +.usage-disk>span:last-child{position:relative;padding-right:4px;z-index:1;} +.usage-disk.sys{height:12px;margin:-15px20px044px;} +.usage-disk.sys>span:first-child{height:12px;padding:0;} +.usage-disk.sys.none{background-color:transparent;} +.usage-disk.mm{height:3px;margin:5px20px00;} +.usage-disk.mm>span:first-child{height:3px;} +.notice{background:var(--yellow-100)url(../images/notice.png)no-repeat;background-position:60px50%;color:var(--text-color);font-size:1.4rem;text-align:left;padding:15px015px130px;display:block;height:7rem;line-height:7rem;vertical-align:middle;border-top:2pxsolidvar(--yellow-500);border-bottom:2pxsolidvar(--yellow-500);} +.notice.shift{margin-top:160px;} +.greenbar{background:-webkit-gradient(linear,lefttop,righttop,from(var(--green-900)),to(var(--green-500)));background:linear-gradient(90deg,var(--green-900)0,var(--green-500));} +.orangebar{background:-webkit-gradient(linear,lefttop,righttop,from(var(--orange-400)),to(var(--orange-400)));background:linear-gradient(90deg,var(--orange-400)0,var(--orange-400));} +.redbar{background:-webkit-gradient(linear,lefttop,righttop,from(var(--red-900)),to(var(--red-700)));background:linear-gradient(90deg,var(--red-900)0,var(--red-700));} +.graybar{background:-webkit-gradient(linear,lefttop,righttop,from(var(--gray-400)),to(var(--gray-200)));background:linear-gradient(90deg,var(--gray-400)0,var(--gray-200));} +table{border-collapse:collapse;border-spacing:0;border-style:hidden;margin:-30px000;width:100%;background-color:var(--background-color);} +tabletheadtd{padding:7px0;} +tabletbodytd{padding:5px0;} +tabletbodytr.tr_last{background-color:var(--background-color);border-top:1pxsolidvar(--gray-300);} +tabletd.cpu-info{border:1pxsolidvar(--gray-300);} +table.disk_status{white-space:nowrap;} +table.disk_statustdspan{margin-left:10px;} +table.disk_statustheadtr:first-childtd{font-size:1.1rem;text-transform:uppercase;letter-spacing:1px;background-color:var(--gray-200);} +table.disk_statustheadtr:last-child{border-bottom:1pxsolidvar(--gray-300);} +table.disk_statustr>td{width:10%;padding-left:12px;padding-right:0;white-space:nowrap;} +table.disk_statustr>td+td{width:auto;} +table.disk_statustr>td+td+td{width:6.5%;text-align:center;padding-left:4px;padding-right:8px;} +table.disk_statustr>td+td+td+td{text-align:right;padding-left:0;padding-right:12px;} +table.disk_statustbodytr:nth-child(even){background-color:var(--background-color);} +table.disk_statustbodytr:not(.tr_last):hovertd{background-color:rgba(var(--gray-900),0.1);} +table.disk_status.statstr>td+td{text-align:left;padding-left:0;padding-right:12px;} +table.array_statustd{padding:4px0;} +table.array_statustr>td{text-align:left;white-space:nowrap;padding-left:12px;width:30%;} +table.array_statustr>td+td{padding-left:2px;width:20%;} +table.array_statustr>td+td+td{width:auto;} +table.array_statustd.line{border-top:1pxsolidvar(--gray-300);} +table.array_status.noshift{margin-top:0;} +table.settings{margin:0;padding:0;background-color:transparent;} +table.settingstd:first-child{width:35%;padding:12px;} +table.settingstd+td{padding-left:8px;} +table.settings.shifted{padding:0;margin-left:0;margin-top:0;} +table.settings.shiftedtd{padding-left:0;} +table.access_list{border-spacing:0;margin-top:10px;border:none;} +table.access_listtr:first-childtd{font-size:1.1rem;text-transform:uppercase;letter-spacing:1px;vertical-align:middle;text-align:left;border:1pxsolidvar(--gray-300);border-bottom:1pxsolidvar(--gray-300);background-color:var(--gray-200);} +table.access_listtd:first-child{font-weight:normal;width:35%;padding-left:12px;} +table.access_listtr:first-childtd:first-child{font-weight:normal;} +table.access_listtr>td+td{white-space:nowrap;} +table.share_status{white-space:nowrap;} +table.share_statustheadtr:first-childtd{font-size:1.1rem;text-transform:uppercase;letter-spacing:1px;background-color:var(--gray-300);} +table.share_statustr>td{text-align:left;padding-left:12px;} +table.share_statustr>td+td{padding-left:0;} +table.share_statustbodytr:nth-child(even){background-color:var(--background-color);} +table.share_status:not(.dashboard)tbodytr:hovertd{background-color:rgba(var(--gray-900),0.1);} +table.share_statustbodytr.alert{color:var(--red-600);} +table.share_statustbodytr.warn{color:var(--orange-300);} +table.share_status.fixedtr>td+td{min-width:39px;font-size:1.1rem;text-align:center;padding:0;} +table.share_status.table{margin-top:36px;} +table.share_status.tabletr>td{width:50%;} +table.share_status.dashboard{margin:0;border:1pxsolidvar(--gray-200);} +table.share_status.dashboardtbody{border:1pxsolidvar(--gray-200);} +table.share_status.dashboardtr:first-child>td{height:3.6rem;padding-top:12px;font-size:1.6rem;font-weight:bold;letter-spacing:1.8px;text-transform:none;vertical-align:top;} +table.share_status.dashboardtr:nth-child(even){background-color:transparent;} +table.share_status.dashboardtr:last-child>td{padding-bottom:20px;} +table.share_status.dashboardtr.last>td{padding-bottom:20px;} +table.share_status.dashboardtr.headertd{padding-bottom:10px;} +table.share_status.dashboardtd{padding:3px10px;} +table.share_status.dashboardtd.vpn{font-size:1.1rem;font-weight:bold;text-transform:uppercase;letter-spacing:1px;} +table.share_status.dashboardtddiv.section{display:inline-block;vertical-align:top;margin-left:4px;font-size:1.2rem;font-weight:bold;text-transform:uppercase;letter-spacing:1px;} +table.share_status.dashboardtddiv.sectionspan{font-weight:normal;text-transform:none;letter-spacing:0;white-space:normal;} +table.share_status.dashboardtdspan.info{float:right;margin-right:20px;font-size:1.2rem;font-weight:normal;text-transform:none;letter-spacing:0;} +table.share_status.dashboardtdspan.info.title{font-weight:bold;} +table.share_status.dashboardtdspan.load{display:inline-block;width:38px;text-align:right;} +table.share_status.dashboardtdspan.finish{float:right;margin-right:24px;} +table.share_status.dashboardi.control{float:right;font-size:1.4rem!important;margin:03px00;cursor:pointer;background-color:rgba(var(--gray-900),0.1);padding:2px;} +[name="arrayOps"]{margin-top:12px;} +span.error{color:var(--red-600);background-color:var(--red-300);display:block;width:100%;} +span.warn{color:var(--orange-300);background-color:var(--yellow-200);display:block;width:100%;} +span.system{color:var(--blue-700);background-color:var(--blue-300);display:block;width:100%;} +span.array{color:var(--green-800);background-color:var(--green-100);display:block;width:100%;} +span.login{color:var(--orange-900);background-color:var(--red-100);display:block;width:100%;} +span.lite{background-color:var(--background-color);} +span.label{font-size:1.2rem;padding:2px02px6px;margin-right:6px;border-radius:4px;display:inline;width:auto;vertical-align:middle;} +span.cpu-speed{display:block;color:var(--blue-900);} +span.status{float:right;font-size:1.4rem;margin-top:30px;padding-right:8px;letter-spacing:1.8px;} +span.status.vhshift{margin-top:0;margin-right:-9px;} +span.status.vshift{margin-top:-16px;} +span.status.hshift{margin-right:-20px;} +span.diskinfo{float:left;clear:both;margin-top:5px;padding-left:10px;} +span.bitstream{font-family:bitstream;font-size:1.1rem;} +span.ucfirst{text-transform:capitalize;} +span.strong{font-weight:bold;} +span.big{font-size:1.4rem;} +span.small{font-size:1.2rem;} +span.outer{margin-bottom:20px;margin-right:0;} +span.outer.solid{background-color:var(--background-color);} +span.hand{cursor:pointer;} +span.outer.started>img, +span.outer.started>i.img{opacity:1;} +span.outer.stopped>img, +span.outer.stopped>i.img{opacity:0.3;} +span.outer.paused>img, +span.outer.paused>i.img{opacity:0.6;} +span.inner{display:inline-block;vertical-align:top;} +span.state{font-size:1.1rem;margin-left:7px;} +i.padlock{margin-right:8px;cursor:default;vertical-align:middle;} +i.nolock{visibility:hidden;margin-right:8px;vertical-align:middle;} +i.lock{margin-left:8px;cursor:default;vertical-align:middle;} +i.orb{font-size:1.1rem;margin:08px03px;} +img.img, +i.img{width:32px;height:32px;margin-right:10px;} +img.icon{margin:-3px4px00;} +img.list{width:auto;max-width:32px;height:32px;} +i.list{font-size:32px;} +a.list{text-decoration:none;color:inherit;} +div.content{position:absolute;top:0;left:0;width:100%;padding-bottom:30px;z-index:-1;clear:both;} +div.content.shift{margin-top:1px;} +label+.content{margin-top:86px;} +div.tabs{position:relative;margin:130px000;} +div.tab{float:left;margin-top:30px;} +div.tabinput[id^="tab"]{display:none;} +div.tab[type="radio"]+label:hover{background-color:transparent;border:1pxsolidvar(--orange-500);border-bottom:none;cursor:pointer;opacity:1;} +div.tab[type="radio"]:checked+label{cursor:default;background-color:transparent;border:1pxsolidvar(--orange-500);border-bottom:none;opacity:1;} +div.tab[type="radio"]+label~.content{display:none;} +div.tab[type="radio"]:checked+label~.content{display:inline;} +div.tab[type="radio"]+label{position:relative;font-size:1.4rem;letter-spacing:1.8px;padding:4px10px;margin-right:2px;border-top-left-radius:6px;border-top-right-radius:6px;border:1pxsolidvar(--gray-400);border-bottom:none;background-color:var(--gray-200);opacity:0.5;} +div.tab[type="radio"]+labelimg{padding-right:4px;} +div.Panel{text-align:center;float:left;margin:030px30px12px;height:8rem;} +div.Panela{text-decoration:none;} +div.Panelspan{height:42px;display:block;} +div.Panel:hover.PanelText{text-decoration:underline;} +div.Panelimg.PanelImg{width:auto;max-width:32px;height:32px;} +div.Paneli.PanelIcon{font-size:32px;color:var(--text-color);} +div.user-list{float:left;padding:10px;margin-right:10px;margin-bottom:24px;border:1pxsolidvar(--gray-300);border-radius:5px;line-height:2rem;height:10rem;width:10rem;background-color:var(--gray-200);} +div.user-listimg{width:auto;max-width:48px;height:48px;margin-bottom:16px;} +div.up{margin-top:-30px;border:1pxsolidvar(--gray-200);padding:4px6px;overflow:auto;} +div.spinner{margin:48pxauto;text-align:center;} +div.spinner.fixed{display:none;position:fixed;top:50%;left:50%;margin-top:-16px;margin-left:-64px;z-index:10000;} +div.spinner.unraid_mark{height:64px;} +div.spinner.unraid_mark_2, +div.unraid_mark_4{animation:mark_21.5seaseinfinite;} +div.spinner.unraid_mark_3{animation:mark_31.5seaseinfinite;} +div.spinner.unraid_mark_6, +div.unraid_mark_8{animation:mark_61.5seaseinfinite;} +div.spinner.unraid_mark_7{animation:mark_71.5seaseinfinite;} +div.domain{margin-top:-20px;} +@keyframesmark_2{50%{transform:translateY(-40px);}100%{transform:translateY(0px);}} +@keyframesmark_3{50%{transform:translateY(-62px);}100%{transform:translateY(0px);}} +@keyframesmark_6{50%{transform:translateY(40px);}100%{transform:translateY(0px);}} +@keyframesmark_7{50%{transform:translateY(62px);}100%{transform:translateY(0px);}} +pre.up{margin-top:-30px;} +pre{border:1pxsolidvar(--gray-300);font-family:bitstream;font-size:1.3rem;line-height:1.8rem;padding:4px6px;overflow:auto;} +iframe#progressFrame{position:fixed;bottom:32px;left:0;margin:0;padding:8px8px08px;width:100%;height:1.2rem;line-height:1.2rem;border-style:none;overflow:hidden;font-family:bitstream;font-size:1.1rem;color:var(--gray-500);white-space:nowrap;z-index:-10;} +dl{margin:0;padding-left:12px;line-height:2.6rem;} +dt{clear:left;float:left;width:35%;font-weight:normal;} +dd{margin-bottom:12px;white-space:nowrap;} +ddp{margin:004px0;} +ddblockquote{padding-left:0;} +blockquote{width:90%;margin:10pxauto;text-align:left;padding:4px20px;border-top:2pxsolidvar(--blue-200);border-bottom:2pxsolidvar(--blue-200);color:var(--gray-800);background-color:var(--blue-100);} +blockquote.ontop{margin-top:-20px;margin-bottom:46px;} +blockquotea{color:var(--orange-500);font-weight:600;} +blockquotea:hover, +blockquotea:focus{color:var(--orange-800);} +label.checkbox{display:block;position:relative;padding-left:28px;margin:3px0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;} +label.checkboxinput{position:absolute;opacity:0;cursor:pointer;} +span.checkmark{position:absolute;top:0;left:6px;height:14px;width:14px;background-color:var(--gray-200);border-radius:100%;} +label.checkbox:hoverinput~.checkmark{background-color:var(--gray-300);} +label.checkboxinput:checked~.checkmark{background-color:var(--orange-500);} +label.checkboxinput:disabled~.checkmark{opacity:0.5;} +a.bannerDismiss{float:right;cursor:pointer;text-decoration:none;margin-right:1rem;} +.bannerDismiss::before{content:"\e92f";font-family:Unraid;color:var(--orange-300);} +a.bannerInfo{cursor:pointer;text-decoration:none;} +.bannerInfo::before{content:"\f05a";font-family:fontAwesome;color:var(--orange-300);} +::-webkit-scrollbar{width:10px;height:10px;background:transparent;} +::-webkit-scrollbar-thumb{background:var(--gray-400);border-radius:10px;} +::-webkit-scrollbar-corner{background:var(--gray-400);border-radius:10px;} +::-webkit-scrollbar-thumb:hover{background:var(--gray-500);} From 37be7e9f6194b15b49c6fc1d9b203e4d0d7c8d73 Mon Sep 17 00:00:00 2001 From: Bailey Matthews Date: Sat, 9 Sep 2023 13:19:28 +0100 Subject: [PATCH 02/99] example: format file --- .../styles/default-white-formatted.css | 328 ++++ .../plugins/dynamix/styles/default-white.css | 1743 ++++++++++++++--- 2 files changed, 1796 insertions(+), 275 deletions(-) create mode 100644 emhttp/plugins/dynamix/styles/default-white-formatted.css diff --git a/emhttp/plugins/dynamix/styles/default-white-formatted.css b/emhttp/plugins/dynamix/styles/default-white-formatted.css new file mode 100644 index 000000000..c41186a0c --- /dev/null +++ b/emhttp/plugins/dynamix/styles/default-white-formatted.css @@ -0,0 +1,328 @@ +:root {--gray-000: rgb(255, 255, 255); /* #ffffff */--gray-100: rgb(242, 242, 242); /* #f2f2f2 */--gray-200: rgb(211, 211, 211); /* #d3d3d3 #d9d9d9 #dcdcdc #d4d5d6 */--gray-300: rgb(204, 204, 204); /* gray #c0c0c0 #a8a8a8 */--gray-400: rgb(144, 144, 144); /* #909090 #989898 #a2a2a2 #949494 */--gray-500: rgb(128, 128, 128); /* #808080 #606060 #585858 */--gray-600: rgb(048, 048, 048); /* #303030 #202020 */--gray-700: rgb(064, 064, 064); /* #404040 */--gary-800: rgb(025, 025, 025); /* #191919 #2b2a29 */--gray-900: rgb(029, 027, 027); /* #1c1b1b */ +--orange-200: rgb(255, 153, 0); /* #ff9900 */--orange-300: rgb(230, 138, 0); /* #e68a00 */--orange-400: rgb(206, 124, 16); /* #ce7c10 */--orange-500: rgb(255, 140, 47); /* #ff8c2f */--orange-800: rgb(241, 90, 44); /* #f15a2c */--orange-900: rgb(214, 51, 1); /* #d63301 */ +--red-100: rgb(255, 221, 209); /* #ffddd1 */--red-300: rgb(255, 158, 158); /* #ff9e9e */--red-500: rgb(255, 51, 0); /* #ff3300 */--red-600: rgb(240, 0, 12); /* #f0000c */--red-700: rgb(222, 17, 0); /* #de1100 */--red-800: rgb(226, 40, 40); /* #e22828 */--red-900: rgb(148, 28, 0); /* #941c00 */ +--green-100: rgb(223, 242, 191); /* #dff2bf */--green-200: rgb(51, 204, 51); /* #33cc33 */--green-500: rgb(23, 191, 11); /* #17bf0b */--green-800: rgb(79, 138, 16); /* #4f8a10 */--green-900: rgb(18, 122, 5); /* #127a05 */ +--blue-100: rgb(217, 237, 247); /* #d9edf7 */--blue-200: rgb(188, 232, 241); /* #bce8f1 */--blue-300: rgb(189, 229, 248); /* #bde5f8 */--blue-700: rgb(0, 153, 255); /* #0099ff */--blue-800: rgb(072, 109, 186); /* #486dba */--blue-900: rgb(59, 89, 152); /* #3b5998 */ +--yellow-100: rgb(255, 246, 191); /* #fff6bf */--yellow-200: rgb(254, 239, 179); /* #feefb3 */--yellow-500: rgb(255, 211, 36); /* #ffd324 */ +--text-color: var(--gray-900);--background-color: var(--gray-100);} + +html {font-family: clear-sans;font-size: 62.5%;height: 100%;} +body {font-size: 1.3rem;color: var(--text-color);background-color: var(--background-color);padding: 0;margin: 0;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} +@media (max-width: 1280px) {#template { min-width: 1260px; max-width: 1260px; margin: 0;}} +@media (min-width: 1281px) {#template { min-width: 1260px; margin: 0 10px;}} +@media (min-width: 1921px) {#template { min-width: 1260px; max-width: 1920px; margin: 0 auto;}} +img {border: none;text-decoration: none;vertical-align: middle;} +p {text-align: justify;} +p.centered {text-align: left;} +p:empty {display: none;} +a:hover {text-decoration: underline;} +a {color: var(--blue-800);text-decoration: none;} +a.none {color: var(--text-color);} +a.img {text-decoration: none;border: none;} +a.info {position: relative;} +a.info span {display: none;white-space: nowrap;font-variant: small-caps;position: absolute;top: 16px;left: 12px;line-height: 2rem;color: var(--gray-100);padding: 5px 8px;border: 1px solid rgba(var(--gray-000), 0.25);border-radius: 3px;background-color: rgba(var(--gray-800), 0.95);box-shadow: 0 0 3px var(--gray-700);} +a.info:hover span {display: block;z-index: 1;} +a.nohand {cursor: default;} +a.hand {cursor: pointer;text-decoration: none;} +a.static {cursor: default;color: var(--gray-400);text-decoration: none;} +a.view {display: inline-block;width: 20px;} +i.spacing {margin-left: -6px;} +i.icon {font-size: 1.6rem;margin-right: 4px;vertical-align: middle;} +i.title {margin-right: 8px;} +i.control {cursor: pointer;color: var(--gray-400);font-size: 1.8rem;} +hr {border: none;height: 1px !important;color: var(--gray-300);background-color: var(--gray-300);} +input[type="text"], +input[type="password"], +input[type="number"], +input[type="url"], +input[type="email"], +input[type="date"], +input[type="file"], +textarea, +.textarea {font-family: clear-sans;font-size: 1.3rem;background-color: transparent;border: none;border-bottom: 1px solid var(--gray-900);padding: 4px 0;text-indent: 0;min-height: 2rem;line-height: 2rem;outline: none;width: 300px;margin: 0 20px 0 0;box-shadow: none;border-radius: 0;color: var(--text-color);} +input[type="button"], +input[type="reset"], +input[type="submit"], +button, +button[type="button"], +a.button {font-family: clear-sans;font-size: 1.1rem;font-weight: bold;letter-spacing: 1.8px;text-transform: uppercase;min-width: 86px;margin: 10px 12px 10px 0;padding: 8px;text-align: center;text-decoration: none;white-space: nowrap;cursor: pointer;outline: none;border-radius: 4px;border: none;color: var(--orange-500);background: -webkit-gradient( linear, left top, right top, from(var(--red-800)), to(var(--orange-500)) ) 0 0 no-repeat, -webkit-gradient( linear, left top, right top, from(var(--red-800)), to(var(--orange-500)) ) 0 100% no-repeat, -webkit-gradient( linear, left bottom, left top, from(var(--red-800)), to(var(--red-800)) ) 0 100% no-repeat, -webkit-gradient( linear, left bottom, left top, from(var(--orange-500)), to(var(--orange-500)) ) 100% 100% no-repeat;background: linear-gradient(90deg, var(--red-800) 0, var(--orange-500)) 0 0 no-repeat, linear-gradient(90deg, var(--red-800) 0, var(--orange-500)) 0 100% no-repeat, linear-gradient(0deg, var(--red-800) 0, var(--red-800)) 0 100% no-repeat, linear-gradient(0deg, var(--orange-500) 0, var(--orange-500)) 100% 100% no-repeat;background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;} +input[type="checkbox"] {vertical-align: middle;margin-right: 6px;} +input[type="number"]::-webkit-outer-spin-button, +input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;} +input[type="number"] {-moz-appearance: textfield;} +input:focus[type="text"], +input:focus[type="password"], +input:focus[type="number"], +input:focus[type="url"], +input:focus[type="email"], +input:focus[type="file"], +textarea:focus {background-color: var(--gray-300);outline: 0;} +input:hover[type="button"], +input:hover[type="reset"], +input:hover[type="submit"], +button:hover, +button:hover[type="button"], +a.button:hover {color: var(--gray-100);background: -webkit-gradient( linear, left top, right top, from(var(--red-800)), to(var(--orange-500)));background: linear-gradient(90deg, var(--red-800) 0, var(--orange-500));} +input[disabled], +textarea[disabled] {color: var(--text-color);border-bottom-color: var(--gray-400);opacity: 0.5;cursor: default;} +input[type="button"][disabled], +input[type="reset"][disabled], +input[type="submit"][disabled], +button[disabled], +button[type="button"][disabled], +a.button[disabled] input:hover[type="button"][disabled], +input:hover[type="reset"][disabled], +input:hover[type="submit"][disabled], +button:hover[disabled], +button:hover[type="button"][disabled], +a.button:hover[disabled] input:active[type="button"][disabled], +input:active[type="reset"][disabled], +input:active[type="submit"][disabled], +button:active[disabled], +button:active[type="button"][disabled], +a.button:active[disabled] {cursor: default;color: var(--gray-500);background: -webkit-gradient( linear, left top, right top, from(var(--gray-700)), to(var(--gray-500)) ) 0 0 no-repeat, -webkit-gradient( linear, left top, right top, from(var(--gray-700)), to(var(--gray-500)) ) 0 100% no-repeat, -webkit-gradient( linear, left bottom, left top, from(var(--gray-700)), to(var(--gray-700)) ) 0 100% no-repeat, -webkit-gradient( linear, left bottom, left top, from(var(--gray-500)), to(var(--gray-500)) ) 100% 100% no-repeat;background: linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 0 no-repeat, linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 100% no-repeat, linear-gradient(0deg, var(--gray-700) 0, var(--gray-700)) 0 100% no-repeat, linear-gradient(0deg, var(--gray-500) 0, var(--gray-500)) 100% 100% no-repeat;background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;} +input::-webkit-input-placeholder {color: var(--blue-800);} +select {-webkit-appearance: none;font-family: clear-sans;font-size: 1.3rem;min-width: 166px;max-width: 300px;padding: 5px 8px 5px 0;text-indent: 0;margin: 0 10px 0 0;border: none;border-bottom: 1px solid var(--gray-900);box-shadow: none;border-radius: 0;color: var(--text-color);background-color: transparent;background-image: linear-gradient( 66.6deg, transparent 60%, var(--gray-900) 40% ), linear-gradient(113.4deg, var(--gray-900) 40%, transparent 60%);background-position: calc(100% - 4px), 100%;background-size: 4px 6px, 4px 6px;background-repeat: no-repeat;outline: none;display: inline-block;cursor: pointer;} +select option {color: var(--text-color);background-color: var(--gray-300);} +select:focus {outline: 0;} +select[disabled] {color: var(--text-color);border-bottom-color: var(--gray-500);opacity: 0.5;cursor: default;} +select[name="enter_view"] {margin: 0;padding: 0 12px 0 0;border: none;min-width: auto;} +select[name="enter_share"] {font-size: 1.1rem;padding: 0;border: none;min-width: 40px;float: right;margin-top: 13px;margin-right: 20px;} +select[name="port_select"] {border: none;min-width: 54px;padding-top: 0;padding-bottom: 0;} +select.narrow {min-width: 76px;} +select.auto {min-width: auto;} +select.slot {min-width: 44rem;max-width: 44rem;} +input.narrow {width: 166px;} +input.trim {width: 76px;min-width: 76px;} +textarea {resize: none;} +#header {position: absolute;top: 0;left: 0;width: 100%;min-width: 1260px;height: 91px;z-index: 102;margin: 0;color: var(--gray-100);background-color: var(--gray-900);background-size: 100% 90px;background-repeat: no-repeat;} +#header .logo {float: left;margin-left: 10px;color: var(--red-800);text-align: center;} +#header .logo svg {width: 160px;display: block;margin: 25px 0 8px 0;} +#header .block {margin: 0;float: right;text-align: right;background-color: rgba(var(--gray-900), 0.3);padding: 10px 12px;} +#header .text-left {float: left;text-align: right;padding-right: 5px;border-right: solid medium var(--orange-800);} +#header .text-right {float: right;text-align: left;padding-left: 5px;} +#header .text-right a {color: var(--gray-100);} +#header .text-right #licensetype {font-weight: bold;font-style: italic;margin-right: 4px;} +div.title {margin: 20px 0 32px 0;padding: 8px 10px;clear: both;border-bottom: 1px solid var(--gray-300);background-color: var(--gray-300);letter-spacing: 1.8px;} +div.title span.left {font-size: 1.4rem;} +div.title span.right {font-size: 1.4rem;padding-top: 2px;padding-right: 10px;float: right;} +div.title span img {padding-right: 4px;} +div.title.shift {margin-top: -30px;} +#menu {position: absolute;top: 90px;left: 0;right: 0;display: grid;grid-template-columns: auto max-content;z-index: 101;} +.nav-tile {height: 4rem;line-height: 4rem;padding: 0;margin: 0;font-size: 1.2rem;letter-spacing: 1.8px;background-color: var(--gray-900);white-space: nowrap;overflow-x: auto;overflow-y: hidden;scrollbar-width: thin;} +.nav-tile::-webkit-scrollbar {height: 8px;} +.nav-tile.right {text-align: right;} +.nav-item, +.nav-user {position: relative;display: inline-block;text-align: center;margin: 0;} +.nav-item a {min-width: 0;} +.nav-item a span {display: none;} +.nav-item .system {vertical-align: middle;padding-bottom: 2px;} +.nav-item a {color: var(--gray-100);background-color: transparent;text-transform: uppercase;font-weight: bold;display: block;padding: 0 10px;} +.nav-item a {text-decoration: none;text-decoration-skip-ink: auto;-webkit-text-decoration-skip: objects;-webkit-transition: all 0.25s ease-out;transition: all 0.25s ease-out;} +.nav-item:after, +.nav-user.show:after {border-radius: 4px;display: block;background-color: transparent;content: "";width: 32px;height: 2px;bottom: 8px;position: absolute;left: 50%;margin-left: -16px;-webkit-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;pointer-events: none;} +.nav-item:focus:after, +.nav-item:hover:after, +.nav-user.show:hover:after {background-color: var(--orange-800);} +.nav-item.active:after {background-color: var(--background-color);} +.nav-user a {color: var(--gray-100);background-color: transparent;display: block;padding: 0 10px;} +.nav-user .system {vertical-align: middle;padding-bottom: 2px;} +#clear {clear: both;} +#footer {position: fixed;bottom: 0;left: 0;color: var(--gray-800);background-color: var(--gray-200);padding: 5px 0;width: 100%;height: 1.6rem;line-height: 1.6rem;text-align: center;z-index: 10000;} +#statusraid {float: left;padding-left: 10px;} +#countdown {margin: 0 auto;} +#copyright {font-family: bitstream;font-size: 1.1rem;float: right;padding-right: 10px;} +.green {color: var(--green-800);padding-left: 5px;padding-right: 5px;} +.red {color: var(--red-600);padding-left: 5px;padding-right: 5px;} +.orange {color: var(--orange-300);padding-left: 5px;padding-right: 5px;} +.blue {color: var(--blue-800);padding-left: 5px;padding-right: 5px;} +.green-text, +.passed {color: var(--green-800);} +.red-text, +.failed {color: var(--red-600);} +.orange-text, +.warning {color: var(--orange-300);} +.blue-text {color: var(--blue-800);} +.grey-text {color: var(--gray-500);} +.green-orb {color: var(--green-200);} +.grey-orb {color: var(--gray-300);} +.blue-orb {color: var(--blue-700);} +.yellow-orb {color: var(--orange-200);} +.red-orb {color: var(--red-500);} +.usage-bar {float: left;height: 2rem;line-height: 2rem;width: 14rem;padding: 1px 1px 1px 2px;margin: 8px 12px;border-radius: 3px;background-color: var(--gray-500);box-shadow: 0 1px 0 var(--gray-400), inset 0 1px 0 var(--gray-600);} +.usage-bar > span {display: block;height: 100%;text-align: right;border-radius: 2px;color: var(--gray-100);background-color: var(--gray-500);box-shadow: inset 0 1px 0 rgba(var(--gray-000), 0.5);} +.usage-disk {position: relative;height: 1.8rem;background-color: var(--gray-200);margin: 0;} +.usage-disk > span:first-child {position: absolute;left: 0;margin: 0 !important;height: 1.8rem;background-color: var(--gray-300);} +.usage-disk > span:last-child {position: relative;padding-right: 4px;z-index: 1;} +.usage-disk.sys {height: 12px;margin: -15px 20px 0 44px;} +.usage-disk.sys > span:first-child {height: 12px;padding: 0;} +.usage-disk.sys.none {background-color: transparent;} +.usage-disk.mm {height: 3px;margin: 5px 20px 0 0;} +.usage-disk.mm > span:first-child {height: 3px;} +.notice {background: var(--yellow-100) url(../images/notice.png) no-repeat;background-position: 60px 50%;color: var(--text-color);font-size: 1.4rem;text-align: left;padding: 15px 0 15px 130px;display: block;height: 7rem;line-height: 7rem;vertical-align: middle;border-top: 2px solid var(--yellow-500);border-bottom: 2px solid var(--yellow-500);} +.notice.shift {margin-top: 160px;} +.greenbar {background: -webkit-gradient( linear, left top, right top, from(var(--green-900)), to(var(--green-500)));background: linear-gradient(90deg, var(--green-900) 0, var(--green-500));} +.orangebar {background: -webkit-gradient( linear, left top, right top, from(var(--orange-400)), to(var(--orange-400)));background: linear-gradient(90deg, var(--orange-400) 0, var(--orange-400));} +.redbar {background: -webkit-gradient( linear, left top, right top, from(var(--red-900)), to(var(--red-700)));background: linear-gradient(90deg, var(--red-900) 0, var(--red-700));} +.graybar {background: -webkit-gradient( linear, left top, right top, from(var(--gray-400)), to(var(--gray-200)));background: linear-gradient(90deg, var(--gray-400) 0, var(--gray-200));} +table {border-collapse: collapse;border-spacing: 0;border-style: hidden;margin: -30px 0 0 0;width: 100%;background-color: var(--background-color);} +table thead td {padding: 7px 0;} +table tbody td {padding: 5px 0;} +table tbody tr.tr_last {background-color: var(--background-color);border-top: 1px solid var(--gray-300);} +table td.cpu-info {border: 1px solid var(--gray-300);} +table.disk_status {white-space: nowrap;} +table.disk_status td span {margin-left: 10px;} +table.disk_status thead tr:first-child td {font-size: 1.1rem;text-transform: uppercase;letter-spacing: 1px;background-color: var(--gray-200);} +table.disk_status thead tr:last-child {border-bottom: 1px solid var(--gray-300);} +table.disk_status tr > td {width: 10%;padding-left: 12px;padding-right: 0;white-space: nowrap;} +table.disk_status tr > td + td {width: auto;} +table.disk_status tr > td + td + td {width: 6.5%;text-align: center;padding-left: 4px;padding-right: 8px;} +table.disk_status tr > td + td + td + td {text-align: right;padding-left: 0;padding-right: 12px;} +table.disk_status tbody tr:nth-child(even) {background-color: var(--background-color);} +table.disk_status tbody tr:not(.tr_last):hover td {background-color: rgba(var(--gray-900), 0.1);} +table.disk_status.stats tr > td + td {text-align: left;padding-left: 0;padding-right: 12px;} +table.array_status td {padding: 4px 0;} +table.array_status tr > td {text-align: left;white-space: nowrap;padding-left: 12px;width: 30%;} +table.array_status tr > td + td {padding-left: 2px;width: 20%;} +table.array_status tr > td + td + td {width: auto;} +table.array_status td.line {border-top: 1px solid var(--gray-300);} +table.array_status.noshift {margin-top: 0;} +table.settings {margin: 0;padding: 0;background-color: transparent;} +table.settings td:first-child {width: 35%;padding: 12px;} +table.settings td + td {padding-left: 8px;} +table.settings.shifted {padding: 0;margin-left: 0;margin-top: 0;} +table.settings.shifted td {padding-left: 0;} +table.access_list {border-spacing: 0;margin-top: 10px;border: none;} +table.access_list tr:first-child td {font-size: 1.1rem;text-transform: uppercase;letter-spacing: 1px;vertical-align: middle;text-align: left;border: 1px solid var(--gray-300);border-bottom: 1px solid var(--gray-300);background-color: var(--gray-200);} +table.access_list td:first-child {font-weight: normal;width: 35%;padding-left: 12px;} +table.access_list tr:first-child td:first-child {font-weight: normal;} +table.access_list tr > td + td {white-space: nowrap;} +table.share_status {white-space: nowrap;} +table.share_status thead tr:first-child td {font-size: 1.1rem;text-transform: uppercase;letter-spacing: 1px;background-color: var(--gray-300);} +table.share_status tr > td {text-align: left;padding-left: 12px;} +table.share_status tr > td + td {padding-left: 0;} +table.share_status tbody tr:nth-child(even) {background-color: var(--background-color);} +table.share_status:not(.dashboard) tbody tr:hover td {background-color: rgba(var(--gray-900), 0.1);} +table.share_status tbody tr.alert {color: var(--red-600);} +table.share_status tbody tr.warn {color: var(--orange-300);} +table.share_status.fixed tr > td + td {min-width: 39px;font-size: 1.1rem;text-align: center;padding: 0;} +table.share_status.table {margin-top: 36px;} +table.share_status.table tr > td {width: 50%;} +table.share_status.dashboard {margin: 0;border: 1px solid var(--gray-200);} +table.share_status.dashboard tbody {border: 1px solid var(--gray-200);} +table.share_status.dashboard tr:first-child > td {height: 3.6rem;padding-top: 12px;font-size: 1.6rem;font-weight: bold;letter-spacing: 1.8px;text-transform: none;vertical-align: top;} +table.share_status.dashboard tr:nth-child(even) {background-color: transparent;} +table.share_status.dashboard tr:last-child > td {padding-bottom: 20px;} +table.share_status.dashboard tr.last > td {padding-bottom: 20px;} +table.share_status.dashboard tr.header td {padding-bottom: 10px;} +table.share_status.dashboard td {padding: 3px 10px;} +table.share_status.dashboard td.vpn {font-size: 1.1rem;font-weight: bold;text-transform: uppercase;letter-spacing: 1px;} +table.share_status.dashboard td div.section {display: inline-block;vertical-align: top;margin-left: 4px;font-size: 1.2rem;font-weight: bold;text-transform: uppercase;letter-spacing: 1px;} +table.share_status.dashboard td div.section span {font-weight: normal;text-transform: none;letter-spacing: 0;white-space: normal;} +table.share_status.dashboard td span.info {float: right;margin-right: 20px;font-size: 1.2rem;font-weight: normal;text-transform: none;letter-spacing: 0;} +table.share_status.dashboard td span.info.title {font-weight: bold;} +table.share_status.dashboard td span.load {display: inline-block;width: 38px;text-align: right;} +table.share_status.dashboard td span.finish {float: right;margin-right: 24px;} +table.share_status.dashboard i.control {float: right;font-size: 1.4rem !important;margin: 0 3px 0 0;cursor: pointer;background-color: rgba(var(--gray-900), 0.1);padding: 2px;} +[name="arrayOps"] {margin-top: 12px;} +span.error {color: var(--red-600);background-color: var(--red-300);display: block;width: 100%;} +span.warn {color: var(--orange-300);background-color: var(--yellow-200);display: block;width: 100%;} +span.system {color: var(--blue-700);background-color: var(--blue-300);display: block;width: 100%;} +span.array {color: var(--green-800);background-color: var(--green-100);display: block;width: 100%;} +span.login {color: var(--orange-900);background-color: var(--red-100);display: block;width: 100%;} +span.lite {background-color: var(--background-color);} +span.label {font-size: 1.2rem;padding: 2px 0 2px 6px;margin-right: 6px;border-radius: 4px;display: inline;width: auto;vertical-align: middle;} +span.cpu-speed {display: block;color: var(--blue-900);} +span.status {float: right;font-size: 1.4rem;margin-top: 30px;padding-right: 8px;letter-spacing: 1.8px;} +span.status.vhshift {margin-top: 0;margin-right: -9px;} +span.status.vshift {margin-top: -16px;} +span.status.hshift {margin-right: -20px;} +span.diskinfo {float: left;clear: both;margin-top: 5px;padding-left: 10px;} +span.bitstream {font-family: bitstream;font-size: 1.1rem;} +span.ucfirst {text-transform: capitalize;} +span.strong {font-weight: bold;} +span.big {font-size: 1.4rem;} +span.small {font-size: 1.2rem;} +span.outer {margin-bottom: 20px;margin-right: 0;} +span.outer.solid {background-color: var(--background-color);} +span.hand {cursor: pointer;} +span.outer.started > img, +span.outer.started > i.img {opacity: 1;} +span.outer.stopped > img, +span.outer.stopped > i.img {opacity: 0.3;} +span.outer.paused > img, +span.outer.paused > i.img {opacity: 0.6;} +span.inner {display: inline-block;vertical-align: top;} +span.state {font-size: 1.1rem;margin-left: 7px;} +i.padlock {margin-right: 8px;cursor: default;vertical-align: middle;} +i.nolock {visibility: hidden;margin-right: 8px;vertical-align: middle;} +i.lock {margin-left: 8px;cursor: default;vertical-align: middle;} +i.orb {font-size: 1.1rem;margin: 0 8px 0 3px;} +img.img, +i.img {width: 32px;height: 32px;margin-right: 10px;} +img.icon {margin: -3px 4px 0 0;} +img.list {width: auto;max-width: 32px;height: 32px;} +i.list {font-size: 32px;} +a.list {text-decoration: none;color: inherit;} +div.content {position: absolute;top: 0;left: 0;width: 100%;padding-bottom: 30px;z-index: -1;clear: both;} +div.content.shift {margin-top: 1px;} +label + .content {margin-top: 86px;} +div.tabs {position: relative;margin: 130px 0 0 0;} +div.tab {float: left;margin-top: 30px;} +div.tab input[id^="tab"] {display: none;} +div.tab [type="radio"] + label:hover {background-color: transparent;border: 1px solid var(--orange-500);border-bottom: none;cursor: pointer;opacity: 1;} +div.tab [type="radio"]:checked + label {cursor: default;background-color: transparent;border: 1px solid var(--orange-500);border-bottom: none;opacity: 1;} +div.tab [type="radio"] + label ~ .content {display: none;} +div.tab [type="radio"]:checked + label ~ .content {display: inline;} +div.tab [type="radio"] + label {position: relative;font-size: 1.4rem;letter-spacing: 1.8px;padding: 4px 10px;margin-right: 2px;border-top-left-radius: 6px;border-top-right-radius: 6px;border: 1px solid var(--gray-400);border-bottom: none;background-color: var(--gray-200);opacity: 0.5;} +div.tab [type="radio"] + label img {padding-right: 4px;} +div.Panel {text-align: center;float: left;margin: 0 30px 30px 12px;height: 8rem;} +div.Panel a {text-decoration: none;} +div.Panel span {height: 42px;display: block;} +div.Panel:hover .PanelText {text-decoration: underline;} +div.Panel img.PanelImg {width: auto;max-width: 32px;height: 32px;} +div.Panel i.PanelIcon {font-size: 32px;color: var(--text-color);} +div.user-list {float: left;padding: 10px;margin-right: 10px;margin-bottom: 24px;border: 1px solid var(--gray-300);border-radius: 5px;line-height: 2rem;height: 10rem;width: 10rem;background-color: var(--gray-200);} +div.user-list img {width: auto;max-width: 48px;height: 48px;margin-bottom: 16px;} +div.up {margin-top: -30px;border: 1px solid var(--gray-200);padding: 4px 6px;overflow: auto;} +div.spinner {margin: 48px auto;text-align: center;} +div.spinner.fixed {display: none;position: fixed;top: 50%;left: 50%;margin-top: -16px;margin-left: -64px;z-index: 10000;} +div.spinner .unraid_mark {height: 64px;} +div.spinner .unraid_mark_2, +div .unraid_mark_4 {animation: mark_2 1.5s ease infinite;} +div.spinner .unraid_mark_3 {animation: mark_3 1.5s ease infinite;} +div.spinner .unraid_mark_6, +div .unraid_mark_8 {animation: mark_6 1.5s ease infinite;} +div.spinner .unraid_mark_7 {animation: mark_7 1.5s ease infinite;} +div.domain {margin-top: -20px;} +@keyframes mark_2 {50% { transform: translateY(-40px);}100% { transform: translateY(0px);}} +@keyframes mark_3 {50% { transform: translateY(-62px);}100% { transform: translateY(0px);}} +@keyframes mark_6 {50% { transform: translateY(40px);}100% { transform: translateY(0px);}} +@keyframes mark_7 {50% { transform: translateY(62px);}100% { transform: translateY(0px);}} +pre.up {margin-top: -30px;} +pre {border: 1px solid var(--gray-300);font-family: bitstream;font-size: 1.3rem;line-height: 1.8rem;padding: 4px 6px;overflow: auto;} +iframe#progressFrame {position: fixed;bottom: 32px;left: 0;margin: 0;padding: 8px 8px 0 8px;width: 100%;height: 1.2rem;line-height: 1.2rem;border-style: none;overflow: hidden;font-family: bitstream;font-size: 1.1rem;color: var(--gray-500);white-space: nowrap;z-index: -10;} +dl {margin: 0;padding-left: 12px;line-height: 2.6rem;} +dt {clear: left;float: left;width: 35%;font-weight: normal;} +dd {margin-bottom: 12px;white-space: nowrap;} +dd p {margin: 0 0 4px 0;} +dd blockquote {padding-left: 0;} +blockquote {width: 90%;margin: 10px auto;text-align: left;padding: 4px 20px;border-top: 2px solid var(--blue-200);border-bottom: 2px solid var(--blue-200);color: var(--gray-800);background-color: var(--blue-100);} +blockquote.ontop {margin-top: -20px;margin-bottom: 46px;} +blockquote a {color: var(--orange-500);font-weight: 600;} +blockquote a:hover, +blockquote a:focus {color: var(--orange-800);} +label.checkbox {display: block;position: relative;padding-left: 28px;margin: 3px 0;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} +label.checkbox input {position: absolute;opacity: 0;cursor: pointer;} +span.checkmark {position: absolute;top: 0;left: 6px;height: 14px;width: 14px;background-color: var(--gray-200);border-radius: 100%;} +label.checkbox:hover input ~ .checkmark {background-color: var(--gray-300);} +label.checkbox input:checked ~ .checkmark {background-color: var(--orange-500);} +label.checkbox input:disabled ~ .checkmark {opacity: 0.5;} +a.bannerDismiss {float: right;cursor: pointer;text-decoration: none;margin-right: 1rem;} +.bannerDismiss::before {content: "\e92f";font-family: Unraid;color: var(--orange-300);} +a.bannerInfo {cursor: pointer;text-decoration: none;} +.bannerInfo::before {content: "\f05a";font-family: fontAwesome;color: var(--orange-300);} +::-webkit-scrollbar {width: 10px;height: 10px;background: transparent;} +::-webkit-scrollbar-thumb {background: var(--gray-400);border-radius: 10px;} +::-webkit-scrollbar-corner {background: var(--gray-400);border-radius: 10px;} +::-webkit-scrollbar-thumb:hover {background: var(--gray-500);} diff --git a/emhttp/plugins/dynamix/styles/default-white.css b/emhttp/plugins/dynamix/styles/default-white.css index 1fa1ecce7..bc3f0119b 100644 --- a/emhttp/plugins/dynamix/styles/default-white.css +++ b/emhttp/plugins/dynamix/styles/default-white.css @@ -1,36 +1,167 @@ -:root{--gray-000:rgb(255,255,255);/*#ffffff*/--gray-100:rgb(242,242,242);/*#f2f2f2*/--gray-200:rgb(211,211,211);/*#d3d3d3#d9d9d9#dcdcdc#d4d5d6*/--gray-300:rgb(204,204,204);/*gray#c0c0c0#a8a8a8*/--gray-400:rgb(144,144,144);/*#909090#989898#a2a2a2#949494*/--gray-500:rgb(128,128,128);/*#808080#606060#585858*/--gray-600:rgb(048,048,048);/*#303030#202020*/--gray-700:rgb(064,064,064);/*#404040*/--gary-800:rgb(025,025,025);/*#191919#2b2a29*/--gray-900:rgb(029,027,027);/*#1c1b1b*/ ---orange-200:rgb(255,153,0);/*#ff9900*/--orange-300:rgb(230,138,0);/*#e68a00*/--orange-400:rgb(206,124,16);/*#ce7c10*/--orange-500:rgb(255,140,47);/*#ff8c2f*/--orange-800:rgb(241,90,44);/*#f15a2c*/--orange-900:rgb(214,51,1);/*#d63301*/ ---red-100:rgb(255,221,209);/*#ffddd1*/--red-300:rgb(255,158,158);/*#ff9e9e*/--red-500:rgb(255,51,0);/*#ff3300*/--red-600:rgb(240,0,12);/*#f0000c*/--red-700:rgb(222,17,0);/*#de1100*/--red-800:rgb(226,40,40);/*#e22828*/--red-900:rgb(148,28,0);/*#941c00*/ ---green-100:rgb(223,242,191);/*#dff2bf*/--green-200:rgb(51,204,51);/*#33cc33*/--green-500:rgb(23,191,11);/*#17bf0b*/--green-800:rgb(79,138,16);/*#4f8a10*/--green-900:rgb(18,122,5);/*#127a05*/ ---blue-100:rgb(217,237,247);/*#d9edf7*/--blue-200:rgb(188,232,241);/*#bce8f1*/--blue-300:rgb(189,229,248);/*#bde5f8*/--blue-700:rgb(0,153,255);/*#0099ff*/--blue-800:rgb(072,109,186);/*#486dba*/--blue-900:rgb(59,89,152);/*#3b5998*/ ---yellow-100:rgb(255,246,191);/*#fff6bf*/--yellow-200:rgb(254,239,179);/*#feefb3*/--yellow-500:rgb(255,211,36);/*#ffd324*/ ---text-color:var(--gray-900);--background-color:var(--gray-100);} +:root { + --gray-000: rgb(255, 255, 255); /*#ffffff*/ + --gray-100: rgb(242, 242, 242); /*#f2f2f2*/ + --gray-200: rgb(211, 211, 211); /*#d3d3d3#d9d9d9#dcdcdc#d4d5d6*/ + --gray-300: rgb(204, 204, 204); /*gray#c0c0c0#a8a8a8*/ + --gray-400: rgb(144, 144, 144); /*#909090#989898#a2a2a2#949494*/ + --gray-500: rgb(128, 128, 128); /*#808080#606060#585858*/ + --gray-600: rgb(048, 048, 048); /*#303030#202020*/ + --gray-700: rgb(064, 064, 064); /*#404040*/ + --gary-800: rgb(025, 025, 025); /*#191919#2b2a29*/ + --gray-900: rgb(029, 027, 027); /*#1c1b1b*/ + --orange-200: rgb(255, 153, 0); /*#ff9900*/ + --orange-300: rgb(230, 138, 0); /*#e68a00*/ + --orange-400: rgb(206, 124, 16); /*#ce7c10*/ + --orange-500: rgb(255, 140, 47); /*#ff8c2f*/ + --orange-800: rgb(241, 90, 44); /*#f15a2c*/ + --orange-900: rgb(214, 51, 1); /*#d63301*/ + --red-100: rgb(255, 221, 209); /*#ffddd1*/ + --red-300: rgb(255, 158, 158); /*#ff9e9e*/ + --red-500: rgb(255, 51, 0); /*#ff3300*/ + --red-600: rgb(240, 0, 12); /*#f0000c*/ + --red-700: rgb(222, 17, 0); /*#de1100*/ + --red-800: rgb(226, 40, 40); /*#e22828*/ + --red-900: rgb(148, 28, 0); /*#941c00*/ + --green-100: rgb(223, 242, 191); /*#dff2bf*/ + --green-200: rgb(51, 204, 51); /*#33cc33*/ + --green-500: rgb(23, 191, 11); /*#17bf0b*/ + --green-800: rgb(79, 138, 16); /*#4f8a10*/ + --green-900: rgb(18, 122, 5); /*#127a05*/ + --blue-100: rgb(217, 237, 247); /*#d9edf7*/ + --blue-200: rgb(188, 232, 241); /*#bce8f1*/ + --blue-300: rgb(189, 229, 248); /*#bde5f8*/ + --blue-700: rgb(0, 153, 255); /*#0099ff*/ + --blue-800: rgb(072, 109, 186); /*#486dba*/ + --blue-900: rgb(59, 89, 152); /*#3b5998*/ + --yellow-100: rgb(255, 246, 191); /*#fff6bf*/ + --yellow-200: rgb(254, 239, 179); /*#feefb3*/ + --yellow-500: rgb(255, 211, 36); /*#ffd324*/ + --text-color: var(--gray-900); + --background-color: var(--gray-100); +} -html{font-family:clear-sans;font-size:62.5%;height:100%;} -body{font-size:1.3rem;color:var(--text-color);background-color:var(--background-color);padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} -@media(max-width:1280px){#template{min-width:1260px;max-width:1260px;margin:0;}} -@media(min-width:1281px){#template{min-width:1260px;margin:010px;}} -@media(min-width:1921px){#template{min-width:1260px;max-width:1920px;margin:0auto;}} -img{border:none;text-decoration:none;vertical-align:middle;} -p{text-align:justify;} -p.centered{text-align:left;} -p:empty{display:none;} -a:hover{text-decoration:underline;} -a{color:var(--blue-800);text-decoration:none;} -a.none{color:var(--text-color);} -a.img{text-decoration:none;border:none;} -a.info{position:relative;} -a.infospan{display:none;white-space:nowrap;font-variant:small-caps;position:absolute;top:16px;left:12px;line-height:2rem;color:var(--gray-100);padding:5px8px;border:1pxsolidrgba(var(--gray-000),0.25);border-radius:3px;background-color:rgba(var(--gray-800),0.95);box-shadow:003pxvar(--gray-700);} -a.info:hoverspan{display:block;z-index:1;} -a.nohand{cursor:default;} -a.hand{cursor:pointer;text-decoration:none;} -a.static{cursor:default;color:var(--gray-400);text-decoration:none;} -a.view{display:inline-block;width:20px;} -i.spacing{margin-left:-6px;} -i.icon{font-size:1.6rem;margin-right:4px;vertical-align:middle;} -i.title{margin-right:8px;} -i.control{cursor:pointer;color:var(--gray-400);font-size:1.8rem;} -hr{border:none;height:1px!important;color:var(--gray-300);background-color:var(--gray-300);} +html { + font-family: clear-sans; + font-size: 62.5%; + height: 100%; +} +body { + font-size: 1.3rem; + color: var(--text-color); + background-color: var(--background-color); + padding: 0; + margin: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +@media (max-width: 1280px) { + #template { + min-width: 1260px; + max-width: 1260px; + margin: 0; + } +} +@media (min-width: 1281px) { + #template { + min-width: 1260px; + margin: 010px; + } +} +@media (min-width: 1921px) { + #template { + min-width: 1260px; + max-width: 1920px; + margin: 0auto; + } +} +img { + border: none; + text-decoration: none; + vertical-align: middle; +} +p { + text-align: justify; +} +p.centered { + text-align: left; +} +p:empty { + display: none; +} +a:hover { + text-decoration: underline; +} +a { + color: var(--blue-800); + text-decoration: none; +} +a.none { + color: var(--text-color); +} +a.img { + text-decoration: none; + border: none; +} +a.info { + position: relative; +} +a.infospan { + display: none; + white-space: nowrap; + font-variant: small-caps; + position: absolute; + top: 16px; + left: 12px; + line-height: 2rem; + color: var(--gray-100); + padding: 5px8px; + border: 1pxsolidrgba (var(--gray-000), 0.25); + border-radius: 3px; + background-color: rgba(var(--gray-800), 0.95); + box-shadow: 003pxvar (--gray-700); +} +a.info:hoverspan { + display: block; + z-index: 1; +} +a.nohand { + cursor: default; +} +a.hand { + cursor: pointer; + text-decoration: none; +} +a.static { + cursor: default; + color: var(--gray-400); + text-decoration: none; +} +a.view { + display: inline-block; + width: 20px; +} +i.spacing { + margin-left: -6px; +} +i.icon { + font-size: 1.6rem; + margin-right: 4px; + vertical-align: middle; +} +i.title { + margin-right: 8px; +} +i.control { + cursor: pointer; + color: var(--gray-400); + font-size: 1.8rem; +} +hr { + border: none; + height: 1px !important; + color: var(--gray-300); + background-color: var(--gray-300); +} input[type="text"], input[type="password"], input[type="number"], @@ -39,32 +170,124 @@ input[type="email"], input[type="date"], input[type="file"], textarea, -.textarea{font-family:clear-sans;font-size:1.3rem;background-color:transparent;border:none;border-bottom:1pxsolidvar(--gray-900);padding:4px0;text-indent:0;min-height:2rem;line-height:2rem;outline:none;width:300px;margin:020px00;box-shadow:none;border-radius:0;color:var(--text-color);} +.textarea { + font-family: clear-sans; + font-size: 1.3rem; + background-color: transparent; + border: none; + border-bottom: 1pxsolidvar (--gray-900); + padding: 4px0; + text-indent: 0; + min-height: 2rem; + line-height: 2rem; + outline: none; + width: 300px; + margin: 020px00; + box-shadow: none; + border-radius: 0; + color: var(--text-color); +} input[type="button"], input[type="reset"], input[type="submit"], button, button[type="button"], -a.button{font-family:clear-sans;font-size:1.1rem;font-weight:bold;letter-spacing:1.8px;text-transform:uppercase;min-width:86px;margin:10px12px10px0;padding:8px;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;outline:none;border-radius:4px;border:none;color:var(--orange-500);background:-webkit-gradient(linear,lefttop,righttop,from(var(--red-800)),to(var(--orange-500)))00no-repeat,-webkit-gradient(linear,lefttop,righttop,from(var(--red-800)),to(var(--orange-500)))0100%no-repeat,-webkit-gradient(linear,leftbottom,lefttop,from(var(--red-800)),to(var(--red-800)))0100%no-repeat,-webkit-gradient(linear,leftbottom,lefttop,from(var(--orange-500)),to(var(--orange-500)))100%100%no-repeat;background:linear-gradient(90deg,var(--red-800)0,var(--orange-500))00no-repeat,linear-gradient(90deg,var(--red-800)0,var(--orange-500))0100%no-repeat,linear-gradient(0deg,var(--red-800)0,var(--red-800))0100%no-repeat,linear-gradient(0deg,var(--orange-500)0,var(--orange-500))100%100%no-repeat;background-size:100%2px,100%2px,2px100%,2px100%;} -input[type="checkbox"]{vertical-align:middle;margin-right:6px;} +a.button { + font-family: clear-sans; + font-size: 1.1rem; + font-weight: bold; + letter-spacing: 1.8px; + text-transform: uppercase; + min-width: 86px; + margin: 10px12px10px0; + padding: 8px; + text-align: center; + text-decoration: none; + white-space: nowrap; + cursor: pointer; + outline: none; + border-radius: 4px; + border: none; + color: var(--orange-500); + background: -webkit-gradient( + linear, + lefttop, + righttop, + from(var(--red-800)), + to(var(--orange-500)) + ) + 00no-repeat, + -webkit-gradient( + linear, + lefttop, + righttop, + from(var(--red-800)), + to(var(--orange-500)) + ) 0100%no-repeat, + -webkit-gradient( + linear, + leftbottom, + lefttop, + from(var(--red-800)), + to(var(--red-800)) + ) 0100%no-repeat, + -webkit-gradient( + linear, + leftbottom, + lefttop, + from(var(--orange-500)), + to(var(--orange-500)) + ) 100%100%no-repeat; + background: linear-gradient(90deg, var(--red-800) 0, var(--orange-500)) 00no-repeat, + linear-gradient(90deg, var(--red-800) 0, var(--orange-500)) 0100%no-repeat, + linear-gradient(0deg, var(--red-800) 0, var(--red-800)) 0100%no-repeat, + linear-gradient(0deg, var(--orange-500) 0, var(--orange-500)) 100%100%no-repeat; + background-size: 100%2px, 100%2px, 2px100%, 2px100%; +} +input[type="checkbox"] { + vertical-align: middle; + margin-right: 6px; +} input[type="number"]::-webkit-outer-spin-button, -input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;} -input[type="number"]{-moz-appearance:textfield;} +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; +} +input[type="number"] { + -moz-appearance: textfield; +} input:focus[type="text"], input:focus[type="password"], input:focus[type="number"], input:focus[type="url"], input:focus[type="email"], input:focus[type="file"], -textarea:focus{background-color:var(--gray-300);outline:0;} +textarea:focus { + background-color: var(--gray-300); + outline: 0; +} input:hover[type="button"], input:hover[type="reset"], input:hover[type="submit"], button:hover, button:hover[type="button"], -a.button:hover{color:var(--gray-100);background:-webkit-gradient(linear,lefttop,righttop,from(var(--red-800)),to(var(--orange-500)));background:linear-gradient(90deg,var(--red-800)0,var(--orange-500));} +a.button:hover { + color: var(--gray-100); + background: -webkit-gradient( + linear, + lefttop, + righttop, + from(var(--red-800)), + to(var(--orange-500)) + ); + background: linear-gradient(90deg, var(--red-800) 0, var(--orange-500)); +} input[disabled], -textarea[disabled]{color:var(--text-color);border-bottom-color:var(--gray-400);opacity:0.5;cursor:default;} +textarea[disabled] { + color: var(--text-color); + border-bottom-color: var(--gray-400); + opacity: 0.5; + cursor: default; +} input[type="button"][disabled], input[type="reset"][disabled], input[type="submit"][disabled], @@ -80,249 +303,1219 @@ input:active[type="reset"][disabled], input:active[type="submit"][disabled], button:active[disabled], button:active[type="button"][disabled], -a.button:active[disabled]{cursor:default;color:var(--gray-500);background:-webkit-gradient(linear,lefttop,righttop,from(var(--gray-700)),to(var(--gray-500)))00no-repeat,-webkit-gradient(linear,lefttop,righttop,from(var(--gray-700)),to(var(--gray-500)))0100%no-repeat,-webkit-gradient(linear,leftbottom,lefttop,from(var(--gray-700)),to(var(--gray-700)))0100%no-repeat,-webkit-gradient(linear,leftbottom,lefttop,from(var(--gray-500)),to(var(--gray-500)))100%100%no-repeat;background:linear-gradient(90deg,var(--gray-700)0,var(--gray-500))00no-repeat,linear-gradient(90deg,var(--gray-700)0,var(--gray-500))0100%no-repeat,linear-gradient(0deg,var(--gray-700)0,var(--gray-700))0100%no-repeat,linear-gradient(0deg,var(--gray-500)0,var(--gray-500))100%100%no-repeat;background-size:100%2px,100%2px,2px100%,2px100%;} -input::-webkit-input-placeholder{color:var(--blue-800);} -select{-webkit-appearance:none;font-family:clear-sans;font-size:1.3rem;min-width:166px;max-width:300px;padding:5px8px5px0;text-indent:0;margin:010px00;border:none;border-bottom:1pxsolidvar(--gray-900);box-shadow:none;border-radius:0;color:var(--text-color);background-color:transparent;background-image:linear-gradient(66.6deg,transparent60%,var(--gray-900)40%),linear-gradient(113.4deg,var(--gray-900)40%,transparent60%);background-position:calc(100%-4px),100%;background-size:4px6px,4px6px;background-repeat:no-repeat;outline:none;display:inline-block;cursor:pointer;} -selectoption{color:var(--text-color);background-color:var(--gray-300);} -select:focus{outline:0;} -select[disabled]{color:var(--text-color);border-bottom-color:var(--gray-500);opacity:0.5;cursor:default;} -select[name="enter_view"]{margin:0;padding:012px00;border:none;min-width:auto;} -select[name="enter_share"]{font-size:1.1rem;padding:0;border:none;min-width:40px;float:right;margin-top:13px;margin-right:20px;} -select[name="port_select"]{border:none;min-width:54px;padding-top:0;padding-bottom:0;} -select.narrow{min-width:76px;} -select.auto{min-width:auto;} -select.slot{min-width:44rem;max-width:44rem;} -input.narrow{width:166px;} -input.trim{width:76px;min-width:76px;} -textarea{resize:none;} -#header{position:absolute;top:0;left:0;width:100%;min-width:1260px;height:91px;z-index:102;margin:0;color:var(--gray-100);background-color:var(--gray-900);background-size:100%90px;background-repeat:no-repeat;} -#header.logo{float:left;margin-left:10px;color:var(--red-800);text-align:center;} -#header.logosvg{width:160px;display:block;margin:25px08px0;} -#header.block{margin:0;float:right;text-align:right;background-color:rgba(var(--gray-900),0.3);padding:10px12px;} -#header.text-left{float:left;text-align:right;padding-right:5px;border-right:solidmediumvar(--orange-800);} -#header.text-right{float:right;text-align:left;padding-left:5px;} -#header.text-righta{color:var(--gray-100);} -#header.text-right#licensetype{font-weight:bold;font-style:italic;margin-right:4px;} -div.title{margin:20px032px0;padding:8px10px;clear:both;border-bottom:1pxsolidvar(--gray-300);background-color:var(--gray-300);letter-spacing:1.8px;} -div.titlespan.left{font-size:1.4rem;} -div.titlespan.right{font-size:1.4rem;padding-top:2px;padding-right:10px;float:right;} -div.titlespanimg{padding-right:4px;} -div.title.shift{margin-top:-30px;} -#menu{position:absolute;top:90px;left:0;right:0;display:grid;grid-template-columns:automax-content;z-index:101;} -.nav-tile{height:4rem;line-height:4rem;padding:0;margin:0;font-size:1.2rem;letter-spacing:1.8px;background-color:var(--gray-900);white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;} -.nav-tile::-webkit-scrollbar{height:8px;} -.nav-tile.right{text-align:right;} +a.button:active[disabled] { + cursor: default; + color: var(--gray-500); + background: -webkit-gradient( + linear, + lefttop, + righttop, + from(var(--gray-700)), + to(var(--gray-500)) + ) + 00no-repeat, + -webkit-gradient( + linear, + lefttop, + righttop, + from(var(--gray-700)), + to(var(--gray-500)) + ) 0100%no-repeat, + -webkit-gradient( + linear, + leftbottom, + lefttop, + from(var(--gray-700)), + to(var(--gray-700)) + ) 0100%no-repeat, + -webkit-gradient( + linear, + leftbottom, + lefttop, + from(var(--gray-500)), + to(var(--gray-500)) + ) 100%100%no-repeat; + background: linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 00no-repeat, + linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0100%no-repeat, + linear-gradient(0deg, var(--gray-700) 0, var(--gray-700)) 0100%no-repeat, + linear-gradient(0deg, var(--gray-500) 0, var(--gray-500)) 100%100%no-repeat; + background-size: 100%2px, 100%2px, 2px100%, 2px100%; +} +input::-webkit-input-placeholder { + color: var(--blue-800); +} +select { + -webkit-appearance: none; + font-family: clear-sans; + font-size: 1.3rem; + min-width: 166px; + max-width: 300px; + padding: 5px8px5px0; + text-indent: 0; + margin: 010px00; + border: none; + border-bottom: 1pxsolidvar (--gray-900); + box-shadow: none; + border-radius: 0; + color: var(--text-color); + background-color: transparent; + background-image: linear-gradient( + 66.6deg, + transparent60%, + var(--gray-900) 40% + ), + linear-gradient(113.4deg, var(--gray-900) 40%, transparent60%); + background-position: calc(100%-4px), 100%; + background-size: 4px6px, 4px6px; + background-repeat: no-repeat; + outline: none; + display: inline-block; + cursor: pointer; +} +selectoption { + color: var(--text-color); + background-color: var(--gray-300); +} +select:focus { + outline: 0; +} +select[disabled] { + color: var(--text-color); + border-bottom-color: var(--gray-500); + opacity: 0.5; + cursor: default; +} +select[name="enter_view"] { + margin: 0; + padding: 012px00; + border: none; + min-width: auto; +} +select[name="enter_share"] { + font-size: 1.1rem; + padding: 0; + border: none; + min-width: 40px; + float: right; + margin-top: 13px; + margin-right: 20px; +} +select[name="port_select"] { + border: none; + min-width: 54px; + padding-top: 0; + padding-bottom: 0; +} +select.narrow { + min-width: 76px; +} +select.auto { + min-width: auto; +} +select.slot { + min-width: 44rem; + max-width: 44rem; +} +input.narrow { + width: 166px; +} +input.trim { + width: 76px; + min-width: 76px; +} +textarea { + resize: none; +} +#header { + position: absolute; + top: 0; + left: 0; + width: 100%; + min-width: 1260px; + height: 91px; + z-index: 102; + margin: 0; + color: var(--gray-100); + background-color: var(--gray-900); + background-size: 100%90px; + background-repeat: no-repeat; +} +#header.logo { + float: left; + margin-left: 10px; + color: var(--red-800); + text-align: center; +} +#header.logosvg { + width: 160px; + display: block; + margin: 25px08px0; +} +#header.block { + margin: 0; + float: right; + text-align: right; + background-color: rgba(var(--gray-900), 0.3); + padding: 10px12px; +} +#header.text-left { + float: left; + text-align: right; + padding-right: 5px; + border-right: solidmediumvar(--orange-800); +} +#header.text-right { + float: right; + text-align: left; + padding-left: 5px; +} +#header.text-righta { + color: var(--gray-100); +} +#header.text-right#licensetype { + font-weight: bold; + font-style: italic; + margin-right: 4px; +} +div.title { + margin: 20px032px0; + padding: 8px10px; + clear: both; + border-bottom: 1pxsolidvar (--gray-300); + background-color: var(--gray-300); + letter-spacing: 1.8px; +} +div.titlespan.left { + font-size: 1.4rem; +} +div.titlespan.right { + font-size: 1.4rem; + padding-top: 2px; + padding-right: 10px; + float: right; +} +div.titlespanimg { + padding-right: 4px; +} +div.title.shift { + margin-top: -30px; +} +#menu { + position: absolute; + top: 90px; + left: 0; + right: 0; + display: grid; + grid-template-columns: automax-content; + z-index: 101; +} +.nav-tile { + height: 4rem; + line-height: 4rem; + padding: 0; + margin: 0; + font-size: 1.2rem; + letter-spacing: 1.8px; + background-color: var(--gray-900); + white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; + scrollbar-width: thin; +} +.nav-tile::-webkit-scrollbar { + height: 8px; +} +.nav-tile.right { + text-align: right; +} .nav-item, -.nav-user{position:relative;display:inline-block;text-align:center;margin:0;} -.nav-itema{min-width:0;} -.nav-itemaspan{display:none;} -.nav-item.system{vertical-align:middle;padding-bottom:2px;} -.nav-itema{color:var(--gray-100);background-color:transparent;text-transform:uppercase;font-weight:bold;display:block;padding:010px;} -.nav-itema{text-decoration:none;text-decoration-skip-ink:auto;-webkit-text-decoration-skip:objects;-webkit-transition:all0.25sease-out;transition:all0.25sease-out;} +.nav-user { + position: relative; + display: inline-block; + text-align: center; + margin: 0; +} +.nav-itema { + min-width: 0; +} +.nav-itemaspan { + display: none; +} +.nav-item.system { + vertical-align: middle; + padding-bottom: 2px; +} +.nav-itema { + color: var(--gray-100); + background-color: transparent; + text-transform: uppercase; + font-weight: bold; + display: block; + padding: 010px; +} +.nav-itema { + text-decoration: none; + text-decoration-skip-ink: auto; + -webkit-text-decoration-skip: objects; + -webkit-transition: all0.25sease-out; + transition: all0.25sease-out; +} .nav-item:after, -.nav-user.show:after{border-radius:4px;display:block;background-color:transparent;content:"";width:32px;height:2px;bottom:8px;position:absolute;left:50%;margin-left:-16px;-webkit-transition:all0.25sease-in-out;transition:all0.25sease-in-out;pointer-events:none;} +.nav-user.show:after { + border-radius: 4px; + display: block; + background-color: transparent; + content: ""; + width: 32px; + height: 2px; + bottom: 8px; + position: absolute; + left: 50%; + margin-left: -16px; + -webkit-transition: all0.25sease-in-out; + transition: all0.25sease-in-out; + pointer-events: none; +} .nav-item:focus:after, .nav-item:hover:after, -.nav-user.show:hover:after{background-color:var(--orange-800);} -.nav-item.active:after{background-color:var(--background-color);} -.nav-usera{color:var(--gray-100);background-color:transparent;display:block;padding:010px;} -.nav-user.system{vertical-align:middle;padding-bottom:2px;} -#clear{clear:both;} -#footer{position:fixed;bottom:0;left:0;color:var(--gray-800);background-color:var(--gray-200);padding:5px0;width:100%;height:1.6rem;line-height:1.6rem;text-align:center;z-index:10000;} -#statusraid{float:left;padding-left:10px;} -#countdown{margin:0auto;} -#copyright{font-family:bitstream;font-size:1.1rem;float:right;padding-right:10px;} -.green{color:var(--green-800);padding-left:5px;padding-right:5px;} -.red{color:var(--red-600);padding-left:5px;padding-right:5px;} -.orange{color:var(--orange-300);padding-left:5px;padding-right:5px;} -.blue{color:var(--blue-800);padding-left:5px;padding-right:5px;} +.nav-user.show:hover:after { + background-color: var(--orange-800); +} +.nav-item.active:after { + background-color: var(--background-color); +} +.nav-usera { + color: var(--gray-100); + background-color: transparent; + display: block; + padding: 010px; +} +.nav-user.system { + vertical-align: middle; + padding-bottom: 2px; +} +#clear { + clear: both; +} +#footer { + position: fixed; + bottom: 0; + left: 0; + color: var(--gray-800); + background-color: var(--gray-200); + padding: 5px0; + width: 100%; + height: 1.6rem; + line-height: 1.6rem; + text-align: center; + z-index: 10000; +} +#statusraid { + float: left; + padding-left: 10px; +} +#countdown { + margin: 0auto; +} +#copyright { + font-family: bitstream; + font-size: 1.1rem; + float: right; + padding-right: 10px; +} +.green { + color: var(--green-800); + padding-left: 5px; + padding-right: 5px; +} +.red { + color: var(--red-600); + padding-left: 5px; + padding-right: 5px; +} +.orange { + color: var(--orange-300); + padding-left: 5px; + padding-right: 5px; +} +.blue { + color: var(--blue-800); + padding-left: 5px; + padding-right: 5px; +} .green-text, -.passed{color:var(--green-800);} +.passed { + color: var(--green-800); +} .red-text, -.failed{color:var(--red-600);} +.failed { + color: var(--red-600); +} .orange-text, -.warning{color:var(--orange-300);} -.blue-text{color:var(--blue-800);} -.grey-text{color:var(--gray-500);} -.green-orb{color:var(--green-200);} -.grey-orb{color:var(--gray-300);} -.blue-orb{color:var(--blue-700);} -.yellow-orb{color:var(--orange-200);} -.red-orb{color:var(--red-500);} -.usage-bar{float:left;height:2rem;line-height:2rem;width:14rem;padding:1px1px1px2px;margin:8px12px;border-radius:3px;background-color:var(--gray-500);box-shadow:01px0var(--gray-400),inset01px0var(--gray-600);} -.usage-bar>span{display:block;height:100%;text-align:right;border-radius:2px;color:var(--gray-100);background-color:var(--gray-500);box-shadow:inset01px0rgba(var(--gray-000),0.5);} -.usage-disk{position:relative;height:1.8rem;background-color:var(--gray-200);margin:0;} -.usage-disk>span:first-child{position:absolute;left:0;margin:0!important;height:1.8rem;background-color:var(--gray-300);} -.usage-disk>span:last-child{position:relative;padding-right:4px;z-index:1;} -.usage-disk.sys{height:12px;margin:-15px20px044px;} -.usage-disk.sys>span:first-child{height:12px;padding:0;} -.usage-disk.sys.none{background-color:transparent;} -.usage-disk.mm{height:3px;margin:5px20px00;} -.usage-disk.mm>span:first-child{height:3px;} -.notice{background:var(--yellow-100)url(../images/notice.png)no-repeat;background-position:60px50%;color:var(--text-color);font-size:1.4rem;text-align:left;padding:15px015px130px;display:block;height:7rem;line-height:7rem;vertical-align:middle;border-top:2pxsolidvar(--yellow-500);border-bottom:2pxsolidvar(--yellow-500);} -.notice.shift{margin-top:160px;} -.greenbar{background:-webkit-gradient(linear,lefttop,righttop,from(var(--green-900)),to(var(--green-500)));background:linear-gradient(90deg,var(--green-900)0,var(--green-500));} -.orangebar{background:-webkit-gradient(linear,lefttop,righttop,from(var(--orange-400)),to(var(--orange-400)));background:linear-gradient(90deg,var(--orange-400)0,var(--orange-400));} -.redbar{background:-webkit-gradient(linear,lefttop,righttop,from(var(--red-900)),to(var(--red-700)));background:linear-gradient(90deg,var(--red-900)0,var(--red-700));} -.graybar{background:-webkit-gradient(linear,lefttop,righttop,from(var(--gray-400)),to(var(--gray-200)));background:linear-gradient(90deg,var(--gray-400)0,var(--gray-200));} -table{border-collapse:collapse;border-spacing:0;border-style:hidden;margin:-30px000;width:100%;background-color:var(--background-color);} -tabletheadtd{padding:7px0;} -tabletbodytd{padding:5px0;} -tabletbodytr.tr_last{background-color:var(--background-color);border-top:1pxsolidvar(--gray-300);} -tabletd.cpu-info{border:1pxsolidvar(--gray-300);} -table.disk_status{white-space:nowrap;} -table.disk_statustdspan{margin-left:10px;} -table.disk_statustheadtr:first-childtd{font-size:1.1rem;text-transform:uppercase;letter-spacing:1px;background-color:var(--gray-200);} -table.disk_statustheadtr:last-child{border-bottom:1pxsolidvar(--gray-300);} -table.disk_statustr>td{width:10%;padding-left:12px;padding-right:0;white-space:nowrap;} -table.disk_statustr>td+td{width:auto;} -table.disk_statustr>td+td+td{width:6.5%;text-align:center;padding-left:4px;padding-right:8px;} -table.disk_statustr>td+td+td+td{text-align:right;padding-left:0;padding-right:12px;} -table.disk_statustbodytr:nth-child(even){background-color:var(--background-color);} -table.disk_statustbodytr:not(.tr_last):hovertd{background-color:rgba(var(--gray-900),0.1);} -table.disk_status.statstr>td+td{text-align:left;padding-left:0;padding-right:12px;} -table.array_statustd{padding:4px0;} -table.array_statustr>td{text-align:left;white-space:nowrap;padding-left:12px;width:30%;} -table.array_statustr>td+td{padding-left:2px;width:20%;} -table.array_statustr>td+td+td{width:auto;} -table.array_statustd.line{border-top:1pxsolidvar(--gray-300);} -table.array_status.noshift{margin-top:0;} -table.settings{margin:0;padding:0;background-color:transparent;} -table.settingstd:first-child{width:35%;padding:12px;} -table.settingstd+td{padding-left:8px;} -table.settings.shifted{padding:0;margin-left:0;margin-top:0;} -table.settings.shiftedtd{padding-left:0;} -table.access_list{border-spacing:0;margin-top:10px;border:none;} -table.access_listtr:first-childtd{font-size:1.1rem;text-transform:uppercase;letter-spacing:1px;vertical-align:middle;text-align:left;border:1pxsolidvar(--gray-300);border-bottom:1pxsolidvar(--gray-300);background-color:var(--gray-200);} -table.access_listtd:first-child{font-weight:normal;width:35%;padding-left:12px;} -table.access_listtr:first-childtd:first-child{font-weight:normal;} -table.access_listtr>td+td{white-space:nowrap;} -table.share_status{white-space:nowrap;} -table.share_statustheadtr:first-childtd{font-size:1.1rem;text-transform:uppercase;letter-spacing:1px;background-color:var(--gray-300);} -table.share_statustr>td{text-align:left;padding-left:12px;} -table.share_statustr>td+td{padding-left:0;} -table.share_statustbodytr:nth-child(even){background-color:var(--background-color);} -table.share_status:not(.dashboard)tbodytr:hovertd{background-color:rgba(var(--gray-900),0.1);} -table.share_statustbodytr.alert{color:var(--red-600);} -table.share_statustbodytr.warn{color:var(--orange-300);} -table.share_status.fixedtr>td+td{min-width:39px;font-size:1.1rem;text-align:center;padding:0;} -table.share_status.table{margin-top:36px;} -table.share_status.tabletr>td{width:50%;} -table.share_status.dashboard{margin:0;border:1pxsolidvar(--gray-200);} -table.share_status.dashboardtbody{border:1pxsolidvar(--gray-200);} -table.share_status.dashboardtr:first-child>td{height:3.6rem;padding-top:12px;font-size:1.6rem;font-weight:bold;letter-spacing:1.8px;text-transform:none;vertical-align:top;} -table.share_status.dashboardtr:nth-child(even){background-color:transparent;} -table.share_status.dashboardtr:last-child>td{padding-bottom:20px;} -table.share_status.dashboardtr.last>td{padding-bottom:20px;} -table.share_status.dashboardtr.headertd{padding-bottom:10px;} -table.share_status.dashboardtd{padding:3px10px;} -table.share_status.dashboardtd.vpn{font-size:1.1rem;font-weight:bold;text-transform:uppercase;letter-spacing:1px;} -table.share_status.dashboardtddiv.section{display:inline-block;vertical-align:top;margin-left:4px;font-size:1.2rem;font-weight:bold;text-transform:uppercase;letter-spacing:1px;} -table.share_status.dashboardtddiv.sectionspan{font-weight:normal;text-transform:none;letter-spacing:0;white-space:normal;} -table.share_status.dashboardtdspan.info{float:right;margin-right:20px;font-size:1.2rem;font-weight:normal;text-transform:none;letter-spacing:0;} -table.share_status.dashboardtdspan.info.title{font-weight:bold;} -table.share_status.dashboardtdspan.load{display:inline-block;width:38px;text-align:right;} -table.share_status.dashboardtdspan.finish{float:right;margin-right:24px;} -table.share_status.dashboardi.control{float:right;font-size:1.4rem!important;margin:03px00;cursor:pointer;background-color:rgba(var(--gray-900),0.1);padding:2px;} -[name="arrayOps"]{margin-top:12px;} -span.error{color:var(--red-600);background-color:var(--red-300);display:block;width:100%;} -span.warn{color:var(--orange-300);background-color:var(--yellow-200);display:block;width:100%;} -span.system{color:var(--blue-700);background-color:var(--blue-300);display:block;width:100%;} -span.array{color:var(--green-800);background-color:var(--green-100);display:block;width:100%;} -span.login{color:var(--orange-900);background-color:var(--red-100);display:block;width:100%;} -span.lite{background-color:var(--background-color);} -span.label{font-size:1.2rem;padding:2px02px6px;margin-right:6px;border-radius:4px;display:inline;width:auto;vertical-align:middle;} -span.cpu-speed{display:block;color:var(--blue-900);} -span.status{float:right;font-size:1.4rem;margin-top:30px;padding-right:8px;letter-spacing:1.8px;} -span.status.vhshift{margin-top:0;margin-right:-9px;} -span.status.vshift{margin-top:-16px;} -span.status.hshift{margin-right:-20px;} -span.diskinfo{float:left;clear:both;margin-top:5px;padding-left:10px;} -span.bitstream{font-family:bitstream;font-size:1.1rem;} -span.ucfirst{text-transform:capitalize;} -span.strong{font-weight:bold;} -span.big{font-size:1.4rem;} -span.small{font-size:1.2rem;} -span.outer{margin-bottom:20px;margin-right:0;} -span.outer.solid{background-color:var(--background-color);} -span.hand{cursor:pointer;} -span.outer.started>img, -span.outer.started>i.img{opacity:1;} -span.outer.stopped>img, -span.outer.stopped>i.img{opacity:0.3;} -span.outer.paused>img, -span.outer.paused>i.img{opacity:0.6;} -span.inner{display:inline-block;vertical-align:top;} -span.state{font-size:1.1rem;margin-left:7px;} -i.padlock{margin-right:8px;cursor:default;vertical-align:middle;} -i.nolock{visibility:hidden;margin-right:8px;vertical-align:middle;} -i.lock{margin-left:8px;cursor:default;vertical-align:middle;} -i.orb{font-size:1.1rem;margin:08px03px;} +.warning { + color: var(--orange-300); +} +.blue-text { + color: var(--blue-800); +} +.grey-text { + color: var(--gray-500); +} +.green-orb { + color: var(--green-200); +} +.grey-orb { + color: var(--gray-300); +} +.blue-orb { + color: var(--blue-700); +} +.yellow-orb { + color: var(--orange-200); +} +.red-orb { + color: var(--red-500); +} +.usage-bar { + float: left; + height: 2rem; + line-height: 2rem; + width: 14rem; + padding: 1px1px1px2px; + margin: 8px12px; + border-radius: 3px; + background-color: var(--gray-500); + box-shadow: 01px0var (--gray-400), inset01px0var(--gray-600); +} +.usage-bar > span { + display: block; + height: 100%; + text-align: right; + border-radius: 2px; + color: var(--gray-100); + background-color: var(--gray-500); + box-shadow: inset01px0rgba(var(--gray-000), 0.5); +} +.usage-disk { + position: relative; + height: 1.8rem; + background-color: var(--gray-200); + margin: 0; +} +.usage-disk > span:first-child { + position: absolute; + left: 0; + margin: 0 !important; + height: 1.8rem; + background-color: var(--gray-300); +} +.usage-disk > span:last-child { + position: relative; + padding-right: 4px; + z-index: 1; +} +.usage-disk.sys { + height: 12px; + margin: -15px20px044px; +} +.usage-disk.sys > span:first-child { + height: 12px; + padding: 0; +} +.usage-disk.sys.none { + background-color: transparent; +} +.usage-disk.mm { + height: 3px; + margin: 5px20px00; +} +.usage-disk.mm > span:first-child { + height: 3px; +} +.notice { + background: var(--yellow-100) url(../images/notice.png) no-repeat; + background-position: 60px50%; + color: var(--text-color); + font-size: 1.4rem; + text-align: left; + padding: 15px015px130px; + display: block; + height: 7rem; + line-height: 7rem; + vertical-align: middle; + border-top: 2pxsolidvar (--yellow-500); + border-bottom: 2pxsolidvar (--yellow-500); +} +.notice.shift { + margin-top: 160px; +} +.greenbar { + background: -webkit-gradient( + linear, + lefttop, + righttop, + from(var(--green-900)), + to(var(--green-500)) + ); + background: linear-gradient(90deg, var(--green-900) 0, var(--green-500)); +} +.orangebar { + background: -webkit-gradient( + linear, + lefttop, + righttop, + from(var(--orange-400)), + to(var(--orange-400)) + ); + background: linear-gradient(90deg, var(--orange-400) 0, var(--orange-400)); +} +.redbar { + background: -webkit-gradient( + linear, + lefttop, + righttop, + from(var(--red-900)), + to(var(--red-700)) + ); + background: linear-gradient(90deg, var(--red-900) 0, var(--red-700)); +} +.graybar { + background: -webkit-gradient( + linear, + lefttop, + righttop, + from(var(--gray-400)), + to(var(--gray-200)) + ); + background: linear-gradient(90deg, var(--gray-400) 0, var(--gray-200)); +} +table { + border-collapse: collapse; + border-spacing: 0; + border-style: hidden; + margin: -30px000; + width: 100%; + background-color: var(--background-color); +} +tabletheadtd { + padding: 7px0; +} +tabletbodytd { + padding: 5px0; +} +tabletbodytr.tr_last { + background-color: var(--background-color); + border-top: 1pxsolidvar (--gray-300); +} +tabletd.cpu-info { + border: 1pxsolidvar (--gray-300); +} +table.disk_status { + white-space: nowrap; +} +table.disk_statustdspan { + margin-left: 10px; +} +table.disk_statustheadtr:first-childtd { + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 1px; + background-color: var(--gray-200); +} +table.disk_statustheadtr:last-child { + border-bottom: 1pxsolidvar (--gray-300); +} +table.disk_statustr > td { + width: 10%; + padding-left: 12px; + padding-right: 0; + white-space: nowrap; +} +table.disk_statustr > td + td { + width: auto; +} +table.disk_statustr > td + td + td { + width: 6.5%; + text-align: center; + padding-left: 4px; + padding-right: 8px; +} +table.disk_statustr > td + td + td + td { + text-align: right; + padding-left: 0; + padding-right: 12px; +} +table.disk_statustbodytr:nth-child(even) { + background-color: var(--background-color); +} +table.disk_statustbodytr:not(.tr_last):hovertd { + background-color: rgba(var(--gray-900), 0.1); +} +table.disk_status.statstr > td + td { + text-align: left; + padding-left: 0; + padding-right: 12px; +} +table.array_statustd { + padding: 4px0; +} +table.array_statustr > td { + text-align: left; + white-space: nowrap; + padding-left: 12px; + width: 30%; +} +table.array_statustr > td + td { + padding-left: 2px; + width: 20%; +} +table.array_statustr > td + td + td { + width: auto; +} +table.array_statustd.line { + border-top: 1pxsolidvar (--gray-300); +} +table.array_status.noshift { + margin-top: 0; +} +table.settings { + margin: 0; + padding: 0; + background-color: transparent; +} +table.settingstd:first-child { + width: 35%; + padding: 12px; +} +table.settingstd + td { + padding-left: 8px; +} +table.settings.shifted { + padding: 0; + margin-left: 0; + margin-top: 0; +} +table.settings.shiftedtd { + padding-left: 0; +} +table.access_list { + border-spacing: 0; + margin-top: 10px; + border: none; +} +table.access_listtr:first-childtd { + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 1px; + vertical-align: middle; + text-align: left; + border: 1pxsolidvar (--gray-300); + border-bottom: 1pxsolidvar (--gray-300); + background-color: var(--gray-200); +} +table.access_listtd:first-child { + font-weight: normal; + width: 35%; + padding-left: 12px; +} +table.access_listtr:first-childtd:first-child { + font-weight: normal; +} +table.access_listtr > td + td { + white-space: nowrap; +} +table.share_status { + white-space: nowrap; +} +table.share_statustheadtr:first-childtd { + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 1px; + background-color: var(--gray-300); +} +table.share_statustr > td { + text-align: left; + padding-left: 12px; +} +table.share_statustr > td + td { + padding-left: 0; +} +table.share_statustbodytr:nth-child(even) { + background-color: var(--background-color); +} +table.share_status:not(.dashboard)tbodytr:hovertd { + background-color: rgba(var(--gray-900), 0.1); +} +table.share_statustbodytr.alert { + color: var(--red-600); +} +table.share_statustbodytr.warn { + color: var(--orange-300); +} +table.share_status.fixedtr > td + td { + min-width: 39px; + font-size: 1.1rem; + text-align: center; + padding: 0; +} +table.share_status.table { + margin-top: 36px; +} +table.share_status.tabletr > td { + width: 50%; +} +table.share_status.dashboard { + margin: 0; + border: 1pxsolidvar (--gray-200); +} +table.share_status.dashboardtbody { + border: 1pxsolidvar (--gray-200); +} +table.share_status.dashboardtr:first-child > td { + height: 3.6rem; + padding-top: 12px; + font-size: 1.6rem; + font-weight: bold; + letter-spacing: 1.8px; + text-transform: none; + vertical-align: top; +} +table.share_status.dashboardtr:nth-child(even) { + background-color: transparent; +} +table.share_status.dashboardtr:last-child > td { + padding-bottom: 20px; +} +table.share_status.dashboardtr.last > td { + padding-bottom: 20px; +} +table.share_status.dashboardtr.headertd { + padding-bottom: 10px; +} +table.share_status.dashboardtd { + padding: 3px10px; +} +table.share_status.dashboardtd.vpn { + font-size: 1.1rem; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; +} +table.share_status.dashboardtddiv.section { + display: inline-block; + vertical-align: top; + margin-left: 4px; + font-size: 1.2rem; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; +} +table.share_status.dashboardtddiv.sectionspan { + font-weight: normal; + text-transform: none; + letter-spacing: 0; + white-space: normal; +} +table.share_status.dashboardtdspan.info { + float: right; + margin-right: 20px; + font-size: 1.2rem; + font-weight: normal; + text-transform: none; + letter-spacing: 0; +} +table.share_status.dashboardtdspan.info.title { + font-weight: bold; +} +table.share_status.dashboardtdspan.load { + display: inline-block; + width: 38px; + text-align: right; +} +table.share_status.dashboardtdspan.finish { + float: right; + margin-right: 24px; +} +table.share_status.dashboardi.control { + float: right; + font-size: 1.4rem !important; + margin: 03px00; + cursor: pointer; + background-color: rgba(var(--gray-900), 0.1); + padding: 2px; +} +[name="arrayOps"] { + margin-top: 12px; +} +span.error { + color: var(--red-600); + background-color: var(--red-300); + display: block; + width: 100%; +} +span.warn { + color: var(--orange-300); + background-color: var(--yellow-200); + display: block; + width: 100%; +} +span.system { + color: var(--blue-700); + background-color: var(--blue-300); + display: block; + width: 100%; +} +span.array { + color: var(--green-800); + background-color: var(--green-100); + display: block; + width: 100%; +} +span.login { + color: var(--orange-900); + background-color: var(--red-100); + display: block; + width: 100%; +} +span.lite { + background-color: var(--background-color); +} +span.label { + font-size: 1.2rem; + padding: 2px02px6px; + margin-right: 6px; + border-radius: 4px; + display: inline; + width: auto; + vertical-align: middle; +} +span.cpu-speed { + display: block; + color: var(--blue-900); +} +span.status { + float: right; + font-size: 1.4rem; + margin-top: 30px; + padding-right: 8px; + letter-spacing: 1.8px; +} +span.status.vhshift { + margin-top: 0; + margin-right: -9px; +} +span.status.vshift { + margin-top: -16px; +} +span.status.hshift { + margin-right: -20px; +} +span.diskinfo { + float: left; + clear: both; + margin-top: 5px; + padding-left: 10px; +} +span.bitstream { + font-family: bitstream; + font-size: 1.1rem; +} +span.ucfirst { + text-transform: capitalize; +} +span.strong { + font-weight: bold; +} +span.big { + font-size: 1.4rem; +} +span.small { + font-size: 1.2rem; +} +span.outer { + margin-bottom: 20px; + margin-right: 0; +} +span.outer.solid { + background-color: var(--background-color); +} +span.hand { + cursor: pointer; +} +span.outer.started > img, +span.outer.started > i.img { + opacity: 1; +} +span.outer.stopped > img, +span.outer.stopped > i.img { + opacity: 0.3; +} +span.outer.paused > img, +span.outer.paused > i.img { + opacity: 0.6; +} +span.inner { + display: inline-block; + vertical-align: top; +} +span.state { + font-size: 1.1rem; + margin-left: 7px; +} +i.padlock { + margin-right: 8px; + cursor: default; + vertical-align: middle; +} +i.nolock { + visibility: hidden; + margin-right: 8px; + vertical-align: middle; +} +i.lock { + margin-left: 8px; + cursor: default; + vertical-align: middle; +} +i.orb { + font-size: 1.1rem; + margin: 08px03px; +} img.img, -i.img{width:32px;height:32px;margin-right:10px;} -img.icon{margin:-3px4px00;} -img.list{width:auto;max-width:32px;height:32px;} -i.list{font-size:32px;} -a.list{text-decoration:none;color:inherit;} -div.content{position:absolute;top:0;left:0;width:100%;padding-bottom:30px;z-index:-1;clear:both;} -div.content.shift{margin-top:1px;} -label+.content{margin-top:86px;} -div.tabs{position:relative;margin:130px000;} -div.tab{float:left;margin-top:30px;} -div.tabinput[id^="tab"]{display:none;} -div.tab[type="radio"]+label:hover{background-color:transparent;border:1pxsolidvar(--orange-500);border-bottom:none;cursor:pointer;opacity:1;} -div.tab[type="radio"]:checked+label{cursor:default;background-color:transparent;border:1pxsolidvar(--orange-500);border-bottom:none;opacity:1;} -div.tab[type="radio"]+label~.content{display:none;} -div.tab[type="radio"]:checked+label~.content{display:inline;} -div.tab[type="radio"]+label{position:relative;font-size:1.4rem;letter-spacing:1.8px;padding:4px10px;margin-right:2px;border-top-left-radius:6px;border-top-right-radius:6px;border:1pxsolidvar(--gray-400);border-bottom:none;background-color:var(--gray-200);opacity:0.5;} -div.tab[type="radio"]+labelimg{padding-right:4px;} -div.Panel{text-align:center;float:left;margin:030px30px12px;height:8rem;} -div.Panela{text-decoration:none;} -div.Panelspan{height:42px;display:block;} -div.Panel:hover.PanelText{text-decoration:underline;} -div.Panelimg.PanelImg{width:auto;max-width:32px;height:32px;} -div.Paneli.PanelIcon{font-size:32px;color:var(--text-color);} -div.user-list{float:left;padding:10px;margin-right:10px;margin-bottom:24px;border:1pxsolidvar(--gray-300);border-radius:5px;line-height:2rem;height:10rem;width:10rem;background-color:var(--gray-200);} -div.user-listimg{width:auto;max-width:48px;height:48px;margin-bottom:16px;} -div.up{margin-top:-30px;border:1pxsolidvar(--gray-200);padding:4px6px;overflow:auto;} -div.spinner{margin:48pxauto;text-align:center;} -div.spinner.fixed{display:none;position:fixed;top:50%;left:50%;margin-top:-16px;margin-left:-64px;z-index:10000;} -div.spinner.unraid_mark{height:64px;} +i.img { + width: 32px; + height: 32px; + margin-right: 10px; +} +img.icon { + margin: -3px4px00; +} +img.list { + width: auto; + max-width: 32px; + height: 32px; +} +i.list { + font-size: 32px; +} +a.list { + text-decoration: none; + color: inherit; +} +div.content { + position: absolute; + top: 0; + left: 0; + width: 100%; + padding-bottom: 30px; + z-index: -1; + clear: both; +} +div.content.shift { + margin-top: 1px; +} +label + .content { + margin-top: 86px; +} +div.tabs { + position: relative; + margin: 130px000; +} +div.tab { + float: left; + margin-top: 30px; +} +div.tabinput[id^="tab"] { + display: none; +} +div.tab[type="radio"] + label:hover { + background-color: transparent; + border: 1pxsolidvar (--orange-500); + border-bottom: none; + cursor: pointer; + opacity: 1; +} +div.tab[type="radio"]:checked + label { + cursor: default; + background-color: transparent; + border: 1pxsolidvar (--orange-500); + border-bottom: none; + opacity: 1; +} +div.tab[type="radio"] + label ~ .content { + display: none; +} +div.tab[type="radio"]:checked + label ~ .content { + display: inline; +} +div.tab[type="radio"] + label { + position: relative; + font-size: 1.4rem; + letter-spacing: 1.8px; + padding: 4px10px; + margin-right: 2px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + border: 1pxsolidvar (--gray-400); + border-bottom: none; + background-color: var(--gray-200); + opacity: 0.5; +} +div.tab[type="radio"] + labelimg { + padding-right: 4px; +} +div.Panel { + text-align: center; + float: left; + margin: 030px30px12px; + height: 8rem; +} +div.Panela { + text-decoration: none; +} +div.Panelspan { + height: 42px; + display: block; +} +div.Panel:hover.PanelText { + text-decoration: underline; +} +div.Panelimg.PanelImg { + width: auto; + max-width: 32px; + height: 32px; +} +div.Paneli.PanelIcon { + font-size: 32px; + color: var(--text-color); +} +div.user-list { + float: left; + padding: 10px; + margin-right: 10px; + margin-bottom: 24px; + border: 1pxsolidvar (--gray-300); + border-radius: 5px; + line-height: 2rem; + height: 10rem; + width: 10rem; + background-color: var(--gray-200); +} +div.user-listimg { + width: auto; + max-width: 48px; + height: 48px; + margin-bottom: 16px; +} +div.up { + margin-top: -30px; + border: 1pxsolidvar (--gray-200); + padding: 4px6px; + overflow: auto; +} +div.spinner { + margin: 48pxauto; + text-align: center; +} +div.spinner.fixed { + display: none; + position: fixed; + top: 50%; + left: 50%; + margin-top: -16px; + margin-left: -64px; + z-index: 10000; +} +div.spinner.unraid_mark { + height: 64px; +} div.spinner.unraid_mark_2, -div.unraid_mark_4{animation:mark_21.5seaseinfinite;} -div.spinner.unraid_mark_3{animation:mark_31.5seaseinfinite;} +div.unraid_mark_4 { + animation: mark_21.5seaseinfinite; +} +div.spinner.unraid_mark_3 { + animation: mark_31.5seaseinfinite; +} div.spinner.unraid_mark_6, -div.unraid_mark_8{animation:mark_61.5seaseinfinite;} -div.spinner.unraid_mark_7{animation:mark_71.5seaseinfinite;} -div.domain{margin-top:-20px;} -@keyframesmark_2{50%{transform:translateY(-40px);}100%{transform:translateY(0px);}} -@keyframesmark_3{50%{transform:translateY(-62px);}100%{transform:translateY(0px);}} -@keyframesmark_6{50%{transform:translateY(40px);}100%{transform:translateY(0px);}} -@keyframesmark_7{50%{transform:translateY(62px);}100%{transform:translateY(0px);}} -pre.up{margin-top:-30px;} -pre{border:1pxsolidvar(--gray-300);font-family:bitstream;font-size:1.3rem;line-height:1.8rem;padding:4px6px;overflow:auto;} -iframe#progressFrame{position:fixed;bottom:32px;left:0;margin:0;padding:8px8px08px;width:100%;height:1.2rem;line-height:1.2rem;border-style:none;overflow:hidden;font-family:bitstream;font-size:1.1rem;color:var(--gray-500);white-space:nowrap;z-index:-10;} -dl{margin:0;padding-left:12px;line-height:2.6rem;} -dt{clear:left;float:left;width:35%;font-weight:normal;} -dd{margin-bottom:12px;white-space:nowrap;} -ddp{margin:004px0;} -ddblockquote{padding-left:0;} -blockquote{width:90%;margin:10pxauto;text-align:left;padding:4px20px;border-top:2pxsolidvar(--blue-200);border-bottom:2pxsolidvar(--blue-200);color:var(--gray-800);background-color:var(--blue-100);} -blockquote.ontop{margin-top:-20px;margin-bottom:46px;} -blockquotea{color:var(--orange-500);font-weight:600;} +div.unraid_mark_8 { + animation: mark_61.5seaseinfinite; +} +div.spinner.unraid_mark_7 { + animation: mark_71.5seaseinfinite; +} +div.domain { + margin-top: -20px; +} +@keyframesmark_2 { + 50% { + transform: translateY(-40px); + } + 100% { + transform: translateY(0px); + } +} +@keyframesmark_3 { + 50% { + transform: translateY(-62px); + } + 100% { + transform: translateY(0px); + } +} +@keyframesmark_6 { + 50% { + transform: translateY(40px); + } + 100% { + transform: translateY(0px); + } +} +@keyframesmark_7 { + 50% { + transform: translateY(62px); + } + 100% { + transform: translateY(0px); + } +} +pre.up { + margin-top: -30px; +} +pre { + border: 1pxsolidvar (--gray-300); + font-family: bitstream; + font-size: 1.3rem; + line-height: 1.8rem; + padding: 4px6px; + overflow: auto; +} +iframe#progressFrame { + position: fixed; + bottom: 32px; + left: 0; + margin: 0; + padding: 8px8px08px; + width: 100%; + height: 1.2rem; + line-height: 1.2rem; + border-style: none; + overflow: hidden; + font-family: bitstream; + font-size: 1.1rem; + color: var(--gray-500); + white-space: nowrap; + z-index: -10; +} +dl { + margin: 0; + padding-left: 12px; + line-height: 2.6rem; +} +dt { + clear: left; + float: left; + width: 35%; + font-weight: normal; +} +dd { + margin-bottom: 12px; + white-space: nowrap; +} +ddp { + margin: 004px0; +} +ddblockquote { + padding-left: 0; +} +blockquote { + width: 90%; + margin: 10pxauto; + text-align: left; + padding: 4px20px; + border-top: 2pxsolidvar (--blue-200); + border-bottom: 2pxsolidvar (--blue-200); + color: var(--gray-800); + background-color: var(--blue-100); +} +blockquote.ontop { + margin-top: -20px; + margin-bottom: 46px; +} +blockquotea { + color: var(--orange-500); + font-weight: 600; +} blockquotea:hover, -blockquotea:focus{color:var(--orange-800);} -label.checkbox{display:block;position:relative;padding-left:28px;margin:3px0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;} -label.checkboxinput{position:absolute;opacity:0;cursor:pointer;} -span.checkmark{position:absolute;top:0;left:6px;height:14px;width:14px;background-color:var(--gray-200);border-radius:100%;} -label.checkbox:hoverinput~.checkmark{background-color:var(--gray-300);} -label.checkboxinput:checked~.checkmark{background-color:var(--orange-500);} -label.checkboxinput:disabled~.checkmark{opacity:0.5;} -a.bannerDismiss{float:right;cursor:pointer;text-decoration:none;margin-right:1rem;} -.bannerDismiss::before{content:"\e92f";font-family:Unraid;color:var(--orange-300);} -a.bannerInfo{cursor:pointer;text-decoration:none;} -.bannerInfo::before{content:"\f05a";font-family:fontAwesome;color:var(--orange-300);} -::-webkit-scrollbar{width:10px;height:10px;background:transparent;} -::-webkit-scrollbar-thumb{background:var(--gray-400);border-radius:10px;} -::-webkit-scrollbar-corner{background:var(--gray-400);border-radius:10px;} -::-webkit-scrollbar-thumb:hover{background:var(--gray-500);} +blockquotea:focus { + color: var(--orange-800); +} +label.checkbox { + display: block; + position: relative; + padding-left: 28px; + margin: 3px0; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +label.checkboxinput { + position: absolute; + opacity: 0; + cursor: pointer; +} +span.checkmark { + position: absolute; + top: 0; + left: 6px; + height: 14px; + width: 14px; + background-color: var(--gray-200); + border-radius: 100%; +} +label.checkbox:hoverinput ~ .checkmark { + background-color: var(--gray-300); +} +label.checkboxinput:checked ~ .checkmark { + background-color: var(--orange-500); +} +label.checkboxinput:disabled ~ .checkmark { + opacity: 0.5; +} +a.bannerDismiss { + float: right; + cursor: pointer; + text-decoration: none; + margin-right: 1rem; +} +.bannerDismiss::before { + content: "\e92f"; + font-family: Unraid; + color: var(--orange-300); +} +a.bannerInfo { + cursor: pointer; + text-decoration: none; +} +.bannerInfo::before { + content: "\f05a"; + font-family: fontAwesome; + color: var(--orange-300); +} +::-webkit-scrollbar { + width: 10px; + height: 10px; + background: transparent; +} +::-webkit-scrollbar-thumb { + background: var(--gray-400); + border-radius: 10px; +} +::-webkit-scrollbar-corner { + background: var(--gray-400); + border-radius: 10px; +} +::-webkit-scrollbar-thumb:hover { + background: var(--gray-500); +} From 5551118b229505257b71987bf7f7cff9d3a79720 Mon Sep 17 00:00:00 2001 From: Bailey Matthews Date: Sat, 9 Sep 2023 13:22:42 +0100 Subject: [PATCH 03/99] example: format file --- .../styles/default-white-formatted.css | 1750 ++++++++++++++--- 1 file changed, 1478 insertions(+), 272 deletions(-) diff --git a/emhttp/plugins/dynamix/styles/default-white-formatted.css b/emhttp/plugins/dynamix/styles/default-white-formatted.css index c41186a0c..e42a1b928 100644 --- a/emhttp/plugins/dynamix/styles/default-white-formatted.css +++ b/emhttp/plugins/dynamix/styles/default-white-formatted.css @@ -1,36 +1,173 @@ -:root {--gray-000: rgb(255, 255, 255); /* #ffffff */--gray-100: rgb(242, 242, 242); /* #f2f2f2 */--gray-200: rgb(211, 211, 211); /* #d3d3d3 #d9d9d9 #dcdcdc #d4d5d6 */--gray-300: rgb(204, 204, 204); /* gray #c0c0c0 #a8a8a8 */--gray-400: rgb(144, 144, 144); /* #909090 #989898 #a2a2a2 #949494 */--gray-500: rgb(128, 128, 128); /* #808080 #606060 #585858 */--gray-600: rgb(048, 048, 048); /* #303030 #202020 */--gray-700: rgb(064, 064, 064); /* #404040 */--gary-800: rgb(025, 025, 025); /* #191919 #2b2a29 */--gray-900: rgb(029, 027, 027); /* #1c1b1b */ ---orange-200: rgb(255, 153, 0); /* #ff9900 */--orange-300: rgb(230, 138, 0); /* #e68a00 */--orange-400: rgb(206, 124, 16); /* #ce7c10 */--orange-500: rgb(255, 140, 47); /* #ff8c2f */--orange-800: rgb(241, 90, 44); /* #f15a2c */--orange-900: rgb(214, 51, 1); /* #d63301 */ ---red-100: rgb(255, 221, 209); /* #ffddd1 */--red-300: rgb(255, 158, 158); /* #ff9e9e */--red-500: rgb(255, 51, 0); /* #ff3300 */--red-600: rgb(240, 0, 12); /* #f0000c */--red-700: rgb(222, 17, 0); /* #de1100 */--red-800: rgb(226, 40, 40); /* #e22828 */--red-900: rgb(148, 28, 0); /* #941c00 */ ---green-100: rgb(223, 242, 191); /* #dff2bf */--green-200: rgb(51, 204, 51); /* #33cc33 */--green-500: rgb(23, 191, 11); /* #17bf0b */--green-800: rgb(79, 138, 16); /* #4f8a10 */--green-900: rgb(18, 122, 5); /* #127a05 */ ---blue-100: rgb(217, 237, 247); /* #d9edf7 */--blue-200: rgb(188, 232, 241); /* #bce8f1 */--blue-300: rgb(189, 229, 248); /* #bde5f8 */--blue-700: rgb(0, 153, 255); /* #0099ff */--blue-800: rgb(072, 109, 186); /* #486dba */--blue-900: rgb(59, 89, 152); /* #3b5998 */ ---yellow-100: rgb(255, 246, 191); /* #fff6bf */--yellow-200: rgb(254, 239, 179); /* #feefb3 */--yellow-500: rgb(255, 211, 36); /* #ffd324 */ ---text-color: var(--gray-900);--background-color: var(--gray-100);} +:root { + --gray-000: rgb(255, 255, 255); /* #ffffff */ + --gray-100: rgb(242, 242, 242); /* #f2f2f2 */ + --gray-200: rgb(211, 211, 211); /* #d3d3d3 #d9d9d9 #dcdcdc #d4d5d6 */ + --gray-300: rgb(204, 204, 204); /* gray #c0c0c0 #a8a8a8 */ + --gray-400: rgb(144, 144, 144); /* #909090 #989898 #a2a2a2 #949494 */ + --gray-500: rgb(128, 128, 128); /* #808080 #606060 #585858 */ + --gray-600: rgb(048, 048, 048); /* #303030 #202020 */ + --gray-700: rgb(064, 064, 064); /* #404040 */ + --gary-800: rgb(025, 025, 025); /* #191919 #2b2a29 */ + --gray-900: rgb(029, 027, 027); /* #1c1b1b */ -html {font-family: clear-sans;font-size: 62.5%;height: 100%;} -body {font-size: 1.3rem;color: var(--text-color);background-color: var(--background-color);padding: 0;margin: 0;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} -@media (max-width: 1280px) {#template { min-width: 1260px; max-width: 1260px; margin: 0;}} -@media (min-width: 1281px) {#template { min-width: 1260px; margin: 0 10px;}} -@media (min-width: 1921px) {#template { min-width: 1260px; max-width: 1920px; margin: 0 auto;}} -img {border: none;text-decoration: none;vertical-align: middle;} -p {text-align: justify;} -p.centered {text-align: left;} -p:empty {display: none;} -a:hover {text-decoration: underline;} -a {color: var(--blue-800);text-decoration: none;} -a.none {color: var(--text-color);} -a.img {text-decoration: none;border: none;} -a.info {position: relative;} -a.info span {display: none;white-space: nowrap;font-variant: small-caps;position: absolute;top: 16px;left: 12px;line-height: 2rem;color: var(--gray-100);padding: 5px 8px;border: 1px solid rgba(var(--gray-000), 0.25);border-radius: 3px;background-color: rgba(var(--gray-800), 0.95);box-shadow: 0 0 3px var(--gray-700);} -a.info:hover span {display: block;z-index: 1;} -a.nohand {cursor: default;} -a.hand {cursor: pointer;text-decoration: none;} -a.static {cursor: default;color: var(--gray-400);text-decoration: none;} -a.view {display: inline-block;width: 20px;} -i.spacing {margin-left: -6px;} -i.icon {font-size: 1.6rem;margin-right: 4px;vertical-align: middle;} -i.title {margin-right: 8px;} -i.control {cursor: pointer;color: var(--gray-400);font-size: 1.8rem;} -hr {border: none;height: 1px !important;color: var(--gray-300);background-color: var(--gray-300);} + --orange-200: rgb(255, 153, 0); /* #ff9900 */ + --orange-300: rgb(230, 138, 0); /* #e68a00 */ + --orange-400: rgb(206, 124, 16); /* #ce7c10 */ + --orange-500: rgb(255, 140, 47); /* #ff8c2f */ + --orange-800: rgb(241, 90, 44); /* #f15a2c */ + --orange-900: rgb(214, 51, 1); /* #d63301 */ + + --red-100: rgb(255, 221, 209); /* #ffddd1 */ + --red-300: rgb(255, 158, 158); /* #ff9e9e */ + --red-500: rgb(255, 51, 0); /* #ff3300 */ + --red-600: rgb(240, 0, 12); /* #f0000c */ + --red-700: rgb(222, 17, 0); /* #de1100 */ + --red-800: rgb(226, 40, 40); /* #e22828 */ + --red-900: rgb(148, 28, 0); /* #941c00 */ + + --green-100: rgb(223, 242, 191); /* #dff2bf */ + --green-200: rgb(51, 204, 51); /* #33cc33 */ + --green-500: rgb(23, 191, 11); /* #17bf0b */ + --green-800: rgb(79, 138, 16); /* #4f8a10 */ + --green-900: rgb(18, 122, 5); /* #127a05 */ + + --blue-100: rgb(217, 237, 247); /* #d9edf7 */ + --blue-200: rgb(188, 232, 241); /* #bce8f1 */ + --blue-300: rgb(189, 229, 248); /* #bde5f8 */ + --blue-700: rgb(0, 153, 255); /* #0099ff */ + --blue-800: rgb(072, 109, 186); /* #486dba */ + --blue-900: rgb(59, 89, 152); /* #3b5998 */ + + --yellow-100: rgb(255, 246, 191); /* #fff6bf */ + --yellow-200: rgb(254, 239, 179); /* #feefb3 */ + --yellow-500: rgb(255, 211, 36); /* #ffd324 */ + + --text-color: var(--gray-900); + --background-color: var(--gray-100); +} + +html { + font-family: clear-sans; + font-size: 62.5%; + height: 100%; +} +body { + font-size: 1.3rem; + color: var(--text-color); + background-color: var(--background-color); + padding: 0; + margin: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +@media (max-width: 1280px) { + #template { + min-width: 1260px; + max-width: 1260px; + margin: 0; + } +} +@media (min-width: 1281px) { + #template { + min-width: 1260px; + margin: 0 10px; + } +} +@media (min-width: 1921px) { + #template { + min-width: 1260px; + max-width: 1920px; + margin: 0 auto; + } +} +img { + border: none; + text-decoration: none; + vertical-align: middle; +} +p { + text-align: justify; +} +p.centered { + text-align: left; +} +p:empty { + display: none; +} +a:hover { + text-decoration: underline; +} +a { + color: var(--blue-800); + text-decoration: none; +} +a.none { + color: var(--text-color); +} +a.img { + text-decoration: none; + border: none; +} +a.info { + position: relative; +} +a.info span { + display: none; + white-space: nowrap; + font-variant: small-caps; + position: absolute; + top: 16px; + left: 12px; + line-height: 2rem; + color: var(--gray-100); + padding: 5px 8px; + border: 1px solid rgba(var(--gray-000), 0.25); + border-radius: 3px; + background-color: rgba(var(--gray-800), 0.95); + box-shadow: 0 0 3px var(--gray-700); +} +a.info:hover span { + display: block; + z-index: 1; +} +a.nohand { + cursor: default; +} +a.hand { + cursor: pointer; + text-decoration: none; +} +a.static { + cursor: default; + color: var(--gray-400); + text-decoration: none; +} +a.view { + display: inline-block; + width: 20px; +} +i.spacing { + margin-left: -6px; +} +i.icon { + font-size: 1.6rem; + margin-right: 4px; + vertical-align: middle; +} +i.title { + margin-right: 8px; +} +i.control { + cursor: pointer; + color: var(--gray-400); + font-size: 1.8rem; +} +hr { + border: none; + height: 1px !important; + color: var(--gray-300); + background-color: var(--gray-300); +} input[type="text"], input[type="password"], input[type="number"], @@ -39,32 +176,127 @@ input[type="email"], input[type="date"], input[type="file"], textarea, -.textarea {font-family: clear-sans;font-size: 1.3rem;background-color: transparent;border: none;border-bottom: 1px solid var(--gray-900);padding: 4px 0;text-indent: 0;min-height: 2rem;line-height: 2rem;outline: none;width: 300px;margin: 0 20px 0 0;box-shadow: none;border-radius: 0;color: var(--text-color);} +.textarea { + font-family: clear-sans; + font-size: 1.3rem; + background-color: transparent; + border: none; + border-bottom: 1px solid var(--gray-900); + padding: 4px 0; + text-indent: 0; + min-height: 2rem; + line-height: 2rem; + outline: none; + width: 300px; + margin: 0 20px 0 0; + box-shadow: none; + border-radius: 0; + color: var(--text-color); +} input[type="button"], input[type="reset"], input[type="submit"], button, button[type="button"], -a.button {font-family: clear-sans;font-size: 1.1rem;font-weight: bold;letter-spacing: 1.8px;text-transform: uppercase;min-width: 86px;margin: 10px 12px 10px 0;padding: 8px;text-align: center;text-decoration: none;white-space: nowrap;cursor: pointer;outline: none;border-radius: 4px;border: none;color: var(--orange-500);background: -webkit-gradient( linear, left top, right top, from(var(--red-800)), to(var(--orange-500)) ) 0 0 no-repeat, -webkit-gradient( linear, left top, right top, from(var(--red-800)), to(var(--orange-500)) ) 0 100% no-repeat, -webkit-gradient( linear, left bottom, left top, from(var(--red-800)), to(var(--red-800)) ) 0 100% no-repeat, -webkit-gradient( linear, left bottom, left top, from(var(--orange-500)), to(var(--orange-500)) ) 100% 100% no-repeat;background: linear-gradient(90deg, var(--red-800) 0, var(--orange-500)) 0 0 no-repeat, linear-gradient(90deg, var(--red-800) 0, var(--orange-500)) 0 100% no-repeat, linear-gradient(0deg, var(--red-800) 0, var(--red-800)) 0 100% no-repeat, linear-gradient(0deg, var(--orange-500) 0, var(--orange-500)) 100% 100% no-repeat;background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;} -input[type="checkbox"] {vertical-align: middle;margin-right: 6px;} +a.button { + font-family: clear-sans; + font-size: 1.1rem; + font-weight: bold; + letter-spacing: 1.8px; + text-transform: uppercase; + min-width: 86px; + margin: 10px 12px 10px 0; + padding: 8px; + text-align: center; + text-decoration: none; + white-space: nowrap; + cursor: pointer; + outline: none; + border-radius: 4px; + border: none; + color: var(--orange-500); + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--red-800)), + to(var(--orange-500)) + ) + 0 0 no-repeat, + -webkit-gradient( + linear, + left top, + right top, + from(var(--red-800)), + to(var(--orange-500)) + ) 0 100% no-repeat, + -webkit-gradient( + linear, + left bottom, + left top, + from(var(--red-800)), + to(var(--red-800)) + ) 0 100% no-repeat, + -webkit-gradient( + linear, + left bottom, + left top, + from(var(--orange-500)), + to(var(--orange-500)) + ) 100% 100% no-repeat; + background: linear-gradient(90deg, var(--red-800) 0, var(--orange-500)) 0 0 + no-repeat, + linear-gradient(90deg, var(--red-800) 0, var(--orange-500)) 0 100% + no-repeat, + linear-gradient(0deg, var(--red-800) 0, var(--red-800)) 0 100% no-repeat, + linear-gradient(0deg, var(--orange-500) 0, var(--orange-500)) 100% 100% + no-repeat; + background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%; +} +input[type="checkbox"] { + vertical-align: middle; + margin-right: 6px; +} input[type="number"]::-webkit-outer-spin-button, -input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;} -input[type="number"] {-moz-appearance: textfield;} +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; +} +input[type="number"] { + -moz-appearance: textfield; +} input:focus[type="text"], input:focus[type="password"], input:focus[type="number"], input:focus[type="url"], input:focus[type="email"], input:focus[type="file"], -textarea:focus {background-color: var(--gray-300);outline: 0;} +textarea:focus { + background-color: var(--gray-300); + outline: 0; +} input:hover[type="button"], input:hover[type="reset"], input:hover[type="submit"], button:hover, button:hover[type="button"], -a.button:hover {color: var(--gray-100);background: -webkit-gradient( linear, left top, right top, from(var(--red-800)), to(var(--orange-500)));background: linear-gradient(90deg, var(--red-800) 0, var(--orange-500));} +a.button:hover { + color: var(--gray-100); + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--red-800)), + to(var(--orange-500)) + ); + background: linear-gradient(90deg, var(--red-800) 0, var(--orange-500)); +} input[disabled], -textarea[disabled] {color: var(--text-color);border-bottom-color: var(--gray-400);opacity: 0.5;cursor: default;} +textarea[disabled] { + color: var(--text-color); + border-bottom-color: var(--gray-400); + opacity: 0.5; + cursor: default; +} input[type="button"][disabled], input[type="reset"][disabled], input[type="submit"][disabled], @@ -80,249 +312,1223 @@ input:active[type="reset"][disabled], input:active[type="submit"][disabled], button:active[disabled], button:active[type="button"][disabled], -a.button:active[disabled] {cursor: default;color: var(--gray-500);background: -webkit-gradient( linear, left top, right top, from(var(--gray-700)), to(var(--gray-500)) ) 0 0 no-repeat, -webkit-gradient( linear, left top, right top, from(var(--gray-700)), to(var(--gray-500)) ) 0 100% no-repeat, -webkit-gradient( linear, left bottom, left top, from(var(--gray-700)), to(var(--gray-700)) ) 0 100% no-repeat, -webkit-gradient( linear, left bottom, left top, from(var(--gray-500)), to(var(--gray-500)) ) 100% 100% no-repeat;background: linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 0 no-repeat, linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 100% no-repeat, linear-gradient(0deg, var(--gray-700) 0, var(--gray-700)) 0 100% no-repeat, linear-gradient(0deg, var(--gray-500) 0, var(--gray-500)) 100% 100% no-repeat;background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;} -input::-webkit-input-placeholder {color: var(--blue-800);} -select {-webkit-appearance: none;font-family: clear-sans;font-size: 1.3rem;min-width: 166px;max-width: 300px;padding: 5px 8px 5px 0;text-indent: 0;margin: 0 10px 0 0;border: none;border-bottom: 1px solid var(--gray-900);box-shadow: none;border-radius: 0;color: var(--text-color);background-color: transparent;background-image: linear-gradient( 66.6deg, transparent 60%, var(--gray-900) 40% ), linear-gradient(113.4deg, var(--gray-900) 40%, transparent 60%);background-position: calc(100% - 4px), 100%;background-size: 4px 6px, 4px 6px;background-repeat: no-repeat;outline: none;display: inline-block;cursor: pointer;} -select option {color: var(--text-color);background-color: var(--gray-300);} -select:focus {outline: 0;} -select[disabled] {color: var(--text-color);border-bottom-color: var(--gray-500);opacity: 0.5;cursor: default;} -select[name="enter_view"] {margin: 0;padding: 0 12px 0 0;border: none;min-width: auto;} -select[name="enter_share"] {font-size: 1.1rem;padding: 0;border: none;min-width: 40px;float: right;margin-top: 13px;margin-right: 20px;} -select[name="port_select"] {border: none;min-width: 54px;padding-top: 0;padding-bottom: 0;} -select.narrow {min-width: 76px;} -select.auto {min-width: auto;} -select.slot {min-width: 44rem;max-width: 44rem;} -input.narrow {width: 166px;} -input.trim {width: 76px;min-width: 76px;} -textarea {resize: none;} -#header {position: absolute;top: 0;left: 0;width: 100%;min-width: 1260px;height: 91px;z-index: 102;margin: 0;color: var(--gray-100);background-color: var(--gray-900);background-size: 100% 90px;background-repeat: no-repeat;} -#header .logo {float: left;margin-left: 10px;color: var(--red-800);text-align: center;} -#header .logo svg {width: 160px;display: block;margin: 25px 0 8px 0;} -#header .block {margin: 0;float: right;text-align: right;background-color: rgba(var(--gray-900), 0.3);padding: 10px 12px;} -#header .text-left {float: left;text-align: right;padding-right: 5px;border-right: solid medium var(--orange-800);} -#header .text-right {float: right;text-align: left;padding-left: 5px;} -#header .text-right a {color: var(--gray-100);} -#header .text-right #licensetype {font-weight: bold;font-style: italic;margin-right: 4px;} -div.title {margin: 20px 0 32px 0;padding: 8px 10px;clear: both;border-bottom: 1px solid var(--gray-300);background-color: var(--gray-300);letter-spacing: 1.8px;} -div.title span.left {font-size: 1.4rem;} -div.title span.right {font-size: 1.4rem;padding-top: 2px;padding-right: 10px;float: right;} -div.title span img {padding-right: 4px;} -div.title.shift {margin-top: -30px;} -#menu {position: absolute;top: 90px;left: 0;right: 0;display: grid;grid-template-columns: auto max-content;z-index: 101;} -.nav-tile {height: 4rem;line-height: 4rem;padding: 0;margin: 0;font-size: 1.2rem;letter-spacing: 1.8px;background-color: var(--gray-900);white-space: nowrap;overflow-x: auto;overflow-y: hidden;scrollbar-width: thin;} -.nav-tile::-webkit-scrollbar {height: 8px;} -.nav-tile.right {text-align: right;} +a.button:active[disabled] { + cursor: default; + color: var(--gray-500); + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--gray-700)), + to(var(--gray-500)) + ) + 0 0 no-repeat, + -webkit-gradient( + linear, + left top, + right top, + from(var(--gray-700)), + to(var(--gray-500)) + ) 0 100% no-repeat, + -webkit-gradient( + linear, + left bottom, + left top, + from(var(--gray-700)), + to(var(--gray-700)) + ) 0 100% no-repeat, + -webkit-gradient( + linear, + left bottom, + left top, + from(var(--gray-500)), + to(var(--gray-500)) + ) 100% 100% no-repeat; + background: linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 0 + no-repeat, + linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 100% + no-repeat, + linear-gradient(0deg, var(--gray-700) 0, var(--gray-700)) 0 100% + no-repeat, + linear-gradient(0deg, var(--gray-500) 0, var(--gray-500)) 100% 100% + no-repeat; + background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%; +} +input::-webkit-input-placeholder { + color: var(--blue-800); +} +select { + -webkit-appearance: none; + font-family: clear-sans; + font-size: 1.3rem; + min-width: 166px; + max-width: 300px; + padding: 5px 8px 5px 0; + text-indent: 0; + margin: 0 10px 0 0; + border: none; + border-bottom: 1px solid var(--gray-900); + box-shadow: none; + border-radius: 0; + color: var(--text-color); + background-color: transparent; + background-image: linear-gradient( + 66.6deg, + transparent 60%, + var(--gray-900) 40% + ), + linear-gradient(113.4deg, var(--gray-900) 40%, transparent 60%); + background-position: calc(100% - 4px), 100%; + background-size: 4px 6px, 4px 6px; + background-repeat: no-repeat; + outline: none; + display: inline-block; + cursor: pointer; +} +select option { + color: var(--text-color); + background-color: var(--gray-300); +} +select:focus { + outline: 0; +} +select[disabled] { + color: var(--text-color); + border-bottom-color: var(--gray-500); + opacity: 0.5; + cursor: default; +} +select[name="enter_view"] { + margin: 0; + padding: 0 12px 0 0; + border: none; + min-width: auto; +} +select[name="enter_share"] { + font-size: 1.1rem; + padding: 0; + border: none; + min-width: 40px; + float: right; + margin-top: 13px; + margin-right: 20px; +} +select[name="port_select"] { + border: none; + min-width: 54px; + padding-top: 0; + padding-bottom: 0; +} +select.narrow { + min-width: 76px; +} +select.auto { + min-width: auto; +} +select.slot { + min-width: 44rem; + max-width: 44rem; +} +input.narrow { + width: 166px; +} +input.trim { + width: 76px; + min-width: 76px; +} +textarea { + resize: none; +} +#header { + position: absolute; + top: 0; + left: 0; + width: 100%; + min-width: 1260px; + height: 91px; + z-index: 102; + margin: 0; + color: var(--gray-100); + background-color: var(--gray-900); + background-size: 100% 90px; + background-repeat: no-repeat; +} +#header .logo { + float: left; + margin-left: 10px; + color: var(--red-800); + text-align: center; +} +#header .logo svg { + width: 160px; + display: block; + margin: 25px 0 8px 0; +} +#header .block { + margin: 0; + float: right; + text-align: right; + background-color: rgba(var(--gray-900), 0.3); + padding: 10px 12px; +} +#header .text-left { + float: left; + text-align: right; + padding-right: 5px; + border-right: solid medium var(--orange-800); +} +#header .text-right { + float: right; + text-align: left; + padding-left: 5px; +} +#header .text-right a { + color: var(--gray-100); +} +#header .text-right #licensetype { + font-weight: bold; + font-style: italic; + margin-right: 4px; +} +div.title { + margin: 20px 0 32px 0; + padding: 8px 10px; + clear: both; + border-bottom: 1px solid var(--gray-300); + background-color: var(--gray-300); + letter-spacing: 1.8px; +} +div.title span.left { + font-size: 1.4rem; +} +div.title span.right { + font-size: 1.4rem; + padding-top: 2px; + padding-right: 10px; + float: right; +} +div.title span img { + padding-right: 4px; +} +div.title.shift { + margin-top: -30px; +} +#menu { + position: absolute; + top: 90px; + left: 0; + right: 0; + display: grid; + grid-template-columns: auto max-content; + z-index: 101; +} +.nav-tile { + height: 4rem; + line-height: 4rem; + padding: 0; + margin: 0; + font-size: 1.2rem; + letter-spacing: 1.8px; + background-color: var(--gray-900); + white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; + scrollbar-width: thin; +} +.nav-tile::-webkit-scrollbar { + height: 8px; +} +.nav-tile.right { + text-align: right; +} .nav-item, -.nav-user {position: relative;display: inline-block;text-align: center;margin: 0;} -.nav-item a {min-width: 0;} -.nav-item a span {display: none;} -.nav-item .system {vertical-align: middle;padding-bottom: 2px;} -.nav-item a {color: var(--gray-100);background-color: transparent;text-transform: uppercase;font-weight: bold;display: block;padding: 0 10px;} -.nav-item a {text-decoration: none;text-decoration-skip-ink: auto;-webkit-text-decoration-skip: objects;-webkit-transition: all 0.25s ease-out;transition: all 0.25s ease-out;} +.nav-user { + position: relative; + display: inline-block; + text-align: center; + margin: 0; +} +.nav-item a { + min-width: 0; +} +.nav-item a span { + display: none; +} +.nav-item .system { + vertical-align: middle; + padding-bottom: 2px; +} +.nav-item a { + color: var(--gray-100); + background-color: transparent; + text-transform: uppercase; + font-weight: bold; + display: block; + padding: 0 10px; +} +.nav-item a { + text-decoration: none; + text-decoration-skip-ink: auto; + -webkit-text-decoration-skip: objects; + -webkit-transition: all 0.25s ease-out; + transition: all 0.25s ease-out; +} .nav-item:after, -.nav-user.show:after {border-radius: 4px;display: block;background-color: transparent;content: "";width: 32px;height: 2px;bottom: 8px;position: absolute;left: 50%;margin-left: -16px;-webkit-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;pointer-events: none;} +.nav-user.show:after { + border-radius: 4px; + display: block; + background-color: transparent; + content: ""; + width: 32px; + height: 2px; + bottom: 8px; + position: absolute; + left: 50%; + margin-left: -16px; + -webkit-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; + pointer-events: none; +} .nav-item:focus:after, .nav-item:hover:after, -.nav-user.show:hover:after {background-color: var(--orange-800);} -.nav-item.active:after {background-color: var(--background-color);} -.nav-user a {color: var(--gray-100);background-color: transparent;display: block;padding: 0 10px;} -.nav-user .system {vertical-align: middle;padding-bottom: 2px;} -#clear {clear: both;} -#footer {position: fixed;bottom: 0;left: 0;color: var(--gray-800);background-color: var(--gray-200);padding: 5px 0;width: 100%;height: 1.6rem;line-height: 1.6rem;text-align: center;z-index: 10000;} -#statusraid {float: left;padding-left: 10px;} -#countdown {margin: 0 auto;} -#copyright {font-family: bitstream;font-size: 1.1rem;float: right;padding-right: 10px;} -.green {color: var(--green-800);padding-left: 5px;padding-right: 5px;} -.red {color: var(--red-600);padding-left: 5px;padding-right: 5px;} -.orange {color: var(--orange-300);padding-left: 5px;padding-right: 5px;} -.blue {color: var(--blue-800);padding-left: 5px;padding-right: 5px;} +.nav-user.show:hover:after { + background-color: var(--orange-800); +} +.nav-item.active:after { + background-color: var(--background-color); +} +.nav-user a { + color: var(--gray-100); + background-color: transparent; + display: block; + padding: 0 10px; +} +.nav-user .system { + vertical-align: middle; + padding-bottom: 2px; +} +#clear { + clear: both; +} +#footer { + position: fixed; + bottom: 0; + left: 0; + color: var(--gray-800); + background-color: var(--gray-200); + padding: 5px 0; + width: 100%; + height: 1.6rem; + line-height: 1.6rem; + text-align: center; + z-index: 10000; +} +#statusraid { + float: left; + padding-left: 10px; +} +#countdown { + margin: 0 auto; +} +#copyright { + font-family: bitstream; + font-size: 1.1rem; + float: right; + padding-right: 10px; +} +.green { + color: var(--green-800); + padding-left: 5px; + padding-right: 5px; +} +.red { + color: var(--red-600); + padding-left: 5px; + padding-right: 5px; +} +.orange { + color: var(--orange-300); + padding-left: 5px; + padding-right: 5px; +} +.blue { + color: var(--blue-800); + padding-left: 5px; + padding-right: 5px; +} .green-text, -.passed {color: var(--green-800);} +.passed { + color: var(--green-800); +} .red-text, -.failed {color: var(--red-600);} +.failed { + color: var(--red-600); +} .orange-text, -.warning {color: var(--orange-300);} -.blue-text {color: var(--blue-800);} -.grey-text {color: var(--gray-500);} -.green-orb {color: var(--green-200);} -.grey-orb {color: var(--gray-300);} -.blue-orb {color: var(--blue-700);} -.yellow-orb {color: var(--orange-200);} -.red-orb {color: var(--red-500);} -.usage-bar {float: left;height: 2rem;line-height: 2rem;width: 14rem;padding: 1px 1px 1px 2px;margin: 8px 12px;border-radius: 3px;background-color: var(--gray-500);box-shadow: 0 1px 0 var(--gray-400), inset 0 1px 0 var(--gray-600);} -.usage-bar > span {display: block;height: 100%;text-align: right;border-radius: 2px;color: var(--gray-100);background-color: var(--gray-500);box-shadow: inset 0 1px 0 rgba(var(--gray-000), 0.5);} -.usage-disk {position: relative;height: 1.8rem;background-color: var(--gray-200);margin: 0;} -.usage-disk > span:first-child {position: absolute;left: 0;margin: 0 !important;height: 1.8rem;background-color: var(--gray-300);} -.usage-disk > span:last-child {position: relative;padding-right: 4px;z-index: 1;} -.usage-disk.sys {height: 12px;margin: -15px 20px 0 44px;} -.usage-disk.sys > span:first-child {height: 12px;padding: 0;} -.usage-disk.sys.none {background-color: transparent;} -.usage-disk.mm {height: 3px;margin: 5px 20px 0 0;} -.usage-disk.mm > span:first-child {height: 3px;} -.notice {background: var(--yellow-100) url(../images/notice.png) no-repeat;background-position: 60px 50%;color: var(--text-color);font-size: 1.4rem;text-align: left;padding: 15px 0 15px 130px;display: block;height: 7rem;line-height: 7rem;vertical-align: middle;border-top: 2px solid var(--yellow-500);border-bottom: 2px solid var(--yellow-500);} -.notice.shift {margin-top: 160px;} -.greenbar {background: -webkit-gradient( linear, left top, right top, from(var(--green-900)), to(var(--green-500)));background: linear-gradient(90deg, var(--green-900) 0, var(--green-500));} -.orangebar {background: -webkit-gradient( linear, left top, right top, from(var(--orange-400)), to(var(--orange-400)));background: linear-gradient(90deg, var(--orange-400) 0, var(--orange-400));} -.redbar {background: -webkit-gradient( linear, left top, right top, from(var(--red-900)), to(var(--red-700)));background: linear-gradient(90deg, var(--red-900) 0, var(--red-700));} -.graybar {background: -webkit-gradient( linear, left top, right top, from(var(--gray-400)), to(var(--gray-200)));background: linear-gradient(90deg, var(--gray-400) 0, var(--gray-200));} -table {border-collapse: collapse;border-spacing: 0;border-style: hidden;margin: -30px 0 0 0;width: 100%;background-color: var(--background-color);} -table thead td {padding: 7px 0;} -table tbody td {padding: 5px 0;} -table tbody tr.tr_last {background-color: var(--background-color);border-top: 1px solid var(--gray-300);} -table td.cpu-info {border: 1px solid var(--gray-300);} -table.disk_status {white-space: nowrap;} -table.disk_status td span {margin-left: 10px;} -table.disk_status thead tr:first-child td {font-size: 1.1rem;text-transform: uppercase;letter-spacing: 1px;background-color: var(--gray-200);} -table.disk_status thead tr:last-child {border-bottom: 1px solid var(--gray-300);} -table.disk_status tr > td {width: 10%;padding-left: 12px;padding-right: 0;white-space: nowrap;} -table.disk_status tr > td + td {width: auto;} -table.disk_status tr > td + td + td {width: 6.5%;text-align: center;padding-left: 4px;padding-right: 8px;} -table.disk_status tr > td + td + td + td {text-align: right;padding-left: 0;padding-right: 12px;} -table.disk_status tbody tr:nth-child(even) {background-color: var(--background-color);} -table.disk_status tbody tr:not(.tr_last):hover td {background-color: rgba(var(--gray-900), 0.1);} -table.disk_status.stats tr > td + td {text-align: left;padding-left: 0;padding-right: 12px;} -table.array_status td {padding: 4px 0;} -table.array_status tr > td {text-align: left;white-space: nowrap;padding-left: 12px;width: 30%;} -table.array_status tr > td + td {padding-left: 2px;width: 20%;} -table.array_status tr > td + td + td {width: auto;} -table.array_status td.line {border-top: 1px solid var(--gray-300);} -table.array_status.noshift {margin-top: 0;} -table.settings {margin: 0;padding: 0;background-color: transparent;} -table.settings td:first-child {width: 35%;padding: 12px;} -table.settings td + td {padding-left: 8px;} -table.settings.shifted {padding: 0;margin-left: 0;margin-top: 0;} -table.settings.shifted td {padding-left: 0;} -table.access_list {border-spacing: 0;margin-top: 10px;border: none;} -table.access_list tr:first-child td {font-size: 1.1rem;text-transform: uppercase;letter-spacing: 1px;vertical-align: middle;text-align: left;border: 1px solid var(--gray-300);border-bottom: 1px solid var(--gray-300);background-color: var(--gray-200);} -table.access_list td:first-child {font-weight: normal;width: 35%;padding-left: 12px;} -table.access_list tr:first-child td:first-child {font-weight: normal;} -table.access_list tr > td + td {white-space: nowrap;} -table.share_status {white-space: nowrap;} -table.share_status thead tr:first-child td {font-size: 1.1rem;text-transform: uppercase;letter-spacing: 1px;background-color: var(--gray-300);} -table.share_status tr > td {text-align: left;padding-left: 12px;} -table.share_status tr > td + td {padding-left: 0;} -table.share_status tbody tr:nth-child(even) {background-color: var(--background-color);} -table.share_status:not(.dashboard) tbody tr:hover td {background-color: rgba(var(--gray-900), 0.1);} -table.share_status tbody tr.alert {color: var(--red-600);} -table.share_status tbody tr.warn {color: var(--orange-300);} -table.share_status.fixed tr > td + td {min-width: 39px;font-size: 1.1rem;text-align: center;padding: 0;} -table.share_status.table {margin-top: 36px;} -table.share_status.table tr > td {width: 50%;} -table.share_status.dashboard {margin: 0;border: 1px solid var(--gray-200);} -table.share_status.dashboard tbody {border: 1px solid var(--gray-200);} -table.share_status.dashboard tr:first-child > td {height: 3.6rem;padding-top: 12px;font-size: 1.6rem;font-weight: bold;letter-spacing: 1.8px;text-transform: none;vertical-align: top;} -table.share_status.dashboard tr:nth-child(even) {background-color: transparent;} -table.share_status.dashboard tr:last-child > td {padding-bottom: 20px;} -table.share_status.dashboard tr.last > td {padding-bottom: 20px;} -table.share_status.dashboard tr.header td {padding-bottom: 10px;} -table.share_status.dashboard td {padding: 3px 10px;} -table.share_status.dashboard td.vpn {font-size: 1.1rem;font-weight: bold;text-transform: uppercase;letter-spacing: 1px;} -table.share_status.dashboard td div.section {display: inline-block;vertical-align: top;margin-left: 4px;font-size: 1.2rem;font-weight: bold;text-transform: uppercase;letter-spacing: 1px;} -table.share_status.dashboard td div.section span {font-weight: normal;text-transform: none;letter-spacing: 0;white-space: normal;} -table.share_status.dashboard td span.info {float: right;margin-right: 20px;font-size: 1.2rem;font-weight: normal;text-transform: none;letter-spacing: 0;} -table.share_status.dashboard td span.info.title {font-weight: bold;} -table.share_status.dashboard td span.load {display: inline-block;width: 38px;text-align: right;} -table.share_status.dashboard td span.finish {float: right;margin-right: 24px;} -table.share_status.dashboard i.control {float: right;font-size: 1.4rem !important;margin: 0 3px 0 0;cursor: pointer;background-color: rgba(var(--gray-900), 0.1);padding: 2px;} -[name="arrayOps"] {margin-top: 12px;} -span.error {color: var(--red-600);background-color: var(--red-300);display: block;width: 100%;} -span.warn {color: var(--orange-300);background-color: var(--yellow-200);display: block;width: 100%;} -span.system {color: var(--blue-700);background-color: var(--blue-300);display: block;width: 100%;} -span.array {color: var(--green-800);background-color: var(--green-100);display: block;width: 100%;} -span.login {color: var(--orange-900);background-color: var(--red-100);display: block;width: 100%;} -span.lite {background-color: var(--background-color);} -span.label {font-size: 1.2rem;padding: 2px 0 2px 6px;margin-right: 6px;border-radius: 4px;display: inline;width: auto;vertical-align: middle;} -span.cpu-speed {display: block;color: var(--blue-900);} -span.status {float: right;font-size: 1.4rem;margin-top: 30px;padding-right: 8px;letter-spacing: 1.8px;} -span.status.vhshift {margin-top: 0;margin-right: -9px;} -span.status.vshift {margin-top: -16px;} -span.status.hshift {margin-right: -20px;} -span.diskinfo {float: left;clear: both;margin-top: 5px;padding-left: 10px;} -span.bitstream {font-family: bitstream;font-size: 1.1rem;} -span.ucfirst {text-transform: capitalize;} -span.strong {font-weight: bold;} -span.big {font-size: 1.4rem;} -span.small {font-size: 1.2rem;} -span.outer {margin-bottom: 20px;margin-right: 0;} -span.outer.solid {background-color: var(--background-color);} -span.hand {cursor: pointer;} +.warning { + color: var(--orange-300); +} +.blue-text { + color: var(--blue-800); +} +.grey-text { + color: var(--gray-500); +} +.green-orb { + color: var(--green-200); +} +.grey-orb { + color: var(--gray-300); +} +.blue-orb { + color: var(--blue-700); +} +.yellow-orb { + color: var(--orange-200); +} +.red-orb { + color: var(--red-500); +} +.usage-bar { + float: left; + height: 2rem; + line-height: 2rem; + width: 14rem; + padding: 1px 1px 1px 2px; + margin: 8px 12px; + border-radius: 3px; + background-color: var(--gray-500); + box-shadow: 0 1px 0 var(--gray-400), inset 0 1px 0 var(--gray-600); +} +.usage-bar > span { + display: block; + height: 100%; + text-align: right; + border-radius: 2px; + color: var(--gray-100); + background-color: var(--gray-500); + box-shadow: inset 0 1px 0 rgba(var(--gray-000), 0.5); +} +.usage-disk { + position: relative; + height: 1.8rem; + background-color: var(--gray-200); + margin: 0; +} +.usage-disk > span:first-child { + position: absolute; + left: 0; + margin: 0 !important; + height: 1.8rem; + background-color: var(--gray-300); +} +.usage-disk > span:last-child { + position: relative; + padding-right: 4px; + z-index: 1; +} +.usage-disk.sys { + height: 12px; + margin: -15px 20px 0 44px; +} +.usage-disk.sys > span:first-child { + height: 12px; + padding: 0; +} +.usage-disk.sys.none { + background-color: transparent; +} +.usage-disk.mm { + height: 3px; + margin: 5px 20px 0 0; +} +.usage-disk.mm > span:first-child { + height: 3px; +} +.notice { + background: var(--yellow-100) url(../images/notice.png) no-repeat; + background-position: 60px 50%; + color: var(--text-color); + font-size: 1.4rem; + text-align: left; + padding: 15px 0 15px 130px; + display: block; + height: 7rem; + line-height: 7rem; + vertical-align: middle; + border-top: 2px solid var(--yellow-500); + border-bottom: 2px solid var(--yellow-500); +} +.notice.shift { + margin-top: 160px; +} +.greenbar { + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--green-900)), + to(var(--green-500)) + ); + background: linear-gradient(90deg, var(--green-900) 0, var(--green-500)); +} +.orangebar { + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--orange-400)), + to(var(--orange-400)) + ); + background: linear-gradient(90deg, var(--orange-400) 0, var(--orange-400)); +} +.redbar { + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--red-900)), + to(var(--red-700)) + ); + background: linear-gradient(90deg, var(--red-900) 0, var(--red-700)); +} +.graybar { + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--gray-400)), + to(var(--gray-200)) + ); + background: linear-gradient(90deg, var(--gray-400) 0, var(--gray-200)); +} +table { + border-collapse: collapse; + border-spacing: 0; + border-style: hidden; + margin: -30px 0 0 0; + width: 100%; + background-color: var(--background-color); +} +table thead td { + padding: 7px 0; +} +table tbody td { + padding: 5px 0; +} +table tbody tr.tr_last { + background-color: var(--background-color); + border-top: 1px solid var(--gray-300); +} +table td.cpu-info { + border: 1px solid var(--gray-300); +} +table.disk_status { + white-space: nowrap; +} +table.disk_status td span { + margin-left: 10px; +} +table.disk_status thead tr:first-child td { + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 1px; + background-color: var(--gray-200); +} +table.disk_status thead tr:last-child { + border-bottom: 1px solid var(--gray-300); +} +table.disk_status tr > td { + width: 10%; + padding-left: 12px; + padding-right: 0; + white-space: nowrap; +} +table.disk_status tr > td + td { + width: auto; +} +table.disk_status tr > td + td + td { + width: 6.5%; + text-align: center; + padding-left: 4px; + padding-right: 8px; +} +table.disk_status tr > td + td + td + td { + text-align: right; + padding-left: 0; + padding-right: 12px; +} +table.disk_status tbody tr:nth-child(even) { + background-color: var(--background-color); +} +table.disk_status tbody tr:not(.tr_last):hover td { + background-color: rgba(var(--gray-900), 0.1); +} +table.disk_status.stats tr > td + td { + text-align: left; + padding-left: 0; + padding-right: 12px; +} +table.array_status td { + padding: 4px 0; +} +table.array_status tr > td { + text-align: left; + white-space: nowrap; + padding-left: 12px; + width: 30%; +} +table.array_status tr > td + td { + padding-left: 2px; + width: 20%; +} +table.array_status tr > td + td + td { + width: auto; +} +table.array_status td.line { + border-top: 1px solid var(--gray-300); +} +table.array_status.noshift { + margin-top: 0; +} +table.settings { + margin: 0; + padding: 0; + background-color: transparent; +} +table.settings td:first-child { + width: 35%; + padding: 12px; +} +table.settings td + td { + padding-left: 8px; +} +table.settings.shifted { + padding: 0; + margin-left: 0; + margin-top: 0; +} +table.settings.shifted td { + padding-left: 0; +} +table.access_list { + border-spacing: 0; + margin-top: 10px; + border: none; +} +table.access_list tr:first-child td { + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 1px; + vertical-align: middle; + text-align: left; + border: 1px solid var(--gray-300); + border-bottom: 1px solid var(--gray-300); + background-color: var(--gray-200); +} +table.access_list td:first-child { + font-weight: normal; + width: 35%; + padding-left: 12px; +} +table.access_list tr:first-child td:first-child { + font-weight: normal; +} +table.access_list tr > td + td { + white-space: nowrap; +} +table.share_status { + white-space: nowrap; +} +table.share_status thead tr:first-child td { + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 1px; + background-color: var(--gray-300); +} +table.share_status tr > td { + text-align: left; + padding-left: 12px; +} +table.share_status tr > td + td { + padding-left: 0; +} +table.share_status tbody tr:nth-child(even) { + background-color: var(--background-color); +} +table.share_status:not(.dashboard) tbody tr:hover td { + background-color: rgba(var(--gray-900), 0.1); +} +table.share_status tbody tr.alert { + color: var(--red-600); +} +table.share_status tbody tr.warn { + color: var(--orange-300); +} +table.share_status.fixed tr > td + td { + min-width: 39px; + font-size: 1.1rem; + text-align: center; + padding: 0; +} +table.share_status.table { + margin-top: 36px; +} +table.share_status.table tr > td { + width: 50%; +} +table.share_status.dashboard { + margin: 0; + border: 1px solid var(--gray-200); +} +table.share_status.dashboard tbody { + border: 1px solid var(--gray-200); +} +table.share_status.dashboard tr:first-child > td { + height: 3.6rem; + padding-top: 12px; + font-size: 1.6rem; + font-weight: bold; + letter-spacing: 1.8px; + text-transform: none; + vertical-align: top; +} +table.share_status.dashboard tr:nth-child(even) { + background-color: transparent; +} +table.share_status.dashboard tr:last-child > td { + padding-bottom: 20px; +} +table.share_status.dashboard tr.last > td { + padding-bottom: 20px; +} +table.share_status.dashboard tr.header td { + padding-bottom: 10px; +} +table.share_status.dashboard td { + padding: 3px 10px; +} +table.share_status.dashboard td.vpn { + font-size: 1.1rem; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; +} +table.share_status.dashboard td div.section { + display: inline-block; + vertical-align: top; + margin-left: 4px; + font-size: 1.2rem; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; +} +table.share_status.dashboard td div.section span { + font-weight: normal; + text-transform: none; + letter-spacing: 0; + white-space: normal; +} +table.share_status.dashboard td span.info { + float: right; + margin-right: 20px; + font-size: 1.2rem; + font-weight: normal; + text-transform: none; + letter-spacing: 0; +} +table.share_status.dashboard td span.info.title { + font-weight: bold; +} +table.share_status.dashboard td span.load { + display: inline-block; + width: 38px; + text-align: right; +} +table.share_status.dashboard td span.finish { + float: right; + margin-right: 24px; +} +table.share_status.dashboard i.control { + float: right; + font-size: 1.4rem !important; + margin: 0 3px 0 0; + cursor: pointer; + background-color: rgba(var(--gray-900), 0.1); + padding: 2px; +} +[name="arrayOps"] { + margin-top: 12px; +} +span.error { + color: var(--red-600); + background-color: var(--red-300); + display: block; + width: 100%; +} +span.warn { + color: var(--orange-300); + background-color: var(--yellow-200); + display: block; + width: 100%; +} +span.system { + color: var(--blue-700); + background-color: var(--blue-300); + display: block; + width: 100%; +} +span.array { + color: var(--green-800); + background-color: var(--green-100); + display: block; + width: 100%; +} +span.login { + color: var(--orange-900); + background-color: var(--red-100); + display: block; + width: 100%; +} +span.lite { + background-color: var(--background-color); +} +span.label { + font-size: 1.2rem; + padding: 2px 0 2px 6px; + margin-right: 6px; + border-radius: 4px; + display: inline; + width: auto; + vertical-align: middle; +} +span.cpu-speed { + display: block; + color: var(--blue-900); +} +span.status { + float: right; + font-size: 1.4rem; + margin-top: 30px; + padding-right: 8px; + letter-spacing: 1.8px; +} +span.status.vhshift { + margin-top: 0; + margin-right: -9px; +} +span.status.vshift { + margin-top: -16px; +} +span.status.hshift { + margin-right: -20px; +} +span.diskinfo { + float: left; + clear: both; + margin-top: 5px; + padding-left: 10px; +} +span.bitstream { + font-family: bitstream; + font-size: 1.1rem; +} +span.ucfirst { + text-transform: capitalize; +} +span.strong { + font-weight: bold; +} +span.big { + font-size: 1.4rem; +} +span.small { + font-size: 1.2rem; +} +span.outer { + margin-bottom: 20px; + margin-right: 0; +} +span.outer.solid { + background-color: var(--background-color); +} +span.hand { + cursor: pointer; +} span.outer.started > img, -span.outer.started > i.img {opacity: 1;} +span.outer.started > i.img { + opacity: 1; +} span.outer.stopped > img, -span.outer.stopped > i.img {opacity: 0.3;} +span.outer.stopped > i.img { + opacity: 0.3; +} span.outer.paused > img, -span.outer.paused > i.img {opacity: 0.6;} -span.inner {display: inline-block;vertical-align: top;} -span.state {font-size: 1.1rem;margin-left: 7px;} -i.padlock {margin-right: 8px;cursor: default;vertical-align: middle;} -i.nolock {visibility: hidden;margin-right: 8px;vertical-align: middle;} -i.lock {margin-left: 8px;cursor: default;vertical-align: middle;} -i.orb {font-size: 1.1rem;margin: 0 8px 0 3px;} +span.outer.paused > i.img { + opacity: 0.6; +} +span.inner { + display: inline-block; + vertical-align: top; +} +span.state { + font-size: 1.1rem; + margin-left: 7px; +} +i.padlock { + margin-right: 8px; + cursor: default; + vertical-align: middle; +} +i.nolock { + visibility: hidden; + margin-right: 8px; + vertical-align: middle; +} +i.lock { + margin-left: 8px; + cursor: default; + vertical-align: middle; +} +i.orb { + font-size: 1.1rem; + margin: 0 8px 0 3px; +} img.img, -i.img {width: 32px;height: 32px;margin-right: 10px;} -img.icon {margin: -3px 4px 0 0;} -img.list {width: auto;max-width: 32px;height: 32px;} -i.list {font-size: 32px;} -a.list {text-decoration: none;color: inherit;} -div.content {position: absolute;top: 0;left: 0;width: 100%;padding-bottom: 30px;z-index: -1;clear: both;} -div.content.shift {margin-top: 1px;} -label + .content {margin-top: 86px;} -div.tabs {position: relative;margin: 130px 0 0 0;} -div.tab {float: left;margin-top: 30px;} -div.tab input[id^="tab"] {display: none;} -div.tab [type="radio"] + label:hover {background-color: transparent;border: 1px solid var(--orange-500);border-bottom: none;cursor: pointer;opacity: 1;} -div.tab [type="radio"]:checked + label {cursor: default;background-color: transparent;border: 1px solid var(--orange-500);border-bottom: none;opacity: 1;} -div.tab [type="radio"] + label ~ .content {display: none;} -div.tab [type="radio"]:checked + label ~ .content {display: inline;} -div.tab [type="radio"] + label {position: relative;font-size: 1.4rem;letter-spacing: 1.8px;padding: 4px 10px;margin-right: 2px;border-top-left-radius: 6px;border-top-right-radius: 6px;border: 1px solid var(--gray-400);border-bottom: none;background-color: var(--gray-200);opacity: 0.5;} -div.tab [type="radio"] + label img {padding-right: 4px;} -div.Panel {text-align: center;float: left;margin: 0 30px 30px 12px;height: 8rem;} -div.Panel a {text-decoration: none;} -div.Panel span {height: 42px;display: block;} -div.Panel:hover .PanelText {text-decoration: underline;} -div.Panel img.PanelImg {width: auto;max-width: 32px;height: 32px;} -div.Panel i.PanelIcon {font-size: 32px;color: var(--text-color);} -div.user-list {float: left;padding: 10px;margin-right: 10px;margin-bottom: 24px;border: 1px solid var(--gray-300);border-radius: 5px;line-height: 2rem;height: 10rem;width: 10rem;background-color: var(--gray-200);} -div.user-list img {width: auto;max-width: 48px;height: 48px;margin-bottom: 16px;} -div.up {margin-top: -30px;border: 1px solid var(--gray-200);padding: 4px 6px;overflow: auto;} -div.spinner {margin: 48px auto;text-align: center;} -div.spinner.fixed {display: none;position: fixed;top: 50%;left: 50%;margin-top: -16px;margin-left: -64px;z-index: 10000;} -div.spinner .unraid_mark {height: 64px;} +i.img { + width: 32px; + height: 32px; + margin-right: 10px; +} +img.icon { + margin: -3px 4px 0 0; +} +img.list { + width: auto; + max-width: 32px; + height: 32px; +} +i.list { + font-size: 32px; +} +a.list { + text-decoration: none; + color: inherit; +} +div.content { + position: absolute; + top: 0; + left: 0; + width: 100%; + padding-bottom: 30px; + z-index: -1; + clear: both; +} +div.content.shift { + margin-top: 1px; +} +label + .content { + margin-top: 86px; +} +div.tabs { + position: relative; + margin: 130px 0 0 0; +} +div.tab { + float: left; + margin-top: 30px; +} +div.tab input[id^="tab"] { + display: none; +} +div.tab [type="radio"] + label:hover { + background-color: transparent; + border: 1px solid var(--orange-500); + border-bottom: none; + cursor: pointer; + opacity: 1; +} +div.tab [type="radio"]:checked + label { + cursor: default; + background-color: transparent; + border: 1px solid var(--orange-500); + border-bottom: none; + opacity: 1; +} +div.tab [type="radio"] + label ~ .content { + display: none; +} +div.tab [type="radio"]:checked + label ~ .content { + display: inline; +} +div.tab [type="radio"] + label { + position: relative; + font-size: 1.4rem; + letter-spacing: 1.8px; + padding: 4px 10px; + margin-right: 2px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + border: 1px solid var(--gray-400); + border-bottom: none; + background-color: var(--gray-200); + opacity: 0.5; +} +div.tab [type="radio"] + label img { + padding-right: 4px; +} +div.Panel { + text-align: center; + float: left; + margin: 0 30px 30px 12px; + height: 8rem; +} +div.Panel a { + text-decoration: none; +} +div.Panel span { + height: 42px; + display: block; +} +div.Panel:hover .PanelText { + text-decoration: underline; +} +div.Panel img.PanelImg { + width: auto; + max-width: 32px; + height: 32px; +} +div.Panel i.PanelIcon { + font-size: 32px; + color: var(--text-color); +} +div.user-list { + float: left; + padding: 10px; + margin-right: 10px; + margin-bottom: 24px; + border: 1px solid var(--gray-300); + border-radius: 5px; + line-height: 2rem; + height: 10rem; + width: 10rem; + background-color: var(--gray-200); +} +div.user-list img { + width: auto; + max-width: 48px; + height: 48px; + margin-bottom: 16px; +} +div.up { + margin-top: -30px; + border: 1px solid var(--gray-200); + padding: 4px 6px; + overflow: auto; +} +div.spinner { + margin: 48px auto; + text-align: center; +} +div.spinner.fixed { + display: none; + position: fixed; + top: 50%; + left: 50%; + margin-top: -16px; + margin-left: -64px; + z-index: 10000; +} +div.spinner .unraid_mark { + height: 64px; +} div.spinner .unraid_mark_2, -div .unraid_mark_4 {animation: mark_2 1.5s ease infinite;} -div.spinner .unraid_mark_3 {animation: mark_3 1.5s ease infinite;} +div .unraid_mark_4 { + animation: mark_2 1.5s ease infinite; +} +div.spinner .unraid_mark_3 { + animation: mark_3 1.5s ease infinite; +} div.spinner .unraid_mark_6, -div .unraid_mark_8 {animation: mark_6 1.5s ease infinite;} -div.spinner .unraid_mark_7 {animation: mark_7 1.5s ease infinite;} -div.domain {margin-top: -20px;} -@keyframes mark_2 {50% { transform: translateY(-40px);}100% { transform: translateY(0px);}} -@keyframes mark_3 {50% { transform: translateY(-62px);}100% { transform: translateY(0px);}} -@keyframes mark_6 {50% { transform: translateY(40px);}100% { transform: translateY(0px);}} -@keyframes mark_7 {50% { transform: translateY(62px);}100% { transform: translateY(0px);}} -pre.up {margin-top: -30px;} -pre {border: 1px solid var(--gray-300);font-family: bitstream;font-size: 1.3rem;line-height: 1.8rem;padding: 4px 6px;overflow: auto;} -iframe#progressFrame {position: fixed;bottom: 32px;left: 0;margin: 0;padding: 8px 8px 0 8px;width: 100%;height: 1.2rem;line-height: 1.2rem;border-style: none;overflow: hidden;font-family: bitstream;font-size: 1.1rem;color: var(--gray-500);white-space: nowrap;z-index: -10;} -dl {margin: 0;padding-left: 12px;line-height: 2.6rem;} -dt {clear: left;float: left;width: 35%;font-weight: normal;} -dd {margin-bottom: 12px;white-space: nowrap;} -dd p {margin: 0 0 4px 0;} -dd blockquote {padding-left: 0;} -blockquote {width: 90%;margin: 10px auto;text-align: left;padding: 4px 20px;border-top: 2px solid var(--blue-200);border-bottom: 2px solid var(--blue-200);color: var(--gray-800);background-color: var(--blue-100);} -blockquote.ontop {margin-top: -20px;margin-bottom: 46px;} -blockquote a {color: var(--orange-500);font-weight: 600;} +div .unraid_mark_8 { + animation: mark_6 1.5s ease infinite; +} +div.spinner .unraid_mark_7 { + animation: mark_7 1.5s ease infinite; +} +div.domain { + margin-top: -20px; +} +@keyframes mark_2 { + 50% { + transform: translateY(-40px); + } + 100% { + transform: translateY(0px); + } +} +@keyframes mark_3 { + 50% { + transform: translateY(-62px); + } + 100% { + transform: translateY(0px); + } +} +@keyframes mark_6 { + 50% { + transform: translateY(40px); + } + 100% { + transform: translateY(0px); + } +} +@keyframes mark_7 { + 50% { + transform: translateY(62px); + } + 100% { + transform: translateY(0px); + } +} +pre.up { + margin-top: -30px; +} +pre { + border: 1px solid var(--gray-300); + font-family: bitstream; + font-size: 1.3rem; + line-height: 1.8rem; + padding: 4px 6px; + overflow: auto; +} +iframe#progressFrame { + position: fixed; + bottom: 32px; + left: 0; + margin: 0; + padding: 8px 8px 0 8px; + width: 100%; + height: 1.2rem; + line-height: 1.2rem; + border-style: none; + overflow: hidden; + font-family: bitstream; + font-size: 1.1rem; + color: var(--gray-500); + white-space: nowrap; + z-index: -10; +} +dl { + margin: 0; + padding-left: 12px; + line-height: 2.6rem; +} +dt { + clear: left; + float: left; + width: 35%; + font-weight: normal; +} +dd { + margin-bottom: 12px; + white-space: nowrap; +} +dd p { + margin: 0 0 4px 0; +} +dd blockquote { + padding-left: 0; +} +blockquote { + width: 90%; + margin: 10px auto; + text-align: left; + padding: 4px 20px; + border-top: 2px solid var(--blue-200); + border-bottom: 2px solid var(--blue-200); + color: var(--gray-800); + background-color: var(--blue-100); +} +blockquote.ontop { + margin-top: -20px; + margin-bottom: 46px; +} +blockquote a { + color: var(--orange-500); + font-weight: 600; +} blockquote a:hover, -blockquote a:focus {color: var(--orange-800);} -label.checkbox {display: block;position: relative;padding-left: 28px;margin: 3px 0;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} -label.checkbox input {position: absolute;opacity: 0;cursor: pointer;} -span.checkmark {position: absolute;top: 0;left: 6px;height: 14px;width: 14px;background-color: var(--gray-200);border-radius: 100%;} -label.checkbox:hover input ~ .checkmark {background-color: var(--gray-300);} -label.checkbox input:checked ~ .checkmark {background-color: var(--orange-500);} -label.checkbox input:disabled ~ .checkmark {opacity: 0.5;} -a.bannerDismiss {float: right;cursor: pointer;text-decoration: none;margin-right: 1rem;} -.bannerDismiss::before {content: "\e92f";font-family: Unraid;color: var(--orange-300);} -a.bannerInfo {cursor: pointer;text-decoration: none;} -.bannerInfo::before {content: "\f05a";font-family: fontAwesome;color: var(--orange-300);} -::-webkit-scrollbar {width: 10px;height: 10px;background: transparent;} -::-webkit-scrollbar-thumb {background: var(--gray-400);border-radius: 10px;} -::-webkit-scrollbar-corner {background: var(--gray-400);border-radius: 10px;} -::-webkit-scrollbar-thumb:hover {background: var(--gray-500);} +blockquote a:focus { + color: var(--orange-800); +} +label.checkbox { + display: block; + position: relative; + padding-left: 28px; + margin: 3px 0; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +label.checkbox input { + position: absolute; + opacity: 0; + cursor: pointer; +} +span.checkmark { + position: absolute; + top: 0; + left: 6px; + height: 14px; + width: 14px; + background-color: var(--gray-200); + border-radius: 100%; +} +label.checkbox:hover input ~ .checkmark { + background-color: var(--gray-300); +} +label.checkbox input:checked ~ .checkmark { + background-color: var(--orange-500); +} +label.checkbox input:disabled ~ .checkmark { + opacity: 0.5; +} +a.bannerDismiss { + float: right; + cursor: pointer; + text-decoration: none; + margin-right: 1rem; +} +.bannerDismiss::before { + content: "\e92f"; + font-family: Unraid; + color: var(--orange-300); +} +a.bannerInfo { + cursor: pointer; + text-decoration: none; +} +.bannerInfo::before { + content: "\f05a"; + font-family: fontAwesome; + color: var(--orange-300); +} +::-webkit-scrollbar { + width: 10px; + height: 10px; + background: transparent; +} +::-webkit-scrollbar-thumb { + background: var(--gray-400); + border-radius: 10px; +} +::-webkit-scrollbar-corner { + background: var(--gray-400); + border-radius: 10px; +} +::-webkit-scrollbar-thumb:hover { + background: var(--gray-500); +} From 6fb2b8178ce3b43b388889a4eeb3501c86766bb2 Mon Sep 17 00:00:00 2001 From: Bailey Matthews Date: Sat, 9 Sep 2023 13:22:59 +0100 Subject: [PATCH 04/99] chore: reformat to old layout --- .../plugins/dynamix/styles/default-white.css | 1747 +++-------------- 1 file changed, 277 insertions(+), 1470 deletions(-) diff --git a/emhttp/plugins/dynamix/styles/default-white.css b/emhttp/plugins/dynamix/styles/default-white.css index bc3f0119b..d74557dd1 100644 --- a/emhttp/plugins/dynamix/styles/default-white.css +++ b/emhttp/plugins/dynamix/styles/default-white.css @@ -1,167 +1,36 @@ -:root { - --gray-000: rgb(255, 255, 255); /*#ffffff*/ - --gray-100: rgb(242, 242, 242); /*#f2f2f2*/ - --gray-200: rgb(211, 211, 211); /*#d3d3d3#d9d9d9#dcdcdc#d4d5d6*/ - --gray-300: rgb(204, 204, 204); /*gray#c0c0c0#a8a8a8*/ - --gray-400: rgb(144, 144, 144); /*#909090#989898#a2a2a2#949494*/ - --gray-500: rgb(128, 128, 128); /*#808080#606060#585858*/ - --gray-600: rgb(048, 048, 048); /*#303030#202020*/ - --gray-700: rgb(064, 064, 064); /*#404040*/ - --gary-800: rgb(025, 025, 025); /*#191919#2b2a29*/ - --gray-900: rgb(029, 027, 027); /*#1c1b1b*/ - --orange-200: rgb(255, 153, 0); /*#ff9900*/ - --orange-300: rgb(230, 138, 0); /*#e68a00*/ - --orange-400: rgb(206, 124, 16); /*#ce7c10*/ - --orange-500: rgb(255, 140, 47); /*#ff8c2f*/ - --orange-800: rgb(241, 90, 44); /*#f15a2c*/ - --orange-900: rgb(214, 51, 1); /*#d63301*/ - --red-100: rgb(255, 221, 209); /*#ffddd1*/ - --red-300: rgb(255, 158, 158); /*#ff9e9e*/ - --red-500: rgb(255, 51, 0); /*#ff3300*/ - --red-600: rgb(240, 0, 12); /*#f0000c*/ - --red-700: rgb(222, 17, 0); /*#de1100*/ - --red-800: rgb(226, 40, 40); /*#e22828*/ - --red-900: rgb(148, 28, 0); /*#941c00*/ - --green-100: rgb(223, 242, 191); /*#dff2bf*/ - --green-200: rgb(51, 204, 51); /*#33cc33*/ - --green-500: rgb(23, 191, 11); /*#17bf0b*/ - --green-800: rgb(79, 138, 16); /*#4f8a10*/ - --green-900: rgb(18, 122, 5); /*#127a05*/ - --blue-100: rgb(217, 237, 247); /*#d9edf7*/ - --blue-200: rgb(188, 232, 241); /*#bce8f1*/ - --blue-300: rgb(189, 229, 248); /*#bde5f8*/ - --blue-700: rgb(0, 153, 255); /*#0099ff*/ - --blue-800: rgb(072, 109, 186); /*#486dba*/ - --blue-900: rgb(59, 89, 152); /*#3b5998*/ - --yellow-100: rgb(255, 246, 191); /*#fff6bf*/ - --yellow-200: rgb(254, 239, 179); /*#feefb3*/ - --yellow-500: rgb(255, 211, 36); /*#ffd324*/ - --text-color: var(--gray-900); - --background-color: var(--gray-100); -} +:root {--gray-000: rgb(255, 255, 255); /* #ffffff */--gray-100: rgb(242, 242, 242); /* #f2f2f2 */--gray-200: rgb(211, 211, 211); /* #d3d3d3 #d9d9d9 #dcdcdc #d4d5d6 */--gray-300: rgb(204, 204, 204); /* gray #c0c0c0 #a8a8a8 */--gray-400: rgb(144, 144, 144); /* #909090 #989898 #a2a2a2 #949494 */--gray-500: rgb(128, 128, 128); /* #808080 #606060 #585858 */--gray-600: rgb(048, 048, 048); /* #303030 #202020 */--gray-700: rgb(064, 064, 064); /* #404040 */--gary-800: rgb(025, 025, 025); /* #191919 #2b2a29 */--gray-900: rgb(029, 027, 027); /* #1c1b1b */ +--orange-200: rgb(255, 153, 0); /* #ff9900 */--orange-300: rgb(230, 138, 0); /* #e68a00 */--orange-400: rgb(206, 124, 16); /* #ce7c10 */--orange-500: rgb(255, 140, 47); /* #ff8c2f */--orange-800: rgb(241, 90, 44); /* #f15a2c */--orange-900: rgb(214, 51, 1); /* #d63301 */ +--red-100: rgb(255, 221, 209); /* #ffddd1 */--red-300: rgb(255, 158, 158); /* #ff9e9e */--red-500: rgb(255, 51, 0); /* #ff3300 */--red-600: rgb(240, 0, 12); /* #f0000c */--red-700: rgb(222, 17, 0); /* #de1100 */--red-800: rgb(226, 40, 40); /* #e22828 */--red-900: rgb(148, 28, 0); /* #941c00 */ +--green-100: rgb(223, 242, 191); /* #dff2bf */--green-200: rgb(51, 204, 51); /* #33cc33 */--green-500: rgb(23, 191, 11); /* #17bf0b */--green-800: rgb(79, 138, 16); /* #4f8a10 */--green-900: rgb(18, 122, 5); /* #127a05 */ +--blue-100: rgb(217, 237, 247); /* #d9edf7 */--blue-200: rgb(188, 232, 241); /* #bce8f1 */--blue-300: rgb(189, 229, 248); /* #bde5f8 */--blue-700: rgb(0, 153, 255); /* #0099ff */--blue-800: rgb(072, 109, 186); /* #486dba */--blue-900: rgb(59, 89, 152); /* #3b5998 */ +--yellow-100: rgb(255, 246, 191); /* #fff6bf */--yellow-200: rgb(254, 239, 179); /* #feefb3 */--yellow-500: rgb(255, 211, 36); /* #ffd324 */ +--text-color: var(--gray-900);--background-color: var(--gray-100);} -html { - font-family: clear-sans; - font-size: 62.5%; - height: 100%; -} -body { - font-size: 1.3rem; - color: var(--text-color); - background-color: var(--background-color); - padding: 0; - margin: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -@media (max-width: 1280px) { - #template { - min-width: 1260px; - max-width: 1260px; - margin: 0; - } -} -@media (min-width: 1281px) { - #template { - min-width: 1260px; - margin: 010px; - } -} -@media (min-width: 1921px) { - #template { - min-width: 1260px; - max-width: 1920px; - margin: 0auto; - } -} -img { - border: none; - text-decoration: none; - vertical-align: middle; -} -p { - text-align: justify; -} -p.centered { - text-align: left; -} -p:empty { - display: none; -} -a:hover { - text-decoration: underline; -} -a { - color: var(--blue-800); - text-decoration: none; -} -a.none { - color: var(--text-color); -} -a.img { - text-decoration: none; - border: none; -} -a.info { - position: relative; -} -a.infospan { - display: none; - white-space: nowrap; - font-variant: small-caps; - position: absolute; - top: 16px; - left: 12px; - line-height: 2rem; - color: var(--gray-100); - padding: 5px8px; - border: 1pxsolidrgba (var(--gray-000), 0.25); - border-radius: 3px; - background-color: rgba(var(--gray-800), 0.95); - box-shadow: 003pxvar (--gray-700); -} -a.info:hoverspan { - display: block; - z-index: 1; -} -a.nohand { - cursor: default; -} -a.hand { - cursor: pointer; - text-decoration: none; -} -a.static { - cursor: default; - color: var(--gray-400); - text-decoration: none; -} -a.view { - display: inline-block; - width: 20px; -} -i.spacing { - margin-left: -6px; -} -i.icon { - font-size: 1.6rem; - margin-right: 4px; - vertical-align: middle; -} -i.title { - margin-right: 8px; -} -i.control { - cursor: pointer; - color: var(--gray-400); - font-size: 1.8rem; -} -hr { - border: none; - height: 1px !important; - color: var(--gray-300); - background-color: var(--gray-300); -} +html {font-family: clear-sans;font-size: 62.5%;height: 100%;} +body {font-size: 1.3rem;color: var(--text-color);background-color: var(--background-color);padding: 0;margin: 0;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} +@media (max-width: 1280px) {#template {min-width: 1260px;max-width: 1260px;margin: 0;}} +@media (min-width: 1281px) {#template {min-width: 1260px;margin: 0 10px;}} +@media (min-width: 1921px) {#template {min-width: 1260px;max-width: 1920px;margin: 0 auto;}} +img {border: none;text-decoration: none;vertical-align: middle;} +p {text-align: justify;} +p.centered {text-align: left;} +p:empty {display: none;} +a:hover {text-decoration: underline;} +a {color: var(--blue-800);text-decoration: none;} +a.none {color: var(--text-color);} +a.img {text-decoration: none;border: none;} +a.info {position: relative;} +a.info span {display: none;white-space: nowrap;font-variant: small-caps;position: absolute;top: 16px;left: 12px;line-height: 2rem;color: var(--gray-100);padding: 5px 8px;border: 1px solid rgba(var(--gray-000), 0.25);border-radius: 3px;background-color: rgba(var(--gray-800), 0.95);box-shadow: 0 0 3px var(--gray-700);} +a.info:hover span {display: block;z-index: 1;} +a.nohand {cursor: default;} +a.hand {cursor: pointer;text-decoration: none;} +a.static {cursor: default;color: var(--gray-400);text-decoration: none;} +a.view {display: inline-block;width: 20px;} +i.spacing {margin-left: -6px;} +i.icon {font-size: 1.6rem;margin-right: 4px;vertical-align: middle;} +i.title {margin-right: 8px;} +i.control {cursor: pointer;color: var(--gray-400);font-size: 1.8rem;} +hr {border: none;height: 1px !important;color: var(--gray-300);background-color: var(--gray-300);} input[type="text"], input[type="password"], input[type="number"], @@ -170,1352 +39,290 @@ input[type="email"], input[type="date"], input[type="file"], textarea, -.textarea { - font-family: clear-sans; - font-size: 1.3rem; - background-color: transparent; - border: none; - border-bottom: 1pxsolidvar (--gray-900); - padding: 4px0; - text-indent: 0; - min-height: 2rem; - line-height: 2rem; - outline: none; - width: 300px; - margin: 020px00; - box-shadow: none; - border-radius: 0; - color: var(--text-color); -} +.textarea {font-family: clear-sans;font-size: 1.3rem;background-color: transparent;border: none;border-bottom: 1px solid var(--gray-900);padding: 4px 0;text-indent: 0;min-height: 2rem;line-height: 2rem;outline: none;width: 300px;margin: 0 20px 0 0;box-shadow: none;border-radius: 0;color: var(--text-color);} input[type="button"], input[type="reset"], input[type="submit"], button, button[type="button"], -a.button { - font-family: clear-sans; - font-size: 1.1rem; - font-weight: bold; - letter-spacing: 1.8px; - text-transform: uppercase; - min-width: 86px; - margin: 10px12px10px0; - padding: 8px; - text-align: center; - text-decoration: none; - white-space: nowrap; - cursor: pointer; - outline: none; - border-radius: 4px; - border: none; - color: var(--orange-500); - background: -webkit-gradient( - linear, - lefttop, - righttop, - from(var(--red-800)), - to(var(--orange-500)) - ) - 00no-repeat, - -webkit-gradient( - linear, - lefttop, - righttop, - from(var(--red-800)), - to(var(--orange-500)) - ) 0100%no-repeat, - -webkit-gradient( - linear, - leftbottom, - lefttop, - from(var(--red-800)), - to(var(--red-800)) - ) 0100%no-repeat, - -webkit-gradient( - linear, - leftbottom, - lefttop, - from(var(--orange-500)), - to(var(--orange-500)) - ) 100%100%no-repeat; - background: linear-gradient(90deg, var(--red-800) 0, var(--orange-500)) 00no-repeat, - linear-gradient(90deg, var(--red-800) 0, var(--orange-500)) 0100%no-repeat, - linear-gradient(0deg, var(--red-800) 0, var(--red-800)) 0100%no-repeat, - linear-gradient(0deg, var(--orange-500) 0, var(--orange-500)) 100%100%no-repeat; - background-size: 100%2px, 100%2px, 2px100%, 2px100%; -} -input[type="checkbox"] { - vertical-align: middle; - margin-right: 6px; -} +a.button {font-family: clear-sans;font-size: 1.1rem;font-weight: bold;letter-spacing: 1.8px;text-transform: uppercase;min-width: 86px;margin: 10px 12px 10px 0;padding: 8px;text-align: center;text-decoration: none;white-space: nowrap;cursor: pointer;outline: none;border-radius: 4px;border: none;color: var(--orange-500);background: -webkit-gradient(linear,left top,right top,from(var(--red-800)),to(var(--orange-500)))0 0 no-repeat,-webkit-gradient(linear,left top,right top,from(var(--red-800)),to(var(--orange-500))) 0 100% no-repeat,-webkit-gradient(linear,left bottom,left top,from(var(--red-800)),to(var(--red-800))) 0 100% no-repeat,-webkit-gradient(linear,left bottom,left top,from(var(--orange-500)),to(var(--orange-500))) 100% 100% no-repeat;background: linear-gradient(90deg, var(--red-800) 0, var(--orange-500)) 0 0no-repeat,linear-gradient(90deg, var(--red-800) 0, var(--orange-500)) 0 100%no-repeat,linear-gradient(0deg, var(--red-800) 0, var(--red-800)) 0 100% no-repeat,linear-gradient(0deg, var(--orange-500) 0, var(--orange-500)) 100% 100%no-repeat;background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;} +input[type="checkbox"] {vertical-align: middle;margin-right: 6px;} input[type="number"]::-webkit-outer-spin-button, -input[type="number"]::-webkit-inner-spin-button { - -webkit-appearance: none; -} -input[type="number"] { - -moz-appearance: textfield; -} +input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;} +input[type="number"] {-moz-appearance: textfield;} input:focus[type="text"], input:focus[type="password"], input:focus[type="number"], input:focus[type="url"], input:focus[type="email"], input:focus[type="file"], -textarea:focus { - background-color: var(--gray-300); - outline: 0; -} +textarea:focus {background-color: var(--gray-300);outline: 0;} input:hover[type="button"], input:hover[type="reset"], input:hover[type="submit"], button:hover, button:hover[type="button"], -a.button:hover { - color: var(--gray-100); - background: -webkit-gradient( - linear, - lefttop, - righttop, - from(var(--red-800)), - to(var(--orange-500)) - ); - background: linear-gradient(90deg, var(--red-800) 0, var(--orange-500)); -} +a.button:hover {color: var(--gray-100);background: -webkit-gradient(linear,left top,right top,from(var(--red-800)),to(var(--orange-500)));background: linear-gradient(90deg, var(--red-800) 0, var(--orange-500));} input[disabled], -textarea[disabled] { - color: var(--text-color); - border-bottom-color: var(--gray-400); - opacity: 0.5; - cursor: default; -} +textarea[disabled] {color: var(--text-color);border-bottom-color: var(--gray-400);opacity: 0.5;cursor: default;} input[type="button"][disabled], input[type="reset"][disabled], input[type="submit"][disabled], button[disabled], button[type="button"][disabled], -a.button[disabled]input:hover[type="button"][disabled], +a.button[disabled] input:hover[type="button"][disabled], input:hover[type="reset"][disabled], input:hover[type="submit"][disabled], button:hover[disabled], button:hover[type="button"][disabled], -a.button:hover[disabled]input:active[type="button"][disabled], +a.button:hover[disabled] input:active[type="button"][disabled], input:active[type="reset"][disabled], input:active[type="submit"][disabled], button:active[disabled], button:active[type="button"][disabled], -a.button:active[disabled] { - cursor: default; - color: var(--gray-500); - background: -webkit-gradient( - linear, - lefttop, - righttop, - from(var(--gray-700)), - to(var(--gray-500)) - ) - 00no-repeat, - -webkit-gradient( - linear, - lefttop, - righttop, - from(var(--gray-700)), - to(var(--gray-500)) - ) 0100%no-repeat, - -webkit-gradient( - linear, - leftbottom, - lefttop, - from(var(--gray-700)), - to(var(--gray-700)) - ) 0100%no-repeat, - -webkit-gradient( - linear, - leftbottom, - lefttop, - from(var(--gray-500)), - to(var(--gray-500)) - ) 100%100%no-repeat; - background: linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 00no-repeat, - linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0100%no-repeat, - linear-gradient(0deg, var(--gray-700) 0, var(--gray-700)) 0100%no-repeat, - linear-gradient(0deg, var(--gray-500) 0, var(--gray-500)) 100%100%no-repeat; - background-size: 100%2px, 100%2px, 2px100%, 2px100%; -} -input::-webkit-input-placeholder { - color: var(--blue-800); -} -select { - -webkit-appearance: none; - font-family: clear-sans; - font-size: 1.3rem; - min-width: 166px; - max-width: 300px; - padding: 5px8px5px0; - text-indent: 0; - margin: 010px00; - border: none; - border-bottom: 1pxsolidvar (--gray-900); - box-shadow: none; - border-radius: 0; - color: var(--text-color); - background-color: transparent; - background-image: linear-gradient( - 66.6deg, - transparent60%, - var(--gray-900) 40% - ), - linear-gradient(113.4deg, var(--gray-900) 40%, transparent60%); - background-position: calc(100%-4px), 100%; - background-size: 4px6px, 4px6px; - background-repeat: no-repeat; - outline: none; - display: inline-block; - cursor: pointer; -} -selectoption { - color: var(--text-color); - background-color: var(--gray-300); -} -select:focus { - outline: 0; -} -select[disabled] { - color: var(--text-color); - border-bottom-color: var(--gray-500); - opacity: 0.5; - cursor: default; -} -select[name="enter_view"] { - margin: 0; - padding: 012px00; - border: none; - min-width: auto; -} -select[name="enter_share"] { - font-size: 1.1rem; - padding: 0; - border: none; - min-width: 40px; - float: right; - margin-top: 13px; - margin-right: 20px; -} -select[name="port_select"] { - border: none; - min-width: 54px; - padding-top: 0; - padding-bottom: 0; -} -select.narrow { - min-width: 76px; -} -select.auto { - min-width: auto; -} -select.slot { - min-width: 44rem; - max-width: 44rem; -} -input.narrow { - width: 166px; -} -input.trim { - width: 76px; - min-width: 76px; -} -textarea { - resize: none; -} -#header { - position: absolute; - top: 0; - left: 0; - width: 100%; - min-width: 1260px; - height: 91px; - z-index: 102; - margin: 0; - color: var(--gray-100); - background-color: var(--gray-900); - background-size: 100%90px; - background-repeat: no-repeat; -} -#header.logo { - float: left; - margin-left: 10px; - color: var(--red-800); - text-align: center; -} -#header.logosvg { - width: 160px; - display: block; - margin: 25px08px0; -} -#header.block { - margin: 0; - float: right; - text-align: right; - background-color: rgba(var(--gray-900), 0.3); - padding: 10px12px; -} -#header.text-left { - float: left; - text-align: right; - padding-right: 5px; - border-right: solidmediumvar(--orange-800); -} -#header.text-right { - float: right; - text-align: left; - padding-left: 5px; -} -#header.text-righta { - color: var(--gray-100); -} -#header.text-right#licensetype { - font-weight: bold; - font-style: italic; - margin-right: 4px; -} -div.title { - margin: 20px032px0; - padding: 8px10px; - clear: both; - border-bottom: 1pxsolidvar (--gray-300); - background-color: var(--gray-300); - letter-spacing: 1.8px; -} -div.titlespan.left { - font-size: 1.4rem; -} -div.titlespan.right { - font-size: 1.4rem; - padding-top: 2px; - padding-right: 10px; - float: right; -} -div.titlespanimg { - padding-right: 4px; -} -div.title.shift { - margin-top: -30px; -} -#menu { - position: absolute; - top: 90px; - left: 0; - right: 0; - display: grid; - grid-template-columns: automax-content; - z-index: 101; -} -.nav-tile { - height: 4rem; - line-height: 4rem; - padding: 0; - margin: 0; - font-size: 1.2rem; - letter-spacing: 1.8px; - background-color: var(--gray-900); - white-space: nowrap; - overflow-x: auto; - overflow-y: hidden; - scrollbar-width: thin; -} -.nav-tile::-webkit-scrollbar { - height: 8px; -} -.nav-tile.right { - text-align: right; -} +a.button:active[disabled] {cursor: default;color: var(--gray-500);background: -webkit-gradient(linear,left top,right top,from(var(--gray-700)),to(var(--gray-500)))0 0 no-repeat,-webkit-gradient(linear,left top,right top,from(var(--gray-700)),to(var(--gray-500))) 0 100% no-repeat,-webkit-gradient(linear,left bottom,left top,from(var(--gray-700)),to(var(--gray-700))) 0 100% no-repeat,-webkit-gradient(linear,left bottom,left top,from(var(--gray-500)),to(var(--gray-500))) 100% 100% no-repeat;background: linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 0no-repeat,linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 100%no-repeat,linear-gradient(0deg, var(--gray-700) 0, var(--gray-700)) 0 100%no-repeat,linear-gradient(0deg, var(--gray-500) 0, var(--gray-500)) 100% 100%no-repeat;background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;} +input::-webkit-input-placeholder {color: var(--blue-800);} +select {-webkit-appearance: none;font-family: clear-sans;font-size: 1.3rem;min-width: 166px;max-width: 300px;padding: 5px 8px 5px 0;text-indent: 0;margin: 0 10px 0 0;border: none;border-bottom: 1px solid var(--gray-900);box-shadow: none;border-radius: 0;color: var(--text-color);background-color: transparent;background-image: linear-gradient(66.6deg,transparent 60%,var(--gray-900) 40%),linear-gradient(113.4deg, var(--gray-900) 40%, transparent 60%);background-position: calc(100% - 4px), 100%;background-size: 4px 6px, 4px 6px;background-repeat: no-repeat;outline: none;display: inline-block;cursor: pointer;} +select option {color: var(--text-color);background-color: var(--gray-300);} +select:focus {outline: 0;} +select[disabled] {color: var(--text-color);border-bottom-color: var(--gray-500);opacity: 0.5;cursor: default;} +select[name="enter_view"] {margin: 0;padding: 0 12px 0 0;border: none;min-width: auto;} +select[name="enter_share"] {font-size: 1.1rem;padding: 0;border: none;min-width: 40px;float: right;margin-top: 13px;margin-right: 20px;} +select[name="port_select"] {border: none;min-width: 54px;padding-top: 0;padding-bottom: 0;} +select.narrow {min-width: 76px;} +select.auto {min-width: auto;} +select.slot {min-width: 44rem;max-width: 44rem;} +input.narrow {width: 166px;} +input.trim {width: 76px;min-width: 76px;} +textarea {resize: none;} +#header {position: absolute;top: 0;left: 0;width: 100%;min-width: 1260px;height: 91px;z-index: 102;margin: 0;color: var(--gray-100);background-color: var(--gray-900);background-size: 100% 90px;background-repeat: no-repeat;} +#header .logo {float: left;margin-left: 10px;color: var(--red-800);text-align: center;} +#header .logo svg {width: 160px;display: block;margin: 25px 0 8px 0;} +#header .block {margin: 0;float: right;text-align: right;background-color: rgba(var(--gray-900), 0.3);padding: 10px 12px;} +#header .text-left {float: left;text-align: right;padding-right: 5px;border-right: solid medium var(--orange-800);} +#header .text-right {float: right;text-align: left;padding-left: 5px;} +#header .text-right a {color: var(--gray-100);} +#header .text-right #licensetype {font-weight: bold;font-style: italic;margin-right: 4px;} +div.title {margin: 20px 0 32px 0;padding: 8px 10px;clear: both;border-bottom: 1px solid var(--gray-300);background-color: var(--gray-300);letter-spacing: 1.8px;} +div.title span.left {font-size: 1.4rem;} +div.title span.right {font-size: 1.4rem;padding-top: 2px;padding-right: 10px;float: right;} +div.title span img {padding-right: 4px;} +div.title.shift {margin-top: -30px;} +#menu {position: absolute;top: 90px;left: 0;right: 0;display: grid;grid-template-columns: auto max-content;z-index: 101;} +.nav-tile {height: 4rem;line-height: 4rem;padding: 0;margin: 0;font-size: 1.2rem;letter-spacing: 1.8px;background-color: var(--gray-900);white-space: nowrap;overflow-x: auto;overflow-y: hidden;scrollbar-width: thin;} +.nav-tile::-webkit-scrollbar {height: 8px;} +.nav-tile.right {text-align: right;} .nav-item, -.nav-user { - position: relative; - display: inline-block; - text-align: center; - margin: 0; -} -.nav-itema { - min-width: 0; -} -.nav-itemaspan { - display: none; -} -.nav-item.system { - vertical-align: middle; - padding-bottom: 2px; -} -.nav-itema { - color: var(--gray-100); - background-color: transparent; - text-transform: uppercase; - font-weight: bold; - display: block; - padding: 010px; -} -.nav-itema { - text-decoration: none; - text-decoration-skip-ink: auto; - -webkit-text-decoration-skip: objects; - -webkit-transition: all0.25sease-out; - transition: all0.25sease-out; -} +.nav-user {position: relative;display: inline-block;text-align: center;margin: 0;} +.nav-item a {min-width: 0;} +.nav-item a span {display: none;} +.nav-item .system {vertical-align: middle;padding-bottom: 2px;} +.nav-item a {color: var(--gray-100);background-color: transparent;text-transform: uppercase;font-weight: bold;display: block;padding: 0 10px;} +.nav-item a {text-decoration: none;text-decoration-skip-ink: auto;-webkit-text-decoration-skip: objects;-webkit-transition: all 0.25s ease-out;transition: all 0.25s ease-out;} .nav-item:after, -.nav-user.show:after { - border-radius: 4px; - display: block; - background-color: transparent; - content: ""; - width: 32px; - height: 2px; - bottom: 8px; - position: absolute; - left: 50%; - margin-left: -16px; - -webkit-transition: all0.25sease-in-out; - transition: all0.25sease-in-out; - pointer-events: none; -} +.nav-user.show:after {border-radius: 4px;display: block;background-color: transparent;content: "";width: 32px;height: 2px;bottom: 8px;position: absolute;left: 50%;margin-left: -16px;-webkit-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;pointer-events: none;} .nav-item:focus:after, .nav-item:hover:after, -.nav-user.show:hover:after { - background-color: var(--orange-800); -} -.nav-item.active:after { - background-color: var(--background-color); -} -.nav-usera { - color: var(--gray-100); - background-color: transparent; - display: block; - padding: 010px; -} -.nav-user.system { - vertical-align: middle; - padding-bottom: 2px; -} -#clear { - clear: both; -} -#footer { - position: fixed; - bottom: 0; - left: 0; - color: var(--gray-800); - background-color: var(--gray-200); - padding: 5px0; - width: 100%; - height: 1.6rem; - line-height: 1.6rem; - text-align: center; - z-index: 10000; -} -#statusraid { - float: left; - padding-left: 10px; -} -#countdown { - margin: 0auto; -} -#copyright { - font-family: bitstream; - font-size: 1.1rem; - float: right; - padding-right: 10px; -} -.green { - color: var(--green-800); - padding-left: 5px; - padding-right: 5px; -} -.red { - color: var(--red-600); - padding-left: 5px; - padding-right: 5px; -} -.orange { - color: var(--orange-300); - padding-left: 5px; - padding-right: 5px; -} -.blue { - color: var(--blue-800); - padding-left: 5px; - padding-right: 5px; -} +.nav-user.show:hover:after {background-color: var(--orange-800);} +.nav-item.active:after {background-color: var(--background-color);} +.nav-user a {color: var(--gray-100);background-color: transparent;display: block;padding: 0 10px;} +.nav-user .system {vertical-align: middle;padding-bottom: 2px;} +#clear {clear: both;} +#footer {position: fixed;bottom: 0;left: 0;color: var(--gray-800);background-color: var(--gray-200);padding: 5px 0;width: 100%;height: 1.6rem;line-height: 1.6rem;text-align: center;z-index: 10000;} +#statusraid {float: left;padding-left: 10px;} +#countdown {margin: 0 auto;} +#copyright {font-family: bitstream;font-size: 1.1rem;float: right;padding-right: 10px;} +.green {color: var(--green-800);padding-left: 5px;padding-right: 5px;} +.red {color: var(--red-600);padding-left: 5px;padding-right: 5px;} +.orange {color: var(--orange-300);padding-left: 5px;padding-right: 5px;} +.blue {color: var(--blue-800);padding-left: 5px;padding-right: 5px;} .green-text, -.passed { - color: var(--green-800); -} +.passed {color: var(--green-800);} .red-text, -.failed { - color: var(--red-600); -} +.failed {color: var(--red-600);} .orange-text, -.warning { - color: var(--orange-300); -} -.blue-text { - color: var(--blue-800); -} -.grey-text { - color: var(--gray-500); -} -.green-orb { - color: var(--green-200); -} -.grey-orb { - color: var(--gray-300); -} -.blue-orb { - color: var(--blue-700); -} -.yellow-orb { - color: var(--orange-200); -} -.red-orb { - color: var(--red-500); -} -.usage-bar { - float: left; - height: 2rem; - line-height: 2rem; - width: 14rem; - padding: 1px1px1px2px; - margin: 8px12px; - border-radius: 3px; - background-color: var(--gray-500); - box-shadow: 01px0var (--gray-400), inset01px0var(--gray-600); -} -.usage-bar > span { - display: block; - height: 100%; - text-align: right; - border-radius: 2px; - color: var(--gray-100); - background-color: var(--gray-500); - box-shadow: inset01px0rgba(var(--gray-000), 0.5); -} -.usage-disk { - position: relative; - height: 1.8rem; - background-color: var(--gray-200); - margin: 0; -} -.usage-disk > span:first-child { - position: absolute; - left: 0; - margin: 0 !important; - height: 1.8rem; - background-color: var(--gray-300); -} -.usage-disk > span:last-child { - position: relative; - padding-right: 4px; - z-index: 1; -} -.usage-disk.sys { - height: 12px; - margin: -15px20px044px; -} -.usage-disk.sys > span:first-child { - height: 12px; - padding: 0; -} -.usage-disk.sys.none { - background-color: transparent; -} -.usage-disk.mm { - height: 3px; - margin: 5px20px00; -} -.usage-disk.mm > span:first-child { - height: 3px; -} -.notice { - background: var(--yellow-100) url(../images/notice.png) no-repeat; - background-position: 60px50%; - color: var(--text-color); - font-size: 1.4rem; - text-align: left; - padding: 15px015px130px; - display: block; - height: 7rem; - line-height: 7rem; - vertical-align: middle; - border-top: 2pxsolidvar (--yellow-500); - border-bottom: 2pxsolidvar (--yellow-500); -} -.notice.shift { - margin-top: 160px; -} -.greenbar { - background: -webkit-gradient( - linear, - lefttop, - righttop, - from(var(--green-900)), - to(var(--green-500)) - ); - background: linear-gradient(90deg, var(--green-900) 0, var(--green-500)); -} -.orangebar { - background: -webkit-gradient( - linear, - lefttop, - righttop, - from(var(--orange-400)), - to(var(--orange-400)) - ); - background: linear-gradient(90deg, var(--orange-400) 0, var(--orange-400)); -} -.redbar { - background: -webkit-gradient( - linear, - lefttop, - righttop, - from(var(--red-900)), - to(var(--red-700)) - ); - background: linear-gradient(90deg, var(--red-900) 0, var(--red-700)); -} -.graybar { - background: -webkit-gradient( - linear, - lefttop, - righttop, - from(var(--gray-400)), - to(var(--gray-200)) - ); - background: linear-gradient(90deg, var(--gray-400) 0, var(--gray-200)); -} -table { - border-collapse: collapse; - border-spacing: 0; - border-style: hidden; - margin: -30px000; - width: 100%; - background-color: var(--background-color); -} -tabletheadtd { - padding: 7px0; -} -tabletbodytd { - padding: 5px0; -} -tabletbodytr.tr_last { - background-color: var(--background-color); - border-top: 1pxsolidvar (--gray-300); -} -tabletd.cpu-info { - border: 1pxsolidvar (--gray-300); -} -table.disk_status { - white-space: nowrap; -} -table.disk_statustdspan { - margin-left: 10px; -} -table.disk_statustheadtr:first-childtd { - font-size: 1.1rem; - text-transform: uppercase; - letter-spacing: 1px; - background-color: var(--gray-200); -} -table.disk_statustheadtr:last-child { - border-bottom: 1pxsolidvar (--gray-300); -} -table.disk_statustr > td { - width: 10%; - padding-left: 12px; - padding-right: 0; - white-space: nowrap; -} -table.disk_statustr > td + td { - width: auto; -} -table.disk_statustr > td + td + td { - width: 6.5%; - text-align: center; - padding-left: 4px; - padding-right: 8px; -} -table.disk_statustr > td + td + td + td { - text-align: right; - padding-left: 0; - padding-right: 12px; -} -table.disk_statustbodytr:nth-child(even) { - background-color: var(--background-color); -} -table.disk_statustbodytr:not(.tr_last):hovertd { - background-color: rgba(var(--gray-900), 0.1); -} -table.disk_status.statstr > td + td { - text-align: left; - padding-left: 0; - padding-right: 12px; -} -table.array_statustd { - padding: 4px0; -} -table.array_statustr > td { - text-align: left; - white-space: nowrap; - padding-left: 12px; - width: 30%; -} -table.array_statustr > td + td { - padding-left: 2px; - width: 20%; -} -table.array_statustr > td + td + td { - width: auto; -} -table.array_statustd.line { - border-top: 1pxsolidvar (--gray-300); -} -table.array_status.noshift { - margin-top: 0; -} -table.settings { - margin: 0; - padding: 0; - background-color: transparent; -} -table.settingstd:first-child { - width: 35%; - padding: 12px; -} -table.settingstd + td { - padding-left: 8px; -} -table.settings.shifted { - padding: 0; - margin-left: 0; - margin-top: 0; -} -table.settings.shiftedtd { - padding-left: 0; -} -table.access_list { - border-spacing: 0; - margin-top: 10px; - border: none; -} -table.access_listtr:first-childtd { - font-size: 1.1rem; - text-transform: uppercase; - letter-spacing: 1px; - vertical-align: middle; - text-align: left; - border: 1pxsolidvar (--gray-300); - border-bottom: 1pxsolidvar (--gray-300); - background-color: var(--gray-200); -} -table.access_listtd:first-child { - font-weight: normal; - width: 35%; - padding-left: 12px; -} -table.access_listtr:first-childtd:first-child { - font-weight: normal; -} -table.access_listtr > td + td { - white-space: nowrap; -} -table.share_status { - white-space: nowrap; -} -table.share_statustheadtr:first-childtd { - font-size: 1.1rem; - text-transform: uppercase; - letter-spacing: 1px; - background-color: var(--gray-300); -} -table.share_statustr > td { - text-align: left; - padding-left: 12px; -} -table.share_statustr > td + td { - padding-left: 0; -} -table.share_statustbodytr:nth-child(even) { - background-color: var(--background-color); -} -table.share_status:not(.dashboard)tbodytr:hovertd { - background-color: rgba(var(--gray-900), 0.1); -} -table.share_statustbodytr.alert { - color: var(--red-600); -} -table.share_statustbodytr.warn { - color: var(--orange-300); -} -table.share_status.fixedtr > td + td { - min-width: 39px; - font-size: 1.1rem; - text-align: center; - padding: 0; -} -table.share_status.table { - margin-top: 36px; -} -table.share_status.tabletr > td { - width: 50%; -} -table.share_status.dashboard { - margin: 0; - border: 1pxsolidvar (--gray-200); -} -table.share_status.dashboardtbody { - border: 1pxsolidvar (--gray-200); -} -table.share_status.dashboardtr:first-child > td { - height: 3.6rem; - padding-top: 12px; - font-size: 1.6rem; - font-weight: bold; - letter-spacing: 1.8px; - text-transform: none; - vertical-align: top; -} -table.share_status.dashboardtr:nth-child(even) { - background-color: transparent; -} -table.share_status.dashboardtr:last-child > td { - padding-bottom: 20px; -} -table.share_status.dashboardtr.last > td { - padding-bottom: 20px; -} -table.share_status.dashboardtr.headertd { - padding-bottom: 10px; -} -table.share_status.dashboardtd { - padding: 3px10px; -} -table.share_status.dashboardtd.vpn { - font-size: 1.1rem; - font-weight: bold; - text-transform: uppercase; - letter-spacing: 1px; -} -table.share_status.dashboardtddiv.section { - display: inline-block; - vertical-align: top; - margin-left: 4px; - font-size: 1.2rem; - font-weight: bold; - text-transform: uppercase; - letter-spacing: 1px; -} -table.share_status.dashboardtddiv.sectionspan { - font-weight: normal; - text-transform: none; - letter-spacing: 0; - white-space: normal; -} -table.share_status.dashboardtdspan.info { - float: right; - margin-right: 20px; - font-size: 1.2rem; - font-weight: normal; - text-transform: none; - letter-spacing: 0; -} -table.share_status.dashboardtdspan.info.title { - font-weight: bold; -} -table.share_status.dashboardtdspan.load { - display: inline-block; - width: 38px; - text-align: right; -} -table.share_status.dashboardtdspan.finish { - float: right; - margin-right: 24px; -} -table.share_status.dashboardi.control { - float: right; - font-size: 1.4rem !important; - margin: 03px00; - cursor: pointer; - background-color: rgba(var(--gray-900), 0.1); - padding: 2px; -} -[name="arrayOps"] { - margin-top: 12px; -} -span.error { - color: var(--red-600); - background-color: var(--red-300); - display: block; - width: 100%; -} -span.warn { - color: var(--orange-300); - background-color: var(--yellow-200); - display: block; - width: 100%; -} -span.system { - color: var(--blue-700); - background-color: var(--blue-300); - display: block; - width: 100%; -} -span.array { - color: var(--green-800); - background-color: var(--green-100); - display: block; - width: 100%; -} -span.login { - color: var(--orange-900); - background-color: var(--red-100); - display: block; - width: 100%; -} -span.lite { - background-color: var(--background-color); -} -span.label { - font-size: 1.2rem; - padding: 2px02px6px; - margin-right: 6px; - border-radius: 4px; - display: inline; - width: auto; - vertical-align: middle; -} -span.cpu-speed { - display: block; - color: var(--blue-900); -} -span.status { - float: right; - font-size: 1.4rem; - margin-top: 30px; - padding-right: 8px; - letter-spacing: 1.8px; -} -span.status.vhshift { - margin-top: 0; - margin-right: -9px; -} -span.status.vshift { - margin-top: -16px; -} -span.status.hshift { - margin-right: -20px; -} -span.diskinfo { - float: left; - clear: both; - margin-top: 5px; - padding-left: 10px; -} -span.bitstream { - font-family: bitstream; - font-size: 1.1rem; -} -span.ucfirst { - text-transform: capitalize; -} -span.strong { - font-weight: bold; -} -span.big { - font-size: 1.4rem; -} -span.small { - font-size: 1.2rem; -} -span.outer { - margin-bottom: 20px; - margin-right: 0; -} -span.outer.solid { - background-color: var(--background-color); -} -span.hand { - cursor: pointer; -} +.warning {color: var(--orange-300);} +.blue-text {color: var(--blue-800);} +.grey-text {color: var(--gray-500);} +.green-orb {color: var(--green-200);} +.grey-orb {color: var(--gray-300);} +.blue-orb {color: var(--blue-700);} +.yellow-orb {color: var(--orange-200);} +.red-orb {color: var(--red-500);} +.usage-bar {float: left;height: 2rem;line-height: 2rem;width: 14rem;padding: 1px 1px 1px 2px;margin: 8px 12px;border-radius: 3px;background-color: var(--gray-500);box-shadow: 0 1px 0 var(--gray-400), inset 0 1px 0 var(--gray-600);} +.usage-bar > span {display: block;height: 100%;text-align: right;border-radius: 2px;color: var(--gray-100);background-color: var(--gray-500);box-shadow: inset 0 1px 0 rgba(var(--gray-000), 0.5);} +.usage-disk {position: relative;height: 1.8rem;background-color: var(--gray-200);margin: 0;} +.usage-disk > span:first-child {position: absolute;left: 0;margin: 0 !important;height: 1.8rem;background-color: var(--gray-300);} +.usage-disk > span:last-child {position: relative;padding-right: 4px;z-index: 1;} +.usage-disk.sys {height: 12px;margin: -15px 20px 0 44px;} +.usage-disk.sys > span:first-child {height: 12px;padding: 0;} +.usage-disk.sys.none {background-color: transparent;} +.usage-disk.mm {height: 3px;margin: 5px 20px 0 0;} +.usage-disk.mm > span:first-child {height: 3px;} +.notice {background: var(--yellow-100) url(../images/notice.png) no-repeat;background-position: 60px 50%;color: var(--text-color);font-size: 1.4rem;text-align: left;padding: 15px 0 15px 130px;display: block;height: 7rem;line-height: 7rem;vertical-align: middle;border-top: 2px solid var(--yellow-500);border-bottom: 2px solid var(--yellow-500);} +.notice.shift {margin-top: 160px;} +.greenbar {background: -webkit-gradient(linear,left top,right top,from(var(--green-900)),to(var(--green-500)));background: linear-gradient(90deg, var(--green-900) 0, var(--green-500));} +.orangebar {background: -webkit-gradient(linear,left top,right top,from(var(--orange-400)),to(var(--orange-400)));background: linear-gradient(90deg, var(--orange-400) 0, var(--orange-400));} +.redbar {background: -webkit-gradient(linear,left top,right top,from(var(--red-900)),to(var(--red-700)));background: linear-gradient(90deg, var(--red-900) 0, var(--red-700));} +.graybar {background: -webkit-gradient(linear,left top,right top,from(var(--gray-400)),to(var(--gray-200)));background: linear-gradient(90deg, var(--gray-400) 0, var(--gray-200));} +table {border-collapse: collapse;border-spacing: 0;border-style: hidden;margin: -30px 0 0 0;width: 100%;background-color: var(--background-color);} +table thead td {padding: 7px 0;} +table tbody td {padding: 5px 0;} +table tbody tr.tr_last {background-color: var(--background-color);border-top: 1px solid var(--gray-300);} +table td.cpu-info {border: 1px solid var(--gray-300);} +table.disk_status {white-space: nowrap;} +table.disk_status td span {margin-left: 10px;} +table.disk_status thead tr:first-child td {font-size: 1.1rem;text-transform: uppercase;letter-spacing: 1px;background-color: var(--gray-200);} +table.disk_status thead tr:last-child {border-bottom: 1px solid var(--gray-300);} +table.disk_status tr > td {width: 10%;padding-left: 12px;padding-right: 0;white-space: nowrap;} +table.disk_status tr > td + td {width: auto;} +table.disk_status tr > td + td + td {width: 6.5%;text-align: center;padding-left: 4px;padding-right: 8px;} +table.disk_status tr > td + td + td + td {text-align: right;padding-left: 0;padding-right: 12px;} +table.disk_status tbody tr:nth-child(even) {background-color: var(--background-color);} +table.disk_status tbody tr:not(.tr_last):hover td {background-color: rgba(var(--gray-900), 0.1);} +table.disk_status.stats tr > td + td {text-align: left;padding-left: 0;padding-right: 12px;} +table.array_status td {padding: 4px 0;} +table.array_status tr > td {text-align: left;white-space: nowrap;padding-left: 12px;width: 30%;} +table.array_status tr > td + td {padding-left: 2px;width: 20%;} +table.array_status tr > td + td + td {width: auto;} +table.array_status td.line {border-top: 1px solid var(--gray-300);} +table.array_status.noshift {margin-top: 0;} +table.settings {margin: 0;padding: 0;background-color: transparent;} +table.settings td:first-child {width: 35%;padding: 12px;} +table.settings td + td {padding-left: 8px;} +table.settings.shifted {padding: 0;margin-left: 0;margin-top: 0;} +table.settings.shifted td {padding-left: 0;} +table.access_list {border-spacing: 0;margin-top: 10px;border: none;} +table.access_list tr:first-child td {font-size: 1.1rem;text-transform: uppercase;letter-spacing: 1px;vertical-align: middle;text-align: left;border: 1px solid var(--gray-300);border-bottom: 1px solid var(--gray-300);background-color: var(--gray-200);} +table.access_list td:first-child {font-weight: normal;width: 35%;padding-left: 12px;} +table.access_list tr:first-child td:first-child {font-weight: normal;} +table.access_list tr > td + td {white-space: nowrap;} +table.share_status {white-space: nowrap;} +table.share_status thead tr:first-child td {font-size: 1.1rem;text-transform: uppercase;letter-spacing: 1px;background-color: var(--gray-300);} +table.share_status tr > td {text-align: left;padding-left: 12px;} +table.share_status tr > td + td {padding-left: 0;} +table.share_status tbody tr:nth-child(even) {background-color: var(--background-color);} +table.share_status:not(.dashboard) tbody tr:hover td {background-color: rgba(var(--gray-900), 0.1);} +table.share_status tbody tr.alert {color: var(--red-600);} +table.share_status tbody tr.warn {color: var(--orange-300);} +table.share_status.fixed tr > td + td {min-width: 39px;font-size: 1.1rem;text-align: center;padding: 0;} +table.share_status.table {margin-top: 36px;} +table.share_status.table tr > td {width: 50%;} +table.share_status.dashboard {margin: 0;border: 1px solid var(--gray-200);} +table.share_status.dashboard tbody {border: 1px solid var(--gray-200);} +table.share_status.dashboard tr:first-child > td {height: 3.6rem;padding-top: 12px;font-size: 1.6rem;font-weight: bold;letter-spacing: 1.8px;text-transform: none;vertical-align: top;} +table.share_status.dashboard tr:nth-child(even) {background-color: transparent;} +table.share_status.dashboard tr:last-child > td {padding-bottom: 20px;} +table.share_status.dashboard tr.last > td {padding-bottom: 20px;} +table.share_status.dashboard tr.header td {padding-bottom: 10px;} +table.share_status.dashboard td {padding: 3px 10px;} +table.share_status.dashboard td.vpn {font-size: 1.1rem;font-weight: bold;text-transform: uppercase;letter-spacing: 1px;} +table.share_status.dashboard td div.section {display: inline-block;vertical-align: top;margin-left: 4px;font-size: 1.2rem;font-weight: bold;text-transform: uppercase;letter-spacing: 1px;} +table.share_status.dashboard td div.section span {font-weight: normal;text-transform: none;letter-spacing: 0;white-space: normal;} +table.share_status.dashboard td span.info {float: right;margin-right: 20px;font-size: 1.2rem;font-weight: normal;text-transform: none;letter-spacing: 0;} +table.share_status.dashboard td span.info.title {font-weight: bold;} +table.share_status.dashboard td span.load {display: inline-block;width: 38px;text-align: right;} +table.share_status.dashboard td span.finish {float: right;margin-right: 24px;} +table.share_status.dashboard i.control {float: right;font-size: 1.4rem !important;margin: 0 3px 0 0;cursor: pointer;background-color: rgba(var(--gray-900), 0.1);padding: 2px;} +[name="arrayOps"] {margin-top: 12px;} +span.error {color: var(--red-600);background-color: var(--red-300);display: block;width: 100%;} +span.warn {color: var(--orange-300);background-color: var(--yellow-200);display: block;width: 100%;} +span.system {color: var(--blue-700);background-color: var(--blue-300);display: block;width: 100%;} +span.array {color: var(--green-800);background-color: var(--green-100);display: block;width: 100%;} +span.login {color: var(--orange-900);background-color: var(--red-100);display: block;width: 100%;} +span.lite {background-color: var(--background-color);} +span.label {font-size: 1.2rem;padding: 2px 0 2px 6px;margin-right: 6px;border-radius: 4px;display: inline;width: auto;vertical-align: middle;} +span.cpu-speed {display: block;color: var(--blue-900);} +span.status {float: right;font-size: 1.4rem;margin-top: 30px;padding-right: 8px;letter-spacing: 1.8px;} +span.status.vhshift {margin-top: 0;margin-right: -9px;} +span.status.vshift {margin-top: -16px;} +span.status.hshift {margin-right: -20px;} +span.diskinfo {float: left;clear: both;margin-top: 5px;padding-left: 10px;} +span.bitstream {font-family: bitstream;font-size: 1.1rem;} +span.ucfirst {text-transform: capitalize;} +span.strong {font-weight: bold;} +span.big {font-size: 1.4rem;} +span.small {font-size: 1.2rem;} +span.outer {margin-bottom: 20px;margin-right: 0;} +span.outer.solid {background-color: var(--background-color);} +span.hand {cursor: pointer;} span.outer.started > img, -span.outer.started > i.img { - opacity: 1; -} +span.outer.started > i.img {opacity: 1;} span.outer.stopped > img, -span.outer.stopped > i.img { - opacity: 0.3; -} +span.outer.stopped > i.img {opacity: 0.3;} span.outer.paused > img, -span.outer.paused > i.img { - opacity: 0.6; -} -span.inner { - display: inline-block; - vertical-align: top; -} -span.state { - font-size: 1.1rem; - margin-left: 7px; -} -i.padlock { - margin-right: 8px; - cursor: default; - vertical-align: middle; -} -i.nolock { - visibility: hidden; - margin-right: 8px; - vertical-align: middle; -} -i.lock { - margin-left: 8px; - cursor: default; - vertical-align: middle; -} -i.orb { - font-size: 1.1rem; - margin: 08px03px; -} +span.outer.paused > i.img {opacity: 0.6;} +span.inner {display: inline-block;vertical-align: top;} +span.state {font-size: 1.1rem;margin-left: 7px;} +i.padlock {margin-right: 8px;cursor: default;vertical-align: middle;} +i.nolock {visibility: hidden;margin-right: 8px;vertical-align: middle;} +i.lock {margin-left: 8px;cursor: default;vertical-align: middle;} +i.orb {font-size: 1.1rem;margin: 0 8px 0 3px;} img.img, -i.img { - width: 32px; - height: 32px; - margin-right: 10px; -} -img.icon { - margin: -3px4px00; -} -img.list { - width: auto; - max-width: 32px; - height: 32px; -} -i.list { - font-size: 32px; -} -a.list { - text-decoration: none; - color: inherit; -} -div.content { - position: absolute; - top: 0; - left: 0; - width: 100%; - padding-bottom: 30px; - z-index: -1; - clear: both; -} -div.content.shift { - margin-top: 1px; -} -label + .content { - margin-top: 86px; -} -div.tabs { - position: relative; - margin: 130px000; -} -div.tab { - float: left; - margin-top: 30px; -} -div.tabinput[id^="tab"] { - display: none; -} -div.tab[type="radio"] + label:hover { - background-color: transparent; - border: 1pxsolidvar (--orange-500); - border-bottom: none; - cursor: pointer; - opacity: 1; -} -div.tab[type="radio"]:checked + label { - cursor: default; - background-color: transparent; - border: 1pxsolidvar (--orange-500); - border-bottom: none; - opacity: 1; -} -div.tab[type="radio"] + label ~ .content { - display: none; -} -div.tab[type="radio"]:checked + label ~ .content { - display: inline; -} -div.tab[type="radio"] + label { - position: relative; - font-size: 1.4rem; - letter-spacing: 1.8px; - padding: 4px10px; - margin-right: 2px; - border-top-left-radius: 6px; - border-top-right-radius: 6px; - border: 1pxsolidvar (--gray-400); - border-bottom: none; - background-color: var(--gray-200); - opacity: 0.5; -} -div.tab[type="radio"] + labelimg { - padding-right: 4px; -} -div.Panel { - text-align: center; - float: left; - margin: 030px30px12px; - height: 8rem; -} -div.Panela { - text-decoration: none; -} -div.Panelspan { - height: 42px; - display: block; -} -div.Panel:hover.PanelText { - text-decoration: underline; -} -div.Panelimg.PanelImg { - width: auto; - max-width: 32px; - height: 32px; -} -div.Paneli.PanelIcon { - font-size: 32px; - color: var(--text-color); -} -div.user-list { - float: left; - padding: 10px; - margin-right: 10px; - margin-bottom: 24px; - border: 1pxsolidvar (--gray-300); - border-radius: 5px; - line-height: 2rem; - height: 10rem; - width: 10rem; - background-color: var(--gray-200); -} -div.user-listimg { - width: auto; - max-width: 48px; - height: 48px; - margin-bottom: 16px; -} -div.up { - margin-top: -30px; - border: 1pxsolidvar (--gray-200); - padding: 4px6px; - overflow: auto; -} -div.spinner { - margin: 48pxauto; - text-align: center; -} -div.spinner.fixed { - display: none; - position: fixed; - top: 50%; - left: 50%; - margin-top: -16px; - margin-left: -64px; - z-index: 10000; -} -div.spinner.unraid_mark { - height: 64px; -} -div.spinner.unraid_mark_2, -div.unraid_mark_4 { - animation: mark_21.5seaseinfinite; -} -div.spinner.unraid_mark_3 { - animation: mark_31.5seaseinfinite; -} -div.spinner.unraid_mark_6, -div.unraid_mark_8 { - animation: mark_61.5seaseinfinite; -} -div.spinner.unraid_mark_7 { - animation: mark_71.5seaseinfinite; -} -div.domain { - margin-top: -20px; -} -@keyframesmark_2 { - 50% { - transform: translateY(-40px); - } - 100% { - transform: translateY(0px); - } -} -@keyframesmark_3 { - 50% { - transform: translateY(-62px); - } - 100% { - transform: translateY(0px); - } -} -@keyframesmark_6 { - 50% { - transform: translateY(40px); - } - 100% { - transform: translateY(0px); - } -} -@keyframesmark_7 { - 50% { - transform: translateY(62px); - } - 100% { - transform: translateY(0px); - } -} -pre.up { - margin-top: -30px; -} -pre { - border: 1pxsolidvar (--gray-300); - font-family: bitstream; - font-size: 1.3rem; - line-height: 1.8rem; - padding: 4px6px; - overflow: auto; -} -iframe#progressFrame { - position: fixed; - bottom: 32px; - left: 0; - margin: 0; - padding: 8px8px08px; - width: 100%; - height: 1.2rem; - line-height: 1.2rem; - border-style: none; - overflow: hidden; - font-family: bitstream; - font-size: 1.1rem; - color: var(--gray-500); - white-space: nowrap; - z-index: -10; -} -dl { - margin: 0; - padding-left: 12px; - line-height: 2.6rem; -} -dt { - clear: left; - float: left; - width: 35%; - font-weight: normal; -} -dd { - margin-bottom: 12px; - white-space: nowrap; -} -ddp { - margin: 004px0; -} -ddblockquote { - padding-left: 0; -} -blockquote { - width: 90%; - margin: 10pxauto; - text-align: left; - padding: 4px20px; - border-top: 2pxsolidvar (--blue-200); - border-bottom: 2pxsolidvar (--blue-200); - color: var(--gray-800); - background-color: var(--blue-100); -} -blockquote.ontop { - margin-top: -20px; - margin-bottom: 46px; -} -blockquotea { - color: var(--orange-500); - font-weight: 600; -} -blockquotea:hover, -blockquotea:focus { - color: var(--orange-800); -} -label.checkbox { - display: block; - position: relative; - padding-left: 28px; - margin: 3px0; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -label.checkboxinput { - position: absolute; - opacity: 0; - cursor: pointer; -} -span.checkmark { - position: absolute; - top: 0; - left: 6px; - height: 14px; - width: 14px; - background-color: var(--gray-200); - border-radius: 100%; -} -label.checkbox:hoverinput ~ .checkmark { - background-color: var(--gray-300); -} -label.checkboxinput:checked ~ .checkmark { - background-color: var(--orange-500); -} -label.checkboxinput:disabled ~ .checkmark { - opacity: 0.5; -} -a.bannerDismiss { - float: right; - cursor: pointer; - text-decoration: none; - margin-right: 1rem; -} -.bannerDismiss::before { - content: "\e92f"; - font-family: Unraid; - color: var(--orange-300); -} -a.bannerInfo { - cursor: pointer; - text-decoration: none; -} -.bannerInfo::before { - content: "\f05a"; - font-family: fontAwesome; - color: var(--orange-300); -} -::-webkit-scrollbar { - width: 10px; - height: 10px; - background: transparent; -} -::-webkit-scrollbar-thumb { - background: var(--gray-400); - border-radius: 10px; -} -::-webkit-scrollbar-corner { - background: var(--gray-400); - border-radius: 10px; -} -::-webkit-scrollbar-thumb:hover { - background: var(--gray-500); -} +i.img {width: 32px;height: 32px;margin-right: 10px;} +img.icon {margin: -3px 4px 0 0;} +img.list {width: auto;max-width: 32px;height: 32px;} +i.list {font-size: 32px;} +a.list {text-decoration: none;color: inherit;} +div.content {position: absolute;top: 0;left: 0;width: 100%;padding-bottom: 30px;z-index: -1;clear: both;} +div.content.shift {margin-top: 1px;} +label + .content {margin-top: 86px;} +div.tabs {position: relative;margin: 130px 0 0 0;} +div.tab {float: left;margin-top: 30px;} +div.tab input[id^="tab"] {display: none;} +div.tab [type="radio"] + label:hover {background-color: transparent;border: 1px solid var(--orange-500);border-bottom: none;cursor: pointer;opacity: 1;} +div.tab [type="radio"]:checked + label {cursor: default;background-color: transparent;border: 1px solid var(--orange-500);border-bottom: none;opacity: 1;} +div.tab [type="radio"] + label ~ .content {display: none;} +div.tab [type="radio"]:checked + label ~ .content {display: inline;} +div.tab [type="radio"] + label {position: relative;font-size: 1.4rem;letter-spacing: 1.8px;padding: 4px 10px;margin-right: 2px;border-top-left-radius: 6px;border-top-right-radius: 6px;border: 1px solid var(--gray-400);border-bottom: none;background-color: var(--gray-200);opacity: 0.5;} +div.tab [type="radio"] + label img {padding-right: 4px;} +div.Panel {text-align: center;float: left;margin: 0 30px 30px 12px;height: 8rem;} +div.Panel a {text-decoration: none;} +div.Panel span {height: 42px;display: block;} +div.Panel:hover .PanelText {text-decoration: underline;} +div.Panel img.PanelImg {width: auto;max-width: 32px;height: 32px;} +div.Panel i.PanelIcon {font-size: 32px;color: var(--text-color);} +div.user-list {float: left;padding: 10px;margin-right: 10px;margin-bottom: 24px;border: 1px solid var(--gray-300);border-radius: 5px;line-height: 2rem;height: 10rem;width: 10rem;background-color: var(--gray-200);} +div.user-list img {width: auto;max-width: 48px;height: 48px;margin-bottom: 16px;} +div.up {margin-top: -30px;border: 1px solid var(--gray-200);padding: 4px 6px;overflow: auto;} +div.spinner {margin: 48px auto;text-align: center;} +div.spinner.fixed {display: none;position: fixed;top: 50%;left: 50%;margin-top: -16px;margin-left: -64px;z-index: 10000;} +div.spinner .unraid_mark {height: 64px;} +div.spinner .unraid_mark_2, +div .unraid_mark_4 {animation: mark_2 1.5s ease infinite;} +div.spinner .unraid_mark_3 {animation: mark_3 1.5s ease infinite;} +div.spinner .unraid_mark_6, +div .unraid_mark_8 {animation: mark_6 1.5s ease infinite;} +div.spinner .unraid_mark_7 {animation: mark_7 1.5s ease infinite;} +div.domain {margin-top: -20px;} +@keyframes mark_2 {50% {transform: translateY(-40px);}100% {transform: translateY(0px);}} +@keyframes mark_3 {50% {transform: translateY(-62px);}100% {transform: translateY(0px);}} +@keyframes mark_6 {50% {transform: translateY(40px);}100% {transform: translateY(0px);}} +@keyframes mark_7 {50% {transform: translateY(62px);}100% {transform: translateY(0px);}} +pre.up {margin-top: -30px;} +pre {border: 1px solid var(--gray-300);font-family: bitstream;font-size: 1.3rem;line-height: 1.8rem;padding: 4px 6px;overflow: auto;} +iframe#progressFrame {position: fixed;bottom: 32px;left: 0;margin: 0;padding: 8px 8px 0 8px;width: 100%;height: 1.2rem;line-height: 1.2rem;border-style: none;overflow: hidden;font-family: bitstream;font-size: 1.1rem;color: var(--gray-500);white-space: nowrap;z-index: -10;} +dl {margin: 0;padding-left: 12px;line-height: 2.6rem;} +dt {clear: left;float: left;width: 35%;font-weight: normal;} +dd {margin-bottom: 12px;white-space: nowrap;} +dd p {margin: 0 0 4px 0;} +dd blockquote {padding-left: 0;} +blockquote {width: 90%;margin: 10px auto;text-align: left;padding: 4px 20px;border-top: 2px solid var(--blue-200);border-bottom: 2px solid var(--blue-200);color: var(--gray-800);background-color: var(--blue-100);} +blockquote.ontop {margin-top: -20px;margin-bottom: 46px;} +blockquote a {color: var(--orange-500);font-weight: 600;} +blockquote a:hover, +blockquote a:focus {color: var(--orange-800);} +label.checkbox {display: block;position: relative;padding-left: 28px;margin: 3px 0;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} +label.checkbox input {position: absolute;opacity: 0;cursor: pointer;} +span.checkmark {position: absolute;top: 0;left: 6px;height: 14px;width: 14px;background-color: var(--gray-200);border-radius: 100%;} +label.checkbox:hover input ~ .checkmark {background-color: var(--gray-300);} +label.checkbox input:checked ~ .checkmark {background-color: var(--orange-500);} +label.checkbox input:disabled ~ .checkmark {opacity: 0.5;} +a.bannerDismiss {float: right;cursor: pointer;text-decoration: none;margin-right: 1rem;} +.bannerDismiss::before {content: "\e92f";font-family: Unraid;color: var(--orange-300);} +a.bannerInfo {cursor: pointer;text-decoration: none;} +.bannerInfo::before {content: "\f05a";font-family: fontAwesome;color: var(--orange-300);} +::-webkit-scrollbar {width: 10px;height: 10px;background: transparent;} +::-webkit-scrollbar-thumb {background: var(--gray-400);border-radius: 10px;} +::-webkit-scrollbar-corner {background: var(--gray-400);border-radius: 10px;} +::-webkit-scrollbar-thumb:hover {background: var(--gray-500);} From 37f79d29a8284e8cab31b31f1a09e28c1da4207c Mon Sep 17 00:00:00 2001 From: Bailey Matthews Date: Sat, 9 Sep 2023 13:24:10 +0100 Subject: [PATCH 05/99] chore: format colour vars --- .../plugins/dynamix/styles/default-white.css | 54 ++++++++++++++++--- 1 file changed, 47 insertions(+), 7 deletions(-) diff --git a/emhttp/plugins/dynamix/styles/default-white.css b/emhttp/plugins/dynamix/styles/default-white.css index d74557dd1..0c909201a 100644 --- a/emhttp/plugins/dynamix/styles/default-white.css +++ b/emhttp/plugins/dynamix/styles/default-white.css @@ -1,10 +1,50 @@ -:root {--gray-000: rgb(255, 255, 255); /* #ffffff */--gray-100: rgb(242, 242, 242); /* #f2f2f2 */--gray-200: rgb(211, 211, 211); /* #d3d3d3 #d9d9d9 #dcdcdc #d4d5d6 */--gray-300: rgb(204, 204, 204); /* gray #c0c0c0 #a8a8a8 */--gray-400: rgb(144, 144, 144); /* #909090 #989898 #a2a2a2 #949494 */--gray-500: rgb(128, 128, 128); /* #808080 #606060 #585858 */--gray-600: rgb(048, 048, 048); /* #303030 #202020 */--gray-700: rgb(064, 064, 064); /* #404040 */--gary-800: rgb(025, 025, 025); /* #191919 #2b2a29 */--gray-900: rgb(029, 027, 027); /* #1c1b1b */ ---orange-200: rgb(255, 153, 0); /* #ff9900 */--orange-300: rgb(230, 138, 0); /* #e68a00 */--orange-400: rgb(206, 124, 16); /* #ce7c10 */--orange-500: rgb(255, 140, 47); /* #ff8c2f */--orange-800: rgb(241, 90, 44); /* #f15a2c */--orange-900: rgb(214, 51, 1); /* #d63301 */ ---red-100: rgb(255, 221, 209); /* #ffddd1 */--red-300: rgb(255, 158, 158); /* #ff9e9e */--red-500: rgb(255, 51, 0); /* #ff3300 */--red-600: rgb(240, 0, 12); /* #f0000c */--red-700: rgb(222, 17, 0); /* #de1100 */--red-800: rgb(226, 40, 40); /* #e22828 */--red-900: rgb(148, 28, 0); /* #941c00 */ ---green-100: rgb(223, 242, 191); /* #dff2bf */--green-200: rgb(51, 204, 51); /* #33cc33 */--green-500: rgb(23, 191, 11); /* #17bf0b */--green-800: rgb(79, 138, 16); /* #4f8a10 */--green-900: rgb(18, 122, 5); /* #127a05 */ ---blue-100: rgb(217, 237, 247); /* #d9edf7 */--blue-200: rgb(188, 232, 241); /* #bce8f1 */--blue-300: rgb(189, 229, 248); /* #bde5f8 */--blue-700: rgb(0, 153, 255); /* #0099ff */--blue-800: rgb(072, 109, 186); /* #486dba */--blue-900: rgb(59, 89, 152); /* #3b5998 */ ---yellow-100: rgb(255, 246, 191); /* #fff6bf */--yellow-200: rgb(254, 239, 179); /* #feefb3 */--yellow-500: rgb(255, 211, 36); /* #ffd324 */ ---text-color: var(--gray-900);--background-color: var(--gray-100);} +:root { + --gray-000: rgb(255, 255, 255); /* #ffffff */ + --gray-100: rgb(242, 242, 242); /* #f2f2f2 */ + --gray-200: rgb(211, 211, 211); /* #d3d3d3 #d9d9d9 #dcdcdc #d4d5d6 */ + --gray-300: rgb(204, 204, 204); /* gray #c0c0c0 #a8a8a8 */ + --gray-400: rgb(144, 144, 144); /* #909090 #989898 #a2a2a2 #949494 */ + --gray-500: rgb(128, 128, 128); /* #808080 #606060 #585858 */ + --gray-600: rgb(048, 048, 048); /* #303030 #202020 */ + --gray-700: rgb(064, 064, 064); /* #404040 */ + --gary-800: rgb(025, 025, 025); /* #191919 #2b2a29 */ + --gray-900: rgb(029, 027, 027); /* #1c1b1b */ + + --orange-200: rgb(255, 153, 0); /* #ff9900 */ + --orange-300: rgb(230, 138, 0); /* #e68a00 */ + --orange-400: rgb(206, 124, 16); /* #ce7c10 */ + --orange-500: rgb(255, 140, 47); /* #ff8c2f */ + --orange-800: rgb(241, 90, 44); /* #f15a2c */ + --orange-900: rgb(214, 51, 1); /* #d63301 */ + + --red-100: rgb(255, 221, 209); /* #ffddd1 */ + --red-300: rgb(255, 158, 158); /* #ff9e9e */ + --red-500: rgb(255, 51, 0); /* #ff3300 */ + --red-600: rgb(240, 0, 12); /* #f0000c */ + --red-700: rgb(222, 17, 0); /* #de1100 */ + --red-800: rgb(226, 40, 40); /* #e22828 */ + --red-900: rgb(148, 28, 0); /* #941c00 */ + + --green-100: rgb(223, 242, 191); /* #dff2bf */ + --green-200: rgb(51, 204, 51); /* #33cc33 */ + --green-500: rgb(23, 191, 11); /* #17bf0b */ + --green-800: rgb(79, 138, 16); /* #4f8a10 */ + --green-900: rgb(18, 122, 5); /* #127a05 */ + + --blue-100: rgb(217, 237, 247); /* #d9edf7 */ + --blue-200: rgb(188, 232, 241); /* #bce8f1 */ + --blue-300: rgb(189, 229, 248); /* #bde5f8 */ + --blue-700: rgb(0, 153, 255); /* #0099ff */ + --blue-800: rgb(072, 109, 186); /* #486dba */ + --blue-900: rgb(59, 89, 152); /* #3b5998 */ + + --yellow-100: rgb(255, 246, 191); /* #fff6bf */ + --yellow-200: rgb(254, 239, 179); /* #feefb3 */ + --yellow-500: rgb(255, 211, 36); /* #ffd324 */ + + --text-color: var(--gray-900); + --background-color: var(--gray-100); +} html {font-family: clear-sans;font-size: 62.5%;height: 100%;} body {font-size: 1.3rem;color: var(--text-color);background-color: var(--background-color);padding: 0;margin: 0;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} From 9df226699afe0d55b282451940a314e66d615d4a Mon Sep 17 00:00:00 2001 From: Bailey Matthews Date: Sat, 9 Sep 2023 13:24:48 +0100 Subject: [PATCH 06/99] chore: remove example file --- .../styles/default-white-formatted.css | 1534 --------------- .../plugins/dynamix/styles/default-white.css | 1696 ++++++++++++++--- 2 files changed, 1431 insertions(+), 1799 deletions(-) delete mode 100644 emhttp/plugins/dynamix/styles/default-white-formatted.css diff --git a/emhttp/plugins/dynamix/styles/default-white-formatted.css b/emhttp/plugins/dynamix/styles/default-white-formatted.css deleted file mode 100644 index e42a1b928..000000000 --- a/emhttp/plugins/dynamix/styles/default-white-formatted.css +++ /dev/null @@ -1,1534 +0,0 @@ -:root { - --gray-000: rgb(255, 255, 255); /* #ffffff */ - --gray-100: rgb(242, 242, 242); /* #f2f2f2 */ - --gray-200: rgb(211, 211, 211); /* #d3d3d3 #d9d9d9 #dcdcdc #d4d5d6 */ - --gray-300: rgb(204, 204, 204); /* gray #c0c0c0 #a8a8a8 */ - --gray-400: rgb(144, 144, 144); /* #909090 #989898 #a2a2a2 #949494 */ - --gray-500: rgb(128, 128, 128); /* #808080 #606060 #585858 */ - --gray-600: rgb(048, 048, 048); /* #303030 #202020 */ - --gray-700: rgb(064, 064, 064); /* #404040 */ - --gary-800: rgb(025, 025, 025); /* #191919 #2b2a29 */ - --gray-900: rgb(029, 027, 027); /* #1c1b1b */ - - --orange-200: rgb(255, 153, 0); /* #ff9900 */ - --orange-300: rgb(230, 138, 0); /* #e68a00 */ - --orange-400: rgb(206, 124, 16); /* #ce7c10 */ - --orange-500: rgb(255, 140, 47); /* #ff8c2f */ - --orange-800: rgb(241, 90, 44); /* #f15a2c */ - --orange-900: rgb(214, 51, 1); /* #d63301 */ - - --red-100: rgb(255, 221, 209); /* #ffddd1 */ - --red-300: rgb(255, 158, 158); /* #ff9e9e */ - --red-500: rgb(255, 51, 0); /* #ff3300 */ - --red-600: rgb(240, 0, 12); /* #f0000c */ - --red-700: rgb(222, 17, 0); /* #de1100 */ - --red-800: rgb(226, 40, 40); /* #e22828 */ - --red-900: rgb(148, 28, 0); /* #941c00 */ - - --green-100: rgb(223, 242, 191); /* #dff2bf */ - --green-200: rgb(51, 204, 51); /* #33cc33 */ - --green-500: rgb(23, 191, 11); /* #17bf0b */ - --green-800: rgb(79, 138, 16); /* #4f8a10 */ - --green-900: rgb(18, 122, 5); /* #127a05 */ - - --blue-100: rgb(217, 237, 247); /* #d9edf7 */ - --blue-200: rgb(188, 232, 241); /* #bce8f1 */ - --blue-300: rgb(189, 229, 248); /* #bde5f8 */ - --blue-700: rgb(0, 153, 255); /* #0099ff */ - --blue-800: rgb(072, 109, 186); /* #486dba */ - --blue-900: rgb(59, 89, 152); /* #3b5998 */ - - --yellow-100: rgb(255, 246, 191); /* #fff6bf */ - --yellow-200: rgb(254, 239, 179); /* #feefb3 */ - --yellow-500: rgb(255, 211, 36); /* #ffd324 */ - - --text-color: var(--gray-900); - --background-color: var(--gray-100); -} - -html { - font-family: clear-sans; - font-size: 62.5%; - height: 100%; -} -body { - font-size: 1.3rem; - color: var(--text-color); - background-color: var(--background-color); - padding: 0; - margin: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -@media (max-width: 1280px) { - #template { - min-width: 1260px; - max-width: 1260px; - margin: 0; - } -} -@media (min-width: 1281px) { - #template { - min-width: 1260px; - margin: 0 10px; - } -} -@media (min-width: 1921px) { - #template { - min-width: 1260px; - max-width: 1920px; - margin: 0 auto; - } -} -img { - border: none; - text-decoration: none; - vertical-align: middle; -} -p { - text-align: justify; -} -p.centered { - text-align: left; -} -p:empty { - display: none; -} -a:hover { - text-decoration: underline; -} -a { - color: var(--blue-800); - text-decoration: none; -} -a.none { - color: var(--text-color); -} -a.img { - text-decoration: none; - border: none; -} -a.info { - position: relative; -} -a.info span { - display: none; - white-space: nowrap; - font-variant: small-caps; - position: absolute; - top: 16px; - left: 12px; - line-height: 2rem; - color: var(--gray-100); - padding: 5px 8px; - border: 1px solid rgba(var(--gray-000), 0.25); - border-radius: 3px; - background-color: rgba(var(--gray-800), 0.95); - box-shadow: 0 0 3px var(--gray-700); -} -a.info:hover span { - display: block; - z-index: 1; -} -a.nohand { - cursor: default; -} -a.hand { - cursor: pointer; - text-decoration: none; -} -a.static { - cursor: default; - color: var(--gray-400); - text-decoration: none; -} -a.view { - display: inline-block; - width: 20px; -} -i.spacing { - margin-left: -6px; -} -i.icon { - font-size: 1.6rem; - margin-right: 4px; - vertical-align: middle; -} -i.title { - margin-right: 8px; -} -i.control { - cursor: pointer; - color: var(--gray-400); - font-size: 1.8rem; -} -hr { - border: none; - height: 1px !important; - color: var(--gray-300); - background-color: var(--gray-300); -} -input[type="text"], -input[type="password"], -input[type="number"], -input[type="url"], -input[type="email"], -input[type="date"], -input[type="file"], -textarea, -.textarea { - font-family: clear-sans; - font-size: 1.3rem; - background-color: transparent; - border: none; - border-bottom: 1px solid var(--gray-900); - padding: 4px 0; - text-indent: 0; - min-height: 2rem; - line-height: 2rem; - outline: none; - width: 300px; - margin: 0 20px 0 0; - box-shadow: none; - border-radius: 0; - color: var(--text-color); -} -input[type="button"], -input[type="reset"], -input[type="submit"], -button, -button[type="button"], -a.button { - font-family: clear-sans; - font-size: 1.1rem; - font-weight: bold; - letter-spacing: 1.8px; - text-transform: uppercase; - min-width: 86px; - margin: 10px 12px 10px 0; - padding: 8px; - text-align: center; - text-decoration: none; - white-space: nowrap; - cursor: pointer; - outline: none; - border-radius: 4px; - border: none; - color: var(--orange-500); - background: -webkit-gradient( - linear, - left top, - right top, - from(var(--red-800)), - to(var(--orange-500)) - ) - 0 0 no-repeat, - -webkit-gradient( - linear, - left top, - right top, - from(var(--red-800)), - to(var(--orange-500)) - ) 0 100% no-repeat, - -webkit-gradient( - linear, - left bottom, - left top, - from(var(--red-800)), - to(var(--red-800)) - ) 0 100% no-repeat, - -webkit-gradient( - linear, - left bottom, - left top, - from(var(--orange-500)), - to(var(--orange-500)) - ) 100% 100% no-repeat; - background: linear-gradient(90deg, var(--red-800) 0, var(--orange-500)) 0 0 - no-repeat, - linear-gradient(90deg, var(--red-800) 0, var(--orange-500)) 0 100% - no-repeat, - linear-gradient(0deg, var(--red-800) 0, var(--red-800)) 0 100% no-repeat, - linear-gradient(0deg, var(--orange-500) 0, var(--orange-500)) 100% 100% - no-repeat; - background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%; -} -input[type="checkbox"] { - vertical-align: middle; - margin-right: 6px; -} -input[type="number"]::-webkit-outer-spin-button, -input[type="number"]::-webkit-inner-spin-button { - -webkit-appearance: none; -} -input[type="number"] { - -moz-appearance: textfield; -} -input:focus[type="text"], -input:focus[type="password"], -input:focus[type="number"], -input:focus[type="url"], -input:focus[type="email"], -input:focus[type="file"], -textarea:focus { - background-color: var(--gray-300); - outline: 0; -} -input:hover[type="button"], -input:hover[type="reset"], -input:hover[type="submit"], -button:hover, -button:hover[type="button"], -a.button:hover { - color: var(--gray-100); - background: -webkit-gradient( - linear, - left top, - right top, - from(var(--red-800)), - to(var(--orange-500)) - ); - background: linear-gradient(90deg, var(--red-800) 0, var(--orange-500)); -} -input[disabled], -textarea[disabled] { - color: var(--text-color); - border-bottom-color: var(--gray-400); - opacity: 0.5; - cursor: default; -} -input[type="button"][disabled], -input[type="reset"][disabled], -input[type="submit"][disabled], -button[disabled], -button[type="button"][disabled], -a.button[disabled] input:hover[type="button"][disabled], -input:hover[type="reset"][disabled], -input:hover[type="submit"][disabled], -button:hover[disabled], -button:hover[type="button"][disabled], -a.button:hover[disabled] input:active[type="button"][disabled], -input:active[type="reset"][disabled], -input:active[type="submit"][disabled], -button:active[disabled], -button:active[type="button"][disabled], -a.button:active[disabled] { - cursor: default; - color: var(--gray-500); - background: -webkit-gradient( - linear, - left top, - right top, - from(var(--gray-700)), - to(var(--gray-500)) - ) - 0 0 no-repeat, - -webkit-gradient( - linear, - left top, - right top, - from(var(--gray-700)), - to(var(--gray-500)) - ) 0 100% no-repeat, - -webkit-gradient( - linear, - left bottom, - left top, - from(var(--gray-700)), - to(var(--gray-700)) - ) 0 100% no-repeat, - -webkit-gradient( - linear, - left bottom, - left top, - from(var(--gray-500)), - to(var(--gray-500)) - ) 100% 100% no-repeat; - background: linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 0 - no-repeat, - linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 100% - no-repeat, - linear-gradient(0deg, var(--gray-700) 0, var(--gray-700)) 0 100% - no-repeat, - linear-gradient(0deg, var(--gray-500) 0, var(--gray-500)) 100% 100% - no-repeat; - background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%; -} -input::-webkit-input-placeholder { - color: var(--blue-800); -} -select { - -webkit-appearance: none; - font-family: clear-sans; - font-size: 1.3rem; - min-width: 166px; - max-width: 300px; - padding: 5px 8px 5px 0; - text-indent: 0; - margin: 0 10px 0 0; - border: none; - border-bottom: 1px solid var(--gray-900); - box-shadow: none; - border-radius: 0; - color: var(--text-color); - background-color: transparent; - background-image: linear-gradient( - 66.6deg, - transparent 60%, - var(--gray-900) 40% - ), - linear-gradient(113.4deg, var(--gray-900) 40%, transparent 60%); - background-position: calc(100% - 4px), 100%; - background-size: 4px 6px, 4px 6px; - background-repeat: no-repeat; - outline: none; - display: inline-block; - cursor: pointer; -} -select option { - color: var(--text-color); - background-color: var(--gray-300); -} -select:focus { - outline: 0; -} -select[disabled] { - color: var(--text-color); - border-bottom-color: var(--gray-500); - opacity: 0.5; - cursor: default; -} -select[name="enter_view"] { - margin: 0; - padding: 0 12px 0 0; - border: none; - min-width: auto; -} -select[name="enter_share"] { - font-size: 1.1rem; - padding: 0; - border: none; - min-width: 40px; - float: right; - margin-top: 13px; - margin-right: 20px; -} -select[name="port_select"] { - border: none; - min-width: 54px; - padding-top: 0; - padding-bottom: 0; -} -select.narrow { - min-width: 76px; -} -select.auto { - min-width: auto; -} -select.slot { - min-width: 44rem; - max-width: 44rem; -} -input.narrow { - width: 166px; -} -input.trim { - width: 76px; - min-width: 76px; -} -textarea { - resize: none; -} -#header { - position: absolute; - top: 0; - left: 0; - width: 100%; - min-width: 1260px; - height: 91px; - z-index: 102; - margin: 0; - color: var(--gray-100); - background-color: var(--gray-900); - background-size: 100% 90px; - background-repeat: no-repeat; -} -#header .logo { - float: left; - margin-left: 10px; - color: var(--red-800); - text-align: center; -} -#header .logo svg { - width: 160px; - display: block; - margin: 25px 0 8px 0; -} -#header .block { - margin: 0; - float: right; - text-align: right; - background-color: rgba(var(--gray-900), 0.3); - padding: 10px 12px; -} -#header .text-left { - float: left; - text-align: right; - padding-right: 5px; - border-right: solid medium var(--orange-800); -} -#header .text-right { - float: right; - text-align: left; - padding-left: 5px; -} -#header .text-right a { - color: var(--gray-100); -} -#header .text-right #licensetype { - font-weight: bold; - font-style: italic; - margin-right: 4px; -} -div.title { - margin: 20px 0 32px 0; - padding: 8px 10px; - clear: both; - border-bottom: 1px solid var(--gray-300); - background-color: var(--gray-300); - letter-spacing: 1.8px; -} -div.title span.left { - font-size: 1.4rem; -} -div.title span.right { - font-size: 1.4rem; - padding-top: 2px; - padding-right: 10px; - float: right; -} -div.title span img { - padding-right: 4px; -} -div.title.shift { - margin-top: -30px; -} -#menu { - position: absolute; - top: 90px; - left: 0; - right: 0; - display: grid; - grid-template-columns: auto max-content; - z-index: 101; -} -.nav-tile { - height: 4rem; - line-height: 4rem; - padding: 0; - margin: 0; - font-size: 1.2rem; - letter-spacing: 1.8px; - background-color: var(--gray-900); - white-space: nowrap; - overflow-x: auto; - overflow-y: hidden; - scrollbar-width: thin; -} -.nav-tile::-webkit-scrollbar { - height: 8px; -} -.nav-tile.right { - text-align: right; -} -.nav-item, -.nav-user { - position: relative; - display: inline-block; - text-align: center; - margin: 0; -} -.nav-item a { - min-width: 0; -} -.nav-item a span { - display: none; -} -.nav-item .system { - vertical-align: middle; - padding-bottom: 2px; -} -.nav-item a { - color: var(--gray-100); - background-color: transparent; - text-transform: uppercase; - font-weight: bold; - display: block; - padding: 0 10px; -} -.nav-item a { - text-decoration: none; - text-decoration-skip-ink: auto; - -webkit-text-decoration-skip: objects; - -webkit-transition: all 0.25s ease-out; - transition: all 0.25s ease-out; -} -.nav-item:after, -.nav-user.show:after { - border-radius: 4px; - display: block; - background-color: transparent; - content: ""; - width: 32px; - height: 2px; - bottom: 8px; - position: absolute; - left: 50%; - margin-left: -16px; - -webkit-transition: all 0.25s ease-in-out; - transition: all 0.25s ease-in-out; - pointer-events: none; -} -.nav-item:focus:after, -.nav-item:hover:after, -.nav-user.show:hover:after { - background-color: var(--orange-800); -} -.nav-item.active:after { - background-color: var(--background-color); -} -.nav-user a { - color: var(--gray-100); - background-color: transparent; - display: block; - padding: 0 10px; -} -.nav-user .system { - vertical-align: middle; - padding-bottom: 2px; -} -#clear { - clear: both; -} -#footer { - position: fixed; - bottom: 0; - left: 0; - color: var(--gray-800); - background-color: var(--gray-200); - padding: 5px 0; - width: 100%; - height: 1.6rem; - line-height: 1.6rem; - text-align: center; - z-index: 10000; -} -#statusraid { - float: left; - padding-left: 10px; -} -#countdown { - margin: 0 auto; -} -#copyright { - font-family: bitstream; - font-size: 1.1rem; - float: right; - padding-right: 10px; -} -.green { - color: var(--green-800); - padding-left: 5px; - padding-right: 5px; -} -.red { - color: var(--red-600); - padding-left: 5px; - padding-right: 5px; -} -.orange { - color: var(--orange-300); - padding-left: 5px; - padding-right: 5px; -} -.blue { - color: var(--blue-800); - padding-left: 5px; - padding-right: 5px; -} -.green-text, -.passed { - color: var(--green-800); -} -.red-text, -.failed { - color: var(--red-600); -} -.orange-text, -.warning { - color: var(--orange-300); -} -.blue-text { - color: var(--blue-800); -} -.grey-text { - color: var(--gray-500); -} -.green-orb { - color: var(--green-200); -} -.grey-orb { - color: var(--gray-300); -} -.blue-orb { - color: var(--blue-700); -} -.yellow-orb { - color: var(--orange-200); -} -.red-orb { - color: var(--red-500); -} -.usage-bar { - float: left; - height: 2rem; - line-height: 2rem; - width: 14rem; - padding: 1px 1px 1px 2px; - margin: 8px 12px; - border-radius: 3px; - background-color: var(--gray-500); - box-shadow: 0 1px 0 var(--gray-400), inset 0 1px 0 var(--gray-600); -} -.usage-bar > span { - display: block; - height: 100%; - text-align: right; - border-radius: 2px; - color: var(--gray-100); - background-color: var(--gray-500); - box-shadow: inset 0 1px 0 rgba(var(--gray-000), 0.5); -} -.usage-disk { - position: relative; - height: 1.8rem; - background-color: var(--gray-200); - margin: 0; -} -.usage-disk > span:first-child { - position: absolute; - left: 0; - margin: 0 !important; - height: 1.8rem; - background-color: var(--gray-300); -} -.usage-disk > span:last-child { - position: relative; - padding-right: 4px; - z-index: 1; -} -.usage-disk.sys { - height: 12px; - margin: -15px 20px 0 44px; -} -.usage-disk.sys > span:first-child { - height: 12px; - padding: 0; -} -.usage-disk.sys.none { - background-color: transparent; -} -.usage-disk.mm { - height: 3px; - margin: 5px 20px 0 0; -} -.usage-disk.mm > span:first-child { - height: 3px; -} -.notice { - background: var(--yellow-100) url(../images/notice.png) no-repeat; - background-position: 60px 50%; - color: var(--text-color); - font-size: 1.4rem; - text-align: left; - padding: 15px 0 15px 130px; - display: block; - height: 7rem; - line-height: 7rem; - vertical-align: middle; - border-top: 2px solid var(--yellow-500); - border-bottom: 2px solid var(--yellow-500); -} -.notice.shift { - margin-top: 160px; -} -.greenbar { - background: -webkit-gradient( - linear, - left top, - right top, - from(var(--green-900)), - to(var(--green-500)) - ); - background: linear-gradient(90deg, var(--green-900) 0, var(--green-500)); -} -.orangebar { - background: -webkit-gradient( - linear, - left top, - right top, - from(var(--orange-400)), - to(var(--orange-400)) - ); - background: linear-gradient(90deg, var(--orange-400) 0, var(--orange-400)); -} -.redbar { - background: -webkit-gradient( - linear, - left top, - right top, - from(var(--red-900)), - to(var(--red-700)) - ); - background: linear-gradient(90deg, var(--red-900) 0, var(--red-700)); -} -.graybar { - background: -webkit-gradient( - linear, - left top, - right top, - from(var(--gray-400)), - to(var(--gray-200)) - ); - background: linear-gradient(90deg, var(--gray-400) 0, var(--gray-200)); -} -table { - border-collapse: collapse; - border-spacing: 0; - border-style: hidden; - margin: -30px 0 0 0; - width: 100%; - background-color: var(--background-color); -} -table thead td { - padding: 7px 0; -} -table tbody td { - padding: 5px 0; -} -table tbody tr.tr_last { - background-color: var(--background-color); - border-top: 1px solid var(--gray-300); -} -table td.cpu-info { - border: 1px solid var(--gray-300); -} -table.disk_status { - white-space: nowrap; -} -table.disk_status td span { - margin-left: 10px; -} -table.disk_status thead tr:first-child td { - font-size: 1.1rem; - text-transform: uppercase; - letter-spacing: 1px; - background-color: var(--gray-200); -} -table.disk_status thead tr:last-child { - border-bottom: 1px solid var(--gray-300); -} -table.disk_status tr > td { - width: 10%; - padding-left: 12px; - padding-right: 0; - white-space: nowrap; -} -table.disk_status tr > td + td { - width: auto; -} -table.disk_status tr > td + td + td { - width: 6.5%; - text-align: center; - padding-left: 4px; - padding-right: 8px; -} -table.disk_status tr > td + td + td + td { - text-align: right; - padding-left: 0; - padding-right: 12px; -} -table.disk_status tbody tr:nth-child(even) { - background-color: var(--background-color); -} -table.disk_status tbody tr:not(.tr_last):hover td { - background-color: rgba(var(--gray-900), 0.1); -} -table.disk_status.stats tr > td + td { - text-align: left; - padding-left: 0; - padding-right: 12px; -} -table.array_status td { - padding: 4px 0; -} -table.array_status tr > td { - text-align: left; - white-space: nowrap; - padding-left: 12px; - width: 30%; -} -table.array_status tr > td + td { - padding-left: 2px; - width: 20%; -} -table.array_status tr > td + td + td { - width: auto; -} -table.array_status td.line { - border-top: 1px solid var(--gray-300); -} -table.array_status.noshift { - margin-top: 0; -} -table.settings { - margin: 0; - padding: 0; - background-color: transparent; -} -table.settings td:first-child { - width: 35%; - padding: 12px; -} -table.settings td + td { - padding-left: 8px; -} -table.settings.shifted { - padding: 0; - margin-left: 0; - margin-top: 0; -} -table.settings.shifted td { - padding-left: 0; -} -table.access_list { - border-spacing: 0; - margin-top: 10px; - border: none; -} -table.access_list tr:first-child td { - font-size: 1.1rem; - text-transform: uppercase; - letter-spacing: 1px; - vertical-align: middle; - text-align: left; - border: 1px solid var(--gray-300); - border-bottom: 1px solid var(--gray-300); - background-color: var(--gray-200); -} -table.access_list td:first-child { - font-weight: normal; - width: 35%; - padding-left: 12px; -} -table.access_list tr:first-child td:first-child { - font-weight: normal; -} -table.access_list tr > td + td { - white-space: nowrap; -} -table.share_status { - white-space: nowrap; -} -table.share_status thead tr:first-child td { - font-size: 1.1rem; - text-transform: uppercase; - letter-spacing: 1px; - background-color: var(--gray-300); -} -table.share_status tr > td { - text-align: left; - padding-left: 12px; -} -table.share_status tr > td + td { - padding-left: 0; -} -table.share_status tbody tr:nth-child(even) { - background-color: var(--background-color); -} -table.share_status:not(.dashboard) tbody tr:hover td { - background-color: rgba(var(--gray-900), 0.1); -} -table.share_status tbody tr.alert { - color: var(--red-600); -} -table.share_status tbody tr.warn { - color: var(--orange-300); -} -table.share_status.fixed tr > td + td { - min-width: 39px; - font-size: 1.1rem; - text-align: center; - padding: 0; -} -table.share_status.table { - margin-top: 36px; -} -table.share_status.table tr > td { - width: 50%; -} -table.share_status.dashboard { - margin: 0; - border: 1px solid var(--gray-200); -} -table.share_status.dashboard tbody { - border: 1px solid var(--gray-200); -} -table.share_status.dashboard tr:first-child > td { - height: 3.6rem; - padding-top: 12px; - font-size: 1.6rem; - font-weight: bold; - letter-spacing: 1.8px; - text-transform: none; - vertical-align: top; -} -table.share_status.dashboard tr:nth-child(even) { - background-color: transparent; -} -table.share_status.dashboard tr:last-child > td { - padding-bottom: 20px; -} -table.share_status.dashboard tr.last > td { - padding-bottom: 20px; -} -table.share_status.dashboard tr.header td { - padding-bottom: 10px; -} -table.share_status.dashboard td { - padding: 3px 10px; -} -table.share_status.dashboard td.vpn { - font-size: 1.1rem; - font-weight: bold; - text-transform: uppercase; - letter-spacing: 1px; -} -table.share_status.dashboard td div.section { - display: inline-block; - vertical-align: top; - margin-left: 4px; - font-size: 1.2rem; - font-weight: bold; - text-transform: uppercase; - letter-spacing: 1px; -} -table.share_status.dashboard td div.section span { - font-weight: normal; - text-transform: none; - letter-spacing: 0; - white-space: normal; -} -table.share_status.dashboard td span.info { - float: right; - margin-right: 20px; - font-size: 1.2rem; - font-weight: normal; - text-transform: none; - letter-spacing: 0; -} -table.share_status.dashboard td span.info.title { - font-weight: bold; -} -table.share_status.dashboard td span.load { - display: inline-block; - width: 38px; - text-align: right; -} -table.share_status.dashboard td span.finish { - float: right; - margin-right: 24px; -} -table.share_status.dashboard i.control { - float: right; - font-size: 1.4rem !important; - margin: 0 3px 0 0; - cursor: pointer; - background-color: rgba(var(--gray-900), 0.1); - padding: 2px; -} -[name="arrayOps"] { - margin-top: 12px; -} -span.error { - color: var(--red-600); - background-color: var(--red-300); - display: block; - width: 100%; -} -span.warn { - color: var(--orange-300); - background-color: var(--yellow-200); - display: block; - width: 100%; -} -span.system { - color: var(--blue-700); - background-color: var(--blue-300); - display: block; - width: 100%; -} -span.array { - color: var(--green-800); - background-color: var(--green-100); - display: block; - width: 100%; -} -span.login { - color: var(--orange-900); - background-color: var(--red-100); - display: block; - width: 100%; -} -span.lite { - background-color: var(--background-color); -} -span.label { - font-size: 1.2rem; - padding: 2px 0 2px 6px; - margin-right: 6px; - border-radius: 4px; - display: inline; - width: auto; - vertical-align: middle; -} -span.cpu-speed { - display: block; - color: var(--blue-900); -} -span.status { - float: right; - font-size: 1.4rem; - margin-top: 30px; - padding-right: 8px; - letter-spacing: 1.8px; -} -span.status.vhshift { - margin-top: 0; - margin-right: -9px; -} -span.status.vshift { - margin-top: -16px; -} -span.status.hshift { - margin-right: -20px; -} -span.diskinfo { - float: left; - clear: both; - margin-top: 5px; - padding-left: 10px; -} -span.bitstream { - font-family: bitstream; - font-size: 1.1rem; -} -span.ucfirst { - text-transform: capitalize; -} -span.strong { - font-weight: bold; -} -span.big { - font-size: 1.4rem; -} -span.small { - font-size: 1.2rem; -} -span.outer { - margin-bottom: 20px; - margin-right: 0; -} -span.outer.solid { - background-color: var(--background-color); -} -span.hand { - cursor: pointer; -} -span.outer.started > img, -span.outer.started > i.img { - opacity: 1; -} -span.outer.stopped > img, -span.outer.stopped > i.img { - opacity: 0.3; -} -span.outer.paused > img, -span.outer.paused > i.img { - opacity: 0.6; -} -span.inner { - display: inline-block; - vertical-align: top; -} -span.state { - font-size: 1.1rem; - margin-left: 7px; -} -i.padlock { - margin-right: 8px; - cursor: default; - vertical-align: middle; -} -i.nolock { - visibility: hidden; - margin-right: 8px; - vertical-align: middle; -} -i.lock { - margin-left: 8px; - cursor: default; - vertical-align: middle; -} -i.orb { - font-size: 1.1rem; - margin: 0 8px 0 3px; -} -img.img, -i.img { - width: 32px; - height: 32px; - margin-right: 10px; -} -img.icon { - margin: -3px 4px 0 0; -} -img.list { - width: auto; - max-width: 32px; - height: 32px; -} -i.list { - font-size: 32px; -} -a.list { - text-decoration: none; - color: inherit; -} -div.content { - position: absolute; - top: 0; - left: 0; - width: 100%; - padding-bottom: 30px; - z-index: -1; - clear: both; -} -div.content.shift { - margin-top: 1px; -} -label + .content { - margin-top: 86px; -} -div.tabs { - position: relative; - margin: 130px 0 0 0; -} -div.tab { - float: left; - margin-top: 30px; -} -div.tab input[id^="tab"] { - display: none; -} -div.tab [type="radio"] + label:hover { - background-color: transparent; - border: 1px solid var(--orange-500); - border-bottom: none; - cursor: pointer; - opacity: 1; -} -div.tab [type="radio"]:checked + label { - cursor: default; - background-color: transparent; - border: 1px solid var(--orange-500); - border-bottom: none; - opacity: 1; -} -div.tab [type="radio"] + label ~ .content { - display: none; -} -div.tab [type="radio"]:checked + label ~ .content { - display: inline; -} -div.tab [type="radio"] + label { - position: relative; - font-size: 1.4rem; - letter-spacing: 1.8px; - padding: 4px 10px; - margin-right: 2px; - border-top-left-radius: 6px; - border-top-right-radius: 6px; - border: 1px solid var(--gray-400); - border-bottom: none; - background-color: var(--gray-200); - opacity: 0.5; -} -div.tab [type="radio"] + label img { - padding-right: 4px; -} -div.Panel { - text-align: center; - float: left; - margin: 0 30px 30px 12px; - height: 8rem; -} -div.Panel a { - text-decoration: none; -} -div.Panel span { - height: 42px; - display: block; -} -div.Panel:hover .PanelText { - text-decoration: underline; -} -div.Panel img.PanelImg { - width: auto; - max-width: 32px; - height: 32px; -} -div.Panel i.PanelIcon { - font-size: 32px; - color: var(--text-color); -} -div.user-list { - float: left; - padding: 10px; - margin-right: 10px; - margin-bottom: 24px; - border: 1px solid var(--gray-300); - border-radius: 5px; - line-height: 2rem; - height: 10rem; - width: 10rem; - background-color: var(--gray-200); -} -div.user-list img { - width: auto; - max-width: 48px; - height: 48px; - margin-bottom: 16px; -} -div.up { - margin-top: -30px; - border: 1px solid var(--gray-200); - padding: 4px 6px; - overflow: auto; -} -div.spinner { - margin: 48px auto; - text-align: center; -} -div.spinner.fixed { - display: none; - position: fixed; - top: 50%; - left: 50%; - margin-top: -16px; - margin-left: -64px; - z-index: 10000; -} -div.spinner .unraid_mark { - height: 64px; -} -div.spinner .unraid_mark_2, -div .unraid_mark_4 { - animation: mark_2 1.5s ease infinite; -} -div.spinner .unraid_mark_3 { - animation: mark_3 1.5s ease infinite; -} -div.spinner .unraid_mark_6, -div .unraid_mark_8 { - animation: mark_6 1.5s ease infinite; -} -div.spinner .unraid_mark_7 { - animation: mark_7 1.5s ease infinite; -} -div.domain { - margin-top: -20px; -} -@keyframes mark_2 { - 50% { - transform: translateY(-40px); - } - 100% { - transform: translateY(0px); - } -} -@keyframes mark_3 { - 50% { - transform: translateY(-62px); - } - 100% { - transform: translateY(0px); - } -} -@keyframes mark_6 { - 50% { - transform: translateY(40px); - } - 100% { - transform: translateY(0px); - } -} -@keyframes mark_7 { - 50% { - transform: translateY(62px); - } - 100% { - transform: translateY(0px); - } -} -pre.up { - margin-top: -30px; -} -pre { - border: 1px solid var(--gray-300); - font-family: bitstream; - font-size: 1.3rem; - line-height: 1.8rem; - padding: 4px 6px; - overflow: auto; -} -iframe#progressFrame { - position: fixed; - bottom: 32px; - left: 0; - margin: 0; - padding: 8px 8px 0 8px; - width: 100%; - height: 1.2rem; - line-height: 1.2rem; - border-style: none; - overflow: hidden; - font-family: bitstream; - font-size: 1.1rem; - color: var(--gray-500); - white-space: nowrap; - z-index: -10; -} -dl { - margin: 0; - padding-left: 12px; - line-height: 2.6rem; -} -dt { - clear: left; - float: left; - width: 35%; - font-weight: normal; -} -dd { - margin-bottom: 12px; - white-space: nowrap; -} -dd p { - margin: 0 0 4px 0; -} -dd blockquote { - padding-left: 0; -} -blockquote { - width: 90%; - margin: 10px auto; - text-align: left; - padding: 4px 20px; - border-top: 2px solid var(--blue-200); - border-bottom: 2px solid var(--blue-200); - color: var(--gray-800); - background-color: var(--blue-100); -} -blockquote.ontop { - margin-top: -20px; - margin-bottom: 46px; -} -blockquote a { - color: var(--orange-500); - font-weight: 600; -} -blockquote a:hover, -blockquote a:focus { - color: var(--orange-800); -} -label.checkbox { - display: block; - position: relative; - padding-left: 28px; - margin: 3px 0; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -label.checkbox input { - position: absolute; - opacity: 0; - cursor: pointer; -} -span.checkmark { - position: absolute; - top: 0; - left: 6px; - height: 14px; - width: 14px; - background-color: var(--gray-200); - border-radius: 100%; -} -label.checkbox:hover input ~ .checkmark { - background-color: var(--gray-300); -} -label.checkbox input:checked ~ .checkmark { - background-color: var(--orange-500); -} -label.checkbox input:disabled ~ .checkmark { - opacity: 0.5; -} -a.bannerDismiss { - float: right; - cursor: pointer; - text-decoration: none; - margin-right: 1rem; -} -.bannerDismiss::before { - content: "\e92f"; - font-family: Unraid; - color: var(--orange-300); -} -a.bannerInfo { - cursor: pointer; - text-decoration: none; -} -.bannerInfo::before { - content: "\f05a"; - font-family: fontAwesome; - color: var(--orange-300); -} -::-webkit-scrollbar { - width: 10px; - height: 10px; - background: transparent; -} -::-webkit-scrollbar-thumb { - background: var(--gray-400); - border-radius: 10px; -} -::-webkit-scrollbar-corner { - background: var(--gray-400); - border-radius: 10px; -} -::-webkit-scrollbar-thumb:hover { - background: var(--gray-500); -} diff --git a/emhttp/plugins/dynamix/styles/default-white.css b/emhttp/plugins/dynamix/styles/default-white.css index 0c909201a..e42a1b928 100644 --- a/emhttp/plugins/dynamix/styles/default-white.css +++ b/emhttp/plugins/dynamix/styles/default-white.css @@ -46,31 +46,128 @@ --background-color: var(--gray-100); } -html {font-family: clear-sans;font-size: 62.5%;height: 100%;} -body {font-size: 1.3rem;color: var(--text-color);background-color: var(--background-color);padding: 0;margin: 0;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} -@media (max-width: 1280px) {#template {min-width: 1260px;max-width: 1260px;margin: 0;}} -@media (min-width: 1281px) {#template {min-width: 1260px;margin: 0 10px;}} -@media (min-width: 1921px) {#template {min-width: 1260px;max-width: 1920px;margin: 0 auto;}} -img {border: none;text-decoration: none;vertical-align: middle;} -p {text-align: justify;} -p.centered {text-align: left;} -p:empty {display: none;} -a:hover {text-decoration: underline;} -a {color: var(--blue-800);text-decoration: none;} -a.none {color: var(--text-color);} -a.img {text-decoration: none;border: none;} -a.info {position: relative;} -a.info span {display: none;white-space: nowrap;font-variant: small-caps;position: absolute;top: 16px;left: 12px;line-height: 2rem;color: var(--gray-100);padding: 5px 8px;border: 1px solid rgba(var(--gray-000), 0.25);border-radius: 3px;background-color: rgba(var(--gray-800), 0.95);box-shadow: 0 0 3px var(--gray-700);} -a.info:hover span {display: block;z-index: 1;} -a.nohand {cursor: default;} -a.hand {cursor: pointer;text-decoration: none;} -a.static {cursor: default;color: var(--gray-400);text-decoration: none;} -a.view {display: inline-block;width: 20px;} -i.spacing {margin-left: -6px;} -i.icon {font-size: 1.6rem;margin-right: 4px;vertical-align: middle;} -i.title {margin-right: 8px;} -i.control {cursor: pointer;color: var(--gray-400);font-size: 1.8rem;} -hr {border: none;height: 1px !important;color: var(--gray-300);background-color: var(--gray-300);} +html { + font-family: clear-sans; + font-size: 62.5%; + height: 100%; +} +body { + font-size: 1.3rem; + color: var(--text-color); + background-color: var(--background-color); + padding: 0; + margin: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +@media (max-width: 1280px) { + #template { + min-width: 1260px; + max-width: 1260px; + margin: 0; + } +} +@media (min-width: 1281px) { + #template { + min-width: 1260px; + margin: 0 10px; + } +} +@media (min-width: 1921px) { + #template { + min-width: 1260px; + max-width: 1920px; + margin: 0 auto; + } +} +img { + border: none; + text-decoration: none; + vertical-align: middle; +} +p { + text-align: justify; +} +p.centered { + text-align: left; +} +p:empty { + display: none; +} +a:hover { + text-decoration: underline; +} +a { + color: var(--blue-800); + text-decoration: none; +} +a.none { + color: var(--text-color); +} +a.img { + text-decoration: none; + border: none; +} +a.info { + position: relative; +} +a.info span { + display: none; + white-space: nowrap; + font-variant: small-caps; + position: absolute; + top: 16px; + left: 12px; + line-height: 2rem; + color: var(--gray-100); + padding: 5px 8px; + border: 1px solid rgba(var(--gray-000), 0.25); + border-radius: 3px; + background-color: rgba(var(--gray-800), 0.95); + box-shadow: 0 0 3px var(--gray-700); +} +a.info:hover span { + display: block; + z-index: 1; +} +a.nohand { + cursor: default; +} +a.hand { + cursor: pointer; + text-decoration: none; +} +a.static { + cursor: default; + color: var(--gray-400); + text-decoration: none; +} +a.view { + display: inline-block; + width: 20px; +} +i.spacing { + margin-left: -6px; +} +i.icon { + font-size: 1.6rem; + margin-right: 4px; + vertical-align: middle; +} +i.title { + margin-right: 8px; +} +i.control { + cursor: pointer; + color: var(--gray-400); + font-size: 1.8rem; +} +hr { + border: none; + height: 1px !important; + color: var(--gray-300); + background-color: var(--gray-300); +} input[type="text"], input[type="password"], input[type="number"], @@ -79,32 +176,127 @@ input[type="email"], input[type="date"], input[type="file"], textarea, -.textarea {font-family: clear-sans;font-size: 1.3rem;background-color: transparent;border: none;border-bottom: 1px solid var(--gray-900);padding: 4px 0;text-indent: 0;min-height: 2rem;line-height: 2rem;outline: none;width: 300px;margin: 0 20px 0 0;box-shadow: none;border-radius: 0;color: var(--text-color);} +.textarea { + font-family: clear-sans; + font-size: 1.3rem; + background-color: transparent; + border: none; + border-bottom: 1px solid var(--gray-900); + padding: 4px 0; + text-indent: 0; + min-height: 2rem; + line-height: 2rem; + outline: none; + width: 300px; + margin: 0 20px 0 0; + box-shadow: none; + border-radius: 0; + color: var(--text-color); +} input[type="button"], input[type="reset"], input[type="submit"], button, button[type="button"], -a.button {font-family: clear-sans;font-size: 1.1rem;font-weight: bold;letter-spacing: 1.8px;text-transform: uppercase;min-width: 86px;margin: 10px 12px 10px 0;padding: 8px;text-align: center;text-decoration: none;white-space: nowrap;cursor: pointer;outline: none;border-radius: 4px;border: none;color: var(--orange-500);background: -webkit-gradient(linear,left top,right top,from(var(--red-800)),to(var(--orange-500)))0 0 no-repeat,-webkit-gradient(linear,left top,right top,from(var(--red-800)),to(var(--orange-500))) 0 100% no-repeat,-webkit-gradient(linear,left bottom,left top,from(var(--red-800)),to(var(--red-800))) 0 100% no-repeat,-webkit-gradient(linear,left bottom,left top,from(var(--orange-500)),to(var(--orange-500))) 100% 100% no-repeat;background: linear-gradient(90deg, var(--red-800) 0, var(--orange-500)) 0 0no-repeat,linear-gradient(90deg, var(--red-800) 0, var(--orange-500)) 0 100%no-repeat,linear-gradient(0deg, var(--red-800) 0, var(--red-800)) 0 100% no-repeat,linear-gradient(0deg, var(--orange-500) 0, var(--orange-500)) 100% 100%no-repeat;background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;} -input[type="checkbox"] {vertical-align: middle;margin-right: 6px;} +a.button { + font-family: clear-sans; + font-size: 1.1rem; + font-weight: bold; + letter-spacing: 1.8px; + text-transform: uppercase; + min-width: 86px; + margin: 10px 12px 10px 0; + padding: 8px; + text-align: center; + text-decoration: none; + white-space: nowrap; + cursor: pointer; + outline: none; + border-radius: 4px; + border: none; + color: var(--orange-500); + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--red-800)), + to(var(--orange-500)) + ) + 0 0 no-repeat, + -webkit-gradient( + linear, + left top, + right top, + from(var(--red-800)), + to(var(--orange-500)) + ) 0 100% no-repeat, + -webkit-gradient( + linear, + left bottom, + left top, + from(var(--red-800)), + to(var(--red-800)) + ) 0 100% no-repeat, + -webkit-gradient( + linear, + left bottom, + left top, + from(var(--orange-500)), + to(var(--orange-500)) + ) 100% 100% no-repeat; + background: linear-gradient(90deg, var(--red-800) 0, var(--orange-500)) 0 0 + no-repeat, + linear-gradient(90deg, var(--red-800) 0, var(--orange-500)) 0 100% + no-repeat, + linear-gradient(0deg, var(--red-800) 0, var(--red-800)) 0 100% no-repeat, + linear-gradient(0deg, var(--orange-500) 0, var(--orange-500)) 100% 100% + no-repeat; + background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%; +} +input[type="checkbox"] { + vertical-align: middle; + margin-right: 6px; +} input[type="number"]::-webkit-outer-spin-button, -input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;} -input[type="number"] {-moz-appearance: textfield;} +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; +} +input[type="number"] { + -moz-appearance: textfield; +} input:focus[type="text"], input:focus[type="password"], input:focus[type="number"], input:focus[type="url"], input:focus[type="email"], input:focus[type="file"], -textarea:focus {background-color: var(--gray-300);outline: 0;} +textarea:focus { + background-color: var(--gray-300); + outline: 0; +} input:hover[type="button"], input:hover[type="reset"], input:hover[type="submit"], button:hover, button:hover[type="button"], -a.button:hover {color: var(--gray-100);background: -webkit-gradient(linear,left top,right top,from(var(--red-800)),to(var(--orange-500)));background: linear-gradient(90deg, var(--red-800) 0, var(--orange-500));} +a.button:hover { + color: var(--gray-100); + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--red-800)), + to(var(--orange-500)) + ); + background: linear-gradient(90deg, var(--red-800) 0, var(--orange-500)); +} input[disabled], -textarea[disabled] {color: var(--text-color);border-bottom-color: var(--gray-400);opacity: 0.5;cursor: default;} +textarea[disabled] { + color: var(--text-color); + border-bottom-color: var(--gray-400); + opacity: 0.5; + cursor: default; +} input[type="button"][disabled], input[type="reset"][disabled], input[type="submit"][disabled], @@ -120,249 +312,1223 @@ input:active[type="reset"][disabled], input:active[type="submit"][disabled], button:active[disabled], button:active[type="button"][disabled], -a.button:active[disabled] {cursor: default;color: var(--gray-500);background: -webkit-gradient(linear,left top,right top,from(var(--gray-700)),to(var(--gray-500)))0 0 no-repeat,-webkit-gradient(linear,left top,right top,from(var(--gray-700)),to(var(--gray-500))) 0 100% no-repeat,-webkit-gradient(linear,left bottom,left top,from(var(--gray-700)),to(var(--gray-700))) 0 100% no-repeat,-webkit-gradient(linear,left bottom,left top,from(var(--gray-500)),to(var(--gray-500))) 100% 100% no-repeat;background: linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 0no-repeat,linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 100%no-repeat,linear-gradient(0deg, var(--gray-700) 0, var(--gray-700)) 0 100%no-repeat,linear-gradient(0deg, var(--gray-500) 0, var(--gray-500)) 100% 100%no-repeat;background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;} -input::-webkit-input-placeholder {color: var(--blue-800);} -select {-webkit-appearance: none;font-family: clear-sans;font-size: 1.3rem;min-width: 166px;max-width: 300px;padding: 5px 8px 5px 0;text-indent: 0;margin: 0 10px 0 0;border: none;border-bottom: 1px solid var(--gray-900);box-shadow: none;border-radius: 0;color: var(--text-color);background-color: transparent;background-image: linear-gradient(66.6deg,transparent 60%,var(--gray-900) 40%),linear-gradient(113.4deg, var(--gray-900) 40%, transparent 60%);background-position: calc(100% - 4px), 100%;background-size: 4px 6px, 4px 6px;background-repeat: no-repeat;outline: none;display: inline-block;cursor: pointer;} -select option {color: var(--text-color);background-color: var(--gray-300);} -select:focus {outline: 0;} -select[disabled] {color: var(--text-color);border-bottom-color: var(--gray-500);opacity: 0.5;cursor: default;} -select[name="enter_view"] {margin: 0;padding: 0 12px 0 0;border: none;min-width: auto;} -select[name="enter_share"] {font-size: 1.1rem;padding: 0;border: none;min-width: 40px;float: right;margin-top: 13px;margin-right: 20px;} -select[name="port_select"] {border: none;min-width: 54px;padding-top: 0;padding-bottom: 0;} -select.narrow {min-width: 76px;} -select.auto {min-width: auto;} -select.slot {min-width: 44rem;max-width: 44rem;} -input.narrow {width: 166px;} -input.trim {width: 76px;min-width: 76px;} -textarea {resize: none;} -#header {position: absolute;top: 0;left: 0;width: 100%;min-width: 1260px;height: 91px;z-index: 102;margin: 0;color: var(--gray-100);background-color: var(--gray-900);background-size: 100% 90px;background-repeat: no-repeat;} -#header .logo {float: left;margin-left: 10px;color: var(--red-800);text-align: center;} -#header .logo svg {width: 160px;display: block;margin: 25px 0 8px 0;} -#header .block {margin: 0;float: right;text-align: right;background-color: rgba(var(--gray-900), 0.3);padding: 10px 12px;} -#header .text-left {float: left;text-align: right;padding-right: 5px;border-right: solid medium var(--orange-800);} -#header .text-right {float: right;text-align: left;padding-left: 5px;} -#header .text-right a {color: var(--gray-100);} -#header .text-right #licensetype {font-weight: bold;font-style: italic;margin-right: 4px;} -div.title {margin: 20px 0 32px 0;padding: 8px 10px;clear: both;border-bottom: 1px solid var(--gray-300);background-color: var(--gray-300);letter-spacing: 1.8px;} -div.title span.left {font-size: 1.4rem;} -div.title span.right {font-size: 1.4rem;padding-top: 2px;padding-right: 10px;float: right;} -div.title span img {padding-right: 4px;} -div.title.shift {margin-top: -30px;} -#menu {position: absolute;top: 90px;left: 0;right: 0;display: grid;grid-template-columns: auto max-content;z-index: 101;} -.nav-tile {height: 4rem;line-height: 4rem;padding: 0;margin: 0;font-size: 1.2rem;letter-spacing: 1.8px;background-color: var(--gray-900);white-space: nowrap;overflow-x: auto;overflow-y: hidden;scrollbar-width: thin;} -.nav-tile::-webkit-scrollbar {height: 8px;} -.nav-tile.right {text-align: right;} +a.button:active[disabled] { + cursor: default; + color: var(--gray-500); + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--gray-700)), + to(var(--gray-500)) + ) + 0 0 no-repeat, + -webkit-gradient( + linear, + left top, + right top, + from(var(--gray-700)), + to(var(--gray-500)) + ) 0 100% no-repeat, + -webkit-gradient( + linear, + left bottom, + left top, + from(var(--gray-700)), + to(var(--gray-700)) + ) 0 100% no-repeat, + -webkit-gradient( + linear, + left bottom, + left top, + from(var(--gray-500)), + to(var(--gray-500)) + ) 100% 100% no-repeat; + background: linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 0 + no-repeat, + linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 100% + no-repeat, + linear-gradient(0deg, var(--gray-700) 0, var(--gray-700)) 0 100% + no-repeat, + linear-gradient(0deg, var(--gray-500) 0, var(--gray-500)) 100% 100% + no-repeat; + background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%; +} +input::-webkit-input-placeholder { + color: var(--blue-800); +} +select { + -webkit-appearance: none; + font-family: clear-sans; + font-size: 1.3rem; + min-width: 166px; + max-width: 300px; + padding: 5px 8px 5px 0; + text-indent: 0; + margin: 0 10px 0 0; + border: none; + border-bottom: 1px solid var(--gray-900); + box-shadow: none; + border-radius: 0; + color: var(--text-color); + background-color: transparent; + background-image: linear-gradient( + 66.6deg, + transparent 60%, + var(--gray-900) 40% + ), + linear-gradient(113.4deg, var(--gray-900) 40%, transparent 60%); + background-position: calc(100% - 4px), 100%; + background-size: 4px 6px, 4px 6px; + background-repeat: no-repeat; + outline: none; + display: inline-block; + cursor: pointer; +} +select option { + color: var(--text-color); + background-color: var(--gray-300); +} +select:focus { + outline: 0; +} +select[disabled] { + color: var(--text-color); + border-bottom-color: var(--gray-500); + opacity: 0.5; + cursor: default; +} +select[name="enter_view"] { + margin: 0; + padding: 0 12px 0 0; + border: none; + min-width: auto; +} +select[name="enter_share"] { + font-size: 1.1rem; + padding: 0; + border: none; + min-width: 40px; + float: right; + margin-top: 13px; + margin-right: 20px; +} +select[name="port_select"] { + border: none; + min-width: 54px; + padding-top: 0; + padding-bottom: 0; +} +select.narrow { + min-width: 76px; +} +select.auto { + min-width: auto; +} +select.slot { + min-width: 44rem; + max-width: 44rem; +} +input.narrow { + width: 166px; +} +input.trim { + width: 76px; + min-width: 76px; +} +textarea { + resize: none; +} +#header { + position: absolute; + top: 0; + left: 0; + width: 100%; + min-width: 1260px; + height: 91px; + z-index: 102; + margin: 0; + color: var(--gray-100); + background-color: var(--gray-900); + background-size: 100% 90px; + background-repeat: no-repeat; +} +#header .logo { + float: left; + margin-left: 10px; + color: var(--red-800); + text-align: center; +} +#header .logo svg { + width: 160px; + display: block; + margin: 25px 0 8px 0; +} +#header .block { + margin: 0; + float: right; + text-align: right; + background-color: rgba(var(--gray-900), 0.3); + padding: 10px 12px; +} +#header .text-left { + float: left; + text-align: right; + padding-right: 5px; + border-right: solid medium var(--orange-800); +} +#header .text-right { + float: right; + text-align: left; + padding-left: 5px; +} +#header .text-right a { + color: var(--gray-100); +} +#header .text-right #licensetype { + font-weight: bold; + font-style: italic; + margin-right: 4px; +} +div.title { + margin: 20px 0 32px 0; + padding: 8px 10px; + clear: both; + border-bottom: 1px solid var(--gray-300); + background-color: var(--gray-300); + letter-spacing: 1.8px; +} +div.title span.left { + font-size: 1.4rem; +} +div.title span.right { + font-size: 1.4rem; + padding-top: 2px; + padding-right: 10px; + float: right; +} +div.title span img { + padding-right: 4px; +} +div.title.shift { + margin-top: -30px; +} +#menu { + position: absolute; + top: 90px; + left: 0; + right: 0; + display: grid; + grid-template-columns: auto max-content; + z-index: 101; +} +.nav-tile { + height: 4rem; + line-height: 4rem; + padding: 0; + margin: 0; + font-size: 1.2rem; + letter-spacing: 1.8px; + background-color: var(--gray-900); + white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; + scrollbar-width: thin; +} +.nav-tile::-webkit-scrollbar { + height: 8px; +} +.nav-tile.right { + text-align: right; +} .nav-item, -.nav-user {position: relative;display: inline-block;text-align: center;margin: 0;} -.nav-item a {min-width: 0;} -.nav-item a span {display: none;} -.nav-item .system {vertical-align: middle;padding-bottom: 2px;} -.nav-item a {color: var(--gray-100);background-color: transparent;text-transform: uppercase;font-weight: bold;display: block;padding: 0 10px;} -.nav-item a {text-decoration: none;text-decoration-skip-ink: auto;-webkit-text-decoration-skip: objects;-webkit-transition: all 0.25s ease-out;transition: all 0.25s ease-out;} +.nav-user { + position: relative; + display: inline-block; + text-align: center; + margin: 0; +} +.nav-item a { + min-width: 0; +} +.nav-item a span { + display: none; +} +.nav-item .system { + vertical-align: middle; + padding-bottom: 2px; +} +.nav-item a { + color: var(--gray-100); + background-color: transparent; + text-transform: uppercase; + font-weight: bold; + display: block; + padding: 0 10px; +} +.nav-item a { + text-decoration: none; + text-decoration-skip-ink: auto; + -webkit-text-decoration-skip: objects; + -webkit-transition: all 0.25s ease-out; + transition: all 0.25s ease-out; +} .nav-item:after, -.nav-user.show:after {border-radius: 4px;display: block;background-color: transparent;content: "";width: 32px;height: 2px;bottom: 8px;position: absolute;left: 50%;margin-left: -16px;-webkit-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;pointer-events: none;} +.nav-user.show:after { + border-radius: 4px; + display: block; + background-color: transparent; + content: ""; + width: 32px; + height: 2px; + bottom: 8px; + position: absolute; + left: 50%; + margin-left: -16px; + -webkit-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; + pointer-events: none; +} .nav-item:focus:after, .nav-item:hover:after, -.nav-user.show:hover:after {background-color: var(--orange-800);} -.nav-item.active:after {background-color: var(--background-color);} -.nav-user a {color: var(--gray-100);background-color: transparent;display: block;padding: 0 10px;} -.nav-user .system {vertical-align: middle;padding-bottom: 2px;} -#clear {clear: both;} -#footer {position: fixed;bottom: 0;left: 0;color: var(--gray-800);background-color: var(--gray-200);padding: 5px 0;width: 100%;height: 1.6rem;line-height: 1.6rem;text-align: center;z-index: 10000;} -#statusraid {float: left;padding-left: 10px;} -#countdown {margin: 0 auto;} -#copyright {font-family: bitstream;font-size: 1.1rem;float: right;padding-right: 10px;} -.green {color: var(--green-800);padding-left: 5px;padding-right: 5px;} -.red {color: var(--red-600);padding-left: 5px;padding-right: 5px;} -.orange {color: var(--orange-300);padding-left: 5px;padding-right: 5px;} -.blue {color: var(--blue-800);padding-left: 5px;padding-right: 5px;} +.nav-user.show:hover:after { + background-color: var(--orange-800); +} +.nav-item.active:after { + background-color: var(--background-color); +} +.nav-user a { + color: var(--gray-100); + background-color: transparent; + display: block; + padding: 0 10px; +} +.nav-user .system { + vertical-align: middle; + padding-bottom: 2px; +} +#clear { + clear: both; +} +#footer { + position: fixed; + bottom: 0; + left: 0; + color: var(--gray-800); + background-color: var(--gray-200); + padding: 5px 0; + width: 100%; + height: 1.6rem; + line-height: 1.6rem; + text-align: center; + z-index: 10000; +} +#statusraid { + float: left; + padding-left: 10px; +} +#countdown { + margin: 0 auto; +} +#copyright { + font-family: bitstream; + font-size: 1.1rem; + float: right; + padding-right: 10px; +} +.green { + color: var(--green-800); + padding-left: 5px; + padding-right: 5px; +} +.red { + color: var(--red-600); + padding-left: 5px; + padding-right: 5px; +} +.orange { + color: var(--orange-300); + padding-left: 5px; + padding-right: 5px; +} +.blue { + color: var(--blue-800); + padding-left: 5px; + padding-right: 5px; +} .green-text, -.passed {color: var(--green-800);} +.passed { + color: var(--green-800); +} .red-text, -.failed {color: var(--red-600);} +.failed { + color: var(--red-600); +} .orange-text, -.warning {color: var(--orange-300);} -.blue-text {color: var(--blue-800);} -.grey-text {color: var(--gray-500);} -.green-orb {color: var(--green-200);} -.grey-orb {color: var(--gray-300);} -.blue-orb {color: var(--blue-700);} -.yellow-orb {color: var(--orange-200);} -.red-orb {color: var(--red-500);} -.usage-bar {float: left;height: 2rem;line-height: 2rem;width: 14rem;padding: 1px 1px 1px 2px;margin: 8px 12px;border-radius: 3px;background-color: var(--gray-500);box-shadow: 0 1px 0 var(--gray-400), inset 0 1px 0 var(--gray-600);} -.usage-bar > span {display: block;height: 100%;text-align: right;border-radius: 2px;color: var(--gray-100);background-color: var(--gray-500);box-shadow: inset 0 1px 0 rgba(var(--gray-000), 0.5);} -.usage-disk {position: relative;height: 1.8rem;background-color: var(--gray-200);margin: 0;} -.usage-disk > span:first-child {position: absolute;left: 0;margin: 0 !important;height: 1.8rem;background-color: var(--gray-300);} -.usage-disk > span:last-child {position: relative;padding-right: 4px;z-index: 1;} -.usage-disk.sys {height: 12px;margin: -15px 20px 0 44px;} -.usage-disk.sys > span:first-child {height: 12px;padding: 0;} -.usage-disk.sys.none {background-color: transparent;} -.usage-disk.mm {height: 3px;margin: 5px 20px 0 0;} -.usage-disk.mm > span:first-child {height: 3px;} -.notice {background: var(--yellow-100) url(../images/notice.png) no-repeat;background-position: 60px 50%;color: var(--text-color);font-size: 1.4rem;text-align: left;padding: 15px 0 15px 130px;display: block;height: 7rem;line-height: 7rem;vertical-align: middle;border-top: 2px solid var(--yellow-500);border-bottom: 2px solid var(--yellow-500);} -.notice.shift {margin-top: 160px;} -.greenbar {background: -webkit-gradient(linear,left top,right top,from(var(--green-900)),to(var(--green-500)));background: linear-gradient(90deg, var(--green-900) 0, var(--green-500));} -.orangebar {background: -webkit-gradient(linear,left top,right top,from(var(--orange-400)),to(var(--orange-400)));background: linear-gradient(90deg, var(--orange-400) 0, var(--orange-400));} -.redbar {background: -webkit-gradient(linear,left top,right top,from(var(--red-900)),to(var(--red-700)));background: linear-gradient(90deg, var(--red-900) 0, var(--red-700));} -.graybar {background: -webkit-gradient(linear,left top,right top,from(var(--gray-400)),to(var(--gray-200)));background: linear-gradient(90deg, var(--gray-400) 0, var(--gray-200));} -table {border-collapse: collapse;border-spacing: 0;border-style: hidden;margin: -30px 0 0 0;width: 100%;background-color: var(--background-color);} -table thead td {padding: 7px 0;} -table tbody td {padding: 5px 0;} -table tbody tr.tr_last {background-color: var(--background-color);border-top: 1px solid var(--gray-300);} -table td.cpu-info {border: 1px solid var(--gray-300);} -table.disk_status {white-space: nowrap;} -table.disk_status td span {margin-left: 10px;} -table.disk_status thead tr:first-child td {font-size: 1.1rem;text-transform: uppercase;letter-spacing: 1px;background-color: var(--gray-200);} -table.disk_status thead tr:last-child {border-bottom: 1px solid var(--gray-300);} -table.disk_status tr > td {width: 10%;padding-left: 12px;padding-right: 0;white-space: nowrap;} -table.disk_status tr > td + td {width: auto;} -table.disk_status tr > td + td + td {width: 6.5%;text-align: center;padding-left: 4px;padding-right: 8px;} -table.disk_status tr > td + td + td + td {text-align: right;padding-left: 0;padding-right: 12px;} -table.disk_status tbody tr:nth-child(even) {background-color: var(--background-color);} -table.disk_status tbody tr:not(.tr_last):hover td {background-color: rgba(var(--gray-900), 0.1);} -table.disk_status.stats tr > td + td {text-align: left;padding-left: 0;padding-right: 12px;} -table.array_status td {padding: 4px 0;} -table.array_status tr > td {text-align: left;white-space: nowrap;padding-left: 12px;width: 30%;} -table.array_status tr > td + td {padding-left: 2px;width: 20%;} -table.array_status tr > td + td + td {width: auto;} -table.array_status td.line {border-top: 1px solid var(--gray-300);} -table.array_status.noshift {margin-top: 0;} -table.settings {margin: 0;padding: 0;background-color: transparent;} -table.settings td:first-child {width: 35%;padding: 12px;} -table.settings td + td {padding-left: 8px;} -table.settings.shifted {padding: 0;margin-left: 0;margin-top: 0;} -table.settings.shifted td {padding-left: 0;} -table.access_list {border-spacing: 0;margin-top: 10px;border: none;} -table.access_list tr:first-child td {font-size: 1.1rem;text-transform: uppercase;letter-spacing: 1px;vertical-align: middle;text-align: left;border: 1px solid var(--gray-300);border-bottom: 1px solid var(--gray-300);background-color: var(--gray-200);} -table.access_list td:first-child {font-weight: normal;width: 35%;padding-left: 12px;} -table.access_list tr:first-child td:first-child {font-weight: normal;} -table.access_list tr > td + td {white-space: nowrap;} -table.share_status {white-space: nowrap;} -table.share_status thead tr:first-child td {font-size: 1.1rem;text-transform: uppercase;letter-spacing: 1px;background-color: var(--gray-300);} -table.share_status tr > td {text-align: left;padding-left: 12px;} -table.share_status tr > td + td {padding-left: 0;} -table.share_status tbody tr:nth-child(even) {background-color: var(--background-color);} -table.share_status:not(.dashboard) tbody tr:hover td {background-color: rgba(var(--gray-900), 0.1);} -table.share_status tbody tr.alert {color: var(--red-600);} -table.share_status tbody tr.warn {color: var(--orange-300);} -table.share_status.fixed tr > td + td {min-width: 39px;font-size: 1.1rem;text-align: center;padding: 0;} -table.share_status.table {margin-top: 36px;} -table.share_status.table tr > td {width: 50%;} -table.share_status.dashboard {margin: 0;border: 1px solid var(--gray-200);} -table.share_status.dashboard tbody {border: 1px solid var(--gray-200);} -table.share_status.dashboard tr:first-child > td {height: 3.6rem;padding-top: 12px;font-size: 1.6rem;font-weight: bold;letter-spacing: 1.8px;text-transform: none;vertical-align: top;} -table.share_status.dashboard tr:nth-child(even) {background-color: transparent;} -table.share_status.dashboard tr:last-child > td {padding-bottom: 20px;} -table.share_status.dashboard tr.last > td {padding-bottom: 20px;} -table.share_status.dashboard tr.header td {padding-bottom: 10px;} -table.share_status.dashboard td {padding: 3px 10px;} -table.share_status.dashboard td.vpn {font-size: 1.1rem;font-weight: bold;text-transform: uppercase;letter-spacing: 1px;} -table.share_status.dashboard td div.section {display: inline-block;vertical-align: top;margin-left: 4px;font-size: 1.2rem;font-weight: bold;text-transform: uppercase;letter-spacing: 1px;} -table.share_status.dashboard td div.section span {font-weight: normal;text-transform: none;letter-spacing: 0;white-space: normal;} -table.share_status.dashboard td span.info {float: right;margin-right: 20px;font-size: 1.2rem;font-weight: normal;text-transform: none;letter-spacing: 0;} -table.share_status.dashboard td span.info.title {font-weight: bold;} -table.share_status.dashboard td span.load {display: inline-block;width: 38px;text-align: right;} -table.share_status.dashboard td span.finish {float: right;margin-right: 24px;} -table.share_status.dashboard i.control {float: right;font-size: 1.4rem !important;margin: 0 3px 0 0;cursor: pointer;background-color: rgba(var(--gray-900), 0.1);padding: 2px;} -[name="arrayOps"] {margin-top: 12px;} -span.error {color: var(--red-600);background-color: var(--red-300);display: block;width: 100%;} -span.warn {color: var(--orange-300);background-color: var(--yellow-200);display: block;width: 100%;} -span.system {color: var(--blue-700);background-color: var(--blue-300);display: block;width: 100%;} -span.array {color: var(--green-800);background-color: var(--green-100);display: block;width: 100%;} -span.login {color: var(--orange-900);background-color: var(--red-100);display: block;width: 100%;} -span.lite {background-color: var(--background-color);} -span.label {font-size: 1.2rem;padding: 2px 0 2px 6px;margin-right: 6px;border-radius: 4px;display: inline;width: auto;vertical-align: middle;} -span.cpu-speed {display: block;color: var(--blue-900);} -span.status {float: right;font-size: 1.4rem;margin-top: 30px;padding-right: 8px;letter-spacing: 1.8px;} -span.status.vhshift {margin-top: 0;margin-right: -9px;} -span.status.vshift {margin-top: -16px;} -span.status.hshift {margin-right: -20px;} -span.diskinfo {float: left;clear: both;margin-top: 5px;padding-left: 10px;} -span.bitstream {font-family: bitstream;font-size: 1.1rem;} -span.ucfirst {text-transform: capitalize;} -span.strong {font-weight: bold;} -span.big {font-size: 1.4rem;} -span.small {font-size: 1.2rem;} -span.outer {margin-bottom: 20px;margin-right: 0;} -span.outer.solid {background-color: var(--background-color);} -span.hand {cursor: pointer;} +.warning { + color: var(--orange-300); +} +.blue-text { + color: var(--blue-800); +} +.grey-text { + color: var(--gray-500); +} +.green-orb { + color: var(--green-200); +} +.grey-orb { + color: var(--gray-300); +} +.blue-orb { + color: var(--blue-700); +} +.yellow-orb { + color: var(--orange-200); +} +.red-orb { + color: var(--red-500); +} +.usage-bar { + float: left; + height: 2rem; + line-height: 2rem; + width: 14rem; + padding: 1px 1px 1px 2px; + margin: 8px 12px; + border-radius: 3px; + background-color: var(--gray-500); + box-shadow: 0 1px 0 var(--gray-400), inset 0 1px 0 var(--gray-600); +} +.usage-bar > span { + display: block; + height: 100%; + text-align: right; + border-radius: 2px; + color: var(--gray-100); + background-color: var(--gray-500); + box-shadow: inset 0 1px 0 rgba(var(--gray-000), 0.5); +} +.usage-disk { + position: relative; + height: 1.8rem; + background-color: var(--gray-200); + margin: 0; +} +.usage-disk > span:first-child { + position: absolute; + left: 0; + margin: 0 !important; + height: 1.8rem; + background-color: var(--gray-300); +} +.usage-disk > span:last-child { + position: relative; + padding-right: 4px; + z-index: 1; +} +.usage-disk.sys { + height: 12px; + margin: -15px 20px 0 44px; +} +.usage-disk.sys > span:first-child { + height: 12px; + padding: 0; +} +.usage-disk.sys.none { + background-color: transparent; +} +.usage-disk.mm { + height: 3px; + margin: 5px 20px 0 0; +} +.usage-disk.mm > span:first-child { + height: 3px; +} +.notice { + background: var(--yellow-100) url(../images/notice.png) no-repeat; + background-position: 60px 50%; + color: var(--text-color); + font-size: 1.4rem; + text-align: left; + padding: 15px 0 15px 130px; + display: block; + height: 7rem; + line-height: 7rem; + vertical-align: middle; + border-top: 2px solid var(--yellow-500); + border-bottom: 2px solid var(--yellow-500); +} +.notice.shift { + margin-top: 160px; +} +.greenbar { + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--green-900)), + to(var(--green-500)) + ); + background: linear-gradient(90deg, var(--green-900) 0, var(--green-500)); +} +.orangebar { + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--orange-400)), + to(var(--orange-400)) + ); + background: linear-gradient(90deg, var(--orange-400) 0, var(--orange-400)); +} +.redbar { + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--red-900)), + to(var(--red-700)) + ); + background: linear-gradient(90deg, var(--red-900) 0, var(--red-700)); +} +.graybar { + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--gray-400)), + to(var(--gray-200)) + ); + background: linear-gradient(90deg, var(--gray-400) 0, var(--gray-200)); +} +table { + border-collapse: collapse; + border-spacing: 0; + border-style: hidden; + margin: -30px 0 0 0; + width: 100%; + background-color: var(--background-color); +} +table thead td { + padding: 7px 0; +} +table tbody td { + padding: 5px 0; +} +table tbody tr.tr_last { + background-color: var(--background-color); + border-top: 1px solid var(--gray-300); +} +table td.cpu-info { + border: 1px solid var(--gray-300); +} +table.disk_status { + white-space: nowrap; +} +table.disk_status td span { + margin-left: 10px; +} +table.disk_status thead tr:first-child td { + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 1px; + background-color: var(--gray-200); +} +table.disk_status thead tr:last-child { + border-bottom: 1px solid var(--gray-300); +} +table.disk_status tr > td { + width: 10%; + padding-left: 12px; + padding-right: 0; + white-space: nowrap; +} +table.disk_status tr > td + td { + width: auto; +} +table.disk_status tr > td + td + td { + width: 6.5%; + text-align: center; + padding-left: 4px; + padding-right: 8px; +} +table.disk_status tr > td + td + td + td { + text-align: right; + padding-left: 0; + padding-right: 12px; +} +table.disk_status tbody tr:nth-child(even) { + background-color: var(--background-color); +} +table.disk_status tbody tr:not(.tr_last):hover td { + background-color: rgba(var(--gray-900), 0.1); +} +table.disk_status.stats tr > td + td { + text-align: left; + padding-left: 0; + padding-right: 12px; +} +table.array_status td { + padding: 4px 0; +} +table.array_status tr > td { + text-align: left; + white-space: nowrap; + padding-left: 12px; + width: 30%; +} +table.array_status tr > td + td { + padding-left: 2px; + width: 20%; +} +table.array_status tr > td + td + td { + width: auto; +} +table.array_status td.line { + border-top: 1px solid var(--gray-300); +} +table.array_status.noshift { + margin-top: 0; +} +table.settings { + margin: 0; + padding: 0; + background-color: transparent; +} +table.settings td:first-child { + width: 35%; + padding: 12px; +} +table.settings td + td { + padding-left: 8px; +} +table.settings.shifted { + padding: 0; + margin-left: 0; + margin-top: 0; +} +table.settings.shifted td { + padding-left: 0; +} +table.access_list { + border-spacing: 0; + margin-top: 10px; + border: none; +} +table.access_list tr:first-child td { + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 1px; + vertical-align: middle; + text-align: left; + border: 1px solid var(--gray-300); + border-bottom: 1px solid var(--gray-300); + background-color: var(--gray-200); +} +table.access_list td:first-child { + font-weight: normal; + width: 35%; + padding-left: 12px; +} +table.access_list tr:first-child td:first-child { + font-weight: normal; +} +table.access_list tr > td + td { + white-space: nowrap; +} +table.share_status { + white-space: nowrap; +} +table.share_status thead tr:first-child td { + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 1px; + background-color: var(--gray-300); +} +table.share_status tr > td { + text-align: left; + padding-left: 12px; +} +table.share_status tr > td + td { + padding-left: 0; +} +table.share_status tbody tr:nth-child(even) { + background-color: var(--background-color); +} +table.share_status:not(.dashboard) tbody tr:hover td { + background-color: rgba(var(--gray-900), 0.1); +} +table.share_status tbody tr.alert { + color: var(--red-600); +} +table.share_status tbody tr.warn { + color: var(--orange-300); +} +table.share_status.fixed tr > td + td { + min-width: 39px; + font-size: 1.1rem; + text-align: center; + padding: 0; +} +table.share_status.table { + margin-top: 36px; +} +table.share_status.table tr > td { + width: 50%; +} +table.share_status.dashboard { + margin: 0; + border: 1px solid var(--gray-200); +} +table.share_status.dashboard tbody { + border: 1px solid var(--gray-200); +} +table.share_status.dashboard tr:first-child > td { + height: 3.6rem; + padding-top: 12px; + font-size: 1.6rem; + font-weight: bold; + letter-spacing: 1.8px; + text-transform: none; + vertical-align: top; +} +table.share_status.dashboard tr:nth-child(even) { + background-color: transparent; +} +table.share_status.dashboard tr:last-child > td { + padding-bottom: 20px; +} +table.share_status.dashboard tr.last > td { + padding-bottom: 20px; +} +table.share_status.dashboard tr.header td { + padding-bottom: 10px; +} +table.share_status.dashboard td { + padding: 3px 10px; +} +table.share_status.dashboard td.vpn { + font-size: 1.1rem; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; +} +table.share_status.dashboard td div.section { + display: inline-block; + vertical-align: top; + margin-left: 4px; + font-size: 1.2rem; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; +} +table.share_status.dashboard td div.section span { + font-weight: normal; + text-transform: none; + letter-spacing: 0; + white-space: normal; +} +table.share_status.dashboard td span.info { + float: right; + margin-right: 20px; + font-size: 1.2rem; + font-weight: normal; + text-transform: none; + letter-spacing: 0; +} +table.share_status.dashboard td span.info.title { + font-weight: bold; +} +table.share_status.dashboard td span.load { + display: inline-block; + width: 38px; + text-align: right; +} +table.share_status.dashboard td span.finish { + float: right; + margin-right: 24px; +} +table.share_status.dashboard i.control { + float: right; + font-size: 1.4rem !important; + margin: 0 3px 0 0; + cursor: pointer; + background-color: rgba(var(--gray-900), 0.1); + padding: 2px; +} +[name="arrayOps"] { + margin-top: 12px; +} +span.error { + color: var(--red-600); + background-color: var(--red-300); + display: block; + width: 100%; +} +span.warn { + color: var(--orange-300); + background-color: var(--yellow-200); + display: block; + width: 100%; +} +span.system { + color: var(--blue-700); + background-color: var(--blue-300); + display: block; + width: 100%; +} +span.array { + color: var(--green-800); + background-color: var(--green-100); + display: block; + width: 100%; +} +span.login { + color: var(--orange-900); + background-color: var(--red-100); + display: block; + width: 100%; +} +span.lite { + background-color: var(--background-color); +} +span.label { + font-size: 1.2rem; + padding: 2px 0 2px 6px; + margin-right: 6px; + border-radius: 4px; + display: inline; + width: auto; + vertical-align: middle; +} +span.cpu-speed { + display: block; + color: var(--blue-900); +} +span.status { + float: right; + font-size: 1.4rem; + margin-top: 30px; + padding-right: 8px; + letter-spacing: 1.8px; +} +span.status.vhshift { + margin-top: 0; + margin-right: -9px; +} +span.status.vshift { + margin-top: -16px; +} +span.status.hshift { + margin-right: -20px; +} +span.diskinfo { + float: left; + clear: both; + margin-top: 5px; + padding-left: 10px; +} +span.bitstream { + font-family: bitstream; + font-size: 1.1rem; +} +span.ucfirst { + text-transform: capitalize; +} +span.strong { + font-weight: bold; +} +span.big { + font-size: 1.4rem; +} +span.small { + font-size: 1.2rem; +} +span.outer { + margin-bottom: 20px; + margin-right: 0; +} +span.outer.solid { + background-color: var(--background-color); +} +span.hand { + cursor: pointer; +} span.outer.started > img, -span.outer.started > i.img {opacity: 1;} +span.outer.started > i.img { + opacity: 1; +} span.outer.stopped > img, -span.outer.stopped > i.img {opacity: 0.3;} +span.outer.stopped > i.img { + opacity: 0.3; +} span.outer.paused > img, -span.outer.paused > i.img {opacity: 0.6;} -span.inner {display: inline-block;vertical-align: top;} -span.state {font-size: 1.1rem;margin-left: 7px;} -i.padlock {margin-right: 8px;cursor: default;vertical-align: middle;} -i.nolock {visibility: hidden;margin-right: 8px;vertical-align: middle;} -i.lock {margin-left: 8px;cursor: default;vertical-align: middle;} -i.orb {font-size: 1.1rem;margin: 0 8px 0 3px;} +span.outer.paused > i.img { + opacity: 0.6; +} +span.inner { + display: inline-block; + vertical-align: top; +} +span.state { + font-size: 1.1rem; + margin-left: 7px; +} +i.padlock { + margin-right: 8px; + cursor: default; + vertical-align: middle; +} +i.nolock { + visibility: hidden; + margin-right: 8px; + vertical-align: middle; +} +i.lock { + margin-left: 8px; + cursor: default; + vertical-align: middle; +} +i.orb { + font-size: 1.1rem; + margin: 0 8px 0 3px; +} img.img, -i.img {width: 32px;height: 32px;margin-right: 10px;} -img.icon {margin: -3px 4px 0 0;} -img.list {width: auto;max-width: 32px;height: 32px;} -i.list {font-size: 32px;} -a.list {text-decoration: none;color: inherit;} -div.content {position: absolute;top: 0;left: 0;width: 100%;padding-bottom: 30px;z-index: -1;clear: both;} -div.content.shift {margin-top: 1px;} -label + .content {margin-top: 86px;} -div.tabs {position: relative;margin: 130px 0 0 0;} -div.tab {float: left;margin-top: 30px;} -div.tab input[id^="tab"] {display: none;} -div.tab [type="radio"] + label:hover {background-color: transparent;border: 1px solid var(--orange-500);border-bottom: none;cursor: pointer;opacity: 1;} -div.tab [type="radio"]:checked + label {cursor: default;background-color: transparent;border: 1px solid var(--orange-500);border-bottom: none;opacity: 1;} -div.tab [type="radio"] + label ~ .content {display: none;} -div.tab [type="radio"]:checked + label ~ .content {display: inline;} -div.tab [type="radio"] + label {position: relative;font-size: 1.4rem;letter-spacing: 1.8px;padding: 4px 10px;margin-right: 2px;border-top-left-radius: 6px;border-top-right-radius: 6px;border: 1px solid var(--gray-400);border-bottom: none;background-color: var(--gray-200);opacity: 0.5;} -div.tab [type="radio"] + label img {padding-right: 4px;} -div.Panel {text-align: center;float: left;margin: 0 30px 30px 12px;height: 8rem;} -div.Panel a {text-decoration: none;} -div.Panel span {height: 42px;display: block;} -div.Panel:hover .PanelText {text-decoration: underline;} -div.Panel img.PanelImg {width: auto;max-width: 32px;height: 32px;} -div.Panel i.PanelIcon {font-size: 32px;color: var(--text-color);} -div.user-list {float: left;padding: 10px;margin-right: 10px;margin-bottom: 24px;border: 1px solid var(--gray-300);border-radius: 5px;line-height: 2rem;height: 10rem;width: 10rem;background-color: var(--gray-200);} -div.user-list img {width: auto;max-width: 48px;height: 48px;margin-bottom: 16px;} -div.up {margin-top: -30px;border: 1px solid var(--gray-200);padding: 4px 6px;overflow: auto;} -div.spinner {margin: 48px auto;text-align: center;} -div.spinner.fixed {display: none;position: fixed;top: 50%;left: 50%;margin-top: -16px;margin-left: -64px;z-index: 10000;} -div.spinner .unraid_mark {height: 64px;} +i.img { + width: 32px; + height: 32px; + margin-right: 10px; +} +img.icon { + margin: -3px 4px 0 0; +} +img.list { + width: auto; + max-width: 32px; + height: 32px; +} +i.list { + font-size: 32px; +} +a.list { + text-decoration: none; + color: inherit; +} +div.content { + position: absolute; + top: 0; + left: 0; + width: 100%; + padding-bottom: 30px; + z-index: -1; + clear: both; +} +div.content.shift { + margin-top: 1px; +} +label + .content { + margin-top: 86px; +} +div.tabs { + position: relative; + margin: 130px 0 0 0; +} +div.tab { + float: left; + margin-top: 30px; +} +div.tab input[id^="tab"] { + display: none; +} +div.tab [type="radio"] + label:hover { + background-color: transparent; + border: 1px solid var(--orange-500); + border-bottom: none; + cursor: pointer; + opacity: 1; +} +div.tab [type="radio"]:checked + label { + cursor: default; + background-color: transparent; + border: 1px solid var(--orange-500); + border-bottom: none; + opacity: 1; +} +div.tab [type="radio"] + label ~ .content { + display: none; +} +div.tab [type="radio"]:checked + label ~ .content { + display: inline; +} +div.tab [type="radio"] + label { + position: relative; + font-size: 1.4rem; + letter-spacing: 1.8px; + padding: 4px 10px; + margin-right: 2px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + border: 1px solid var(--gray-400); + border-bottom: none; + background-color: var(--gray-200); + opacity: 0.5; +} +div.tab [type="radio"] + label img { + padding-right: 4px; +} +div.Panel { + text-align: center; + float: left; + margin: 0 30px 30px 12px; + height: 8rem; +} +div.Panel a { + text-decoration: none; +} +div.Panel span { + height: 42px; + display: block; +} +div.Panel:hover .PanelText { + text-decoration: underline; +} +div.Panel img.PanelImg { + width: auto; + max-width: 32px; + height: 32px; +} +div.Panel i.PanelIcon { + font-size: 32px; + color: var(--text-color); +} +div.user-list { + float: left; + padding: 10px; + margin-right: 10px; + margin-bottom: 24px; + border: 1px solid var(--gray-300); + border-radius: 5px; + line-height: 2rem; + height: 10rem; + width: 10rem; + background-color: var(--gray-200); +} +div.user-list img { + width: auto; + max-width: 48px; + height: 48px; + margin-bottom: 16px; +} +div.up { + margin-top: -30px; + border: 1px solid var(--gray-200); + padding: 4px 6px; + overflow: auto; +} +div.spinner { + margin: 48px auto; + text-align: center; +} +div.spinner.fixed { + display: none; + position: fixed; + top: 50%; + left: 50%; + margin-top: -16px; + margin-left: -64px; + z-index: 10000; +} +div.spinner .unraid_mark { + height: 64px; +} div.spinner .unraid_mark_2, -div .unraid_mark_4 {animation: mark_2 1.5s ease infinite;} -div.spinner .unraid_mark_3 {animation: mark_3 1.5s ease infinite;} +div .unraid_mark_4 { + animation: mark_2 1.5s ease infinite; +} +div.spinner .unraid_mark_3 { + animation: mark_3 1.5s ease infinite; +} div.spinner .unraid_mark_6, -div .unraid_mark_8 {animation: mark_6 1.5s ease infinite;} -div.spinner .unraid_mark_7 {animation: mark_7 1.5s ease infinite;} -div.domain {margin-top: -20px;} -@keyframes mark_2 {50% {transform: translateY(-40px);}100% {transform: translateY(0px);}} -@keyframes mark_3 {50% {transform: translateY(-62px);}100% {transform: translateY(0px);}} -@keyframes mark_6 {50% {transform: translateY(40px);}100% {transform: translateY(0px);}} -@keyframes mark_7 {50% {transform: translateY(62px);}100% {transform: translateY(0px);}} -pre.up {margin-top: -30px;} -pre {border: 1px solid var(--gray-300);font-family: bitstream;font-size: 1.3rem;line-height: 1.8rem;padding: 4px 6px;overflow: auto;} -iframe#progressFrame {position: fixed;bottom: 32px;left: 0;margin: 0;padding: 8px 8px 0 8px;width: 100%;height: 1.2rem;line-height: 1.2rem;border-style: none;overflow: hidden;font-family: bitstream;font-size: 1.1rem;color: var(--gray-500);white-space: nowrap;z-index: -10;} -dl {margin: 0;padding-left: 12px;line-height: 2.6rem;} -dt {clear: left;float: left;width: 35%;font-weight: normal;} -dd {margin-bottom: 12px;white-space: nowrap;} -dd p {margin: 0 0 4px 0;} -dd blockquote {padding-left: 0;} -blockquote {width: 90%;margin: 10px auto;text-align: left;padding: 4px 20px;border-top: 2px solid var(--blue-200);border-bottom: 2px solid var(--blue-200);color: var(--gray-800);background-color: var(--blue-100);} -blockquote.ontop {margin-top: -20px;margin-bottom: 46px;} -blockquote a {color: var(--orange-500);font-weight: 600;} +div .unraid_mark_8 { + animation: mark_6 1.5s ease infinite; +} +div.spinner .unraid_mark_7 { + animation: mark_7 1.5s ease infinite; +} +div.domain { + margin-top: -20px; +} +@keyframes mark_2 { + 50% { + transform: translateY(-40px); + } + 100% { + transform: translateY(0px); + } +} +@keyframes mark_3 { + 50% { + transform: translateY(-62px); + } + 100% { + transform: translateY(0px); + } +} +@keyframes mark_6 { + 50% { + transform: translateY(40px); + } + 100% { + transform: translateY(0px); + } +} +@keyframes mark_7 { + 50% { + transform: translateY(62px); + } + 100% { + transform: translateY(0px); + } +} +pre.up { + margin-top: -30px; +} +pre { + border: 1px solid var(--gray-300); + font-family: bitstream; + font-size: 1.3rem; + line-height: 1.8rem; + padding: 4px 6px; + overflow: auto; +} +iframe#progressFrame { + position: fixed; + bottom: 32px; + left: 0; + margin: 0; + padding: 8px 8px 0 8px; + width: 100%; + height: 1.2rem; + line-height: 1.2rem; + border-style: none; + overflow: hidden; + font-family: bitstream; + font-size: 1.1rem; + color: var(--gray-500); + white-space: nowrap; + z-index: -10; +} +dl { + margin: 0; + padding-left: 12px; + line-height: 2.6rem; +} +dt { + clear: left; + float: left; + width: 35%; + font-weight: normal; +} +dd { + margin-bottom: 12px; + white-space: nowrap; +} +dd p { + margin: 0 0 4px 0; +} +dd blockquote { + padding-left: 0; +} +blockquote { + width: 90%; + margin: 10px auto; + text-align: left; + padding: 4px 20px; + border-top: 2px solid var(--blue-200); + border-bottom: 2px solid var(--blue-200); + color: var(--gray-800); + background-color: var(--blue-100); +} +blockquote.ontop { + margin-top: -20px; + margin-bottom: 46px; +} +blockquote a { + color: var(--orange-500); + font-weight: 600; +} blockquote a:hover, -blockquote a:focus {color: var(--orange-800);} -label.checkbox {display: block;position: relative;padding-left: 28px;margin: 3px 0;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} -label.checkbox input {position: absolute;opacity: 0;cursor: pointer;} -span.checkmark {position: absolute;top: 0;left: 6px;height: 14px;width: 14px;background-color: var(--gray-200);border-radius: 100%;} -label.checkbox:hover input ~ .checkmark {background-color: var(--gray-300);} -label.checkbox input:checked ~ .checkmark {background-color: var(--orange-500);} -label.checkbox input:disabled ~ .checkmark {opacity: 0.5;} -a.bannerDismiss {float: right;cursor: pointer;text-decoration: none;margin-right: 1rem;} -.bannerDismiss::before {content: "\e92f";font-family: Unraid;color: var(--orange-300);} -a.bannerInfo {cursor: pointer;text-decoration: none;} -.bannerInfo::before {content: "\f05a";font-family: fontAwesome;color: var(--orange-300);} -::-webkit-scrollbar {width: 10px;height: 10px;background: transparent;} -::-webkit-scrollbar-thumb {background: var(--gray-400);border-radius: 10px;} -::-webkit-scrollbar-corner {background: var(--gray-400);border-radius: 10px;} -::-webkit-scrollbar-thumb:hover {background: var(--gray-500);} +blockquote a:focus { + color: var(--orange-800); +} +label.checkbox { + display: block; + position: relative; + padding-left: 28px; + margin: 3px 0; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +label.checkbox input { + position: absolute; + opacity: 0; + cursor: pointer; +} +span.checkmark { + position: absolute; + top: 0; + left: 6px; + height: 14px; + width: 14px; + background-color: var(--gray-200); + border-radius: 100%; +} +label.checkbox:hover input ~ .checkmark { + background-color: var(--gray-300); +} +label.checkbox input:checked ~ .checkmark { + background-color: var(--orange-500); +} +label.checkbox input:disabled ~ .checkmark { + opacity: 0.5; +} +a.bannerDismiss { + float: right; + cursor: pointer; + text-decoration: none; + margin-right: 1rem; +} +.bannerDismiss::before { + content: "\e92f"; + font-family: Unraid; + color: var(--orange-300); +} +a.bannerInfo { + cursor: pointer; + text-decoration: none; +} +.bannerInfo::before { + content: "\f05a"; + font-family: fontAwesome; + color: var(--orange-300); +} +::-webkit-scrollbar { + width: 10px; + height: 10px; + background: transparent; +} +::-webkit-scrollbar-thumb { + background: var(--gray-400); + border-radius: 10px; +} +::-webkit-scrollbar-corner { + background: var(--gray-400); + border-radius: 10px; +} +::-webkit-scrollbar-thumb:hover { + background: var(--gray-500); +} From 5d9ed161dd8cc911c984bf38557ca4f602a3170c Mon Sep 17 00:00:00 2001 From: Bailey Matthews Date: Sat, 9 Sep 2023 13:46:14 +0100 Subject: [PATCH 07/99] chore: pad with zeros to make comments more readable --- .../plugins/dynamix/styles/default-white.css | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/emhttp/plugins/dynamix/styles/default-white.css b/emhttp/plugins/dynamix/styles/default-white.css index e42a1b928..28ecd11fe 100644 --- a/emhttp/plugins/dynamix/styles/default-white.css +++ b/emhttp/plugins/dynamix/styles/default-white.css @@ -10,37 +10,37 @@ --gary-800: rgb(025, 025, 025); /* #191919 #2b2a29 */ --gray-900: rgb(029, 027, 027); /* #1c1b1b */ - --orange-200: rgb(255, 153, 0); /* #ff9900 */ - --orange-300: rgb(230, 138, 0); /* #e68a00 */ - --orange-400: rgb(206, 124, 16); /* #ce7c10 */ - --orange-500: rgb(255, 140, 47); /* #ff8c2f */ - --orange-800: rgb(241, 90, 44); /* #f15a2c */ - --orange-900: rgb(214, 51, 1); /* #d63301 */ + --orange-200: rgb(255, 153, 000); /* #ff9900 */ + --orange-300: rgb(230, 138, 000); /* #e68a00 */ + --orange-400: rgb(206, 124, 016); /* #ce7c10 */ + --orange-500: rgb(255, 140, 047); /* #ff8c2f */ + --orange-800: rgb(241, 090, 044); /* #f15a2c */ + --orange-900: rgb(214, 051, 001); /* #d63301 */ --red-100: rgb(255, 221, 209); /* #ffddd1 */ --red-300: rgb(255, 158, 158); /* #ff9e9e */ - --red-500: rgb(255, 51, 0); /* #ff3300 */ - --red-600: rgb(240, 0, 12); /* #f0000c */ - --red-700: rgb(222, 17, 0); /* #de1100 */ - --red-800: rgb(226, 40, 40); /* #e22828 */ - --red-900: rgb(148, 28, 0); /* #941c00 */ + --red-500: rgb(255, 051, 000); /* #ff3300 */ + --red-600: rgb(240, 000, 012); /* #f0000c */ + --red-700: rgb(222, 017, 000); /* #de1100 */ + --red-800: rgb(226, 040, 040); /* #e22828 */ + --red-900: rgb(148, 028, 000); /* #941c00 */ --green-100: rgb(223, 242, 191); /* #dff2bf */ - --green-200: rgb(51, 204, 51); /* #33cc33 */ - --green-500: rgb(23, 191, 11); /* #17bf0b */ - --green-800: rgb(79, 138, 16); /* #4f8a10 */ - --green-900: rgb(18, 122, 5); /* #127a05 */ + --green-200: rgb(051, 204, 051); /* #33cc33 */ + --green-500: rgb(023, 191, 011); /* #17bf0b */ + --green-800: rgb(079, 138, 016); /* #4f8a10 */ + --green-900: rgb(018, 122, 005); /* #127a05 */ --blue-100: rgb(217, 237, 247); /* #d9edf7 */ --blue-200: rgb(188, 232, 241); /* #bce8f1 */ --blue-300: rgb(189, 229, 248); /* #bde5f8 */ - --blue-700: rgb(0, 153, 255); /* #0099ff */ + --blue-700: rgb(000, 153, 255); /* #0099ff */ --blue-800: rgb(072, 109, 186); /* #486dba */ - --blue-900: rgb(59, 89, 152); /* #3b5998 */ + --blue-900: rgb(059, 089, 152); /* #3b5998 */ --yellow-100: rgb(255, 246, 191); /* #fff6bf */ --yellow-200: rgb(254, 239, 179); /* #feefb3 */ - --yellow-500: rgb(255, 211, 36); /* #ffd324 */ + --yellow-500: rgb(255, 211, 036); /* #ffd324 */ --text-color: var(--gray-900); --background-color: var(--gray-100); From 2e63915e91cb5f76f7b818b5d2bfbc8a18ec1f00 Mon Sep 17 00:00:00 2001 From: Bailey Matthews Date: Sat, 9 Sep 2023 14:09:14 +0100 Subject: [PATCH 08/99] fix: correct usage bar --- emhttp/plugins/dynamix/styles/default-white.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/emhttp/plugins/dynamix/styles/default-white.css b/emhttp/plugins/dynamix/styles/default-white.css index 28ecd11fe..1f07bee9e 100644 --- a/emhttp/plugins/dynamix/styles/default-white.css +++ b/emhttp/plugins/dynamix/styles/default-white.css @@ -720,7 +720,7 @@ div.title.shift { left: 0; margin: 0 !important; height: 1.8rem; - background-color: var(--gray-300); + background-color: var(--gray-400); } .usage-disk > span:last-child { position: relative; From 15d7e5c0ced5063c267a8e6eebd56a00e3e2a159 Mon Sep 17 00:00:00 2001 From: Bailey Matthews Date: Mon, 11 Sep 2023 21:43:29 +0100 Subject: [PATCH 09/99] feat: add contextual colours --- .../plugins/dynamix/styles/default-white.css | 195 ++++++++++-------- 1 file changed, 114 insertions(+), 81 deletions(-) diff --git a/emhttp/plugins/dynamix/styles/default-white.css b/emhttp/plugins/dynamix/styles/default-white.css index 1f07bee9e..0344b52f2 100644 --- a/emhttp/plugins/dynamix/styles/default-white.css +++ b/emhttp/plugins/dynamix/styles/default-white.css @@ -7,7 +7,7 @@ --gray-500: rgb(128, 128, 128); /* #808080 #606060 #585858 */ --gray-600: rgb(048, 048, 048); /* #303030 #202020 */ --gray-700: rgb(064, 064, 064); /* #404040 */ - --gary-800: rgb(025, 025, 025); /* #191919 #2b2a29 */ + --gray-800: rgb(025, 025, 025); /* #191919 #2b2a29 */ --gray-900: rgb(029, 027, 027); /* #1c1b1b */ --orange-200: rgb(255, 153, 000); /* #ff9900 */ @@ -43,7 +43,40 @@ --yellow-500: rgb(255, 211, 036); /* #ffd324 */ --text-color: var(--gray-900); + --blockquote-text-color: var(--gray-800); + --alt-text-color: var(--gray-400); + --disabled-text-color: var(--gray-500); + --inverse-text-color: var(--gray-100); + --link-text-color: var(--blue-800); + --background-color: var(--gray-100); + --mild-background-color: var(--gray-300); + --usage-bar-background-color: var(--gray-500); + --usage-disk-background-color: var(--gray-200); + --inverse-background-color: var(--gray-900); + --radio-background-color: var(--gray-200); + + + --border-color: var(--gray-200); + --disabled-border-color: var(--gray-500); + --input-border-color: var(--gray-900); + --disabled-input-border-color: var(--gray-400); + --inverse-border-color: var(--gray-000); + --table-border-color: var(--gray-300); + + --small-shadow: 0 0 3px var(--gray-700); + --hr-color: var(--gray-300); + + --checkbox-color: var(--gray-200); + --checkbox-hover-color: var(--gray-300); + + --brand-orange: var(--orange-500); + --brand-red: var(--red-800); + + --button-text-color: var(--gray-500); + + --scrollbar-color: var(--gray-400); + --scrollbar-hover-color: var(--gray-500); } html { @@ -119,12 +152,12 @@ a.info span { top: 16px; left: 12px; line-height: 2rem; - color: var(--gray-100); + color: var(--inverse-text-color); padding: 5px 8px; - border: 1px solid rgba(var(--gray-000), 0.25); + border: 1px solid var(--inverse-border-color); /* Opacity of 0.25 */ border-radius: 3px; - background-color: rgba(var(--gray-800), 0.95); - box-shadow: 0 0 3px var(--gray-700); + background-color: var(--inverse-background-color); /* Opacity of 0.95 */ + box-shadow: var(--small-shadow) } a.info:hover span { display: block; @@ -139,7 +172,7 @@ a.hand { } a.static { cursor: default; - color: var(--gray-400); + color: var(--alt-text-color); text-decoration: none; } a.view { @@ -159,14 +192,14 @@ i.title { } i.control { cursor: pointer; - color: var(--gray-400); + color: var(--alt-text-color); font-size: 1.8rem; } hr { border: none; height: 1px !important; - color: var(--gray-300); - background-color: var(--gray-300); + color: var(--hr-color); + background-color: var(--hr-color); } input[type="text"], input[type="password"], @@ -181,7 +214,7 @@ textarea, font-size: 1.3rem; background-color: transparent; border: none; - border-bottom: 1px solid var(--gray-900); + border-bottom: 1px solid var(--input-border-color); padding: 4px 0; text-indent: 0; min-height: 2rem; @@ -214,42 +247,42 @@ a.button { outline: none; border-radius: 4px; border: none; - color: var(--orange-500); + color: var(--brand-orange); background: -webkit-gradient( linear, left top, right top, - from(var(--red-800)), - to(var(--orange-500)) + from(var(--brand-red)), + to(var(--brand-orange)) ) 0 0 no-repeat, -webkit-gradient( linear, left top, right top, - from(var(--red-800)), - to(var(--orange-500)) + from(var(--brand-red)), + to(var(--brand-orange)) ) 0 100% no-repeat, -webkit-gradient( linear, left bottom, left top, - from(var(--red-800)), - to(var(--red-800)) + from(var(--brand-red)), + to(var(--brand-red)) ) 0 100% no-repeat, -webkit-gradient( linear, left bottom, left top, - from(var(--orange-500)), - to(var(--orange-500)) + from(var(--brand-orange)), + to(var(--brand-orange)) ) 100% 100% no-repeat; - background: linear-gradient(90deg, var(--red-800) 0, var(--orange-500)) 0 0 + background: linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)) 0 0 no-repeat, - linear-gradient(90deg, var(--red-800) 0, var(--orange-500)) 0 100% + linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)) 0 100% no-repeat, - linear-gradient(0deg, var(--red-800) 0, var(--red-800)) 0 100% no-repeat, - linear-gradient(0deg, var(--orange-500) 0, var(--orange-500)) 100% 100% + linear-gradient(0deg, var(--brand-red) 0, var(--brand-red)) 0 100% no-repeat, + linear-gradient(0deg, var(--brand-orange) 0, var(--brand-orange)) 100% 100% no-repeat; background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%; } @@ -271,7 +304,7 @@ input:focus[type="url"], input:focus[type="email"], input:focus[type="file"], textarea:focus { - background-color: var(--gray-300); + background-color: var(--mild-background-color); outline: 0; } input:hover[type="button"], @@ -280,20 +313,20 @@ input:hover[type="submit"], button:hover, button:hover[type="button"], a.button:hover { - color: var(--gray-100); + color: var(--inverse-text-color); background: -webkit-gradient( linear, left top, right top, - from(var(--red-800)), - to(var(--orange-500)) + from(var(--brand-red)), + to(var(--brand-orange)) ); - background: linear-gradient(90deg, var(--red-800) 0, var(--orange-500)); + background: linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)); } input[disabled], textarea[disabled] { color: var(--text-color); - border-bottom-color: var(--gray-400); + border-bottom-color: var(--disabled-input-border-color); opacity: 0.5; cursor: default; } @@ -314,7 +347,7 @@ button:active[disabled], button:active[type="button"][disabled], a.button:active[disabled] { cursor: default; - color: var(--gray-500); + color: var(--disabled-text-color); background: -webkit-gradient( linear, left top, @@ -355,10 +388,11 @@ a.button:active[disabled] { background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%; } input::-webkit-input-placeholder { - color: var(--blue-800); + color: var(--link-text-color); } select { -webkit-appearance: none; + appearance: none; font-family: clear-sans; font-size: 1.3rem; min-width: 166px; @@ -367,7 +401,7 @@ select { text-indent: 0; margin: 0 10px 0 0; border: none; - border-bottom: 1px solid var(--gray-900); + border-bottom: 1px solid var(--input-border-color); box-shadow: none; border-radius: 0; color: var(--text-color); @@ -375,9 +409,9 @@ select { background-image: linear-gradient( 66.6deg, transparent 60%, - var(--gray-900) 40% + var(--input-border-color) 40% ), - linear-gradient(113.4deg, var(--gray-900) 40%, transparent 60%); + linear-gradient(113.4deg, var(--input-border-color) 40%, transparent 60%); background-position: calc(100% - 4px), 100%; background-size: 4px 6px, 4px 6px; background-repeat: no-repeat; @@ -387,14 +421,14 @@ select { } select option { color: var(--text-color); - background-color: var(--gray-300); + background-color: var(--mild-background-color); } select:focus { outline: 0; } select[disabled] { color: var(--text-color); - border-bottom-color: var(--gray-500); + border-bottom-color: var(--disabled-border-color); opacity: 0.5; cursor: default; } @@ -448,8 +482,8 @@ textarea { height: 91px; z-index: 102; margin: 0; - color: var(--gray-100); - background-color: var(--gray-900); + color: var(--inverse-text-color); + background-color: var(--inverse-background-color); background-size: 100% 90px; background-repeat: no-repeat; } @@ -468,7 +502,7 @@ textarea { margin: 0; float: right; text-align: right; - background-color: rgba(var(--gray-900), 0.3); + background-color: var(--inverse-background-color); /* Opacity of 0.3 */ padding: 10px 12px; } #header .text-left { @@ -483,7 +517,7 @@ textarea { padding-left: 5px; } #header .text-right a { - color: var(--gray-100); + color: var(--inverse-text-color); } #header .text-right #licensetype { font-weight: bold; @@ -494,8 +528,7 @@ div.title { margin: 20px 0 32px 0; padding: 8px 10px; clear: both; - border-bottom: 1px solid var(--gray-300); - background-color: var(--gray-300); + background-color: var(--mild-background-color); letter-spacing: 1.8px; } div.title span.left { @@ -529,7 +562,7 @@ div.title.shift { margin: 0; font-size: 1.2rem; letter-spacing: 1.8px; - background-color: var(--gray-900); + background-color: var(--inverse-background-color); white-space: nowrap; overflow-x: auto; overflow-y: hidden; @@ -559,7 +592,7 @@ div.title.shift { padding-bottom: 2px; } .nav-item a { - color: var(--gray-100); + color: var(--inverse-text-color); background-color: transparent; text-transform: uppercase; font-weight: bold; @@ -598,7 +631,7 @@ div.title.shift { background-color: var(--background-color); } .nav-user a { - color: var(--gray-100); + color: var(--inverse-text-color); background-color: transparent; display: block; padding: 0 10px; @@ -614,13 +647,14 @@ div.title.shift { position: fixed; bottom: 0; left: 0; - color: var(--gray-800); - background-color: var(--gray-200); + color: var(--text-color); + background-color: var(--mild-background-color); padding: 5px 0; width: 100%; height: 1.6rem; line-height: 1.6rem; text-align: center; + /* TODO: Use variables for z-index to have more control */ z-index: 10000; } #statusraid { @@ -697,7 +731,7 @@ div.title.shift { padding: 1px 1px 1px 2px; margin: 8px 12px; border-radius: 3px; - background-color: var(--gray-500); + background-color: var(--usage-bar-background-color); box-shadow: 0 1px 0 var(--gray-400), inset 0 1px 0 var(--gray-600); } .usage-bar > span { @@ -705,14 +739,14 @@ div.title.shift { height: 100%; text-align: right; border-radius: 2px; - color: var(--gray-100); - background-color: var(--gray-500); - box-shadow: inset 0 1px 0 rgba(var(--gray-000), 0.5); + color: var(--inverse-text-color); + background-color: var(--usage-bar-background-color); + box-shadow: inset 0 1px 0 var(--gray-000); /* Opacity of 0.5 */ } .usage-disk { position: relative; height: 1.8rem; - background-color: var(--gray-200); + background-color: var(--usage-disk-background-color); margin: 0; } .usage-disk > span:first-child { @@ -755,7 +789,6 @@ div.title.shift { display: block; height: 7rem; line-height: 7rem; - vertical-align: middle; border-top: 2px solid var(--yellow-500); border-bottom: 2px solid var(--yellow-500); } @@ -818,10 +851,10 @@ table tbody td { } table tbody tr.tr_last { background-color: var(--background-color); - border-top: 1px solid var(--gray-300); + border-top: 1px solid var(--table-border-color); } table td.cpu-info { - border: 1px solid var(--gray-300); + border: 1px solid var(--table-border-color); } table.disk_status { white-space: nowrap; @@ -833,10 +866,10 @@ table.disk_status thead tr:first-child td { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; - background-color: var(--gray-200); + background-color: var(--usage-disk-background-color); } table.disk_status thead tr:last-child { - border-bottom: 1px solid var(--gray-300); + border-bottom: 1px solid var(--table-border-color); } table.disk_status tr > td { width: 10%; @@ -862,7 +895,7 @@ table.disk_status tbody tr:nth-child(even) { background-color: var(--background-color); } table.disk_status tbody tr:not(.tr_last):hover td { - background-color: rgba(var(--gray-900), 0.1); + background-color: var(--inverse-background-color); /* Opacity of 0.1 */ } table.disk_status.stats tr > td + td { text-align: left; @@ -886,7 +919,7 @@ table.array_status tr > td + td + td { width: auto; } table.array_status td.line { - border-top: 1px solid var(--gray-300); + border-top: 1px solid var(--table-border-color); } table.array_status.noshift { margin-top: 0; @@ -922,9 +955,9 @@ table.access_list tr:first-child td { letter-spacing: 1px; vertical-align: middle; text-align: left; - border: 1px solid var(--gray-300); - border-bottom: 1px solid var(--gray-300); - background-color: var(--gray-200); + border: 1px solid var(--table-border-color); + border-bottom: 1px solid var(--table-border-color); + background-color: var(--usage-disk-background-color); } table.access_list td:first-child { font-weight: normal; @@ -944,7 +977,7 @@ table.share_status thead tr:first-child td { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; - background-color: var(--gray-300); + background-color: var(--mild-background-color); } table.share_status tr > td { text-align: left; @@ -957,7 +990,7 @@ table.share_status tbody tr:nth-child(even) { background-color: var(--background-color); } table.share_status:not(.dashboard) tbody tr:hover td { - background-color: rgba(var(--gray-900), 0.1); + background-color: var(--inverse-background-color); /* Opacity of 0.1 */ } table.share_status tbody tr.alert { color: var(--red-600); @@ -979,10 +1012,10 @@ table.share_status.table tr > td { } table.share_status.dashboard { margin: 0; - border: 1px solid var(--gray-200); + border: 1px solid var(--border-color); } table.share_status.dashboard tbody { - border: 1px solid var(--gray-200); + border: 1px solid var(--border-color); } table.share_status.dashboard tr:first-child > td { height: 3.6rem; @@ -1054,7 +1087,7 @@ table.share_status.dashboard i.control { font-size: 1.4rem !important; margin: 0 3px 0 0; cursor: pointer; - background-color: rgba(var(--gray-900), 0.1); + background-color: var(--inverse-background-color); /* Opacity of 0.1 */ padding: 2px; } [name="arrayOps"] { @@ -1269,9 +1302,9 @@ div.tab [type="radio"] + label { margin-right: 2px; border-top-left-radius: 6px; border-top-right-radius: 6px; - border: 1px solid var(--gray-400); + border: 1px solid var(--disabled-input-border-color); border-bottom: none; - background-color: var(--gray-200); + background-color: var(--radio-background-color); opacity: 0.5; } div.tab [type="radio"] + label img { @@ -1307,12 +1340,12 @@ div.user-list { padding: 10px; margin-right: 10px; margin-bottom: 24px; - border: 1px solid var(--gray-300); + border: 1px solid var(--border-color); border-radius: 5px; line-height: 2rem; height: 10rem; width: 10rem; - background-color: var(--gray-200); + background-color: var(--border-color); } div.user-list img { width: auto; @@ -1322,7 +1355,7 @@ div.user-list img { } div.up { margin-top: -30px; - border: 1px solid var(--gray-200); + border: 1px solid var(--border-color); padding: 4px 6px; overflow: auto; } @@ -1395,7 +1428,7 @@ pre.up { margin-top: -30px; } pre { - border: 1px solid var(--gray-300); + border: 1px solid var(--border-color); font-family: bitstream; font-size: 1.3rem; line-height: 1.8rem; @@ -1415,7 +1448,7 @@ iframe#progressFrame { overflow: hidden; font-family: bitstream; font-size: 1.1rem; - color: var(--gray-500); + color: var(--alt-text-color); white-space: nowrap; z-index: -10; } @@ -1447,7 +1480,7 @@ blockquote { padding: 4px 20px; border-top: 2px solid var(--blue-200); border-bottom: 2px solid var(--blue-200); - color: var(--gray-800); + color: var(--blockquote-text-color); background-color: var(--blue-100); } blockquote.ontop { @@ -1484,14 +1517,14 @@ span.checkmark { left: 6px; height: 14px; width: 14px; - background-color: var(--gray-200); + background-color: var(--checkbox-color); border-radius: 100%; } label.checkbox:hover input ~ .checkmark { - background-color: var(--gray-300); + background-color: var(--checkbox-hover-color); } label.checkbox input:checked ~ .checkmark { - background-color: var(--orange-500); + background-color: var(--brand-orange); } label.checkbox input:disabled ~ .checkmark { opacity: 0.5; @@ -1522,13 +1555,13 @@ a.bannerInfo { background: transparent; } ::-webkit-scrollbar-thumb { - background: var(--gray-400); + background: var(--scrollbar-color); border-radius: 10px; } ::-webkit-scrollbar-corner { - background: var(--gray-400); + background: var(--scrollbar-color); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { - background: var(--gray-500); + background: var(--scrollbar-hover-color); } From 92f311929f215bb2e1d8db25e8b01b135c5e6b12 Mon Sep 17 00:00:00 2001 From: Bailey Matthews Date: Mon, 11 Sep 2023 21:48:00 +0100 Subject: [PATCH 10/99] chore: move to HEX codes --- .../plugins/dynamix/styles/default-white.css | 94 ++++++++++--------- 1 file changed, 49 insertions(+), 45 deletions(-) diff --git a/emhttp/plugins/dynamix/styles/default-white.css b/emhttp/plugins/dynamix/styles/default-white.css index 0344b52f2..193786276 100644 --- a/emhttp/plugins/dynamix/styles/default-white.css +++ b/emhttp/plugins/dynamix/styles/default-white.css @@ -1,46 +1,46 @@ :root { - --gray-000: rgb(255, 255, 255); /* #ffffff */ - --gray-100: rgb(242, 242, 242); /* #f2f2f2 */ - --gray-200: rgb(211, 211, 211); /* #d3d3d3 #d9d9d9 #dcdcdc #d4d5d6 */ - --gray-300: rgb(204, 204, 204); /* gray #c0c0c0 #a8a8a8 */ - --gray-400: rgb(144, 144, 144); /* #909090 #989898 #a2a2a2 #949494 */ - --gray-500: rgb(128, 128, 128); /* #808080 #606060 #585858 */ - --gray-600: rgb(048, 048, 048); /* #303030 #202020 */ - --gray-700: rgb(064, 064, 064); /* #404040 */ - --gray-800: rgb(025, 025, 025); /* #191919 #2b2a29 */ - --gray-900: rgb(029, 027, 027); /* #1c1b1b */ + --gray-000: #ffffff; + --gray-100: #f2f2f2; + --gray-200: #d3d3d3; /* Condensed from: #d9d9d9 #dcdcdc #d4d5d6 */ + --gray-300: #cccccc; /* Condensed from: gray #c0c0c0 #a8a8a8 */ + --gray-400: #909090; /* Condensed from: #989898 #a2a2a2 #949494 */ + --gray-500: #808080; /* Condensed from: #606060 #585858 */ + --gray-600: #303030; /* Condensed from: #202020 */ + --gray-700: #404040; + --gray-800: #191919; /* Condensed from: #2b2a29 */ + --gray-900: #1d1b1b; - --orange-200: rgb(255, 153, 000); /* #ff9900 */ - --orange-300: rgb(230, 138, 000); /* #e68a00 */ - --orange-400: rgb(206, 124, 016); /* #ce7c10 */ - --orange-500: rgb(255, 140, 047); /* #ff8c2f */ - --orange-800: rgb(241, 090, 044); /* #f15a2c */ - --orange-900: rgb(214, 051, 001); /* #d63301 */ + --orange-200: #ff9900; + --orange-300: #e68a00; + --orange-400: #ce7c10; + --orange-500: #ff8c2f; + --orange-800: #f15a2c; + --orange-900: #d63301; - --red-100: rgb(255, 221, 209); /* #ffddd1 */ - --red-300: rgb(255, 158, 158); /* #ff9e9e */ - --red-500: rgb(255, 051, 000); /* #ff3300 */ - --red-600: rgb(240, 000, 012); /* #f0000c */ - --red-700: rgb(222, 017, 000); /* #de1100 */ - --red-800: rgb(226, 040, 040); /* #e22828 */ - --red-900: rgb(148, 028, 000); /* #941c00 */ + --red-100: #ffddd1; + --red-300: #ff9e9e; + --red-500: #ff3300; + --red-600: #f0000c; + --red-700: #de1100; + --red-800: #e22828; + --red-900: #941c00; - --green-100: rgb(223, 242, 191); /* #dff2bf */ - --green-200: rgb(051, 204, 051); /* #33cc33 */ - --green-500: rgb(023, 191, 011); /* #17bf0b */ - --green-800: rgb(079, 138, 016); /* #4f8a10 */ - --green-900: rgb(018, 122, 005); /* #127a05 */ + --green-100: #dff2bf; + --green-200: #33cc33; + --green-500: #17bf0b; + --green-800: #4f8a10; + --green-900: #127a05; - --blue-100: rgb(217, 237, 247); /* #d9edf7 */ - --blue-200: rgb(188, 232, 241); /* #bce8f1 */ - --blue-300: rgb(189, 229, 248); /* #bde5f8 */ - --blue-700: rgb(000, 153, 255); /* #0099ff */ - --blue-800: rgb(072, 109, 186); /* #486dba */ - --blue-900: rgb(059, 089, 152); /* #3b5998 */ + --blue-100: #d9edf7; + --blue-200: #bce8f1; + --blue-300: #bde5f8; + --blue-700: #0099ff; + --blue-800: #486dba; + --blue-900: #3b5998; - --yellow-100: rgb(255, 246, 191); /* #fff6bf */ - --yellow-200: rgb(254, 239, 179); /* #feefb3 */ - --yellow-500: rgb(255, 211, 036); /* #ffd324 */ + --yellow-100: #fff6bf; + --yellow-200: #feefb3; + --yellow-500: #ffd324; --text-color: var(--gray-900); --blockquote-text-color: var(--gray-800); @@ -56,7 +56,6 @@ --inverse-background-color: var(--gray-900); --radio-background-color: var(--gray-200); - --border-color: var(--gray-200); --disabled-border-color: var(--gray-500); --input-border-color: var(--gray-900); @@ -157,7 +156,7 @@ a.info span { border: 1px solid var(--inverse-border-color); /* Opacity of 0.25 */ border-radius: 3px; background-color: var(--inverse-background-color); /* Opacity of 0.95 */ - box-shadow: var(--small-shadow) + box-shadow: var(--small-shadow); } a.info:hover span { display: block; @@ -277,13 +276,14 @@ a.button { from(var(--brand-orange)), to(var(--brand-orange)) ) 100% 100% no-repeat; - background: linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)) 0 0 - no-repeat, + background: linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)) + 0 0 no-repeat, linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)) 0 100% no-repeat, - linear-gradient(0deg, var(--brand-red) 0, var(--brand-red)) 0 100% no-repeat, - linear-gradient(0deg, var(--brand-orange) 0, var(--brand-orange)) 100% 100% - no-repeat; + linear-gradient(0deg, var(--brand-red) 0, var(--brand-red)) 0 100% + no-repeat, + linear-gradient(0deg, var(--brand-orange) 0, var(--brand-orange)) 100% + 100% no-repeat; background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%; } input[type="checkbox"] { @@ -411,7 +411,11 @@ select { transparent 60%, var(--input-border-color) 40% ), - linear-gradient(113.4deg, var(--input-border-color) 40%, transparent 60%); + linear-gradient( + 113.4deg, + var(--input-border-color) 40%, + transparent 60% + ); background-position: calc(100% - 4px), 100%; background-size: 4px 6px, 4px 6px; background-repeat: no-repeat; From 5ca1cc1268ad9e3ad2bd54e845d879a72de3c6a3 Mon Sep 17 00:00:00 2001 From: Bailey Matthews Date: Mon, 11 Sep 2023 21:56:44 +0100 Subject: [PATCH 11/99] chore: format default black theme --- .../plugins/dynamix/styles/default-black.css | 1782 ++++++++++++++--- 1 file changed, 1520 insertions(+), 262 deletions(-) diff --git a/emhttp/plugins/dynamix/styles/default-black.css b/emhttp/plugins/dynamix/styles/default-black.css index fbf0f1706..d4d9a5b64 100644 --- a/emhttp/plugins/dynamix/styles/default-black.css +++ b/emhttp/plugins/dynamix/styles/default-black.css @@ -1,262 +1,1520 @@ -html{font-family:clear-sans,sans-serif;font-size:62.5%;height:100%} -body{font-size:1.3rem;color:#f2f2f2;background-color:#1c1b1b;padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} -img{border:none;text-decoration:none;vertical-align:middle} -p{text-align:justify} -p.centered{text-align:left} -p:empty{display:none} -a:hover{text-decoration:underline} -a{color:#486dba;text-decoration:none} -a.none{color:#f2f2f2} -a.img{text-decoration:none;border:none} -a.info{position:relative} -a.info span{display:none;white-space:nowrap;font-variant:small-caps;position:absolute;top:16px;left:12px;line-height:2rem;color:#f2f2f2;padding:5px 8px;border:1px solid rgba(255,255,255,0.25);border-radius:3px;background-color:rgba(25,25,25,0.95);box-shadow:0 0 3px #303030} -a.info:hover span{display:block;z-index:1} -a.nohand{cursor:default} -a.hand{cursor:pointer;text-decoration:none} -a.static{cursor:default;color:#606060;text-decoration:none} -a.view{display:inline-block;width:20px} -i.spacing{margin-left:-6px} -i.icon{font-size:1.6rem;margin-right:4px;vertical-align:middle} -i.title{margin-right:8px} -i.control{cursor:pointer;color:#606060;font-size:1.8rem} -i.favo{display:none;font-size:1.8rem;position:absolute;margin-left:12px} -hr{border:none;height:1px!important;color:#2b2b2b;background-color:#2b2b2b} -input[type=text],input[type=password],input[type=number],input[type=url],input[type=email],input[type=date],input[type=file],textarea,.textarea{font-family:clear-sans;font-size:1.3rem;background-color:transparent;border:none;border-bottom:1px solid #e5e5e5;padding:4px 0;text-indent:0;min-height:2rem;line-height:2rem;outline:none;width:300px;margin:0 20px 0 0;box-shadow:none;border-radius:0;color:#f2f2f2} -input[type=button],input[type=reset],input[type=submit],button,button[type=button],a.button,.sweet-alert button{font-family:clear-sans;font-size:1.1rem;font-weight:bold;letter-spacing:1.8px;text-transform:uppercase;min-width:86px;margin:10px 12px 10px 0;padding:8px;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;outline:none;border-radius:4px;border:none;color:#ff8c2f;background:-webkit-gradient(linear,left top,right top,from(#e22828),to(#ff8c2f)) 0 0 no-repeat,-webkit-gradient(linear,left top,right top,from(#e22828),to(#ff8c2f)) 0 100% no-repeat,-webkit-gradient(linear,left bottom,left top,from(#e22828),to(#e22828)) 0 100% no-repeat,-webkit-gradient(linear,left bottom,left top,from(#ff8c2f),to(#ff8c2f)) 100% 100% no-repeat;background:linear-gradient(90deg,#e22828 0,#ff8c2f) 0 0 no-repeat,linear-gradient(90deg,#e22828 0,#ff8c2f) 0 100% no-repeat,linear-gradient(0deg,#e22828 0,#e22828) 0 100% no-repeat,linear-gradient(0deg,#ff8c2f 0,#ff8c2f) 100% 100% no-repeat;background-size:100% 2px,100% 2px,2px 100%,2px 100%} -input[type=checkbox]{vertical-align:middle;margin-right:6px} -input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance: none} -input[type=number]{-moz-appearance:textfield} -input:focus[type=text],input:focus[type=password],input:focus[type=number],input:focus[type=url],input:focus[type=email],input:focus[type=file],textarea:focus,.sweet-alert button:focus{background-color:#262626;outline:0} -input:hover[type=button],input:hover[type=reset],input:hover[type=submit],button:hover,button:hover[type=button],a.button:hover,.sweet-alert button:hover{color:#f2f2f2;background:-webkit-gradient(linear,left top,right top,from(#e22828),to(#ff8c2f));background:linear-gradient(90deg,#e22828 0,#ff8c2f)} -input[disabled],textarea[disabled]{color:#f2f2f2;border-bottom-color:#6c6c6c;opacity:0.5;cursor:default} -input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled],button[disabled],button[type=button][disabled],a.button[disabled] -input:hover[type=button][disabled],input:hover[type=reset][disabled],input:hover[type=submit][disabled],button:hover[disabled],button:hover[type=button][disabled],a.button:hover[disabled] -input:active[type=button][disabled],input:active[type=reset][disabled],input:active[type=submit][disabled],button:active[disabled],button:active[type=button][disabled],a.button:active[disabled],.sweet-alert button[disabled]{opacity:0.5;cursor:default;color:#808080;background:-webkit-gradient(linear,left top,right top,from(#404040),to(#808080)) 0 0 no-repeat,-webkit-gradient(linear,left top,right top,from(#404040),to(#808080)) 0 100% no-repeat,-webkit-gradient(linear,left bottom,left top,from(#404040),to(#404040)) 0 100% no-repeat,-webkit-gradient(linear,left bottom,left top,from(#808080),to(#808080)) 100% 100% no-repeat;background:linear-gradient(90deg,#404040 0,#808080) 0 0 no-repeat,linear-gradient(90deg,#404040 0,#808080) 0 100% no-repeat,linear-gradient(0deg,#404040 0,#404040) 0 100% no-repeat,linear-gradient(0deg,#808080 0,#808080) 100% 100% no-repeat;background-size:100% 2px,100% 2px,2px 100%,2px 100%} -input::-webkit-input-placeholder{color:#486dba} -select{-webkit-appearance:none;font-family:clear-sans;font-size:1.3rem;min-width:166px;max-width:300px;padding:5px 8px 5px 0;text-indent:0;margin:0 10px 0 0;border:none;border-bottom:1px solid #e5e5e5;box-shadow:none;border-radius:0;color:#f2f2f2;background-color:transparent;background-image:linear-gradient(66.6deg, transparent 60%, #f2f2f2 40%),linear-gradient(113.4deg, #f2f2f2 40%, transparent 60%);background-position:calc(100% - 4px),100%;background-size:4px 6px,4px 6px;background-repeat:no-repeat;outline:none;display:inline-block;cursor:pointer} -select option{color:#f2f2f2;background-color:#262626} -select:focus{outline:0} -select[disabled]{color:#f2f2f2;border-bottom-color:#6c6c6c;opacity:0.5;cursor:default} -select[name=enter_view]{margin:0;padding:0 12px 0 0;border:none;min-width:auto} -select[name=enter_share]{font-size:1.1rem;padding:0;border:none;min-width:40px;float:right;margin-top:13px;margin-right:20px} -select[name=port_select]{border:none;min-width:54px;padding-top:0;padding-bottom:0} -select.narrow{min-width:76px} -select.auto{min-width:auto} -select.slot{min-width:44rem;max-width:44rem} -input.narrow{width:166px} -input.trim{width:76px;min-width:76px} -textarea{resize:none} -#header{position:absolute;top:0;left:0;width:100%;height:91px;z-index:102;margin:0;color:#1c1b1b;background-color:#f2f2f2;background-size:100% 90px;background-repeat:no-repeat} -#header .logo{float:left;margin-left:10px;color:#e22828;text-align:center} -#header .logo svg{width:160px;display:block;margin:25px 0 8px 0} -#header .block{margin:0;float:right;text-align:right;background-color:rgba(242,242,242,0.2);padding:10px 12px} -#header .text-left{float:left;text-align:right;padding-right:5px;border-right:solid medium #f15a2c} -#header .text-right{float:right;text-align:left;padding-left:5px} -#header .text-right a{color:#1c1b1b} -#header .text-right #licensetype{font-weight:bold;font-style:italic;margin-right:4px} -div.title{margin:20px 0 32px 0;padding:8px 10px;clear:both;border-bottom:1px solid #2b2b2b;background-color:#262626;letter-spacing:1.8px} -div.title span.left{font-size:1.4rem} -div.title span.right{font-size:1.4rem;padding-top:2px;padding-right:10px;float:right} -div.title span img{padding-right:4px} -div.title.shift{margin-top:-30px} -#menu{position:absolute;top:90px;left:0;right:0;display:grid;grid-template-columns:auto max-content;z-index:101} -.nav-tile{height:4rem;line-height:4rem;padding:0;margin:0;font-size:1.2rem;letter-spacing:1.8px;background-color:#f2f2f2;white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin} -.nav-tile::-webkit-scrollbar{height:5px} -.nav-tile.right{text-align:right} -.nav-item,.nav-user{position:relative;display:inline-block;text-align:center;margin:0} -.nav-item a{min-width:0} -.nav-item a span{display:none} -.nav-item .system{vertical-align:middle;padding-bottom:2px} -.nav-item a{color:#1c1b1b;background-color:transparent;text-transform:uppercase;font-weight:bold;display:block;padding:0 10px} -.nav-item a{text-decoration:none;text-decoration-skip-ink:auto;-webkit-text-decoration-skip:objects;-webkit-transition:all .25s ease-out;transition:all .25s ease-out} -.nav-item:after,.nav-user.show:after{border-radius:4px;display:block;background-color:transparent;content:"";width:32px;height:2px;bottom:8px;position:absolute;left:50%;margin-left:-16px;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out;pointer-events:none} -.nav-item:focus:after,.nav-item:hover:after,.nav-user.show:hover:after{background-color:#f15a2c} -.nav-item.active:after{background-color:#1c1b1b} -.nav-user a{color:#1c1b1b;background-color:transparent;display:block;padding:0 10px} -.nav-user .system{vertical-align:middle;padding-bottom:2px} -#clear{clear:both} -#footer{position:fixed;bottom:0;left:0;color:#d4d5d6;background-color:#2b2a29;padding:5px 0;width:100%;height:1.6rem;line-height:1.6rem;text-align:center;z-index:10000} -#statusraid{float:left;padding-left:10px} -#countdown{margin:0 auto} -#copyright{font-family:bitstream;font-size:1.1rem;float:right;padding-right:10px} -.green{color:#4f8a10;padding-left:5px;padding-right:5px} -.red{color:#f0000c;padding-left:5px;padding-right:5px} -.orange{color:#e68a00;padding-left:5px;padding-right:5px} -.blue{color:#486dba;padding-left:5px;padding-right:5px} -.green-text,.passed{color:#4f8a10} -.red-text,.failed{color:#f0000c} -.orange-text,.warning{color:#e68a00} -.blue-text{color:#486dba} -.grey-text{color:#606060} -.green-orb{color:#33cc33} -.grey-orb{color:#c0c0c0} -.blue-orb{color:#0099ff} -.yellow-orb{color:#ff9900} -.red-orb{color:#ff3300} -.usage-bar{float:left;height:2rem;line-height:2rem;width:14rem;padding:1px 1px 1px 2px;margin:8px 12px;border-radius:3px;background-color:#585858;box-shadow:0 1px 0 #989898,inset 0 1px 0 #202020} -.usage-bar>span{display:block;height:100%;text-align:right;border-radius:2px;color:#f2f2f2;background-color:#808080;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)} -.usage-disk{position:relative;height:1.8rem;background-color:#444444;margin:0} -.usage-disk>span:first-child{position:absolute;left:0;margin:0!important;height:1.8rem;background-color:#787878} -.usage-disk>span:last-child{position:relative;top:-0.4rem;right:0;padding-right:6px;z-index:1} -.usage-disk.sys{height:12px;margin:-1.4rem 20px 0 44px} -.usage-disk.sys>span{height:12px;padding:0} -.usage-disk.sys.none{background-color:transparent} -.usage-disk.mm{height:3px;margin:5px 20px 0 0} -.usage-disk.mm>span:first-child{height:3px} -.notice{background:url(../images/notice.png) no-repeat 30px 50%;font-size:1.5rem;text-align:left;vertical-align:middle;padding-left:100px;height:6rem;line-height:6rem} -.notice.shift{margin-top:160px} -.greenbar{background:-webkit-gradient(linear,left top,right top,from(#127a05),to(#17bf0b));background:linear-gradient(90deg,#127a05 0,#17bf0b)} -.orangebar{background:-webkit-gradient(linear,left top,right top,from(#ce7c10),to(#ce7c10));background:linear-gradient(90deg,#ce7c10 0,#ce7c10)} -.redbar{background:-webkit-gradient(linear,left top,right top,from(#941c00),to(#de1100));background:linear-gradient(90deg,#941c00 0,#de1100)} -.graybar{background:-webkit-gradient(linear,left top,right top,from(#949494),to(#d9d9d9));background:linear-gradient(90deg,#949494 0,#d9d9d9)} -table{border-collapse:collapse;border-spacing:0;border-style:hidden;margin:-30px 0 0 0;width:100%;background-color:#191818} -table thead td{line-height:2.8rem;height:2.8rem;white-space:nowrap} -table tbody td{line-height:2.6rem;height:2.6rem;white-space:nowrap} -table tbody tr.alert{color:#f0000c} -table tbody tr.warn{color:#e68a00} -table.unraid thead tr:first-child>td{font-size:1.1rem;text-transform:uppercase;letter-spacing:1px;background-color:#262626} -table.unraid thead tr:last-child{border-bottom:1px solid #2b2b2b} -table.unraid tbody tr:nth-child(even){background-color:#212121} -table.unraid tbody tr:not(.tr_last):hover>td{background-color:rgba(255,255,255,0.1)} -table.unraid tr>td{overflow:hidden;text-overflow:ellipsis;padding-left:8px} -table.unraid tr>td:hover{overflow:visible} -table.legacy{table-layout:auto!important} -table.legacy thead td{line-height:normal;height:auto;padding:7px 0} -table.legacy tbody td{line-height:normal;height:auto;padding:5px 0} -table.disk_status{table-layout:fixed} -table.disk_status tr>td:last-child{padding-right:8px} -table.disk_status tr>td:nth-child(1){width:13%} -table.disk_status tr>td:nth-child(2){width:30%} -table.disk_status tr>td:nth-child(3){width:8%;text-align:right} -table.disk_status tr>td:nth-child(n+4){width:7%;text-align:right} -table.disk_status tr.offline>td:nth-child(2){width:43%} -table.disk_status tr.offline>td:nth-child(n+3){width:5.5%} -table.disk_status tbody tr.tr_last{line-height:3rem;height:3rem;background-color:#212121;border-top:1px solid #2b2b2b} -table.array_status{table-layout:fixed} -table.array_status tr>td{padding-left:8px;white-space:normal} -table.array_status tr>td:nth-child(1){width:33%} -table.array_status tr>td:nth-child(2){width:22%} -table.array_status.noshift{margin-top:0} -table.array_status td.line{border-top:1px solid #2b2b2b} -table.share_status{table-layout:fixed} -table.share_status tr>td{padding-left:8px} -table.share_status tr>td:nth-child(1){width:15%} -table.share_status tr>td:nth-child(2){width:30%} -table.share_status tr>td:nth-child(n+3){width:10%} -table.share_status tr>td:nth-child(5){width:15%} -table.dashboard{margin:0;border:none;background-color:#262626} -table.dashboard tbody{border:1px solid #333333} -table.dashboard tbody td{line-height:normal;height:auto;padding:3px 10px} -table.dashboard tr:first-child>td{height:3.6rem;padding-top:12px;font-size:1.6rem;font-weight:bold;letter-spacing:1.8px;text-transform:none;vertical-align:top} -table.dashboard tr:nth-child(even){background-color:transparent} -table.dashboard tr:last-child>td{padding-bottom:20px} -table.dashboard tr.last>td{padding-bottom:20px} -table.dashboard tr.header>td{padding-bottom:10px} -table.dashboard td{line-height:2.4rem;height:2.4rem} -table.dashboard td.stopgap{height:20px!important;line-height:20px!important;padding:0!important;background-color:#1c1b1b} -table.dashboard td.vpn{font-size:1.1rem;font-weight:bold;text-transform:uppercase;letter-spacing:1px} -table.dashboard td div.section{display:inline-block;vertical-align:top;margin-left:4px;font-size:1.2rem;font-weight:bold;text-transform:uppercase;letter-spacing:1px} -table.dashboard td div.section span{font-weight:normal;text-transform:none;letter-spacing:0;white-space:normal} -table.dashboard td span.info{float:right;margin-right:20px;font-size:1.2rem;font-weight:normal;text-transform:none;letter-spacing:0} -table.dashboard td span.info.title{font-weight:bold} -table.dashboard td span.load{display:inline-block;width:38px;text-align:right} -table.dashboard td span.finish{float:right;margin-right:24px} -table.dashboard i.control{float:right;font-size:1.4rem!important;margin:0 3px 0 0;cursor:pointer;color:#262626;background-color:rgba(255,255,255,0.3);padding:2px;border-radius:5px} -[name=arrayOps]{margin-top:12px} -span.error{color:#f0000c;background-color:#ff9e9e;display:block;width:100%} -span.warn{color:#e68a00;background-color:#feefb3;display:block;width:100%} -span.system{color:#0099ff;background-color:#bde5f8;display:block;width:100%} -span.array{color:#4f8a10;background-color:#dff2bf;display:block;width:100%} -span.login{color:#d63301;background-color:#ffddd1;display:block;width:100%} -span.lite{background-color:#212121} -span.label{font-size:1.2rem;padding:2px 0 2px 6px;margin-right:6px;border-radius:4px;display:inline;width:auto;vertical-align:middle} -span.cpu-speed{display:block;color:#3b5998} -span.status{float:right;font-size:1.4rem;margin-top:30px;padding-right:8px;letter-spacing:1.8px} -span.status.vhshift{margin-top:0;margin-right:-9px} -span.status.vshift{margin-top:-16px} -span.status.hshift{margin-right:-20px} -span.diskinfo{float:left;clear:both;margin-top:5px;padding-left:10px} -span.bitstream{font-family:bitstream;font-size:1.1rem} -span.ucfirst{text-transform:capitalize} -span.strong{font-weight:bold} -span.big{font-size:1.4rem} -span.small{font-size:1.2rem} -span.outer{margin-bottom:20px;margin-right:0} -span.outer.solid{background-color:#262626} -span.hand{cursor:pointer} -span.outer.started>img,span.outer.started>i.img{opacity:1.0} -span.outer.stopped>img,span.outer.stopped>i.img{opacity:0.3} -span.outer.paused>img,span.outer.paused>i.img{opacity:0.6} -span.inner{display:inline-block;vertical-align:top} -span.state{font-size:1.1rem;margin-left:7px} -span.slots{display:inline-block;width:44rem;margin:0!important} -span.slots-left{float:left;margin:0!important} -input.subpool{float:right;margin:2px 0 0 0} -i.padlock{margin-right:8px;cursor:default;vertical-align:middle} -i.nolock{visibility:hidden;margin-right:8px;vertical-align:middle} -i.lock{margin-left:8px;cursor:default;vertical-align:middle} -i.orb{font-size:1.1rem;margin:0 8px 0 3px} -img.img,i.img{width:32px;height:32px;margin-right:10px} -img.icon{margin:-3px 4px 0 0} -img.list{width:auto;max-width:32px;height:32px} -i.list{font-size:32px} -a.list{text-decoration:none;color:inherit} -div.content{position:absolute;top:0;left:0;width:100%;padding-bottom:30px;z-index:-1;clear:both} -div.content.shift{margin-top:1px} -label+.content{margin-top:86px} -div.tabs{position:relative;margin:130px 0 0 0} -div.tab{float:left;margin-top:30px} -div.tab input[id^="tab"]{display:none} -div.tab [type=radio]+label:hover{background-color:transparent;border:1px solid #ff8c2f;border-bottom:none;cursor:pointer;opacity:1} -div.tab [type=radio]:checked+label{cursor:default;background-color:transparent;border:1px solid #ff8c2f;border-bottom:none;opacity:1} -div.tab [type=radio]+label~.content{display:none} -div.tab [type=radio]:checked+label~.content{display:inline} -div.tab [type=radio]+label{position:relative;font-size:1.4rem;letter-spacing:1.8px;padding:4px 10px;margin-right:2px;border-top-left-radius:6px;border-top-right-radius:6px;border:1px solid #6c6c6c;border-bottom:none;background-color:#3c3c3c;opacity:0.5} -div.tab [type=radio]+label img{padding-right:4px} -div.Panel{text-align:center;float:left;margin:0 0 30px 10px;padding-right:50px;height:8rem} -div.Panel a{text-decoration:none} -div.Panel span{height:42px;display:block} -div.Panel:hover .PanelText{text-decoration:underline} -div.Panel img.PanelImg{width:auto;max-width:32px;height:32px} -div.Panel i.PanelIcon{font-size:32px;color:#f2f2f2} -div.user-list{float:left;padding:10px;margin-right:10px;margin-bottom:24px;border:1px solid #2f2f2f;border-radius:5px;line-height:2rem;height:10rem;width:10rem;background-color:#262626} -div.user-list img{width:auto;max-width:48px;height:48px;margin-bottom:16px} -div.up{margin-top:-30px;border:1px solid #2b2b2b;padding:4px 6px;overflow:auto} -div.spinner{text-align:center;cursor:wait} -div.spinner.fixed{display:none;position:fixed;top:0;left:0;z-index:99999;bottom:0;right:0;margin:0} -div.spinner .unraid_mark{height:64px; position:fixed;top:50%;left:50%;margin-top:-16px;margin-left:-64px} -div.spinner .unraid_mark_2,div .unraid_mark_4{animation:mark_2 1.5s ease infinite} -div.spinner .unraid_mark_3{animation:mark_3 1.5s ease infinite} -div.spinner .unraid_mark_6,div .unraid_mark_8{animation:mark_6 1.5s ease infinite} -div.spinner .unraid_mark_7{animation:mark_7 1.5s ease infinite} -div.domain{margin-top:-20px} -@keyframes mark_2{50% {transform:translateY(-40px)} 100% {transform:translateY(0px)}} -@keyframes mark_3{50% {transform:translateY(-62px)} 100% {transform:translateY(0px)}} -@keyframes mark_6{50% {transform:translateY(40px)} 100% {transform:translateY(0px)}} -@keyframes mark_7{50% {transform:translateY(62px)} 100% {transform: translateY(0px)}} -pre.up{margin-top:-30px} -pre{border:1px solid #2b2b2b;font-family:bitstream;font-size:1.3rem;line-height:1.8rem;padding:4px 6px;overflow:auto} -iframe#progressFrame{position:fixed;bottom:32px;left:0;margin:0;padding:8px 8px 0 8px;width:100%;height:1.2rem;line-height:1.2rem;border-style:none;overflow:hidden;font-family:bitstream;font-size:1.1rem;color:#808080;white-space:nowrap;z-index:-10} -dl{margin:0;padding-left:12px;line-height:2.6rem} -dt{width:35%;clear:left;float:left;font-weight:normal;text-align:right;margin-right:4rem} -dd{margin-bottom:12px;white-space:nowrap} -dd p{margin:0 0 4px 0} -dd blockquote{padding-left:0} -blockquote{width:90%;margin:10px auto;text-align:left;padding:4px 20px;border-top:2px solid #bce8f1;border-bottom:2px solid #bce8f1;color:#222222;background-color:#d9edf7} -blockquote.ontop{margin-top:-20px;margin-bottom:46px} -blockquote a{color:#ff8c2f;font-weight:600} -blockquote a:hover,blockquote a:focus{color:#f15a2c} -label.checkbox{display:block;position:relative;padding-left:28px;margin:3px 0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} -label.checkbox input{position:absolute;opacity:0;cursor:pointer} -span.checkmark{position:absolute;top:0;left:6px;height:14px;width:14px;background-color:#2b2b2b;border-radius:100%} -label.checkbox:hover input ~ .checkmark{background-color:#5b5b5b} -label.checkbox input:checked ~ .checkmark{background-color:#ff8c2f} -label.checkbox input:disabled ~ .checkmark{opacity:0.5} -a.bannerDismiss {float:right;cursor:pointer;text-decoration:none;margin-right:1rem} -.bannerDismiss::before {content:"\e92f";font-family:Unraid;color:#e68a00} -a.bannerInfo {cursor:pointer;text-decoration:none} -.bannerInfo::before {content:"\f05a";font-family:fontAwesome;color:#e68a00} -::-webkit-scrollbar{width:8px;height:8px;background:transparent} -::-webkit-scrollbar-thumb{background:gray;border-radius:10px} -::-webkit-scrollbar-corner{background:gray;border-radius:10px} -::-webkit-scrollbar-thumb:hover{background:lightgray} +:root { + --gray-000: #ffffff; + --gray-100: #f2f2f2; + --gray-200: #d3d3d3; /* Condensed from: #d9d9d9 #dcdcdc #d4d5d6 */ + --gray-300: #cccccc; /* Condensed from: gray #c0c0c0 #a8a8a8 */ + --gray-400: #909090; /* Condensed from: #989898 #a2a2a2 #949494 */ + --gray-500: #808080; /* Condensed from: #606060 #585858 */ + --gray-600: #303030; /* Condensed from: #202020 */ + --gray-700: #404040; + --gray-800: #191919; /* Condensed from: #2b2a29 */ + --gray-900: #1d1b1b; + + --orange-200: #ff9900; + --orange-300: #e68a00; + --orange-400: #ce7c10; + --orange-500: #ff8c2f; + --orange-800: #f15a2c; + --orange-900: #d63301; + + --red-100: #ffddd1; + --red-300: #ff9e9e; + --red-500: #ff3300; + --red-600: #f0000c; + --red-700: #de1100; + --red-800: #e22828; + --red-900: #941c00; + + --green-100: #dff2bf; + --green-200: #33cc33; + --green-500: #17bf0b; + --green-800: #4f8a10; + --green-900: #127a05; + + --blue-100: #d9edf7; + --blue-200: #bce8f1; + --blue-300: #bde5f8; + --blue-700: #0099ff; + --blue-800: #486dba; + --blue-900: #3b5998; + + --yellow-100: #fff6bf; + --yellow-200: #feefb3; + --yellow-500: #ffd324; +} + +html { + font-family: clear-sans; + font-size: 62.5%; + height: 100%; +} +body { + font-size: 1.3rem; + color: var(--text-color); + background-color: var(--background-color); + padding: 0; + margin: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +@media (max-width: 1280px) { + #templsate { + min-width: 1260px; + max-width: 1260px; + margin: 0; + } +} +@media (min-width: 1281px) { + #template { + min-width: 1260px; + margin: 0 10px; + } +} +@media (min-width: 1921px) { + #template { + min-width: 1260px; + max-width: 1920px; + margin: 0 auto; + } +} +img { + border: none; + text-decoration: none; + vertical-align: middle; +} +p { + text-align: justify; +} +p.centered { + text-align: left; +} +p:empty { + display: none; +} +a:hover { + text-decoration: underline; +} +a { + color: #486dba; + text-decoration: none; +} +a.none { + color: #f2f2f2; +} +a.img { + text-decoration: none; + border: none; +} +a.info { + position: relative; +} +a.info span { + display: none; + white-space: nowrap; + font-variant: small-caps; + position: absolute; + top: 16px; + left: 12px; + line-height: 2rem; + color: #f2f2f2; + padding: 5px 8px; + border: 1px solid rgba(255, 255, 255, 0.25); + border-radius: 3px; + background-color: rgba(25, 25, 25, 0.95); + box-shadow: 0 0 3px #303030; +} +a.info:hover span { + display: block; + z-index: 1; +} +a.nohand { + cursor: default; +} +a.hand { + cursor: pointer; + text-decoration: none; +} +a.static { + cursor: default; + color: #606060; + text-decoration: none; +} +a.view { + display: inline-block; + width: 20px; +} +i.spacing { + margin-left: -6px; +} +i.icon { + font-size: 1.6rem; + margin-right: 4px; + vertical-align: middle; +} +i.title { + margin-right: 8px; +} +i.control { + cursor: pointer; + color: #606060; + font-size: 1.8rem; +} +hr { + border: none; + height: 1px !important; + color: #2b2b2b; + background-color: #2b2b2b; +} +input[type="text"], +input[type="password"], +input[type="number"], +input[type="url"], +input[type="email"], +input[type="date"], +input[type="file"], +textarea, +.textarea { + font-family: clear-sans; + font-size: 1.3rem; + background-color: transparent; + border: none; + border-bottom: 1px solid #e5e5e5; + padding: 4px 0; + text-indent: 0; + min-height: 2rem; + line-height: 2rem; + outline: none; + width: 300px; + margin: 0 20px 0 0; + box-shadow: none; + border-radius: 0; + color: #f2f2f2; +} +input[type="button"], +input[type="reset"], +input[type="submit"], +button, +button[type="button"], +a.button { + font-family: clear-sans; + font-size: 1.1rem; + font-weight: bold; + letter-spacing: 1.8px; + text-transform: uppercase; + min-width: 86px; + margin: 10px 12px 10px 0; + padding: 8px; + text-align: center; + text-decoration: none; + white-space: nowrap; + cursor: pointer; + outline: none; + border-radius: 4px; + border: none; + color: #ff8c2f; + background: -webkit-gradient( + linear, + left top, + right top, + from(#e22828), + to(#ff8c2f) + ) + 0 0 no-repeat, + -webkit-gradient( + linear, + left top, + right top, + from(#e22828), + to(#ff8c2f) + ) 0 100% no-repeat, + -webkit-gradient( + linear, + left bottom, + left top, + from(#e22828), + to(#e22828) + ) 0 100% no-repeat, + -webkit-gradient( + linear, + left bottom, + left top, + from(#ff8c2f), + to(#ff8c2f) + ) 100% 100% no-repeat; + background: linear-gradient(90deg, #e22828 0, #ff8c2f) 0 0 no-repeat, + linear-gradient(90deg, #e22828 0, #ff8c2f) 0 100% no-repeat, + linear-gradient(0deg, #e22828 0, #e22828) 0 100% no-repeat, + linear-gradient(0deg, #ff8c2f 0, #ff8c2f) 100% 100% no-repeat; + background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%; +} +input[type="checkbox"] { + vertical-align: middle; + margin-right: 6px; +} +input[type="number"]::-webkit-outer-spin-button, +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; +} +input[type="number"] { + -moz-appearance: textfield; +} +input:focus[type="text"], +input:focus[type="password"], +input:focus[type="number"], +input:focus[type="url"], +input:focus[type="email"], +input:focus[type="file"], +textarea:focus { + background-color: #262626; + outline: 0; +} +input:hover[type="button"], +input:hover[type="reset"], +input:hover[type="submit"], +button:hover, +button:hover[type="button"], +a.button:hover { + color: #f2f2f2; + background: -webkit-gradient( + linear, + left top, + right top, + from(#e22828), + to(#ff8c2f) + ); + background: linear-gradient(90deg, #e22828 0, #ff8c2f); +} +input[disabled], +textarea[disabled] { + color: #f2f2f2; + border-bottom-color: #6c6c6c; + opacity: 0.5; + cursor: default; +} +input[type="button"][disabled], +input[type="reset"][disabled], +input[type="submit"][disabled], +button[disabled], +button[type="button"][disabled], +a.button[disabled] input:hover[type="button"][disabled], +input:hover[type="reset"][disabled], +input:hover[type="submit"][disabled], +button:hover[disabled], +button:hover[type="button"][disabled], +a.button:hover[disabled] input:active[type="button"][disabled], +input:active[type="reset"][disabled], +input:active[type="submit"][disabled], +button:active[disabled], +button:active[type="button"][disabled], +a.button:active[disabled] { + cursor: default; + color: #808080; + background: -webkit-gradient( + linear, + left top, + right top, + from(#404040), + to(#808080) + ) + 0 0 no-repeat, + -webkit-gradient( + linear, + left top, + right top, + from(#404040), + to(#808080) + ) 0 100% no-repeat, + -webkit-gradient( + linear, + left bottom, + left top, + from(#404040), + to(#404040) + ) 0 100% no-repeat, + -webkit-gradient( + linear, + left bottom, + left top, + from(#808080), + to(#808080) + ) 100% 100% no-repeat; + background: linear-gradient(90deg, #404040 0, #808080) 0 0 no-repeat, + linear-gradient(90deg, #404040 0, #808080) 0 100% no-repeat, + linear-gradient(0deg, #404040 0, #404040) 0 100% no-repeat, + linear-gradient(0deg, #808080 0, #808080) 100% 100% no-repeat; + background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%; +} +input::-webkit-input-placeholder { + color: #486dba; +} +select { + -webkit-appearance: none; + font-family: clear-sans; + font-size: 1.3rem; + min-width: 166px; + max-width: 300px; + padding: 5px 8px 5px 0; + text-indent: 0; + margin: 0 10px 0 0; + border: none; + border-bottom: 1px solid #e5e5e5; + box-shadow: none; + border-radius: 0; + color: #f2f2f2; + background-color: transparent; + background-image: linear-gradient(66.6deg, transparent 60%, #f2f2f2 40%), + linear-gradient(113.4deg, #f2f2f2 40%, transparent 60%); + background-position: calc(100% - 4px), 100%; + background-size: 4px 6px, 4px 6px; + background-repeat: no-repeat; + outline: none; + display: inline-block; + cursor: pointer; +} +select option { + color: #f2f2f2; + background-color: #262626; +} +select:focus { + outline: 0; +} +select[disabled] { + color: #f2f2f2; + border-bottom-color: #6c6c6c; + opacity: 0.5; + cursor: default; +} +select[name="enter_view"] { + margin: 0; + padding: 0 12px 0 0; + border: none; + min-width: auto; +} +select[name="enter_share"] { + font-size: 1.1rem; + padding: 0; + border: none; + min-width: 40px; + float: right; + margin-top: 13px; + margin-right: 20px; +} +select[name="port_select"] { + border: none; + min-width: 54px; + padding-top: 0; + padding-bottom: 0; +} +select.narrow { + min-width: 76px; +} +select.auto { + min-width: auto; +} +select.slot { + min-width: 44rem; + max-width: 44rem; +} +input.narrow { + width: 166px; +} +input.trim { + width: 76px; + min-width: 76px; +} +textarea { + resize: none; +} +#header { + position: absolute; + top: 0; + left: 0; + width: 100%; + min-width: 1260px; + height: 91px; + z-index: 102; + margin: 0; + color: #1c1b1b; + background-color: #f2f2f2; + background-size: 100% 90px; + background-repeat: no-repeat; +} +#header .logo { + float: left; + margin-left: 10px; + color: #e22828; + text-align: center; +} +#header .logo svg { + width: 160px; + display: block; + margin: 25px 0 8px 0; +} +#header .block { + margin: 0; + float: right; + text-align: right; + background-color: rgba(242, 242, 242, 0.2); + padding: 10px 12px; +} +#header .text-left { + float: left; + text-align: right; + padding-right: 5px; + border-right: solid medium #f15a2c; +} +#header .text-right { + float: right; + text-align: left; + padding-left: 5px; +} +#header .text-right a { + color: #1c1b1b; +} +#header .text-right #licensetype { + font-weight: bold; + font-style: italic; + margin-right: 4px; +} +div.title { + margin: 20px 0 32px 0; + padding: 8px 10px; + clear: both; + border-bottom: 1px solid #2b2b2b; + background-color: #262626; + letter-spacing: 1.8px; +} +div.title span.left { + font-size: 1.4rem; +} +div.title span.right { + font-size: 1.4rem; + padding-top: 2px; + padding-right: 10px; + float: right; +} +div.title span img { + padding-right: 4px; +} +div.title.shift { + margin-top: -30px; +} +#menu { + position: absolute; + top: 90px; + left: 0; + right: 0; + display: grid; + grid-template-columns: auto max-content; + z-index: 101; +} +.nav-tile { + height: 4rem; + line-height: 4rem; + padding: 0; + margin: 0; + font-size: 1.2rem; + letter-spacing: 1.8px; + background-color: #f2f2f2; + white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; + scrollbar-width: thin; +} +.nav-tile::-webkit-scrollbar { + height: 8px; +} +.nav-tile.right { + text-align: right; +} +.nav-item, +.nav-user { + position: relative; + display: inline-block; + text-align: center; + margin: 0; +} +.nav-item a { + min-width: 0; +} +.nav-item a span { + display: none; +} +.nav-item .system { + vertical-align: middle; + padding-bottom: 2px; +} +.nav-item a { + color: #1c1b1b; + background-color: transparent; + text-transform: uppercase; + font-weight: bold; + display: block; + padding: 0 10px; +} +.nav-item a { + text-decoration: none; + text-decoration-skip-ink: auto; + -webkit-text-decoration-skip: objects; + -webkit-transition: all 0.25s ease-out; + transition: all 0.25s ease-out; +} +.nav-item:after, +.nav-user.show:after { + border-radius: 4px; + display: block; + background-color: transparent; + content: ""; + width: 32px; + height: 2px; + bottom: 8px; + position: absolute; + left: 50%; + margin-left: -16px; + -webkit-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; + pointer-events: none; +} +.nav-item:focus:after, +.nav-item:hover:after, +.nav-user.show:hover:after { + background-color: #f15a2c; +} +.nav-item.active:after { + background-color: #1c1b1b; +} +.nav-user a { + color: #1c1b1b; + background-color: transparent; + display: block; + padding: 0 10px; +} +.nav-user .system { + vertical-align: middle; + padding-bottom: 2px; +} +#clear { + clear: both; +} +#footer { + position: fixed; + bottom: 0; + left: 0; + color: #d4d5d6; + background-color: #2b2a29; + padding: 5px 0; + width: 100%; + height: 1.6rem; + line-height: 1.6rem; + text-align: center; + z-index: 10000; +} +#statusraid { + float: left; + padding-left: 10px; +} +#countdown { + margin: 0 auto; +} +#copyright { + font-family: bitstream; + font-size: 1.1rem; + float: right; + padding-right: 10px; +} +.green { + color: #4f8a10; + padding-left: 5px; + padding-right: 5px; +} +.red { + color: #f0000c; + padding-left: 5px; + padding-right: 5px; +} +.orange { + color: #e68a00; + padding-left: 5px; + padding-right: 5px; +} +.blue { + color: #486dba; + padding-left: 5px; + padding-right: 5px; +} +.green-text, +.passed { + color: #4f8a10; +} +.red-text, +.failed { + color: #f0000c; +} +.orange-text, +.warning { + color: #e68a00; +} +.blue-text { + color: #486dba; +} +.grey-text { + color: #606060; +} +.green-orb { + color: #33cc33; +} +.grey-orb { + color: #c0c0c0; +} +.blue-orb { + color: #0099ff; +} +.yellow-orb { + color: #ff9900; +} +.red-orb { + color: #ff3300; +} +.usage-bar { + float: left; + height: 2rem; + line-height: 2rem; + width: 14rem; + padding: 1px 1px 1px 2px; + margin: 8px 12px; + border-radius: 3px; + background-color: #585858; + box-shadow: 0 1px 0 #989898, inset 0 1px 0 #202020; +} +.usage-bar > span { + display: block; + height: 100%; + text-align: right; + border-radius: 2px; + color: #f2f2f2; + background-color: #808080; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); +} +.usage-disk { + position: relative; + height: 1.8rem; + background-color: #444444; + margin: 0; +} +.usage-disk > span:first-child { + position: absolute; + left: 0; + margin: 0 !important; + height: 1.8rem; + background-color: #787878; +} +.usage-disk > span:last-child { + position: relative; + padding-right: 4px; + z-index: 1; +} +.usage-disk.sys { + height: 12px; + margin: -15px 20px 0 44px; +} +.usage-disk.sys > span { + height: 12px; + padding: 0; +} +.usage-disk.sys.none { + background-color: transparent; +} +.usage-disk.mm { + height: 3px; + margin: 5px 20px 0 0; +} +.usage-disk.mm > span:first-child { + height: 3px; +} +.notice { + background: #fff6bf url(../images/notice.png) no-repeat; + background-position: 60px 50%; + color: #1c1b1b; + font-size: 1.4rem; + text-align: left; + padding: 15px 0 15px 130px; + display: block; + height: 7rem; + line-height: 7rem; + vertical-align: middle; + border-top: 2px solid #ffd324; + border-bottom: 2px solid #ffd324; +} +.notice.shift { + margin-top: 160px; +} +.greenbar { + background: -webkit-gradient( + linear, + left top, + right top, + from(#127a05), + to(#17bf0b) + ); + background: linear-gradient(90deg, #127a05 0, #17bf0b); +} +.orangebar { + background: -webkit-gradient( + linear, + left top, + right top, + from(#ce7c10), + to(#ce7c10) + ); + background: linear-gradient(90deg, #ce7c10 0, #ce7c10); +} +.redbar { + background: -webkit-gradient( + linear, + left top, + right top, + from(#941c00), + to(#de1100) + ); + background: linear-gradient(90deg, #941c00 0, #de1100); +} +.graybar { + background: -webkit-gradient( + linear, + left top, + right top, + from(#949494), + to(#d9d9d9) + ); + background: linear-gradient(90deg, #949494 0, #d9d9d9); +} +table { + border-collapse: collapse; + border-spacing: 0; + border-style: hidden; + margin: -30px 0 0 0; + width: 100%; + background-color: #191818; +} +table thead td { + padding: 7px 0; +} +table tbody td { + padding: 5px 0; +} +table tbody tr.tr_last { + background-color: #212121; + border-top: 1px solid #2b2b2b; +} +table td.cpu-info { + border: 1px solid #2b2b2b; +} +table.disk_status { + white-space: nowrap; +} +table.disk_status td span { + margin-left: 10px; +} +table.disk_status thead tr:first-child td { + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 1px; + background-color: #262626; +} +table.disk_status thead tr:last-child { + border-bottom: 1px solid #2b2b2b; +} +table.disk_status tr > td { + width: 10%; + padding-left: 12px; + padding-right: 0; + white-space: nowrap; +} +table.disk_status tr > td + td { + width: auto; +} +table.disk_status tr > td + td + td { + width: 6.5%; + text-align: center; + padding-left: 4px; + padding-right: 8px; +} +table.disk_status tr > td + td + td + td { + text-align: right; + padding-left: 0; + padding-right: 12px; +} +table.disk_status tbody tr:nth-child(even) { + background-color: #212121; +} +table.disk_status tbody tr:not(.tr_last):hover td { + background-color: rgba(255, 255, 255, 0.1); +} +table.disk_status.stats tr > td + td { + text-align: left; + padding-left: 0; + padding-right: 12px; +} +table.array_status td { + padding: 4px 0; +} +table.array_status tr > td { + text-align: left; + white-space: nowrap; + padding-left: 12px; + width: 30%; +} +table.array_status tr > td + td { + padding-left: 2px; + width: 20%; +} +table.array_status tr > td + td + td { + width: auto; +} +table.array_status td.line { + border-top: 1px solid #2b2b2b; +} +table.array_status.noshift { + margin-top: 0; +} +table.settings { + margin: 0; + padding: 0; + background-color: transparent; +} +table.settings td:first-child { + width: 35%; + padding-left: 12px; +} +table.settings td + td { + padding-left: 8px; +} +table.settings.shifted { + padding: 0; + margin-left: 0; + margin-top: 0; +} +table.settings.shifted td { + padding-left: 0; +} +table.access_list { + border-spacing: 0; + margin-top: 10px; + border: none; +} +table.access_list tr:first-child td { + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 1px; + vertical-align: middle; + text-align: left; + border: 1px solid #2b2b2b; + border-bottom: 1px solid #2b2b2b; + background-color: #262626; +} +table.access_list td:first-child { + font-weight: normal; + width: 35%; + padding-left: 12px; +} +table.access_list tr:first-child td:first-child { + font-weight: normal; +} +table.access_list tr > td + td { + white-space: nowrap; +} +table.share_status { + white-space: nowrap; +} +table.share_status thead tr:first-child td { + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 1px; + background-color: #262626; +} +table.share_status tr > td { + text-align: left; + padding-left: 12px; +} +table.share_status tr > td + td { + padding-left: 0; +} +table.share_status tbody tr:nth-child(even) { + background-color: #212121; +} +table.share_status:not(.dashboard) tbody tr:hover td { + background-color: rgba(255, 255, 255, 0.1); +} +table.share_status tbody tr.alert { + color: #f0000c; +} +table.share_status tbody tr.warn { + color: #e68a00; +} +table.share_status.fixed tr > td + td { + min-width: 39px; + font-size: 1.1rem; + text-align: center; + padding: 0; +} +table.share_status.table { + margin-top: 36px; +} +table.share_status.table tr > td { + width: 50%; +} +table.share_status.dashboard { + margin: 0; + border: 1px solid #2b2b2b; +} +table.share_status.dashboard tbody { + border: 1px solid #2b2b2b; +} +table.share_status.dashboard tr:first-child > td { + height: 3.6rem; + padding-top: 12px; + font-size: 1.6rem; + font-weight: bold; + letter-spacing: 1.8px; + text-transform: none; + vertical-align: top; +} +table.share_status.dashboard tr:nth-child(even) { + background-color: transparent; +} +table.share_status.dashboard tr:last-child > td { + padding-bottom: 20px; +} +table.share_status.dashboard tr.last > td { + padding-bottom: 20px; +} +table.share_status.dashboard tr.header td { + padding-bottom: 10px; +} +table.share_status.dashboard td { + padding: 3px 10px; +} +table.share_status.dashboard td.vpn { + font-size: 1.1rem; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; +} +table.share_status.dashboard td div.section { + display: inline-block; + vertical-align: top; + margin-left: 4px; + font-size: 1.2rem; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; +} +table.share_status.dashboard td div.section span { + font-weight: normal; + text-transform: none; + letter-spacing: 0; + white-space: normal; +} +table.share_status.dashboard td span.info { + float: right; + margin-right: 20px; + font-size: 1.2rem; + font-weight: normal; + text-transform: none; + letter-spacing: 0; +} +table.share_status.dashboard td span.info.title { + font-weight: bold; +} +table.share_status.dashboard td span.load { + display: inline-block; + width: 38px; + text-align: right; +} +table.share_status.dashboard td span.finish { + float: right; + margin-right: 24px; +} +table.share_status.dashboard i.control { + float: right; + font-size: 1.4rem !important; + margin: 0 3px 0 0; + cursor: pointer; + background-color: rgba(255, 255, 255, 0.1); + padding: 2px; +} +[name="arrayOps"] { + margin-top: 12px; +} +span.error { + color: #f0000c; + background-color: #ff9e9e; + display: block; + width: 100%; +} +span.warn { + color: #e68a00; + background-color: #feefb3; + display: block; + width: 100%; +} +span.system { + color: #0099ff; + background-color: #bde5f8; + display: block; + width: 100%; +} +span.array { + color: #4f8a10; + background-color: #dff2bf; + display: block; + width: 100%; +} +span.login { + color: #d63301; + background-color: #ffddd1; + display: block; + width: 100%; +} +span.lite { + background-color: #212121; +} +span.label { + font-size: 1.2rem; + padding: 2px 0 2px 6px; + margin-right: 6px; + border-radius: 4px; + display: inline; + width: auto; + vertical-align: middle; +} +span.cpu-speed { + display: block; + color: #3b5998; +} +span.status { + float: right; + font-size: 1.4rem; + margin-top: 30px; + padding-right: 8px; + letter-spacing: 1.8px; +} +span.status.vhshift { + margin-top: 0; + margin-right: -9px; +} +span.status.vshift { + margin-top: -16px; +} +span.status.hshift { + margin-right: -20px; +} +span.diskinfo { + float: left; + clear: both; + margin-top: 5px; + padding-left: 10px; +} +span.bitstream { + font-family: bitstream; + font-size: 1.1rem; +} +span.ucfirst { + text-transform: capitalize; +} +span.strong { + font-weight: bold; +} +span.big { + font-size: 1.4rem; +} +span.small { + font-size: 1.2rem; +} +span.outer { + margin-bottom: 20px; + margin-right: 0; +} +span.outer.solid { + background-color: #191818; +} +span.hand { + cursor: pointer; +} +span.outer.started > img, +span.outer.started > i.img { + opacity: 1; +} +span.outer.stopped > img, +span.outer.stopped > i.img { + opacity: 0.3; +} +span.outer.paused > img, +span.outer.paused > i.img { + opacity: 0.6; +} +span.inner { + display: inline-block; + vertical-align: top; +} +span.state { + font-size: 1.1rem; + margin-left: 7px; +} +i.padlock { + margin-right: 8px; + cursor: default; + vertical-align: middle; +} +i.nolock { + visibility: hidden; + margin-right: 8px; + vertical-align: middle; +} +i.lock { + margin-left: 8px; + cursor: default; + vertical-align: middle; +} +i.orb { + font-size: 1.1rem; + margin: 0 8px 0 3px; +} +img.img, +i.img { + width: 32px; + height: 32px; + margin-right: 10px; +} +img.icon { + margin: -3px 4px 0 0; +} +img.list { + width: auto; + max-width: 32px; + height: 32px; +} +i.list { + font-size: 32px; +} +a.list { + text-decoration: none; + color: inherit; +} +div.content { + position: absolute; + top: 0; + left: 0; + width: 100%; + padding-bottom: 30px; + z-index: -1; + clear: both; +} +div.content.shift { + margin-top: 1px; +} +label + .content { + margin-top: 86px; +} +div.tabs { + position: relative; + margin: 130px 0 0 0; +} +div.tab { + float: left; + margin-top: 30px; +} +div.tab input[id^="tab"] { + display: none; +} +div.tab [type="radio"] + label:hover { + background-color: transparent; + border: 1px solid #ff8c2f; + border-bottom: none; + cursor: pointer; + opacity: 1; +} +div.tab [type="radio"]:checked + label { + cursor: default; + background-color: transparent; + border: 1px solid #ff8c2f; + border-bottom: none; + opacity: 1; +} +div.tab [type="radio"] + label ~ .content { + display: none; +} +div.tab [type="radio"]:checked + label ~ .content { + display: inline; +} +div.tab [type="radio"] + label { + position: relative; + font-size: 1.4rem; + letter-spacing: 1.8px; + padding: 4px 10px; + margin-right: 2px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + border: 1px solid #6c6c6c; + border-bottom: none; + background-color: #3c3c3c; + opacity: 0.5; +} +div.tab [type="radio"] + label img { + padding-right: 4px; +} +div.Panel { + text-align: center; + float: left; + margin: 0 30px 30px 12px; + height: 8rem; +} +div.Panel a { + text-decoration: none; +} +div.Panel span { + height: 42px; + display: block; +} +div.Panel:hover .PanelText { + text-decoration: underline; +} +div.Panel img.PanelImg { + width: auto; + max-width: 32px; + height: 32px; +} +div.Panel i.PanelIcon { + font-size: 32px; + color: #f2f2f2; +} +div.user-list { + float: left; + padding: 10px; + margin-right: 10px; + margin-bottom: 24px; + border: 1px solid #2f2f2f; + border-radius: 5px; + line-height: 2rem; + height: 10rem; + width: 10rem; + background-color: #262626; +} +div.user-list img { + width: auto; + max-width: 48px; + height: 48px; + margin-bottom: 16px; +} +div.up { + margin-top: -30px; + border: 1px solid #2b2b2b; + padding: 4px 6px; + overflow: auto; +} +div.spinner { + margin: 48px auto; + text-align: center; +} +div.spinner.fixed { + display: none; + position: fixed; + top: 50%; + left: 50%; + margin-top: -16px; + margin-left: -64px; + z-index: 10000; +} +div.spinner .unraid_mark { + height: 64px; +} +div.spinner .unraid_mark_2, +div .unraid_mark_4 { + animation: mark_2 1.5s ease infinite; +} +div.spinner .unraid_mark_3 { + animation: mark_3 1.5s ease infinite; +} +div.spinner .unraid_mark_6, +div .unraid_mark_8 { + animation: mark_6 1.5s ease infinite; +} +div.spinner .unraid_mark_7 { + animation: mark_7 1.5s ease infinite; +} +div.domain { + margin-top: -20px; +} +@keyframes mark_2 { + 50% { + transform: translateY(-40px); + } + 100% { + transform: translateY(0px); + } +} +@keyframes mark_3 { + 50% { + transform: translateY(-62px); + } + 100% { + transform: translateY(0px); + } +} +@keyframes mark_6 { + 50% { + transform: translateY(40px); + } + 100% { + transform: translateY(0px); + } +} +@keyframes mark_7 { + 50% { + transform: translateY(62px); + } + 100% { + transform: translateY(0px); + } +} +pre.up { + margin-top: -30px; +} +pre { + border: 1px solid #2b2b2b; + font-family: bitstream; + font-size: 1.3rem; + line-height: 1.8rem; + padding: 4px 6px; + overflow: auto; +} +iframe#progressFrame { + position: fixed; + bottom: 32px; + left: 0; + margin: 0; + padding: 8px 8px 0 8px; + width: 100%; + height: 1.2rem; + line-height: 1.2rem; + border-style: none; + overflow: hidden; + font-family: bitstream; + font-size: 1.1rem; + color: #808080; + white-space: nowrap; + z-index: -10; +} +dl { + margin: 0; + padding-left: 12px; + line-height: 2.6rem; +} +dt { + clear: left; + float: left; + width: 35%; + font-weight: normal; +} +dd { + margin-bottom: 12px; + white-space: nowrap; +} +dd p { + margin: 0 0 4px 0; +} +dd blockquote { + padding-left: 0; +} +blockquote { + width: 90%; + margin: 10px auto; + text-align: left; + padding: 4px 20px; + border-top: 2px solid #bce8f1; + border-bottom: 2px solid #bce8f1; + color: #222222; + background-color: #d9edf7; +} +blockquote.ontop { + margin-top: -20px; + margin-bottom: 46px; +} +blockquote a { + color: #ff8c2f; + font-weight: 600; +} +blockquote a:hover, +blockquote a:focus { + color: #f15a2c; +} +label.checkbox { + display: block; + position: relative; + padding-left: 28px; + margin: 3px 0; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +label.checkbox input { + position: absolute; + opacity: 0; + cursor: pointer; +} +span.checkmark { + position: absolute; + top: 0; + left: 6px; + height: 14px; + width: 14px; + background-color: #2b2b2b; + border-radius: 100%; +} +label.checkbox:hover input ~ .checkmark { + background-color: #5b5b5b; +} +label.checkbox input:checked ~ .checkmark { + background-color: #ff8c2f; +} +label.checkbox input:disabled ~ .checkmark { + opacity: 0.5; +} +a.bannerDismiss { + float: right; + cursor: pointer; + text-decoration: none; + margin-right: 1rem; +} +.bannerDismiss::before { + content: "\e92f"; + font-family: Unraid; + color: #e68a00; +} +a.bannerInfo { + cursor: pointer; + text-decoration: none; +} +.bannerInfo::before { + content: "\f05a"; + font-family: fontAwesome; + color: #e68a00; +} +::-webkit-scrollbar { + width: 10px; + height: 10px; + background: transparent; +} +::-webkit-scrollbar-thumb { + background: gray; + border-radius: 10px; +} +::-webkit-scrollbar-corner { + background: gray; + border-radius: 10px; +} +::-webkit-scrollbar-thumb:hover { + background: lightgray; +} From 5dfc79e231ee4138eb4d14a92b25b366aa554bdf Mon Sep 17 00:00:00 2001 From: Bailey Matthews Date: Mon, 11 Sep 2023 22:00:15 +0100 Subject: [PATCH 12/99] feat: split theme files --- .../plugins/dynamix/styles/default-base.css | 1491 ++++++++++++++++ .../dynamix/styles/default-color-pallet.css | 44 + .../plugins/dynamix/styles/default-white.css | 1535 ----------------- 3 files changed, 1535 insertions(+), 1535 deletions(-) create mode 100644 emhttp/plugins/dynamix/styles/default-base.css create mode 100644 emhttp/plugins/dynamix/styles/default-color-pallet.css diff --git a/emhttp/plugins/dynamix/styles/default-base.css b/emhttp/plugins/dynamix/styles/default-base.css new file mode 100644 index 000000000..21f77746e --- /dev/null +++ b/emhttp/plugins/dynamix/styles/default-base.css @@ -0,0 +1,1491 @@ +html { + font-family: clear-sans; + font-size: 62.5%; + height: 100%; +} +body { + font-size: 1.3rem; + color: var(--text-color); + background-color: var(--background-color); + padding: 0; + margin: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +@media (max-width: 1280px) { + #template { + min-width: 1260px; + max-width: 1260px; + margin: 0; + } +} +@media (min-width: 1281px) { + #template { + min-width: 1260px; + margin: 0 10px; + } +} +@media (min-width: 1921px) { + #template { + min-width: 1260px; + max-width: 1920px; + margin: 0 auto; + } +} +img { + border: none; + text-decoration: none; + vertical-align: middle; +} +p { + text-align: justify; +} +p.centered { + text-align: left; +} +p:empty { + display: none; +} +a:hover { + text-decoration: underline; +} +a { + color: var(--blue-800); + text-decoration: none; +} +a.none { + color: var(--text-color); +} +a.img { + text-decoration: none; + border: none; +} +a.info { + position: relative; +} +a.info span { + display: none; + white-space: nowrap; + font-variant: small-caps; + position: absolute; + top: 16px; + left: 12px; + line-height: 2rem; + color: var(--inverse-text-color); + padding: 5px 8px; + border: 1px solid var(--inverse-border-color); /* Opacity of 0.25 */ + border-radius: 3px; + background-color: var(--inverse-background-color); /* Opacity of 0.95 */ + box-shadow: var(--small-shadow); +} +a.info:hover span { + display: block; + z-index: 1; +} +a.nohand { + cursor: default; +} +a.hand { + cursor: pointer; + text-decoration: none; +} +a.static { + cursor: default; + color: var(--alt-text-color); + text-decoration: none; +} +a.view { + display: inline-block; + width: 20px; +} +i.spacing { + margin-left: -6px; +} +i.icon { + font-size: 1.6rem; + margin-right: 4px; + vertical-align: middle; +} +i.title { + margin-right: 8px; +} +i.control { + cursor: pointer; + color: var(--alt-text-color); + font-size: 1.8rem; +} +hr { + border: none; + height: 1px !important; + color: var(--hr-color); + background-color: var(--hr-color); +} +input[type="text"], +input[type="password"], +input[type="number"], +input[type="url"], +input[type="email"], +input[type="date"], +input[type="file"], +textarea, +.textarea { + font-family: clear-sans; + font-size: 1.3rem; + background-color: transparent; + border: none; + border-bottom: 1px solid var(--input-border-color); + padding: 4px 0; + text-indent: 0; + min-height: 2rem; + line-height: 2rem; + outline: none; + width: 300px; + margin: 0 20px 0 0; + box-shadow: none; + border-radius: 0; + color: var(--text-color); +} +input[type="button"], +input[type="reset"], +input[type="submit"], +button, +button[type="button"], +a.button { + font-family: clear-sans; + font-size: 1.1rem; + font-weight: bold; + letter-spacing: 1.8px; + text-transform: uppercase; + min-width: 86px; + margin: 10px 12px 10px 0; + padding: 8px; + text-align: center; + text-decoration: none; + white-space: nowrap; + cursor: pointer; + outline: none; + border-radius: 4px; + border: none; + color: var(--brand-orange); + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--brand-red)), + to(var(--brand-orange)) + ) + 0 0 no-repeat, + -webkit-gradient( + linear, + left top, + right top, + from(var(--brand-red)), + to(var(--brand-orange)) + ) 0 100% no-repeat, + -webkit-gradient( + linear, + left bottom, + left top, + from(var(--brand-red)), + to(var(--brand-red)) + ) 0 100% no-repeat, + -webkit-gradient( + linear, + left bottom, + left top, + from(var(--brand-orange)), + to(var(--brand-orange)) + ) 100% 100% no-repeat; + background: linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)) + 0 0 no-repeat, + linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)) 0 100% + no-repeat, + linear-gradient(0deg, var(--brand-red) 0, var(--brand-red)) 0 100% + no-repeat, + linear-gradient(0deg, var(--brand-orange) 0, var(--brand-orange)) 100% + 100% no-repeat; + background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%; +} +input[type="checkbox"] { + vertical-align: middle; + margin-right: 6px; +} +input[type="number"]::-webkit-outer-spin-button, +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; +} +input[type="number"] { + -moz-appearance: textfield; +} +input:focus[type="text"], +input:focus[type="password"], +input:focus[type="number"], +input:focus[type="url"], +input:focus[type="email"], +input:focus[type="file"], +textarea:focus { + background-color: var(--mild-background-color); + outline: 0; +} +input:hover[type="button"], +input:hover[type="reset"], +input:hover[type="submit"], +button:hover, +button:hover[type="button"], +a.button:hover { + color: var(--inverse-text-color); + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--brand-red)), + to(var(--brand-orange)) + ); + background: linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)); +} +input[disabled], +textarea[disabled] { + color: var(--text-color); + border-bottom-color: var(--disabled-input-border-color); + opacity: 0.5; + cursor: default; +} +input[type="button"][disabled], +input[type="reset"][disabled], +input[type="submit"][disabled], +button[disabled], +button[type="button"][disabled], +a.button[disabled] input:hover[type="button"][disabled], +input:hover[type="reset"][disabled], +input:hover[type="submit"][disabled], +button:hover[disabled], +button:hover[type="button"][disabled], +a.button:hover[disabled] input:active[type="button"][disabled], +input:active[type="reset"][disabled], +input:active[type="submit"][disabled], +button:active[disabled], +button:active[type="button"][disabled], +a.button:active[disabled] { + cursor: default; + color: var(--disabled-text-color); + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--gray-700)), + to(var(--gray-500)) + ) + 0 0 no-repeat, + -webkit-gradient( + linear, + left top, + right top, + from(var(--gray-700)), + to(var(--gray-500)) + ) 0 100% no-repeat, + -webkit-gradient( + linear, + left bottom, + left top, + from(var(--gray-700)), + to(var(--gray-700)) + ) 0 100% no-repeat, + -webkit-gradient( + linear, + left bottom, + left top, + from(var(--gray-500)), + to(var(--gray-500)) + ) 100% 100% no-repeat; + background: linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 0 + no-repeat, + linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 100% + no-repeat, + linear-gradient(0deg, var(--gray-700) 0, var(--gray-700)) 0 100% + no-repeat, + linear-gradient(0deg, var(--gray-500) 0, var(--gray-500)) 100% 100% + no-repeat; + background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%; +} +input::-webkit-input-placeholder { + color: var(--link-text-color); +} +select { + -webkit-appearance: none; + appearance: none; + font-family: clear-sans; + font-size: 1.3rem; + min-width: 166px; + max-width: 300px; + padding: 5px 8px 5px 0; + text-indent: 0; + margin: 0 10px 0 0; + border: none; + border-bottom: 1px solid var(--input-border-color); + box-shadow: none; + border-radius: 0; + color: var(--text-color); + background-color: transparent; + background-image: linear-gradient( + 66.6deg, + transparent 60%, + var(--input-border-color) 40% + ), + linear-gradient( + 113.4deg, + var(--input-border-color) 40%, + transparent 60% + ); + background-position: calc(100% - 4px), 100%; + background-size: 4px 6px, 4px 6px; + background-repeat: no-repeat; + outline: none; + display: inline-block; + cursor: pointer; +} +select option { + color: var(--text-color); + background-color: var(--mild-background-color); +} +select:focus { + outline: 0; +} +select[disabled] { + color: var(--text-color); + border-bottom-color: var(--disabled-border-color); + opacity: 0.5; + cursor: default; +} +select[name="enter_view"] { + margin: 0; + padding: 0 12px 0 0; + border: none; + min-width: auto; +} +select[name="enter_share"] { + font-size: 1.1rem; + padding: 0; + border: none; + min-width: 40px; + float: right; + margin-top: 13px; + margin-right: 20px; +} +select[name="port_select"] { + border: none; + min-width: 54px; + padding-top: 0; + padding-bottom: 0; +} +select.narrow { + min-width: 76px; +} +select.auto { + min-width: auto; +} +select.slot { + min-width: 44rem; + max-width: 44rem; +} +input.narrow { + width: 166px; +} +input.trim { + width: 76px; + min-width: 76px; +} +textarea { + resize: none; +} +#header { + position: absolute; + top: 0; + left: 0; + width: 100%; + min-width: 1260px; + height: 91px; + z-index: 102; + margin: 0; + color: var(--inverse-text-color); + background-color: var(--inverse-background-color); + background-size: 100% 90px; + background-repeat: no-repeat; +} +#header .logo { + float: left; + margin-left: 10px; + color: var(--red-800); + text-align: center; +} +#header .logo svg { + width: 160px; + display: block; + margin: 25px 0 8px 0; +} +#header .block { + margin: 0; + float: right; + text-align: right; + background-color: var(--inverse-background-color); /* Opacity of 0.3 */ + padding: 10px 12px; +} +#header .text-left { + float: left; + text-align: right; + padding-right: 5px; + border-right: solid medium var(--orange-800); +} +#header .text-right { + float: right; + text-align: left; + padding-left: 5px; +} +#header .text-right a { + color: var(--inverse-text-color); +} +#header .text-right #licensetype { + font-weight: bold; + font-style: italic; + margin-right: 4px; +} +div.title { + margin: 20px 0 32px 0; + padding: 8px 10px; + clear: both; + background-color: var(--mild-background-color); + letter-spacing: 1.8px; +} +div.title span.left { + font-size: 1.4rem; +} +div.title span.right { + font-size: 1.4rem; + padding-top: 2px; + padding-right: 10px; + float: right; +} +div.title span img { + padding-right: 4px; +} +div.title.shift { + margin-top: -30px; +} +#menu { + position: absolute; + top: 90px; + left: 0; + right: 0; + display: grid; + grid-template-columns: auto max-content; + z-index: 101; +} +.nav-tile { + height: 4rem; + line-height: 4rem; + padding: 0; + margin: 0; + font-size: 1.2rem; + letter-spacing: 1.8px; + background-color: var(--inverse-background-color); + white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; + scrollbar-width: thin; +} +.nav-tile::-webkit-scrollbar { + height: 8px; +} +.nav-tile.right { + text-align: right; +} +.nav-item, +.nav-user { + position: relative; + display: inline-block; + text-align: center; + margin: 0; +} +.nav-item a { + min-width: 0; +} +.nav-item a span { + display: none; +} +.nav-item .system { + vertical-align: middle; + padding-bottom: 2px; +} +.nav-item a { + color: var(--inverse-text-color); + background-color: transparent; + text-transform: uppercase; + font-weight: bold; + display: block; + padding: 0 10px; +} +.nav-item a { + text-decoration: none; + text-decoration-skip-ink: auto; + -webkit-text-decoration-skip: objects; + -webkit-transition: all 0.25s ease-out; + transition: all 0.25s ease-out; +} +.nav-item:after, +.nav-user.show:after { + border-radius: 4px; + display: block; + background-color: transparent; + content: ""; + width: 32px; + height: 2px; + bottom: 8px; + position: absolute; + left: 50%; + margin-left: -16px; + -webkit-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; + pointer-events: none; +} +.nav-item:focus:after, +.nav-item:hover:after, +.nav-user.show:hover:after { + background-color: var(--orange-800); +} +.nav-item.active:after { + background-color: var(--background-color); +} +.nav-user a { + color: var(--inverse-text-color); + background-color: transparent; + display: block; + padding: 0 10px; +} +.nav-user .system { + vertical-align: middle; + padding-bottom: 2px; +} +#clear { + clear: both; +} +#footer { + position: fixed; + bottom: 0; + left: 0; + color: var(--text-color); + background-color: var(--mild-background-color); + padding: 5px 0; + width: 100%; + height: 1.6rem; + line-height: 1.6rem; + text-align: center; + /* TODO: Use variables for z-index to have more control */ + z-index: 10000; +} +#statusraid { + float: left; + padding-left: 10px; +} +#countdown { + margin: 0 auto; +} +#copyright { + font-family: bitstream; + font-size: 1.1rem; + float: right; + padding-right: 10px; +} +.green { + color: var(--green-800); + padding-left: 5px; + padding-right: 5px; +} +.red { + color: var(--red-600); + padding-left: 5px; + padding-right: 5px; +} +.orange { + color: var(--orange-300); + padding-left: 5px; + padding-right: 5px; +} +.blue { + color: var(--blue-800); + padding-left: 5px; + padding-right: 5px; +} +.green-text, +.passed { + color: var(--green-800); +} +.red-text, +.failed { + color: var(--red-600); +} +.orange-text, +.warning { + color: var(--orange-300); +} +.blue-text { + color: var(--blue-800); +} +.grey-text { + color: var(--gray-500); +} +.green-orb { + color: var(--green-200); +} +.grey-orb { + color: var(--gray-300); +} +.blue-orb { + color: var(--blue-700); +} +.yellow-orb { + color: var(--orange-200); +} +.red-orb { + color: var(--red-500); +} +.usage-bar { + float: left; + height: 2rem; + line-height: 2rem; + width: 14rem; + padding: 1px 1px 1px 2px; + margin: 8px 12px; + border-radius: 3px; + background-color: var(--usage-bar-background-color); + box-shadow: 0 1px 0 var(--gray-400), inset 0 1px 0 var(--gray-600); +} +.usage-bar > span { + display: block; + height: 100%; + text-align: right; + border-radius: 2px; + color: var(--inverse-text-color); + background-color: var(--usage-bar-background-color); + box-shadow: inset 0 1px 0 var(--gray-000); /* Opacity of 0.5 */ +} +.usage-disk { + position: relative; + height: 1.8rem; + background-color: var(--usage-disk-background-color); + margin: 0; +} +.usage-disk > span:first-child { + position: absolute; + left: 0; + margin: 0 !important; + height: 1.8rem; + background-color: var(--gray-400); +} +.usage-disk > span:last-child { + position: relative; + padding-right: 4px; + z-index: 1; +} +.usage-disk.sys { + height: 12px; + margin: -15px 20px 0 44px; +} +.usage-disk.sys > span:first-child { + height: 12px; + padding: 0; +} +.usage-disk.sys.none { + background-color: transparent; +} +.usage-disk.mm { + height: 3px; + margin: 5px 20px 0 0; +} +.usage-disk.mm > span:first-child { + height: 3px; +} +.notice { + background: var(--yellow-100) url(../images/notice.png) no-repeat; + background-position: 60px 50%; + color: var(--text-color); + font-size: 1.4rem; + text-align: left; + padding: 15px 0 15px 130px; + display: block; + height: 7rem; + line-height: 7rem; + border-top: 2px solid var(--yellow-500); + border-bottom: 2px solid var(--yellow-500); +} +.notice.shift { + margin-top: 160px; +} +.greenbar { + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--green-900)), + to(var(--green-500)) + ); + background: linear-gradient(90deg, var(--green-900) 0, var(--green-500)); +} +.orangebar { + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--orange-400)), + to(var(--orange-400)) + ); + background: linear-gradient(90deg, var(--orange-400) 0, var(--orange-400)); +} +.redbar { + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--red-900)), + to(var(--red-700)) + ); + background: linear-gradient(90deg, var(--red-900) 0, var(--red-700)); +} +.graybar { + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--gray-400)), + to(var(--gray-200)) + ); + background: linear-gradient(90deg, var(--gray-400) 0, var(--gray-200)); +} +table { + border-collapse: collapse; + border-spacing: 0; + border-style: hidden; + margin: -30px 0 0 0; + width: 100%; + background-color: var(--background-color); +} +table thead td { + padding: 7px 0; +} +table tbody td { + padding: 5px 0; +} +table tbody tr.tr_last { + background-color: var(--background-color); + border-top: 1px solid var(--table-border-color); +} +table td.cpu-info { + border: 1px solid var(--table-border-color); +} +table.disk_status { + white-space: nowrap; +} +table.disk_status td span { + margin-left: 10px; +} +table.disk_status thead tr:first-child td { + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 1px; + background-color: var(--usage-disk-background-color); +} +table.disk_status thead tr:last-child { + border-bottom: 1px solid var(--table-border-color); +} +table.disk_status tr > td { + width: 10%; + padding-left: 12px; + padding-right: 0; + white-space: nowrap; +} +table.disk_status tr > td + td { + width: auto; +} +table.disk_status tr > td + td + td { + width: 6.5%; + text-align: center; + padding-left: 4px; + padding-right: 8px; +} +table.disk_status tr > td + td + td + td { + text-align: right; + padding-left: 0; + padding-right: 12px; +} +table.disk_status tbody tr:nth-child(even) { + background-color: var(--background-color); +} +table.disk_status tbody tr:not(.tr_last):hover td { + background-color: var(--inverse-background-color); /* Opacity of 0.1 */ +} +table.disk_status.stats tr > td + td { + text-align: left; + padding-left: 0; + padding-right: 12px; +} +table.array_status td { + padding: 4px 0; +} +table.array_status tr > td { + text-align: left; + white-space: nowrap; + padding-left: 12px; + width: 30%; +} +table.array_status tr > td + td { + padding-left: 2px; + width: 20%; +} +table.array_status tr > td + td + td { + width: auto; +} +table.array_status td.line { + border-top: 1px solid var(--table-border-color); +} +table.array_status.noshift { + margin-top: 0; +} +table.settings { + margin: 0; + padding: 0; + background-color: transparent; +} +table.settings td:first-child { + width: 35%; + padding: 12px; +} +table.settings td + td { + padding-left: 8px; +} +table.settings.shifted { + padding: 0; + margin-left: 0; + margin-top: 0; +} +table.settings.shifted td { + padding-left: 0; +} +table.access_list { + border-spacing: 0; + margin-top: 10px; + border: none; +} +table.access_list tr:first-child td { + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 1px; + vertical-align: middle; + text-align: left; + border: 1px solid var(--table-border-color); + border-bottom: 1px solid var(--table-border-color); + background-color: var(--usage-disk-background-color); +} +table.access_list td:first-child { + font-weight: normal; + width: 35%; + padding-left: 12px; +} +table.access_list tr:first-child td:first-child { + font-weight: normal; +} +table.access_list tr > td + td { + white-space: nowrap; +} +table.share_status { + white-space: nowrap; +} +table.share_status thead tr:first-child td { + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 1px; + background-color: var(--mild-background-color); +} +table.share_status tr > td { + text-align: left; + padding-left: 12px; +} +table.share_status tr > td + td { + padding-left: 0; +} +table.share_status tbody tr:nth-child(even) { + background-color: var(--background-color); +} +table.share_status:not(.dashboard) tbody tr:hover td { + background-color: var(--inverse-background-color); /* Opacity of 0.1 */ +} +table.share_status tbody tr.alert { + color: var(--red-600); +} +table.share_status tbody tr.warn { + color: var(--orange-300); +} +table.share_status.fixed tr > td + td { + min-width: 39px; + font-size: 1.1rem; + text-align: center; + padding: 0; +} +table.share_status.table { + margin-top: 36px; +} +table.share_status.table tr > td { + width: 50%; +} +table.share_status.dashboard { + margin: 0; + border: 1px solid var(--border-color); +} +table.share_status.dashboard tbody { + border: 1px solid var(--border-color); +} +table.share_status.dashboard tr:first-child > td { + height: 3.6rem; + padding-top: 12px; + font-size: 1.6rem; + font-weight: bold; + letter-spacing: 1.8px; + text-transform: none; + vertical-align: top; +} +table.share_status.dashboard tr:nth-child(even) { + background-color: transparent; +} +table.share_status.dashboard tr:last-child > td { + padding-bottom: 20px; +} +table.share_status.dashboard tr.last > td { + padding-bottom: 20px; +} +table.share_status.dashboard tr.header td { + padding-bottom: 10px; +} +table.share_status.dashboard td { + padding: 3px 10px; +} +table.share_status.dashboard td.vpn { + font-size: 1.1rem; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; +} +table.share_status.dashboard td div.section { + display: inline-block; + vertical-align: top; + margin-left: 4px; + font-size: 1.2rem; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; +} +table.share_status.dashboard td div.section span { + font-weight: normal; + text-transform: none; + letter-spacing: 0; + white-space: normal; +} +table.share_status.dashboard td span.info { + float: right; + margin-right: 20px; + font-size: 1.2rem; + font-weight: normal; + text-transform: none; + letter-spacing: 0; +} +table.share_status.dashboard td span.info.title { + font-weight: bold; +} +table.share_status.dashboard td span.load { + display: inline-block; + width: 38px; + text-align: right; +} +table.share_status.dashboard td span.finish { + float: right; + margin-right: 24px; +} +table.share_status.dashboard i.control { + float: right; + font-size: 1.4rem !important; + margin: 0 3px 0 0; + cursor: pointer; + background-color: var(--inverse-background-color); /* Opacity of 0.1 */ + padding: 2px; +} +[name="arrayOps"] { + margin-top: 12px; +} +span.error { + color: var(--red-600); + background-color: var(--red-300); + display: block; + width: 100%; +} +span.warn { + color: var(--orange-300); + background-color: var(--yellow-200); + display: block; + width: 100%; +} +span.system { + color: var(--blue-700); + background-color: var(--blue-300); + display: block; + width: 100%; +} +span.array { + color: var(--green-800); + background-color: var(--green-100); + display: block; + width: 100%; +} +span.login { + color: var(--orange-900); + background-color: var(--red-100); + display: block; + width: 100%; +} +span.lite { + background-color: var(--background-color); +} +span.label { + font-size: 1.2rem; + padding: 2px 0 2px 6px; + margin-right: 6px; + border-radius: 4px; + display: inline; + width: auto; + vertical-align: middle; +} +span.cpu-speed { + display: block; + color: var(--blue-900); +} +span.status { + float: right; + font-size: 1.4rem; + margin-top: 30px; + padding-right: 8px; + letter-spacing: 1.8px; +} +span.status.vhshift { + margin-top: 0; + margin-right: -9px; +} +span.status.vshift { + margin-top: -16px; +} +span.status.hshift { + margin-right: -20px; +} +span.diskinfo { + float: left; + clear: both; + margin-top: 5px; + padding-left: 10px; +} +span.bitstream { + font-family: bitstream; + font-size: 1.1rem; +} +span.ucfirst { + text-transform: capitalize; +} +span.strong { + font-weight: bold; +} +span.big { + font-size: 1.4rem; +} +span.small { + font-size: 1.2rem; +} +span.outer { + margin-bottom: 20px; + margin-right: 0; +} +span.outer.solid { + background-color: var(--background-color); +} +span.hand { + cursor: pointer; +} +span.outer.started > img, +span.outer.started > i.img { + opacity: 1; +} +span.outer.stopped > img, +span.outer.stopped > i.img { + opacity: 0.3; +} +span.outer.paused > img, +span.outer.paused > i.img { + opacity: 0.6; +} +span.inner { + display: inline-block; + vertical-align: top; +} +span.state { + font-size: 1.1rem; + margin-left: 7px; +} +i.padlock { + margin-right: 8px; + cursor: default; + vertical-align: middle; +} +i.nolock { + visibility: hidden; + margin-right: 8px; + vertical-align: middle; +} +i.lock { + margin-left: 8px; + cursor: default; + vertical-align: middle; +} +i.orb { + font-size: 1.1rem; + margin: 0 8px 0 3px; +} +img.img, +i.img { + width: 32px; + height: 32px; + margin-right: 10px; +} +img.icon { + margin: -3px 4px 0 0; +} +img.list { + width: auto; + max-width: 32px; + height: 32px; +} +i.list { + font-size: 32px; +} +a.list { + text-decoration: none; + color: inherit; +} +div.content { + position: absolute; + top: 0; + left: 0; + width: 100%; + padding-bottom: 30px; + z-index: -1; + clear: both; +} +div.content.shift { + margin-top: 1px; +} +label + .content { + margin-top: 86px; +} +div.tabs { + position: relative; + margin: 130px 0 0 0; +} +div.tab { + float: left; + margin-top: 30px; +} +div.tab input[id^="tab"] { + display: none; +} +div.tab [type="radio"] + label:hover { + background-color: transparent; + border: 1px solid var(--orange-500); + border-bottom: none; + cursor: pointer; + opacity: 1; +} +div.tab [type="radio"]:checked + label { + cursor: default; + background-color: transparent; + border: 1px solid var(--orange-500); + border-bottom: none; + opacity: 1; +} +div.tab [type="radio"] + label ~ .content { + display: none; +} +div.tab [type="radio"]:checked + label ~ .content { + display: inline; +} +div.tab [type="radio"] + label { + position: relative; + font-size: 1.4rem; + letter-spacing: 1.8px; + padding: 4px 10px; + margin-right: 2px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + border: 1px solid var(--disabled-input-border-color); + border-bottom: none; + background-color: var(--radio-background-color); + opacity: 0.5; +} +div.tab [type="radio"] + label img { + padding-right: 4px; +} +div.Panel { + text-align: center; + float: left; + margin: 0 30px 30px 12px; + height: 8rem; +} +div.Panel a { + text-decoration: none; +} +div.Panel span { + height: 42px; + display: block; +} +div.Panel:hover .PanelText { + text-decoration: underline; +} +div.Panel img.PanelImg { + width: auto; + max-width: 32px; + height: 32px; +} +div.Panel i.PanelIcon { + font-size: 32px; + color: var(--text-color); +} +div.user-list { + float: left; + padding: 10px; + margin-right: 10px; + margin-bottom: 24px; + border: 1px solid var(--border-color); + border-radius: 5px; + line-height: 2rem; + height: 10rem; + width: 10rem; + background-color: var(--border-color); +} +div.user-list img { + width: auto; + max-width: 48px; + height: 48px; + margin-bottom: 16px; +} +div.up { + margin-top: -30px; + border: 1px solid var(--border-color); + padding: 4px 6px; + overflow: auto; +} +div.spinner { + margin: 48px auto; + text-align: center; +} +div.spinner.fixed { + display: none; + position: fixed; + top: 50%; + left: 50%; + margin-top: -16px; + margin-left: -64px; + z-index: 10000; +} +div.spinner .unraid_mark { + height: 64px; +} +div.spinner .unraid_mark_2, +div .unraid_mark_4 { + animation: mark_2 1.5s ease infinite; +} +div.spinner .unraid_mark_3 { + animation: mark_3 1.5s ease infinite; +} +div.spinner .unraid_mark_6, +div .unraid_mark_8 { + animation: mark_6 1.5s ease infinite; +} +div.spinner .unraid_mark_7 { + animation: mark_7 1.5s ease infinite; +} +div.domain { + margin-top: -20px; +} +@keyframes mark_2 { + 50% { + transform: translateY(-40px); + } + 100% { + transform: translateY(0px); + } +} +@keyframes mark_3 { + 50% { + transform: translateY(-62px); + } + 100% { + transform: translateY(0px); + } +} +@keyframes mark_6 { + 50% { + transform: translateY(40px); + } + 100% { + transform: translateY(0px); + } +} +@keyframes mark_7 { + 50% { + transform: translateY(62px); + } + 100% { + transform: translateY(0px); + } +} +pre.up { + margin-top: -30px; +} +pre { + border: 1px solid var(--border-color); + font-family: bitstream; + font-size: 1.3rem; + line-height: 1.8rem; + padding: 4px 6px; + overflow: auto; +} +iframe#progressFrame { + position: fixed; + bottom: 32px; + left: 0; + margin: 0; + padding: 8px 8px 0 8px; + width: 100%; + height: 1.2rem; + line-height: 1.2rem; + border-style: none; + overflow: hidden; + font-family: bitstream; + font-size: 1.1rem; + color: var(--alt-text-color); + white-space: nowrap; + z-index: -10; +} +dl { + margin: 0; + padding-left: 12px; + line-height: 2.6rem; +} +dt { + clear: left; + float: left; + width: 35%; + font-weight: normal; +} +dd { + margin-bottom: 12px; + white-space: nowrap; +} +dd p { + margin: 0 0 4px 0; +} +dd blockquote { + padding-left: 0; +} +blockquote { + width: 90%; + margin: 10px auto; + text-align: left; + padding: 4px 20px; + border-top: 2px solid var(--blue-200); + border-bottom: 2px solid var(--blue-200); + color: var(--blockquote-text-color); + background-color: var(--blue-100); +} +blockquote.ontop { + margin-top: -20px; + margin-bottom: 46px; +} +blockquote a { + color: var(--orange-500); + font-weight: 600; +} +blockquote a:hover, +blockquote a:focus { + color: var(--orange-800); +} +label.checkbox { + display: block; + position: relative; + padding-left: 28px; + margin: 3px 0; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +label.checkbox input { + position: absolute; + opacity: 0; + cursor: pointer; +} +span.checkmark { + position: absolute; + top: 0; + left: 6px; + height: 14px; + width: 14px; + background-color: var(--checkbox-color); + border-radius: 100%; +} +label.checkbox:hover input ~ .checkmark { + background-color: var(--checkbox-hover-color); +} +label.checkbox input:checked ~ .checkmark { + background-color: var(--brand-orange); +} +label.checkbox input:disabled ~ .checkmark { + opacity: 0.5; +} +a.bannerDismiss { + float: right; + cursor: pointer; + text-decoration: none; + margin-right: 1rem; +} +.bannerDismiss::before { + content: "\e92f"; + font-family: Unraid; + color: var(--orange-300); +} +a.bannerInfo { + cursor: pointer; + text-decoration: none; +} +.bannerInfo::before { + content: "\f05a"; + font-family: fontAwesome; + color: var(--orange-300); +} +::-webkit-scrollbar { + width: 10px; + height: 10px; + background: transparent; +} +::-webkit-scrollbar-thumb { + background: var(--scrollbar-color); + border-radius: 10px; +} +::-webkit-scrollbar-corner { + background: var(--scrollbar-color); + border-radius: 10px; +} +::-webkit-scrollbar-thumb:hover { + background: var(--scrollbar-hover-color); +} diff --git a/emhttp/plugins/dynamix/styles/default-color-pallet.css b/emhttp/plugins/dynamix/styles/default-color-pallet.css new file mode 100644 index 000000000..0eb2cea7f --- /dev/null +++ b/emhttp/plugins/dynamix/styles/default-color-pallet.css @@ -0,0 +1,44 @@ +:root { + --gray-000: #ffffff; + --gray-100: #f2f2f2; + --gray-200: #d3d3d3; /* Condensed from: #d9d9d9 #dcdcdc #d4d5d6 */ + --gray-300: #cccccc; /* Condensed from: gray #c0c0c0 #a8a8a8 */ + --gray-400: #909090; /* Condensed from: #989898 #a2a2a2 #949494 */ + --gray-500: #808080; /* Condensed from: #606060 #585858 */ + --gray-600: #303030; /* Condensed from: #202020 */ + --gray-700: #404040; + --gray-800: #191919; /* Condensed from: #2b2a29 */ + --gray-900: #1d1b1b; + + --orange-200: #ff9900; + --orange-300: #e68a00; + --orange-400: #ce7c10; + --orange-500: #ff8c2f; + --orange-800: #f15a2c; + --orange-900: #d63301; + + --red-100: #ffddd1; + --red-300: #ff9e9e; + --red-500: #ff3300; + --red-600: #f0000c; + --red-700: #de1100; + --red-800: #e22828; + --red-900: #941c00; + + --green-100: #dff2bf; + --green-200: #33cc33; + --green-500: #17bf0b; + --green-800: #4f8a10; + --green-900: #127a05; + + --blue-100: #d9edf7; + --blue-200: #bce8f1; + --blue-300: #bde5f8; + --blue-700: #0099ff; + --blue-800: #486dba; + --blue-900: #3b5998; + + --yellow-100: #fff6bf; + --yellow-200: #feefb3; + --yellow-500: #ffd324; +} \ No newline at end of file diff --git a/emhttp/plugins/dynamix/styles/default-white.css b/emhttp/plugins/dynamix/styles/default-white.css index 193786276..56801d788 100644 --- a/emhttp/plugins/dynamix/styles/default-white.css +++ b/emhttp/plugins/dynamix/styles/default-white.css @@ -1,47 +1,4 @@ :root { - --gray-000: #ffffff; - --gray-100: #f2f2f2; - --gray-200: #d3d3d3; /* Condensed from: #d9d9d9 #dcdcdc #d4d5d6 */ - --gray-300: #cccccc; /* Condensed from: gray #c0c0c0 #a8a8a8 */ - --gray-400: #909090; /* Condensed from: #989898 #a2a2a2 #949494 */ - --gray-500: #808080; /* Condensed from: #606060 #585858 */ - --gray-600: #303030; /* Condensed from: #202020 */ - --gray-700: #404040; - --gray-800: #191919; /* Condensed from: #2b2a29 */ - --gray-900: #1d1b1b; - - --orange-200: #ff9900; - --orange-300: #e68a00; - --orange-400: #ce7c10; - --orange-500: #ff8c2f; - --orange-800: #f15a2c; - --orange-900: #d63301; - - --red-100: #ffddd1; - --red-300: #ff9e9e; - --red-500: #ff3300; - --red-600: #f0000c; - --red-700: #de1100; - --red-800: #e22828; - --red-900: #941c00; - - --green-100: #dff2bf; - --green-200: #33cc33; - --green-500: #17bf0b; - --green-800: #4f8a10; - --green-900: #127a05; - - --blue-100: #d9edf7; - --blue-200: #bce8f1; - --blue-300: #bde5f8; - --blue-700: #0099ff; - --blue-800: #486dba; - --blue-900: #3b5998; - - --yellow-100: #fff6bf; - --yellow-200: #feefb3; - --yellow-500: #ffd324; - --text-color: var(--gray-900); --blockquote-text-color: var(--gray-800); --alt-text-color: var(--gray-400); @@ -77,1495 +34,3 @@ --scrollbar-color: var(--gray-400); --scrollbar-hover-color: var(--gray-500); } - -html { - font-family: clear-sans; - font-size: 62.5%; - height: 100%; -} -body { - font-size: 1.3rem; - color: var(--text-color); - background-color: var(--background-color); - padding: 0; - margin: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -@media (max-width: 1280px) { - #template { - min-width: 1260px; - max-width: 1260px; - margin: 0; - } -} -@media (min-width: 1281px) { - #template { - min-width: 1260px; - margin: 0 10px; - } -} -@media (min-width: 1921px) { - #template { - min-width: 1260px; - max-width: 1920px; - margin: 0 auto; - } -} -img { - border: none; - text-decoration: none; - vertical-align: middle; -} -p { - text-align: justify; -} -p.centered { - text-align: left; -} -p:empty { - display: none; -} -a:hover { - text-decoration: underline; -} -a { - color: var(--blue-800); - text-decoration: none; -} -a.none { - color: var(--text-color); -} -a.img { - text-decoration: none; - border: none; -} -a.info { - position: relative; -} -a.info span { - display: none; - white-space: nowrap; - font-variant: small-caps; - position: absolute; - top: 16px; - left: 12px; - line-height: 2rem; - color: var(--inverse-text-color); - padding: 5px 8px; - border: 1px solid var(--inverse-border-color); /* Opacity of 0.25 */ - border-radius: 3px; - background-color: var(--inverse-background-color); /* Opacity of 0.95 */ - box-shadow: var(--small-shadow); -} -a.info:hover span { - display: block; - z-index: 1; -} -a.nohand { - cursor: default; -} -a.hand { - cursor: pointer; - text-decoration: none; -} -a.static { - cursor: default; - color: var(--alt-text-color); - text-decoration: none; -} -a.view { - display: inline-block; - width: 20px; -} -i.spacing { - margin-left: -6px; -} -i.icon { - font-size: 1.6rem; - margin-right: 4px; - vertical-align: middle; -} -i.title { - margin-right: 8px; -} -i.control { - cursor: pointer; - color: var(--alt-text-color); - font-size: 1.8rem; -} -hr { - border: none; - height: 1px !important; - color: var(--hr-color); - background-color: var(--hr-color); -} -input[type="text"], -input[type="password"], -input[type="number"], -input[type="url"], -input[type="email"], -input[type="date"], -input[type="file"], -textarea, -.textarea { - font-family: clear-sans; - font-size: 1.3rem; - background-color: transparent; - border: none; - border-bottom: 1px solid var(--input-border-color); - padding: 4px 0; - text-indent: 0; - min-height: 2rem; - line-height: 2rem; - outline: none; - width: 300px; - margin: 0 20px 0 0; - box-shadow: none; - border-radius: 0; - color: var(--text-color); -} -input[type="button"], -input[type="reset"], -input[type="submit"], -button, -button[type="button"], -a.button { - font-family: clear-sans; - font-size: 1.1rem; - font-weight: bold; - letter-spacing: 1.8px; - text-transform: uppercase; - min-width: 86px; - margin: 10px 12px 10px 0; - padding: 8px; - text-align: center; - text-decoration: none; - white-space: nowrap; - cursor: pointer; - outline: none; - border-radius: 4px; - border: none; - color: var(--brand-orange); - background: -webkit-gradient( - linear, - left top, - right top, - from(var(--brand-red)), - to(var(--brand-orange)) - ) - 0 0 no-repeat, - -webkit-gradient( - linear, - left top, - right top, - from(var(--brand-red)), - to(var(--brand-orange)) - ) 0 100% no-repeat, - -webkit-gradient( - linear, - left bottom, - left top, - from(var(--brand-red)), - to(var(--brand-red)) - ) 0 100% no-repeat, - -webkit-gradient( - linear, - left bottom, - left top, - from(var(--brand-orange)), - to(var(--brand-orange)) - ) 100% 100% no-repeat; - background: linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)) - 0 0 no-repeat, - linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)) 0 100% - no-repeat, - linear-gradient(0deg, var(--brand-red) 0, var(--brand-red)) 0 100% - no-repeat, - linear-gradient(0deg, var(--brand-orange) 0, var(--brand-orange)) 100% - 100% no-repeat; - background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%; -} -input[type="checkbox"] { - vertical-align: middle; - margin-right: 6px; -} -input[type="number"]::-webkit-outer-spin-button, -input[type="number"]::-webkit-inner-spin-button { - -webkit-appearance: none; -} -input[type="number"] { - -moz-appearance: textfield; -} -input:focus[type="text"], -input:focus[type="password"], -input:focus[type="number"], -input:focus[type="url"], -input:focus[type="email"], -input:focus[type="file"], -textarea:focus { - background-color: var(--mild-background-color); - outline: 0; -} -input:hover[type="button"], -input:hover[type="reset"], -input:hover[type="submit"], -button:hover, -button:hover[type="button"], -a.button:hover { - color: var(--inverse-text-color); - background: -webkit-gradient( - linear, - left top, - right top, - from(var(--brand-red)), - to(var(--brand-orange)) - ); - background: linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)); -} -input[disabled], -textarea[disabled] { - color: var(--text-color); - border-bottom-color: var(--disabled-input-border-color); - opacity: 0.5; - cursor: default; -} -input[type="button"][disabled], -input[type="reset"][disabled], -input[type="submit"][disabled], -button[disabled], -button[type="button"][disabled], -a.button[disabled] input:hover[type="button"][disabled], -input:hover[type="reset"][disabled], -input:hover[type="submit"][disabled], -button:hover[disabled], -button:hover[type="button"][disabled], -a.button:hover[disabled] input:active[type="button"][disabled], -input:active[type="reset"][disabled], -input:active[type="submit"][disabled], -button:active[disabled], -button:active[type="button"][disabled], -a.button:active[disabled] { - cursor: default; - color: var(--disabled-text-color); - background: -webkit-gradient( - linear, - left top, - right top, - from(var(--gray-700)), - to(var(--gray-500)) - ) - 0 0 no-repeat, - -webkit-gradient( - linear, - left top, - right top, - from(var(--gray-700)), - to(var(--gray-500)) - ) 0 100% no-repeat, - -webkit-gradient( - linear, - left bottom, - left top, - from(var(--gray-700)), - to(var(--gray-700)) - ) 0 100% no-repeat, - -webkit-gradient( - linear, - left bottom, - left top, - from(var(--gray-500)), - to(var(--gray-500)) - ) 100% 100% no-repeat; - background: linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 0 - no-repeat, - linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 100% - no-repeat, - linear-gradient(0deg, var(--gray-700) 0, var(--gray-700)) 0 100% - no-repeat, - linear-gradient(0deg, var(--gray-500) 0, var(--gray-500)) 100% 100% - no-repeat; - background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%; -} -input::-webkit-input-placeholder { - color: var(--link-text-color); -} -select { - -webkit-appearance: none; - appearance: none; - font-family: clear-sans; - font-size: 1.3rem; - min-width: 166px; - max-width: 300px; - padding: 5px 8px 5px 0; - text-indent: 0; - margin: 0 10px 0 0; - border: none; - border-bottom: 1px solid var(--input-border-color); - box-shadow: none; - border-radius: 0; - color: var(--text-color); - background-color: transparent; - background-image: linear-gradient( - 66.6deg, - transparent 60%, - var(--input-border-color) 40% - ), - linear-gradient( - 113.4deg, - var(--input-border-color) 40%, - transparent 60% - ); - background-position: calc(100% - 4px), 100%; - background-size: 4px 6px, 4px 6px; - background-repeat: no-repeat; - outline: none; - display: inline-block; - cursor: pointer; -} -select option { - color: var(--text-color); - background-color: var(--mild-background-color); -} -select:focus { - outline: 0; -} -select[disabled] { - color: var(--text-color); - border-bottom-color: var(--disabled-border-color); - opacity: 0.5; - cursor: default; -} -select[name="enter_view"] { - margin: 0; - padding: 0 12px 0 0; - border: none; - min-width: auto; -} -select[name="enter_share"] { - font-size: 1.1rem; - padding: 0; - border: none; - min-width: 40px; - float: right; - margin-top: 13px; - margin-right: 20px; -} -select[name="port_select"] { - border: none; - min-width: 54px; - padding-top: 0; - padding-bottom: 0; -} -select.narrow { - min-width: 76px; -} -select.auto { - min-width: auto; -} -select.slot { - min-width: 44rem; - max-width: 44rem; -} -input.narrow { - width: 166px; -} -input.trim { - width: 76px; - min-width: 76px; -} -textarea { - resize: none; -} -#header { - position: absolute; - top: 0; - left: 0; - width: 100%; - min-width: 1260px; - height: 91px; - z-index: 102; - margin: 0; - color: var(--inverse-text-color); - background-color: var(--inverse-background-color); - background-size: 100% 90px; - background-repeat: no-repeat; -} -#header .logo { - float: left; - margin-left: 10px; - color: var(--red-800); - text-align: center; -} -#header .logo svg { - width: 160px; - display: block; - margin: 25px 0 8px 0; -} -#header .block { - margin: 0; - float: right; - text-align: right; - background-color: var(--inverse-background-color); /* Opacity of 0.3 */ - padding: 10px 12px; -} -#header .text-left { - float: left; - text-align: right; - padding-right: 5px; - border-right: solid medium var(--orange-800); -} -#header .text-right { - float: right; - text-align: left; - padding-left: 5px; -} -#header .text-right a { - color: var(--inverse-text-color); -} -#header .text-right #licensetype { - font-weight: bold; - font-style: italic; - margin-right: 4px; -} -div.title { - margin: 20px 0 32px 0; - padding: 8px 10px; - clear: both; - background-color: var(--mild-background-color); - letter-spacing: 1.8px; -} -div.title span.left { - font-size: 1.4rem; -} -div.title span.right { - font-size: 1.4rem; - padding-top: 2px; - padding-right: 10px; - float: right; -} -div.title span img { - padding-right: 4px; -} -div.title.shift { - margin-top: -30px; -} -#menu { - position: absolute; - top: 90px; - left: 0; - right: 0; - display: grid; - grid-template-columns: auto max-content; - z-index: 101; -} -.nav-tile { - height: 4rem; - line-height: 4rem; - padding: 0; - margin: 0; - font-size: 1.2rem; - letter-spacing: 1.8px; - background-color: var(--inverse-background-color); - white-space: nowrap; - overflow-x: auto; - overflow-y: hidden; - scrollbar-width: thin; -} -.nav-tile::-webkit-scrollbar { - height: 8px; -} -.nav-tile.right { - text-align: right; -} -.nav-item, -.nav-user { - position: relative; - display: inline-block; - text-align: center; - margin: 0; -} -.nav-item a { - min-width: 0; -} -.nav-item a span { - display: none; -} -.nav-item .system { - vertical-align: middle; - padding-bottom: 2px; -} -.nav-item a { - color: var(--inverse-text-color); - background-color: transparent; - text-transform: uppercase; - font-weight: bold; - display: block; - padding: 0 10px; -} -.nav-item a { - text-decoration: none; - text-decoration-skip-ink: auto; - -webkit-text-decoration-skip: objects; - -webkit-transition: all 0.25s ease-out; - transition: all 0.25s ease-out; -} -.nav-item:after, -.nav-user.show:after { - border-radius: 4px; - display: block; - background-color: transparent; - content: ""; - width: 32px; - height: 2px; - bottom: 8px; - position: absolute; - left: 50%; - margin-left: -16px; - -webkit-transition: all 0.25s ease-in-out; - transition: all 0.25s ease-in-out; - pointer-events: none; -} -.nav-item:focus:after, -.nav-item:hover:after, -.nav-user.show:hover:after { - background-color: var(--orange-800); -} -.nav-item.active:after { - background-color: var(--background-color); -} -.nav-user a { - color: var(--inverse-text-color); - background-color: transparent; - display: block; - padding: 0 10px; -} -.nav-user .system { - vertical-align: middle; - padding-bottom: 2px; -} -#clear { - clear: both; -} -#footer { - position: fixed; - bottom: 0; - left: 0; - color: var(--text-color); - background-color: var(--mild-background-color); - padding: 5px 0; - width: 100%; - height: 1.6rem; - line-height: 1.6rem; - text-align: center; - /* TODO: Use variables for z-index to have more control */ - z-index: 10000; -} -#statusraid { - float: left; - padding-left: 10px; -} -#countdown { - margin: 0 auto; -} -#copyright { - font-family: bitstream; - font-size: 1.1rem; - float: right; - padding-right: 10px; -} -.green { - color: var(--green-800); - padding-left: 5px; - padding-right: 5px; -} -.red { - color: var(--red-600); - padding-left: 5px; - padding-right: 5px; -} -.orange { - color: var(--orange-300); - padding-left: 5px; - padding-right: 5px; -} -.blue { - color: var(--blue-800); - padding-left: 5px; - padding-right: 5px; -} -.green-text, -.passed { - color: var(--green-800); -} -.red-text, -.failed { - color: var(--red-600); -} -.orange-text, -.warning { - color: var(--orange-300); -} -.blue-text { - color: var(--blue-800); -} -.grey-text { - color: var(--gray-500); -} -.green-orb { - color: var(--green-200); -} -.grey-orb { - color: var(--gray-300); -} -.blue-orb { - color: var(--blue-700); -} -.yellow-orb { - color: var(--orange-200); -} -.red-orb { - color: var(--red-500); -} -.usage-bar { - float: left; - height: 2rem; - line-height: 2rem; - width: 14rem; - padding: 1px 1px 1px 2px; - margin: 8px 12px; - border-radius: 3px; - background-color: var(--usage-bar-background-color); - box-shadow: 0 1px 0 var(--gray-400), inset 0 1px 0 var(--gray-600); -} -.usage-bar > span { - display: block; - height: 100%; - text-align: right; - border-radius: 2px; - color: var(--inverse-text-color); - background-color: var(--usage-bar-background-color); - box-shadow: inset 0 1px 0 var(--gray-000); /* Opacity of 0.5 */ -} -.usage-disk { - position: relative; - height: 1.8rem; - background-color: var(--usage-disk-background-color); - margin: 0; -} -.usage-disk > span:first-child { - position: absolute; - left: 0; - margin: 0 !important; - height: 1.8rem; - background-color: var(--gray-400); -} -.usage-disk > span:last-child { - position: relative; - padding-right: 4px; - z-index: 1; -} -.usage-disk.sys { - height: 12px; - margin: -15px 20px 0 44px; -} -.usage-disk.sys > span:first-child { - height: 12px; - padding: 0; -} -.usage-disk.sys.none { - background-color: transparent; -} -.usage-disk.mm { - height: 3px; - margin: 5px 20px 0 0; -} -.usage-disk.mm > span:first-child { - height: 3px; -} -.notice { - background: var(--yellow-100) url(../images/notice.png) no-repeat; - background-position: 60px 50%; - color: var(--text-color); - font-size: 1.4rem; - text-align: left; - padding: 15px 0 15px 130px; - display: block; - height: 7rem; - line-height: 7rem; - border-top: 2px solid var(--yellow-500); - border-bottom: 2px solid var(--yellow-500); -} -.notice.shift { - margin-top: 160px; -} -.greenbar { - background: -webkit-gradient( - linear, - left top, - right top, - from(var(--green-900)), - to(var(--green-500)) - ); - background: linear-gradient(90deg, var(--green-900) 0, var(--green-500)); -} -.orangebar { - background: -webkit-gradient( - linear, - left top, - right top, - from(var(--orange-400)), - to(var(--orange-400)) - ); - background: linear-gradient(90deg, var(--orange-400) 0, var(--orange-400)); -} -.redbar { - background: -webkit-gradient( - linear, - left top, - right top, - from(var(--red-900)), - to(var(--red-700)) - ); - background: linear-gradient(90deg, var(--red-900) 0, var(--red-700)); -} -.graybar { - background: -webkit-gradient( - linear, - left top, - right top, - from(var(--gray-400)), - to(var(--gray-200)) - ); - background: linear-gradient(90deg, var(--gray-400) 0, var(--gray-200)); -} -table { - border-collapse: collapse; - border-spacing: 0; - border-style: hidden; - margin: -30px 0 0 0; - width: 100%; - background-color: var(--background-color); -} -table thead td { - padding: 7px 0; -} -table tbody td { - padding: 5px 0; -} -table tbody tr.tr_last { - background-color: var(--background-color); - border-top: 1px solid var(--table-border-color); -} -table td.cpu-info { - border: 1px solid var(--table-border-color); -} -table.disk_status { - white-space: nowrap; -} -table.disk_status td span { - margin-left: 10px; -} -table.disk_status thead tr:first-child td { - font-size: 1.1rem; - text-transform: uppercase; - letter-spacing: 1px; - background-color: var(--usage-disk-background-color); -} -table.disk_status thead tr:last-child { - border-bottom: 1px solid var(--table-border-color); -} -table.disk_status tr > td { - width: 10%; - padding-left: 12px; - padding-right: 0; - white-space: nowrap; -} -table.disk_status tr > td + td { - width: auto; -} -table.disk_status tr > td + td + td { - width: 6.5%; - text-align: center; - padding-left: 4px; - padding-right: 8px; -} -table.disk_status tr > td + td + td + td { - text-align: right; - padding-left: 0; - padding-right: 12px; -} -table.disk_status tbody tr:nth-child(even) { - background-color: var(--background-color); -} -table.disk_status tbody tr:not(.tr_last):hover td { - background-color: var(--inverse-background-color); /* Opacity of 0.1 */ -} -table.disk_status.stats tr > td + td { - text-align: left; - padding-left: 0; - padding-right: 12px; -} -table.array_status td { - padding: 4px 0; -} -table.array_status tr > td { - text-align: left; - white-space: nowrap; - padding-left: 12px; - width: 30%; -} -table.array_status tr > td + td { - padding-left: 2px; - width: 20%; -} -table.array_status tr > td + td + td { - width: auto; -} -table.array_status td.line { - border-top: 1px solid var(--table-border-color); -} -table.array_status.noshift { - margin-top: 0; -} -table.settings { - margin: 0; - padding: 0; - background-color: transparent; -} -table.settings td:first-child { - width: 35%; - padding: 12px; -} -table.settings td + td { - padding-left: 8px; -} -table.settings.shifted { - padding: 0; - margin-left: 0; - margin-top: 0; -} -table.settings.shifted td { - padding-left: 0; -} -table.access_list { - border-spacing: 0; - margin-top: 10px; - border: none; -} -table.access_list tr:first-child td { - font-size: 1.1rem; - text-transform: uppercase; - letter-spacing: 1px; - vertical-align: middle; - text-align: left; - border: 1px solid var(--table-border-color); - border-bottom: 1px solid var(--table-border-color); - background-color: var(--usage-disk-background-color); -} -table.access_list td:first-child { - font-weight: normal; - width: 35%; - padding-left: 12px; -} -table.access_list tr:first-child td:first-child { - font-weight: normal; -} -table.access_list tr > td + td { - white-space: nowrap; -} -table.share_status { - white-space: nowrap; -} -table.share_status thead tr:first-child td { - font-size: 1.1rem; - text-transform: uppercase; - letter-spacing: 1px; - background-color: var(--mild-background-color); -} -table.share_status tr > td { - text-align: left; - padding-left: 12px; -} -table.share_status tr > td + td { - padding-left: 0; -} -table.share_status tbody tr:nth-child(even) { - background-color: var(--background-color); -} -table.share_status:not(.dashboard) tbody tr:hover td { - background-color: var(--inverse-background-color); /* Opacity of 0.1 */ -} -table.share_status tbody tr.alert { - color: var(--red-600); -} -table.share_status tbody tr.warn { - color: var(--orange-300); -} -table.share_status.fixed tr > td + td { - min-width: 39px; - font-size: 1.1rem; - text-align: center; - padding: 0; -} -table.share_status.table { - margin-top: 36px; -} -table.share_status.table tr > td { - width: 50%; -} -table.share_status.dashboard { - margin: 0; - border: 1px solid var(--border-color); -} -table.share_status.dashboard tbody { - border: 1px solid var(--border-color); -} -table.share_status.dashboard tr:first-child > td { - height: 3.6rem; - padding-top: 12px; - font-size: 1.6rem; - font-weight: bold; - letter-spacing: 1.8px; - text-transform: none; - vertical-align: top; -} -table.share_status.dashboard tr:nth-child(even) { - background-color: transparent; -} -table.share_status.dashboard tr:last-child > td { - padding-bottom: 20px; -} -table.share_status.dashboard tr.last > td { - padding-bottom: 20px; -} -table.share_status.dashboard tr.header td { - padding-bottom: 10px; -} -table.share_status.dashboard td { - padding: 3px 10px; -} -table.share_status.dashboard td.vpn { - font-size: 1.1rem; - font-weight: bold; - text-transform: uppercase; - letter-spacing: 1px; -} -table.share_status.dashboard td div.section { - display: inline-block; - vertical-align: top; - margin-left: 4px; - font-size: 1.2rem; - font-weight: bold; - text-transform: uppercase; - letter-spacing: 1px; -} -table.share_status.dashboard td div.section span { - font-weight: normal; - text-transform: none; - letter-spacing: 0; - white-space: normal; -} -table.share_status.dashboard td span.info { - float: right; - margin-right: 20px; - font-size: 1.2rem; - font-weight: normal; - text-transform: none; - letter-spacing: 0; -} -table.share_status.dashboard td span.info.title { - font-weight: bold; -} -table.share_status.dashboard td span.load { - display: inline-block; - width: 38px; - text-align: right; -} -table.share_status.dashboard td span.finish { - float: right; - margin-right: 24px; -} -table.share_status.dashboard i.control { - float: right; - font-size: 1.4rem !important; - margin: 0 3px 0 0; - cursor: pointer; - background-color: var(--inverse-background-color); /* Opacity of 0.1 */ - padding: 2px; -} -[name="arrayOps"] { - margin-top: 12px; -} -span.error { - color: var(--red-600); - background-color: var(--red-300); - display: block; - width: 100%; -} -span.warn { - color: var(--orange-300); - background-color: var(--yellow-200); - display: block; - width: 100%; -} -span.system { - color: var(--blue-700); - background-color: var(--blue-300); - display: block; - width: 100%; -} -span.array { - color: var(--green-800); - background-color: var(--green-100); - display: block; - width: 100%; -} -span.login { - color: var(--orange-900); - background-color: var(--red-100); - display: block; - width: 100%; -} -span.lite { - background-color: var(--background-color); -} -span.label { - font-size: 1.2rem; - padding: 2px 0 2px 6px; - margin-right: 6px; - border-radius: 4px; - display: inline; - width: auto; - vertical-align: middle; -} -span.cpu-speed { - display: block; - color: var(--blue-900); -} -span.status { - float: right; - font-size: 1.4rem; - margin-top: 30px; - padding-right: 8px; - letter-spacing: 1.8px; -} -span.status.vhshift { - margin-top: 0; - margin-right: -9px; -} -span.status.vshift { - margin-top: -16px; -} -span.status.hshift { - margin-right: -20px; -} -span.diskinfo { - float: left; - clear: both; - margin-top: 5px; - padding-left: 10px; -} -span.bitstream { - font-family: bitstream; - font-size: 1.1rem; -} -span.ucfirst { - text-transform: capitalize; -} -span.strong { - font-weight: bold; -} -span.big { - font-size: 1.4rem; -} -span.small { - font-size: 1.2rem; -} -span.outer { - margin-bottom: 20px; - margin-right: 0; -} -span.outer.solid { - background-color: var(--background-color); -} -span.hand { - cursor: pointer; -} -span.outer.started > img, -span.outer.started > i.img { - opacity: 1; -} -span.outer.stopped > img, -span.outer.stopped > i.img { - opacity: 0.3; -} -span.outer.paused > img, -span.outer.paused > i.img { - opacity: 0.6; -} -span.inner { - display: inline-block; - vertical-align: top; -} -span.state { - font-size: 1.1rem; - margin-left: 7px; -} -i.padlock { - margin-right: 8px; - cursor: default; - vertical-align: middle; -} -i.nolock { - visibility: hidden; - margin-right: 8px; - vertical-align: middle; -} -i.lock { - margin-left: 8px; - cursor: default; - vertical-align: middle; -} -i.orb { - font-size: 1.1rem; - margin: 0 8px 0 3px; -} -img.img, -i.img { - width: 32px; - height: 32px; - margin-right: 10px; -} -img.icon { - margin: -3px 4px 0 0; -} -img.list { - width: auto; - max-width: 32px; - height: 32px; -} -i.list { - font-size: 32px; -} -a.list { - text-decoration: none; - color: inherit; -} -div.content { - position: absolute; - top: 0; - left: 0; - width: 100%; - padding-bottom: 30px; - z-index: -1; - clear: both; -} -div.content.shift { - margin-top: 1px; -} -label + .content { - margin-top: 86px; -} -div.tabs { - position: relative; - margin: 130px 0 0 0; -} -div.tab { - float: left; - margin-top: 30px; -} -div.tab input[id^="tab"] { - display: none; -} -div.tab [type="radio"] + label:hover { - background-color: transparent; - border: 1px solid var(--orange-500); - border-bottom: none; - cursor: pointer; - opacity: 1; -} -div.tab [type="radio"]:checked + label { - cursor: default; - background-color: transparent; - border: 1px solid var(--orange-500); - border-bottom: none; - opacity: 1; -} -div.tab [type="radio"] + label ~ .content { - display: none; -} -div.tab [type="radio"]:checked + label ~ .content { - display: inline; -} -div.tab [type="radio"] + label { - position: relative; - font-size: 1.4rem; - letter-spacing: 1.8px; - padding: 4px 10px; - margin-right: 2px; - border-top-left-radius: 6px; - border-top-right-radius: 6px; - border: 1px solid var(--disabled-input-border-color); - border-bottom: none; - background-color: var(--radio-background-color); - opacity: 0.5; -} -div.tab [type="radio"] + label img { - padding-right: 4px; -} -div.Panel { - text-align: center; - float: left; - margin: 0 30px 30px 12px; - height: 8rem; -} -div.Panel a { - text-decoration: none; -} -div.Panel span { - height: 42px; - display: block; -} -div.Panel:hover .PanelText { - text-decoration: underline; -} -div.Panel img.PanelImg { - width: auto; - max-width: 32px; - height: 32px; -} -div.Panel i.PanelIcon { - font-size: 32px; - color: var(--text-color); -} -div.user-list { - float: left; - padding: 10px; - margin-right: 10px; - margin-bottom: 24px; - border: 1px solid var(--border-color); - border-radius: 5px; - line-height: 2rem; - height: 10rem; - width: 10rem; - background-color: var(--border-color); -} -div.user-list img { - width: auto; - max-width: 48px; - height: 48px; - margin-bottom: 16px; -} -div.up { - margin-top: -30px; - border: 1px solid var(--border-color); - padding: 4px 6px; - overflow: auto; -} -div.spinner { - margin: 48px auto; - text-align: center; -} -div.spinner.fixed { - display: none; - position: fixed; - top: 50%; - left: 50%; - margin-top: -16px; - margin-left: -64px; - z-index: 10000; -} -div.spinner .unraid_mark { - height: 64px; -} -div.spinner .unraid_mark_2, -div .unraid_mark_4 { - animation: mark_2 1.5s ease infinite; -} -div.spinner .unraid_mark_3 { - animation: mark_3 1.5s ease infinite; -} -div.spinner .unraid_mark_6, -div .unraid_mark_8 { - animation: mark_6 1.5s ease infinite; -} -div.spinner .unraid_mark_7 { - animation: mark_7 1.5s ease infinite; -} -div.domain { - margin-top: -20px; -} -@keyframes mark_2 { - 50% { - transform: translateY(-40px); - } - 100% { - transform: translateY(0px); - } -} -@keyframes mark_3 { - 50% { - transform: translateY(-62px); - } - 100% { - transform: translateY(0px); - } -} -@keyframes mark_6 { - 50% { - transform: translateY(40px); - } - 100% { - transform: translateY(0px); - } -} -@keyframes mark_7 { - 50% { - transform: translateY(62px); - } - 100% { - transform: translateY(0px); - } -} -pre.up { - margin-top: -30px; -} -pre { - border: 1px solid var(--border-color); - font-family: bitstream; - font-size: 1.3rem; - line-height: 1.8rem; - padding: 4px 6px; - overflow: auto; -} -iframe#progressFrame { - position: fixed; - bottom: 32px; - left: 0; - margin: 0; - padding: 8px 8px 0 8px; - width: 100%; - height: 1.2rem; - line-height: 1.2rem; - border-style: none; - overflow: hidden; - font-family: bitstream; - font-size: 1.1rem; - color: var(--alt-text-color); - white-space: nowrap; - z-index: -10; -} -dl { - margin: 0; - padding-left: 12px; - line-height: 2.6rem; -} -dt { - clear: left; - float: left; - width: 35%; - font-weight: normal; -} -dd { - margin-bottom: 12px; - white-space: nowrap; -} -dd p { - margin: 0 0 4px 0; -} -dd blockquote { - padding-left: 0; -} -blockquote { - width: 90%; - margin: 10px auto; - text-align: left; - padding: 4px 20px; - border-top: 2px solid var(--blue-200); - border-bottom: 2px solid var(--blue-200); - color: var(--blockquote-text-color); - background-color: var(--blue-100); -} -blockquote.ontop { - margin-top: -20px; - margin-bottom: 46px; -} -blockquote a { - color: var(--orange-500); - font-weight: 600; -} -blockquote a:hover, -blockquote a:focus { - color: var(--orange-800); -} -label.checkbox { - display: block; - position: relative; - padding-left: 28px; - margin: 3px 0; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -label.checkbox input { - position: absolute; - opacity: 0; - cursor: pointer; -} -span.checkmark { - position: absolute; - top: 0; - left: 6px; - height: 14px; - width: 14px; - background-color: var(--checkbox-color); - border-radius: 100%; -} -label.checkbox:hover input ~ .checkmark { - background-color: var(--checkbox-hover-color); -} -label.checkbox input:checked ~ .checkmark { - background-color: var(--brand-orange); -} -label.checkbox input:disabled ~ .checkmark { - opacity: 0.5; -} -a.bannerDismiss { - float: right; - cursor: pointer; - text-decoration: none; - margin-right: 1rem; -} -.bannerDismiss::before { - content: "\e92f"; - font-family: Unraid; - color: var(--orange-300); -} -a.bannerInfo { - cursor: pointer; - text-decoration: none; -} -.bannerInfo::before { - content: "\f05a"; - font-family: fontAwesome; - color: var(--orange-300); -} -::-webkit-scrollbar { - width: 10px; - height: 10px; - background: transparent; -} -::-webkit-scrollbar-thumb { - background: var(--scrollbar-color); - border-radius: 10px; -} -::-webkit-scrollbar-corner { - background: var(--scrollbar-color); - border-radius: 10px; -} -::-webkit-scrollbar-thumb:hover { - background: var(--scrollbar-hover-color); -} From 20d06e8f22d888d2dc72f176fef13d93d004b225 Mon Sep 17 00:00:00 2001 From: Bailey Matthews Date: Mon, 11 Sep 2023 22:07:29 +0100 Subject: [PATCH 13/99] feat: import CSS files --- emhttp/plugins/dynamix/include/DefaultPageLayout.php | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout.php b/emhttp/plugins/dynamix/include/DefaultPageLayout.php index 31e5a0a7c..9e95c5e5a 100644 --- a/emhttp/plugins/dynamix/include/DefaultPageLayout.php +++ b/emhttp/plugins/dynamix/include/DefaultPageLayout.php @@ -44,10 +44,13 @@ function annotate($text) {echo "\n\n";} ?> -lang=""> +lang="" class=""> <?=_var($var,'NAME')?>/<?=_var($myPage,'name')?> @@ -44,11 +44,9 @@ function annotate($text) {echo "\n\n";} ?> -lang="" class=""> +lang="" class=""> <?=_var($var,'NAME')?>/<?=_var($myPage,'name')?> From b76aadcd32d1750f7605e1ffc2c496beb08f4f77 Mon Sep 17 00:00:00 2001 From: Zack Spear Date: Thu, 30 May 2024 13:20:56 -0700 Subject: [PATCH 19/99] chore: gray theme clean comment --- .../plugins/dynamix/styles/default-gray.css | 736 ------------------ 1 file changed, 736 deletions(-) diff --git a/emhttp/plugins/dynamix/styles/default-gray.css b/emhttp/plugins/dynamix/styles/default-gray.css index ab4729b1f..96c46bcaf 100644 --- a/emhttp/plugins/dynamix/styles/default-gray.css +++ b/emhttp/plugins/dynamix/styles/default-gray.css @@ -50,739 +50,3 @@ --bg-opacity-10: var(--black-opacity-10); --bg-opacity-30: var(--black-opacity-30); } - -/* p { - text-align: left; -} - -i.spacing { - margin-left: 0; - margin-right: 10px; -} - -i.title { - display: none; -} - -i.control { - cursor: pointer; - color: #909090; - font-size: 1.8rem; -} - -i.favo { - margin-left: 0; -} -pre ul { - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 28px; -} -pre li { - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 18px; -} -big { - font-size: 1.4rem; - font-weight: bold; - text-transform: uppercase; -} - -input[type="text"], -input[type="password"], -input[type="number"], -input[type="url"], -input[type="email"], -input[type="date"], -input[type="file"], -textarea, -.textarea { - padding: 5px 6px; - border: 1px solid var(--text-color); - color: var(--text-color); -} - -input[type="button"], -input[type="reset"], -input[type="submit"], -button, -button[type="button"], -a.button, -.sweet-alert button { - font-family: clear-sans; - font-size: 1.2rem; - font-weight: normal; - text-transform: none; - letter-spacing: normal; - // @todo css var - border: 1px solid var(--border-color); - color: var(--text-color); - background: none; - background-color: var(--mild-background-color); -} - -input:focus[type="text"], -input:focus[type="password"], -input:focus[type="number"], -input:focus[type="url"], -input:focus[type="email"], -input:focus[type="file"], -textarea:focus, -.sweet-alert button:focus { - background: none; - background-color: var(--mild-background-color); - border-color: #0072c6; -} - -input:hover[type="button"], -input:hover[type="reset"], -input:hover[type="submit"], -button:hover, -button:hover[type="button"], -a.button:hover, -.sweet-alert button:hover { - border-color: #0072c6; - color: #4f4f4f; - background: none; - background-color: var(--mild-background-color) !important; -} - -input:active[type="button"], -input:active[type="reset"], -input:active[type="submit"], -button:active, -button:active[type="button"], -a.button:active, -.sweet-alert button:active { - border-color: #0072c6; - box-shadow: none; -} - -input[disabled], -button[disabled], -input:hover[type="button"][disabled], -input:hover[type="reset"][disabled], -input:hover[type="submit"][disabled], -button:hover[disabled], -button:hover[type="button"][disabled], -input:active[type="button"][disabled], -input:active[type="reset"][disabled], -input:active[type="submit"][disabled], -button:active[disabled], -button:active[type="button"][disabled], -textarea[disabled], -.sweet-alert button[disabled] { - color: var(--disabled-text-color) !important; - border-color: var(--disabled-input-border-color) !important; - background: none !important; - background-size: 0 !important; - background-color: var(--disabled-input-background-color) !important; -} - -input::-webkit-input-placeholder { - color: var(--blue-700); -} - -select { - min-width: 188px; - max-width: 314px; - padding: 6px 14px 6px 6px; - border: 1px solid var(--border-color); - color: var(--text-color); - background-image: linear-gradient(66.6deg, transparent 60%, var(--border-color) 40%), - linear-gradient(113.4deg, var(--border-color) 40%, transparent 60%); - background-position: calc(100% - 8px), calc(100% - 4px); - background-size: - 4px 6px, - 4px 6px; -} - -select option { - color: var(--text-color); - background-color: var(--opac-background-color); -} - -select[disabled] { - color: var(--disabled-text-color); - border-color: var(--disabled-input-border-color); - background-color: var(--disabled-input-background-color); -} - -select[name="enter_view"] { - font-size: 1.2rem; -} - -select[name="enter_share"] { - color: var(--gray-500); - margin-top: 18px; -} - -select.narrow { - min-width: 87px; -} - -input.narrow { - width: 174px; -} -input.trim { - width: 74px; - min-width: 74px; -} - -#header { - position: fixed; - height: 90px; - z-index: 100; - background-color: var(--mild-background-color); - border-bottom: 1px solid var(--gray-400); - box-sizing: border-box; - padding-left: 80px; -} - -#header .logo { - margin-left: 0; - color: var(--brand-red); -} - -#header .block { - background-color: rgba(237, 234, 239, 0.2); -} - -#header .text-left { - border-right: solid medium var(--orange-800); -} - -#header .text-right a { - color: var(--text-color); -} - -#menu { - position: fixed; - top: 0; - left: 0; - bottom: 12px; - width: 64px; - padding: 0; - margin: 0; - background-color: var(--alt-background-color); - z-index: 2000; - box-shadow: inset -1px 0 2px var(--gray-900); -} -#nav-block { - position: absolute; - top: 0; - bottom: 12px; - color: var(--orange-100); - white-space: nowrap; - float: left; - overflow-y: scroll; - direction: rtl; - scrollbar-width: none; - -ms-overflow-style: none; - overflow: -moz-scrollbars-none; -} - -#nav-block::-webkit-scrollbar { - display: none; -} -#nav-block > div { - direction: ltr; -} -.nav-tile { - height: auto; - line-height: 1; - display: block; - padding: 0; - margin: 0; - font-size: 1.2rem; - letter-spacing: 1.8px; - background-color: transparent; - white-space: nowrap; - overflow-x: auto; - overflow-y: hidden; - scrollbar-width: thin; -} -.nav-item { - display: block; - width: 64px; - text-align: left; - padding: 0; - border-bottom: 1px solid #42453e; - font-size: 18px !important; - overflow: hidden; - transition: 0.2s background-color ease; -} - -.nav-item::after, -.nav-user.show::after { - width: 0; - height: 0; -} - -.nav-item:hover { - width: auto; - padding-right: 0; - color: var(--orange-100); - background: -webkit-gradient( - linear, - left top, - right top, - from(#e22828), - to(var(--brand-orange)) - ); - background: linear-gradient(90deg, #e22828 0, var(--brand-orange)); - -webkit-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - border-bottom-color: #e22828; -} -.nav-item:hover a { - color: var(--orange-100); - background: -webkit-gradient( - linear, - left top, - right top, - from(#e22828), - to(var(--brand-orange)) - ); - background: linear-gradient(90deg, #e22828 0, var(--brand-orange)); - border-bottom-color: #e22828; - font-size: 18px; -} -.nav-item img { - display: none; -} -.nav-item a { - display: inline-flex; - color: #a6a7a7; - text-decoration: none; - padding: 16px 18px; - gap: 25px; - justify-content: start; - align-items: center; - text-transform: none; - font-weight: normal; -} -.nav-item.util a { - padding-left: 24px; -} -.nav-item a:before { - font-family: docker-icon, fontawesome, unraid; - font-size: 26px; -} -.nav-item.util a:before { - font-size: 16px; -} -.nav-item.active, -.nav-item.active a { - color: var(--orange-100); - background: -webkit-gradient( - linear, - left top, - right top, - from(#e22828), - to(var(--brand-orange)) - ); - background: linear-gradient(90deg, #e22828 0, var(--brand-orange)); -} -.nav-item.HelpButton.active:hover, -.nav-item.HelpButton.active a:hover { - background: -webkit-gradient( - linear, - left top, - right top, - from(#e22828), - to(var(--brand-orange)) - ); - background: linear-gradient(90deg, #e22828 0, var(--brand-orange)); - font-size: 18px; -} -.nav-item.HelpButton.active, -.nav-item.HelpButton.active a { - font-size: 18px; -} - -.nav-item a span { - display: inline; -} - -.nav-item a b { - display: none; -} - -.nav-user { - position: fixed; - top: 102px; - right: 10px; -} - -.nav-user a { - color: var(--text-color); -} - -.LanguageButton { - font-size: 12px !important; -} - -div.title { - color: #39587f; - margin: 20px 0 10px 0; - padding: 10px 0; - clear: both; - background-color: var(--background-color); - border-bottom: 1px solid var(--border-color); - letter-spacing: 1.8px; -} -div.title span.left { - font-size: 1.6rem; - text-transform: uppercase; -} -div.title span.right { - font-size: 1.6rem; - padding-right: 10px; - float: right; -} -div.title span img, -.title p { - display: none; -} -div.title:first-child { - margin-top: 0; -} -div.title.shift { - margin-top: -12px; -} - -#footer { - color: var(--footer-text); - background-color: #121510; -} - -.usage-bar { - position: fixed; - top: 64px; - left: 300px; - height: 2.2rem; - line-height: 2.2rem; - width: 11rem; - background-color: var(--gray-500); -} - -.usage-disk { - height: 2.2rem; - line-height: 2.2rem; - background-color: #eceaec; -} - -.usage-disk > span:first-child { - height: 3px; - background-color: var(--border-color); -} - -.usage-disk > span:last-child { - padding-right: 4px; - top: 0; - z-index: 1000; -} - -.usage-disk.sys { - line-height: normal; - background-color: transparent; - margin: -15px 20px 0 44px; -} - -.usage-disk.sys > span { - line-height: normal; -} - -.usage-disk.mm { - line-height: normal; - background-color: transparent; -} - -.usage-disk.mm > span:first-child { - line-height: normal; -} - -table { - margin: 0; - background-color: transparent; -} - -table thead td, -table tbody td { - line-height: 3rem; - height: 3rem; -} - -table tbody tr.tr_last { - border-bottom: 1px solid var(--border-color); -} - -table.unraid tbody tr:nth-child(even) { - background-color: var(--table-background-color); -} - -table.unraid thead tr:first-child > td { - font-size: 1.2rem; - color: var(--gray-500); - border-bottom: 1px solid var(--border-color); - background-color: transparent; -} - -table.unraid tbody tr:not(.tr_last):hover > td { - background-color: var(--white-opacity-05); -} - -table.disk_status tbody tr { - border-bottom: 1px solid var(--table-alt-border-color); -} - -table.array_status td.line { - border-top: 1px solid var(--table-alt-border-color); -} - -table.share_status { - margin-top: 12px; -} - -table.dashboard { - background-color: var(--dashboard-background-color); -} - -table.dashboard tr.header > td { - padding-bottom: 10px; - color: var(--gray-500); -} - -table.dashboard tbody { - border: 1px solid var(--dashboard-border-color); -} - -table.dashboard tr { - border: none; -} - -table.dashboard td { - line-height: normal; - height: auto; - padding: 3px 10px; - border: none !important; -} - -table.dashboard td.stopgap { - background-color: var(--background-color); -} - -table.dashboard i.control { - color: #d7dbdd; - background-color: rgba(0, 0, 0, 0.3); -} - -tr.alert { - color: #f0000c; - background-color: #ff9e9e; -} -tr.warn { - color: #e68a00; - background-color: #feefb3; -} -tr.past { - color: #d63301; - background-color: #ffddd1; -} - -span.label { - font-size: 1.1rem; -} - -span.status { - margin-top: 0; - padding-right: 0; -} - -span.status.vhshift { - margin-right: 8px; -} - -span.p0 { - padding-left: 0; -} - -span.small { - font-size: 1.1rem; -} -span#dropbox { - background: none; - line-height: 6rem; - margin-right: 20px; -} - -span.outer.solid { - background-color: #d7dbdd; -} - -label + .content { - margin-top: 64px; -} - -div.tabs { - margin: 110px 20px 30px 90px; - background-color: var(--background-color); -} - -div.tab { - margin-top: 23px; -} - -div.tab [type="radio"] + label:hover { - border-color: var(--alt-border-color); -} - -div.tab [type="radio"] + label { - padding: 8px 10px; - border-top-left-radius: 12px; - border-top-right-radius: 12px; - background-color: var(--border-color); - color: #b0b0b0; - border: #8b98a7 1px solid; -} - -div.tab [type="radio"]:checked + label { - cursor: default; - background-color: transparent; - color: var(--text-color); - border-color: var(--alt-border-color); - opacity: 1; -} - -div.tab [type="radio"] + label img { - display: none; -} - -div.Panel { - width: 25%; - height: auto; - margin: 0; - padding: 5px; - border-right: var(--table-alt-border-color) 1px solid; - border-bottom: 1px solid var(--table-alt-border-color); - box-sizing: border-box; -} - -div.Panel:hover { - background-color: var(--opac-background-color); -} - -div.Panel a { - display: flex; - justify-content: start; - align-items: center; - gap: 32px; - text-decoration: underline; - color: var(--text-color) -} - -div.Panel a:hover, -div.Panel a:focus { - text-decoration: none; -} - -div.Panel span { - height: auto; -} - -div.Panel br, -.vmtemplate br { - display: none; -} - -div.Panel img.PanelImg { - float: left; - margin: 10px; -} - -div.Panel i.PanelIcon { - float: left; - color: var(--text-color); - margin: 10px; -} - -div.Panel .PanelText { - font-size: 1.4rem; - padding-top: 0; - text-align: center; -} - -div.user-list { - background-color: transparent; - border: 1px solid var(--table-alt-border-color); -} - -div.user-list:hover { - background-color: var(--opac-background-color); -} -div.vmheader { - display: block; - clear: both; -} -div.vmtemplate:hover { - background-color: var(--opac-background-color); -} -div.vmtemplate { - height: 12rem; - width: 12rem; - border: 1px solid var(--table-alt-border-color); -} -div.vmtemplate img { - margin-top: 20px; -} - -div.up { - margin-top: -20px; - border: 1px solid var(--table-alt-border-color); -} - -pre.up { - margin-top: 0; -} - -pre { - border: 1px solid var(--table-alt-border-color); - margin-bottom: 10px; - padding: 10px; -} - -iframe#progressFrame { - left: 60px; - color: #808080; - z-index: -2; -} - -dl { - margin-top: 0; -} - -blockquote { - border: 1px solid var(--blue-200); - color: var(--blockquote-text-color); - background-color: var(--blue-100); - box-sizing: border-box; -} - -blockquote.ontop { - margin-top: 0; -} - -span.checkmark { - background-color: var(--gray-200); -} - -label.checkbox:hover input ~ .checkmark { - background-color: var(--gray-400); -} -label.checkbox input:checked ~ .checkmark { - background-color: var(--brand-orange); -} */ From 02b8e8a4d1705328facdc35b2d984f5a1af22309 Mon Sep 17 00:00:00 2001 From: Zack Spear Date: Thu, 30 May 2024 19:20:00 -0700 Subject: [PATCH 20/99] feat: css vars for dynamix css --- .../dynamix/include/DefaultPageLayout.php | 1 + .../plugins/dynamix/styles/base-dynamix.css | 1645 +++++++++++++++++ .../plugins/dynamix/styles/default-azure.css | 10 +- .../plugins/dynamix/styles/default-base.css | 44 +- .../plugins/dynamix/styles/default-black.css | 2 + .../dynamix/styles/default-color-pallet.css | 13 +- .../plugins/dynamix/styles/default-gray.css | 2 +- .../plugins/dynamix/styles/default-white.css | 2 + .../plugins/dynamix/styles/dynamix-azure.css | 378 +--- .../plugins/dynamix/styles/dynamix-black.css | 375 +--- .../plugins/dynamix/styles/dynamix-gray.css | 378 +--- .../plugins/dynamix/styles/dynamix-white.css | 375 +--- 12 files changed, 2018 insertions(+), 1207 deletions(-) create mode 100644 emhttp/plugins/dynamix/styles/base-dynamix.css diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout.php b/emhttp/plugins/dynamix/include/DefaultPageLayout.php index b85398a60..983867a06 100644 --- a/emhttp/plugins/dynamix/include/DefaultPageLayout.php +++ b/emhttp/plugins/dynamix/include/DefaultPageLayout.php @@ -52,6 +52,7 @@ function annotate($text) {echo "\n