feat: CSS3 variables & improved CSS dev experience

.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 @@ function cpu_pinning() {
 <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.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.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);
+}