From 37be7e9f6194b15b49c6fc1d9b203e4d0d7c8d73 Mon Sep 17 00:00:00 2001 From: Bailey Matthews Date: Sat, 9 Sep 2023 13:19:28 +0100 Subject: [PATCH] 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); +}