mirror of
https://github.com/tobychui/zoraxy.git
synced 2025-06-01 13:17:21 +02:00
Added more dark themes
- Added wrappers for snippet dark theme - Optimized color pallets
This commit is contained in:
parent
1c79fa4e96
commit
e4facbc7b6
@ -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()
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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{
|
||||
|
@ -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>
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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>
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
Loading…
x
Reference in New Issue
Block a user