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

Added more dark themes

Browse Source 
- Added wrappers for snippet dark theme
- Optimized color pallets
This commit is contained in:
Toby Chui 2024-11-17 17:41:22 +08:00
parent 1c79fa4e96
commit e4facbc7b6
20 changed files with 524 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/main.go
View File

@ -60,7 +60,7 @@ var enableAutoUpdate = flag.Bool("cfgupgrade", true, "Enable auto config upgrade
var (
name = "Zoraxy"
version = "3.1.3"
version = "3.1.4"
nodeUUID = "generic" //System uuid, in uuidv4 format
development = true //Set this to false to use embedded web fs
bootTime = time.Now().Unix()

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

@ -70,7 +70,7 @@
initUptimeTable();
function reloadUptimeList(){
$("#utmrender").html(`<div class="ui segment">
$("#utmrender").html(`<div class="ui utmloading segment">
<div class="ui active inverted dimmer" style="z-index: 2;">
<div class="ui text loader">Loading</div>
</div>

356
src/web/darktheme.css
View File

@ -5,6 +5,57 @@
This will override the default CSS (white theme) for semantic UI
*/
/* Color Pallete */
/* Theme Color Definition */
body:not(.darkTheme){
--theme_bg: #f6f6f6;
--theme_bg_primary: #ffffff;
--theme_bg_secondary: #ffffff;
--theme_bg_active: #ececec;
--theme_highlight: #a9d1f3;
--theme_bg_inverted: #27292d;
--theme_advance: #f7f7f7;
--item_color: #5e5d5d;
--item_color_select: rgba(0,0,0,.87);
--text_color: #414141;
--input_color: white;
--divider_color: #cacaca;
--text_color_inverted: #fcfcfc;
--button_text_color: #878787;
--button_border_color: #dedede;
--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_red: linear-gradient(203deg, rgba(250,172,38,1) 17%, rgba(202,0,37,1) 78%);
}
body.darkTheme{
--theme_bg: #000000;
--theme_bg_primary: #060912;
--theme_bg_secondary:#172a41;
--theme_highlight: #4380b0;
--theme_bg_active: #020101;
--theme_bg_inverted: #f8f8f9;
--theme_advance: #000000;
--item_color: #cacaca;
--text_color: #dee1e4;
--text_color_secondary: #b5c0c7;
--input_color: black;
--divider_color: #282828;
--item_color_select: rgba(255, 255, 255, 0.87);
--text_color_inverted: #414141;
--button_text_color: #e9e9e9;
--button_border_color: #646464;
--theme_background: linear-gradient(214deg, rgba(3,1,70,1) 17%, rgb(1, 55, 80) 78%);
--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_red: linear-gradient(203deg, rgba(250,172,38,1) 17%, rgba(202,0,37,1) 78%);
}
/* General Rules Overwrite */
body.darkTheme {
background-color: var(--theme_bg);
color: var(--text_color);
@ -128,6 +179,20 @@ body.darkTheme .ui.toggle.checkbox input ~ label:focus {
color: var(--text_color_secondary) !important;
}
body.darkTheme textarea {
background-color: var(--theme_bg_active) !important;
color: var(--text_color) !important;
border: 1px solid var(--button_border_color) !important;
}
body.darkTheme textarea::placeholder {
color: var(--text_color_secondary) !important;
opacity: 0.7;
}
body.darkTheme textarea:focus {
border-color: var(--theme_highlight) !important;
}
body.darkTheme .ui.toggle.checkbox input ~ label::before{
background-color: var(--theme_bg_secondary) !important;
@ -140,13 +205,73 @@ body.darkTheme .ui.toggle.checkbox input:checked ~ label::before{
border: 1px solid var(--button_border_color) !important;
}
/* Generic dropdown overwrites */
body.darkTheme .ui.selection.dropdown {
background-color: var(--theme_bg) !important;
color: var(--text_color) !important;
border-color: transparent !important;
}
body.darkTheme .ui.selection.dropdown .menu {
background-color: var(--theme_bg) !important;
color: var(--text_color) !important;
}
body.darkTheme .ui.selection.dropdown .menu .item {
color: var(--text_color) !important;
}
body.darkTheme .ui.selection.dropdown .menu .item:hover {
background-color: var(--theme_bg_primary) !important;
color: var(--text_color) !important;
}
body.darkTheme .ui.selection.dropdown .menu .item.active.selected {
background-color: var(--theme_highlight) !important;
color: var(--text_color) !important;
}
body.darkTheme .ui.selection.dropdown .default.text {
color: var(--text_color) !important;
}
body.darkTheme .ui.selection.dropdown .dropdown.icon {
color: var(--text_color) !important;
}
/* Secondary menu override */
body.darkTheme .ui.pointing.secondary.menu {
background-color: var(--theme_bg) !important;
color: var(--text_color) !important;
border-bottom: 1px solid var(--divider_color) !important;
}
body.darkTheme .ui.pointing.secondary.menu .item {
color: var(--text_color) !important;
}
body.darkTheme .ui.pointing.secondary.menu .item:hover {
color: var(--item_color) !important;
}
body.darkTheme .ui.pointing.secondary.menu .item.active {
background-color: var(--theme_bg_secondary) !important;
color: var(--text_color) !important;
border-bottom: 1px solid var(--divider_color) !important;
}
body.darkTheme .ui.pointing.secondary.menu .item.narrowpadding {
border-top-left-radius: 0.4em;
border-top-right-radius: 0.4em;
}
/* Tool bar overvrite */
.toolbar{
background-color: var(--theme_bg) !important;
color: var(--text_color) !important;
border: 1px solid var(--divider_color) !important;
}s
}
body.darkTheme .ui.segment:not(.basic) {
body.darkTheme .ui.segment:not(.basic):not(.tab) {
background-color: var(--theme_bg) !important;
color: var(--text_color) !important;
border: 1px solid transparent !important;
@ -200,6 +325,105 @@ body.darkTheme .ui.form .grouped.fields label {
color: var(--text_color) !important;
}
/* Confirm Box */
body.darkTheme .confirmBoxBody {
background-color: var(--theme_bg) !important;
color: var(--text_color) !important;
border: 1px solid var(--divider_color) !important;
}
body.darkTheme .confirmBoxBody .ui.button {
color: var(--button_color) !important;
border: 1px solid var(--button_border_color) !important;
}
body.darkTheme .confirmBoxBody .ui.button:hover {
background-color: var(--button_hover_bg) !important;
color: var(--button_hover_color) !important;
border: 1px solid var(--button_border_color) !important;
}
body.darkTheme .confirmBoxBody .ui.red.button {
color: var(--button_red_color) !important;
border: 1px solid var(--button_red_border_color) !important;
}
body.darkTheme .confirmBoxBody .ui.red.button:hover {
background-color: #380a0a !important;
color: var(--button_red_hover_color) !important;
}
body.darkTheme .confirmBoxBody .ui.green.button {
color: var(--button_green_color) !important;
border: 1px solid var(--button_green_border_color) !important;
}
body.darkTheme .confirmBoxBody .ui.green.button:hover {
background-color: #0a380a !important;
color: var(--button_green_hover_color) !important;
}
body.darkTheme .confirmBoxBody .questionToConfirm {
color: var(--text_color) !important;
}
body.darkTheme #confirmBox .ui.top.attached.progress{
background-color: var(--theme_bg_secondary) !important;
}
body.darkTheme #confirmBox .ui.top.attached.progress .bar {
background-color: var(--theme_highlight) !important;
}
/* Tour Modal */
body.darkTheme #tourModal {
background-color: var(--theme_bg) !important;
color: var(--text_color) !important;
border: 1px solid var(--divider_color) !important;
}
body.darkTheme #tourModal .tourStepTitle {
color: var(--text_color) !important;
}
body.darkTheme #tourModal .tourStepContent {
color: var(--text_color_secondary) !important;
}
body.darkTheme #tourModal .ui.divider {
border-color: var(--divider_color) !important;
}
body.darkTheme #tourModal .ui.button {
color: var(--button_color) !important;
border: 1px solid var(--button_border_color) !important;
}
body.darkTheme #tourModal .ui.button:hover {
background-color: var(--button_hover_bg) !important;
color: var(--button_hover_color) !important;
border: 1px solid var(--button_border_color) !important;
}
body.darkTheme #tourModal .ui.red.button:hover {
background-color: #380a0a !important;
color: var(--button_red_hover_color) !important;
}
body.darkTheme #tourModal .ui.circular.icon.button {
background-color: var(--theme_bg_primary) !important;
color: var(--button_color) !important;
border: 1px solid var(--button_border_color) !important;
}
body.darkTheme #tourModal .ui.circular.icon.button:hover {
background-color: var(--theme_bg_secondary) !important;
color: var(--button_hover_color) !important;
border: 1px solid var(--button_border_color) !important;
}
/*
HTTP Proxy Table
*/
@ -751,5 +975,129 @@ body.darkTheme #utm .standardContainer {
body.darkTheme #utm .standardContainer .padding.statusDot {
background-color: var(--theme_bg) !important;
border: 0.2px solid var(--theme_bg_primary) !important;
border: 0.2px solid var(--text_color_inverted) !important;
}
body.darkTheme .ui.utmloading.segment {
background-color: var(--theme_bg) !important;
color: var(--text_color) !important;
border: 1px solid var(--divider_color) !important;
}
body.darkTheme .ui.utmloading.segment .ui.inverted.dimmer {
background-color: var(--theme_bg) !important;
color: var(--text_color) !important;
}
body.darkTheme .ui.utmloading.segment .ui.inverted.dimmer .ui.text.loader {
color: var(--text_color) !important;
}
/*
Network Tool overlay
*/
body.darkTheme .ui.celled.unstackable.table:not(.basic) th{
background-color: var(--theme_bg_secondary) !important;
color: var(--text_color) !important;
border-color: var(--divider_color) !important;
}
body.darkTheme #networktool .ui.accordion .title {
color: var(--text_color) !important;
}
body.darkTheme #networktool .ui.accordion .title .dropdown.icon {
color: var(--icon_color) !important;
}
body.darkTheme #networktool .ui.accordion .title .menu {
background-color: var(--theme_bg) !important;
color: var(--text_color) !important;
border-color: var(--divider_color) !important;
}
body.darkTheme .ui.selection.fluid.dropdown#mdnsWoL {
background-color: var(--theme_bg) !important;
color: var(--text_color) !important;
border-color: var(--divider_color) !important;
}
body.darkTheme .ui.selection.fluid.dropdown#mdnsWoL .menu {
background-color: var(--theme_bg) !important;
color: var(--text_color) !important;
}
body.darkTheme .ui.selection.fluid.dropdown#mdnsWoL .menu .item {
color: var(--text_color) !important;
}
body.darkTheme .ui.selection.fluid.dropdown#mdnsWoL .menu .item:hover {
background-color: var(--theme_bg_secondary) !important;
color: var(--text_color) !important;
}
body.darkTheme .ui.selection.fluid.dropdown#mdnsWoL .menu .item.active.selected {
background-color: var(--theme_highlight) !important;
color: var(--text_color) !important;
}
body.darkTheme .ui.selection.visible.dropdown > .text:not(.default) {
color: var(--text_color) !important;
}
body.darkTheme .ui.selection.fluid.dropdown#mdnsWoL .default.text {
color: var(--text_color) !important;
}
body.darkTheme .ui.selection.fluid.dropdown#mdnsWoL .dropdown.icon {
color: var(--text_color) !important;
}
/*
Tool overlay css override
*/
body.darkTheme .picker-wrap.popup .picker {
background: var(--theme_bg_primary) !important;
border: 1px solid var(--button_border_color) !important;
}
body.darkTheme .picker-wrap.popup .picker .picker-d-b {
background: var(--theme_bg) !important;
}
body.darkTheme .picker-wrap.popup .picker .picker-d-d.picker-d-td{
background: var(--theme_highlight) !important;
color: var(--text_color) !important;
}
body.darkTheme .picker-p {
background-color: var(--theme_bg_primary) !important;
color: var(--text_color) !important;
}
body.darkTheme .picker-p .picker-b,
body.darkTheme .picker-p .picker-n {
background-color: var(--theme_bg_primary) !important;
color: var(--text_color) !important;
}
body.darkTheme .picker-p .picker-m,
body.darkTheme .picker-p .picker-y {
background-color: var(--theme_bg) !important;
color: var(--text_color) !important;
}
/* Statistics */
body.darkTheme .statistic .value.totalViewCount {
color: var(--text_color) !important;
}
body.darkTheme .statistic .label {
color: var(--text_color_secondary) !important;
}

9
src/web/index.html
View File

@ -272,8 +272,17 @@
function toggleTheme(){
if ($("body").hasClass("darkTheme")){
setDarkTheme(false);
//Check if the snippet iframe is opened. If yes, set the dark theme to the iframe
if ($(".sideWrapper").is(":visible")){
$(".sideWrapper iframe")[0].contentWindow.setDarkTheme(false);
}
}else{
setDarkTheme(true);
//Check if the snippet iframe is opened. If yes, set the dark theme to the iframe
if ($(".sideWrapper").is(":visible")){
$(".sideWrapper iframe")[0].contentWindow.setDarkTheme(true);
}
}
}

51
src/web/main.css
View File

@ -1,57 +1,8 @@
/*
index.html style overwrite
*/
:root{
}
/* Theme Color Definition */
body:not(.darkTheme){
--theme_bg: #f6f6f6;
--theme_bg_primary: #ffffff;
--theme_bg_secondary: #ffffff;
--theme_bg_active: #ececec;
--theme_highlight: #a9d1f3;
--theme_bg_inverted: #27292d;
--theme_advance: #f7f7f7;
--item_color: #5e5d5d;
--item_color_select: rgba(0,0,0,.87);
--text_color: #414141;
--input_color: white;
--divider_color: #cacaca;
--text_color_inverted: #fcfcfc;
--button_text_color: #878787;
--button_border_color: #dedede;
--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_red: linear-gradient(203deg, rgba(250,172,38,1) 17%, rgba(202,0,37,1) 78%);
}
body.darkTheme{
--theme_bg: #000000;
--theme_bg_primary: #141414;
--theme_bg_secondary:#230046;
--theme_highlight: #743788;
--theme_bg_active: #020101;
--theme_bg_inverted: #f8f8f9;
--theme_advance: #000000;
--item_color: #cacaca;
--text_color: #dee1e4;
--text_color_secondary: #b5c0c7;
--input_color: black;
--divider_color: #282828;
--item_color_select: rgba(255, 255, 255, 0.87);
--text_color_inverted: #414141;
--button_text_color: #e9e9e9;
--button_border_color: #646464;
--theme_background: linear-gradient(214deg, rgba(3,1,70,1) 17%, rgba(60,1,80,1) 78%);
--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_red: linear-gradient(203deg, rgba(250,172,38,1) 17%, rgba(202,0,37,1) 78%);
}
/* Theme color palletes are defined in darktheme.css */
/* Theme Toggle CSS */
#themeColorButton{

115
src/web/snippet/accessRuleEditor.html
View File

@ -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>

2
src/web/snippet/acme.html
View File

@ -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">

2
src/web/snippet/advanceStatsOprs.html
View File

@ -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">

2
src/web/snippet/aliasEditor.html
View File

@ -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">

2
src/web/snippet/basicAuthEditor.html
View File

@ -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">

2
src/web/snippet/configTools.html
View File

@ -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">

6
src/web/snippet/customHeaders.html
View File

@ -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">

2
src/web/snippet/dockerContainersList.html
View File

@ -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">

19
src/web/snippet/hostAccessEditor.html
View File

@ -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">

2
src/web/snippet/intermediateCertConv.html
View File

@ -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">

54
src/web/snippet/logview.html
View File

@ -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">

2
src/web/snippet/placeholder.html
View File

@ -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>

2
src/web/snippet/sso_app.html
View File

@ -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">

2
src/web/snippet/sso_user.html
View File

@ -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">

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

@ -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">