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

fix tab focus style + dark mode style

This commit is contained in:
BlasenhauerJ 2022-12-05 17:00:15 +01:00
parent 0bd6d56551
commit 4595295bd8
5 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
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;
}
@ -2484,6 +2488,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);
}
.brightness-90 {
--tw-brightness: brightness(.9);
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);
}
@ -3129,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() {

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");
});
}

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

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