Merge pull request #380 from EspadaV8/add-dark-support

Add dark theme support to File Size Metrics plugin
Unmanic · Jan 16, 2024 · ac525a7 · ac525a7
2 parents a7c5eb0 + c2e9a7c
commit ac525a7
Show file tree

Hide file tree

Showing 4 changed files with 199 additions and 161 deletions.
diff --git a/source/file_size_metrics/changelog.md b/source/file_size_metrics/changelog.md
@@ -1,3 +1,6 @@
+**<span style="color:#56adda">0.0.10</span>**
+- Initial version of dark mode support
+
 **<span style="color:#56adda">0.0.9</span>**
 - Update DataTables plugin in preparation of supporting dark mode
 

diff --git a/source/file_size_metrics/info.json b/source/file_size_metrics/info.json
@@ -11,5 +11,5 @@
     "on_postprocessor_task_results": 0
   },
   "tags": "data panel",
-  "version": "0.0.9"
+  "version": "0.0.10"
 }
diff --git a/source/file_size_metrics/static/css/style.css b/source/file_size_metrics/static/css/style.css
@@ -0,0 +1,180 @@
+.light {
+  --q-card-head: #f5f5f5;
+  --q-card-head-hover: #e7e7e7;
+  --q-card: #ffffff;
+  --q-page: #ffffff;
+  --q-primary: #002e5c;
+  --q-secondary: #009fdd;
+  --q-text: #000000;
+  --q-warning: #f2c037;
+}
+
+.dark {
+  --q-card-head: #212121;
+  --q-card-head-hover: #383838;
+  --q-card: #181818;
+  --q-page: #121212;
+  --q-primary: #009fdd;
+  --q-secondary: #002e5c;
+  --q-text: #ffffff;
+  --q-warning: #b5902a;
+}
+
+.hidden {
+  display: none;
+}
+
+table.dataTable td {
+  word-break: break-word;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  background-color: var(--q-page);
+  color: var(--q-text);
+}
+
+/* Float four columns side by side */
+.column {
+  float: left;
+  padding: 0 10px;
+  width: 50%;
+}
+
+/* Remove extra left and right margins, due to padding */
+.row {
+  margin: 0 -5px;
+}
+
+/* Clear floats after the columns */
+.row:after {
+  clear: both;
+  content: "";
+  display: table;
+}
+
+/* Responsive columns */
+@media screen and (max-width: 600px) {
+  .column {
+    display: block;
+    margin-bottom: 20px;
+    width: 100%;
+  }
+}
+
+/*Cards*/
+.card {
+  background-color: var(--q-card);
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  text-align: center;
+}
+
+.collapsible {
+  background-color: var(--q-card-head);
+  border: none;
+  color: var(--q-primary);
+  cursor: pointer;
+  font-size: 15px;
+  height: 35px;
+  outline: none;
+  padding-left: 18px;
+  padding-right: 18px;
+  text-align: left;
+  width: 100%;
+}
+
+button.collapsible::after {
+  color: var(--q-text);
+  content: "\2212";
+  float: right;
+  font-weight: bold;
+  margin-left: 5px;
+}
+
+button.collapsible.active::after {
+  content: "\002B";
+}
+
+.active,
+.collapsible:hover {
+  background-color: var(--q-card-head-hover);
+}
+
+.content {
+  background-color: var(--q-card);
+  display: none;
+  overflow: hidden;
+  padding: 0 18px;
+}
+
+/*Back to top*/
+.top-of-page-link svg {
+  -webkit-filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
+  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
+}
+
+.top-of-page-link {
+  bottom: 0.2rem;
+  position: fixed;
+  right: 1rem;
+  transition: 0.2s;
+  z-index: 15;
+}
+
+/*Custom*/
+.car-header {
+  display: block;
+  height: 100px;
+  margin-top: 5px;
+  min-height: 40px;
+  text-align: left;
+}
+
+.view-btn {
+  background-color: var(--q-secondary);
+  border-radius: 5px;
+  border: none;
+  color: #ffffff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: "Source Sans Pro", sans-serif;
+  font-size: 17px;
+  overflow: hidden;
+  padding: 6px 18px;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.view-btn:hover {
+  background-color: var(--q-primary);
+}
+
+.top-content {
+  position: fixed;
+  width: 100%;
+  z-index: 15;
+}
+
+.charts {
+  max-height: 550px;
+}
+
+.tables {
+  padding-top: 550px;
+}
+
+/* Responsive columns */
+@media screen and (max-width: 600px) {
+  .top-content {
+    position: inherit;
+  }
+
+  .tables {
+    padding-top: 0;
+  }
+}
diff --git a/source/file_size_metrics/static/index.html b/source/file_size_metrics/static/index.html
@@ -1,172 +1,27 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="light">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>File Size Metrics | Unmanic</title>
-    <link rel="shortcut icon" href="static/favicon.ico">
-
-    <link rel="stylesheet" type="text/css"
-          href="./static/vendor/datatables.net-dt/css/jquery.dataTables.min.css?{cache_buster}">
-
-    <style>
-        .hidden {
-            display: none;
-        }
-
-        table.dataTable {
-            background-color: #ffffff;
-        }
-
-        table.dataTable td {
-            word-break: break-word;
-        }
-
-        * {
-            box-sizing: border-box;
-        }
-
-        /* Float four columns side by side */
-        .column {
-            float: left;
-            width: 50%;
-            padding: 0 10px;
-        }
-
-        /* Remove extra left and right margins, due to padding */
-        .row {
-            margin: 0 -5px;
-        }
-
-        /* Clear floats after the columns */
-        .row:after {
-            content: "";
-            display: table;
-            clear: both;
-        }
-
-        /* Responsive columns */
-        @media screen and (max-width: 600px) {
-            .column {
-                width: 100%;
-                display: block;
-                margin-bottom: 20px;
-            }
-        }
-
-        /*Cards*/
-        .card {
-            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-            /*padding: 16px;*/
-            text-align: center;
-            background-color: #ffffff;
-        }
 
-        .collapsible {
-            background-color: #777;
-            color: white;
-            cursor: pointer;
-            padding-left: 18px;
-            padding-right: 18px;
-            width: 100%;
-            border: none;
-            text-align: left;
-            outline: none;
-            font-size: 15px;
-            height: 35px;
-        }
-
-        button.collapsible::after {
-            content: "\2212";
-            color: white;
-            font-weight: bold;
-            float: right;
-            margin-left: 5px;
-
-        }
+    <script>
+      (function (window, document) {
+        const params = new URLSearchParams(window.location.search);
 
-        button.collapsible.active::after {
-            content: '\002B';
+        if (params.has("theme") && params.get("theme") === "dark") {
+          document
+            .getElementsByTagName("html")[0]
+            .classList.replace("light", "dark");
         }
+      })(window, document);
+    </script>
 
-        .active, .collapsible:hover {
-            background-color: #555;
-        }
-
-        .content {
-            padding: 0 18px;
-            display: none;
-            overflow: hidden;
-            background-color: #ffffff;
-        }
-
-        /*Back to top*/
-        .top-of-page-link svg {
-            -webkit-filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .3));
-            filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .3));
-        }
-
-        .top-of-page-link {
-            transition: .2s;
-            position: fixed;
-            bottom: 0.2rem;
-            right: 1rem;
-            z-index: 15;
-        }
-
-        /*Custom*/
-        .car-header {
-            display: block;
-            min-height: 40px;
-            height: 100px;
-            text-align: left;
-            margin-top: 5px;
-        }
-
-        .view-btn {
-            background-color: #009fdd !important;
-            border-radius: 5px;
-            font-size: 17px;
-            font-family: 'Source Sans Pro', sans-serif;
-            padding: 6px 18px;
-            color: #FFFFFF;
-            border: none;
-            display: inline-block;
-            vertical-align: middle;
-            overflow: hidden;
-            text-decoration: none;
-            text-align: center;
-            cursor: pointer;
-            white-space: nowrap;
-        }
-
-        .top-content {
-            position: fixed;
-            z-index: 15;
-            width: 100%;
-        }
-
-        .charts {
-            max-height: 550px;
-        }
-
-        .tables {
-            padding-top: 550px;
-        }
-
-        /* Responsive columns */
-        @media screen and (max-width: 600px) {
-            .top-content {
-                position: inherit;
-            }
-
-            .tables {
-                padding-top: 0;
-            }
-        }
-
-    </style>
+    <title>File Size Metrics | Unmanic</title>
+    <link rel="shortcut icon" href="static/favicon.ico">
 
+    <link rel="stylesheet" type="text/css"
+          href="./static/vendor/datatables.net-dt/css/jquery.dataTables.min.css?{cache_buster}">
+    <link rel="stylesheet" type="text/css" href="./static/css/style.css" />
 </head>
 <body id="top-of-page">