librewolf
/
bunkerized-nginx
mirror of https://github.com/bunkerity/bunkerized-nginx
4
0
Fork 1
Code Issues Projects Releases Wiki Activity

Merge pull request #382 from syrk4web/dev 

enhance style + fix scripts
This commit is contained in:
Théophile Diot 2022-12-06 18:02:04 +01:00 committed by GitHub
parent 07ab3deb03 b944de9e88
commit 48bbb5e39b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 264 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/ui/static/css/dashboard.css
View File

@ -1575,6 +1575,10 @@ h6 {
justify-content: space-between;
}
.justify-evenly {
justify-content: space-evenly;
}
.justify-items-center {
justify-items: center;
}
@ -2071,6 +2075,11 @@ h6 {
padding-right: 0.25rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.px-0 {
padding-left: 0px;
padding-right: 0px;
@ -2106,11 +2115,6 @@ h6 {
padding-bottom: 1.5rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.px-0\.5 {
padding-left: 0.125rem;
padding-right: 0.125rem;
@ -2148,14 +2152,6 @@ h6 {
padding-top: 0.25rem;
}
.pt-4 {
padding-top: 1rem;
}
.pb-3 {
padding-bottom: 0.75rem;
}
.pl-0 {
padding-left: 0px;
}
@ -2184,6 +2180,10 @@ h6 {
padding-left: 1rem;
}
.pt-4 {
padding-top: 1rem;
}
.pt-3 {
padding-top: 0.75rem;
}
@ -2212,6 +2212,10 @@ h6 {
padding-top: 1.25rem;
}
.pb-3 {
padding-bottom: 0.75rem;
}
.text-left {
text-align: left;
}
@ -2489,11 +2493,6 @@ h6 {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.brightness-95 {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
@ -3139,6 +3138,11 @@ h6 {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.dark .dark\:hover\:brightness-95:hover {
--tw-brightness: brightness(.95);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.dark .dark\:disabled\:border-gray-800:disabled {
--tw-border-opacity: 1;
border-color: rgb(37 47 64 / var(--tw-border-opacity));

4
src/ui/static/js/global.js
View File

@ -58,8 +58,8 @@ class darkMode {
toggle() {
document.querySelector("html").classList.toggle("dark");
this.darkToggleLabel.textContent = this.darkToggleEl.checked
? "dark"
: "light";
? "dark mode"
: "light mode";
}
async saveMode() {

327
src/ui/static/js/services.js
View File

@ -342,25 +342,19 @@ class Multiple {
const multipleEls = document.querySelectorAll(
`[${this.prefix}-settings-multiple*="${serviceName}"]`
);
let count;
//case no schema
if (multipleEls.length <= 0) return;
//case only schema
if (multipleEls.length === 1) {
count = 0;
}
//case schema and custom configs with num
if (multipleEls.length > 1) {
count = Number(
multipleEls[1]
.getAttribute(`${this.prefix}-settings-multiple`)
.substring(
multipleEls[1].getAttribute(
`${this.prefix}-settings-multiple`
).length - 1
)
//check higher num
let topNum = 0;
multipleEls.forEach((container) => {
const ctnrName = container.getAttribute(
"services-settings-multiple"
);
}
const num = this.getSuffixNumOrFalse(ctnrName);
if (!isNaN(num) && num > topNum) topNum = num;
});
//the default (schema) group is the last group
const schema = document.querySelector(
`[${this.prefix}-settings-multiple="${serviceName}_SCHEMA"]`
@ -369,7 +363,10 @@ class Multiple {
const clone = schema.cloneNode(true);
const name = clone
.getAttribute("services-settings-multiple")
.replace(`SCHEMA`, `${count + 1}`);
.replace(
`SCHEMA`,
`${multipleEls.length >= 2 ? topNum + 1 : topNum}`
);
clone.setAttribute("services-settings-multiple", name);
this.showMultiple(clone);
try {
@ -379,7 +376,10 @@ class Multiple {
cloneContainer.forEach((ctnr) => {
const newName = ctnr
.getAttribute("setting-container")
.replace("SCHEMA", `${count + 1}`);
.replace(
"SCHEMA",
`${multipleEls.length >= 2 ? topNum + 1 : topNum}`
);
ctnr.setAttribute("setting-container", newName);
});
} catch (err) {}
@ -387,7 +387,9 @@ class Multiple {
try {
const cloneTitles = clone.querySelectorAll("h5");
cloneTitles.forEach((title) => {
title.textContent = `${title.textContent} #${count + 1}`;
title.textContent = `${title.textContent} #${
multipleEls.length >= 2 ? `#${topNum + 1}` : ``
}`;
});
} catch (err) {}
@ -395,7 +397,10 @@ class Multiple {
setNameID.forEach((name) => {
try {
this.setNameIDloop(clone.querySelectorAll(name), count + 1);
this.setNameIDloop(
clone.querySelectorAll(name),
multipleEls.length >= 2 ? topNum + 1 : topNum
);
} catch (err) {}
});
@ -423,139 +428,191 @@ class Multiple {
updateModalMultiples(settings) {
//keep only multiple settings value
const multipleSettings = this.filterMultiple(settings);
const multipleSettings = this.getMultiplesOnly(settings);
//put multiple on the right plugin, on schema container
this.setMultipleToDOM(multipleSettings);
//for each schema container, check if custom multiple (ending with _num)
//and sort them on containers by nums
//and check to keep default data (schema) or custom multiple value if exists
this.sortMultiplesByNum();
//remove custom multiple from schema to avoid them on add btn using schema container
this.removeCustomFromSchema();
}
//keep only multiple settings value
filterMultiple(settings) {
const multiple = {};
for (const [key, data] of Object.entries(settings)) {
if (!isNaN(key[key.length - 1]) && key[key.length - 2] === "_") {
multiple[key] = {
value: data["value"],
method: data["method"],
};
getMultiplesOnly(settings) {
//get schema settings
const multiples = {};
const schemaSettings = document.querySelectorAll(
`[setting-container$="SCHEMA"]`
);
// loop on every schema settings
schemaSettings.forEach((schema) => {
const schemaName = schema
.getAttribute("setting-container")
.replace("_SCHEMA", "")
.trim();
//check if match with service setting
for (const [key, data] of Object.entries(settings)) {
if (key.includes(schemaName)) {
multiples[key] = {
value: data["value"],
method: data["method"],
};
}
}
}
return multiple;
});
return multiples;
}
//put multiple on the right plugin, on schema container
setMultipleToDOM(multiples) {
//add them to the right plugin
for (const [key, data] of Object.entries(multiples)) {
const num = key[key.length - 1];
const getSchemaKey = key.substring(0, key.length - 2);
const getSchemaSetting = document.querySelector(
`[setting-container="${getSchemaKey}_SCHEMA"]`
);
const cloneSchemaSetting = getSchemaSetting.cloneNode(true);
//replace info
cloneSchemaSetting.setAttribute("setting-container", key);
const title = cloneSchemaSetting.querySelector("h5");
title.textContent = `${title.textContent} #${num}`;
//replace input info
try {
const inp = cloneSchemaSetting.querySelector("input");
this.setNameID(inp, key);
} catch (err) {}
//or select
try {
const select = cloneSchemaSetting.querySelector("select");
this.setNameID(select, key);
} catch (err) {}
getSchemaSetting.insertAdjacentElement("beforebegin", cloneSchemaSetting);
}
}
//for each schema container, check if custom multiple (ending with _num)
//and sort them on containers by nums
//and check to keep default data (schema) or custom multiple value if exists
sortMultiplesByNum() {
const multiPlugins = document.querySelectorAll(
`[${this.prefix}-settings-multiple*='SCHEMA']`
const schemaSettings = document.querySelectorAll(
`[setting-container$="SCHEMA"]`
);
multiPlugins.forEach((defaultGrp) => {
//get group number for the multiples settings
const multipleEls = defaultGrp.querySelectorAll("[setting-container]");
const multNum = new Set();
multipleEls.forEach((setting) => {
const name = setting.getAttribute("setting-container");
if (!isNaN(name[name.length - 1])) multNum.add(name[name.length - 1]);
});
//create a different group for each number
multNum.forEach((num) => {
const newGroup = defaultGrp.cloneNode(true);
this.showMultiple(newGroup);
//change groupe name
const currName = newGroup.getAttribute(
`${this.prefix}-settings-multiple`
);
newGroup.setAttribute(
`${this.prefix}-settings-multiple`,
currName.replace("SCHEMA", num)
);
schemaSettings.forEach((schema) => {
const schemaName = schema
.getAttribute("setting-container")
.replace("_SCHEMA", "")
.trim();
//add all custom settings to DOM on schema container
for (const [key, data] of Object.entries(multiples)) {
//get num if exists or false
const num = this.getSuffixNumOrFalse(key);
//clone schema to create custom setting multiple
if (key.includes(schemaName)) {
const cloneSetting = schema.cloneNode(true);
cloneSetting.setAttribute("setting-container", `${key}`);
const title = cloneSetting.querySelector("h5");
title.textContent = `${title.textContent} ${num ? `#${num}` : ``}`;
//remove elements that not fit num unless schema if no custom value
const newGroupSettings = newGroup.querySelectorAll(
"[setting-container]"
);
newGroupSettings.forEach((setting) => {
//remove logic
const settingName = setting.getAttribute("setting-container");
if (
(!settingName.endsWith(num) && !settingName.endsWith("SCHEMA")) ||
(settingName.endsWith("SCHEMA") &&
document.querySelector(`${settingName.replace("SCHEMA", num)}`))
) {
return setting.remove();
}
//else update info by num
setting.setAttribute(
"setting-container",
setting.getAttribute("setting-container").replace(`SCHEMA`, num)
);
const title = setting.querySelector("h5");
if (!title.textContent.includes(`#${num}`))
title.textContent = `${title.textContent} #${num}`;
//replace input info
try {
const inp = cloneSetting.querySelector("input");
this.setNameID(inp, key);
const setNameID = ["input", "select"];
if (inp.getAttribute("type") === "checkbox") {
if (data["value"] === "yes") inp.setAttribute("checked", "");
if (data["value"] === "no") inp.removeAttribute("checked");
if (data["method"] !== "ui" || data["method"] !== "default") {
inp.setAttribute("disabled", "");
} else {
inp.removeAttribute("disabled");
}
}
setNameID.forEach((name) => {
try {
this.setNameID(
setting.querySelector(name),
setting.getAttribute("setting-container")
if (inp.getAttribute("type") !== "checkbox") {
inp.setAttribute("value", data["value"]);
if (data["method"] !== "ui" || data["method"] !== "default") {
inp.setAttribute("disabled", "");
} else {
inp.removeAttribute("disabled");
}
}
} catch (err) {}
//or select
try {
const select = cloneSetting.querySelector("select");
this.setNameID(select, key);
const options = select.options;
for (let i = 0; i < options.length; i++) {
const option = options[i];
option.value === data["value"]
? option.setAttribute("selected")
: option.removeAttribute("selected");
}
if (data["method"] !== "ui" || data["method"] !== "default") {
select.setAttribute("disabled", "");
} else {
select.removeAttribute("disabled");
}
} catch (err) {}
//get the num, check if a container with this num exist
//if not create new container and replace schema data by the one
//if already exist, just change schema value by new one
const schemaContainer = schema.closest(
"[services-settings-multiple]"
);
const containerName = schemaContainer
.getAttribute("services-settings-multiple")
.replace("_SCHEMA", "");
//case no container
if (
!document.querySelector(
`[services-settings-multiple="${containerName}${
num ? `_${num}` : ""
}"]`
)
) {
const cloneSchemaCtnr = schemaContainer.cloneNode(true);
cloneSchemaCtnr.setAttribute(
"services-settings-multiple",
`${containerName}${num ? `_${num}` : ""}`
);
//get the schema setting clone element and replace it by custom setting
const cloneSchema = cloneSchemaCtnr.querySelector(
`[setting-container*=${schemaName}]`
);
cloneSchema.insertAdjacentElement("beforebegin", cloneSetting);
cloneSchema.remove();
//replace schema suffix by right suffix
const settings = cloneSchemaCtnr.querySelectorAll(
"[setting-container]"
);
settings.forEach((setting) => {
//change title
const title = setting.querySelector("h5");
title.textContent = title.textContent.includes(
`${num ? `#${num}` : ``}`
)
? title.textContent
: `${title.textContent} ${num ? `#${num}` : ``}`;
//change att
setting.setAttribute(
"setting-container",
setting
.getAttribute("setting-container")
.replace("_SCHEMA", `${num ? `_${num}` : ``}`)
);
} catch (err) {}
});
});
defaultGrp.insertAdjacentElement("afterend", newGroup);
});
//replace name and id att too
const newName = setting.getAttribute("setting-container");
//replace input info
try {
const inp = setting.querySelector("input");
this.setNameID(inp, newName);
} catch (err) {}
//or select
try {
const select = setting.querySelector("select");
this.setNameID(select, newName);
} catch (err) {}
try {
} catch (err) {}
});
schemaContainer.insertAdjacentElement("afterend", cloneSchemaCtnr);
cloneSchemaCtnr.classList.remove("hidden");
cloneSchemaCtnr.classList.add("grid");
} else {
const customContainer = document.querySelector(
`[services-settings-multiple="${containerName}${
num ? `_${num}` : ""
}"]`
);
const cloneSchema = customContainer.querySelector(
`[setting-container*=${schemaName}]`
);
cloneSchema.insertAdjacentElement("beforebegin", cloneSetting);
cloneSchema.remove();
}
}
}
});
}
removeCustomFromSchema() {
const multiPlugins = document.querySelectorAll(
`[${this.prefix}-settings-multiple*='SCHEMA']`
);
multiPlugins.forEach((defaultGrp) => {
const multipleEls = defaultGrp.querySelectorAll("[setting-container]");
multipleEls.forEach((setting) => {
const settingName = setting.getAttribute("setting-container");
if (!settingName.endsWith("SCHEMA")) setting.remove();
});
});
getSuffixNumOrFalse(name) {
const num = !isNaN(Number(name.substring(name.lastIndexOf("_") + 1)))
? Number(name.substring(name.lastIndexOf("_") + 1))
: "";
return num;
}
//UTILS

4
src/ui/static/js/utils/settings.js
View File

@ -120,7 +120,7 @@ class Tabs {
const tabAtt = tab.getAttribute(`${this.prefix}-item-handler`);
//style
this.resetDeskStyle();
tab.classList.add("brightness-95", "z-10");
tab.classList.add("brightness-90", "z-10");
//show content
this.showRightSetting(tabAtt);
}
@ -130,7 +130,7 @@ class Tabs {
resetDeskStyle() {
this.desktopBtns.forEach((tab) => {
tab.classList.remove("brightness-95", "z-10");
tab.classList.remove("brightness-90", "z-10");
});
}

2
src/ui/templates/footer.html
View File

@ -1,5 +1,5 @@
<footer
class="dark:brightness-90 relative mt-4 rounded-lg w-full pt-4 pb-3 mb-2 bg-secondary"
class="dark:brightness-90 relative mt-4 rounded-lg w-full py-4 mb-2 bg-secondary"
>
<div class="w-full px-6 mx-auto">
<div

34
src/ui/templates/login.html
View File

@ -199,7 +199,41 @@
}
}
class FlashMsg {
constructor() {
this.delayBeforeRemove = 8000;
this.init();
}
//remove flash message after this.delay if exist
init() {
window.addEventListener("DOMContentLoaded", () => {
try {
const flashEl = document.querySelector("[flash-message]");
setTimeout(() => {
try {
flashEl.remove();
} catch (err) {}
}, this.delayBeforeRemove);
} catch (err) {}
});
window.addEventListener("click", (e) => {
try {
if (
e.target.closest("button").hasAttribute("close-flash-message")
) {
const closeBtn = e.target.closest("button");
const flashEl = closeBtn.closest("[flash-message]");
flashEl.remove();
}
} catch (err) {}
});
}
}
const setLoader = new Loader();
const setFlash = new FlashMsg();
tsParticles.loadJSON("particles-js", "json/particles.json");
</script>
</body>

6
src/ui/templates/menu.html
View File

@ -349,7 +349,7 @@
<!-- bottom sidebar -->
<div class="w-full flex flex-col justify-end m-4">
<!-- dark/light mode -->
<div class="min-h-6 my-4 flex justify-center">
<div class="min-h-6 my-4 ml-12 flex justify-start">
<input
type="hidden"
id="csrf_token"
@ -371,7 +371,7 @@
dark-toggle-label
class="dark:text-white dark:opacity-80 transition inline-block pl-3 mb-0 ml-0 font-normal cursor-pointer select-none text-sm text-slate-700"
>
{% if dark_mode == True %}dark {% else %} light {% endif %}
{% if dark_mode == True %}dark mode{% else %} light mode{% endif %}
</label>
</div>
<!-- end dark/light mode -->
@ -437,7 +437,7 @@
<div class="w-full">
<a
href="logout"
class="dark:brightness-125 hover:brightness-75 w-full inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl bg-primary leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
class="tracking-wide dark:brightness-125 hover:brightness-75 w-full inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl bg-primary leading-normal text-xs ease-in shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
Logout
</a>

2
src/ui/templates/news.html
View File

@ -156,7 +156,7 @@
type="submit"
formtarget="_blank"
type="button"
class="dark:brightness-125 hover:brightness-75 w-full inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl bg-primary leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
class="dark:brightness-125 hover:brightness-75 w-full inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl bg-primary leading-normal text-xs ease-in tracking-wide shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
Subscribe
</button>

8
src/ui/templates/settings_plugins.html
View File

@ -276,7 +276,7 @@
{% if value["type"] != "select" and value["type"] != "check" %}
<input
default-value="{{global_config[setting]['value']}}" default-method="{{global_config[setting]['method']}}"
{% if global_config[setting]['method'] != 'ui' and global_config[setting]['method'] != 'default' %} disabled {% endif %} id="{{setting}}" name="{{setting}}"
{% if global_config[setting]['method'] != 'ui' and global_config[setting]['method'] != 'default' %} disabled {% endif %} id="{{setting}}_SCHEMA" name="{{setting}}_SCHEMA"
class="duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700"
value="{% if global_config[setting]['value'] %} {{global_config[setting]['value']}} {% else %} {{value['default']}} {% endif %}" type="{{value['type']}}" pattern="{{value['regex']|safe}}" />
{% endif %}
@ -286,7 +286,7 @@
{% if value["type"] == "select" %}
<!-- default hidden-->
<select default-method="{{global_config[setting]['method']}}" default-value="{{value['default']}}"
id="{{setting}}" name="{{setting}}" {{current_endpoint}}-setting-select-default="{{value['id']}}" type="form-select" id="{{setting}}" name="{{setting}}"
id="{{setting}}_SCHEMA" name="{{setting}}_SCHEMA" {{current_endpoint}}-setting-select-default="{{value['id']}}" type="form-select" id="{{setting}}" name="{{setting}}"
class="hidden">
{% for item in value['select'] %}
<option value="{{item}}" {% if global_config[setting]['value'] and global_config[setting]['value'] == item or not global_config[setting]['value'] and value['default'] == item %} selected{% endif %}>{{item}}</option>
@ -366,7 +366,7 @@
<!-- checkbox -->
{% if value["type"] == "check" %}
<div checkbox-handler="{{value['id']}}" class="relative mb-7 md:mb-0">
<input id="{{setting}}" name="{{setting}}"
<input id="{{setting}}_SCHEMA" name="{{setting}}_SCHEMA"
default-method="{{global_config[setting]['method']}}"
default-value="{{global_config[setting]['value']}}" {% if
global_config[setting]['method'] != 'ui' or global_config[setting]['method']
@ -409,7 +409,7 @@
<!--end invalid feedback-->
</div>
{% endif %} {% endfor %}
<div class="col-span-12 flex justify-center my-4">
<div multiple-delete-container class="col-span-12 flex justify-center my-4">
<button {{current_endpoint}}-multiple-delete="{{plugin['name']}}" type="button" class="ml-3 dark:brightness-90 inline-block px-3 py-1.5 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md">
Remove
</button>

6
src/ui/templates/settings_tabs.html
View File

@ -27,7 +27,7 @@
<button
{{current_endpoint}}-item-handler="general"
type="button"
class=" brightness-75 border-primary dark:hover:bg-slate-800 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 border my-1 relative inline-block px-3 py-3 font-bold text-center uppercase align-middle transition-all rounded-none cursor-pointer bg-white hover:bg-gray-100 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md"
class="brightness-90 border-primary dark:hover:bg-slate-800 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 border my-1 relative inline-block px-3 py-3 font-bold text-center uppercase align-middle transition-all rounded-none cursor-pointer bg-white hover:bg-gray-100 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md"
>
<div class="w-full flex justify-between items-center">
<!-- text and icon -->
@ -65,7 +65,7 @@
<button
{{current_endpoint}}-item-handler="{{ plugin['id'] }}"
type="button"
class="z-1000 {% if current_endpoint == 'service' and loop.first %} brightness-75 {% endif %} border-primary dark:hover:bg-slate-800 dark:border-slate-600 dark:bg-slate-700 border my-1 relative inline-block px-3 py-3 font-bold text-center uppercase align-middle transition-all rounded-none cursor-pointer bg-white hover:bg-gray-100 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md"
class="z-1000 {% if current_endpoint == 'service' and loop.first %} brightness-90 {% endif %} border-primary dark:hover:bg-slate-800 dark:border-slate-600 dark:bg-slate-700 border my-1 relative inline-block px-3 py-3 font-bold text-center uppercase align-middle transition-all rounded-none cursor-pointer bg-white hover:bg-gray-100 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md"
>
<div clas="w-full flex justify-between items-center">
<!-- text and icon -->
@ -101,7 +101,7 @@
<button
{{current_endpoint}}-mobile-select
type="button"
class="dark:hover:brightness-90 dark:border-slate-600 dark:bg-slate-700 border-primary border w-full flex items-center justify-between rounded-lg hover:-translate-y-px my-1 px-6 py-3 font-bold text-center uppercase align-middle transition-all cursor-pointer bg-white hover:bg-gray-50 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md"
class="dark:hover:brightness-95 dark:border-slate-600 dark:bg-slate-700 border-primary border w-full flex items-center justify-between rounded-lg hover:-translate-y-px my-1 px-6 py-3 font-bold text-center uppercase align-middle transition-all cursor-pointer bg-white hover:bg-gray-50 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md"
>
<span class="transition duration-300 ease-in-out dark:opacity-90 dark:text-gray-300 text-primary">{% if current_endpoint == "global-config" %}general {% endif %} </span>
<!-- chevron -->