diff --git a/assets/css/app.css b/assets/css/app.css index 6ca11349b..1507ccb13 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -1,3 +1,5 @@ +@import "./breakpoints.css"; + @font-face { font-family: "Montserrat"; src: url("../font/Montserrat-Medium.woff2") format("woff2"); @@ -11,16 +13,6 @@ font-style: normal; } -/* Bootstrap Breakpoints as Custom Media Queries */ -@custom-media --sm-and-up (min-width: 576px); -@custom-media --md-and-up (min-width: 768px); -@custom-media --lg-and-up (min-width: 992px); -@custom-media --xl-and-up (min-width: 1200px); -@custom-media --xxl-and-up (min-width: 1400px); - -@custom-media --light-mode (prefers-color-scheme: light); -@custom-media --dark-mode (prefers-color-scheme: dark); - :root { --evcc-green: #baffcb; --evcc-dark-green: #0fde41ff; @@ -380,7 +372,7 @@ a:hover { } /* breakpoint lg */ -@media (min-width: 992px) { +@media (--lg-and-up) { .modal-lg, .modal-xl { --bs-modal-width: 850px; @@ -441,7 +433,7 @@ a:hover { } /* breakpoint sm */ -@media (min-width: 576px) { +@media (--sm-and-up) { .modal-content { padding: 2rem; } @@ -662,7 +654,7 @@ input[list]::-webkit-list-button { padding-left: 0.5rem; } -@media (min-width: 576px) { +@media (--sm-and-up) { .w-sm-100 { width: 100% !important; } @@ -777,7 +769,7 @@ input::-webkit-date-and-time-value { font-size: 8px; } -@media (min-width: 576px) { +@media (--sm-and-up) { .textarea--tiny { font-size: 0.875em; } diff --git a/assets/css/breakpoints.css b/assets/css/breakpoints.css new file mode 100644 index 000000000..5081a9385 --- /dev/null +++ b/assets/css/breakpoints.css @@ -0,0 +1,9 @@ +/* Bootstrap Breakpoints as Custom Media Queries */ +@custom-media --sm-and-up (min-width: 576px); +@custom-media --md-and-up (min-width: 768px); +@custom-media --lg-and-up (min-width: 992px); +@custom-media --xl-and-up (min-width: 1200px); +@custom-media --xxl-and-up (min-width: 1400px); + +@custom-media --light-mode (prefers-color-scheme: light); +@custom-media --dark-mode (prefers-color-scheme: dark); diff --git a/assets/js/colors.ts b/assets/js/colors.ts index c684ead4a..384f5b721 100644 --- a/assets/js/colors.ts +++ b/assets/js/colors.ts @@ -50,17 +50,21 @@ const colors: { ], }); -export const dimColor = (color: string | null) => { - return color?.toLowerCase().replace(/ff$/, "20"); +// normalize 6-digit hex to 8-digit, then replace alpha +const setAlpha = (color: string | null, alpha: string): string | undefined => { + if (!color) return undefined; + const c = color.trim().toLowerCase(); + // #rrggbb → append alpha, #rrggbbaa → replace alpha + if (c.length === 7) return c + alpha; + if (c.length === 9) return c.slice(0, 7) + alpha; + return c; }; -export const lighterColor = (color: string | null) => { - return color?.toLowerCase().replace(/ff$/, "aa"); -}; +export const dimColor = (color: string | null) => setAlpha(color, "20"); -export const fullColor = (color: string | null) => { - return color?.toLowerCase().replace(/20$/, "ff"); -}; +export const lighterColor = (color: string | null) => setAlpha(color, "aa"); + +export const fullColor = (color: string | null) => setAlpha(color, "ff"); function updateCssColors() { const style = window.getComputedStyle(document.documentElement); diff --git a/assets/js/components/Config/YamlEditorContainer.vue b/assets/js/components/Config/YamlEditorContainer.vue index 65ab4d91b..050399821 100644 --- a/assets/js/components/Config/YamlEditorContainer.vue +++ b/assets/js/components/Config/YamlEditorContainer.vue @@ -52,13 +52,15 @@ export default {