chore: remove unreferenced update.crypto.php

.gitignore

@@ -68,3 +68,8 @@ emhttp/plugins/dynamix.my.servers/unraid-components/index.html
 
 # development scripts
 .dev-scripts/
+emhttp/plugins/node_modules/
+emhttp/plugins/.prettierignore
+emhttp/plugins/.prettierrc
+emhttp/plugins/package-lock.json
+emhttp/plugins/package.json

.vscode/settings.json

@@ -79,5 +79,8 @@
         "zip",
         "zlib",
         "libvirt-php"
-    ]
+    ],
+    "search.exclude": {
+        "emhttp/webGui/**/*": true,
+    }
 }

emhttp/plugins/dynamix.apcupsd/sheets/UPSsettings.css

@@ -1,4 +1,15 @@
-table.ups thead tr th{width:16.6%;padding-left:10px}
-table.ups tbody tr td{padding-left:10px;font-weight:bold}
-tr.ups{height:3rem;line-height:3rem}
-i.ups{margin-right:8px}
+table.ups thead tr th {
+    width: 16.6%;
+    padding-left: 10px;
+}
+table.ups tbody tr td {
+    padding-left: 10px;
+    font-weight: bold;
+}
+tr.ups {
+    height: 3rem;
+    line-height: 3rem;
+}
+i.ups {
+    margin-right: 8px;
+}

emhttp/plugins/dynamix.docker.manager/DockerContainers.page

@@ -28,7 +28,7 @@ $cpus    = cpu_list();
 ?>
 <link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.ui.css')?>">
 <link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
-<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix.docker.manager/styles/style-$theme.css")?>">
+<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix.docker.manager/styles/DockerManager.css")?>">
 
 <table id="docker_containers" class="tablesorter shift">
 <thead><tr><th><a id="resetsort" class="nohand" onclick="resetSorting()" title="_(Reset sorting)_"><i class="fa fa-th-list"></i></a>_(Application)_</th><th>_(Version)_</th><th>_(Network)_</th><th>_(Port Mappings)_ <small>(_(App to Host)_)</small></th><th>_(Volume Mappings)_ <small>(_(App to Host)_)</small></th><th class="load advanced">_(CPU & Memory load)_</th><th class="nine">_(Autostart)_</th><th class="five">_(Uptime)_</th></tr></thead>

emhttp/plugins/dynamix.docker.manager/include/CreateDocker.php

@@ -273,7 +273,7 @@ $bgcolor = strstr('white,azure',$display['theme']) ? '#f2f2f2' : '#1c1c1c';
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.ui.css")?>">
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.switchbutton.css")?>">
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.filetree.css")?>">
-<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix.docker.manager/styles/style-{$display['theme']}.css")?>">
+<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix.docker.manager/styles/DockerManager.css")?>">
 
 <script src="<?autov('/webGui/javascript/jquery.switchbutton.js')?>"></script>
 <script src="<?autov('/webGui/javascript/jquery.filetree.js')?>" charset="utf-8"></script>

emhttp/plugins/dynamix.docker.manager/sheets/AddContainer-azure.css

@@ -1 +0,0 @@
-.fileTree{width:240px;max-height:200px;overflow-y:scroll;overflow-x:hidden;position:absolute;display:none;background:#f2f2f2}

emhttp/plugins/dynamix.docker.manager/sheets/AddContainer-black.css

@@ -1 +0,0 @@
-.fileTree{width:240px;max-height:200px;overflow-y:scroll;overflow-x:hidden;position:absolute;display:none;background:#1c1c1c}

emhttp/plugins/dynamix.docker.manager/sheets/AddContainer-gray.css

@@ -1 +0,0 @@
-.fileTree{width:240px;max-height:200px;overflow-y:scroll;overflow-x:hidden;position:absolute;display:none;background:#1c1c1c}

emhttp/plugins/dynamix.docker.manager/sheets/AddContainer-white.css

@@ -1 +0,0 @@
-.fileTree{width:240px;max-height:200px;overflow-y:scroll;overflow-x:hidden;position:absolute;display:none;background:#f2f2f2}

emhttp/plugins/dynamix.docker.manager/sheets/AddContainer.css

@@ -1,14 +1,77 @@
-.noshow,.advanced{display:none}
-.required:after{content:" *";color:#E80000}
-span.boxed{display:inline-block;line-height:normal;white-space:normal;width:60%}
-span.cpu,label.checkbox{display:inline-block;width:32px}
-span.ct{display:inline-block;width:230px}
-span.net{display:inline-block;width:120px}
-span.ip{display:inline-block;width:160px}
-dl,dt,dd{line-height:normal!important;height:auto!important}
-dl{padding:8px 0!important}
-dl>dt:nth-of-type(2),dl>dd:nth-of-type(2){padding:20px 0 0 0!important}
-input.setting_input{margin-right:4rem}
-input,select{margin-top:-0.8rem!important}
-div#configLocation,div#configLocation dl{padding:0!important}
-div#configLocation dt{margin-top:-0.18rem!important}
+.noshow,
+.advanced {
+    display: none;
+}
+.required:after {
+    content: " *";
+    color: var(--red-800);
+}
+span.boxed {
+    display: inline-block;
+    line-height: normal;
+    white-space: normal;
+    width: 60%;
+}
+span.cpu,
+label.checkbox {
+    display: inline-block;
+    width: 32px;
+}
+span.ct {
+    display: inline-block;
+    width: 230px;
+}
+span.net {
+    display: inline-block;
+    width: 120px;
+}
+span.ip {
+    display: inline-block;
+    width: 160px;
+}
+dl,
+dt,
+dd {
+    line-height: normal !important;
+    height: auto !important;
+}
+dl {
+    padding: 8px 0 !important;
+}
+dl > dt:nth-of-type(2),
+dl > dd:nth-of-type(2) {
+    padding: 20px 0 0 0 !important;
+}
+input.setting_input {
+    margin-right: 4rem;
+}
+input,
+select {
+    margin-top: -0.8rem !important;
+}
+div#configLocation,
+div#configLocation dl {
+    padding: 0 !important;
+}
+div#configLocation dt {
+    margin-top: -0.18rem !important;
+}
+
+:root {
+    --add-container-file-tree-background: var(--black);
+}
+
+.Theme--azure:root,
+.Theme--white:root {
+    --add-container-file-tree-background: var(--gray-100);
+}
+
+.fileTree {
+    width: 240px;
+    max-height: 200px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    position: absolute;
+    display: none;
+    background: var(--add-container-file-tree-background);
+}

emhttp/plugins/dynamix.docker.manager/sheets/DockerContainers.css

@@ -1,12 +1,45 @@
-.basic{display:block}
-.advanced{display:none;white-space:nowrap}
-.log{cursor:zoom-in}
-.exec{cursor:pointer}
-table#docker_containers{text-align:left}
-th.five{width:5%}
-th.nine{width:9%}
-th.load{width:140px}
-input.wait{width:24px;margin:0 4px;padding:0 5px;border:none;box-shadow:none;background-color:transparent}
-table tbody td{line-height:normal}
-i.mover{margin-right:8px;display:none}
-#resetsort{margin-left:12px;display:inline-block;width:32px}
+.basic {
+    display: block;
+}
+.advanced {
+    display: none;
+    white-space: nowrap;
+}
+.log {
+    cursor: zoom-in;
+}
+.exec {
+    cursor: pointer;
+}
+table#docker_containers {
+    text-align: left;
+}
+th.five {
+    width: 5%;
+}
+th.nine {
+    width: 9%;
+}
+th.load {
+    width: 140px;
+}
+input.wait {
+    width: 24px;
+    margin: 0 4px;
+    padding: 0 5px;
+    border: none;
+    box-shadow: none;
+    background-color: transparent;
+}
+table tbody td {
+    line-height: normal;
+}
+i.mover {
+    margin-right: 8px;
+    display: none;
+}
+#resetsort {
+    margin-left: 12px;
+    display: inline-block;
+    width: 32px;
+}

emhttp/plugins/dynamix.docker.manager/sheets/DockerSettings-azure.css

@@ -1,2 +0,0 @@
-.fileTree{background:#f2f2f2;width:300px;max-height:150px;overflow-y:scroll;overflow-x:hidden;position:absolute;z-index:100;display:none}
-span.disabled{color:#B0B0B0}

emhttp/plugins/dynamix.docker.manager/sheets/DockerSettings-black.css

@@ -1,2 +0,0 @@
-.fileTree{background:#1c1c1c;width:300px;max-height:150px;overflow-y:scroll;overflow-x:hidden;position:absolute;z-index:100;display:none}
-span.disabled{color:#404040}

emhttp/plugins/dynamix.docker.manager/sheets/DockerSettings-gray.css

@@ -1,2 +0,0 @@
-.fileTree{background:#1c1c1c;width:300px;max-height:150px;overflow-y:scroll;overflow-x:hidden;position:absolute;z-index:100;display:none}
-span.disabled{color:#404040}

emhttp/plugins/dynamix.docker.manager/sheets/DockerSettings-white.css

@@ -1,2 +0,0 @@
-.fileTree{background:#f2f2f2;width:300px;max-height:150px;overflow-y:scroll;overflow-x:hidden;position:absolute;z-index:100;display:none}
-span.disabled{color:#B0B0B0}

emhttp/plugins/dynamix.docker.manager/sheets/DockerSettings.css

@@ -1,17 +1,90 @@
-.errortext{color:#EF3D47;display:none;margin-left:20px}
-.basic{display:inline-block}
-.advanced{display:none}
-select.mask{min-width:0;margin:0 10px 0 4px}
-select.net{min-width:0;margin:0 4px 0 2px}
-select option.hide{display:none}
-input.ip4{width:100px;margin:0 4px 0 1px}
-input.ip6{width:140px;margin:0 4px}
-input.gw4{width:100px;margin:0 4px 0 1px}
-input.gw6{width:160px;margin:0 4px}
-input.pool6{width:40px;margin:0 4px 0 1px}
-span.net{margin-left:4px;margin-right:2px}
-span.ip4{display:inline-block;width:260px}
-span.ip6{display:inline-block;width:310px}
-span.gw4{display:inline-block;width:200px}
-span.gw6{display:inline-block;width:270px}
-span.nonexist{margin-left:20px}
+:root {
+    --docker-settings-file-tree-background: var(--black);
+    --docker-settings-span-disabled-color: var(--gray-600);
+}
+
+.Theme--azure:root,
+.Theme--white:root {
+    --docker-settings-file-tree-background: var(--gray-100);
+    --docker-settings-span-disabled-color: var(--gray-300); /* Condensed from: #b0b0b0 */
+}
+
+.errortext {
+    color: var(--red-800); /* Condensed from: #ef3d47 */
+    display: none;
+    margin-left: 20px;
+}
+.basic {
+    display: inline-block;
+}
+.advanced {
+    display: none;
+}
+select.mask {
+    min-width: 0;
+    margin: 0 10px 0 4px;
+}
+select.net {
+    min-width: 0;
+    margin: 0 4px 0 2px;
+}
+select option.hide {
+    display: none;
+}
+input.ip4 {
+    width: 100px;
+    margin: 0 4px 0 1px;
+}
+input.ip6 {
+    width: 140px;
+    margin: 0 4px;
+}
+input.gw4 {
+    width: 100px;
+    margin: 0 4px 0 1px;
+}
+input.gw6 {
+    width: 160px;
+    margin: 0 4px;
+}
+input.pool6 {
+    width: 40px;
+    margin: 0 4px 0 1px;
+}
+span.net {
+    margin-left: 4px;
+    margin-right: 2px;
+}
+span.ip4 {
+    display: inline-block;
+    width: 260px;
+}
+span.ip6 {
+    display: inline-block;
+    width: 310px;
+}
+span.gw4 {
+    display: inline-block;
+    width: 200px;
+}
+span.gw6 {
+    display: inline-block;
+    width: 270px;
+}
+span.nonexist {
+    margin-left: 20px;
+}
+
+.fileTree {
+    background: var(--docker-settings-file-tree-background);
+    width: 300px;
+    max-height: 150px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    position: absolute;
+    z-index: 100;
+    display: none;
+}
+span.disabled {
+    color: var(--docker-settings-span-disabled-color);
+}

emhttp/plugins/dynamix.docker.manager/sheets/UpdateContainer-azure.css

@@ -1 +0,0 @@
-.fileTree{width:240px;max-height:200px;overflow-y:scroll;overflow-x:hidden;position:absolute;display:none;background:#f2f2f2}

emhttp/plugins/dynamix.docker.manager/sheets/UpdateContainer-black.css

@@ -1 +0,0 @@
-.fileTree{width:240px;max-height:200px;overflow-y:scroll;overflow-x:hidden;position:absolute;display:none;background:#1c1c1c}

emhttp/plugins/dynamix.docker.manager/sheets/UpdateContainer-gray.css

@@ -1 +0,0 @@
-.fileTree{width:240px;max-height:200px;overflow-y:scroll;overflow-x:hidden;position:absolute;display:none;background:#1c1c1c}

emhttp/plugins/dynamix.docker.manager/sheets/UpdateContainer-white.css

@@ -1 +0,0 @@
-.fileTree{width:240px;max-height:200px;overflow-y:scroll;overflow-x:hidden;position:absolute;display:none;background:#f2f2f2}

emhttp/plugins/dynamix.docker.manager/sheets/UpdateContainer.css

@@ -1,14 +1,77 @@
-.noshow,.advanced{display:none}
-.required:after{content:" *";color:#E80000}
-span.boxed{display:inline-block;line-height:normal;white-space:normal;width:60%}
-span.cpu,label.checkbox{display:inline-block;width:32px}
-span.ct{display:inline-block;width:230px}
-span.net{display:inline-block;width:120px}
-span.ip{display:inline-block;width:160px}
-dl,dt,dd{line-height:normal!important;height:auto!important}
-dl{padding:8px 0!important}
-dl>dt:nth-of-type(2),dl>dd:nth-of-type(2){padding:20px 0 0 0!important}
-input.setting_input{margin-right:4rem}
-input,select{margin-top:-0.8rem!important}
-div#configLocation,div#configLocation dl{padding:0!important}
-div#configLocation dt{margin-top:-0.18rem!important}
+:root {
+    --update-container-file-tree-background: var(--black);
+}
+
+.Theme--azure:root,
+.Theme--white:root {
+    --update-container-file-tree-background: var(--gray-100);
+}
+
+.noshow,
+.advanced {
+    display: none;
+}
+.required:after {
+    content: " *";
+    color: var(--red-800);
+}
+span.boxed {
+    display: inline-block;
+    line-height: normal;
+    white-space: normal;
+    width: 60%;
+}
+span.cpu,
+label.checkbox {
+    display: inline-block;
+    width: 32px;
+}
+span.ct {
+    display: inline-block;
+    width: 230px;
+}
+span.net {
+    display: inline-block;
+    width: 120px;
+}
+span.ip {
+    display: inline-block;
+    width: 160px;
+}
+dl,
+dt,
+dd {
+    line-height: normal !important;
+    height: auto !important;
+}
+dl {
+    padding: 8px 0 !important;
+}
+dl > dt:nth-of-type(2),
+dl > dd:nth-of-type(2) {
+    padding: 20px 0 0 0 !important;
+}
+input.setting_input {
+    margin-right: 4rem;
+}
+input,
+select {
+    margin-top: -0.8rem !important;
+}
+div#configLocation,
+div#configLocation dl {
+    padding: 0 !important;
+}
+div#configLocation dt {
+    margin-top: -0.18rem !important;
+}
+
+.fileTree {
+    width: 240px;
+    max-height: 200px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    position: absolute;
+    display: none;
+    background: var(--update-container-file-tree-background);
+}

emhttp/plugins/dynamix.docker.manager/styles/DockerManager.css

@@ -0,0 +1,178 @@
+.Theme--azure:root,
+.Theme--white:root {
+    --dockermanager-button-text-color: var(--orange-500);
+    --dockermanager-button-background-start: var(--red-800);
+    --dockermanager-button-background-end: var(--orange-500);
+    --dockermanager-button-hover-color: var(--gray-100);
+    --dockermanager-default-background: var(--gray-100);
+    --dockermanager-border-color: var(--black);
+    --dockermanager-header-background: var(--gray-150); /* Condensed from: #e3e3e3 */
+    --dockermanager-header-color: var(--black);
+    --dockermanager-content-background: var(--gray-100);
+    --dockermanager-content-color: var(--black);
+    --dockermanager-active-background: var(--gray-150);
+    --dockermanager-dropcontainer-background: var(--gray-100);
+    --dockermanager-disabled-color: var(--black);
+    --dockermanager-disabled-border-color: var(--gray-400); /* Condensed from: #a2a2a2 */
+    --dockermanager-disabled-background: var(--gray-150);
+    --dockermanager-text-color: var(--black);
+}
+
+.Theme--black:root,
+.Theme--gray:root {
+    --dockermanager-button-text-color: var(--orange-500);
+    --dockermanager-button-background-start: var(--red-800);
+    --dockermanager-button-background-end: var(--orange-500);
+    --dockermanager-button-hover-color: var(--gray-100);
+    --dockermanager-default-background: var(--black);
+    --dockermanager-border-color: var(--gray-200); /* Condensed from: #e5e5e5 */
+    --dockermanager-header-background: var(--gray-800); /* Condensed from: #2b2b2b */
+    --dockermanager-header-color: var(--gray-100);
+    --dockermanager-content-background: var(--black);
+    --dockermanager-content-color: var(--gray-100);
+    --dockermanager-active-background: var(--gray-700); /* Condensed from: #262626 */
+    --dockermanager-dropcontainer-background: var(--black);
+    --dockermanager-disabled-color: var(--gray-100);
+    --dockermanager-disabled-border-color: var(--gray-500); /* Condensed from: #6c6c6c */
+    --dockermanager-disabled-background: var(--gray-700); /* Condensed from: #262626 */
+    --dockermanager-text-color: var(--gray-100);
+}
+
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
+    font-family: clear-sans;
+    font-size: 1.1rem;
+    font-weight: bold;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    margin: 10px 12px 10px 0;
+    padding: 9px 18px;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+    border-radius: 4px;
+    border: 0;
+    color: var(--dockermanager-button-text-color);
+    background:
+        -webkit-gradient(
+                linear,
+                left top,
+                right top,
+                from(var(--dockermanager-button-background-start)),
+                to(var(--dockermanager-button-background-end))
+            )
+            0 0 no-repeat,
+        -webkit-gradient(
+                linear,
+                left top,
+                right top,
+                from(var(--dockermanager-button-background-start)),
+                to(var(--dockermanager-button-background-end))
+            ) 0 100% no-repeat,
+        -webkit-gradient(
+                linear,
+                left bottom,
+                left top,
+                from(var(--dockermanager-button-background-start)),
+                to(var(--dockermanager-button-background-start))
+            ) 0 100% no-repeat,
+        -webkit-gradient(
+                linear,
+                left bottom,
+                left top,
+                from(var(--dockermanager-button-background-end)),
+                to(var(--dockermanager-button-background-end))
+            ) 100% 100% no-repeat;
+    background:
+        linear-gradient(90deg, var(--dockermanager-button-background-start) 0, var(--dockermanager-button-background-end)) 0 0 no-repeat,
+        linear-gradient(90deg, var(--dockermanager-button-background-start) 0, var(--dockermanager-button-background-end)) 0 100% no-repeat,
+        linear-gradient(0deg, var(--dockermanager-button-background-start) 0, var(--dockermanager-button-background-start)) 0 100% no-repeat,
+        linear-gradient(0deg, var(--dockermanager-button-background-end) 0, var(--dockermanager-button-background-end)) 100% 100% no-repeat;
+    background-size:
+        100% 2px,
+        100% 2px,
+        2px 100%,
+        2px 100%;
+}
+
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:hover {
+    color: var(--dockermanager-button-hover-color);
+    background: -webkit-gradient(
+        linear,
+        left top,
+        right top,
+        from(var(--dockermanager-button-background-start)),
+        to(var(--dockermanager-button-background-end))
+    );
+    background: linear-gradient(90deg, var(--dockermanager-button-background-start) 0, var(--dockermanager-button-background-end));
+}
+
+.ui-dropdownchecklist .ui-state-default {
+    background: var(--dockermanager-default-background);
+    border: none;
+    box-shadow: none;
+    outline: none;
+    cursor: pointer;
+    height: 2.2rem;
+    line-height: 2.2rem;
+}
+
+.ui-dropdownchecklist-group {
+    font-weight: normal;
+    font-style: italic;
+    padding: 1px 9px 1px 8px;
+}
+
+.ui-dropdownchecklist-selector {
+    border: 1px solid var(--dockermanager-border-color);
+    display: inline-block;
+    cursor: pointer;
+    padding: 1px 9px 1px 8px;
+}
+
+.ui-dropdownchecklist-selector-wrapper {
+    vertical-align: middle;
+    font-size: 0;
+}
+
+.ui-widget-header {
+    border: none;
+    background: var(--dockermanager-header-background);
+    color: var(--dockermanager-header-color);
+    font-weight: bold;
+}
+
+.ui-widget-content {
+    border: 1px solid var(--dockermanager-border-color);
+    background: var(--dockermanager-content-background);
+    color: var(--dockermanager-content-color);
+}
+
+.ui-state-active {
+    background: var(--dockermanager-active-background);
+}
+
+.ui-dropdownchecklist-dropcontainer {
+    background: var(--dockermanager-dropcontainer-background);
+    border: 1px solid var(--dockermanager-border-color);
+}
+
+.ui-state-disabled {
+    color: var(--dockermanager-disabled-color);
+    border-color: var(--dockermanager-disabled-border-color);
+    background: var(--dockermanager-disabled-background);
+    opacity: 0.5;
+}
+
+.ui-dropdownchecklist-indent {
+    padding-left: 7px;
+}
+
+.ui-dropdownchecklist-text {
+    color: var(--dockermanager-text-color);
+    font-size: 1.3rem;
+}
+
+.ui-dropdownchecklist .ui-widget-content .ui-state-default {
+    background: var(--dockermanager-default-background);
+}

emhttp/plugins/dynamix.docker.manager/styles/style-azure.css

@@ -1,14 +0,0 @@
-.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button{font-family:clear-sans;font-size:1.1rem;font-weight:bold;letter-spacing:2px;text-transform:uppercase;margin:10px 12px 10px 0;padding:9px 18px;text-decoration:none;white-space:nowrap;cursor:pointer;outline:none;border-radius:4px;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%}
-.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:hover{color:#f2f2f2;background:-webkit-gradient(linear,left top,right top,from(#e22828),to(#ff8c2f));background:linear-gradient(90deg,#e22828 0,#ff8c2f)}
-.ui-dropdownchecklist .ui-state-default{background:#f2f2f2;border:none;box-shadow:none;outline:none;cursor:pointer;height:2.2rem;line-height:2.2rem}
-.ui-dropdownchecklist-group{font-weight:normal;font-style:italic;padding:1px 9px 1px 8px}
-.ui-dropdownchecklist-selector{border:1px solid #1c1c1c;display:inline-block;cursor:pointer;padding:1px 9px 1px 8px}
-.ui-dropdownchecklist-selector-wrapper{vertical-align:middle;font-size:0}
-.ui-widget-header{border:none;background:#e3e3e3;color:#1c1c1c;font-weight:bold}
-.ui-widget-content{border:1px solid #1c1c1c;background:#f2f2f2;color:#1c1c1c}
-.ui-state-active{background:#e8e8e8}
-.ui-dropdownchecklist-dropcontainer{background:#f2f2f2;border:1px solid #1c1c1c}
-.ui-state-disabled{color:#1c1c1c;border-color:#a2a2a2;background:#e8e8e8;opacity:0.5}
-.ui-dropdownchecklist-indent{padding-left:7px}
-.ui-dropdownchecklist-text{color:#1c1c1c;font-size:1.3rem}
-.ui-dropdownchecklist .ui-widget-content .ui-state-default{background:#f2f2f2;border:0px}

emhttp/plugins/dynamix.docker.manager/styles/style-black.css

@@ -1,14 +0,0 @@
-.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button{font-family:clear-sans;font-size:1.1rem;font-weight:bold;letter-spacing:2px;text-transform:uppercase;margin:10px 12px 10px 0;padding:9px 18px;text-decoration:none;white-space:nowrap;cursor:pointer;outline:none;border-radius:4px;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%}
-.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:hover{color:#f2f2f2;background:-webkit-gradient(linear,left top,right top,from(#e22828),to(#ff8c2f));background:linear-gradient(90deg,#e22828 0,#ff8c2f)}
-.ui-dropdownchecklist .ui-state-default{background:#1c1c1c;border:none;box-shadow:none;outline:none;cursor:pointer;height:2.2rem;line-height:2.2rem}
-.ui-dropdownchecklist-group{font-weight:normal;font-style:italic;padding:1px 9px 1px 8px}
-.ui-dropdownchecklist-selector{border:1px solid #e5e5e5;display:inline-block;cursor:pointer;padding:1px 9px 1px 8px}
-.ui-dropdownchecklist-selector-wrapper{vertical-align:middle;font-size:0}
-.ui-widget-header{border:none;background:#2b2b2b;color:#f2f2f2;font-weight:bold}
-.ui-widget-content{border:1px solid #e5e5e5;background:#1c1c1c;color:#f2f2f2}
-.ui-state-active{background:#262626}
-.ui-dropdownchecklist-dropcontainer{background:#1c1c1c;border:1px solid #e5e5e5}
-.ui-state-disabled{color:#f2f2f2;border-color:#6c6c6c;background:#262626;opacity:0.5}
-.ui-dropdownchecklist-indent{padding-left:7px}
-.ui-dropdownchecklist-text{color:#f2f2f2;font-size:1.3rem}
-.ui-dropdownchecklist .ui-widget-content .ui-state-default{background:#1c1c1c;border:0px}

emhttp/plugins/dynamix.docker.manager/styles/style-gray.css

@@ -1,14 +0,0 @@
-.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button{font-family:clear-sans;font-size:1.1rem;font-weight:bold;letter-spacing:2px;text-transform:uppercase;margin:10px 12px 10px 0;padding:9px 18px;text-decoration:none;white-space:nowrap;cursor:pointer;outline:none;border-radius:4px;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%}
-.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:hover{color:#f2f2f2;background:-webkit-gradient(linear,left top,right top,from(#e22828),to(#ff8c2f));background:linear-gradient(90deg,#e22828 0,#ff8c2f)}
-.ui-dropdownchecklist .ui-state-default{background:#1c1c1c;border:none;box-shadow:none;outline:none;cursor:pointer;height:2.2rem;line-height:2.2rem}
-.ui-dropdownchecklist-group{font-weight:normal;font-style:italic;padding:1px 9px 1px 8px}
-.ui-dropdownchecklist-selector{border:1px solid #e5e5e5;display:inline-block;cursor:pointer;padding:1px 9px 1px 8px}
-.ui-dropdownchecklist-selector-wrapper{vertical-align:middle;font-size:0}
-.ui-widget-header{border:none;background:#2b2b2b;color:#f2f2f2;font-weight:bold}
-.ui-widget-content{border:1px solid #e5e5e5;background:#1c1c1c;color:#f2f2f2}
-.ui-state-active{background:#262626}
-.ui-dropdownchecklist-dropcontainer{background:#1c1c1c;border:1px solid #e5e5e5}
-.ui-state-disabled{color:#f2f2f2;border-color:#6c6c6c;background:#262626;opacity:0.5}
-.ui-dropdownchecklist-indent{padding-left:7px}
-.ui-dropdownchecklist-text{color:#f2f2f2;font-size:1.3rem}
-.ui-dropdownchecklist .ui-widget-content .ui-state-default{background:#1c1c1c;border:0px}

emhttp/plugins/dynamix.docker.manager/styles/style-white.css

@@ -1,14 +0,0 @@
-.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button{font-family:clear-sans;font-size:1.1rem;font-weight:bold;letter-spacing:2px;text-transform:uppercase;margin:10px 12px 10px 0;padding:9px 18px;text-decoration:none;white-space:nowrap;cursor:pointer;outline:none;border-radius:4px;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%}
-.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:hover{color:#f2f2f2;background:-webkit-gradient(linear,left top,right top,from(#e22828),to(#ff8c2f));background:linear-gradient(90deg,#e22828 0,#ff8c2f)}
-.ui-dropdownchecklist .ui-state-default{background:#f2f2f2;border:none;box-shadow:none;outline:none;cursor:pointer;height:2.2rem;line-height:2.2rem}
-.ui-dropdownchecklist-group{font-weight:normal;font-style:italic;padding:1px 9px 1px 8px}
-.ui-dropdownchecklist-selector{border:1px solid #1c1c1c;display:inline-block;cursor:pointer;padding:1px 9px 1px 8px}
-.ui-dropdownchecklist-selector-wrapper{vertical-align:middle;font-size:0}
-.ui-widget-header{border:none;background:#e3e3e3;color:#1c1c1c;font-weight:bold}
-.ui-widget-content{border:1px solid #1c1c1c;background:#f2f2f2;color:#1c1c1c}
-.ui-state-active{background:#e8e8e8}
-.ui-dropdownchecklist-dropcontainer{background:#f2f2f2;border:1px solid #1c1c1c}
-.ui-state-disabled{color:#1c1c1c;border-color:#a2a2a2;background:#e8e8e8;opacity:0.5}
-.ui-dropdownchecklist-indent{padding-left:7px}
-.ui-dropdownchecklist-text{color:#1c1c1c;font-size:1.3rem}
-.ui-dropdownchecklist .ui-widget-content .ui-state-default{background:#f2f2f2;border:0px}

emhttp/plugins/dynamix.gui.search/sheets/gui_search-azure.css

@@ -1,2 +0,0 @@
-#guiSearchBoxSpan{display:inline-block;margin:0 0 0 20px;padding:0;height:auto;line-height:normal;font-size:1.3rem}
-#guiSearchBox{position:relative;top:0;left:0;width:50rem;border:none;border-radius:20px;margin:0;padding:5px 12px;color:#1c1b1b;background-color:#feefb3}

emhttp/plugins/dynamix.gui.search/sheets/gui_search-black.css

@@ -1,3 +0,0 @@
-#guiSearchBoxSpan{display:inline-block;position:relative;margin:4px 2px 2px 2px;padding:0;text-align:left;height:auto;line-height:normal;font-size:1.3rem}
-#guiSearchBoxSpan:after{font-family:unraid;content:'\e956';position:absolute;top:.8rem;left:1.5rem;font-size:1.3rem}
-#guiSearchBox{width:50rem;border:none;border-radius:20px;padding-left:4rem;opacity:0.5;invert(100%)}

emhttp/plugins/dynamix.gui.search/sheets/gui_search-gray.css

@@ -1,2 +0,0 @@
-#guiSearchBoxSpan{display:inline-block;margin:0 0 0 20px;padding:0;height:auto;line-height:normal;font-size:1.3rem}
-#guiSearchBox{position:relative;top:0;left:0;width:50rem;border:none;border-radius:20px;margin:0;padding:5px 12px;color:#1c1b1b;background-color:#feefb3}

emhttp/plugins/dynamix.gui.search/sheets/gui_search-white.css

@@ -1,3 +0,0 @@
-#guiSearchBoxSpan{display:inline-block;position:relative;margin:4px 2px 2px 2px;padding:0;text-align:left;height:auto;line-height:normal;font-size:1.3rem}
-#guiSearchBoxSpan:after{font-family:unraid;content:'\e956';position:absolute;top:.8rem;left:1.5rem;font-size:1.3rem}
-#guiSearchBox{width:50rem;border:none;border-radius:20px;padding-left:4rem;opacity:0.5;invert(100%)}

emhttp/plugins/dynamix.gui.search/sheets/gui_search.css

@@ -0,0 +1,56 @@
+:root {
+    --gui-search-search-box-text-color: var(--white);
+    --gui-search-search-box-background-color: var(--gray-500);
+}
+
+#guiSearchBoxSpan {
+    display: inline-block;
+    padding: 0;
+    text-align: left;
+    height: auto;
+    line-height: normal;
+    font-size: 1.3rem;
+}
+
+#guiSearchBox {
+    width: 50rem;
+    border: none;
+    border-radius: 20px;
+    color: var(--gui-search-search-box-text-color);
+    background-color: var(--gui-search-search-box-background-color);
+}
+
+.Theme--black,
+.Theme--white {
+    #guiSearchBoxSpan {
+        position: relative;
+        margin: 4px 2px 2px 2px;
+    }
+    #guiSearchBoxSpan:after {
+        font-family: unraid;
+        content: "\e956";
+        position: absolute;
+        top: 0.8rem;
+        left: 1.5rem;
+        font-size: 1.3rem;
+    }
+    #guiSearchBox {
+        padding-left: 4rem;
+    }
+}
+
+.Theme--sidebar {
+    --gui-search-search-box-text-color: var(--black);
+    --gui-search-search-box-background-color: var(--yellow-200);
+
+    #guiSearchBoxSpan {
+        margin: 0 0 0 20px;
+    }
+    #guiSearchBox {
+        position: relative;
+        top: 0;
+        left: 0;
+        margin: 0;
+        padding: 5px 12px;
+    }
+}

emhttp/plugins/dynamix.plugin.manager/sheets/PluginHelpers.css

@@ -1,5 +1,30 @@
-.ca_element_notice{padding-right:20px;width:100%;height:40px;line-height:40px;color:#e68a00;background:#feefb3;border-bottom:#e68a00 1px solid;text-align:center;font-size:1.4rem;z-index:900}
-a.ca_PluginUpdateInstall{cursor:pointer}
-span.ca_PluginUpdateDismiss{float:right;margin-right:20px;cursor:pointer}
-span.bannerInfo {cursor:pointer;text-decoration:none;margin:0 12px 0 6px}
-span.bannerInfo::before {content:"\f05a";font-family:fontAwesome;color:#e68a00}
+.ca_element_notice {
+    padding-right: 20px;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    color: var(--orange-300);
+    background: var(--yellow-200);
+    border-bottom: var(--orange-300) 1px solid;
+    text-align: center;
+    font-size: 1.4rem;
+    z-index: 900;
+}
+a.ca_PluginUpdateInstall {
+    cursor: pointer;
+}
+span.ca_PluginUpdateDismiss {
+    float: right;
+    margin-right: 20px;
+    cursor: pointer;
+}
+span.bannerInfo {
+    cursor: pointer;
+    text-decoration: none;
+    margin: 0 12px 0 6px;
+}
+span.bannerInfo::before {
+    content: "\f05a";
+    font-family: fontAwesome;
+    color: var(--orange-300);
+}

emhttp/plugins/dynamix.plugin.manager/sheets/Plugins.css

@@ -1,2 +1,8 @@
-#plugin_tree{width:33%;height:200px;overflow-y:scroll}
-table tbody td{line-height:normal}
+#plugin_tree {
+    width: 33%;
+    height: 200px;
+    overflow-y: scroll;
+}
+table tbody td {
+    line-height: normal;
+}

emhttp/plugins/dynamix.plugin.manager/sheets/Update-black.css

@@ -1 +0,0 @@
-span.vhshift{margin-top:13px!important}

emhttp/plugins/dynamix.plugin.manager/sheets/Update-white.css

@@ -1 +0,0 @@
-span.vhshift{margin-top:13px!important}

emhttp/plugins/dynamix.plugin.manager/sheets/Update.css

@@ -1,9 +1,52 @@
-ul,li{margin:0;padding-top:0;padding-bottom:0}
-pre.pre{margin:30px 0}
-pre>p{margin:0;padding:0}
-pre#swaltext{height:600px!important}
-@media (max-width:960px){pre#swaltext{height:400px!important}}
-@media (max-width:960px){.sweet-alert.nchan{height:600px;width:900px;margin-left:-470px}}
-@media (max-height:768px){pre#swaltext{height:400px!important}}
-@media (max-height:768px){.sweet-alert.nchan{height:600px;width:900px;margin-left:-470px}}
-input[value="_(Install)_"],input[value="_(Update)_"],input[value="_(Restore)_"]{margin:0}
+ul,
+li {
+    margin: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+pre.pre {
+    margin: 30px 0;
+}
+pre > p {
+    margin: 0;
+    padding: 0;
+}
+pre#swaltext {
+    height: 600px !important;
+}
+@media (max-width: 960px) {
+    pre#swaltext {
+        height: 400px !important;
+    }
+}
+@media (max-width: 960px) {
+    .sweet-alert.nchan {
+        height: 600px;
+        width: 900px;
+        margin-left: -470px;
+    }
+}
+@media (max-height: 768px) {
+    pre#swaltext {
+        height: 400px !important;
+    }
+}
+@media (max-height: 768px) {
+    .sweet-alert.nchan {
+        height: 600px;
+        width: 900px;
+        margin-left: -470px;
+    }
+}
+input[value="_(Install)_"],
+input[value="_(Update)_"],
+input[value="_(Restore)_"] {
+    margin: 0;
+}
+
+.Theme--black,
+.Theme--white {
+    span.vhshift {
+        margin-top: 13px !important;
+    }
+}

emhttp/plugins/dynamix.vm.manager/VMMachines.page

@@ -111,7 +111,7 @@ if (empty($vms)) {
 <link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.filetree.css")?>">
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.ui.css")?>">
-<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix.docker.manager/styles/style-$theme.css")?>">
+<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix.docker.manager/styles/DockerManager.css")?>">
 
 <script src="<?autov('/webGui/javascript/jquery.switchbutton.js')?>"></script>
 <script src="<?autov('/plugins/dynamix.vm.manager/javascript/dynamix.vm.manager.js')?>"></script>

emhttp/plugins/dynamix.vm.manager/sheets/AddVM-azure.css

@@ -1,4 +0,0 @@
-.fileTree{background:#f2f2f2;width:300px;max-height:150px;overflow-y:scroll;overflow-x:hidden;position:relative;z-index:100;display:none}
-#vmform table.multiple{margin:10px 0;background:#f2f2f2;background-size:800px 100%;background-position:-800px;background-repeat:no-repeat;background-clip:content-box;transition:background 0.3s linear}
-#template_img_chooser_outer{position:absolute;display:none;border-radius:5px;border:1px solid <?=$border?>;background:#f2f2f2;z-index:10}
-span#dropbox{border:1px solid <?=$border?>;background:#f2f2f2;padding:28px 12px;line-height:72px;margin-right:16px;}

emhttp/plugins/dynamix.vm.manager/sheets/AddVM-black.css

@@ -1,4 +0,0 @@
-.fileTree{background:#1c1c1c;width:300px;max-height:150px;overflow-y:scroll;overflow-x:hidden;position:relative;z-index:100;display:none}
-#vmform table.multiple{margin:10px 0;background:#1c1c1c;background-size:800px 100%;background-position:-800px;background-repeat:no-repeat;background-clip:content-box;transition:background 0.3s linear}
-#template_img_chooser_outer{position:absolute;display:none;border-radius:5px;border:1px solid <?=$border?>;background:#1c1c1c;z-index:10}
-span#dropbox{border:1px solid <?=$border?>;background:#1c1c1c;padding:28px 12px;line-height:72px;margin-right:16px;}

emhttp/plugins/dynamix.vm.manager/sheets/AddVM-gray.css

@@ -1,4 +0,0 @@
-.fileTree{background:#1c1c1c;width:300px;max-height:150px;overflow-y:scroll;overflow-x:hidden;position:relative;z-index:100;display:none}
-#vmform table.multiple{margin:10px 0;background:#1c1c1c;background-size:800px 100%;background-position:-800px;background-repeat:no-repeat;background-clip:content-box;transition:background 0.3s linear}
-#template_img_chooser_outer{position:absolute;display:none;border-radius:5px;border:1px solid <?=$border?>;background:#1c1c1c;z-index:10}
-span#dropbox{border:1px solid <?=$border?>;background:#1c1c1c;padding:28px 12px;line-height:72px;margin-right:16px;}

emhttp/plugins/dynamix.vm.manager/sheets/AddVM-white.css

@@ -1,4 +0,0 @@
-.fileTree{background:#f2f2f2;width:300px;max-height:150px;overflow-y:scroll;overflow-x:hidden;position:relative;z-index:100;display:none}
-#vmform table.multiple{margin:10px 0;background:#f2f2f2;background-size:800px 100%;background-position:-800px;background-repeat:no-repeat;background-clip:content-box;transition:background 0.3s linear}
-#template_img_chooser_outer{position:absolute;display:none;border-radius:5px;border:1px solid <?=$border?>;background:#f2f2f2;z-index:10}
-span#dropbox{border:1px solid <?=$border?>;background:#f2f2f2;padding:28px 12px;line-height:72px;margin-right:16px;}

emhttp/plugins/dynamix.vm.manager/sheets/AddVM.css

@@ -1,45 +1,236 @@
-body{-webkit-overflow-scrolling:touch}
-#vmform table{margin-top:0}
-#vmform div.title + table{margin-top:0}
-#vmform table tr{vertical-align:top;line-height:40px}
-#vmform table tr td:nth-child(odd){width:300px;text-align:right;padding-right:10px}
-#vmform table tr td:nth-child(even){width:110px}
-@media (max-width:1280px){#vmform table tr td:first-child{width:35%;padding-right:4rem}}
-@media (min-width:1281px){#vmform table tr td:first-child{width:30%;padding-right:4rem}}
-@media (min-width:1921px){#vmform table tr td:first-child{width:25%;padding-right:4rem}}
-#vmform table tr td:last-child{width:inherit}
-#vmform .multiple{position:relative}
-#vmform .sectionbutton{position:absolute;left:2px;cursor:pointer;opacity:0.4;font-size:1.4rem;line-height:17px;z-index:10;transition-property:opacity,left;transition-duration:0.1s;transition-timing-function:linear}
-#vmform .sectionbutton.remove{top:0;opacity:0.3}
-#vmform .sectionbutton.add{bottom:0}
-#vmform .sectionbutton:hover{opacity:1.0}
-#vmform .sectiontab{position:absolute;top:2px;bottom:2px;left:0;width:6px;border-radius:3px;background-color:#DDDDDD;transition-property:background,width;transition-duration:0.1s;transition-timing-function:linear}
-#vmform .multiple:hover .sectionbutton{opacity:0.7;left:4px}
-#vmform .multiple:hover .sectionbutton.remove{opacity:0.6}
-#vmform .multiple:hover .sectiontab{background-color:#CCCCCC;width:8px}
-#vmform table.multiple:hover{background-position:0 0;}
-#vmform table.multiple td{padding:5px 0}
-span.advancedview_panel{display:none;line-height:16px;margin-top:1px}
-.basic{display:none}
-.advanced{/*Empty placeholder*/}
-.switch-button-label.off{color:inherit}
-#template_img{cursor:pointer}
-#template_img:hover{opacity:0.5}
-#template_img:hover i{opacity:1.0}
-.template_img_chooser_inner{display:inline-block;width:80px;margin-bottom:15px;margin-right:10px;text-align:center;}
-.template_img_chooser_inner img{width:48px;height:48px}
-.template_img_chooser_inner p{text-align:center;line-height:8px;}
-#template_img_chooser{width:560px;height:300px;overflow-y:scroll;position:relative}
-#template_img_chooser div:hover{background-color:#eee;cursor:pointer;}
-#form_content{display:none}
-#vmform .four{overflow:hidden}
-#vmform .four label{float:left;display:table-cell;width:15%;}
-#vmform .four label:nth-child(4n+4){}
-#vmform .four label.cpu1{width:28%;height:16px;line-height:16px}
-#vmform .four label.cpu2{width:3%;height:16px;line-height:16px}
-#vmform .mac_generate{cursor:pointer;margin-left:-5px;color:#08C;font-size:1.3rem;transform:translate(0px, 2px)}
-#vmform .disk{display:none}
-#vmform .disk_preview{display:inline-block;color:#BBB;transform:translate(0px, 1px)}
-i.fa-plus-circle,i.fa-minus-circle{margin-left:8px}
-input[type=checkbox]{margin-left:0}
-#vmform table.timers td.present {width:150px;}
+:root {
+    --add-vm-background: var(--black);
+}
+
+.Theme--azure:root,
+.Theme--white:root {
+    --add-vm-background: var(--gray-100);
+}
+
+body {
+    -webkit-overflow-scrolling: touch;
+}
+#vmform table {
+    margin-top: 0;
+}
+#vmform div.title + table {
+    margin-top: 0;
+}
+#vmform table tr {
+    vertical-align: top;
+    line-height: 40px;
+}
+#vmform table tr td:nth-child(odd) {
+    width: 300px;
+    text-align: right;
+    padding-right: 10px;
+}
+#vmform table tr td:nth-child(even) {
+    width: 110px;
+}
+@media (max-width: 1280px) {
+    #vmform table tr td:first-child {
+        width: 35%;
+        padding-right: 4rem;
+    }
+}
+@media (min-width: 1281px) {
+    #vmform table tr td:first-child {
+        width: 30%;
+        padding-right: 4rem;
+    }
+}
+@media (min-width: 1921px) {
+    #vmform table tr td:first-child {
+        width: 25%;
+        padding-right: 4rem;
+    }
+}
+#vmform table tr td:last-child {
+    width: inherit;
+}
+#vmform .multiple {
+    position: relative;
+}
+#vmform .sectionbutton {
+    position: absolute;
+    left: 2px;
+    cursor: pointer;
+    opacity: 0.4;
+    font-size: 1.4rem;
+    line-height: 17px;
+    z-index: 10;
+    transition-property: opacity, left;
+    transition-duration: 0.1s;
+    transition-timing-function: linear;
+}
+#vmform .sectionbutton.remove {
+    top: 0;
+    opacity: 0.3;
+}
+#vmform .sectionbutton.add {
+    bottom: 0;
+}
+#vmform .sectionbutton:hover {
+    opacity: 1;
+}
+#vmform .sectiontab {
+    position: absolute;
+    top: 2px;
+    bottom: 2px;
+    left: 0;
+    width: 6px;
+    border-radius: 3px;
+    background-color: var(--gray-200); /* Condensed from: #dddddd */
+    transition-property: background, width;
+    transition-duration: 0.1s;
+    transition-timing-function: linear;
+}
+#vmform .multiple:hover .sectionbutton {
+    opacity: 0.7;
+    left: 4px;
+}
+#vmform .multiple:hover .sectionbutton.remove {
+    opacity: 0.6;
+}
+#vmform .multiple:hover .sectiontab {
+    background-color: var(--gray-300);
+    width: 8px;
+}
+#vmform table.multiple:hover {
+    background-position: 0 0;
+}
+#vmform table.multiple td {
+    padding: 5px 0;
+}
+span.advancedview_panel {
+    display: none;
+    line-height: 16px;
+    margin-top: 1px;
+}
+.basic {
+    display: none;
+}
+.advanced {
+    /*Empty placeholder*/
+}
+.switch-button-label.off {
+    color: inherit;
+}
+#template_img {
+    cursor: pointer;
+}
+#template_img:hover {
+    opacity: 0.5;
+}
+#template_img:hover i {
+    opacity: 1;
+}
+.template_img_chooser_inner {
+    display: inline-block;
+    width: 80px;
+    margin-bottom: 15px;
+    margin-right: 10px;
+    text-align: center;
+}
+.template_img_chooser_inner img {
+    width: 48px;
+    height: 48px;
+}
+.template_img_chooser_inner p {
+    text-align: center;
+    line-height: 8px;
+}
+#template_img_chooser {
+    width: 560px;
+    height: 300px;
+    overflow-y: scroll;
+    position: relative;
+}
+#template_img_chooser div:hover {
+    background-color: var(--gray-150); /* Condensed from: #eee */
+    cursor: pointer;
+}
+#form_content {
+    display: none;
+}
+#vmform .four {
+    overflow: hidden;
+}
+#vmform .four label {
+    float: left;
+    display: table-cell;
+    width: 15%;
+}
+#vmform .four label:nth-child(4n + 4) {
+}
+#vmform .four label.cpu1 {
+    width: 28%;
+    height: 16px;
+    line-height: 16px;
+}
+#vmform .four label.cpu2 {
+    width: 3%;
+    height: 16px;
+    line-height: 16px;
+}
+#vmform .mac_generate {
+    cursor: pointer;
+    margin-left: -5px;
+    color: var(--blue-700); /* Condensed from: #08c */
+    font-size: 1.3rem;
+    transform: translate(0px, 2px);
+}
+#vmform .disk {
+    display: none;
+}
+#vmform .disk_preview {
+    display: inline-block;
+    color: var(--gray-300); /* Condensed from: #bbb */
+    transform: translate(0px, 1px);
+}
+i.fa-plus-circle,
+i.fa-minus-circle {
+    margin-left: 8px;
+}
+input[type="checkbox"] {
+    margin-left: 0;
+}
+#vmform table.timers td.present {
+    width: 150px;
+}
+
+.fileTree {
+    background: var(--add-vm-background);
+    width: 300px;
+    max-height: 150px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    position: relative;
+    z-index: 100;
+    display: none;
+}
+#vmform table.multiple {
+    margin: 10px 0;
+    background: var(--add-vm-background);
+    background-size: 800px 100%;
+    background-position: -800px;
+    background-repeat: no-repeat;
+    background-clip: content-box;
+    transition: background 0.3s linear;
+}
+#template_img_chooser_outer {
+    position: absolute;
+    display: none;
+    border-radius: 5px;
+    border: 1px solid <?=$border?>;
+    background: var(--add-vm-background);
+    z-index: 10;
+}
+span#dropbox {
+    border: 1px solid <?=$border?>;
+    background: var(--add-vm-background);
+    padding: 28px 12px;
+    line-height: 72px;
+    margin-right: 16px;
+}

emhttp/plugins/dynamix.vm.manager/sheets/UpdateVM-azure.css

@@ -1,4 +0,0 @@
-.fileTree{background:#f2f2f2;width:300px;max-height:150px;overflow-y:scroll;overflow-x:hidden;position:relative;z-index:100;display:none}
-#vmform table.multiple{margin:10px 0;background:#f2f2f2;background-size:800px 100%;background-position:-800px;background-repeat:no-repeat;background-clip:content-box;transition:background 0.3s linear}
-#template_img_chooser_outer{position:absolute;display:none;border-radius:5px;border:1px solid <?=$border?>;background:#f2f2f2;z-index:10}
-span#dropbox{border:1px solid <?=$border?>;background:#f2f2f2;padding:28px 12px;line-height:72px;margin-right:16px;}

emhttp/plugins/dynamix.vm.manager/sheets/UpdateVM-black.css

@@ -1,4 +0,0 @@
-.fileTree{background:#1c1c1c;width:300px;max-height:150px;overflow-y:scroll;overflow-x:hidden;position:relative;z-index:100;display:none}
-#vmform table.multiple{margin:10px 0;background:#1c1c1c;background-size:800px 100%;background-position:-800px;background-repeat:no-repeat;background-clip:content-box;transition:background 0.3s linear}
-#template_img_chooser_outer{position:absolute;display:none;border-radius:5px;border:1px solid <?=$border?>;background:#1c1c1c;z-index:10}
-span#dropbox{border:1px solid <?=$border?>;background:#1c1c1c;padding:28px 12px;line-height:72px;margin-right:16px;}

emhttp/plugins/dynamix.vm.manager/sheets/UpdateVM-gray.css

@@ -1,4 +0,0 @@
-.fileTree{background:#1c1c1c;width:300px;max-height:150px;overflow-y:scroll;overflow-x:hidden;position:relative;z-index:100;display:none}
-#vmform table.multiple{margin:10px 0;background:#1c1c1c;background-size:800px 100%;background-position:-800px;background-repeat:no-repeat;background-clip:content-box;transition:background 0.3s linear}
-#template_img_chooser_outer{position:absolute;display:none;border-radius:5px;border:1px solid <?=$border?>;background:#1c1c1c;z-index:10}
-span#dropbox{border:1px solid <?=$border?>;background:#1c1c1c;padding:28px 12px;line-height:72px;margin-right:16px;}

emhttp/plugins/dynamix.vm.manager/sheets/UpdateVM-white.css

@@ -1,4 +0,0 @@
-.fileTree{background:#f2f2f2;width:300px;max-height:150px;overflow-y:scroll;overflow-x:hidden;position:relative;z-index:100;display:none}
-#vmform table.multiple{margin:10px 0;background:#f2f2f2;background-size:800px 100%;background-position:-800px;background-repeat:no-repeat;background-clip:content-box;transition:background 0.3s linear}
-#template_img_chooser_outer{position:absolute;display:none;border-radius:5px;border:1px solid <?=$border?>;background:#f2f2f2;z-index:10}
-span#dropbox{border:1px solid <?=$border?>;background:#f2f2f2;padding:28px 12px;line-height:72px;margin-right:16px;}

emhttp/plugins/dynamix.vm.manager/sheets/UpdateVM.css

@@ -1,45 +1,236 @@
-body{-webkit-overflow-scrolling:touch}
-#vmform table{margin-top:0}
-#vmform div.title + table{margin-top:0}
-#vmform table tr{vertical-align:top;line-height:40px}
-#vmform table tr td:nth-child(odd){width:300px;text-align:right;padding-right:10px}
-#vmform table tr td:nth-child(even){width:110px}
-@media (max-width:1280px){#vmform table tr td:first-child{width:35%;padding-right:4rem}}
-@media (min-width:1281px){#vmform table tr td:first-child{width:30%;padding-right:4rem}}
-@media (min-width:1921px){#vmform table tr td:first-child{width:25%;padding-right:4rem}}
-#vmform table tr td:last-child{width:inherit}
-#vmform .multiple{position:relative}
-#vmform .sectionbutton{position:absolute;left:2px;cursor:pointer;opacity:0.4;font-size:1.4rem;line-height:17px;z-index:10;transition-property:opacity,left;transition-duration:0.1s;transition-timing-function:linear}
-#vmform .sectionbutton.remove{top:0;opacity:0.3}
-#vmform .sectionbutton.add{bottom:0}
-#vmform .sectionbutton:hover{opacity:1.0}
-#vmform .sectiontab{position:absolute;top:2px;bottom:2px;left:0;width:6px;border-radius:3px;background-color:#DDDDDD;transition-property:background,width;transition-duration:0.1s;transition-timing-function:linear}
-#vmform .multiple:hover .sectionbutton{opacity:0.7;left:4px}
-#vmform .multiple:hover .sectionbutton.remove{opacity:0.6}
-#vmform .multiple:hover .sectiontab{background-color:#CCCCCC;width:8px}
-#vmform table.multiple:hover{background-position:0 0;}
-#vmform table.multiple td{padding:5px 0}
-span.advancedview_panel{display:none;line-height:16px;margin-top:1px}
-.basic{display:none}
-.advanced{/*Empty placeholder*/}
-.switch-button-label.off{color:inherit}
-#template_img{cursor:pointer}
-#template_img:hover{opacity:0.5}
-#template_img:hover i{opacity:1.0}
-.template_img_chooser_inner{display:inline-block;width:80px;margin-bottom:15px;margin-right:10px;text-align:center;}
-.template_img_chooser_inner img{width:48px;height:48px}
-.template_img_chooser_inner p{text-align:center;line-height:8px;}
-#template_img_chooser{width:560px;height:300px;overflow-y:scroll;position:relative}
-#template_img_chooser div:hover{background-color:#eee;cursor:pointer;}
-#form_content{display:none}
-#vmform .four{overflow:hidden}
-#vmform .four label{float:left;display:table-cell;width:15%;}
-#vmform .four label:nth-child(4n+4){}
-#vmform .four label.cpu1{width:28%;height:16px;line-height:16px}
-#vmform .four label.cpu2{width:3%;height:16px;line-height:16px}
-#vmform .mac_generate{cursor:pointer;margin-left:-5px;color:#08C;font-size:1.3rem;transform:translate(0px, 2px)}
-#vmform .disk{display:none}
-#vmform .disk_preview{display:inline-block;color:#BBB;transform:translate(0px, 1px)}
-i.fa-plus-circle,i.fa-minus-circle{margin-left:8px}
-input[type=checkbox]{margin-left:0}
-#vmform table.timers td.present {width:150px;}
+:root {
+    --update-vm-background: var(--black);
+}
+
+.Theme--azure:root,
+.Theme--white:root {
+    --update-vm-background: var(--gray-100);
+}
+
+body {
+    -webkit-overflow-scrolling: touch;
+}
+#vmform table {
+    margin-top: 0;
+}
+#vmform div.title + table {
+    margin-top: 0;
+}
+#vmform table tr {
+    vertical-align: top;
+    line-height: 40px;
+}
+#vmform table tr td:nth-child(odd) {
+    width: 300px;
+    text-align: right;
+    padding-right: 10px;
+}
+#vmform table tr td:nth-child(even) {
+    width: 110px;
+}
+@media (max-width: 1280px) {
+    #vmform table tr td:first-child {
+        width: 35%;
+        padding-right: 4rem;
+    }
+}
+@media (min-width: 1281px) {
+    #vmform table tr td:first-child {
+        width: 30%;
+        padding-right: 4rem;
+    }
+}
+@media (min-width: 1921px) {
+    #vmform table tr td:first-child {
+        width: 25%;
+        padding-right: 4rem;
+    }
+}
+#vmform table tr td:last-child {
+    width: inherit;
+}
+#vmform .multiple {
+    position: relative;
+}
+#vmform .sectionbutton {
+    position: absolute;
+    left: 2px;
+    cursor: pointer;
+    opacity: 0.4;
+    font-size: 1.4rem;
+    line-height: 17px;
+    z-index: 10;
+    transition-property: opacity, left;
+    transition-duration: 0.1s;
+    transition-timing-function: linear;
+}
+#vmform .sectionbutton.remove {
+    top: 0;
+    opacity: 0.3;
+}
+#vmform .sectionbutton.add {
+    bottom: 0;
+}
+#vmform .sectionbutton:hover {
+    opacity: 1;
+}
+#vmform .sectiontab {
+    position: absolute;
+    top: 2px;
+    bottom: 2px;
+    left: 0;
+    width: 6px;
+    border-radius: 3px;
+    background-color: var(--gray-200); /* Condensed from: #dddddd */
+    transition-property: background, width;
+    transition-duration: 0.1s;
+    transition-timing-function: linear;
+}
+#vmform .multiple:hover .sectionbutton {
+    opacity: 0.7;
+    left: 4px;
+}
+#vmform .multiple:hover .sectionbutton.remove {
+    opacity: 0.6;
+}
+#vmform .multiple:hover .sectiontab {
+    background-color: var(--gray-300);
+    width: 8px;
+}
+#vmform table.multiple:hover {
+    background-position: 0 0;
+}
+#vmform table.multiple td {
+    padding: 5px 0;
+}
+span.advancedview_panel {
+    display: none;
+    line-height: 16px;
+    margin-top: 1px;
+}
+.basic {
+    display: none;
+}
+.advanced {
+    /*Empty placeholder*/
+}
+.switch-button-label.off {
+    color: inherit;
+}
+#template_img {
+    cursor: pointer;
+}
+#template_img:hover {
+    opacity: 0.5;
+}
+#template_img:hover i {
+    opacity: 1;
+}
+.template_img_chooser_inner {
+    display: inline-block;
+    width: 80px;
+    margin-bottom: 15px;
+    margin-right: 10px;
+    text-align: center;
+}
+.template_img_chooser_inner img {
+    width: 48px;
+    height: 48px;
+}
+.template_img_chooser_inner p {
+    text-align: center;
+    line-height: 8px;
+}
+#template_img_chooser {
+    width: 560px;
+    height: 300px;
+    overflow-y: scroll;
+    position: relative;
+}
+#template_img_chooser div:hover {
+    background-color: var(--gray-150); /* Condensed from: #eee */
+    cursor: pointer;
+}
+#form_content {
+    display: none;
+}
+#vmform .four {
+    overflow: hidden;
+}
+#vmform .four label {
+    float: left;
+    display: table-cell;
+    width: 15%;
+}
+#vmform .four label:nth-child(4n + 4) {
+}
+#vmform .four label.cpu1 {
+    width: 28%;
+    height: 16px;
+    line-height: 16px;
+}
+#vmform .four label.cpu2 {
+    width: 3%;
+    height: 16px;
+    line-height: 16px;
+}
+#vmform .mac_generate {
+    cursor: pointer;
+    margin-left: -5px;
+    color: var(--blue-700); /* Condensed from: #08c */
+    font-size: 1.3rem;
+    transform: translate(0px, 2px);
+}
+#vmform .disk {
+    display: none;
+}
+#vmform .disk_preview {
+    display: inline-block;
+    color: var(--gray-300); /* Condensed from: #bbb */
+    transform: translate(0px, 1px);
+}
+i.fa-plus-circle,
+i.fa-minus-circle {
+    margin-left: 8px;
+}
+input[type="checkbox"] {
+    margin-left: 0;
+}
+#vmform table.timers td.present {
+    width: 150px;
+}
+
+.fileTree {
+    background: var(--update-vm-background);
+    width: 300px;
+    max-height: 150px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    position: relative;
+    z-index: 100;
+    display: none;
+}
+#vmform table.multiple {
+    margin: 10px 0;
+    background: var(--update-vm-background);
+    background-size: 800px 100%;
+    background-position: -800px;
+    background-repeat: no-repeat;
+    background-clip: content-box;
+    transition: background 0.3s linear;
+}
+#template_img_chooser_outer {
+    position: absolute;
+    display: none;
+    border-radius: 5px;
+    border: 1px solid <?=$border?>;
+    background: var(--update-vm-background);
+    z-index: 10;
+}
+span#dropbox {
+    border: 1px solid <?=$border?>;
+    background: var(--update-vm-background);
+    padding: 28px 12px;
+    line-height: 72px;
+    margin-right: 16px;
+}

emhttp/plugins/dynamix.vm.manager/sheets/VMMachines-azure.css

@@ -1 +0,0 @@
-.fileTree{background:#f2f2f2;width:500px;max-height:320px;overflow-y:scroll;overflow-x:hidden;position:absolute;z-index:100;display:none}

emhttp/plugins/dynamix.vm.manager/sheets/VMMachines-black.css

@@ -1 +0,0 @@
-.fileTree{background:#1c1c1c;width:500px;max-height:320px;overflow-y:scroll;overflow-x:hidden;position:absolute;z-index:100;display:none}

emhttp/plugins/dynamix.vm.manager/sheets/VMMachines-gray.css

@@ -1 +0,0 @@
-.fileTree{background:#1c1c1c;width:500px;max-height:320px;overflow-y:scroll;overflow-x:hidden;position:absolute;z-index:100;display:none}

emhttp/plugins/dynamix.vm.manager/sheets/VMMachines-white.css

@@ -1 +0,0 @@
-.fileTree{background:#f2f2f2;width:500px;max-height:320px;overflow-y:scroll;overflow-x:hidden;position:absolute;z-index:100;display:none}

emhttp/plugins/dynamix.vm.manager/sheets/VMMachines.css

@@ -1,23 +1,140 @@
-th.th1{width:25%}
-th.th2{width:15%}
-th.th3{width:80px}
-div.four{font-size:1.1rem;width:260px}
-div.four label{float:left;display:table-cell;width:25%}
-div.four label:nth-child(4n+4){float:none;clear:both}
-div.four label.cpu1{width:32%}
-div.four label.cpu2{width:26%}
-div.template,div#dialogWindow,input#upload{display:none}
-table.domdisk thead tr th:nth-child(1){width:56%!important}
-table.domdisk thead tr th:nth-child(n+2){width:8%!important}
-table.domdisk thead tr th:nth-child(1){padding-left:72px}
-table.domdisk tbody tr td:nth-child(1){padding-left:72px}
-table.domdisk tbody tr:nth-child(even){background-color:transparent!important}
-table.domdisk tbody tr:nth-child(4n-1){background-color:transparent!important}
-table.snapshot{margin-top:0}
-table tbody td{line-height:normal}
-i.mover{margin-right:8px;display:none}
-i.fa-dot-circle-o{padding-left:12px}
-#resetsort{margin-left:12px;display:inline-block;width:32px}
-.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button[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%}
-.dropdown-menu{z-index:10001}
-span.vmgraphics{font-size:1.1rem;text-align:left}
+:root {
+    --vm-machines-file-tree-background: var(--black);
+}
+
+.Theme--azure:root,
+.Theme--white:root {
+    --vm-machines-file-tree-background: var(--gray-100);
+}
+
+th.th1 {
+    width: 25%;
+}
+th.th2 {
+    width: 15%;
+}
+th.th3 {
+    width: 80px;
+}
+div.four {
+    font-size: 1.1rem;
+    width: 260px;
+}
+div.four label {
+    float: left;
+    display: table-cell;
+    width: 25%;
+}
+div.four label:nth-child(4n + 4) {
+    float: none;
+    clear: both;
+}
+div.four label.cpu1 {
+    width: 32%;
+}
+div.four label.cpu2 {
+    width: 26%;
+}
+div.template,
+div#dialogWindow,
+input#upload {
+    display: none;
+}
+table.domdisk thead tr th:nth-child(1) {
+    width: 56% !important;
+}
+table.domdisk thead tr th:nth-child(n + 2) {
+    width: 8% !important;
+}
+table.domdisk thead tr th:nth-child(1) {
+    padding-left: 72px;
+}
+table.domdisk tbody tr td:nth-child(1) {
+    padding-left: 72px;
+}
+table.domdisk tbody tr:nth-child(even) {
+    background-color: transparent !important;
+}
+table.domdisk tbody tr:nth-child(4n-1) {
+    background-color: transparent !important;
+}
+table.snapshot {
+    margin-top: 0;
+}
+table tbody td {
+    line-height: normal;
+}
+i.mover {
+    margin-right: 8px;
+    display: none;
+}
+i.fa-dot-circle-o {
+    padding-left: 12px;
+}
+#resetsort {
+    margin-left: 12px;
+    display: inline-block;
+    width: 32px;
+}
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button[disabled] {
+    cursor: default;
+    color: var(--gray-500);
+    background:
+        -webkit-gradient(
+                linear,
+                left top,
+                right top,
+                from(var(--gray-600)),
+                to(var(--gray-500))
+            )
+            0 0 no-repeat,
+        -webkit-gradient(
+                linear,
+                left top,
+                right top,
+                from(var(--gray-600)),
+                to(var(--gray-500))
+            ) 0 100% no-repeat,
+        -webkit-gradient(
+                linear,
+                left bottom,
+                left top,
+                from(var(--gray-600)),
+                to(var(--gray-600))
+            ) 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-600) 0, var(--gray-500)) 0 0 no-repeat,
+        linear-gradient(90deg, var(--gray-600) 0, var(--gray-500)) 0 100% no-repeat,
+        linear-gradient(0deg, var(--gray-600) 0, var(--gray-600)) 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%;
+}
+.dropdown-menu {
+    z-index: 10001;
+}
+span.vmgraphics {
+    font-size: 1.1rem;
+    text-align: left;
+}
+
+.fileTree {
+    background: var(--vm-machines-file-tree-background);
+    width: 500px;
+    max-height: 320px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    position: absolute;
+    z-index: 100;
+    display: none;
+}

emhttp/plugins/dynamix.vm.manager/sheets/VMSettings-azure.css

@@ -1 +0,0 @@
-.fileTree{background:#f2f2f2;width:300px;max-height:150px;overflow-y:scroll;overflow-x:hidden;position:absolute;z-index:100;display:none}

emhttp/plugins/dynamix.vm.manager/sheets/VMSettings-black.css

@@ -1 +0,0 @@
-.fileTree{background:#1c1c1c;width:300px;max-height:150px;overflow-y:scroll;overflow-x:hidden;position:absolute;z-index:100;display:none}

emhttp/plugins/dynamix.vm.manager/sheets/VMSettings-gray.css

@@ -1 +0,0 @@
-.fileTree{background:#1c1c1c;width:300px;max-height:150px;overflow-y:scroll;overflow-x:hidden;position:absolute;z-index:100;display:none}

emhttp/plugins/dynamix.vm.manager/sheets/VMSettings-white.css

@@ -1 +0,0 @@
-.fileTree{background:#f2f2f2;width:300px;max-height:150px;overflow-y:scroll;overflow-x:hidden;position:absolute;z-index:100;display:none}

emhttp/plugins/dynamix.vm.manager/sheets/VMSettings.css

@@ -1,12 +1,69 @@
-body{-webkit-overflow-scrolling:touch}
-.errortext{color:#EF3D47;display:none}
-.basic{display:block}
-.advanced{display:none}
-#winvirtio{display:none}
-#download_status{margin-left:5px;color:#777;display:none}
-#download_button{cursor:pointer;margin-left:-2px;color:#08C;display:none;transform:translate(0px,2px)}
-#download_button.fa-spin{cursor:default;color:#777}
-#download_button span{font-family:clear-sans}
-#download_button.fa-spin span{font-family:clear-sans;display:none}
-#remove_button{cursor:pointer;margin-left:-2px;color:#EF3D47;display:none;transform:translate(0px,2px)}
-#remove_button span{font-family:clear-sans}
+:root {
+    --vm-machines-file-tree-background: var(--black);
+}
+
+.Theme--azure:root,
+.Theme--white:root {
+    --vm-machines-file-tree-background: var(--gray-100);
+}
+
+body {
+    -webkit-overflow-scrolling: touch;
+}
+.errortext {
+    color: var(--red-800); /* Condensed from: #ef3d47 */
+    display: none;
+}
+.basic {
+    display: block;
+}
+.advanced {
+    display: none;
+}
+#winvirtio {
+    display: none;
+}
+#download_status {
+    margin-left: 5px;
+    color: var(--gray-500); /* Condensed from: #777 */
+    display: none;
+}
+#download_button {
+    cursor: pointer;
+    margin-left: -2px;
+    color: var(--blue-700); /* Condensed from: #08c */
+    display: none;
+    transform: translate(0px, 2px);
+}
+#download_button.fa-spin {
+    cursor: default;
+    color: var(--gray-500); /* Condensed from: #777 */
+}
+#download_button span {
+    font-family: clear-sans;
+}
+#download_button.fa-spin span {
+    font-family: clear-sans;
+    display: none;
+}
+#remove_button {
+    cursor: pointer;
+    margin-left: -2px;
+    color: var(--red-800); /* Condensed from: #ef3d47 */
+    display: none;
+    transform: translate(0px, 2px);
+}
+#remove_button span {
+    font-family: clear-sans;
+}
+
+.fileTree {
+    background: var(--vm-machines-file-tree-background);
+    width: 300px;
+    max-height: 150px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    position: absolute;
+    z-index: 100;
+    display: none;
+}

emhttp/plugins/dynamix.vm.manager/sheets/VMTemplates.css

@@ -1,4 +1,24 @@
-.vmheader{padding:10px;font-size:1.4rem;text-align:left;color:#888}
-.vmtemplate{display:inline-block;width:80px;height:90px;margin-bottom:15px;margin-left:10px;text-align:center;vertical-align:top}
-.vmtemplate img{width:48px;height:48px}
-.vmtemplate p{text-align:center;margin-top:8px;line-height:12px}
+.vmheader {
+    padding: 10px;
+    font-size: 1.4rem;
+    text-align: left;
+    color: var(--gray-500); /* Condensed from: #888 */
+}
+.vmtemplate {
+    display: inline-block;
+    width: 80px;
+    height: 90px;
+    margin-bottom: 15px;
+    margin-left: 10px;
+    text-align: center;
+    vertical-align: top;
+}
+.vmtemplate img {
+    width: 48px;
+    height: 48px;
+}
+.vmtemplate p {
+    text-align: center;
+    margin-top: 8px;
+    line-height: 12px;
+}

emhttp/plugins/dynamix/CacheDevices.page

@@ -24,7 +24,7 @@ function sharename($share) {
 }
 ?>
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.ui.css")?>">
-<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix.docker.manager/styles/style-$theme.css")?>">
+<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix.docker.manager/styles/DockerManager.css")?>">
 
 <script>
 function validate(poolname) {

emhttp/plugins/dynamix/DashStats.page

@@ -187,7 +187,7 @@ switch ($theme) {
 ?>
 <link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
 <link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.ui.css')?>">
-<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix.docker.manager/styles/style-$theme.css")?>">
+<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix.docker.manager/styles/DockerManager.css")?>">
 
 <script src="<?autov('/webGui/javascript/jquery.apexcharts.js')?>"></script>
 <script src="<?autov('/webGui/javascript/jquery.switchbutton.js')?>"></script>

emhttp/plugins/dynamix/DeviceInfo.page

@@ -111,7 +111,7 @@ function isPool($name) {
 }
 ?>
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.ui.css")?>">
-<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix.docker.manager/styles/style-$theme.css")?>">
+<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix.docker.manager/styles/DockerManager.css")?>">
 
 <script>
 String.prototype.celsius = function(){return Math.round((parseInt(this)-32)*5/9).toString();}

emhttp/plugins/dynamix/DisplaySettings.page

@@ -251,9 +251,10 @@ _(Temperature unit)_:
 
 _(Dynamix color theme)_:
 : <select name="theme">
-  <?foreach (glob("$docroot/webGui/styles/dynamix-*.css") as $themes):?>
-  <?$theme = substr(basename($themes,'.css'),8);?>
-  <?=mk_option($display['theme'], $theme, _(ucfirst($theme)))?>
+  <?foreach (glob("$docroot/webGui/styles/themes/*.css") as $themes):?>
+    <?= var_dump($themes);?>
+    <?$theme = basename($themes, '.css');?>
+    <?=mk_option($display['theme'], $theme, _(ucfirst($theme)))?>
   <?endforeach;?>
   </select>
 

emhttp/plugins/dynamix/Language.page

@@ -22,7 +22,7 @@ $installed = ['English'];
 $plugins   = '/var/log/plugins';
 
 $keys = parse_ini_file('webGui/include/languages.key',false,INI_SCANNER_RAW);
-$head = '<i class="fa fa-fw fa-trash" title="_(Remove the installed language)_" style="cursor:pointer" onclick="remove(&quot;';
+$head = '<i class="fa fa-fw fa-trash" title="_(Remove the installed language)_" style="cursor:pointer" onclick="removeLanguage(&quot;';
 $tail = '&quot;)"></i>';
 
 foreach (glob("$plugins/lang-*.xml",GLOB_NOSORT) as $xml_file) $installed[] = language('LanguageLocal',$xml_file).$head.str_replace('lang-','',basename($xml_file,'.xml')).$tail;
@@ -47,7 +47,7 @@ function execute(cmd,title,language,name,filedata) {
     }
   });
 }
-function remove(language) {
+function removeLanguage(language) {
   execute('rm', "_(Language support deleted)_", language, '', '');
 }
 function upload(form) {

emhttp/plugins/dynamix/PHPsettings.page

@@ -22,7 +22,7 @@ $conf = file_exists($ini) ? parse_ini_file($ini) : [];
 if (!file_exists($log)) touch($log);
 ?>
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.ui.css")?>">
-<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix.docker.manager/styles/style-$theme.css")?>">
+<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix.docker.manager/styles/DockerManager.css")?>">
 
 <div markdown="1" style="width:43%;margin-bottom:40px;padding:5px 15px;border:solid 1px">
 :php_settings_plug:

emhttp/plugins/dynamix/include/Boot.php

@@ -32,7 +32,9 @@ $var = parse_ini_file("/var/local/emhttp/var.ini");
 <meta name="robots" content="noindex, nofollow">
 <meta name="referrer" content="same-origin">
 <link type="image/png" rel="shortcut icon" href="/webGui/images/<?=_var($var,'mdColor','red-on')?>.png">
-<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-fonts.css")?>">
+
+<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-color-pallet.css")?>">
+<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-base.css")?>">
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-{$display['theme']}.css")?>">
 
 <style>

emhttp/plugins/dynamix/include/CryptoBenchmark.php

@@ -1,60 +0,0 @@
-<?PHP
-/* Copyright 2005-2023, Lime Technology
- * Copyright 2012-2023, Bergware International.
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU General Public License version 2,
- * as published by the Free Software Foundation.
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- */
-?>
-<?
-$docroot ??= ($_SERVER['DOCUMENT_ROOT'] ?: '/usr/local/emhttp');
-require_once "$docroot/webGui/include/Helpers.php";
-extract(parse_plugin_cfg('dynamix',true));
-
-// add translations
-$_SERVER['REQUEST_URI'] = '';
-require_once "$docroot/webGui/include/Translations.php";
-
-[$luks,$size,$hash,$rng] = my_explode(',',exec("/usr/sbin/cryptsetup --help|tail -1"),4);
-$luks = str_replace('-plain64','',trim(explode(':',$luks)[1]));
-$size = str_replace(' bits','',trim(explode(':',$size)[1]));
-$hash = trim(explode(':',$hash)[1]);
-?>
-<!DOCTYPE html>
-<html <?=$display['rtl']?>lang="<?=strtok($locale,'_')?:'en'?>">
-<head>
-<title>Benchmark</title>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
-<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
-<meta name="format-detection" content="telephone=no">
-<meta name="viewport" content="width=1300">
-<meta name="robots" content="noindex, nofollow">
-<meta name="referrer" content="same-origin">
-<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-fonts.css")?>">
-<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-popup.css")?>">
-<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/font-awesome.css")?>">
-<script src="<?autov("/webGui/javascript/dynamix.js")?>"></script>
-<script>
-var test = 'sha1,sha256,sha512,ripemd160,whirlpool,aes-cbc:128,serpent-cbc:128,twofish-cbc:128,aes-cbc:256,serpent-cbc:256,twofish-cbc:256,aes-xts:256,serpent-xts:256,twofish-xts:256,aes-xts:512,serpent-xts:512,twofish-xts:512';
-
-function benchmark(index,last){
-  if (index > last) return;
-  $.get('/webGui/include/update.crypto.php',{index:index,test:test,luks:'<?=$luks?>:<?=$size?>',hash:'<?=$hash?>'},function(data){
-    $('pre').append(data);
-    benchmark(index+1,last);
-  });
-}
-$(function(){
-  benchmark(0,test.split(',').length);
-});
-</script>
-</head>
-<body style='margin:20px'>
-<pre style='font-family:bitstream;font-size:1.2rem'></pre>
-</body>
-</html>

emhttp/plugins/dynamix/include/DefaultPageLayout.php

@@ -17,6 +17,10 @@ $header  = $display['header'];
 $backgnd = $display['background'];
 $themes1 = in_array($theme,['black','white']);
 $themes2 = in_array($theme,['gray','azure']);
+$themeHtmlClass = "Theme--$theme";
+if ($themes2) {
+  $themeHtmlClass .= " Theme--sidebar";
+}
 $config  = "/boot/config";
 $entity  = $notify['entity'] & 1 == 1;
 $alerts  = '/tmp/plugins/my_alerts.txt';
@@ -28,7 +32,7 @@ exec("sed -ri 's/^\.logLine\{color:#......;/.logLine{color:$fgcolor;/' $docroot/
 function annotate($text) {echo "\n<!--\n",str_repeat("#",strlen($text)),"\n$text\n",str_repeat("#",strlen($text)),"\n-->\n";}
 ?>
 <!DOCTYPE html>
-<html <?=$display['rtl']?>lang="<?=strtok($locale,'_')?:'en'?>">
+<html <?=$display['rtl']?>lang="<?=strtok($locale,'_')?:'en'?>" class="<?= $themeHtmlClass ?>">
 <head>
 <title><?=_var($var,'NAME')?>/<?=_var($myPage,'name')?></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
@@ -44,9 +48,11 @@ function annotate($text) {echo "\n<!--\n",str_repeat("#",strlen($text)),"\n$text
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/font-awesome.css")?>">
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/context.standalone.css")?>">
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.sweetalert.css")?>">
-<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-$theme.css")?>">
-<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/dynamix-$theme.css")?>">
-<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/defaultpagelayout.css")?>">
+
+<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-color-palette.css")?>">
+<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-base.css")?>">
+<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-dynamix.css")?>">
+<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/themes/{$display['theme']}.css")?>">
 
 <style>
 <?if (empty($display['width'])):?>
@@ -58,23 +64,27 @@ function annotate($text) {echo "\n<!--\n",str_repeat("#",strlen($text)),"\n$text
 @media (min-width:1281px){#displaybox{min-width:1280px;margin:0 <?=$themes1?'10px':'auto'?>}}
 @media (min-width:1921px){#displaybox{min-width:1280px;margin:0 <?=$themes1?'20px':'auto'?>}}
 <?endif;?>
+
 <?if ($display['font']):?>
 html{font-size:<?=$display['font']?>%}
 <?endif;?>
+
 <?if ($header):?>
 #header,#header .logo,#header .text-right a{color:#<?=$header?>}
 #header .block{background-color:transparent}
 <?endif;?>
+
 <?if ($backgnd):?>
-#header{background-color:#<?=$backgnd?>}
-<?if ($themes1):?>
-.nav-tile{background-color:#<?=$backgnd?>}
-<?if ($header):?>
-.nav-item a,.nav-user a{color:#<?=$header?>}
-.nav-item.active:after{background-color:#<?=$header?>}
-<?endif;?>
-<?endif;?>
+  #header{background-color:#<?=$backgnd?>}
+  <?if ($themes1):?>
+    .nav-tile{background-color:#<?=$backgnd?>}
+    <?if ($header):?>
+      .nav-item a,.nav-user a{color:#<?=$header?>}
+      .nav-item.active:after{background-color:#<?=$header?>}
+    <?endif;?>
+  <?endif;?>
 <?endif;?>
+
 <?
 $nchan = ['webGui/nchan/notify_poller','webGui/nchan/session_check'];
 $safemode = _var($var,'safeMode')=='yes';
@@ -804,7 +814,9 @@ default:
 echo "</span></span><span id='countdown'></span><span id='user-notice' class='red-text'></span>";
 echo "<span id='copyright'>Unraid&reg; webGui &copy;2024, Lime Technology, Inc.";
 echo " <a href='https://docs.unraid.net/category/manual' target='_blank' title=\""._('Online manual')."\"><i class='fa fa-book'></i> "._('manual')."</a>";
-echo "</span></div>";
+echo "</span>";
+// echo "<unraid-theme-switcher current='" . $display['theme'] . "'></unraid-theme-switcher>";
+echo "</div>";
 ?>
 <script>
 // Firefox specific workaround, not needed anymore in firefox version 100 and higher

emhttp/plugins/dynamix/include/Templates.php

@@ -11,7 +11,7 @@
  */
 ?>
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.ui.css")?>">
-<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix.docker.manager/styles/style-$theme.css")?>">
+<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix.docker.manager/styles/DockerManager.css")?>">
 
 <div class="dfm_template">
 <div id="dfm_dialogWindow"></div>

emhttp/plugins/dynamix/include/TrialRequest.php

@@ -1,82 +0,0 @@
-<?PHP
-/* Copyright 2005-2023, Lime Technology
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU General Public License version 2,
- * as published by the Free Software Foundation.
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- */
-?>
-<?
-$docroot ??= ($_SERVER['DOCUMENT_ROOT'] ?: '/usr/local/emhttp');
-require_once "$docroot/webGui/include/Helpers.php";
-extract(parse_plugin_cfg('dynamix',true));
-
-// add translations
-$_SERVER['REQUEST_URI'] = 'tools';
-require_once "$docroot/webGui/include/Translations.php";
-
-$var = parse_ini_file('state/var.ini');
-
-if (!empty($_POST['trial'])) {
-  file_put_contents('/boot/config/Trial.key', base64_decode($_POST['trial']));
-  exit;
-}
-?>
-<!DOCTYPE html>
-<html <?=$display['rtl']?>lang="<?=strtok($locale,'_')?:'en'?>">
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
-<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
-<meta name="format-detection" content="telephone=no">
-<meta name="viewport" content="width=1300">
-<meta name="robots" content="noindex, nofollow">
-<meta name="referrer" content="same-origin">
-<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-fonts.css")?>">
-<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-popup.css")?>">
-<script src="<?autov('/webGui/javascript/dynamix.js')?>"></script>
-</head>
-<body>
-<div style="margin:20px;">
-<div id="status_panel"></div>
-<form markdown="1" id="trial_form">
-
-<p><input type="checkbox" id="eula" name="eula"><label for="eula"><?=_('By using this software, you agree with our')?> <a target="_blank" href="/Tools/EULA"><?=_('End-User License Agreement')?></a> <?=_('and')?> <a target="_blank" href="https://unraid.net/policies"><?=_('Privacy Policy')?></a>.</label></p>
-
-<br><br>
-
-<center><input type="button" id="trial_button" value="<?=(strstr($var['regTy'], "expired")?_("Extend"):_("Start"))?> <?=_('Trial')?>" onclick="startTrial()" disabled></center>
-
-</form>
-</div>
-<script>
-function startTrial() {
-  var guid = '<?=$var['flashGUID']?>';
-  var timestamp = <?=time()?>;
-  $('#status_panel').slideUp('fast');
-  $('#trial_form').find('input').prop('disabled', true);
-  $('#spinner_image').fadeIn('fast');
-
-  $.post('https://keys.lime-technology.com/account/trial',{timestamp:timestamp,guid:guid},function(data) {
-    $.post('/webGui/include/TrialRequest.php',{trial:data.trial,csrf_token:'<?=$var['csrf_token']?>'},function(data2) {
-      $('#spinner_image,#status_panel').fadeOut('fast');
-      parent.swal({title:"<?=_('Trial')?> <?=(strstr($var['regTy'], 'expired')?_('extended'):_('started'))?>",text:"<?=_('Thank you for registering USB Flash GUID')?> "+guid+".",type:'success',html:true,confirmButtonText:"<?=_('Ok')?>"},function(){parent.window.location='/Main';});
-    });
-  }).fail(function(data) {
-      $('#trial_form').find('input').prop('disabled', false);
-      $('#spinner_image').fadeOut('fast');
-      var status = data.status;
-      var obj = data.responseJSON;
-      var msg = "<p><?=_('Sorry, an error occurred')?> <?=('registering USB Flash GUID')?> <strong>"+guid+"</strong><p>"+"<p><?=_('The error is')?>: "+obj.error+"</p>";
-      $('#status_panel').hide().html(msg).slideDown('fast');
-  });
-}
-$('#eula').change(function() {
-  $('#trial_button').prop('disabled', !this.checked);
-});
-</script>
-</body>
-</html>

emhttp/plugins/dynamix/include/update.crypto.php

@@ -1,49 +0,0 @@
-<?PHP
-/* Copyright 2005-2023, Lime Technology
- * Copyright 2012-2023, Bergware International.
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU General Public License version 2,
- * as published by the Free Software Foundation.
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- */
-?>
-<?
-// add translations
-$_SERVER['REQUEST_URI'] = '';
-require_once "$docroot/webGui/include/Translations.php";
-require_once "$docroot/webGui/include/Helpers.php";
-
-$index = unscript(_var($_GET,'index'));
-$tests = explode(',',unscript(_var($_GET,'test')));
-
-if ($index < count($tests)) {
-  $test = $tests[$index];
-  [$name,$size] = my_explode(':',$test);
-  if (!$size) {
-    $default = ($test==_var($_GET,'hash'));
-    if ($index>0) $test .= '|tail -1';
-    if ($default) echo "<b>";
-    echo preg_replace(['/^(# Tests.*\n)/','/\n$/'],["$1\n",""],shell_exec("/usr/sbin/cryptsetup benchmark -h $test"));
-    echo $default ? " (default)</b>\n" : "\n";
-  } else {
-    $default = ($test==_var($_GET,'luks'));
-    if ($index>5) $size .= '|tail -1';
-    if ($default) echo "<b>";
-    echo preg_replace(['/^# Tests.*\n/','/\n$/'],["\n",""],shell_exec("/usr/sbin/cryptsetup benchmark -c $name -s $size"));
-    echo $default ? " (default)</b>\n" : "\n";
-  }
-} else {
-  $bm = popen('/usr/sbin/cryptsetup --help','r');
-  while (!feof($bm)) {
-    $text = fgets($bm);
-    if (strpos($text,'Default PBKDF2 iteration time for LUKS')!==false) echo "\n$text";
-    elseif (strpos($text,'Default compiled-in device cipher parameters')!==false) echo "\n$text";
-    elseif (strpos($text,'LUKS1:')!==false) echo str_replace("\t"," ",$text);
-  }
-  pclose($bm);
-  echo "<div style='text-align:center;margin-top:12px'><input type='button' value=\""._('Done')."\" onclick='top.Shadowbox.close()'></div>";
-}
-?>

emhttp/plugins/dynamix/sheets/Apps.css

@@ -1 +1,3 @@
-div.notice{margin:150px 0 20px 0}
+div.notice {
+    margin: 150px 0 20px 0;
+}

emhttp/plugins/dynamix/sheets/ArrayOperation.css

@@ -1,5 +1,17 @@
-tr#copy,tr#file{display:none}
-td.gap{padding-left:26px!important}
-td.wrap{white-space:normal!important}
-span#pass{display:none;margin-left:20px}
-input[type=checkbox]{margin-left:0}
+tr#copy,
+tr#file {
+    display: none;
+}
+td.gap {
+    padding-left: 26px !important;
+}
+td.wrap {
+    white-space: normal !important;
+}
+span#pass {
+    display: none;
+    margin-left: 20px;
+}
+input[type="checkbox"] {
+    margin-left: 0;
+}

emhttp/plugins/dynamix/sheets/Browse-azure.css

@@ -1,2 +0,0 @@
-div.autoheight{width:100%;overflow-y:auto;margin-top:0}
-table.tablesorter.indexer tbody tr:hover td{background-color:rgba(0,0,0,0.1)}

emhttp/plugins/dynamix/sheets/Browse-black.css

@@ -1,4 +0,0 @@
-tr.ace_optionsMenuEntry td select{color:#1c1b1b;border-bottom:1px solid #1c1b1b;background-image:linear-gradient(66.6deg,transparent 60%,#1c1b1b 40%),linear-gradient(113.4deg, #1c1b1b 40%,transparent 60%)}
-tr.ace_optionsMenuEntry td input[type=number]{color:#1c1b1b}
-div.autoheight{width:100%;overflow-y:auto;margin-top:-30px}
-table.tablesorter.indexer tbody tr:hover td{background-color:rgba(255,255,255,0.1)}

emhttp/plugins/dynamix/sheets/Browse-gray.css

@@ -1,2 +0,0 @@
-div.autoheight{width:100%;overflow-y:auto;margin-top:0}
-table.tablesorter.indexer tbody tr:hover td{background-color:rgba(255,255,255,0.1)}

emhttp/plugins/dynamix/sheets/Browse-white.css

@@ -1,2 +0,0 @@
-div.autoheight{width:100%;overflow-y:auto;margin-top:-30px}
-table.tablesorter.indexer tbody tr:hover td{background-color:rgba(0,0,0,0.1)}

emhttp/plugins/dynamix/sheets/Browse.css

@@ -1,26 +1,129 @@
-div#ace_settingsmenu,table#controls,table#more-controls{margin-top:0;background-color:#f2f2f2}
-tr.ace_optionsMenuEntry td{padding:4px;color:#1c1b1b}
-tr.ace_optionsMenuEntry td select option{color:#1c1b1b;background-color:#e8e8e8}
-tr.ace_optionsMenuEntry td input[type=number]::-webkit-inner-spin-button{-webkit-appearance:auto;cursor:pointer}
-tr.ace_optionsMenuEntry td input[type=number]{-moz-appearance:auto;margin:0}
-.title{letter-spacing:1px}
-.title span.left{text-transform:none}
-.loc{text-align:left!important;padding-left:0!important}
-table.tablesorter.indexer{margin-top:0}
-table.tablesorter.indexer thead th:nth-child(1){width:12px;text-align:left;padding-left:11px}
-table.tablesorter.indexer thead th:nth-child(2){width:3%!important}
-table.tablesorter.indexer thead th:nth-child(3){width:auto!important}
-table.tablesorter.indexer thead th:nth-child(n+4){width:10%!important}
-table.tablesorter.indexer thead th:nth-child(9){width:3%!important}
-table.tablesorter.indexer tbody tr:hover td{background-color:<?=$dfm['hover']?>}
-table.tablesorter.indexer thead th{text-align:left}
-table.tablesorter.indexer tbody td{text-align:left}
-table.tablesorter.indexer thead th:last-child{text-align:right}
-table.tablesorter.indexer tbody td:last-child{text-align:right}
-i[id^="row_"],i[id^="check_"]{cursor:pointer;font-size:1.8rem;color:gray}
-td[id^="name_"]{cursor:pointer}
-i.fa-home{font-size:2rem}
-i.fa-chevron-right{font-size:1.2rem;margin:0 8px}
-div.autoheight{width:100%;overflow-y:auto;margin-top:<?=$themes1?'-30px':'0'?>}
-div#buttons{display:none}
-.dropdown-menu{z-index:10001}
+:root {
+    --browse-icon-color: gray; /* @todo use existing color palette */
+    --browse-select-border-color: var(--black);
+    --browse-select-option-bg-color: var(--gray-150);
+    --browse-table-controls-bg-color: var(--gray-100);
+    --browse-table-tbody-tr-hover-td-bg-color: var(--white-opacity-10);
+    --browse-text-color: var(--black);
+}
+
+.Theme--azure:root,
+.Theme--white:root {
+    --browse-table-tbody-tr-hover-td-bg-color: var(--black-opacity-10);
+}
+
+div#ace_settingsmenu,
+table#controls,
+table#more-controls {
+    margin-top: 0;
+    background-color: --browse-table-controls-bg-color;
+}
+tr.ace_optionsMenuEntry td {
+    padding: 4px;
+    color: var(--browse-text-color);
+}
+tr.ace_optionsMenuEntry td select option {
+    color: var(--browse-text-color);
+    background-color: var(--browse-select-option-bg-color);
+}
+tr.ace_optionsMenuEntry td input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: auto;
+    cursor: pointer;
+}
+tr.ace_optionsMenuEntry td input[type="number"] {
+    -moz-appearance: auto;
+    margin: 0;
+}
+.title {
+    letter-spacing: 1px;
+}
+.title span.left {
+    text-transform: none;
+}
+.loc {
+    text-align: left !important;
+    padding-left: 0 !important;
+}
+table.tablesorter.indexer {
+    margin-top: 0;
+}
+table.tablesorter.indexer thead th:nth-child(1) {
+    width: 12px;
+    text-align: left;
+    padding-left: 11px;
+}
+table.tablesorter.indexer thead th:nth-child(2) {
+    width: 3% !important;
+}
+table.tablesorter.indexer thead th:nth-child(3) {
+    width: auto !important;
+}
+table.tablesorter.indexer thead th:nth-child(n + 4) {
+    width: 10% !important;
+}
+table.tablesorter.indexer thead th:nth-child(9) {
+    width: 3% !important;
+}
+/* table.tablesorter.indexer tbody tr:hover td{background-color:<?=$dfm['hover']?>} */
+table.tablesorter.indexer thead th {
+    text-align: left;
+}
+table.tablesorter.indexer tbody td {
+    text-align: left;
+}
+table.tablesorter.indexer thead th:last-child {
+    text-align: right;
+}
+table.tablesorter.indexer tbody td:last-child {
+    text-align: right;
+}
+i[id^="row_"],
+i[id^="check_"] {
+    cursor: pointer;
+    font-size: 1.8rem;
+    color: var(--browse-icon-color);
+}
+td[id^="name_"] {
+    cursor: pointer;
+}
+i.fa-home {
+    font-size: 2rem;
+}
+i.fa-chevron-right {
+    font-size: 1.2rem;
+    margin: 0 8px;
+}
+div#buttons {
+    display: none;
+}
+.dropdown-menu {
+    z-index: 10001;
+}
+
+div.autoheight {
+    width: 100%;
+    overflow-y: auto;
+    margin-top: -30px;
+}
+
+table.tablesorter.indexer tbody tr:hover td {
+    background-color: var(--browse-table-tbody-tr-hover-td-bg-color);
+}
+
+.Theme--black {
+    tr.ace_optionsMenuEntry td select {
+        color: var(--browse-text-color);
+        border-bottom: 1px solid var(--browse-select-border-color);
+        background-image: linear-gradient(66.6deg, transparent 60%, var(--browse-select-border-color) 40%),
+            linear-gradient(113.4deg, var(--browse-select-border-color) 40%, transparent 60%);
+    }
+    tr.ace_optionsMenuEntry td input[type="number"] {
+        color: var(--browse-text-color);
+    }
+}
+
+.Theme--sidebar {
+    div.autoheight {
+        margin-top: 0;
+    }
+}

emhttp/plugins/dynamix/sheets/BrowseButton-azure.css

@@ -1,7 +0,0 @@
-span.dfm_filter{position:relative;margin-left:0;top:-8px}
-span.dfm_filter i{position:absolute;left:10px;top:8px;font-size:1.4rem}
-input.dfm_filter{border:none;width:100px;background-color:#f2f2f2;margin:-8px 0 0 0;padding-left:30px}
-input.dfm_filter:focus{background-color:#f2f2f2}
-input#dfm_target{color:#1c1c1c;width:500px}
-input#dfm_target+.fileTree{background:#f2f2f2;width:500px;max-height:320px;overflow-y:scroll;overflow-x:hidden;position:absolute;z-index:100;display:none}
-i.dfm_filter{margin-top:-4px}

emhttp/plugins/dynamix/sheets/BrowseButton-black.css

@@ -1,7 +0,0 @@
-span.dfm_filter{position:relative;margin-left:12px;top:-2px}
-span.dfm_filter i{position:absolute;left:10px;top:4px;font-size:1.4rem}
-input.dfm_filter{border:none;width:100px;background-color:#1c1c1c;margin:-8px 0 0 0;padding-left:30px}
-input.dfm_filter:focus{background-color:#1c1c1c}
-input#dfm_target{color:#f2f2f2;width:500px}
-input#dfm_target+.fileTree{background:#1c1c1c;width:500px;max-height:320px;overflow-y:scroll;overflow-x:hidden;position:absolute;z-index:100;display:none}
-i.dfm_filter{margin-top:-2px}

emhttp/plugins/dynamix/sheets/BrowseButton-gray.css

@@ -1,7 +0,0 @@
-span.dfm_filter{position:relative;margin-left:0;top:-8px}
-span.dfm_filter i{position:absolute;left:10px;top:8px;font-size:1.4rem}
-input.dfm_filter{border:none;width:100px;background-color:#121510;margin:-8px 0 0 0;padding-left:30px}
-input.dfm_filter:focus{background-color:#121510}
-input#dfm_target{color:#f2f2f2;width:500px}
-input#dfm_target+.fileTree{background:<#1c1c1c;width:500px;max-height:320px;overflow-y:scroll;overflow-x:hidden;position:absolute;z-index:100;display:none}
-i.dfm_filter{margin-top:-4px}

emhttp/plugins/dynamix/sheets/BrowseButton-white.css

@@ -1,7 +0,0 @@
-span.dfm_filter{position:relative;margin-left:12px;top:-2px}
-span.dfm_filter i{position:absolute;left:10px;top:4px;font-size:1.4rem}
-input.dfm_filter{border:none;width:100px;background-color:#f2f2f2;margin:-8px 0 0 0;padding-left:30px}
-input.dfm_filter:focus{background-color:#f2f2f2}
-input#dfm_target{color:#1c1c1c;width:500px}
-input#dfm_target+.fileTree{background:#f2f2f2;width:500px;max-height:320px;overflow-y:scroll;overflow-x:hidden;position:absolute;z-index:100;display:none}
-i.dfm_filter{margin-top:-2px}

emhttp/plugins/dynamix/sheets/BrowseButton.css

@@ -1,25 +1,236 @@
-#countdown{float:left;margin-left:100px}
-#user-notice{float:left}
-div.dfm_info{position:absolute;bottom:4px;width:74%;margin-left:23%}
-div.dfm_template{display:none}
-div#dfm_dialogWindow{overflow-x:hidden}
-div#dfm_dialogWindow dt{width:23%}
-div#dfm_joblist{text-align:left;margin-top:20px;margin-left:56px}
-span.dfm_loc{display:inline-block}
-span.dfm_text{display:inline-block;width:75%;white-space:normal}
-span.dfm_device{display:inline-block;float:left}
-span.dfm_percent{display:inline-block;width:40px}
-span.dfm_speed{display:inline-block;margin-left:10px;width:140px}
-input#dfm_sparse,input#dfm_exist{margin-left:0}
-select.dfm{margin:0 40px 0 10px}
-select#dfm_source{min-width:none;max-width:none;border:none;background-image:none;width:660px;cursor:default}
-select#dfm_source option{background-color:transparent}
-i.dfm{margin-right:8px}
-i.job{cursor:pointer;font-size:1.8rem;vertical-align:middle}
-.ui-dfm .ui-dialog-titlebar-close{background:transparent;border:none;font-size:1.8rem!important;margin-top:-14px!important;margin-right:-18px!important}
-.ui-dfm .ui-dialog-titlebar-close:hover{background:transparent;color:#ff8c2f}
-.ui-dfm .ui-dialog-title{text-align:center;width:100%;font-size:1.8rem}
-.ui-dfm .ui-dialog-content{padding-top:15px;vertical-align:bottom}
-.ui-dfm .ui-button-text{padding:0px 5px}
+:root {
+    --browse-button-ui-dialog-titlebar-close-hover-color: #ff8c2f;
+    --browse-button-ui-dialog-buttonset-button-disabled-text-color: #808080;
+    --browse-button-ui-dialog-buttonset-button-disabled-bg-color-from: #404040;
+    --browse-button-ui-dialog-buttonset-button-disabled-bg-color-to: #808080;
+
+    --input-dfm-filter-bg-color: #1c1c1c;
+    --input-dfm-target-text-color: #f2f2f2;
+    --input-dfm-target-filetree-bg-color: #1c1c1c;
+}
+
+.Theme--azure:root,
+.Theme--white:root {
+    --input-dfm-filter-bg-color: #f2f2f2;
+    --input-dfm-target-text-color: #1c1c1c;
+    --input-dfm-target-filetree-bg-color: #f2f2f2;
+}
+
+#countdown {
+    float: left;
+    margin-left: 100px;
+}
+#user-notice {
+    float: left;
+}
+div.dfm_info {
+    position: absolute;
+    bottom: 4px;
+    width: 74%;
+    margin-left: 23%;
+}
+div.dfm_template {
+    display: none;
+}
+div#dfm_dialogWindow {
+    overflow-x: hidden;
+}
+div#dfm_dialogWindow dt {
+    width: 23%;
+}
+div#dfm_joblist {
+    text-align: left;
+    margin-top: 20px;
+    margin-left: 56px;
+}
+span.dfm_loc {
+    display: inline-block;
+}
+span.dfm_text {
+    display: inline-block;
+    width: 75%;
+    white-space: normal;
+}
+span.dfm_device {
+    display: inline-block;
+    float: left;
+}
+span.dfm_percent {
+    display: inline-block;
+    width: 40px;
+}
+span.dfm_speed {
+    display: inline-block;
+    margin-left: 10px;
+    width: 140px;
+}
+input#dfm_sparse,
+input#dfm_exist {
+    margin-left: 0;
+}
+select.dfm {
+    margin: 0 40px 0 10px;
+}
+select#dfm_source {
+    min-width: none;
+    max-width: none;
+    border: none;
+    background-image: none;
+    width: 660px;
+    cursor: default;
+}
+select#dfm_source option {
+    background-color: transparent;
+}
+i.dfm {
+    margin-right: 8px;
+}
+i.job {
+    cursor: pointer;
+    font-size: 1.8rem;
+    vertical-align: middle;
+}
+.ui-dfm .ui-dialog-titlebar-close {
+    background: transparent;
+    border: none;
+    font-size: 1.8rem !important;
+    margin-top: -14px !important;
+    margin-right: -18px !important;
+}
+.ui-dfm .ui-dialog-titlebar-close:hover {
+    background: transparent;
+    color: var(--browse-button-ui-dialog-titlebar-close-hover-color);
+}
+.ui-dfm .ui-dialog-title {
+    text-align: center;
+    width: 100%;
+    font-size: 1.8rem;
+}
+.ui-dfm .ui-dialog-content {
+    padding-top: 15px;
+    vertical-align: bottom;
+}
+.ui-dfm .ui-button-text {
+    padding: 0px 5px;
+}
 .ui-dfm .ui-dialog-buttonpane .ui-dialog-buttonset button[disabled],
-.ui-dfm .ui-dialog-buttonpane .ui-dialog-buttonset button[disabled]:hover{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%}
+.ui-dfm .ui-dialog-buttonpane .ui-dialog-buttonset button[disabled]:hover {
+    cursor: default;
+    color: var(--browse-button-ui-dialog-buttonset-button-disabled-text-color);
+    background:
+        -webkit-gradient(
+                linear,
+                left top,
+                right top,
+                from(var(--browse-button-ui-dialog-buttonset-button-disabled-bg-color-from)),
+                to(var(--browse-button-ui-dialog-buttonset-button-disabled-bg-color-to))
+            )
+            0 0 no-repeat,
+        -webkit-gradient(
+                linear,
+                left top,
+                right top,
+                from(var(--browse-button-ui-dialog-buttonset-button-disabled-bg-color-from)),
+                to(var(--browse-button-ui-dialog-buttonset-button-disabled-bg-color-to))
+            ) 0 100% no-repeat,
+        -webkit-gradient(
+                linear,
+                left bottom,
+                left top,
+                from(var(--browse-button-ui-dialog-buttonset-button-disabled-bg-color-from)),
+                to(var(--browse-button-ui-dialog-buttonset-button-disabled-bg-color-from))
+            ) 0 100% no-repeat,
+        -webkit-gradient(
+                linear,
+                left bottom,
+                left top,
+                from(var(--browse-button-ui-dialog-buttonset-button-disabled-bg-color-to)),
+                to(var(--browse-button-ui-dialog-buttonset-button-disabled-bg-color-to))
+            ) 100% 100% no-repeat;
+    background:
+        linear-gradient(
+            90deg,
+            var(--browse-button-ui-dialog-buttonset-button-disabled-bg-color-from) 0,
+            var(--browse-button-ui-dialog-buttonset-button-disabled-bg-color-to)
+        ) 0 0 no-repeat,
+        linear-gradient(
+            90deg,
+            var(--browse-button-ui-dialog-buttonset-button-disabled-bg-color-from) 0,
+            var(--browse-button-ui-dialog-buttonset-button-disabled-bg-color-to)
+        ) 0 100% no-repeat,
+        linear-gradient(
+            0deg,
+            var(--browse-button-ui-dialog-buttonset-button-disabled-bg-color-from) 0,
+            var(--browse-button-ui-dialog-buttonset-button-disabled-bg-color-from)
+        ) 0 100% no-repeat,
+        linear-gradient(
+            0deg,
+            var(--browse-button-ui-dialog-buttonset-button-disabled-bg-color-to) 0,
+            var(--browse-button-ui-dialog-buttonset-button-disabled-bg-color-to)
+        ) 100% 100% no-repeat;
+    background-size:
+        100% 2px,
+        100% 2px,
+        2px 100%,
+        2px 100%;
+}
+
+span.dfm_filter {
+    position: relative;
+    margin-left: 12px;
+    top: -2px;
+}
+span.dfm_filter i {
+    position: absolute;
+    left: 10px;
+    top: 4px;
+    font-size: 1.4rem;
+}
+input.dfm_filter {
+    border: none;
+    width: 100px;
+    background-color: var(--input-dfm-filter-bg-color);
+    margin: -8px 0 0 0;
+    padding-left: 30px;
+}
+input.dfm_filter:focus {
+    background-color: var(--input-dfm-filter-bg-color);
+}
+input#dfm_target {
+    color: var(--input-dfm-target-text-color);
+    width: 500px;
+}
+input#dfm_target + .fileTree {
+    background: var(--input-dfm-target-filetree-bg-color);
+    width: 500px;
+    max-height: 320px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    position: absolute;
+    z-index: 100;
+    display: none;
+}
+i.dfm_filter {
+    margin-top: -2px;
+}
+div.autoheight {
+    width: 100%;
+    overflow-y: auto;
+    margin-top: -30px;
+}
+
+.Theme--sidebar {
+    span.dfm_filter {
+        margin-left: 0;
+        top: -8px;
+    }
+    span.dfm_filter i {
+        top: 8px;
+    }
+    i.dfm_filter {
+        margin-top: -4px;
+    }
+    div.autoheight {
+        margin-top: 0;
+    }
+}

emhttp/plugins/dynamix/sheets/CPUvms.css

@@ -1,6 +1,22 @@
-table.tablesorter tr>th+th{text-align:right;vertical-align:top}
-table.tablesorter tr>td+td+td{vertical-align:top}
-table.tablesorter tr>th+th+th,table.tablesorter tr>td+td{text-align:center}
-table.tablesorter th:first-child,table.tablesorter td:first-child{width:180px;text-align:left}
-input.flat{margin:0}
-input.lock{margin:0}
+table.tablesorter tr > th + th {
+    text-align: right;
+    vertical-align: top;
+}
+table.tablesorter tr > td + td + td {
+    vertical-align: top;
+}
+table.tablesorter tr > th + th + th,
+table.tablesorter tr > td + td {
+    text-align: center;
+}
+table.tablesorter th:first-child,
+table.tablesorter td:first-child {
+    width: 180px;
+    text-align: left;
+}
+input.flat {
+    margin: 0;
+}
+input.lock {
+    margin: 0;
+}

emhttp/plugins/dynamix/sheets/CacheDevices.css

@@ -1,2 +1,7 @@
-td.divider{line-height:16px;height:16px}
-div.template{display:none}
+td.divider {
+    line-height: 16px;
+    height: 16px;
+}
+div.template {
+    display: none;
+}

emhttp/plugins/dynamix/sheets/DashStats-azure.css

@@ -1,2 +0,0 @@
-div.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(580px,1fr));column-gap:20px}
-div.pie::after{background-color:#d7dbdd}

emhttp/plugins/dynamix/sheets/DashStats-black.css

@@ -1,2 +0,0 @@
-div.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(610px,1fr));column-gap:20px}
-div.pie::after{background-color:#262626}

emhttp/plugins/dynamix/sheets/DashStats-gray.css

@@ -1,2 +0,0 @@
-div.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(580px,1fr));column-gap:20px}
-div.pie::after{background-color:#212f3d}

emhttp/plugins/dynamix/sheets/DashStats-white.css

@@ -1,2 +0,0 @@
-div.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(610px,1fr));column-gap:20px}
-div.pie::after{background-color:#f7f9f9}

emhttp/plugins/dynamix/sheets/DashStats.css

@@ -1,78 +1,403 @@
-div.frame{padding-top:14px;padding-bottom:160px}
-div.tile,i.tile{display:none}
-div#iframe-popup{display:none;-webkit-overflow-scrolling:touch}
-div.last{padding-bottom:12px}
-div.leftside{float:left;width:66%}
-div.rightside{float:right;margin:0;text-align:center}
-div[id$=chart]{margin:-12px 8px -24px -18px}
-div.template,div#dialogWindow,input#upload{display:none}
-span.head_info{width:250px;display:inline-block}
-span.switch{display:none}
-span.head_bar{display:inline-block;width:180px}
-span.head_gap{padding-left:14px}
-span.head_time{padding-left:40px;font-size:inherit!important;font-weight:bold!important}
-span.head_time .ampm{font-size:inherit!important;font-weight:bold!important;text-transform:uppercase!important}
-span.ampm{font-size:3rem}
-span.green,span.red,span.orange{padding-left:0}
-span.ctrl{float:right;margin-top:0;margin-right:10px}
-span.ctrl span{font-size:2rem!important}
-span.outer{float:left}
-span.inner{width:143px}
-span.rx{width:80px;display:inline-block}
-span.busy,i.inactive{opacity:0.5}
-span.dense{width:180px;display:inline-block}
-span#ups_model{margin-right:30px}
-span#chart-toggle{float:right}
-span.header,tr.header{font-size:1.1rem!important;text-transform:uppercase;letter-spacing:1px}
-span.wg1{font-size:1.1rem;text-indent:24px}
-span.wg2{font-size:1.1rem}
-span[id^=cpu],span[id^=sys]{width:0}
-span[class^="fa "]{font-size:1.6rem;margin-right:18px}
-span.load.resize{font-size:1.1rem}
-span.fan{width:36%;display:inline-block}
-span.w18{min-width:18%;max-width:18%;display:inline-block;float:left;overflow:hidden;text-overflow:ellipsis}
-span.w26{min-width:26%;max-width:26%;display:inline-block;float:left;overflow:hidden;text-overflow:ellipsis}
-span.w36{min-width:36%;max-width:36%;display:inline-block;float:left;overflow:hidden;text-overflow:ellipsis}
-span.w44{min-width:44%;max-width:44%;display:inline-block;float:left;overflow:hidden;text-overflow:ellipsis}
-span.w72{min-width:72%;max-width:72%;display:inline-block;float:left;overflow:hidden;text-overflow:ellipsis}
-span.w26:hover,span.w18:hover{overflow:visible}
-span.center{text-align:center;margin-bottom:4px}
-span.center>div{margin:0 auto}
-select#cpuline,select#netline{border:none;padding:0 12px 0 0}
-select[name=enter_share],select[name=enter_user]{margin-top:0;float:none}
-img#mycase{width:auto;max-width:128px;height:auto;max-height:128px}
-i.heat{margin-left:8px}
-i.ups{margin-right:8px;font-size:1.4rem!important}
-i.vpn{font-size:1.4rem!important;cursor:pointer}
-i.indent{display:inline-block;width:18px}
-i.f32{font-size:32px!important}
-i.f14{font-size:1.4rem!important}
-i.fa.orb{margin-left:0}
-i.fa-wrench.tile{color:#0099ff!important;background-color:rgba(0,153,255,0.1)!important}
-i[class^="icon-"]{font-size:1.6rem;margin-right:8px}
-i[class^="icon-u-"]{font-size:inherit}
-i#mycase[class^="case-"]{font-size:128px}
-i#mycase[class^="fa "]{font-size:96px}
-a.cpu_close,span.hand{cursor:pointer;z-index:1001}
-a.info{white-space:normal;word-spacing:100px;word-break:break-word}
-a.info span{word-spacing:normal}
-tr#var0,tr#var1,tr#var2,tr#var3,tr#var4{cursor:alias}
-tr#var1,tr#var4,tr#cpu_chart,.cpu_open{display:none}
-td.none{text-align:center;padding-top:12px}
-input[value=Edit]{margin:12px 0 0 0;padding:5px 10px}
-.share1,.share3,.user1,.user3,.view1,.view2,.view3,.view4,.unused{display:none}
-.port_view,.control{z-index:10000}
-.flat{height:0;lineheight:0}
-.wrap{white-space:normal}
-.switch-button-background{margin-left:0;margin-top:4px}
-.switch-button-label{margin-top:3px}
-.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button[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%}
-#current_time{font-size:4rem;margin-left:8px}
-#current_date{font-size:1.3rem;margin-left:18px}
-table.snapshot{margin-top:0}
-.switch-button-background{margin-top:4px!important}
-div.pie{height:92px;width:92px;border-radius:50%;display:flex;justify-content:center;align-items:center}
-div.pie::after{content:'';position:absolute;height:68px;width:68px;border-radius:50%}
-div.pie span{z-index:2;font-size:1.6rem;font-weight:bold}
-.var0,.var1,.var2,.var3{display:none;font-size:1.3rem!important}
-legend{font-variant:small-caps;margin-bottom:4px}
+:root {
+    --dashstats-pie-after-bg-color: #262626;
+}
+.Theme--gray:root {
+    --dashstats-pie-after-bg-color: #212f3d;
+}
+.Theme--azure:root {
+    --dashstats-pie-after-bg-color: #d7dbdd;
+}
+.Theme--white:root {
+    --dashstats-pie-after-bg-color: #f7f9f9;
+}
+
+div.frame {
+    padding-top: 14px;
+    padding-bottom: 160px;
+}
+div.tile,
+i.tile {
+    display: none;
+}
+div#iframe-popup {
+    display: none;
+    -webkit-overflow-scrolling: touch;
+}
+div.last {
+    padding-bottom: 12px;
+}
+div.leftside {
+    float: left;
+    width: 66%;
+}
+div.rightside {
+    float: right;
+    margin: 0;
+    text-align: center;
+}
+div[id$="chart"] {
+    margin: -12px 8px -24px -18px;
+}
+div.template,
+div#dialogWindow,
+input#upload {
+    display: none;
+}
+span.head_info {
+    width: 250px;
+    display: inline-block;
+}
+span.switch {
+    display: none;
+}
+span.head_bar {
+    display: inline-block;
+    width: 180px;
+}
+span.head_gap {
+    padding-left: 14px;
+}
+span.head_time {
+    padding-left: 40px;
+    font-size: inherit !important;
+    font-weight: bold !important;
+}
+span.head_time .ampm {
+    font-size: inherit !important;
+    font-weight: bold !important;
+    text-transform: uppercase !important;
+}
+span.ampm {
+    font-size: 3rem;
+}
+span.green,
+span.red,
+span.orange {
+    padding-left: 0;
+}
+span.ctrl {
+    float: right;
+    margin-top: 0;
+    margin-right: 10px;
+}
+span.ctrl span {
+    font-size: 2rem !important;
+}
+span.outer {
+    float: left;
+}
+span.inner {
+    width: 143px;
+}
+span.rx {
+    width: 80px;
+    display: inline-block;
+}
+span.busy,
+i.inactive {
+    opacity: 0.5;
+}
+span.dense {
+    width: 180px;
+    display: inline-block;
+}
+span#ups_model {
+    margin-right: 30px;
+}
+span#chart-toggle {
+    float: right;
+}
+span.header,
+tr.header {
+    font-size: 1.1rem !important;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+span.wg1 {
+    font-size: 1.1rem;
+    text-indent: 24px;
+}
+span.wg2 {
+    font-size: 1.1rem;
+}
+span[id^="cpu"],
+span[id^="sys"] {
+    width: 0;
+}
+span[class^="fa "] {
+    font-size: 1.6rem;
+    margin-right: 18px;
+}
+span.load.resize {
+    font-size: 1.1rem;
+}
+span.fan {
+    width: 36%;
+    display: inline-block;
+}
+span.w18 {
+    min-width: 18%;
+    max-width: 18%;
+    display: inline-block;
+    float: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+span.w26 {
+    min-width: 26%;
+    max-width: 26%;
+    display: inline-block;
+    float: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+span.w36 {
+    min-width: 36%;
+    max-width: 36%;
+    display: inline-block;
+    float: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+span.w44 {
+    min-width: 44%;
+    max-width: 44%;
+    display: inline-block;
+    float: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+span.w72 {
+    min-width: 72%;
+    max-width: 72%;
+    display: inline-block;
+    float: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+span.w26:hover,
+span.w18:hover {
+    overflow: visible;
+}
+span.center {
+    text-align: center;
+    margin-bottom: 4px;
+}
+span.center > div {
+    margin: 0 auto;
+}
+select#cpuline,
+select#netline {
+    border: none;
+    padding: 0 12px 0 0;
+}
+select[name="enter_share"],
+select[name="enter_user"] {
+    margin-top: 0;
+    float: none;
+}
+img#mycase {
+    width: auto;
+    max-width: 128px;
+    height: auto;
+    max-height: 128px;
+}
+i.heat {
+    margin-left: 8px;
+}
+i.ups {
+    margin-right: 8px;
+    font-size: 1.4rem !important;
+}
+i.vpn {
+    font-size: 1.4rem !important;
+    cursor: pointer;
+}
+i.indent {
+    display: inline-block;
+    width: 18px;
+}
+i.f32 {
+    font-size: 32px !important;
+}
+i.f14 {
+    font-size: 1.4rem !important;
+}
+i.fa.orb {
+    margin-left: 0;
+}
+i.fa-wrench.tile {
+    color: #0099ff !important;
+    background-color: rgba(0, 153, 255, 0.1) !important;
+}
+i[class^="icon-"] {
+    font-size: 1.6rem;
+    margin-right: 8px;
+}
+i[class^="icon-u-"] {
+    font-size: inherit;
+}
+i#mycase[class^="case-"] {
+    font-size: 128px;
+}
+i#mycase[class^="fa "] {
+    font-size: 96px;
+}
+a.cpu_close,
+span.hand {
+    cursor: pointer;
+    z-index: 1001;
+}
+a.info {
+    white-space: normal;
+    word-spacing: 100px;
+    word-break: break-word;
+}
+a.info span {
+    word-spacing: normal;
+}
+tr#var0,
+tr#var1,
+tr#var2,
+tr#var3,
+tr#var4 {
+    cursor: alias;
+}
+tr#var1,
+tr#var4,
+tr#cpu_chart,
+.cpu_open {
+    display: none;
+}
+td.none {
+    text-align: center;
+    padding-top: 12px;
+}
+input[value="Edit"] {
+    margin: 12px 0 0 0;
+    padding: 5px 10px;
+}
+.share1,
+.share3,
+.user1,
+.user3,
+.view1,
+.view2,
+.view3,
+.view4,
+.unused {
+    display: none;
+}
+.port_view,
+.control {
+    z-index: 10000;
+}
+.flat {
+    height: 0;
+    lineheight: 0;
+}
+.wrap {
+    white-space: normal;
+}
+.switch-button-background {
+    margin-left: 0;
+    margin-top: 4px;
+}
+.switch-button-label {
+    margin-top: 3px;
+}
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button[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%;
+}
+#current_time {
+    font-size: 4rem;
+    margin-left: 8px;
+}
+#current_date {
+    font-size: 1.3rem;
+    margin-left: 18px;
+}
+table.snapshot {
+    margin-top: 0;
+}
+.switch-button-background {
+    margin-top: 4px !important;
+}
+div.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(610px, 1fr));
+    column-gap: 20px;
+}
+div.pie {
+    height: 92px;
+    width: 92px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+div.pie::after {
+    content: "";
+    position: absolute;
+    height: 68px;
+    width: 68px;
+    border-radius: 50%;
+    background-color: var(--dashstats-pie-after-bg-color);
+}
+div.pie span {
+    z-index: 2;
+    font-size: 1.6rem;
+    font-weight: bold;
+}
+.var0,
+.var1,
+.var2,
+.var3 {
+    display: none;
+    font-size: 1.3rem !important;
+}
+legend {
+    font-variant: small-caps;
+    margin-bottom: 4px;
+}

emhttp/plugins/dynamix/sheets/DeviceIdentify.css

@@ -1,2 +1,14 @@
-input[type=date]{border:none;margin-left:-2px;padding-left:0;background:transparent;box-shadow:none}
-select.noframe{border:none;margin-left:0;padding-left:0;background:transparent;box-shadow:none}
+input[type="date"] {
+    border: none;
+    margin-left: -2px;
+    padding-left: 0;
+    background: transparent;
+    box-shadow: none;
+}
+select.noframe {
+    border: none;
+    margin-left: 0;
+    padding-left: 0;
+    background: transparent;
+    box-shadow: none;
+}

emhttp/plugins/dynamix/sheets/DeviceInfo.css

@@ -1,6 +1,23 @@
-input.option{display:none;width:40px}
-select.option,#autosize{display:none}
-span#devtext{display:none;font-weight:bold}
-span#helptext{display:none;font-style:italic}
-span.code{display:inline-block;width:186px}
-i.fa-info.i{margin-right:10px}
+input.option {
+    display: none;
+    width: 40px;
+}
+select.option,
+#autosize {
+    display: none;
+}
+span#devtext {
+    display: none;
+    font-weight: bold;
+}
+span#helptext {
+    display: none;
+    font-style: italic;
+}
+span.code {
+    display: inline-block;
+    width: 186px;
+}
+i.fa-info.i {
+    margin-right: 10px;
+}

emhttp/plugins/dynamix/sheets/Diagnostics.css

@@ -1,9 +1,40 @@
-ul,li{margin:0;padding-top:0;padding-bottom:0}
-pre.pre{margin:30px 0}
-pre>p{margin:0;padding:0}
-pre#swaltext{height:600px!important}
-@media (max-width:960px){pre#swaltext{height:400px!important}}
-@media (max-width:960px){.sweet-alert.nchan{height:600px;width:900px;margin-left:-470px}}
-@media (max-height:768px){pre#swaltext{height:400px!important}}
-@media (max-height:768px){.sweet-alert.nchan{height:600px;width:900px;margin-left:-470px}}
-
+ul,
+li {
+    margin: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+pre.pre {
+    margin: 30px 0;
+}
+pre > p {
+    margin: 0;
+    padding: 0;
+}
+pre#swaltext {
+    height: 600px !important;
+}
+@media (max-width: 960px) {
+    pre#swaltext {
+        height: 400px !important;
+    }
+}
+@media (max-width: 960px) {
+    .sweet-alert.nchan {
+        height: 600px;
+        width: 900px;
+        margin-left: -470px;
+    }
+}
+@media (max-height: 768px) {
+    pre#swaltext {
+        height: 400px !important;
+    }
+}
+@media (max-height: 768px) {
+    .sweet-alert.nchan {
+        height: 600px;
+        width: 900px;
+        margin-left: -470px;
+    }
+}

emhttp/plugins/dynamix/sheets/Disk-azure.css

@@ -1,2 +0,0 @@
-span.wrap{display:inline-block;width:150px}
-select.clone{min-width:145px;margin-right:0}

emhttp/plugins/dynamix/sheets/Disk-black.css

@@ -1,2 +0,0 @@
-span.wrap{display:inline-block;width:128px}
-select.clone{min-width:123px;margin-right:0}

emhttp/plugins/dynamix/sheets/Disk-gray.css

@@ -1,2 +0,0 @@
-span.wrap{display:inline-block;width:150px}
-select.clone{min-width:145px;margin-right:0}

emhttp/plugins/dynamix/sheets/Disk-white.css

@@ -1,2 +0,0 @@
-span.wrap{display:inline-block;width:128px}
-select.clone{min-width:123px;margin-right:0}

emhttp/plugins/dynamix/sheets/Disk.css

@@ -1,4 +1,36 @@
-div.clone1{position:absolute;right:0;margin-top:0}
-div.clone2{position:absolute;right:0;margin-top:48px}
-input.clone{margin-left:8px;margin-right:0}
-span.clone,i.clone{margin-right:4px}
+div.clone1 {
+    position: absolute;
+    right: 0;
+    margin-top: 0;
+}
+div.clone2 {
+    position: absolute;
+    right: 0;
+    margin-top: 48px;
+}
+input.clone {
+    margin-left: 8px;
+    margin-right: 0;
+}
+span.clone,
+i.clone {
+    margin-right: 4px;
+}
+
+span.wrap {
+    display: inline-block;
+    width: 128px;
+}
+select.clone {
+    min-width: 123px;
+    margin-right: 0;
+}
+
+.Theme--sidebar {
+    span.wrap {
+        width: 150px;
+    }
+    select.clone {
+        min-width: 145px;
+    }
+}

emhttp/plugins/dynamix/sheets/DiskList.css

@@ -1 +1,4 @@
-td.empty{text-align:center;padding-top:12px}
+td.empty {
+    text-align: center;
+    padding-top: 12px;
+}

emhttp/plugins/dynamix/sheets/DiskSettings.css

@@ -1 +1,4 @@
-span.code{display:inline-block;width:186px}
+span.code {
+    display: inline-block;
+    width: 186px;
+}

emhttp/plugins/dynamix/sheets/DisplaySettings.css

@@ -1,3 +1,11 @@
-span#dropbox{margin-right:20px;}
-i.top{position:relative;padding-left:4px;cursor:pointer;}
-select.fixed{max-width:166px}
+span#dropbox {
+    margin-right: 20px;
+}
+i.top {
+    position: relative;
+    padding-left: 4px;
+    cursor: pointer;
+}
+select.fixed {
+    max-width: 166px;
+}