Formatted everything; completed upload capabilities

This commit is contained in:
schnulller
2022-06-04 02:42:01 +02:00
parent 743c88a4e5
commit 37b794ea05
61 changed files with 677 additions and 558 deletions

View File

@@ -468,6 +468,14 @@ Ensure the default browser behavior of the `hidden` attribute.
--tw-backdrop-sepia: ;
}
* {
transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 100ms;
}
/* TODO: check what can be inlined (eg. used once in the code, has no double paths etc...) */
/* Everything related to theme color */
@@ -570,21 +578,36 @@ body {
--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.ha-footer .ha-themetoggles #ha-toggledark:checked ~ .ha-themetoggleslider {
.dark .ha-footer .ha-themetoggles {
--tw-bg-opacity: 1;
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
}
.ha-footer .ha-themetoggles #ha-toggletwilight:checked ~ .ha-themetoggleslider {
.ha-footer .ha-themetoggles #ha-toggledark:checked ~ .ha-themetoggleslider {
--tw-bg-opacity: 1;
background-color: rgb(100 116 139 / var(--tw-bg-opacity));
background-color: rgb(226 232 240 / var(--tw-bg-opacity));
transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.ha-footer .ha-themetoggles #ha-togglebright:checked ~ .ha-themetoggleslider {
--tw-bg-opacity: 1;
background-color: rgb(248 250 252 / var(--tw-bg-opacity));
transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.ha-static {
@@ -1013,6 +1036,8 @@ body {
}
.ha-tradzhtext .ha-marginalbox.ha-expanded-box .ha-marginallist, .ha-lettertext .ha-marginalbox.ha-expanded-box .ha-marginallist {
--tw-bg-opacity: 1;
background-color: rgb(241 245 249 / var(--tw-bg-opacity));
padding-bottom: 0.25rem;
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -1020,6 +1045,8 @@ body {
}
.dark .ha-tradzhtext .ha-marginalbox.ha-expanded-box .ha-marginallist, .dark .ha-lettertext .ha-marginalbox.ha-expanded-box .ha-marginallist {
--tw-bg-opacity: 1;
background-color: rgb(71 85 105 / var(--tw-bg-opacity));
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -1115,6 +1142,8 @@ body {
color: rgb(31 41 55 / var(--tw-text-opacity)) !important;
}
/* Classes */
body {
height: 100%;
width: 100%;
@@ -1258,7 +1287,7 @@ body {
.ha-footer .ha-themetoggles {
position: relative;
height: 1rem;
width: 49px;
width: 34px;
white-space: nowrap;
border-radius: 1.5rem;
padding-left: 0.125rem;
@@ -1305,12 +1334,8 @@ body {
left: 0.25rem;
}
.ha-footer .ha-themetoggles #ha-toggletwilight:checked ~ .ha-themetoggleslider {
left: 19px;
}
.ha-footer .ha-themetoggles #ha-togglebright:checked ~ .ha-themetoggleslider {
left: 34px;
left: 19px;
}
/* Classes for static pages */
@@ -2254,6 +2279,7 @@ body {
flex-wrap: wrap;
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
padding-right: 0.25rem;
font-size: 0.875rem;
line-height: 1.25rem;
line-height: 1.25;
@@ -2791,6 +2817,10 @@ body {
width: 2rem;
}
.max-w-\[25\%\] {
max-width: 25%;
}
.shrink-0 {
flex-shrink: 0;
}
@@ -2827,6 +2857,10 @@ body {
flex-wrap: wrap;
}
.gap-5 {
gap: 1.25rem;
}
.overflow-hidden {
overflow: hidden;
}

View File

@@ -80,6 +80,9 @@
}
@layer components {
* {
@apply transition-colors duration-100
}
/* TODO: check what can be inlined (eg. used once in the code, has no double paths etc...) */
/* Everything related to theme color */
@@ -118,19 +121,15 @@
}
.ha-footer .ha-themetoggles {
@apply bg-slate-200 shadow-inner
@apply bg-slate-200 dark:bg-slate-800 transition-colors duration-300 shadow-inner
}
.ha-footer .ha-themetoggles #ha-toggledark:checked ~ .ha-themetoggleslider {
@apply bg-slate-800
}
.ha-footer .ha-themetoggles #ha-toggletwilight:checked ~ .ha-themetoggleslider {
@apply bg-slate-500
@apply bg-slate-200 transition-colors duration-300
}
.ha-footer .ha-themetoggles #ha-togglebright:checked ~ .ha-themetoggleslider {
@apply bg-slate-50
@apply bg-slate-50 transition-colors duration-300
}
.ha-static {
@@ -278,7 +277,7 @@
.ha-tradzhtext .ha-marginalbox.ha-expanded-box .ha-marginallist,
.ha-lettertext .ha-marginalbox.ha-expanded-box .ha-marginallist {
@apply shadow-md dark:shadow-lg pb-1
@apply shadow-md dark:shadow-lg pb-1 bg-slate-100 dark:bg-slate-600
}
.ha-tradzhtext .ha-btn-collapsed-box,
@@ -322,7 +321,7 @@
@apply !text-hamannHighlight dark:!text-gray-800
}
/* Classes */
body {
@apply text-base desktop:text-lg w-full h-full;
}
@@ -373,7 +372,7 @@
}
.ha-footer .ha-themetoggles {
@apply whitespace-nowrap relative px-0.5 rounded-3xl h-4 w-[49px]
@apply whitespace-nowrap relative px-0.5 rounded-3xl h-4 w-[34px]
}
.ha-footer .ha-themetoggles * {
@@ -396,12 +395,8 @@
@apply left-1
}
.ha-footer .ha-themetoggles #ha-toggletwilight:checked ~ .ha-themetoggleslider {
@apply left-[19px]
}
.ha-footer .ha-themetoggles #ha-togglebright:checked ~ .ha-themetoggleslider {
@apply left-[34px]
@apply left-[19px]
}
/* Classes for static pages */
@@ -898,7 +893,7 @@
.ha-tradzhtext .ha-marginalbox .ha-marginallist,
.ha-lettertext .ha-marginalbox .ha-marginallist {
@apply text-sm leading-tight flex flex-wrap gap-x-6
@apply text-sm leading-tight flex flex-wrap gap-x-6 pr-1
}
.ha-tradzhtext .ha-marginalbox .ha-marginallist .ha-marginal,

View File

@@ -221,21 +221,8 @@ const go_to_dark = function () {
document.documentElement.classList.add("dark");
};
const go_to_twilight = function () {
document.documentElement.classList.remove("dark");
let elements = document.getElementsByClassName("ha-twilighttogglebar");
for (let el of elements) {
el.classList.add("dark");
}
localStorage.setItem("theme", "ha-toggletwilight");
};
const go_to_bright = function () {
document.documentElement.classList.remove("dark");
let elements = document.getElementsByClassName("ha-twilighttogglebar");
for (let el of elements) {
el.classList.remove("dark");
}
localStorage.setItem("theme", "ha-togglebright");
};
@@ -335,7 +322,6 @@ window.addEventListener("load", function () {
// Register theme toggler
if (
document.getElementById("ha-togglebright") !== null &&
document.getElementById("ha-toggletwilight") !== null &&
this.document.getElementById("ha-toggledark") !== null
) {
document
@@ -344,9 +330,6 @@ window.addEventListener("load", function () {
document
.getElementById("ha-toggledark")
.addEventListener("click", go_to_dark);
document
.getElementById("ha-toggletwilight")
.addEventListener("click", go_to_twilight);
}
get_theme_settings("ha-togglebright");
});