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

Fixed #591

Browse Source 
- Updated dark theme color pallets
- Added automatic background change on login page
This commit is contained in:
Toby Chui 2025-03-20 21:51:47 +08:00
parent dac3e8c925
commit eb24bc0391
5 changed files with 88 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/web/components/status.html
View File

@ -81,7 +81,7 @@
<div class="ui action fluid notloopbackOnly input" tourstep="incomingPort">
<small id="applyButtonReminder">Click "Apply" button to confirm listening port changes</small>
<input type="text" id="incomingPort" placeholder="Incoming Port" value="443">
<button class="ui green notloopbackOnly button" style="background: linear-gradient(60deg, #27e7ff, #00ca52);" onclick="handlePortChange();"><i class="ui checkmark icon"></i> Apply</button>
<button class="ui green notloopbackOnly button" style="background: var(--theme_green);" onclick="handlePortChange();"><i class="ui checkmark icon"></i> Apply</button>
</div>
<br>
<div id="tls" class="ui toggle notloopbackOnly checkbox">

57
src/web/darktheme.css
View File

@ -18,6 +18,7 @@ body:not(.darkTheme){
--item_color: #5e5d5d;
--item_color_select: rgba(0,0,0,.87);
--text_color: #414141;
--text_color_secondary: #4b4b4b;
--input_color: white;
--divider_color: #cacaca;
--text_color_inverted: #fcfcfc;
@ -25,25 +26,26 @@ body:not(.darkTheme){
--button_border_color: #dedede;
--buttom_toggle_active: #01dc64;
--buttom_toggle_disabled: #f2f2f2;
--table_header_color: transparent;
--table_bg_default: transparent;
--status_dot_bg: #e8e8e8;
--theme_background: linear-gradient(60deg, rgb(84, 58, 183) 0%, rgb(0, 172, 193) 100%);
--theme_background_inverted: linear-gradient(215deg, rgba(38,60,71,1) 13%, rgba(2,3,42,1) 84%);
--theme_green: linear-gradient(270deg, #27e7ff, #00ca52);
--theme_background_inverted: linear-gradient(45deg, rgba(18,19,23,1) 21%, rgba(50,59,66,1) 79%);
--theme_green: linear-gradient(45deg, rgba(153,229,162,1) 21%, rgba(212,252,120,1) 79%);
--theme_red: linear-gradient(203deg, rgba(250,172,38,1) 17%, rgba(202,0,37,1) 78%);
}
body.darkTheme{
--theme_bg: #1e1e1e;
--theme_bg_primary: #151517;
--theme_bg_secondary:#1b3572;
--theme_bg_primary: #161617;
--theme_bg_secondary:#528eec;
--theme_highlight: #6a7792;
--theme_bg_active: #020101;
--theme_bg_inverted: #f8f8f9;
--theme_advance: #000000;
--item_color: #cacaca;
--text_color: #dee1e4;
--text_color: #f5f5f7;
--text_color_secondary: #b5c0c7;
--input_color: black;
--divider_color: #282828;
@ -53,12 +55,13 @@ body.darkTheme{
--button_border_color: #646464;
--buttom_toggle_active: #01dc64;
--buttom_toggle_disabled: #2b2b2b;
--table_header_color: #323b42;
--table_bg_default: #121214;
--status_dot_bg: #232323;
--theme_background: linear-gradient(23deg, rgba(2,74,106,1) 17%, rgba(46,12,136,1) 86%);
--theme_background_inverted: linear-gradient(215deg, rgba(38,60,71,1) 13%, rgba(2,3,42,1) 84%);
--theme_green: linear-gradient(214deg, rgba(25,128,94,1) 17%, rgba(62,76,111,1) 78%);
--theme_background: linear-gradient(45deg, rgba(85,131,238,1) 21%, rgba(65,216,221,1) 79%);
--theme_background_inverted:linear-gradient(45deg, rgba(18,19,23,1) 21%, rgba(50,59,66,1) 79%);
--theme_green: linear-gradient(45deg, rgba(65,199,175,1) 21%, rgba(84,227,142,1) 79%);
--theme_red: linear-gradient(203deg, rgba(250,172,38,1) 17%, rgba(202,0,37,1) 78%);
}
@ -85,7 +88,7 @@ body.darkTheme .ui.header {
body.darkTheme p,
body.darkTheme span{
color: var(--text_color_secondary);
color: var(--text_color);
}
body.darkTheme .ui.secondary.menu .dropdown.item:hover,
@ -303,6 +306,12 @@ body.darkTheme .ui.segment:not(.basic):not(.tab) {
border: 1px solid transparent !important;
}
body.darkTheme .ui.segment.advanceoptions {
background-color: var(--theme_bg) !important;
color: var(--text_color) !important;
border: 1px solid var(--divider_color) !important;
}
body.darkTheme .ui.segment{
background-color: transparent !important;
color: var(--text_color) !important;
@ -343,7 +352,8 @@ body.darkTheme .ui.form .field .ui.checkbox input:checked ~ label {
}
body.darkTheme .ui.basic.label {
background-color: var(--theme_bg_secondary) !important;
/* background-color: var(--theme_bg_secondary) !important; */
background-color: var(--theme_highlight) !important;
color: var(--text_color) !important;
}
@ -465,7 +475,7 @@ body.darkTheme .ui.celled.sortable.unstackable.compact.table tfoot td {
}
body.darkTheme .ui.celled.sortable.unstackable.compact.table thead th {
background-color: var(--theme_bg_secondary) !important;
background-color: var(--table_header_color) !important;
}
body.darkTheme .ui.celled.sortable.unstackable.compact.table tbody tr:hover {
@ -688,7 +698,7 @@ body.darkTheme #proxyTable {
}
body.darkTheme #proxyTable thead th {
background-color: var(--theme_bg_secondary) !important;
background-color: var(--table_header_color) !important;
color: var(--text_color) !important;
border-color: var(--divider_color) !important;
}
@ -735,7 +745,7 @@ body.darkTheme #proxyTable tbody td .ui.circular.red.basic.mini.icon.button:hove
*/
body.darkTheme #redirectset .ui.sortable.unstackable.celled.table thead th {
background-color: var(--theme_bg_secondary) !important;
background-color: var(--table_header_color) !important;
color: var(--text_color) !important;
border-color: var(--divider_color) !important;
}
@ -854,7 +864,7 @@ body.darkTheme #access .ui.unstackable.basic.celled.table{
}
body.darkTheme #access .ui.unstackable.basic.celled.table thead th {
background-color: var(--theme_bg_secondary) !important;
background-color: var(--table_header_color) !important;
color: var(--text_color) !important;
border-color: var(--divider_color) !important;
}
@ -908,7 +918,7 @@ body.darkTheme #ipTable {
}
body.darkTheme #ipTable thead th {
background-color: var(--theme_bg_secondary) !important;
background-color: var(--table_header_color) !important;
color: var(--text_color) !important;
border-color: var(--divider_color) !important;
}
@ -993,7 +1003,7 @@ body.darkTheme #gan .clickable.iprange.active {
}
body.darkTheme #gan thead th {
background-color: var(--theme_bg_secondary) !important;
background-color: var(--table_header_color) !important;
color: var(--text_color) !important;
border-color: var(--divider_color) !important;
}
@ -1037,7 +1047,7 @@ body.darkTheme .ui.utmloading.segment .ui.inverted.dimmer .ui.text.loader {
*/
body.darkTheme .ui.celled.unstackable.table:not(.basic) th{
background-color: var(--theme_bg_secondary) !important;
background-color: var(--table_header_color) !important;
color: var(--text_color) !important;
border-color: var(--divider_color) !important;
}
@ -1149,7 +1159,7 @@ body.darkTheme .ui.celled.compact.table {
}
body.darkTheme .ui.celled.compact.table thead th {
background-color: var(--theme_bg_secondary) !important;
background-color: var(--table_header_color) !important;
color: var(--text_color) !important;
border-color: var(--divider_color) !important;
}
@ -1158,3 +1168,14 @@ body.darkTheme .ui.list .list > .item .header, .ui.list > .item .header,
body.darkTheme .ui.list .list > .item .description, .ui.list > .item .description {
color: var(--text_color) !important;
}
/* Others (not categorized) */
body.darkTheme .ui.horizontal.divider {
color: var(--text_color_secondary) !important;
}
body.darkTheme .ui.checkbox input:checked ~ .box::after,
body.darkTheme .ui.checkbox input:checked ~ label::after {
color: var(--text_color_inverted) !important;
}

37
src/web/login.html
View File

@ -14,7 +14,28 @@
<script type="application/javascript" src="script/semantic/semantic.min.js"></script>
<style>
body {
background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
background: rgb(231, 231, 231);
}
/* Time based background */
body.morning{
background: rgb(171,199,255);
background: linear-gradient(48deg, rgba(171,199,255,1) 21%, rgba(193,227,255,1) 79%);
}
body.afternoon{
background: rgb(108,172,255);
background: linear-gradient(21deg, rgba(108,172,255,1) 21%, rgba(141,235,255,1) 79%);
}
body.evening{
background: rgb(247,143,173);
background: linear-gradient(21deg, rgba(247,143,173,1) 21%, rgba(253,235,130,1) 79%);
}
body.night{
background: rgb(18,19,23);
background: linear-gradient(48deg, rgba(18,19,23,1) 21%, rgba(50,59,66,1) 79%);
}
#errmsg{
@ -119,6 +140,20 @@
</style>
</head>
<body>
<script>
$(document).ready(function() {
var currentHour = new Date().getHours();
if (currentHour >= 5 && currentHour < 12) {
$("body").addClass("morning");
} else if (currentHour >= 12 && currentHour < 17) {
$("body").addClass("afternoon");
} else if (currentHour >= 17 && currentHour < 20) {
$("body").addClass("evening");
} else {
$("body").addClass("night");
}
});
</script>
<div id="loginForm" class="ui middle aligned center aligned grid" data-aos="fade-up">
<div class="column" style="padding-top: 0 !important;">
<form class="ui large form content">

15
src/web/main.css
View File

@ -45,6 +45,11 @@ body{
z-index: 10;
}
body.darkTheme .menubar{
background: rgb(18,19,23);
background: linear-gradient(48deg, rgba(18,19,23,1) 21%, rgba(50,59,66,1) 79%);
}
.menubar .logo{
height: 36px;
}
@ -360,7 +365,7 @@ body{
}
#serverstatus.green{
background: linear-gradient(60deg, #27e7ff, #00ca52);
background: var(--theme_green);
}
#serverstatus.green .sub.header{
color: rgb(224, 224, 224);
@ -379,7 +384,7 @@ body{
}
#serverstatus:not(.green){
background: linear-gradient(215deg, rgba(38,60,71,1) 13%, rgba(2,3,42,1) 84%);
background: var(--theme_background_inverted);
}
#serverstatus:not(.green) #statusTitle,
@ -433,7 +438,7 @@ body{
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #d9d9d9;
background-color: #ffffff;
margin-right: 6px;
animation-name: dot-animation;
animation-duration: 4s;
@ -459,7 +464,7 @@ body{
@keyframes dot-animation {
0% {
background-color: #d9d9d9;
background-color: #ffffff;
transform: scale(1);
}
50% {
@ -467,7 +472,7 @@ body{
transform: scale(1.5);
}
100% {
background-color: #d9d9d9;
background-color: #ffffff;
transform: scale(1);
}
}

4
src/web/snippet/upstreams.html
View File

@ -132,7 +132,7 @@
<label>Skip WebSocket Origin Check<br>
<small>Check this to allow cross-origin websocket requests</small></label>
</div>
<div class="ui advanceUpstreamOptions accordion" style="margin-top:0.6em;">
<div class="ui advanceUpstreamOptions advanceoptions accordion" style="margin-top:0.6em;">
<div class="title">
<i class="dropdown icon"></i>
Advanced Options
@ -142,7 +142,7 @@
<div class="ui mini fluid input" style="margin-top: -0.6em;">
<input type="number" min="0" id="maxConn" value="0">
</div>
<small>Set to 0 for default value (32 connections)</small>
<small>Set to 0 for automatic</small>
<br><br>
<p>Response Timeout</p>
<div class="ui mini right labeled fluid input" style="margin-top: -0.6em;">