marcel/zoraxy
1
0
Fork 0
mirror of https://github.com/tobychui/zoraxy.git synced 2025-06-06 23:57:21 +02:00
Code Issues Packages Projects Releases Wiki Activity

Completed dark theme

Browse Source
This commit is contained in:
Toby Chui 2024-11-18 21:04:25 +08:00
parent e4facbc7b6
commit 293a527ffc
8 changed files with 47 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/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;
@ -1101,3 +1112,17 @@ 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
src/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

9
src/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
src/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
src/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">

4
src/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
src/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
src/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>