enhance darkmode + fix + factorisation

=> some title, button and text are now lighter for visibility
=> fix show/hide toggle gap between created multiples and existed ones
=> fix jinja error logic to display right svg depending type of element (folder, file, root...)
=> fix editor not following dark mode on page load
=> change job svg to differenciate it with valid info
=> replace actions btns on file manager
=> factorisation of services multiple class
This commit is contained in:
BlasenhauerJ 2022-12-13 18:13:16 +01:00
parent cdc3cfc81d
commit bb7ca889ce
14 changed files with 358 additions and 184 deletions

View File

@ -1406,6 +1406,18 @@ h6 {
min-width: 500px;
}
.min-w-\[100px\] {
min-width: 100px;
}
.min-w-\[200px\] {
min-width: 200px;
}
.min-w-\[150px\] {
min-width: 150px;
}
.max-w-180 {
max-width: 45rem;
}
@ -1553,6 +1565,36 @@ h6 {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-2 {
--tw-translate-x: 0.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-1 {
--tw-translate-x: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-2 {
--tw-translate-x: -0.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-5 {
--tw-translate-x: -1.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-4 {
--tw-translate-x: 1rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-3 {
--tw-translate-x: 0.75rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-12 {
--tw-rotate: 12deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -2091,6 +2133,14 @@ h6 {
fill: #3a416f;
}
.fill-green-700 {
fill: #15803d;
}
.fill-emerald-600 {
fill: #059669;
}
.stroke-0 {
stroke-width: 0;
}
@ -2961,6 +3011,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);
}
.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);
}
.focus\:border-primary:focus {
--tw-border-opacity: 1;
border-color: rgb(8 85 119 / var(--tw-border-opacity));
@ -3067,6 +3122,11 @@ h6 {
border-color: rgb(73 80 87 / var(--tw-border-opacity));
}
.dark .dark\:border-slate-850 {
--tw-border-opacity: 1;
border-color: rgb(17 28 68 / var(--tw-border-opacity));
}
.dark .dark\:bg-slate-900 {
--tw-bg-opacity: 1;
background-color: rgb(5 17 57 / var(--tw-bg-opacity));
@ -3147,6 +3207,23 @@ h6 {
background-color: rgb(5 17 57 / 0.3);
}
.dark .dark\:bg-green-500\/90 {
background-color: rgb(34 197 94 / 0.9);
}
.dark .dark .dark\:dark\:bg-green-500\/90 {
background-color: rgb(34 197 94 / 0.9);
}
.dark .dark\:bg-blue-500\/90 {
background-color: rgb(94 114 228 / 0.9);
}
.dark .dark\:bg-blue-600 {
--tw-bg-opacity: 1;
background-color: rgb(33 82 255 / var(--tw-bg-opacity));
}
.dark .dark\:bg-opacity-70 {
--tw-bg-opacity: 0.7;
}
@ -3186,6 +3263,14 @@ h6 {
fill: #adb5bd;
}
.dark .dark\:fill-gray-600 {
fill: #6c757d;
}
.dark .dark\:fill-emerald-600 {
fill: #059669;
}
.dark .dark\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
@ -3211,6 +3296,11 @@ h6 {
color: rgb(245 57 57 / var(--tw-text-opacity));
}
.dark .dark\:text-gray-200 {
--tw-text-opacity: 1;
color: rgb(233 236 239 / var(--tw-text-opacity));
}
.dark .dark\:opacity-50 {
opacity: 0.5;
}
@ -3227,6 +3317,14 @@ h6 {
opacity: 0.6;
}
.dark .dark\:opacity-75 {
opacity: 0.75;
}
.dark .dark\:opacity-95 {
opacity: 0.95;
}
.dark .dark\:shadow-dark-xl {
--tw-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
--tw-shadow-colored: 0 2px 2px 0 var(--tw-shadow-color), 0 3px 1px -2px var(--tw-shadow-color), 0 1px 5px 0 var(--tw-shadow-color);
@ -3259,6 +3357,16 @@ 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\: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);
}
.dark .dark\:brightness-75 {
--tw-brightness: brightness(.75);
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\:backdrop-brightness-110 {
--tw-backdrop-brightness: brightness(1.1);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@ -3303,6 +3411,21 @@ 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-75:hover {
--tw-brightness: brightness(.75);
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-110:hover {
--tw-brightness: brightness(1.1);
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-105:hover {
--tw-brightness: brightness(1.05);
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));

View File

@ -337,14 +337,15 @@ class Multiple {
) {
//get plugin from btn
const btn = e.target.closest("button");
const serviceName = btn.getAttribute(`${this.prefix}-multiple-add`);
const attName = btn.getAttribute(`${this.prefix}-multiple-add`);
//get all multiple groups
const multipleEls = document.querySelectorAll(
`[${this.prefix}-settings-multiple*="${serviceName}"]`
`[${this.prefix}-settings-multiple*="${attName}"]`
);
//case no schema
if (multipleEls.length <= 0) return;
//check higher num
//get the next container number logic
let topNum = 0;
multipleEls.forEach((container) => {
@ -354,19 +355,18 @@ class Multiple {
const num = this.getSuffixNumOrFalse(ctnrName);
if (!isNaN(num) && num > topNum) topNum = num;
});
//num is total - 1 or nothing if none
const setNum = `${multipleEls.length >= 2 ? topNum + 1 : topNum}`;
//the default (schema) group is the last group
const schema = document.querySelector(
`[${this.prefix}-settings-multiple="${serviceName}_SCHEMA"]`
`[${this.prefix}-settings-multiple="${attName}_SCHEMA"]`
);
//clone it and change name by total - 1 (schema is hidden)
//clone schema to create a group with new num
const clone = schema.cloneNode(true);
const name = clone
.getAttribute("services-settings-multiple")
.replace(
`SCHEMA`,
`${multipleEls.length >= 2 ? topNum + 1 : topNum}`
);
.replace(`SCHEMA`, `${setNum}`);
clone.setAttribute("services-settings-multiple", name);
this.showMultiple(clone);
try {
@ -376,10 +376,7 @@ class Multiple {
cloneContainer.forEach((ctnr) => {
const newName = ctnr
.getAttribute("setting-container")
.replace(
"SCHEMA",
`${multipleEls.length >= 2 ? topNum + 1 : topNum}`
);
.replace("SCHEMA", `${setNum}`);
ctnr.setAttribute("setting-container", newName);
});
} catch (err) {}
@ -397,15 +394,14 @@ class Multiple {
setNameID.forEach((name) => {
try {
this.setNameIDloop(
clone.querySelectorAll(name),
multipleEls.length >= 2 ? topNum + 1 : topNum
);
this.setNameIDloop(clone.querySelectorAll(name), setNum);
} catch (err) {}
});
//insert new group before first one
schema.insertAdjacentElement("afterend", clone);
//show all groups
this.showMultByAtt(attName);
}
} catch (err) {}
@ -419,17 +415,7 @@ class Multiple {
const att = e.target
.closest("button")
.getAttribute(`${this.prefix}-multiple-toggle`);
const multContainers = document.querySelectorAll(
`[services-settings-multiple^=${att}]`
);
multContainers.forEach((container) => {
if (
!container
.getAttribute("services-settings-multiple")
.includes("SCHEMA")
)
container.classList.toggle("hidden");
});
this.toggleMultByAtt(att);
}
//remove last child
} catch (err) {}
@ -451,6 +437,30 @@ class Multiple {
});
}
showMultByAtt(att) {
const multContainers = document.querySelectorAll(
`[services-settings-multiple^=${att}]`
);
multContainers.forEach((container) => {
if (
!container.getAttribute("services-settings-multiple").includes("SCHEMA")
)
container.classList.remove("hidden");
});
}
toggleMultByAtt(att) {
const multContainers = document.querySelectorAll(
`[services-settings-multiple^=${att}]`
);
multContainers.forEach((container) => {
if (
!container.getAttribute("services-settings-multiple").includes("SCHEMA")
)
container.classList.toggle("hidden");
});
}
updateModalMultiples(settings) {
//keep only multiple settings value
const multipleSettings = this.getMultiplesOnly(settings);
@ -489,10 +499,7 @@ class Multiple {
`[setting-container$="SCHEMA"]`
);
schemaSettings.forEach((schema) => {
const schemaName = schema
.getAttribute("setting-container")
.replace("_SCHEMA", "")
.trim();
const schemaName = this.getSchemaName(schema);
//add all custom settings to DOM on schema container
for (const [key, data] of Object.entries(multiples)) {
//get num if exists or false
@ -503,45 +510,7 @@ class Multiple {
cloneSetting.setAttribute("setting-container", `${key}`);
const title = cloneSetting.querySelector("h5");
title.textContent = `${title.textContent} ${num ? `#${num}` : ``}`;
//replace input info
try {
const inp = cloneSetting.querySelector("input");
this.setNameID(inp, key);
if (inp.getAttribute("type") === "checkbox") {
if (data["value"] === "yes") inp.setAttribute("checked", "");
if (data["value"] === "no") inp.removeAttribute("checked");
inp.setAttribute("default-method", data["method"]);
}
if (inp.getAttribute("type") !== "checkbox") {
inp.setAttribute("value", data["value"]);
inp.setAttribute("default-method", data["method"]);
}
} catch (err) {}
//or select
try {
const select = cloneSetting.querySelector("select");
this.setNameID(select, key);
const name = select.getAttribute("services-setting-select-default");
const selTxt = document.querySelector(
`[services-setting-select-text='${name}']`
);
selTxt.textContent = data["value"];
selTxt.setAttribute("value", data["value"]);
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");
}
inp.setAttribute("default-method", data["method"]);
} catch (err) {}
this.setInpInfo(cloneSetting, key, data);
//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
@ -552,7 +521,7 @@ class Multiple {
.getAttribute("services-settings-multiple")
.replace("_SCHEMA", "");
//case no container
//case no container, create one
if (
!document.querySelector(
`[services-settings-multiple="${containerName}${
@ -560,65 +529,21 @@ class Multiple {
}"]`
)
) {
const cloneSchemaCtnr = schemaContainer.cloneNode(true);
cloneSchemaCtnr.setAttribute(
"services-settings-multiple",
`${containerName}${num ? `_${num}` : ""}`
this.createContainer(
schemaContainer,
schemaName,
cloneSetting,
containerName,
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}` : ``}`)
);
//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}` : ""
}"]`
//case container, add setting only
this.addCustomToContainer(
schemaName,
containerName,
cloneSetting,
num
);
const cloneSchema = customContainer.querySelector(
`[setting-container*=${schemaName}]`
);
cloneSchema.insertAdjacentElement("beforebegin", cloneSetting);
cloneSchema.remove();
}
}
}
@ -627,6 +552,110 @@ class Multiple {
});
}
setInpInfo(cloneSetting, key, data) {
//replace input info
try {
const inp = cloneSetting.querySelector("input");
this.setNameID(inp, key);
if (inp.getAttribute("type") === "checkbox") {
if (data["value"] === "yes") inp.setAttribute("checked", "");
if (data["value"] === "no") inp.removeAttribute("checked");
inp.setAttribute("default-method", data["method"]);
}
if (inp.getAttribute("type") !== "checkbox") {
inp.setAttribute("value", data["value"]);
inp.setAttribute("default-method", data["method"]);
}
} catch (err) {}
//or select
try {
const select = cloneSetting.querySelector("select");
this.setNameID(select, key);
const name = select.getAttribute("services-setting-select-default");
const selTxt = document.querySelector(
`[services-setting-select-text='${name}']`
);
selTxt.textContent = data["value"];
selTxt.setAttribute("value", data["value"]);
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");
}
inp.setAttribute("default-method", data["method"]);
} catch (err) {}
}
addCustomToContainer(schemaName, containerName, cloneSetting, num) {
const customContainer = document.querySelector(
`[services-settings-multiple="${containerName}${num ? `_${num}` : ""}"]`
);
const cloneSchema = customContainer.querySelector(
`[setting-container*=${schemaName}]`
);
cloneSchema.insertAdjacentElement("beforebegin", cloneSetting);
cloneSchema.remove();
}
createContainer(
schemaContainer,
schemaName,
cloneSetting,
containerName,
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}` : ``}`)
);
//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");
}
setDisabled() {
const multipleCtnr = document.querySelectorAll(
"[services-settings-multiple]"
@ -663,6 +692,8 @@ class Multiple {
});
}
//UTILS
getSuffixNumOrFalse(name) {
const num = !isNaN(Number(name.substring(name.lastIndexOf("_") + 1)))
? Number(name.substring(name.lastIndexOf("_") + 1))
@ -670,7 +701,12 @@ class Multiple {
return num;
}
//UTILS
getSchemaName(schemaCtnr) {
return schemaCtnr
.getAttribute("setting-container")
.replace("_SCHEMA", "")
.trim();
}
hiddenIfNoMultiples() {
//hide multiple btn if no multiple exist on a plugin

View File

@ -247,20 +247,26 @@ class FolderEditor {
initEditor() {
//editor options
this.editor.setShowPrintMargin(false);
this.darkModeBool(false);
this.setDarkMode();
}
//listen to dark toggle button to change theme
listenDarkToggle() {
this.darkMode.addEventListener("click", (e) => {
this.darkMode.checked
? this.darkModeBool(true)
: this.darkModeBool(false);
? this.changeDarkMode(true)
: this.changeDarkMode(false);
});
}
setDarkMode() {
document.querySelector("html").className.includes("dark")
? this.editor.setTheme("ace/theme/twilight")
: this.editor.setTheme("ace/theme/cloud9_day");
}
//change theme according to mode
darkModeBool(bool) {
changeDarkMode(bool) {
bool
? this.editor.setTheme("ace/theme/twilight")
: this.editor.setTheme("ace/theme/cloud9_day");

View File

@ -23,7 +23,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
aria-current="page"
>
<svg
class="fill-gray-600 dark:fill-gray-700 h-4 w-4 hover:brightness-90 dark:hover:brightness-90"
class="fill-gray-600 dark:fill-gray-600 h-4 w-4 hover:brightness-90 dark:hover:brightness-90"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
@ -59,13 +59,13 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
class="rounded transition hidden flex-col items-center mx-2 p-2 md:py-4 md:px-6 relative cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-800"
>
<button type="button">
<svg class="relative dark:brightness-125 h-8 w-8 lg:h-9 lg:w-9 fill-primary"
<svg class="translate-x-3 relative dark:brightness-125 h-8 w-8 lg:h-9 lg:w-9 fill-primary"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M64 32C28.7 32 0 60.7 0 96v64c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM344 152c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24zm96-24c0 13.3-10.7 24-24 24s-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24zM64 288c-35.3 0-64 28.7-64 64v64c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V352c0-35.3-28.7-64-64-64H64zM344 408c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24zm104-24c0 13.3-10.7 24-24 24s-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24z"/></svg>
<svg class="relative rounded-full border-2 border-white translate-y-2 -translate-x-3 dark:brightness-125 h-6 w-6 fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<svg class="relative rounded-full border-2 border-white dark:border-slate-850 dark:brightness-125 translate-y-2 h-6 w-6 fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM232 344V280H168c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H280v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/></svg>
<p
class="pt-1 mb-0 font-sans font-semibold leading-normal uppercase text-sm lg:text-md"
class="dark:text-gray-500 pt-1 mb-0 font-sans font-semibold leading-normal uppercase text-sm lg:text-md"
>
ADD SERVICE
</p>
@ -77,14 +77,14 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
>
<button type="button">
<svg
class="relative dark:brightness-125 h-8 w-8 lg:h-9 lg:w-9 fill-primary"
class="translate-x-2 relative dark:brightness-125 h-8 w-8 lg:h-9 lg:w-9 fill-primary"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128z"/></svg>
<svg class="relative rounded-full border-2 border-white translate-y-2 -translate-x-4 dark:brightness-125 h-6 w-6 fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<svg class="-translate-x-2 relative rounded-full border-2 border-white dark:border-slate-850 translate-y-2 dark:brightness-125 h-6 w-6 fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM232 344V280H168c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H280v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/></svg>
<p
class="pt-1 mb-0 font-sans font-semibold leading-normal uppercase text-sm lg:text-md"
class="dark:text-gray-500 pt-1 mb-0 font-sans font-semibold leading-normal uppercase text-sm lg:text-md"
>
ADD FILE
</p>
@ -126,20 +126,29 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
</svg>
{% endif %}
<!-- end service root-->
<!-- cache root-->
<!-- services folder -->
{% if child['type'] == "folder" and current_endpoint == "configs" and loop.depth != 1 %}
<svg class="absolute left-3 top-5 h-10 w-10 fill-primary dark:brightness-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M64 32C28.7 32 0 60.7 0 96v64c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM344 152c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24zm96-24c0 13.3-10.7 24-24 24s-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24zM64 288c-35.3 0-64 28.7-64 64v64c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V352c0-35.3-28.7-64-64-64H64zM344 408c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24zm104-24c0 13.3-10.7 24-24 24s-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24z"/></svg>
{% endif %}
<!-- end services folder-->
<!-- services files -->
{% if child['type'] == "file" and current_endpoint == "configs" and loop.depth != 1 %}
<svg
class="absolute left-3 top-5 h-10 w-10 fill-primary dark:brightness-150"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128z"/></svg>
{% endif %}
<!-- end services files-->
<!-- cache folder-->
{% if child['type'] == "folder" and current_endpoint == "cache" and loop.depth == 1 %}
<svg class="absolute left-3 top-5 h-10 w-10 fill-primary dark:brightness-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M50.7 58.5L0 160H208V32H93.7C75.5 32 58.9 42.3 50.7 58.5zM240 160H448L397.3 58.5C389.1 42.3 372.5 32 354.3 32H240V160zm208 32H0V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192z"></path>
</svg>
{% endif %}
<!-- end cache root-->
<!-- services-->
{% if child['type'] == "folder" and current_endpoint == "configs" and loop.depth != 1 %}
<svg class="absolute left-3 top-5 h-10 w-10 fill-primary dark:brightness-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M64 32C28.7 32 0 60.7 0 96v64c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM344 152c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24zm96-24c0 13.3-10.7 24-24 24s-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24zM64 288c-35.3 0-64 28.7-64 64v64c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V352c0-35.3-28.7-64-64-64H64zM344 408c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24zm104-24c0 13.3-10.7 24-24 24s-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24z"/></svg>
{% endif %}
<!-- end services-->
{% if current_endpoint == "cache" and loop.depth == '1' %}
<!-- end cache folder -->
<!-- cache file -->
{% if child['type'] == "file" and current_endpoint == "cache" %}
<svg
class="absolute left-3 top-5 h-10 w-10 fill-primary dark:brightness-150"
xmlns="http://www.w3.org/2000/svg"
@ -150,14 +159,10 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
/>
</svg>
{% endif %}
<!-- end cache file -->
{% if child['type'] == "file" %}
<svg
class="absolute left-3 top-5 h-10 w-10 fill-primary dark:brightness-150"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128z"/></svg>
{% endif %}
<p
{{current_endpoint}}-element-text
@ -197,7 +202,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
>
<div class="flex justify-start items-center">
<svg
class="h-6 w-6 fill-sky-800 dark:brightness-125"
class="h-6 w-6 fill-green-700 dark:brightness-125"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
@ -317,7 +322,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
<div class="w-full flex justify-between">
<p
{{current_endpoint}}-modal-title
class="mb-0 font-sans font-semibold leading-normal uppercase text-sm"
class="dark:text-white mb-0 font-sans font-semibold leading-normal uppercase text-sm"
>
TITLE
</p>
@ -334,19 +339,19 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
>
<p
{{current_endpoint}}-modal-path-prefix
class="mb-0 dark:text-white dark:opacity-50 text-gray-700 opacity-50 text-sm"
class="mb-0 dark:text-white dark:opacity-75 text-gray-700 opacity-50 text-sm"
></p>
<input
type="text"
name="name"
id="name"
class="dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 sm:ml-1 max-w-40 disabled:opacity-75 focus:valid:border-green-500 focus:file: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 font-normal text-gray-700 transition-all placeholder:text-gray-500"
class="dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 sm:ml-1 max-w-40 focus:valid:border-green-500 focus:file: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 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"
placeholder="path"
required
/>
<p
{{current_endpoint}}-modal-path-suffix
class="mb-0 dark:text-white dark:opacity-50 text-gray-700 opacity-50 text-sm"
class="mb-0 dark:text-white dark:opacity-75 text-gray-700 opacity-50 text-sm"
>
suffix
</p>

View File

@ -3,7 +3,7 @@
<button
type="button"
flash-sidebar-open
class="transition scale-90 sm:scale-100 dark:bg-gray-500 dark:brightness-110 hover:brightness-75 fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-2 sm:top-3 right-19 sm:right-20 xl:right-20 z-990 rounded-circle text-slate-700"
class="transition scale-90 sm:scale-100 dark:brightness-95 dark:hover:brightness-105 hover:brightness-75 fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-2 sm:top-3 right-19 sm:right-20 xl:right-20 z-990 rounded-circle text-slate-700"
>
<svg
class="fill-yellow-500 -translate-y-0.4 h-6 w-6"
@ -15,7 +15,7 @@
/>
</svg>
<div
class="px-2 translate-x-1 bottom-0 right-0 absolute rounded-full dark:bg-gray-500 bg-white"
class="px-2 translate-x-2 bottom-0 right-0 absolute rounded-full bg-white"
>
<p flash-count class="mb-0 text-sm text-bold text-red-500">
{%if messages %} {{messages.length}}{%else%}0 {%endif%}

View File

@ -1,5 +1,5 @@
<footer
class="dark:brightness-90 relative mt-4 rounded-lg w-full py-4 mb-2 bg-secondary"
class="dark:bg-green-500/90 relative mt-4 rounded-lg w-full py-4 mb-2 bg-secondary"
>
<div class="w-full px-6 mx-auto">
<div
@ -7,7 +7,7 @@
>
<div class="order-2 lg:order-1 px-0 mt-3 lg:mt-0">
<div
class="transition duration-300 text-sm tracking-wide leading-normal text-center text-white opacity-100 dark:text-white dark:opacity-90 lg:text-left"
class="transition duration-300 text-sm tracking-wide leading-normal text-center text-white opacity-100 dark:text-white lg:text-left"
>
Copyright ©
<script>

View File

@ -15,7 +15,9 @@
</h6>
<ol class="flex flex-wrap pt-1 mr-12 bg-transparent rounded-lg sm:mr-16">
<li class="text-sm leading-normal">
<a class="text-white opacity-50" href="javascript:;">Bunkerweb</a>
<a class="text-white opacity-50 dark:opacity-75" href="javascript:;"
>Bunkerweb</a
>
</li>
<li
class="text-sm pl-2 capitalize leading-normal text-white before:float-left before:pr-2 before:text-white before:content-['/']"

View File

@ -160,7 +160,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
<button
type="button"
id="submit-settings"
class="dark:brightness-90 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 hover:bg-primary/80 focus:bg-primary/80 leading-normal text-sm 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 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"
>
Submit
</button>

View File

@ -5,7 +5,7 @@
<button
type="button"
sidebar-menu-toggle
class="scale-90 sm:scale-100 dark:bg-gray-500 dark:brightness-110 hover:brightness-75 xl:hidden fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-2 sm:top-3 right-5 sm:right-4 z-990 rounded-circle text-slate-700"
class="scale-90 sm:scale-100 dark:brightness-95 dark:hover:brightness-105 hover:brightness-75 xl:hidden fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-2 sm:top-3 right-5 sm:right-4 z-990 rounded-circle text-slate-700"
>
<svg
fill="#0D6EFD"
@ -282,12 +282,12 @@
class="mr-2 flex items-center justify-center rounded-lg bg-center stroke-0 text-center p-1 xl:p-1.5"
>
<svg
class="fill-emerald-700 h-5.5 w-5.5 relative"
class="fill-emerald-600 h-5.5 w-5.5 relative"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
viewBox="0 0 384 512"
>
<path
d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"
d="M192 0c-41.8 0-77.4 26.7-90.5 64H64C28.7 64 0 92.7 0 128V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H282.5C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM305 273L177 401c-9.4 9.4-24.6 9.4-33.9 0L79 337c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L271 239c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"
/>
</svg>
</div>

View File

@ -2,7 +2,7 @@
<button
type="button"
sidebar-info-open
class="scale-90 sm:scale-100 dark:bg-gray-500 dark:brightness-110 hover:brightness-75 fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-16 sm:top-3 right-5 sm:right-4 sm:right-20 xl:right-4 z-990 rounded-circle text-slate-700"
class="scale-90 sm:scale-100 dark:brightness-95 dark:hover:brightness-105 hover:brightness-75 fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-16 sm:top-3 right-5 sm:right-4 sm:right-20 xl:right-4 z-990 rounded-circle text-slate-700"
>
<svg
class="fill-sky-500 h-6 w-6"

View File

@ -70,7 +70,7 @@ include "plugins-modal.html" %}
<form
id="dropzone-form"
action="#"
class="cursor-pointer col-span-12 border-2 rounded-lg p-2 border-dashed border-primary drop-zone"
class="cursor-pointer col-span-12 border-2 rounded-lg p-2 border-dashed border-primary dark:brightness-125 drop-zone"
>
<input
type="hidden"
@ -86,7 +86,9 @@ include "plugins-modal.html" %}
hidden
/>
<i class="fa-solid fa-cloud-upload-alt"></i>
<p class="text-sm text-center my-3">click or drag and drop</p>
<p class="dark:text-gray-500 text-sm text-center my-3">
click or drag and drop
</p>
</form>
<section class="col-span-12 progress-area"></section>
<section class="col-span-12 uploaded-area"></section>
@ -94,7 +96,7 @@ include "plugins-modal.html" %}
<!-- end dropzone -->
<div class="col-span-12 flex flex-col justify-center items-center">
<p
class="mx-4 my-3 font-sans font-semibold leading-normal uppercase text-sm"
class="dark:text-gray-300 mx-4 my-3 font-sans font-semibold leading-normal uppercase text-sm"
>
or
</p>
@ -106,7 +108,7 @@ include "plugins-modal.html" %}
<button
type="submit"
class="dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-primary hover:bg-primary/80 focus:bg-primary/80 leading-normal text-sm 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"
>
Reload
</button>
@ -222,7 +224,7 @@ include "plugins-modal.html" %}
>
<p
{{current_endpoint}}-content
class="ml-3 mr-2 mb-0 transition duration-300 ease-in-out dark:opacity-90 text-left text-sm md:text-base text-slate-700 dark:text-gray-300"
class="ml-3 mr-2 mb-0 transition duration-300 ease-in-out dark:opacity-90 text-left text-sm md:text-base text-slate-700 dark:text-gray-200"
>
{{plugin['name']}}
</p>
@ -268,7 +270,7 @@ include "plugins-modal.html" %}
>
<p
{{current_endpoint}}-content
class="ml-3 mb-0 transition duration-300 ease-in-out dark:opacity-90 text-left text-sm md:text-base text-slate-700 dark:text-gray-300"
class="ml-3 mb-0 transition duration-300 ease-in-out dark:opacity-90 text-left text-sm md:text-base text-slate-700 dark:text-gray-200"
>
{{plugin['name']}}
</p>

View File

@ -10,7 +10,7 @@
<div class="w-full flex justify-between mb-2">
<p
services-modal-title
class="transition duration-300 ease-in-out dark:opacity-90 dark:text-gray-300 mb-2 font-sans font-semibold leading-normal uppercase text-md"
class="transition duration-300 ease-in-out dark:opacity-90 dark:text-gray-200 mb-2 font-sans font-semibold leading-normal uppercase text-md"
>
SERVICE MODAL
</p>

View File

@ -6,7 +6,7 @@
<button
services-action="new"
type="button"
class="dark:brightness-90 duration-300 dark:opacity-90 w-80 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal text-base ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
class="dark:bg-green-500/90 duration-300 dark:opacity-90 w-80 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal text-base ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
New SERVICE
</button>
@ -323,7 +323,7 @@
<div class="relative w-full flex justify-center sm:justify-end">
<a href="http://{{service["SERVER_NAME"]['value']}}"
target="_blank"
class="dark:brightness-90 z-20 mx-1 bg-sky-500 hover:bg-sky-500/80 focus:bg-sky-500/80 inline-block p-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer 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-90 z-20 mx-1 bg-sky-500 hover:bg-sky-500/80 focus:bg-sky-500/80 inline-block p-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 active:opacity-85 hover:shadow-md"
>
<svg
class="h-6 w-6 fill-white"
@ -342,7 +342,7 @@
type="button"
services-name="{{service["SERVER_NAME"]['value']}}"
class="dark:brightness-90 z-20 mx-1 bg-blue-500 hover:bg-blue-500/80 focus:bg-yellow-500/80 inline-block p-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer 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-90 z-20 mx-1 bg-blue-500 hover:bg-blue-500/80 focus:bg-yellow-500/80 inline-block p-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 active:opacity-85 hover:shadow-md"
>
<svg class="h-6 w-6 fill-white"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@ -356,7 +356,7 @@
services-action="delete"
type="button"
services-name="{{service["SERVER_NAME"]['value']}}"
class="dark:brightness-90 z-20 mx-1 bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 inline-block p-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer 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-90 z-20 mx-1 bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 inline-block p-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 active:opacity-85 hover:shadow-md"
>
<svg
class="h-6 w-6 fill-white"

View File

@ -34,7 +34,7 @@
<span class="text-primary transition duration-300 ease-in-out dark:opacity-90 pl-3 pr-2 dark:text-gray-300">general</span>
<svg
{{current_endpoint}}-info-btn="general"
class="fill-blue-500 h-5 w-5 mr-2 hover:brightness-75"
class="fill-blue-500 h-5 w-5 mr-2 hover:brightness-95"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
@ -72,7 +72,7 @@
<span class="text-primary transition duration-300 ease-in-out dark:opacity-90 pl-3 pr-2 dark:text-gray-300"> {{ plugin["name"] }} </span>
<svg
{{current_endpoint}}-info-btn="{{ plugin["name"] }}"
class=" fill-blue-500 h-5 w-5 mr-2 hover:brightness-75"
class=" fill-blue-500 h-5 w-5 mr-2 hover:brightness-95"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
@ -85,7 +85,7 @@
<!-- popover -->
<div
{{current_endpoint}}-info-popover="{{ plugin["name"] }}"
class="hidden transition z-50 rounded-md p-3 left-0 absolute translate-y-6 bg-blue-500"
class="min-w-[150px] dark:brightness-90 bg-blue-500 hidden transition z-50 rounded-md p-3 left-0 absolute translate-y-6 "
>
<p class="font-bold text-sm text-white m-0">{{ plugin['description'] }}</p>
</div>