Added more dark themes

- Added wrappers for snippet dark theme - Optimized color pallets
2025-08-06 21:28:30 +02:00 · 2024-11-17 17:41:22 +08:00
parent 1c79fa4e96
commit e4facbc7b6
20 changed files with 524 additions and 112 deletions
--- a/src/web/snippet/accessRuleEditor.html
+++ b/src/web/snippet/accessRuleEditor.html
@@ -14,69 +14,72 @@
            top: 0.4em;
            right: 1em;
        }
+
      </style>
  </head>
  <body>
-  <br>
-  <div class="ui container">
-    <div class="ui header">
-        <div class="content">
-            Access Rule Editor
-            <div class="sub header">Create, Edit or Remove Access Rules</div>
-        </div>
-    </div>
-    <div class="ui divider"></div>
-    <div class="ui top attached tabular menu">
-        <a class="active item" data-tab="new"><i class="ui green add icon"></i> New</a>
-        <a class="item" data-tab="edit"><i class="ui grey edit icon"></i> Edit</a>
-    </div>
-    <div class="ui bottom attached active tab segment" data-tab="new">
-        <p>Create a new Access Rule</p>
-        <form class="ui form" id="accessRuleForm">
-            <div class="field">
-                <label>Rule Name</label>
-                <input type="text" name="accessRuleName" placeholder="Rule Name" required>
-            </div>
-            <div class="field">
-                <label>Description</label>
-                <textarea name="description" placeholder="Description" required></textarea>
-            </div>
-            <button class="ui basic button" type="submit"><i class="ui green add icon"></i> Create</button>
-        </form>
+    <link rel="stylesheet" href="../darktheme.css">
+    <script src="../script/darktheme.js"></script>
    <br>
-    </div>
-    <div class="ui bottom attached tab segment" data-tab="edit">
-        <p>Select an Access Rule to edit</p>
-        <button id="refreshAccessRuleListBtn" class="ui circular basic icon button" onclick="reloadAccessRuleList()"><i class="ui green refresh icon"></i></button>
-        <div class="ui selection fluid dropdown" id="accessRuleSelector">
-            <input type="hidden" name="targetAccessRule" value="default">
-            <i class="dropdown icon"></i>
-            <div class="default text"></div>
-            <div class="menu" id="accessRuleList">
-                <div class="item" data-value="default"><i class="ui yellow star icon"></i> Default</div>
+    <div class="ui container">
+        <div class="ui header">
+            <div class="content">
+                Access Rule Editor
+                <div class="sub header">Create, Edit or Remove Access Rules</div>
            </div>
        </div>
+        <div class="ui divider"></div>
+        <div class="ui top attached tabular menu">
+            <a class="active item" data-tab="new"><i class="ui green add icon"></i> New</a>
+            <a class="item" data-tab="edit"><i class="ui grey edit icon"></i> Edit</a>
+        </div>
+        <div class="ui bottom attached active tab segment" data-tab="new">
+            <p>Create a new Access Rule</p>
+            <form class="ui form" id="accessRuleForm">
+                <div class="field">
+                    <label>Rule Name</label>
+                    <input type="text" name="accessRuleName" placeholder="Rule Name" required>
+                </div>
+                <div class="field">
+                    <label>Description</label>
+                    <textarea name="description" placeholder="Description" required></textarea>
+                </div>
+                <button class="ui basic button" type="submit"><i class="ui green add icon"></i> Create</button>
+            </form>
+        <br>
+        </div>
+        <div class="ui bottom attached tab segment" data-tab="edit">
+            <p>Select an Access Rule to edit</p>
+            <button id="refreshAccessRuleListBtn" class="ui circular basic icon button" onclick="reloadAccessRuleList()"><i class="ui green refresh icon"></i></button>
+            <div class="ui selection fluid dropdown" id="accessRuleSelector">
+                <input type="hidden" name="targetAccessRule" value="default">
+                <i class="dropdown icon"></i>
+                <div class="default text"></div>
+                <div class="menu" id="accessRuleList">
+                    <div class="item" data-value="default"><i class="ui yellow star icon"></i> Default</div>
+                </div>
+            </div>
+            <br>
+            <form class="ui form" id="modifyRuleInfo">
+                <div class="disabled field">
+                    <label>Rule ID</label>
+                    <input type="text" name="accessRuleUUID">
+                </div>
+                <div class="field">
+                    <label>Rule Name</label>
+                    <input type="text" name="accessRuleName" placeholder="Rule Name" required>
+                </div>
+                <div class="field">
+                    <label>Description</label>
+                    <textarea name="description" placeholder="Description" required></textarea>
+                </div>
+                <button class="ui basic button" type="submit"><i class="ui green save icon"></i> Save Changes</button>
+                <button class="ui basic button" onclick="removeAccessRule(event);"><i class="ui red trash icon"></i> Remove Rule</button>
+            </form>
+        </div>
        <br>
-        <form class="ui form" id="modifyRuleInfo">
-            <div class="disabled field">
-                <label>Rule ID</label>
-                <input type="text" name="accessRuleUUID">
-            </div>
-            <div class="field">
-                <label>Rule Name</label>
-                <input type="text" name="accessRuleName" placeholder="Rule Name" required>
-            </div>
-            <div class="field">
-                <label>Description</label>
-                <textarea name="description" placeholder="Description" required></textarea>
-            </div>
-            <button class="ui basic button" type="submit"><i class="ui green save icon"></i> Save Changes</button>
-            <button class="ui basic button" onclick="removeAccessRule(event);"><i class="ui red trash icon"></i> Remove Rule</button>
-        </form>
-    </div>
-    <br>
-    <button class="ui basic button"  style="float: right;" onclick="parent.hideSideWrapper();"><i class="remove icon"></i> Close</button>
-    <br><br><br>
+        <button class="ui basic button"  style="float: right;" onclick="parent.hideSideWrapper();"><i class="remove icon"></i> Close</button>
+        <br><br><br>
  </div>

  <script>
--- a/src/web/snippet/acme.html
+++ b/src/web/snippet/acme.html
@@ -25,6 +25,8 @@
      </style>
  </head>
  <body>
+    <link rel="stylesheet" href="../darktheme.css">
+    <script src="../script/darktheme.js"></script>
  <br>
  <div class="ui container">
    <div class="ui header">
--- a/src/web/snippet/advanceStatsOprs.html
+++ b/src/web/snippet/advanceStatsOprs.html
@@ -10,6 +10,8 @@
        <script src="../script/utils.js"></script>
    </head>
    <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
        <br>
        <div class="ui container">
            <div class="ui header">
--- a/src/web/snippet/aliasEditor.html
+++ b/src/web/snippet/aliasEditor.html
@@ -10,6 +10,8 @@
        <script src="../script/utils.js"></script>
    </head>
    <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
        <br>
        <div class="ui container">
            <div class="ui header">
--- a/src/web/snippet/basicAuthEditor.html
+++ b/src/web/snippet/basicAuthEditor.html
@@ -10,6 +10,8 @@
        <script src="../script/utils.js"></script>
    </head>
    <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
        <br>
        <div class="ui container">
            <div class="ui header">
--- a/src/web/snippet/configTools.html
+++ b/src/web/snippet/configTools.html
@@ -10,6 +10,8 @@
        <script src="../script/utils.js"></script>
    </head>
    <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
        <br>
        <div class="ui container">
            <div class="ui header">
--- a/src/web/snippet/customHeaders.html
+++ b/src/web/snippet/customHeaders.html
@@ -23,9 +23,15 @@
            #permissionPolicyEditor .experimental{
                background-color: rgb(241, 241, 241);
            }
+
+            body.darkTheme #permissionPolicyEditor .experimental{
+                background-color: rgb(41, 41, 41);
+            }
        </style>
    </head>
    <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
        <br>
        <div class="ui container">
            <div class="ui header">
--- a/src/web/snippet/dockerContainersList.html
+++ b/src/web/snippet/dockerContainersList.html
@@ -8,6 +8,8 @@
    <script src="../script/semantic/semantic.min.js"></script>
  </head>
  <body>
+    <link rel="stylesheet" href="../darktheme.css">
+    <script src="../script/darktheme.js"></script>
    <br />
    <div class="ui container">
      <div class="field">
--- a/src/web/snippet/hostAccessEditor.html
+++ b/src/web/snippet/hostAccessEditor.html
@@ -41,9 +41,28 @@
                min-height: 300px;
                overflow-y: auto;
            }
+
+            body.darkTheme #accessRuleList{
+                border: 1px solid rgb(50, 50, 50) !important;
+
+            }
+
+            body.darkTheme .ui.segment.accessRule {
+                border: 1px solid var(--theme_bg_secondary) !important;
+            }
+
+            body.darkTheme .ui.segment.accessRule:hover {
+                background-color: var(--theme_bg_secondary) !important;
+            }
+
+            body.darkTheme .ui.segment.accessRule.active {
+                background-color: var(--theme_bg_secondary) !important;
+            }
        </style>
    </head>
    <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
        <br>
        <div class="ui container">
            <div class="ui header">
--- a/src/web/snippet/intermediateCertConv.html
+++ b/src/web/snippet/intermediateCertConv.html
@@ -8,6 +8,8 @@
        <script src="../script/semantic/semantic.min.js"></script>
    </head>
    <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
        <br>
        <div class="ui container">
            <div class="ui header">
--- a/src/web/snippet/logview.html
+++ b/src/web/snippet/logview.html
@@ -55,10 +55,64 @@
            background:#3643bb; 
            color:white; 
        }
+
+        body.darkTheme .loglist {
+            background-color: #1b1c1d;
+            color: #ffffff;
+        }
+
+        body.darkTheme .loglist .ui.header .content .sub.header {
+            color: #bbbbbb;
+        }
+
+        body.darkTheme .loglist .ui.divider {
+            border-color: #333333;
+        }
+
+        body.darkTheme .loglist .ui.accordion .title,
+        body.darkTheme .loglist .ui.accordion .content {
+            background-color: #1b1c1d;
+            color: #ffffff;
+        }
+
+        body.darkTheme .loglist .ui.accordion .title:hover {
+            background-color: #333333;
+        }
+
+        body.darkTheme .loglist .ui.list .item {
+            color: #ffffff;
+        }
+
+        body.darkTheme .loglist .ui.list .item .content {
+            color: #ffffff;
+        }
+
+        body.darkTheme .loglist .ui.list .item .showing {
+            color: #ffffff;
+        }
+
+        body.darkTheme .loglist .ui.button.filterbtn {
+            background-color: #333333;
+            color: #ffffff;
+        }
+
+        body.darkTheme .loglist .ui.button.filterbtn:hover {
+            background-color: #555555;
+        }
+
+        body.darkTheme .loglist .ui.toggle.checkbox label {
+            color: #ffffff;
+        }
+
+        body.darkTheme .loglist small {
+            color: #bbbbbb;
+        }
    </style>
 </head>

 <body>
+    <link rel="stylesheet" href="../darktheme.css">
+    <script src="../script/darktheme.js"></script>
    <br>
    <div class="ui container">
        <div class="ui stackable grid">
--- a/src/web/snippet/placeholder.html
+++ b/src/web/snippet/placeholder.html
@@ -15,6 +15,8 @@
        </style>
    </head>
    <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
        <div class="ui active inverted dimmer">
            <div class="ui text loader">Loading Snippet</div>
        </div>
--- a/src/web/snippet/sso_app.html
+++ b/src/web/snippet/sso_app.html
@@ -15,6 +15,8 @@
        </style>
    </head>
    <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
        <br>
        <div class="ui container">
            <div class="ui basic segment">
--- a/src/web/snippet/sso_user.html
+++ b/src/web/snippet/sso_user.html
@@ -15,6 +15,8 @@
        </style>
    </head>
    <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
        <br>
        <div class="ui container">
            <div class="ui basic segment">
--- a/src/web/snippet/upstreams.html
+++ b/src/web/snippet/upstreams.html
@@ -56,6 +56,8 @@
        </style>
    </head>
    <body>
+        <link rel="stylesheet" href="../darktheme.css">
+        <script src="../script/darktheme.js"></script>
        <br>
        <div class="ui container">
            <div class="ui header">