Home Explore Help
Sign In
TC
/
Zoraxy
mirror of https://git.hkwtc.org/TC/ReverseProxy
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

Completed dark theme mode

Toby Chui 3 months ago
parent
a904438f5e
commit
a2f70133f5
8 changed files with 47 additions and 5 deletions
Unified View Show Diff Stats
  1. 26 1
      web/darktheme.css
  2. 4 0
      web/tools/fs.css
  3. 6 3
      web/tools/fs.html
  4. 2 0
      web/tools/https.html
  5. 2 0
      web/tools/ipscan.html
  6. 3 1
      web/tools/mdns.html
  7. 2 0
      web/tools/portscan.html
  8. 2 0
      web/tools/sshconn.html

+ 26 - 1
web/darktheme.css
View File 

@@ -31,7 +31,7 @@ body:not(.darkTheme){
 
 }

 }

 

 

 body.darkTheme{

 body.darkTheme{

-    --theme_bg: #000000;

+    --theme_bg: #0a090e;

     --theme_bg_primary: #060912;

     --theme_bg_primary: #060912;

     --theme_bg_secondary:#172a41;

     --theme_bg_secondary:#172a41;

     --theme_highlight: #4380b0;

     --theme_highlight: #4380b0;

@@ -271,6 +271,17 @@ body.darkTheme .ui.pointing.secondary.menu .item.narrowpadding {
 
     color: var(--text_color) !important;

     color: var(--text_color) !important;

 }

 }

 

 

+/* Checkbox check after color override */

+body.darkTheme .ui.checkbox input:checked ~ .box::after,

+body.darkTheme .ui.checkbox input:checked ~ label::after {

+    color: var(--text_color_secondary) !important;

+}

+

+body.darkTheme .ui.toggle.checkbox input:focus:checked ~ .box,

+body.darkTheme .ui.toggle.checkbox input:focus:checked ~ label {

+    color: var(--text_color_secondary) !important;

+}

+

 body.darkTheme .ui.segment:not(.basic):not(.tab) {

 body.darkTheme .ui.segment:not(.basic):not(.tab) {

     background-color: var(--theme_bg) !important;

     background-color: var(--theme_bg) !important;

     color: var(--text_color) !important;

     color: var(--text_color) !important;

@@ -1100,4 +1111,18 @@ body.darkTheme .statistic .value.totalViewCount {
 
 

 

 body.darkTheme .statistic .label {

 body.darkTheme .statistic .label {

     color: var(--text_color_secondary) !important;

     color: var(--text_color_secondary) !important;

+}

+

+/* Other Tables */

+

+body.darkTheme .ui.celled.compact.table {

+    background-color: var(--theme_bg) !important;

+    color: var(--text_color) !important;

+    border-color: var(--divider_color) !important;

+}

+

+body.darkTheme .ui.celled.compact.table thead th {

+    background-color: var(--theme_bg_secondary) !important;

+    color: var(--text_color) !important;

+    border-color: var(--divider_color) !important;

 }
 
 }

+ 4 - 0
web/tools/fs.css
View File 

@@ -1252,6 +1252,10 @@ code{
 
     color: var(--um_file_txt) !important;

     color: var(--um_file_txt) !important;

 }

 }

 

 

+.darkTheme .filename{

+    color:var(--text_color) !important;

+}

+

 

 

 /*

 /*

     Hot Search Related

     Hot Search Related

+ 6 - 3
web/tools/fs.html
View File 

@@ -32,6 +32,8 @@
 
         </style>

         </style>

     </head>

     </head>

     <body class="whiteTheme">

     <body class="whiteTheme">

+        <link rel="stylesheet" href="../darktheme.css">

+        <script src="../script/darktheme.js"></script>

         <div id="navibar" class="navibar">

         <div id="navibar" class="navibar">

             <!-- File Opr Group-->

             <!-- File Opr Group-->

             <button class="fileOprBtn" title="Open" onclick="openViaButton(event);"><img class="opricon" src="img/opr/open.svg"><p class="oprtxt" locale="fileopr/Open">Open</p></button>

             <button class="fileOprBtn" title="Open" onclick="openViaButton(event);"><img class="opricon" src="img/opr/open.svg"><p class="oprtxt" locale="fileopr/Open">Open</p></button>

@@ -60,7 +62,7 @@
 
                 <div id="pathDisplayField" class="ui breadcrumb addressText pathDisplay desktopOnly" >

                 <div id="pathDisplayField" class="ui breadcrumb addressText pathDisplay desktopOnly" >

                   

                   

                 </div>

                 </div>

-                <button id="togglePropertiesViewBtn" style="margin-left: 0.4em;" class="ui icon tiny button videmode propbar" title="Show Properties" onclick="togglePropertiesView(this);"><i class="columns icon"></i></button>

+                <button id="togglePropertiesViewBtn" style="margin-left: 0.4em; " class="ui icon tiny button videmode propbar" title="Show Properties" onclick="togglePropertiesView(this);"><i class="columns icon"></i></button>

             </div>

             </div>

             

             

             <div class="msgbox" style="z-index:999; display:none; padding-bottom: 1em;">

             <div class="msgbox" style="z-index:999; display:none; padding-bottom: 1em;">

@@ -79,7 +81,7 @@
 
                 </div>

                 </div>

                 <br>

                 <br>

             </div>

             </div>

-            <div id="propertiesView" class="small">

+            <div id="propertiesView" class="small" style="height: 100%;">

                 <h3 class="ui header" style="margin-top: 0.4em;">

                 <h3 class="ui header" style="margin-top: 0.4em;">

                     <span class="filename" style="word-break: break-all;" locale="sidebar/default/nofileselected">No File Selected</span>

                     <span class="filename" style="word-break: break-all;" locale="sidebar/default/nofileselected">No File Selected</span>

                     <div class="sub header vpath"  style="word-break: break-all;" locale="sidebar/default/instruction">Select a file to view file properties</div>

                     <div class="sub header vpath"  style="word-break: break-all;" locale="sidebar/default/instruction">Select a file to view file properties</div>

@@ -471,11 +473,12 @@
 
                                         </span>

                                         </span>

                                     </div>`);

                                     </div>`);

                                 }else{

                                 }else{

+                                    let isDarkTheme = $("body").hasClass("darkTheme");

                                     let extension = "." + filename.split(".").pop();

                                     let extension = "." + filename.split(".").pop();

                                     let fileIcon = getFileIcon(extension);

                                     let fileIcon = getFileIcon(extension);

                                     $("#fileList").append(`<div class="fileObject item" draggable="true" filename="${filename}" filepath="${path + filename}" ondblclick="openthis(this,event);" type="file">

                                     $("#fileList").append(`<div class="fileObject item" draggable="true" filename="${filename}" filepath="${path + filename}" ondblclick="openthis(this,event);" type="file">

                                         <span style="display:inline-block !important;word-break: break-all; width:100%;" class="normal object">

                                         <span style="display:inline-block !important;word-break: break-all; width:100%;" class="normal object">

-                                            <i class="${fileIcon} icon" style="margin-right:12px; color:grey;"></i>  <span class="filename">${filename} (${humanFileSize(filesize)})</span> 

+                                            <i class="${fileIcon} icon" style="margin-right:12px; color:${isDarkTheme?'white':'grey'} !important;"></i>  <span class="filename">${filename} (${humanFileSize(filesize)})</span> 

                                         </span>

                                         </span>

                                     </div>`);

                                     </div>`);

                                 }

                                 }

+ 2 - 0
web/tools/https.html
View File 

@@ -17,6 +17,8 @@
 
         <link rel="stylesheet" href="../main.css">

         <link rel="stylesheet" href="../main.css">

     </head>

     </head>

     <body>

     <body>

+      <link rel="stylesheet" href="../darktheme.css">

+      <script src="../script/darktheme.js"></script>

         <br>

         <br>

         <div class="ui container">

         <div class="ui container">

             <div class="ui yellow message">

             <div class="ui yellow message">

+ 2 - 0
web/tools/ipscan.html
View File 

@@ -21,6 +21,8 @@
 
         </style>

         </style>

     </head>

     </head>

     <body>

     <body>

+        <link rel="stylesheet" href="../darktheme.css">

+        <script src="../script/darktheme.js"></script>

         <div class="ui container">

         <div class="ui container">

             <br>

             <br>

             <div class="ui segment">

             <div class="ui segment">

+ 3 - 1
web/tools/mdns.html
View File 

@@ -22,8 +22,10 @@
 
         </style>

         </style>

     </head>

     </head>

     <body>

     <body>

+        <link rel="stylesheet" href="../darktheme.css">

+        <script src="../script/darktheme.js"></script>

         <div id="mdns-hosts">

         <div id="mdns-hosts">

-

+            <span><i class="ui loading spinner icon"></i> Loading</span>

         </div>

         </div>

         <br>

         <br>

         <div class="ui container">

         <div class="ui container">

+ 2 - 0
web/tools/portscan.html
View File 

@@ -18,6 +18,8 @@
 
     </head>

     </head>

 </head>

 </head>

 <body>

 <body>

+    <link rel="stylesheet" href="../darktheme.css">

+    <script src="../script/darktheme.js"></script>

     <div class="ui container">

     <div class="ui container">

         <br>

         <br>

             <div class="ui segment">

             <div class="ui segment">

+ 2 - 0
web/tools/sshconn.html
View File 

@@ -33,6 +33,8 @@
 
         </style>

         </style>

     </head>

     </head>

     <body>

     <body>

+        <link rel="stylesheet" href="../darktheme.css">

+        <script src="../script/darktheme.js"></script>

         <div id="loadingUI">

         <div id="loadingUI">

             <div style="margin-top: 2em; margin-left: 2em; color: white;">

             <div style="margin-top: 2em; margin-left: 2em; color: white;">

                 <i class="ui loading spinner icon"></i> <b>Creating virtual terminal session</b><br>

                 <i class="ui loading spinner icon"></i> <b>Creating virtual terminal session</b><br>