Files
webgui/plugins/dynamix/styles/default-black.css

262 lines
20 KiB
CSS

html{font-family:clear-sans;height:100%}
body{font-size:14px;color:#f2f2f2;background:#1c1b1b;padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
@media (max-width:1280px){#template{min-width:1280px;margin:0}}
@media (min-width:1281px){#template{min-width:1280px;margin:0 10px}}
@media (min-width:1921px){#template{min-width:1280px;max-width:1920px;margin:0 auto}}
img{border:0;text-decoration:none;vertical-align:middle}
p{text-align:justify}
p.centered{text-align:left}
a:hover{text-decoration:underline}
a{color:#486dba;text-decoration:none}
a.none{color:#f2f2f2}
a.header{color:#1c1c1c}
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;font-size:14px;line-height:20px;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}
i.spacing{margin-left:-6px}
i.icon{margin-right:4px}
i.title{margin-right:8px}
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:14px;background:transparent;border:1px solid #e5e5e5;padding:5px 10px;min-height:20px;line-height:20px;outline:none;width:304px;margin:0 20px 0 0;box-shadow:none;color:#f2f2f2}
input[type=button],input[type=reset],input[type=submit],button,button[type=button],a.button{font-family:clear-sans;font-size:13px;font-weight:bold;letter-spacing:2px;text-transform:uppercase;margin:10px 12px 0 0;padding:10px 28px;text-decoration:none;white-space:nowrap;cursor:pointer;outline:none;border-radius:.125rem;border:0;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:#262626;border-color:#ff8c2f}
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-color:#6c6c6c;background:#262626;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{font-family:clear-sans;font-size:14px;min-width:188px;max-width:326px;padding:6px 6px;margin:0 10px 0 0;border:#e5e5e5 1px solid;box-shadow:none;color:#f2f2f2;background:transparent;outline:none;display:inline-block;cursor:pointer}
select option{color:#f2f2f2;background-color:#262626}
select:focus{border-color:#ff8c2f}
select[disabled]{color:#f2f2f2;border-color:#6c6c6c;background:#262626;opacity:0.5;cursor:default}
select[name=enter_view]{padding:0;float:right}
select[name=enter_share]{padding:0;float:right}
select.narrow{min-width:87px}
select.auto{min-width:auto}
select.slot{min-width:440px;max-width:440px}
input.narrow{width:166px}
input.trim{width:50px}
#header{position:fixed;top:0;left:0;width:100%;height:140px;z-index:100;margin:0;background:#f2f2f2}
#header.image{background-size:100% 90px;background-repeat:no-repeat;color:#1c1c1c}
#header .logo{float:left;margin-top:34px;margin-left:11px}
#header .logo svg{margin-right:180px;height:40px}
#header .logo a span{color:#ff8c2f;font-size:24px;font-weight:bold;float:right;background-color:rgba(242,242,242,0.4);border-radius:10px;padding:6px 20px}
#header .block{margin:2px 2px 0 0;float:right;text-align:right;background-color:rgba(242,242,242,0.4);border-radius:10px;padding:5px 10px}
#header .text-left{float:left;text-align:right;color:#1c1c1c;padding-right:5px;border-right:solid medium #f15a2c}
#header .text-right{float:right;color:#1c1c1c;text-align:left;padding-left:5px}
#header .text-right a{color:#ff8c2f}
#header #licensetype{font-weight:bold;font-style:italic}
#title{margin:20px 0 32px 0;padding:8px 10px;clear:both;border-bottom:#2b2b2b 1px solid;background:#262626;letter-spacing:2px}
#title span.left{font-size:15px}
#title span.right{font-size:13px;padding-top:2px;padding-right:10px;float:right}
#title span img{padding-right:4px}
#menu{position:fixed;top:100px;left:0;width:100%;height:32px;line-height:32px;padding:0;margin:0;background:#f2f2f2;z-index:101}
#nav-block{overflow:hidden;height:38px;letter-spacing:2px}
#nav-left{float:left}
#nav-right{border-right:none;float:right}
#nav-block #nav-item{display:block;float:left;text-align:center;margin:0 2px;transition:0.3s background-color ease}
#nav-block #nav-user{display:block;float:left;text-align:center;border:none}
#nav-right #nav-item{border-right:none}
#nav-block #nav-item .system{vertical-align:middle;padding-bottom:2px;padding-right:4px}
#nav-block #nav-user .probe{font-size:13px;margin-left:3px;margin-right:8px}
#nav-block #nav-item:hover{border-bottom:5px solid #ff8c2f;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}
#nav-block #nav-item.active{color:#1c1c1c;border-bottom:5px solid #ff8c2f}
#nav-block #nav-item a{color:#1c1c1c;text-transform:uppercase;font-weight:bold;display:block;padding:0 8px;min-width:32px}
#nav-block #nav-item a:hover{color:#1c1c1c;text-decoration:none}
#nav-block #nav-item.active a{color:#1c1c1c}
#nav-block #nav-item.active:hover a{color:#1c1c1c;text-decoration:none}
#txt-tub1,#txt-tub2,#txt-tub3{color:#f2f2f2}
#clear{clear:both}
#footer{position:fixed;bottom:0;left:0;color:#d4d5d6;background:#2b2a29;padding:5px 0;width:100%;height:16px;line-height:16px;text-align:center;z-index:100}
#statusraid{float:left;padding-left:10px}
#countdown{margin:0 auto}
#copyright{font-family:bitstream;font-size:12px;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:#3B5998;padding-left:5px;padding-right:5px}
.green-text,.passed{color:#4F8A10}
.red-text,.failed{color:#F0000C}
.orange-text,.warning{color:#E68A00}
.blue-text{color:#3B5998}
.grey-text{color:#404040}
.usage-bar{float:left;height:20px;line-height:20px;width:130px;padding:1px 1px 1px 2px;margin:6px 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;background-color:#808080;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.usage-bar>span>span{padding:0 4px;font-size:13px;color:#f2f2f2}
.usage-disk{height:20px;line-height:20px;padding:0;margin:0;border-radius:3px;background-color:#585858}
.usage-disk>span{display:block;height:100%;border-radius:2px;background-color:#808080;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);text-align:left;font-size:13px}
.usage-disk>span>span{padding:0 6px;font-size:13px;color:#f2f2f2}
.usage-disk.sys{height:20px;line-height:20px;margin-right:8px;padding:1px 0 1px 1px}
.usage-disk.sys>span{color:#f2f2f2;font-size:14px}
.usage-disk.all{margin-right:2px}
.usage-disk.all>span{color:#f2f2f2;font-size:12px}
.notice{background:#FFF6BF url(../images/notice.png) no-repeat;background-position:60px 50%;color:#1c1c1c;font-size:16px;text-align:left;margin-top:180px;padding:15px 0 15px 130px;display:block;height:70px;line-height:70px;vertical-align:middle;border-top:2px solid #FFD324;border-bottom:2px solid #FFD324}
.whitebar{background:-webkit-gradient(linear,left top,right top,from(#C7C7C7),to(#EEEEEE));background:linear-gradient(90deg,#C7C7C7 0,#EEEEEE)}
.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;margin:-30px 0 0 0;width:100%}
table thead td{padding:7px 0}
table tbody td{padding:5px 0}
table.wide tbody td{padding:5px 0}
table tbody tr.tr_last{background:#212121;border-top:1px solid #2b2b2b;border-bottom: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:15px;background:#262626}
table.disk_status thead tr:last-child{border-bottom:1px solid #2b2b2b}
table.disk_status tr>td{width:8%;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 tr td:last-child{width:4%;padding-right:10px}
table.disk_status select{background:transparent}
table.disk_status tbody tr:nth-child(even){background-color:#212121}
table.disk_status.stats tr>td+td{text-align:left;padding-left:0;padding-right:12px}
table.array_status td{padding:12px 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.settings{margin:0;padding:0px}
table.settings td:first-child{width:35%;padding-left:12px}
table.settings.shifted{padding:0;margin-left:0;margin-top:0}
table.settings.shifted td:first-child{padding-left:0}
table.access_list{border-spacing:0;margin-top:10px;border:0}
table.access_list tr:first-child td{font-size:15px;vertical-align:middle;text-align:left;border:1px solid #2b2b2b;border-bottom:1px solid #2b2b2b;background:#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:15px;background:#262626}
table.share_status thead tr:last-child{border-bottom:1px solid #2b2b2b}
table.share_status tr>td{text-align:left;padding-left:12px}
table.share_status tr>td+td{padding-left:0}
table.share_status tr.share_status_size>td{padding-left:40px}
table.share_status tr.share_status_size>td+td{padding-left:15px}
table.share_status tbody tr:nth-child(even){background-color:#212121}
table.share_status tbody tr.alert{color:#F0000C;background-color:#FF9E9E}
table.share_status tbody tr.warn{color:#E68A00;background-color:#FEEFB3}
table.share_status.share tr td:last-child{width:4%;text-align:right;padding-right:10px}
table.share_status.fixed tr td:first-child{width:100px}
table.share_status.fixed thead tr>td+td{font-size:13px}
table.share_status.fixed tr>td+td{min-width:30px;text-align:center;padding:0}
table.share_status.fixed tbody tr{border-bottom:1px #2b2b2b dotted}
table.share_status.table{margin-top:36px}
table.share_status.table tr>td{width:50%}
table.share_status.dash{float:left;width:35%;margin-top:36px;border:1px solid #2b2b2b}
table.share_status.dash thead tr:first-child>td{height:24px;line-height:24px;vertical-align:middle}
table.share_status.dash thead tr:last-child>td{font-weight:bold;border-bottom:1px solid #2b2b2b}
table.share_status.dash tbody td.blue{color:#3B5998}
table.share_status.dash.line tbody tr:nth-child(even){background-color:#212121}
table.share_status.dash.line tbody tr.wide{height:40px;line-height:40px}
table.share_status.dash.line tbody td{border:1px solid #2b2b2b;padding:3px 4px 3px 10px}
table.share_status.dash.line tr>td{width:25%}
table.share_status.dash.line tr>td[colspan="2"]{width:50%}
table.share_status.dash.line tr>td[colspan="3"]{width:75%}
table.share_status.dash.line tr>td[colspan="4"]{width:100%}
table.share_status.dash.line tr>td:last-child{white-space:normal}
table.share_status.dash tr.h48{height:48px}
table.share_status.dash td:first-child{width:25%}
@media (max-width:1440px){
table.share_status.dash.line{width:49%;margin-right:2%;table-layout:fixed}
table.share_status.m36{width:49%;margin-left:0;margin-right:0}
table.share_status.m36 tr>td+td+td{width:12%}
table.share_status.m0{width:49%;margin-left:0;margin-right:0}
table.share_status.m0 tr>td+td+td{width:12%}
}
@media (min-width:1441px){
table.share_status.dash.line{width:33%;margin-right:7px;table-layout:fixed}
table.share_status.m36{width:33%;margin-left:0;margin-right:0}
table.share_status.m36 tr>td+td+td{width:12%}
table.share_status.m0{width:33%;margin-left:0;margin-right:7px}
table.share_status.m0 tr>td+td+td{width:12%}
}
[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:13px;padding:2px 0 2px 6px;margin-right:6px;border-radius:4px;display:inline;width:auto;vertical-align:middle}
span.temp-text{font-size:13px;color:#4F8A10}
span.heat-text{font-size:13px;color:#F0000C}
span.cpu-speed{display:block;color:#3B5998}
span.status{float:right;font-size:16px;margin-top:48px;padding-right:8px;letter-spacing:2px}
span.status.vhshift{margin-top:0;margin-right:0}
span.status.vshift{margin-top:-20px}
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:12px}
span.p0{padding-left:0}
span.strong{font-weight:bold}
span.big{font-size:15px}
span.small{font-size:13px}
span.one{margin-left:-16px}
span.two{margin-left:-20px}
span.three{margin-left:-23px}
span.tub{margin-right:8px;font-size:24px;cursor:pointer}
span.score{font-size:13px;color:#1c1c1c;position:absolute}
i.padlock{margin-right:8px;cursor:default}
i.nolock{visibility:hidden;margin-right:8px}
i.lock{margin-left:8px;cursor:default}
img.icon{margin:-3px 4px 0 0}
img.list{width:auto;max-width:48px;height:48px}
div.content{position:absolute;top:20px;left:0;width:100%;padding-bottom:30px;z-index:-1;clear:both}
div.content.shift{margin-top:1px}
label+.content{margin-top:87px}
div.tabs{position:relative;margin:130px 0 0 0}
div.tab{float:left;margin-top:47px}
div.tab input[id^="tab"]{display:none}
div.tab [type=radio]+label:hover{background:transparent;border:1px solid #ff8c2f;border-bottom:none;cursor:pointer;opacity:1}
div.tab [type=radio]:checked+label{cursor:default;background: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:15px;letter-spacing:2px;padding:4px 10px;margin-right:2px;border-top-left-radius:6px;border-top-right-radius:6px;border:1px solid #6c6c6c;border-bottom:none;background:#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:80px}
div.Panel .PanelText{padding-top:6px}
div.Panel img.PanelImg{width:auto;max-width:48px;height:48px}
div.Panel i.PanelIcon{font-size:48px}
div.user-list{float:left;padding:10px;margin-right:10px;margin-bottom:24px;border:1px solid #2f2f2f;border-radius:5px;line-height:20px;height:100px;width:100px;background:#262626}
div.user-list img{width:auto;max-width:48px;height:48px;margin-bottom:16px}
div.up{margin-top:-20px;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}
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}
@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;padding:4px 6px;overflow:auto}
iframe#progressFrame{position:fixed;bottom:32px;left:0;margin:0;padding:8px 8px 0 8px;width:100%;height:12px;line-height:12px;border-style:none;overflow:hidden;font-family:bitstream;font-size:12px;color:#808080;white-space:nowrap;z-index:-10}
dl{margin:0;padding-left:12px;line-height:26px}
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:#3a87ad;background-color:#d9edf7}
blockquote.ontop{margin-top:-20px;margin-bottom:46px}
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}
label.checkbox:hover input ~ .checkmark{background-color:#5b5b5b}
label.checkbox input:checked ~ .checkmark {background-color:#ff8c2f}
label.checkbox input:disabled ~ .checkmark {opacity:0.5}
span.checkmark:after{content:'';position:absolute;display:none}
label.checkbox input:checked ~ .checkmark:after{display:block}
label.checkbox .checkmark:after{left:4px;top:0;width:3px;height:8px;border:solid white;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}