Add theme cycling (system/light/dark) with localStorage persistence and FOUC prevention. Restructure CSS color tokens to respond to data-theme attribute across all components. Redesign header as a floating glass pill bar with smooth view transitions including clip-reveal logo animation.
This commit is contained in:
+118
-86
@@ -62,6 +62,8 @@
|
|||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
SEMANTIC COLOR SYSTEM - LIGHT MODE
|
SEMANTIC COLOR SYSTEM - LIGHT MODE
|
||||||
|
Warm, easy-on-the-eyes palette
|
||||||
|
Two accents only: blue (interactive) + red (emphasis)
|
||||||
============================================ */
|
============================================ */
|
||||||
|
|
||||||
/* Primary Color - Main interactive elements */
|
/* Primary Color - Main interactive elements */
|
||||||
@@ -74,39 +76,39 @@
|
|||||||
--color-accent-hover: #d07179;
|
--color-accent-hover: #d07179;
|
||||||
--color-accent-active: #a04e56;
|
--color-accent-active: #a04e56;
|
||||||
|
|
||||||
/* Secondary Accent - Alternative emphasis */
|
/* Secondary Accent - demoted to match primary for consistency */
|
||||||
--color-secondary: var(--nord12);
|
--color-secondary: var(--nord10);
|
||||||
--color-secondary-hover: #e09880;
|
--color-secondary-hover: var(--nord9);
|
||||||
--color-secondary-active: #b87060;
|
--color-secondary-active: var(--nord8);
|
||||||
|
|
||||||
/* Background Colors */
|
/* Background Colors */
|
||||||
--color-bg-primary: #fbf9f3;
|
--color-bg-primary: #f8f6f1;
|
||||||
--color-bg-secondary: var(--nord5);
|
--color-bg-secondary: #efecea;
|
||||||
--color-bg-tertiary: var(--nord6);
|
--color-bg-tertiary: #e8e5e1;
|
||||||
--color-bg-elevated: var(--nord4);
|
--color-bg-elevated: #dfdcd8;
|
||||||
|
|
||||||
/* Surface Colors (cards, panels, etc.) */
|
/* Surface Colors (cards, panels, etc.) */
|
||||||
--color-surface: var(--nord6);
|
--color-surface: #efecea;
|
||||||
--color-surface-hover: var(--nord5);
|
--color-surface-hover: #e8e5e1;
|
||||||
|
|
||||||
/* Text Colors */
|
/* Text Colors */
|
||||||
--color-text-primary: var(--nord0);
|
--color-text-primary: #2a2a2a;
|
||||||
--color-text-secondary: var(--nord3);
|
--color-text-secondary: #555;
|
||||||
--color-text-tertiary: var(--nord2);
|
--color-text-tertiary: #777;
|
||||||
--color-text-inverse: white;
|
--color-text-inverse: white;
|
||||||
--color-text-on-primary: white;
|
--color-text-on-primary: white;
|
||||||
--color-text-on-accent: white;
|
--color-text-on-accent: white;
|
||||||
--color-text-muted: var(--nord4);
|
--color-text-muted: #aaa;
|
||||||
|
|
||||||
/* UI Element Colors */
|
/* UI Element Colors */
|
||||||
--color-ui-dark: var(--nord0);
|
--color-ui-dark: #2a2a2a;
|
||||||
--color-ui-mid: var(--nord3);
|
--color-ui-mid: #777;
|
||||||
--color-ui-light: var(--nord4);
|
--color-ui-light: #bbb;
|
||||||
--color-ui-hover: var(--nord3);
|
--color-ui-hover: #555;
|
||||||
|
|
||||||
/* Border Colors */
|
/* Border Colors */
|
||||||
--color-border: var(--nord4);
|
--color-border: #ddd;
|
||||||
--color-border-hover: var(--nord3);
|
--color-border-hover: #bbb;
|
||||||
|
|
||||||
/* Link Colors */
|
/* Link Colors */
|
||||||
--color-link: var(--nord10);
|
--color-link: var(--nord10);
|
||||||
@@ -153,65 +155,114 @@
|
|||||||
DARK MODE COLOR OVERRIDES
|
DARK MODE COLOR OVERRIDES
|
||||||
============================================ */
|
============================================ */
|
||||||
|
|
||||||
|
/* System prefers dark, but user hasn't forced light */
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
:root {
|
:root:not([data-theme="light"]) {
|
||||||
/* Dark mode custom colors */
|
/* Dark mode primitives - true black base */
|
||||||
--nord6-dark: #292c31;
|
--nord6-dark: #1a1a1a;
|
||||||
--accent-dark: #1f1f21;
|
--accent-dark: #1a1a1a;
|
||||||
--background-dark: #21201b;
|
--background-dark: #000;
|
||||||
--font-default-dark: #ffffff;
|
--font-default-dark: #e5e5e5;
|
||||||
|
|
||||||
/* Primary Color - Same but adjusted for dark backgrounds */
|
/* Primary Color - frost blue, the single interactive accent */
|
||||||
--color-primary: var(--nord9);
|
--color-primary: var(--nord8);
|
||||||
--color-primary-hover: var(--nord8);
|
--color-primary-hover: var(--nord7);
|
||||||
--color-primary-active: var(--nord7);
|
--color-primary-active: var(--nord9);
|
||||||
|
|
||||||
/* Accent Color - Slightly lighter for dark mode */
|
/* Accent Color - red, for emphasis and actions */
|
||||||
--color-accent: #d07179;
|
--color-accent: var(--nord11);
|
||||||
--color-accent-hover: #e08189;
|
--color-accent-hover: #d07179;
|
||||||
--color-accent-active: var(--nord11);
|
--color-accent-active: #a04e56;
|
||||||
|
|
||||||
/* Secondary Accent */
|
/* Secondary Accent - same as primary for consistency */
|
||||||
--color-secondary: #e09880;
|
--color-secondary: var(--nord8);
|
||||||
--color-secondary-hover: #f0a890;
|
--color-secondary-hover: var(--nord7);
|
||||||
--color-secondary-active: var(--nord12);
|
--color-secondary-active: var(--nord9);
|
||||||
|
|
||||||
/* Background Colors */
|
/* Background Colors - true black hierarchy */
|
||||||
--color-bg-primary: var(--background-dark);
|
--color-bg-primary: #000;
|
||||||
--color-bg-secondary: var(--accent-dark);
|
--color-bg-secondary: #111;
|
||||||
--color-bg-tertiary: var(--nord6-dark);
|
--color-bg-tertiary: #1a1a1a;
|
||||||
--color-bg-elevated: var(--nord0);
|
--color-bg-elevated: #222;
|
||||||
|
|
||||||
/* Surface Colors */
|
/* Surface Colors - subtle lift from black */
|
||||||
--color-surface: var(--nord0);
|
--color-surface: #1a1a1a;
|
||||||
--color-surface-hover: var(--nord1);
|
--color-surface-hover: #222;
|
||||||
|
|
||||||
/* Text Colors */
|
/* Text Colors - soft white, not blinding */
|
||||||
--color-text-primary: var(--font-default-dark);
|
--color-text-primary: #e5e5e5;
|
||||||
--color-text-secondary: var(--nord4);
|
--color-text-secondary: #aaa;
|
||||||
--color-text-tertiary: var(--nord5);
|
--color-text-tertiary: #888;
|
||||||
--color-text-inverse: var(--nord0);
|
--color-text-inverse: #111;
|
||||||
--color-text-on-primary: white;
|
--color-text-on-primary: #000;
|
||||||
--color-text-on-accent: white;
|
--color-text-on-accent: white;
|
||||||
--color-text-muted: var(--nord3);
|
--color-text-muted: #555;
|
||||||
|
|
||||||
/* UI Element Colors */
|
/* UI Element Colors */
|
||||||
--color-ui-dark: var(--nord6);
|
--color-ui-dark: #e5e5e5;
|
||||||
--color-ui-mid: var(--nord4);
|
--color-ui-mid: #888;
|
||||||
--color-ui-light: var(--nord3);
|
--color-ui-light: #444;
|
||||||
--color-ui-hover: var(--nord2);
|
--color-ui-hover: #666;
|
||||||
|
|
||||||
/* Border Colors */
|
/* Border Colors */
|
||||||
--color-border: var(--nord2);
|
--color-border: #333;
|
||||||
--color-border-hover: var(--nord3);
|
--color-border-hover: #444;
|
||||||
|
|
||||||
/* Link Colors */
|
/* Link Colors - frost blue */
|
||||||
--color-link: var(--nord8);
|
--color-link: var(--nord8);
|
||||||
--color-link-visited: #c89fb6;
|
--color-link-visited: #c89fb6;
|
||||||
--color-link-hover: var(--nord7);
|
--color-link-hover: var(--nord7);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* User forced dark mode */
|
||||||
|
:root[data-theme="dark"] {
|
||||||
|
--nord6-dark: #1a1a1a;
|
||||||
|
--accent-dark: #1a1a1a;
|
||||||
|
--background-dark: #000;
|
||||||
|
--font-default-dark: #e5e5e5;
|
||||||
|
|
||||||
|
--color-primary: var(--nord8);
|
||||||
|
--color-primary-hover: var(--nord7);
|
||||||
|
--color-primary-active: var(--nord9);
|
||||||
|
|
||||||
|
--color-accent: var(--nord11);
|
||||||
|
--color-accent-hover: #d07179;
|
||||||
|
--color-accent-active: #a04e56;
|
||||||
|
|
||||||
|
--color-secondary: var(--nord8);
|
||||||
|
--color-secondary-hover: var(--nord7);
|
||||||
|
--color-secondary-active: var(--nord9);
|
||||||
|
|
||||||
|
--color-bg-primary: #000;
|
||||||
|
--color-bg-secondary: #111;
|
||||||
|
--color-bg-tertiary: #1a1a1a;
|
||||||
|
--color-bg-elevated: #222;
|
||||||
|
|
||||||
|
--color-surface: #1a1a1a;
|
||||||
|
--color-surface-hover: #222;
|
||||||
|
|
||||||
|
--color-text-primary: #e5e5e5;
|
||||||
|
--color-text-secondary: #aaa;
|
||||||
|
--color-text-tertiary: #888;
|
||||||
|
--color-text-inverse: #111;
|
||||||
|
--color-text-on-primary: #000;
|
||||||
|
--color-text-on-accent: white;
|
||||||
|
--color-text-muted: #555;
|
||||||
|
|
||||||
|
--color-ui-dark: #e5e5e5;
|
||||||
|
--color-ui-mid: #888;
|
||||||
|
--color-ui-light: #444;
|
||||||
|
--color-ui-hover: #666;
|
||||||
|
|
||||||
|
--color-border: #333;
|
||||||
|
--color-border-hover: #444;
|
||||||
|
|
||||||
|
--color-link: var(--nord8);
|
||||||
|
--color-link-visited: #c89fb6;
|
||||||
|
--color-link-hover: var(--nord7);
|
||||||
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
BASE STYLES
|
BASE STYLES
|
||||||
============================================ */
|
============================================ */
|
||||||
@@ -276,18 +327,12 @@ a:focus-visible {
|
|||||||
|
|
||||||
/* Light background button (with dark mode) */
|
/* Light background button (with dark mode) */
|
||||||
.g-btn-light {
|
.g-btn-light {
|
||||||
background-color: var(--nord5);
|
background-color: var(--color-surface);
|
||||||
color: var(--nord0);
|
color: var(--color-text-primary);
|
||||||
box-shadow: var(--shadow-sm);
|
box-shadow: var(--shadow-sm);
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.g-btn-light {
|
|
||||||
background-color: var(--nord0);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dark background button */
|
/* Dark background button - stays dark in both modes */
|
||||||
.g-btn-dark,
|
.g-btn-dark,
|
||||||
.g-btn-dark:visited,
|
.g-btn-dark:visited,
|
||||||
.g-btn-dark:link {
|
.g-btn-dark:link {
|
||||||
@@ -324,8 +369,8 @@ a:focus-visible {
|
|||||||
.g-tag:link {
|
.g-tag:link {
|
||||||
padding: 0.25em 1em;
|
padding: 0.25em 1em;
|
||||||
border-radius: var(--radius-pill);
|
border-radius: var(--radius-pill);
|
||||||
background-color: var(--nord5);
|
background-color: var(--color-surface);
|
||||||
color: var(--nord0);
|
color: var(--color-text-primary);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
|
transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
|
||||||
@@ -336,22 +381,9 @@ a:focus-visible {
|
|||||||
.g-tag:hover,
|
.g-tag:hover,
|
||||||
.g-tag:focus-visible {
|
.g-tag:focus-visible {
|
||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
background-color: var(--nord8);
|
background-color: var(--color-primary);
|
||||||
box-shadow: var(--shadow-hover);
|
box-shadow: var(--shadow-hover);
|
||||||
color: var(--nord0);
|
color: var(--color-text-on-primary);
|
||||||
}
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.g-tag,
|
|
||||||
.g-tag:visited,
|
|
||||||
.g-tag:link {
|
|
||||||
background-color: var(--nord0);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.g-tag:hover,
|
|
||||||
.g-tag:focus-visible {
|
|
||||||
background-color: var(--nord8);
|
|
||||||
color: var(--nord0);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
|
|||||||
+7
-1
@@ -2,11 +2,17 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<link rel="manifest" href="/manifest.json" />
|
<link rel="manifest" href="/manifest.json" />
|
||||||
<meta name="theme-color" content="#5E81AC" />
|
<meta name="theme-color" content="#5E81AC" />
|
||||||
<link rel="apple-touch-icon" href="/favicon-192.png" />
|
<link rel="apple-touch-icon" href="/favicon-192.png" />
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
var t = localStorage.getItem('theme');
|
||||||
|
if (t === 'light' || t === 'dark') document.documentElement.dataset.theme = t;
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
<body data-sveltekit-preload-data="hover">
|
<body data-sveltekit-preload-data="hover">
|
||||||
|
|||||||
@@ -23,10 +23,14 @@ let { onclick } = $props<{ onclick?: () => void }>();
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.counter-button {
|
:global(:root:not([data-theme="dark"])) .counter-button {
|
||||||
background: var(--nord5);
|
background: var(--nord5);
|
||||||
border-color: var(--nord10);
|
border-color: var(--nord10);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .counter-button {
|
||||||
|
background: var(--nord5);
|
||||||
|
border-color: var(--nord10);
|
||||||
}
|
}
|
||||||
|
|
||||||
.counter-button:hover {
|
.counter-button:hover {
|
||||||
@@ -35,9 +39,12 @@ let { onclick } = $props<{ onclick?: () => void }>();
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.counter-button:hover {
|
:global(:root:not([data-theme="dark"])) .counter-button:hover {
|
||||||
background: var(--nord4);
|
background: var(--nord4);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .counter-button:hover {
|
||||||
|
background: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.counter-button svg {
|
.counter-button svg {
|
||||||
@@ -48,9 +55,12 @@ let { onclick } = $props<{ onclick?: () => void }>();
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.counter-button svg {
|
:global(:root:not([data-theme="dark"])) .counter-button svg {
|
||||||
fill: var(--nord10);
|
fill: var(--nord10);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .counter-button svg {
|
||||||
|
fill: var(--nord10);
|
||||||
}
|
}
|
||||||
|
|
||||||
.counter-button:hover svg {
|
.counter-button:hover svg {
|
||||||
|
|||||||
@@ -28,13 +28,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.form-section {
|
:global(:root:not([data-theme="light"])) .form-section {
|
||||||
background: var(--nord1);
|
background: var(--nord1);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-section h2 {
|
:global(:root:not([data-theme="light"])) .form-section h2 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .form-section {
|
||||||
|
background: var(--nord1);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .form-section h2 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
+242
-315
@@ -1,7 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from "svelte";
|
|
||||||
import { page } from '$app/stores';
|
|
||||||
import Symbol from "./Symbol.svelte"
|
import Symbol from "./Symbol.svelte"
|
||||||
|
import ThemeToggle from "./ThemeToggle.svelte"
|
||||||
import type { Snippet } from 'svelte';
|
import type { Snippet } from 'svelte';
|
||||||
|
|
||||||
let {
|
let {
|
||||||
@@ -9,326 +8,211 @@ let {
|
|||||||
language_selector_mobile,
|
language_selector_mobile,
|
||||||
language_selector_desktop,
|
language_selector_desktop,
|
||||||
right_side,
|
right_side,
|
||||||
children
|
children,
|
||||||
|
fullSymbol = false
|
||||||
}: {
|
}: {
|
||||||
links?: Snippet;
|
links?: Snippet;
|
||||||
language_selector_mobile?: Snippet;
|
language_selector_mobile?: Snippet;
|
||||||
language_selector_desktop?: Snippet;
|
language_selector_desktop?: Snippet;
|
||||||
right_side?: Snippet;
|
right_side?: Snippet;
|
||||||
children?: Snippet;
|
children?: Snippet;
|
||||||
|
fullSymbol?: boolean;
|
||||||
} = $props();
|
} = $props();
|
||||||
|
|
||||||
let underlineLeft = $state(0);
|
|
||||||
let underlineWidth = $state(0);
|
|
||||||
let disableTransition = $state(false);
|
|
||||||
|
|
||||||
function toggle_sidebar(state){
|
|
||||||
const checkbox = document.getElementById('nav-toggle')
|
|
||||||
if(state === undefined) checkbox.checked = !checkbox.checked
|
|
||||||
else checkbox.checked = !state
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateUnderline() {
|
|
||||||
const activeLink = document.querySelector('.site_header a.active');
|
|
||||||
const linksWrapper = document.querySelector('.links-wrapper');
|
|
||||||
|
|
||||||
if (activeLink && linksWrapper) {
|
|
||||||
const wrapperRect = linksWrapper.getBoundingClientRect();
|
|
||||||
const linkRect = activeLink.getBoundingClientRect();
|
|
||||||
|
|
||||||
// Get computed padding to exclude from width and adjust position
|
|
||||||
const computedStyle = window.getComputedStyle(activeLink);
|
|
||||||
const paddingLeft = parseFloat(computedStyle.paddingLeft);
|
|
||||||
const paddingRight = parseFloat(computedStyle.paddingRight);
|
|
||||||
|
|
||||||
underlineLeft = linkRect.left - wrapperRect.left + paddingLeft;
|
|
||||||
underlineWidth = linkRect.width - paddingLeft - paddingRight;
|
|
||||||
} else {
|
|
||||||
underlineWidth = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update underline when page changes
|
|
||||||
$effect(() => {
|
|
||||||
$page.url.pathname; // Subscribe to pathname changes
|
|
||||||
// Use setTimeout to ensure DOM has updated
|
|
||||||
setTimeout(updateUnderline, 0);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMount( () => {
|
|
||||||
const link_els = document.querySelectorAll("nav a")
|
|
||||||
link_els.forEach((el) => {
|
|
||||||
el.addEventListener("click", () => {toggle_sidebar(true)});
|
|
||||||
})
|
|
||||||
|
|
||||||
// Initialize underline position
|
|
||||||
updateUnderline();
|
|
||||||
|
|
||||||
// Update underline on resize, with transition disabled
|
|
||||||
let resizeTimer;
|
|
||||||
function handleResize() {
|
|
||||||
disableTransition = true;
|
|
||||||
updateUnderline(); // Update immediately to prevent lag
|
|
||||||
|
|
||||||
clearTimeout(resizeTimer);
|
|
||||||
resizeTimer = setTimeout(() => {
|
|
||||||
// Re-enable transition after resize has settled
|
|
||||||
disableTransition = false;
|
|
||||||
}, 150);
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('resize', handleResize);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener('resize', handleResize);
|
|
||||||
clearTimeout(resizeTimer);
|
|
||||||
};
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
nav{
|
/* ═══════════════════════════════════════════
|
||||||
position: sticky;
|
WRAPPER & LAYOUT
|
||||||
background-color: var(--nord0);
|
═══════════════════════════════════════════ */
|
||||||
top: 0;
|
.wrapper {
|
||||||
z-index: 10;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between !important;
|
|
||||||
align-items: center;
|
|
||||||
box-shadow: 0 1em 1rem 0rem rgba(0,0,0,0.4);
|
|
||||||
height: var(--header-h);
|
|
||||||
padding-left: 0.5rem;
|
|
||||||
view-transition-name: site-header;
|
|
||||||
}
|
|
||||||
.nav-toggle{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.site_header li),
|
|
||||||
:global(a.entry)
|
|
||||||
{
|
|
||||||
list-style-type:none;
|
|
||||||
transition: color 100ms;
|
|
||||||
color: white;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
:global(.site_header li>a)
|
|
||||||
{
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 1rem;
|
|
||||||
color: inherit;
|
|
||||||
border-radius: var(--radius-pill);
|
|
||||||
padding: 0.4rem 0.6rem;
|
|
||||||
}
|
|
||||||
:global(a.entry),
|
|
||||||
:global(a.entry:link),
|
|
||||||
:global(a.entry:visited)
|
|
||||||
{
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 1rem;
|
|
||||||
color: white !important;
|
|
||||||
border-radius: var(--radius-pill);
|
|
||||||
padding: 0.4rem 0.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.site_header li:hover),
|
|
||||||
:global(.site_header li:focus-within),
|
|
||||||
:global(.site_header li:has(a.active)),
|
|
||||||
:global(a.entry:hover),
|
|
||||||
:global(a.entry:focus-visible),
|
|
||||||
:global(a.entry:link:hover),
|
|
||||||
:global(a.entry:visited:hover),
|
|
||||||
:global(a.entry:visited:focus-visible)
|
|
||||||
{
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--nord8) !important;
|
|
||||||
}
|
|
||||||
:global(.site_header) {
|
|
||||||
padding-block: 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 0.5rem;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
max-width: 1000px;
|
|
||||||
margin: 0;
|
|
||||||
margin-inline: auto;
|
|
||||||
}
|
|
||||||
.links-wrapper {
|
|
||||||
position: relative;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.active-underline {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 1.4rem;
|
|
||||||
height: 1.25px;
|
|
||||||
background-color: var(--nord8);
|
|
||||||
transition: left 300ms ease-out, width 300ms ease-out;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.active-underline.no-transition {
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
.nav_button{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.button_wrapper{
|
|
||||||
display: none;
|
|
||||||
padding-inline: 0.5rem;
|
|
||||||
}
|
|
||||||
.header-shadow{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.right-buttons{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
.header-right{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
:global(svg.symbol){
|
|
||||||
--symbol-size: calc(var(--header-h) - 1rem);
|
|
||||||
width: var(--symbol-size);
|
|
||||||
border-radius: 10000px;
|
|
||||||
margin: 0.25rem;
|
|
||||||
}
|
|
||||||
/*:global(a:has(svg.symbol)){
|
|
||||||
padding: 0 !important;
|
|
||||||
width: 4rem;
|
|
||||||
height: 4rem;
|
|
||||||
margin-left: 1rem;
|
|
||||||
}*/
|
|
||||||
.wrapper{
|
|
||||||
--header-h: 3rem;
|
--header-h: 3rem;
|
||||||
--symbol-size: calc(var(--header-h) - 1rem);
|
display: flex;
|
||||||
display:flex;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 100svh;
|
min-height: 100svh;
|
||||||
}
|
}
|
||||||
footer{
|
footer {
|
||||||
padding-block: 1rem;
|
padding-block: 1rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 800px) {
|
/* ═══════════════════════════════════════════
|
||||||
.button_wrapper{
|
FLOATING GLASS BAR
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
nav {
|
||||||
|
position: sticky;
|
||||||
|
top: 12px;
|
||||||
|
z-index: 100;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: sticky;
|
|
||||||
background-color: var(--nord0);
|
|
||||||
width: 100%;
|
|
||||||
height: var(--header-h);
|
height: var(--header-h);
|
||||||
top: 0;
|
gap: 0.4rem;
|
||||||
z-index: 9999;
|
padding: 0 0.8rem;
|
||||||
}
|
margin: 12px auto 0;
|
||||||
.header-shadow{
|
width: fit-content;
|
||||||
display: block;
|
max-width: calc(100% - 1.5rem);
|
||||||
position: sticky;
|
border-radius: 100px;
|
||||||
top: 0;
|
background: var(--nav-bg, rgba(46, 52, 64, 0.82));
|
||||||
width: 100%;
|
backdrop-filter: blur(16px);
|
||||||
height: var(--header-h);
|
-webkit-backdrop-filter: blur(16px);
|
||||||
margin-top: calc(-1 * var(--header-h));
|
border: 1px solid var(--nav-border, rgba(255,255,255,0.08));
|
||||||
box-shadow: 0 1em 1rem 0rem rgba(0,0,0,0.4);
|
box-shadow: 0 4px 24px var(--nav-shadow, rgba(0,0,0,0.25));
|
||||||
z-index: 9997;
|
view-transition-name: site-header;
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.nav_button{
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
fill: white;
|
|
||||||
margin-inline: 0.5rem;
|
|
||||||
width: 1.25rem;
|
|
||||||
height: 1.25rem;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.nav_button svg{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
transition: var(--transition-fast);
|
|
||||||
}
|
|
||||||
.nav_button:hover,
|
|
||||||
.nav_button:active,
|
|
||||||
.nav-toggle:focus-visible + .nav_button{
|
|
||||||
fill: var(--nord8);
|
|
||||||
scale: 0.9;
|
|
||||||
}
|
|
||||||
.nav_site:not(.no-links){
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 100vh; /* dvh does not work, breaks because of transition and only being applied after scroll ends*/
|
|
||||||
margin-bottom: 50vh;
|
|
||||||
width: min(95svw, 25em);
|
|
||||||
z-index: 9998;
|
|
||||||
flex-direction: column;
|
|
||||||
padding-inline: 0.5rem;
|
|
||||||
}
|
|
||||||
.nav_site:not(.no-links)::before{
|
|
||||||
content: '';
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
:global(.nav_site:not(.no-links) ul){
|
|
||||||
width: 100% ;
|
|
||||||
}
|
|
||||||
.nav_site:not(.no-links) :first-child{
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
.nav_site:not(.no-links){
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
.wrapper:has(.nav-toggle:checked) .nav_site:not(.no-links){
|
|
||||||
transform: translateX(0);
|
|
||||||
transition: transform 100ms;
|
|
||||||
}
|
|
||||||
:global(.nav_site:not(.no-links) a:last-child){
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav_site:not(.no-links) .links-wrapper {
|
/* token defaults (dark bar) */
|
||||||
width: 100%;
|
--nav-text: rgba(255,255,255,0.65);
|
||||||
padding: 0 2rem;
|
--nav-text-hover: white;
|
||||||
|
--nav-text-active: white;
|
||||||
|
--nav-hover-bg: rgba(255,255,255,0.1);
|
||||||
|
--nav-active-bg: rgba(136, 192, 208, 0.25);
|
||||||
|
--nav-btn-border: rgba(255,255,255,0.2);
|
||||||
|
--nav-btn-border-hover: rgba(255,255,255,0.4);
|
||||||
|
--nav-divider: rgba(255,255,255,0.15);
|
||||||
|
}
|
||||||
|
/* Dark system preference */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
nav {
|
||||||
|
--nav-bg: rgba(20, 20, 20, 0.78);
|
||||||
|
--nav-border: rgba(255,255,255,0.06);
|
||||||
}
|
}
|
||||||
:global(.site_header){
|
}
|
||||||
flex-direction: column;
|
/* User forced dark */
|
||||||
align-items: flex-start;
|
:global(:root[data-theme="dark"]) nav {
|
||||||
}
|
--nav-bg: rgba(20, 20, 20, 0.78);
|
||||||
:global(.site_header li, .site_header a){
|
--nav-border: rgba(255,255,255,0.06);
|
||||||
font-size: 1.5rem;
|
}
|
||||||
}
|
/* User forced light — OR system light (default, already handled by base values) */
|
||||||
:global(.site_header li > a, .site_header a){
|
:global(:root[data-theme="light"]) nav {
|
||||||
font-size: 1.3rem;
|
--nav-bg: rgba(255, 255, 255, 0.82);
|
||||||
}
|
--nav-border: rgba(0,0,0,0.08);
|
||||||
:global(.site_header li:hover),
|
--nav-shadow: rgba(0,0,0,0.1);
|
||||||
:global(.site_header li:focus-within){
|
--nav-text: rgba(0,0,0,0.55);
|
||||||
transform: unset;
|
--nav-text-hover: var(--nord0);
|
||||||
}
|
--nav-text-active: var(--nord0);
|
||||||
.nav_site:not(.no-links) .header-right{
|
--nav-hover-bg: rgba(0,0,0,0.06);
|
||||||
flex-direction: column;
|
--nav-active-bg: rgba(94, 129, 172, 0.15);
|
||||||
position: absolute;
|
--nav-btn-border: rgba(0,0,0,0.15);
|
||||||
bottom: 2rem;
|
--nav-btn-border-hover: rgba(0,0,0,0.3);
|
||||||
left: 50%;
|
--nav-divider: rgba(0,0,0,0.12);
|
||||||
transform: translateX(-50%);
|
}
|
||||||
}
|
/* System light preference (no data-theme set) */
|
||||||
.nav_site:not(.no-links) .language-selector-desktop{
|
@media (prefers-color-scheme: light) {
|
||||||
display: none;
|
:global(:root:not([data-theme])) nav {
|
||||||
}
|
--nav-bg: rgba(255, 255, 255, 0.82);
|
||||||
.active-underline {
|
--nav-border: rgba(0,0,0,0.08);
|
||||||
display: none;
|
--nav-shadow: rgba(0,0,0,0.1);
|
||||||
}
|
--nav-text: rgba(0,0,0,0.55);
|
||||||
:global(.nav_site .site_header a.active) {
|
--nav-text-hover: var(--nord0);
|
||||||
text-decoration: underline;
|
--nav-text-active: var(--nord0);
|
||||||
text-decoration-color: var(--nord8);
|
--nav-hover-bg: rgba(0,0,0,0.06);
|
||||||
text-decoration-thickness: 1px;
|
--nav-active-bg: rgba(94, 129, 172, 0.15);
|
||||||
text-underline-offset: 0.2rem;
|
--nav-btn-border: rgba(0,0,0,0.15);
|
||||||
|
--nav-btn-border-hover: rgba(0,0,0,0.3);
|
||||||
|
--nav-divider: rgba(0,0,0,0.12);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
LOGO
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.home-link {
|
||||||
|
view-transition-name: nav-logo;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
flex-shrink: 0;
|
||||||
|
/* icon-only width by default */
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
.home-link.full {
|
||||||
|
/* full logo with text */
|
||||||
|
width: 134px;
|
||||||
|
}
|
||||||
|
.home-link :global(svg) {
|
||||||
|
height: 32px;
|
||||||
|
width: 134px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
NAV LINKS (rendered via snippet)
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.links-wrapper {
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
|
:global(.site_header) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 0.15rem;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
:global(.site_header li) {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
:global(.site_header li > a) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.35rem;
|
||||||
|
padding: 0.35rem 0.65rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--nav-text);
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 100px;
|
||||||
|
transition: all 150ms;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
:global(a.entry),
|
||||||
|
:global(a.entry:link),
|
||||||
|
:global(a.entry:visited) {
|
||||||
|
display: block;
|
||||||
|
padding: 0.35rem 0.65rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--nav-text) !important;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 100px;
|
||||||
|
transition: all 150ms;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
:global(.site_header li:hover > a),
|
||||||
|
:global(.site_header li:focus-within > a),
|
||||||
|
:global(a.entry:hover),
|
||||||
|
:global(a.entry:focus-visible) {
|
||||||
|
color: var(--nav-text-hover) !important;
|
||||||
|
background: var(--nav-hover-bg);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
:global(.site_header li:has(a.active) > a),
|
||||||
|
:global(.site_header a.active) {
|
||||||
|
color: var(--nav-text-active) !important;
|
||||||
|
background: var(--nav-active-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
DIVIDER & RIGHT SIDE
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.spacer {
|
||||||
|
width: 1px;
|
||||||
|
height: 18px;
|
||||||
|
background: var(--nav-divider);
|
||||||
|
margin: 0 0.2rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
view-transition-name: nav-right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
NO-LINKS VARIANT (pages without nav)
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
.no-links {
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
.no-links :global(button) {
|
.no-links :global(button) {
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
@@ -341,7 +225,7 @@ footer{
|
|||||||
}
|
}
|
||||||
.no-links :global(.top.speech::after) {
|
.no-links :global(.top.speech::after) {
|
||||||
border: 20px solid transparent !important;
|
border: 20px solid transparent !important;
|
||||||
border-bottom-color: var(--nord3) !important;
|
border-bottom-color: var(--color-border) !important;
|
||||||
border-top: 0 !important;
|
border-top: 0 !important;
|
||||||
top: -10px !important;
|
top: -10px !important;
|
||||||
bottom: unset !important;
|
bottom: unset !important;
|
||||||
@@ -352,30 +236,73 @@ footer{
|
|||||||
.no-links :global(button::before) {
|
.no-links :global(button::before) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
VIEW TRANSITIONS
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
/* Let the header bar morph its width smoothly */
|
||||||
|
:global(::view-transition-group(site-header)),
|
||||||
|
:global(::view-transition-group(nav-logo)),
|
||||||
|
:global(::view-transition-group(nav-right)) {
|
||||||
|
animation-duration: 300ms;
|
||||||
|
animation-timing-function: ease;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
/* Header & right side: standard morph */
|
||||||
|
:global(::view-transition-old(site-header)),
|
||||||
|
:global(::view-transition-new(site-header)),
|
||||||
|
:global(::view-transition-old(nav-right)),
|
||||||
|
:global(::view-transition-new(nav-right)) {
|
||||||
|
animation-duration: 300ms;
|
||||||
|
animation-timing-function: ease;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
/* Logo: clip-reveal instead of scale — keep natural size, left-aligned */
|
||||||
|
:global(::view-transition-old(nav-logo)),
|
||||||
|
:global(::view-transition-new(nav-logo)) {
|
||||||
|
animation: none;
|
||||||
|
object-fit: none;
|
||||||
|
object-position: left center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════
|
||||||
|
MOBILE: compact pill, horizontal scroll
|
||||||
|
═══════════════════════════════════════════ */
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
nav {
|
||||||
|
gap: 0.25rem;
|
||||||
|
padding: 0.4rem 0.6rem;
|
||||||
|
max-width: calc(100% - 1rem);
|
||||||
|
}
|
||||||
|
/* Mobile: hide labels, keep icons */
|
||||||
|
:global(.site_header .nav-label) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
:global(.site_header li > a) {
|
||||||
|
padding: 0.4rem;
|
||||||
|
}
|
||||||
|
:global(a.entry) {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
padding: 0.3rem 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class=wrapper lang=de>
|
|
||||||
|
<div class="wrapper" lang="de">
|
||||||
<div>
|
<div>
|
||||||
{#if links}
|
|
||||||
<div class=button_wrapper>
|
<nav class:no-links={!links}>
|
||||||
<a href="/" aria-label="Home"><Symbol></Symbol></a>
|
<a href="/" aria-label="Home" class="home-link" class:full={fullSymbol}><Symbol /></a>
|
||||||
<div class="right-buttons">
|
{#if links}
|
||||||
{@render language_selector_mobile?.()}
|
|
||||||
<input type="checkbox" id="nav-toggle" class="nav-toggle" aria-label="Toggle navigation menu" />
|
|
||||||
<label for="nav-toggle" class=nav_button aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" height="0.5em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg></label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="header-shadow"></div>
|
|
||||||
{/if}
|
|
||||||
<nav class=nav_site class:no-links={!links}>
|
|
||||||
<a href="/" aria-label="Home"><Symbol></Symbol></a>
|
|
||||||
<div class="links-wrapper">
|
<div class="links-wrapper">
|
||||||
{@render links?.()}
|
{@render links()}
|
||||||
<div class="active-underline" class:no-transition={disableTransition} style="left: {underlineLeft}px; width: {underlineWidth}px;"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="spacer"></div>
|
||||||
|
{/if}
|
||||||
<div class="header-right">
|
<div class="header-right">
|
||||||
<div class="language-selector-desktop">
|
<ThemeToggle />
|
||||||
{@render language_selector_desktop?.()}
|
{@render language_selector_desktop?.()}
|
||||||
</div>
|
|
||||||
{@render right_side?.()}
|
{@render right_side?.()}
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@@ -126,15 +126,22 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.form-section {
|
:global(:root:not([data-theme="light"])) .form-section {
|
||||||
background: var(--nord1);
|
background: var(--nord1);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-section h2 {
|
:global(:root:not([data-theme="light"])) .form-section h2 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .form-section {
|
||||||
|
background: var(--nord1);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .form-section h2 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.image-upload {
|
.image-upload {
|
||||||
border: 2px dashed var(--nord4);
|
border: 2px dashed var(--nord4);
|
||||||
@@ -152,15 +159,22 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.image-upload {
|
:global(:root:not([data-theme="light"])) .image-upload {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-upload:hover {
|
:global(:root:not([data-theme="light"])) .image-upload:hover {
|
||||||
background-color: var(--nord3);
|
background-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .image-upload {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .image-upload:hover {
|
||||||
|
background-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
.upload-label {
|
.upload-label {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -183,18 +197,27 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.upload-content svg {
|
:global(:root:not([data-theme="light"])) .upload-content svg {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-content p {
|
:global(:root:not([data-theme="light"])) .upload-content p {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-content small {
|
:global(:root:not([data-theme="light"])) .upload-content small {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .upload-content svg {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .upload-content p {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .upload-content small {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.image-preview {
|
.image-preview {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -240,10 +263,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.receipt-preview {
|
:global(:root:not([data-theme="light"])) .receipt-preview {
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .receipt-preview {
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
|
||||||
.image-actions {
|
.image-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -168,40 +168,51 @@
|
|||||||
}
|
}
|
||||||
.language-button{
|
.language-button{
|
||||||
width: auto;
|
width: auto;
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.3em 0.6em;
|
||||||
border-radius: 8px;
|
border-radius: 100px;
|
||||||
background-color: var(--nord3);
|
background: transparent;
|
||||||
color: white;
|
color: var(--nav-text, rgba(255,255,255,0.6));
|
||||||
font-size: 0.9rem;
|
font-size: 0.75rem;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 100ms;
|
transition: all 150ms;
|
||||||
border: none;
|
border: 1px solid var(--nav-btn-border, rgba(255,255,255,0.2));
|
||||||
}
|
}
|
||||||
.language-button:hover{
|
.language-button:hover{
|
||||||
background-color: var(--nord2);
|
color: var(--nav-text-hover, white);
|
||||||
|
border-color: var(--nav-btn-border-hover, rgba(255,255,255,0.4));
|
||||||
|
background: var(--nav-hover-bg, rgba(255,255,255,0.1));
|
||||||
}
|
}
|
||||||
.language-options{
|
.language-options{
|
||||||
--bg_color: var(--nord3);
|
--bg_color: rgba(46, 52, 64, 0.95);
|
||||||
|
--opt-text: rgba(255,255,255,0.7);
|
||||||
|
--opt-text-hover: white;
|
||||||
|
--opt-hover-bg: rgba(255,255,255,0.1);
|
||||||
|
--opt-active-bg: rgba(136, 192, 208, 0.25);
|
||||||
|
--opt-border: rgba(255,255,255,0.08);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 5px;
|
border-radius: 8px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: calc(100% + 10px);
|
top: calc(100% + 10px);
|
||||||
background-color: var(--bg_color);
|
background-color: var(--bg_color);
|
||||||
width: 10ch;
|
backdrop-filter: blur(16px);
|
||||||
padding: 0.5rem;
|
-webkit-backdrop-filter: blur(16px);
|
||||||
|
width: 8ch;
|
||||||
|
padding: 0.35rem;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
display: none;
|
display: none;
|
||||||
|
border: 1px solid var(--opt-border);
|
||||||
|
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
|
||||||
}
|
}
|
||||||
.language-options::after {
|
.language-options::after {
|
||||||
content: "";
|
content: "";
|
||||||
border: 10px solid transparent;
|
border: 8px solid transparent;
|
||||||
border-bottom-color: var(--bg_color);
|
border-bottom-color: var(--bg_color);
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -10px;
|
top: -8px;
|
||||||
right: 1rem;
|
right: 0.8rem;
|
||||||
}
|
}
|
||||||
/* Show via JS toggle */
|
/* Show via JS toggle */
|
||||||
.language-options.open {
|
.language-options.open {
|
||||||
@@ -215,26 +226,54 @@
|
|||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: white;
|
color: var(--opt-text);
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0.5rem;
|
padding: 0.4rem 0.5rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-radius: 4px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 1rem;
|
font-size: 0.8rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: background-color 100ms;
|
transition: all 100ms;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.language-options a:hover{
|
.language-options a:hover{
|
||||||
background-color: var(--nord2);
|
background: var(--opt-hover-bg);
|
||||||
|
color: var(--opt-text-hover);
|
||||||
}
|
}
|
||||||
.language-options a.active{
|
.language-options a.active{
|
||||||
background-color: var(--nord8);
|
background: var(--opt-active-bg);
|
||||||
color: var(--nord0);
|
color: var(--opt-text-hover);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.language-options {
|
||||||
|
--bg_color: rgba(20, 20, 20, 0.92);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .language-options {
|
||||||
|
--bg_color: rgba(20, 20, 20, 0.92);
|
||||||
|
}
|
||||||
|
/* Light mode dropdown */
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:global(:root:not([data-theme])) .language-options {
|
||||||
|
--bg_color: rgba(255, 255, 255, 0.95);
|
||||||
|
--opt-text: rgba(0,0,0,0.6);
|
||||||
|
--opt-text-hover: var(--nord0);
|
||||||
|
--opt-hover-bg: rgba(0,0,0,0.06);
|
||||||
|
--opt-active-bg: rgba(94, 129, 172, 0.15);
|
||||||
|
--opt-border: rgba(0,0,0,0.08);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .language-options {
|
||||||
|
--bg_color: rgba(255, 255, 255, 0.95);
|
||||||
|
--opt-text: rgba(0,0,0,0.6);
|
||||||
|
--opt-text-hover: var(--nord0);
|
||||||
|
--opt-hover-bg: rgba(0,0,0,0.06);
|
||||||
|
--opt-active-bg: rgba(94, 129, 172, 0.15);
|
||||||
|
--opt-border: rgba(0,0,0,0.08);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="language-selector">
|
<div class="language-selector">
|
||||||
|
|||||||
@@ -1,34 +1,20 @@
|
|||||||
<style>
|
<style>
|
||||||
|
|
||||||
:global(.links_grid a:nth-child(4n)),
|
.links_grid {
|
||||||
:global(.links_grid a:nth-child(4n) svg:not(.lock-icon)){
|
/* Light mode card palette */
|
||||||
background-color: var(--nord4);
|
--card-bg-a: var(--nord6);
|
||||||
fill: var(--nord11);
|
--card-bg-b: var(--nord5);
|
||||||
}
|
--card-bg-c: var(--nord6);
|
||||||
:global(.links_grid a:nth-child(4n+1)),
|
--card-bg-d: var(--nord5);
|
||||||
:global(.links_grid a:nth-child(4n+1) svg:not(.lock-icon)){
|
--card-fill-a: var(--nord11);
|
||||||
background-color: var(--nord6);
|
--card-fill-b: var(--nord10);
|
||||||
fill: var(--nord10);
|
--card-fill-c: var(--nord0);
|
||||||
}
|
--card-fill-d: var(--nord0);
|
||||||
:global(.links_grid a:nth-child(4n+2)){
|
--card-text: var(--nord0);
|
||||||
background-color: var(--nord5);
|
--card-shadow: rgba(0,0,0,0.04);
|
||||||
}
|
--card-shadow-hover: rgba(0,0,0,0.1);
|
||||||
:global(.links_grid a:nth-child(4n+3)){
|
--card-lock: var(--nord3);
|
||||||
background-color: var(--nord5);
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(a){
|
|
||||||
text-decoration: unset;
|
|
||||||
color: var(--nord0);
|
|
||||||
transition: var(--transition-normal);
|
|
||||||
}
|
|
||||||
:global(.links_grid a:hover){
|
|
||||||
box-shadow: 1em 1em 2em 1em rgba(0,0,0, 0.3);
|
|
||||||
}
|
|
||||||
:global(.links_grid a){
|
|
||||||
box-shadow: 0.2em 0.2em 1em 1em rgba(0,0,0, 0.1);
|
|
||||||
}
|
|
||||||
.links_grid{
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(250px, calc(50% - 1rem)), 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(min(250px, calc(50% - 1rem)), 1fr));
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
@@ -36,27 +22,96 @@
|
|||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
padding: 2rem 1rem;
|
padding: 2rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.links_grid {
|
||||||
|
--card-bg-a: #1a1a1a;
|
||||||
|
--card-bg-b: #1a1a1a;
|
||||||
|
--card-bg-c: var(--nord1);
|
||||||
|
--card-bg-d: #000;
|
||||||
|
--card-fill-a: var(--nord11);
|
||||||
|
--card-fill-b: var(--nord9);
|
||||||
|
--card-fill-c: var(--nord8);
|
||||||
|
--card-fill-d: var(--nord7);
|
||||||
|
--card-text: white;
|
||||||
|
--card-shadow: rgba(0,0,0,0.08);
|
||||||
|
--card-shadow-hover: rgba(0,0,0,0.15);
|
||||||
|
--card-lock: var(--nord3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .links_grid {
|
||||||
|
--card-bg-a: #1a1a1a;
|
||||||
|
--card-bg-b: #1a1a1a;
|
||||||
|
--card-bg-c: var(--nord1);
|
||||||
|
--card-bg-d: #000;
|
||||||
|
--card-fill-a: var(--nord11);
|
||||||
|
--card-fill-b: var(--nord9);
|
||||||
|
--card-fill-c: var(--nord8);
|
||||||
|
--card-fill-d: var(--nord7);
|
||||||
|
--card-text: white;
|
||||||
|
--card-shadow: rgba(0,0,0,0.08);
|
||||||
|
--card-shadow-hover: rgba(0,0,0,0.15);
|
||||||
|
--card-lock: var(--nord3);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .links_grid {
|
||||||
|
--card-bg-a: var(--nord6);
|
||||||
|
--card-bg-b: var(--nord5);
|
||||||
|
--card-bg-c: var(--nord6);
|
||||||
|
--card-bg-d: var(--nord5);
|
||||||
|
--card-fill-a: var(--nord11);
|
||||||
|
--card-fill-b: var(--nord10);
|
||||||
|
--card-fill-c: var(--nord0);
|
||||||
|
--card-fill-d: var(--nord0);
|
||||||
|
--card-text: var(--nord0);
|
||||||
|
--card-shadow: rgba(0,0,0,0.04);
|
||||||
|
--card-shadow-hover: rgba(0,0,0,0.1);
|
||||||
|
--card-lock: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.links_grid a:nth-child(4n)),
|
||||||
|
:global(.links_grid a:nth-child(4n) svg:not(.lock-icon)){
|
||||||
|
background-color: var(--card-bg-a);
|
||||||
|
fill: var(--card-fill-a);
|
||||||
|
}
|
||||||
|
:global(.links_grid a:nth-child(4n+1)),
|
||||||
|
:global(.links_grid a:nth-child(4n+1) svg:not(.lock-icon)){
|
||||||
|
background-color: var(--card-bg-b);
|
||||||
|
fill: var(--card-fill-b);
|
||||||
|
}
|
||||||
|
:global(.links_grid a:nth-child(4n+2)),
|
||||||
|
:global(.links_grid a:nth-child(4n+2) svg:not(.lock-icon)){
|
||||||
|
background-color: var(--card-bg-c);
|
||||||
|
fill: var(--card-fill-c);
|
||||||
|
}
|
||||||
|
:global(.links_grid a:nth-child(4n+3)),
|
||||||
|
:global(.links_grid a:nth-child(4n+3) svg:not(.lock-icon)){
|
||||||
|
background-color: var(--card-bg-d);
|
||||||
|
fill: var(--card-fill-d);
|
||||||
|
}
|
||||||
|
|
||||||
:global(.links_grid a){
|
:global(.links_grid a){
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-decoration: unset;
|
text-decoration: unset;
|
||||||
color: var(--nord0);
|
color: var(--card-text);
|
||||||
transition: var(--transition-normal);
|
transition: var(--transition-normal);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
box-shadow: 0 0.1em 0.5em 0 var(--card-shadow);
|
||||||
}
|
}
|
||||||
:global(.links_grid a:hover){
|
:global(.links_grid a:hover){
|
||||||
|
box-shadow: 0 0.2em 1em 0 var(--card-shadow-hover);
|
||||||
scale: 1.02;
|
scale: 1.02;
|
||||||
}
|
}
|
||||||
:global(.links_grid a :is(svg, img)){
|
:global(.links_grid a :is(svg, img)){
|
||||||
height: 120px;
|
height: 120px;
|
||||||
fill: var(--nord0);
|
|
||||||
}
|
}
|
||||||
:global(.links_grid h3){
|
:global(.links_grid h3){
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
|
color: var(--card-text);
|
||||||
}
|
}
|
||||||
:global(.links_grid a .lock-icon){
|
:global(.links_grid a .lock-icon){
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -64,7 +119,7 @@
|
|||||||
right: 0.5rem;
|
right: 0.5rem;
|
||||||
width: 1.5rem;
|
width: 1.5rem;
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
fill: var(--nord3);
|
fill: var(--card-lock);
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -109,35 +164,6 @@
|
|||||||
right: 0.3rem;
|
right: 0.3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark){
|
|
||||||
:global(.links_grid h3){
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
:global(.links_grid a .lock-icon){
|
|
||||||
fill: var(--nord3);
|
|
||||||
}
|
|
||||||
:global(.links_grid a:nth-child(4n)),
|
|
||||||
:global(.links_grid a:nth-child(4n) svg:not(.lock-icon)){
|
|
||||||
background-color: var(--nord6-dark);
|
|
||||||
fill: var(--nord11);
|
|
||||||
}
|
|
||||||
:global(.links_grid a:nth-child(4n+1)),
|
|
||||||
:global(.links_grid a:nth-child(4n+1) svg:not(.lock-icon)){
|
|
||||||
background-color: var(--accent-dark);
|
|
||||||
fill: var(--nord9);
|
|
||||||
}
|
|
||||||
:global(.links_grid a:nth-child(4n+2)),
|
|
||||||
:global(.links_grid a:nth-child(4n+2) svg:not(.lock-icon)){
|
|
||||||
background-color: var(--nord1);
|
|
||||||
fill: var(--nord8);
|
|
||||||
}
|
|
||||||
:global(.links_grid a:nth-child(4n+3)),
|
|
||||||
:global(.links_grid a:nth-child(4n+3) svg:not(.lock-icon)){
|
|
||||||
background-color: var(--background-dark);
|
|
||||||
fill: var(--nord7);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class=links_grid>
|
<div class=links_grid>
|
||||||
|
|||||||
@@ -4,6 +4,14 @@
|
|||||||
:root{
|
:root{
|
||||||
--icon_fill: var(--nord4);
|
--icon_fill: var(--nord4);
|
||||||
}
|
}
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:global(:root:not([data-theme])) {
|
||||||
|
--icon_fill: var(--nord1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) {
|
||||||
|
--icon_fill: var(--nord1);
|
||||||
|
}
|
||||||
svg{
|
svg{
|
||||||
transition: var(--transition-fast);
|
transition: var(--transition-fast);
|
||||||
height: var(--symbol-size, 3em);
|
height: var(--symbol-size, 3em);
|
||||||
@@ -29,7 +37,7 @@
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<svg
|
<svg
|
||||||
viewBox="0 0 45.742326 80.310541"
|
viewBox="0 0 330 80.310541"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
<g class=stroke
|
<g class=stroke
|
||||||
@@ -75,4 +83,7 @@
|
|||||||
<path class=fill
|
<path class=fill
|
||||||
d="M 0,0 -9.323,10.862 -3.185,17.76 0,21.339 3.173,17.774 9.324,10.862 Z M 41.228,66.513 C 41.168,66.275 38.492,57.729 32.099,49.53 28.9,45.41 24.801,41.388 19.697,38.388 15.112,35.701 9.727,33.802 3.198,33.324 L 0,36.917 -3.195,33.326 c -6.641,0.491 -12.102,2.451 -16.739,5.216 -7.724,4.607 -13.143,11.62 -16.561,17.559 -1.71,2.961 -2.918,5.631 -3.685,7.529 -0.383,0.949 -0.657,1.703 -0.83,2.204 -0.087,0.251 -0.148,0.438 -0.185,0.554 l -0.037,0.12 -0.006,0.017 -1.095,3.699 H -63.598 V 59.868 h 13.769 c 1.509,-3.763 4.398,-9.908 9.196,-16.216 3.801,-4.982 8.828,-10.072 15.38,-13.996 4.034,-2.422 8.662,-4.371 13.847,-5.556 l -3.872,-4.351 -7.799,-8.764 11.537,-13.441 c -5.22,-1.21 -9.868,-3.199 -13.916,-5.657 -9.751,-5.918 -16.085,-14.346 -20.051,-21.22 -2.011,-3.498 -3.414,-6.613 -4.323,-8.872 h -13.768 v -10.356 h 21.265 l 1.097,3.704 c 0.051,0.212 2.714,8.708 9.07,16.892 3.177,4.106 7.248,8.124 12.313,11.137 4.521,2.682 9.822,4.602 16.234,5.143 L 0,-15.9 l 3.619,4.215 c 6.533,-0.549 11.913,-2.527 16.488,-5.287 7.663,-4.624 13.036,-11.615 16.424,-17.525 1.694,-2.946 2.891,-5.601 3.652,-7.486 0.38,-0.943 0.651,-1.693 0.822,-2.19 0.085,-0.249 0.146,-0.435 0.183,-0.55 l 0.037,-0.119 0.004,-0.016 1.094,-3.703 h 21.268 v 10.356 H 49.825 c -1.499,3.743 -4.361,9.841 -9.105,16.111 -3.768,4.964 -8.752,10.044 -15.248,13.981 -4.052,2.46 -8.703,4.452 -13.928,5.661 l 11.534,13.437 -7.8,8.765 -3.867,4.345 c 5.185,1.183 9.812,3.13 13.845,5.55 9.835,5.899 16.218,14.364 20.21,21.275 2.032,3.529 3.447,6.672 4.36,8.948 H 63.591 V 70.224 H 42.323 Z"
|
d="M 0,0 -9.323,10.862 -3.185,17.76 0,21.339 3.173,17.774 9.324,10.862 Z M 41.228,66.513 C 41.168,66.275 38.492,57.729 32.099,49.53 28.9,45.41 24.801,41.388 19.697,38.388 15.112,35.701 9.727,33.802 3.198,33.324 L 0,36.917 -3.195,33.326 c -6.641,0.491 -12.102,2.451 -16.739,5.216 -7.724,4.607 -13.143,11.62 -16.561,17.559 -1.71,2.961 -2.918,5.631 -3.685,7.529 -0.383,0.949 -0.657,1.703 -0.83,2.204 -0.087,0.251 -0.148,0.438 -0.185,0.554 l -0.037,0.12 -0.006,0.017 -1.095,3.699 H -63.598 V 59.868 h 13.769 c 1.509,-3.763 4.398,-9.908 9.196,-16.216 3.801,-4.982 8.828,-10.072 15.38,-13.996 4.034,-2.422 8.662,-4.371 13.847,-5.556 l -3.872,-4.351 -7.799,-8.764 11.537,-13.441 c -5.22,-1.21 -9.868,-3.199 -13.916,-5.657 -9.751,-5.918 -16.085,-14.346 -20.051,-21.22 -2.011,-3.498 -3.414,-6.613 -4.323,-8.872 h -13.768 v -10.356 h 21.265 l 1.097,3.704 c 0.051,0.212 2.714,8.708 9.07,16.892 3.177,4.106 7.248,8.124 12.313,11.137 4.521,2.682 9.822,4.602 16.234,5.143 L 0,-15.9 l 3.619,4.215 c 6.533,-0.549 11.913,-2.527 16.488,-5.287 7.663,-4.624 13.036,-11.615 16.424,-17.525 1.694,-2.946 2.891,-5.601 3.652,-7.486 0.38,-0.943 0.651,-1.693 0.822,-2.19 0.085,-0.249 0.146,-0.435 0.183,-0.55 l 0.037,-0.119 0.004,-0.016 1.094,-3.703 h 21.268 v 10.356 H 49.825 c -1.499,3.743 -4.361,9.841 -9.105,16.111 -3.768,4.964 -8.752,10.044 -15.248,13.981 -4.052,2.46 -8.703,4.452 -13.928,5.661 l 11.534,13.437 -7.8,8.765 -3.867,4.345 c 5.185,1.183 9.812,3.13 13.845,5.55 9.835,5.899 16.218,14.364 20.21,21.275 2.032,3.529 3.447,6.672 4.36,8.948 H 63.591 V 70.224 H 42.323 Z"
|
||||||
transform="matrix(0.35277777,0,0,-0.35277777,23.308833,63.179301)" />
|
transform="matrix(0.35277777,0,0,-0.35277777,23.308833,63.179301)" />
|
||||||
|
<path class=fill
|
||||||
|
d="m 63.34524,67.259285 h 13.664006 c 7.392004,0 11.573339,-0.821334 15.082674,-2.912001 3.882669,-2.389335 6.197336,-7.242671 6.197336,-12.91734 0,-6.79467 -2.837334,-10.901338 -9.258671,-13.58934 4.256002,-2.389334 6.12267,-5.973336 6.12267,-11.424005 0,-4.778669 -1.792001,-8.810671 -4.928002,-11.125339 -3.136002,-2.240001 -7.242671,-3.210668 -13.962674,-3.210668 H 63.34524 Z m 5.525336,-5.002669 V 40.827272 h 6.57067 c 6.496003,0 9.781338,0.448001 12.096005,1.568001 3.285335,1.642668 5.152003,4.928002 5.152003,9.333338 0,3.808002 -1.717334,7.168003 -4.330669,8.512004 -2.613335,1.418667 -6.34667,2.016001 -11.946672,2.016001 z m 0,-26.432013 V 17.083261 h 6.645336 c 5.67467,0 8.736004,0.522667 10.826672,1.941334 1.941334,1.269334 3.210668,4.181336 3.210668,7.466671 0,3.808001 -1.493334,6.645336 -4.256002,7.91467 -2.314668,1.045334 -4.704002,1.418667 -9.706671,1.418667 z M 125.09456,25.445932 c -12.17067,0 -21.42935,9.184004 -21.42935,21.130676 0,12.618673 9.18401,21.653344 21.87735,21.653344 11.94667,0 20.75734,-9.034671 20.75734,-21.28001 0,-12.469339 -8.88534,-21.50401 -21.20534,-21.50401 z m 0,5.077335 c 9.03467,0 15.60534,6.944004 15.60534,16.501342 0,9.408004 -6.42134,16.128007 -15.30668,16.128007 -9.408,0 -16.128,-6.79467 -16.128,-16.426674 0,-9.258671 6.79467,-16.202675 15.82934,-16.202675 z m 63.46674,24.714679 c -4.256,5.674669 -8.13867,7.91467 -14.03734,7.91467 -9.10933,0 -16.352,-7.168003 -16.352,-16.277341 0,-9.184004 7.09333,-16.352008 16.20267,-16.352008 6.048,0 11.05067,2.912002 14.18667,8.288004 h 6.19734 C 191.4733,30.597934 183.6333,25.445932 174.4493,25.445932 c -12.24534,0 -21.87735,9.408004 -21.87735,21.28001 0,12.170672 9.70667,21.50401 22.25068,21.50401 5.07734,0 9.78134,-1.568001 13.58934,-4.629335 2.61333,-2.090668 4.18134,-4.106669 6.42134,-8.362671 z m 13.66395,12.021339 h 5.52534 v -8.437337 l 6.42133,-7.914671 13.58934,16.352008 h 6.86934 L 217.68126,46.949942 233.58527,26.416599 H 226.7906 L 207.75059,51.205944 V 12.080592 h -5.52534 z m 76.38406,-18.592009 c 0,-5.600003 -0.74667,-9.034671 -2.76267,-12.618673 -3.65867,-6.570669 -10.752,-10.602671 -18.59201,-10.602671 -11.872,0 -21.13068,9.333337 -21.13068,21.205343 0,12.096006 9.48268,21.578677 21.57868,21.578677 8.88534,0 16.87468,-5.749336 19.86134,-14.410673 h -5.74933 c -2.31467,5.600002 -8.06401,9.333337 -14.26134,9.333337 -8.43734,0 -15.45601,-6.421336 -15.90401,-14.48534 z m -36.81069,-5.002669 c 1.49334,-7.840004 7.69067,-13.14134 15.45601,-13.14134 7.91467,0 13.88801,4.928003 15.82934,13.14134 z m 44.42666,23.594678 h 5.52534 V 44.784608 c 0,-4.554669 0.59733,-6.944004 2.16533,-9.258671 2.16534,-3.136002 5.97334,-5.00267 10.30401,-5.00267 4.032,0 7.69067,1.642668 9.93067,4.405336 1.94133,2.538668 2.688,5.525336 2.688,10.901338 v 21.429344 h 5.52533 V 45.829941 c 0,-6.869336 -0.97066,-10.528005 -3.584,-14.03734 -3.21067,-4.106668 -8.13867,-6.346669 -13.888,-6.346669 -5.37601,0 -9.70668,2.016001 -13.14134,6.272003 v -5.301336 h -5.52534 z"
|
||||||
|
aria-label="Bocken"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
@@ -0,0 +1,38 @@
|
|||||||
|
<script>
|
||||||
|
import { themeStore } from '$lib/stores/theme.svelte';
|
||||||
|
import { Sun, Moon, SunMoon } from 'lucide-svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.3em;
|
||||||
|
border-radius: 100px;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--nav-text);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 150ms;
|
||||||
|
border: 1px solid var(--nav-btn-border);
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
color: var(--nav-text-hover);
|
||||||
|
border-color: var(--nav-btn-border-hover);
|
||||||
|
background: var(--nav-hover-bg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onclick={() => themeStore.cycle()}
|
||||||
|
aria-label="Toggle theme ({themeStore.theme})"
|
||||||
|
title="Theme: {themeStore.theme}"
|
||||||
|
>
|
||||||
|
{#if themeStore.theme === 'light'}
|
||||||
|
<Sun size={14} strokeWidth={2} />
|
||||||
|
{:else if themeStore.theme === 'dark'}
|
||||||
|
<Moon size={14} strokeWidth={2} />
|
||||||
|
{:else}
|
||||||
|
<SunMoon size={14} strokeWidth={2} />
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
let { checked = $bindable(false), label = "", accentColor = "var(--nord14)", href = undefined as string | undefined } = $props<{ checked?: boolean, label?: string, accentColor?: string, href?: string }>();
|
let { checked = $bindable(false), label = "", accentColor = "var(--color-primary)", href = undefined as string | undefined } = $props<{ checked?: boolean, label?: string, accentColor?: string, href?: string }>();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -19,10 +19,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.toggle-wrapper label,
|
:global(:root:not([data-theme="dark"])) .toggle-wrapper label,
|
||||||
.toggle-wrapper a {
|
:global(:root:not([data-theme="dark"])) .toggle-wrapper a {
|
||||||
color: var(--nord2);
|
color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .toggle-wrapper label,
|
||||||
|
:global(:root[data-theme="light"]) .toggle-wrapper a {
|
||||||
|
color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle-wrapper span {
|
.toggle-wrapper span {
|
||||||
@@ -49,11 +53,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.toggle-track,
|
:global(:root:not([data-theme="dark"])) .toggle-track:not(.checked),
|
||||||
.toggle-wrapper input[type="checkbox"] {
|
:global(:root:not([data-theme="dark"])) .toggle-wrapper input[type="checkbox"]:not(:checked) {
|
||||||
background: var(--nord4);
|
background: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="light"]) .toggle-track:not(.checked),
|
||||||
|
:global(:root[data-theme="light"]) .toggle-wrapper input[type="checkbox"]:not(:checked) {
|
||||||
|
background: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.toggle-track.checked,
|
.toggle-track.checked,
|
||||||
.toggle-wrapper input[type="checkbox"]:checked {
|
.toggle-wrapper input[type="checkbox"]:checked {
|
||||||
|
|||||||
@@ -155,17 +155,6 @@ h2 + p{
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -20px;
|
margin-left: -20px;
|
||||||
}
|
}
|
||||||
button{
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
button::before{
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: inherit;
|
|
||||||
z-index: 20;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -300,7 +300,7 @@
|
|||||||
onMount(() => {
|
onMount(() => {
|
||||||
createChart();
|
createChart();
|
||||||
|
|
||||||
// Watch for theme changes
|
// Watch for theme changes (both media query and data-theme attribute)
|
||||||
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||||
const handleThemeChange = () => {
|
const handleThemeChange = () => {
|
||||||
setTimeout(createChart, 100); // Small delay to let CSS variables update
|
setTimeout(createChart, 100); // Small delay to let CSS variables update
|
||||||
@@ -308,8 +308,19 @@
|
|||||||
|
|
||||||
mediaQuery.addEventListener('change', handleThemeChange);
|
mediaQuery.addEventListener('change', handleThemeChange);
|
||||||
|
|
||||||
|
// Also watch for data-theme attribute changes on <html>
|
||||||
|
const themeObserver = new MutationObserver((mutations) => {
|
||||||
|
for (const mutation of mutations) {
|
||||||
|
if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
|
||||||
|
handleThemeChange();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
mediaQuery.removeEventListener('change', handleThemeChange);
|
mediaQuery.removeEventListener('change', handleThemeChange);
|
||||||
|
themeObserver.disconnect();
|
||||||
if (chart) {
|
if (chart) {
|
||||||
chart.destroy();
|
chart.destroy();
|
||||||
}
|
}
|
||||||
@@ -331,11 +342,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.chart-container {
|
:global(:root:not([data-theme="light"])) .chart-container {
|
||||||
background: var(--nord1);
|
background: var(--nord1);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .chart-container {
|
||||||
|
background: var(--nord1);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.chart-container {
|
.chart-container {
|
||||||
|
|||||||
@@ -481,101 +481,174 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.panel-content {
|
:global(:root:not([data-theme="light"])) .panel-content {
|
||||||
background: var(--nord1);
|
background: var(--nord1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-header {
|
:global(:root:not([data-theme="light"])) .panel-header {
|
||||||
background: var(--nord2);
|
background: var(--nord2);
|
||||||
border-bottom-color: var(--nord3);
|
border-bottom-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-header h2 {
|
:global(:root:not([data-theme="light"])) .panel-header h2 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-button {
|
:global(:root:not([data-theme="light"])) .close-button {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-button:hover {
|
:global(:root:not([data-theme="light"])) .close-button:hover {
|
||||||
background: var(--nord3);
|
background: var(--nord3);
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
:global(:root:not([data-theme="light"])) .error {
|
||||||
background-color: var(--accent-dark);
|
background-color: var(--accent-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.payment-header {
|
:global(:root:not([data-theme="light"])) .payment-header {
|
||||||
background: linear-gradient(135deg, var(--nord2), var(--nord3));
|
background: linear-gradient(135deg, var(--nord2), var(--nord3));
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-section h1 {
|
:global(:root:not([data-theme="light"])) .title-section h1 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.receipt-image img {
|
:global(:root:not([data-theme="light"])) .receipt-image img {
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
:global(:root:not([data-theme="light"])) .label {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.value {
|
:global(:root:not([data-theme="light"])) .value {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
:global(:root:not([data-theme="light"])) .description {
|
||||||
border-top-color: var(--nord2);
|
border-top-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.description h3 {
|
:global(:root:not([data-theme="light"])) .description h3 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.description p {
|
:global(:root:not([data-theme="light"])) .description p {
|
||||||
color: var(--nord5);
|
color: var(--nord5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.splits-section {
|
:global(:root:not([data-theme="light"])) .splits-section {
|
||||||
border-top-color: var(--nord2);
|
border-top-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.splits-section h3 {
|
:global(:root:not([data-theme="light"])) .splits-section h3 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.split-item {
|
:global(:root:not([data-theme="light"])) .split-item {
|
||||||
background: var(--nord2);
|
background: var(--nord2);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.split-item.current-user {
|
:global(:root:not([data-theme="light"])) .split-item.current-user {
|
||||||
background: var(--nord3);
|
background: var(--nord3);
|
||||||
border-color: var(--blue);
|
border-color: var(--blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.username {
|
:global(:root:not([data-theme="light"])) .username {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-actions {
|
:global(:root:not([data-theme="light"])) .panel-actions {
|
||||||
background: var(--nord2);
|
background: var(--nord2);
|
||||||
border-top-color: var(--nord3);
|
border-top-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary {
|
:global(:root:not([data-theme="light"])) .btn-secondary {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary:hover {
|
:global(:root:not([data-theme="light"])) .btn-secondary:hover {
|
||||||
background-color: var(--nord3);
|
background-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .panel-content {
|
||||||
|
background: var(--nord1);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .panel-header {
|
||||||
|
background: var(--nord2);
|
||||||
|
border-bottom-color: var(--nord3);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .panel-header h2 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .close-button {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .close-button:hover {
|
||||||
|
background: var(--nord3);
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .error {
|
||||||
|
background-color: var(--accent-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .payment-header {
|
||||||
|
background: linear-gradient(135deg, var(--nord2), var(--nord3));
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .title-section h1 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .receipt-image img {
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .label {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .value {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .description {
|
||||||
|
border-top-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .description h3 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .description p {
|
||||||
|
color: var(--nord5);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .splits-section {
|
||||||
|
border-top-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .splits-section h3 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .split-item {
|
||||||
|
background: var(--nord2);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .split-item.current-user {
|
||||||
|
background: var(--nord3);
|
||||||
|
border-color: var(--blue);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .username {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .panel-actions {
|
||||||
|
background: var(--nord2);
|
||||||
|
border-top-color: var(--nord3);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .btn-secondary {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .btn-secondary:hover {
|
||||||
|
background-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.panel-content {
|
.panel-content {
|
||||||
|
|||||||
@@ -239,15 +239,22 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.form-section {
|
:global(:root:not([data-theme="light"])) .form-section {
|
||||||
background: var(--nord1);
|
background: var(--nord1);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-section h2 {
|
:global(:root:not([data-theme="light"])) .form-section h2 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .form-section {
|
||||||
|
background: var(--nord1);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .form-section h2 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
@@ -261,10 +268,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
label {
|
:global(:root:not([data-theme="light"])) label {
|
||||||
color: var(--nord5);
|
color: var(--nord5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) label {
|
||||||
|
color: var(--nord5);
|
||||||
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -284,12 +294,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
select {
|
:global(:root:not([data-theme="light"])) select {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) select {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
.proportional-splits, .personal-splits {
|
.proportional-splits, .personal-splits {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
@@ -304,11 +319,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.proportional-splits {
|
:global(:root:not([data-theme="light"])) .proportional-splits {
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .proportional-splits {
|
||||||
|
border-color: var(--nord3);
|
||||||
|
background-color: var(--nord2);
|
||||||
|
}
|
||||||
|
|
||||||
.proportional-splits h3, .personal-splits h3 {
|
.proportional-splits h3, .personal-splits h3 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
@@ -317,10 +336,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.proportional-splits h3, .personal-splits h3 {
|
:global(:root:not([data-theme="light"])) .proportional-splits h3,
|
||||||
|
:global(:root:not([data-theme="light"])) .personal-splits h3 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .proportional-splits h3,
|
||||||
|
:global(:root[data-theme="dark"]) .personal-splits h3 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.personal-splits .description {
|
.personal-splits .description {
|
||||||
color: var(--nord2);
|
color: var(--nord2);
|
||||||
@@ -330,10 +354,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.personal-splits .description {
|
:global(:root:not([data-theme="light"])) .personal-splits .description {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .personal-splits .description {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.split-input {
|
.split-input {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -365,12 +392,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.split-input input {
|
:global(:root:not([data-theme="light"])) .split-input input {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .split-input input {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
.remainder-info {
|
.remainder-info {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
@@ -386,16 +418,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.remainder-info {
|
:global(:root:not([data-theme="light"])) .remainder-info {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.remainder-info.error {
|
:global(:root:not([data-theme="light"])) .remainder-info.error {
|
||||||
background-color: var(--accent-dark);
|
background-color: var(--accent-dark);
|
||||||
border-color: var(--red);
|
border-color: var(--red);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .remainder-info {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .remainder-info.error {
|
||||||
|
background-color: var(--accent-dark);
|
||||||
|
border-color: var(--red);
|
||||||
|
}
|
||||||
|
|
||||||
.remainder-info span {
|
.remainder-info span {
|
||||||
display: block;
|
display: block;
|
||||||
@@ -418,11 +458,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.split-preview {
|
:global(:root:not([data-theme="light"])) .split-preview {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .split-preview {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
.split-preview h3 {
|
.split-preview h3 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
@@ -431,10 +475,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.split-preview h3 {
|
:global(:root:not([data-theme="light"])) .split-preview h3 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .split-preview h3 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.split-item {
|
.split-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -454,10 +501,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.username {
|
:global(:root:not([data-theme="light"])) .username {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .username {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.amount.positive {
|
.amount.positive {
|
||||||
color: var(--green);
|
color: var(--green);
|
||||||
|
|||||||
@@ -99,15 +99,22 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.form-section {
|
:global(:root:not([data-theme="light"])) .form-section {
|
||||||
background: var(--nord1);
|
background: var(--nord1);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-section h2 {
|
:global(:root:not([data-theme="light"])) .form-section h2 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .form-section {
|
||||||
|
background: var(--nord1);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .form-section h2 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.users-list {
|
.users-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -127,11 +134,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.user-item {
|
:global(:root:not([data-theme="light"])) .user-item {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .user-item {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
.user-item.with-profile {
|
.user-item.with-profile {
|
||||||
gap: 0.75rem;
|
gap: 0.75rem;
|
||||||
@@ -143,10 +154,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.user-item .username {
|
:global(:root:not([data-theme="light"])) .user-item .username {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .user-item .username {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.you-badge {
|
.you-badge {
|
||||||
background-color: var(--blue);
|
background-color: var(--blue);
|
||||||
@@ -165,11 +179,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.predefined-users {
|
:global(:root:not([data-theme="light"])) .predefined-users {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .predefined-users {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
.predefined-note {
|
.predefined-note {
|
||||||
margin: 0 0 1rem 0;
|
margin: 0 0 1rem 0;
|
||||||
@@ -179,10 +197,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.predefined-note {
|
:global(:root:not([data-theme="light"])) .predefined-note {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .predefined-note {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.remove-user {
|
.remove-user {
|
||||||
background-color: var(--red);
|
background-color: var(--red);
|
||||||
@@ -223,12 +244,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.add-user input {
|
:global(:root:not([data-theme="light"])) .add-user input {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .add-user input {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
.add-user button {
|
.add-user button {
|
||||||
background-color: var(--blue);
|
background-color: var(--blue);
|
||||||
|
|||||||
@@ -111,21 +111,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.modal-backdrop {
|
:global(:root:not([data-theme="dark"])) .modal-backdrop {
|
||||||
background: rgba(255, 255, 255, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes show-backdrop {
|
|
||||||
from {
|
|
||||||
backdrop-filter: blur(0px);
|
|
||||||
background: rgba(255, 255, 255, 0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
background: rgba(255, 255, 255, 0.3);
|
background: rgba(255, 255, 255, 0.3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
:global(:root[data-theme="light"]) .modal-backdrop {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
background: var(--nord0);
|
background: var(--nord0);
|
||||||
@@ -140,10 +132,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.modal-content {
|
:global(:root:not([data-theme="dark"])) .modal-content {
|
||||||
background: var(--nord6);
|
background: var(--nord6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="light"]) .modal-content {
|
||||||
|
background: var(--nord6);
|
||||||
|
}
|
||||||
|
|
||||||
.modal-header {
|
.modal-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -154,10 +149,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.modal-header {
|
:global(:root:not([data-theme="dark"])) .modal-header {
|
||||||
border-bottom: 1px solid var(--nord4);
|
border-bottom: 1px solid var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="light"]) .modal-header {
|
||||||
|
border-bottom: 1px solid var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.header-content {
|
.header-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -227,11 +225,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.loading,
|
:global(:root:not([data-theme="dark"])) .loading,
|
||||||
.error {
|
:global(:root:not([data-theme="dark"])) .error {
|
||||||
color: var(--nord2);
|
color: var(--nord2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="light"]) .loading,
|
||||||
|
:global(:root[data-theme="light"]) .error {
|
||||||
|
color: var(--nord2);
|
||||||
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
color: var(--nord11);
|
color: var(--nord11);
|
||||||
@@ -252,10 +254,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.verse {
|
:global(:root:not([data-theme="dark"])) .verse {
|
||||||
color: var(--nord0);
|
color: var(--nord0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="light"]) .verse {
|
||||||
|
color: var(--nord0);
|
||||||
|
}
|
||||||
|
|
||||||
.verse-number {
|
.verse-number {
|
||||||
color: var(--nord10);
|
color: var(--nord10);
|
||||||
|
|||||||
@@ -47,5 +47,4 @@
|
|||||||
bind:checked={showBilingual}
|
bind:checked={showBilingual}
|
||||||
{label}
|
{label}
|
||||||
{href}
|
{href}
|
||||||
accentColor="var(--nord14)"
|
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -34,9 +34,12 @@ svg {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
svg {
|
:global(:root:not([data-theme="dark"])) svg {
|
||||||
fill: var(--nord0);
|
fill: var(--nord0);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) svg {
|
||||||
|
fill: var(--nord0);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.mystery-button.selected) svg,
|
:global(.mystery-button.selected) svg,
|
||||||
|
|||||||
@@ -154,14 +154,22 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
.sticky-image-layout:not(.overlay) .image-wrap-desktop {
|
:global(:root:not([data-theme="dark"])) .sticky-image-layout:not(.overlay) .image-wrap-desktop {
|
||||||
background-color: var(--nord5);
|
background-color: var(--nord5);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .sticky-image-layout:not(.overlay) .image-wrap-desktop {
|
||||||
|
background-color: var(--nord5);
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: light) and (min-width: 1024px) {
|
@media (prefers-color-scheme: light) and (min-width: 1024px) {
|
||||||
.sticky-image-layout:not(.overlay) .image-wrap-desktop {
|
:global(:root:not([data-theme="dark"])) .sticky-image-layout:not(.overlay) .image-wrap-desktop {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
:global(:root[data-theme="light"]) .sticky-image-layout:not(.overlay) .image-wrap-desktop {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media (min-width: 1400px) {
|
@media (min-width: 1400px) {
|
||||||
.sticky-image-layout:not(.overlay)::before {
|
.sticky-image-layout:not(.overlay)::before {
|
||||||
|
|||||||
@@ -51,7 +51,8 @@ async function pray() {
|
|||||||
<StreakAura value={displayLength} {burst} />
|
<StreakAura value={displayLength} {burst} />
|
||||||
<span class="streak-label">{labels.days}</span>
|
<span class="streak-label">{labels.days}</span>
|
||||||
</div>
|
</div>
|
||||||
<form method="POST" action="?/pray" onsubmit={(e) => { e.preventDefault(); pray(); }}>
|
<form method="POST" action="?/pray" onsubmit={(e) => { e.preventDefault(); pray(); }
|
||||||
|
}>
|
||||||
<button
|
<button
|
||||||
class="streak-button"
|
class="streak-button"
|
||||||
type="submit"
|
type="submit"
|
||||||
@@ -79,9 +80,12 @@ async function pray() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
.streak-container {
|
:global(:root:not([data-theme="dark"])) .streak-container {
|
||||||
background: var(--nord5);
|
background: var(--nord5);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .streak-container {
|
||||||
|
background: var(--nord5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.streak-display {
|
.streak-display {
|
||||||
@@ -97,9 +101,12 @@ async function pray() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
.streak-label {
|
:global(:root:not([data-theme="dark"])) .streak-label {
|
||||||
color: var(--nord3);
|
color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .streak-label {
|
||||||
|
color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.streak-button {
|
.streak-button {
|
||||||
@@ -135,8 +142,11 @@ async function pray() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
.streak-button:disabled {
|
:global(:root:not([data-theme="dark"])) .streak-button:disabled {
|
||||||
background: var(--nord4);
|
background: var(--nord4);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .streak-button:disabled {
|
||||||
|
background: var(--nord4);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -70,14 +70,22 @@
|
|||||||
|
|
||||||
/* === LIGHT MODE === */
|
/* === LIGHT MODE === */
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
.prayer-wrapper :global(v:lang(la)),
|
:global(:root:not([data-theme="dark"])) .prayer-wrapper :global(v:lang(la)),
|
||||||
.prayer-wrapper.vernacular-primary :global(v:lang(de)),
|
:global(:root:not([data-theme="dark"])) .prayer-wrapper.vernacular-primary :global(v:lang(de)),
|
||||||
.prayer-wrapper.vernacular-primary :global(v:lang(en)),
|
:global(:root:not([data-theme="dark"])) .prayer-wrapper.vernacular-primary :global(v:lang(en)),
|
||||||
.prayer-wrapper.monolingual :global(v:not(:lang(la))),
|
:global(:root:not([data-theme="dark"])) .prayer-wrapper.monolingual :global(v:not(:lang(la))),
|
||||||
.prayer-wrapper.no-latin :global(v:lang(de)),
|
:global(:root:not([data-theme="dark"])) .prayer-wrapper.no-latin :global(v:lang(de)),
|
||||||
.prayer-wrapper.no-latin :global(v:lang(en)) {
|
:global(:root:not([data-theme="dark"])) .prayer-wrapper.no-latin :global(v:lang(en)) {
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .prayer-wrapper :global(v:lang(la)),
|
||||||
|
:global(:root[data-theme="light"]) .prayer-wrapper.vernacular-primary :global(v:lang(de)),
|
||||||
|
:global(:root[data-theme="light"]) .prayer-wrapper.vernacular-primary :global(v:lang(en)),
|
||||||
|
:global(:root[data-theme="light"]) .prayer-wrapper.monolingual :global(v:not(:lang(la))),
|
||||||
|
:global(:root[data-theme="light"]) .prayer-wrapper.no-latin :global(v:lang(de)),
|
||||||
|
:global(:root[data-theme="light"]) .prayer-wrapper.no-latin :global(v:lang(en)) {
|
||||||
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* === INLINE / RUBRIC TEXT === */
|
/* === INLINE / RUBRIC TEXT === */
|
||||||
|
|||||||
@@ -198,9 +198,12 @@ dialog h2 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.selector-content {
|
:global(:root:not([data-theme="light"])) .selector-content {
|
||||||
background-color: var(--nord1);
|
background-color: var(--nord1);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .selector-content {
|
||||||
|
background-color: var(--nord1);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -115,10 +115,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.filter-label {
|
:global(:root:not([data-theme="light"])) .filter-label {
|
||||||
color: var(--nord6);
|
color: var(--nord6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .filter-label {
|
||||||
|
color: var(--nord6);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 968px) {
|
@media (max-width: 968px) {
|
||||||
.filter-label {
|
.filter-label {
|
||||||
|
|||||||
@@ -101,21 +101,21 @@
|
|||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
padding: 0.1rem 0.4rem;
|
padding: 0.1rem 0.4rem;
|
||||||
border-radius: var(--radius-pill);
|
border-radius: var(--radius-pill);
|
||||||
background-color: var(--nord5);
|
background-color: var(--color-bg-elevated);
|
||||||
color: var(--nord3);
|
color: var(--color-text-secondary);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
|
transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
|
||||||
box-shadow: var(--shadow-sm);
|
box-shadow: none;
|
||||||
border: none;
|
border: none;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.tag:hover,
|
.tag:hover,
|
||||||
.tag:focus-visible {
|
.tag:focus-visible {
|
||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
background-color: var(--nord8);
|
background-color: var(--color-primary);
|
||||||
box-shadow: var(--shadow-hover);
|
box-shadow: var(--shadow-hover);
|
||||||
color: var(--nord0);
|
color: var(--color-text-on-primary);
|
||||||
}
|
}
|
||||||
@media (min-width: 600px) {
|
@media (min-width: 600px) {
|
||||||
.tag {
|
.tag {
|
||||||
@@ -123,19 +123,6 @@
|
|||||||
padding: 0.15rem 0.55rem;
|
padding: 0.15rem 0.55rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.tag,
|
|
||||||
.tag:visited,
|
|
||||||
.tag:link {
|
|
||||||
background-color: var(--nord0);
|
|
||||||
color: var(--nord4);
|
|
||||||
}
|
|
||||||
.tag:hover,
|
|
||||||
.tag:focus-visible {
|
|
||||||
background-color: var(--nord8);
|
|
||||||
color: var(--nord0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.icon {
|
.icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -1.2em;
|
top: -1.2em;
|
||||||
|
|||||||
@@ -635,13 +635,19 @@ h3{
|
|||||||
fill: var(--nord1);
|
fill: var(--nord1);
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark){
|
@media (prefers-color-scheme: dark){
|
||||||
.button_arrow{
|
:global(:root:not([data-theme="light"])) .button_arrow {
|
||||||
fill: var(--nord4);
|
fill: var(--nord4);
|
||||||
}
|
}
|
||||||
.list_wrapper p[contenteditable]{
|
:global(:root:not([data-theme="light"])) .list_wrapper p[contenteditable] {
|
||||||
background-color: var(--accent-dark);
|
background-color: var(--accent-dark);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .button_arrow {
|
||||||
|
fill: var(--nord4);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .list_wrapper p[contenteditable] {
|
||||||
|
background-color: var(--accent-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Styling for converted div-to-button elements */
|
/* Styling for converted div-to-button elements */
|
||||||
@@ -688,12 +694,18 @@ h3{
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.reference-container {
|
:global(:root:not([data-theme="light"])) .reference-container {
|
||||||
background-color: var(--nord1);
|
background-color: var(--nord1);
|
||||||
}
|
}
|
||||||
.reference-badge {
|
:global(:root:not([data-theme="light"])) .reference-badge {
|
||||||
color: var(--nord6);
|
color: var(--nord6);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .reference-container {
|
||||||
|
background-color: var(--nord1);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .reference-badge {
|
||||||
|
color: var(--nord6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.insert-base-recipe-button {
|
.insert-base-recipe-button {
|
||||||
|
|||||||
@@ -664,20 +664,29 @@ h3{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark){
|
@media (prefers-color-scheme: dark){
|
||||||
.additional_info div{
|
:global(:root:not([data-theme="light"])) .additional_info div {
|
||||||
background-color: var(--accent-dark);
|
background-color: var(--accent-dark);
|
||||||
}
|
}
|
||||||
.instructions{
|
:global(:root:not([data-theme="light"])) .instructions {
|
||||||
background-color: var(--nord6-dark);
|
background-color: var(--nord6-dark);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .additional_info div {
|
||||||
|
background-color: var(--accent-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .instructions {
|
||||||
|
background-color: var(--nord6-dark);
|
||||||
}
|
}
|
||||||
.button_arrow{
|
.button_arrow{
|
||||||
fill: var(--nord1);
|
fill: var(--nord1);
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark){
|
@media (prefers-color-scheme: dark){
|
||||||
.button_arrow{
|
:global(:root:not([data-theme="light"])) .button_arrow {
|
||||||
fill: var(--nord4);
|
fill: var(--nord4);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .button_arrow {
|
||||||
|
fill: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Styling for converted div-to-button elements */
|
/* Styling for converted div-to-button elements */
|
||||||
@@ -715,12 +724,18 @@ h3{
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.reference-container {
|
:global(:root:not([data-theme="light"])) .reference-container {
|
||||||
background-color: var(--nord1);
|
background-color: var(--nord1);
|
||||||
}
|
}
|
||||||
.reference-badge {
|
:global(:root:not([data-theme="light"])) .reference-badge {
|
||||||
color: var(--nord6);
|
color: var(--nord6);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .reference-container {
|
||||||
|
background-color: var(--nord1);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .reference-badge {
|
||||||
|
color: var(--nord6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.insert-base-recipe-button {
|
.insert-base-recipe-button {
|
||||||
|
|||||||
@@ -50,10 +50,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.filter-label {
|
:global(:root:not([data-theme="light"])) .filter-label {
|
||||||
color: var(--nord6);
|
color: var(--nord6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .filter-label {
|
||||||
|
color: var(--nord6);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 968px) {
|
@media (max-width: 968px) {
|
||||||
.filter-label {
|
.filter-label {
|
||||||
|
|||||||
@@ -50,9 +50,9 @@
|
|||||||
.toggle-button {
|
.toggle-button {
|
||||||
display: none;
|
display: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--nord3);
|
color: var(--color-text-secondary);
|
||||||
padding: 0.5rem 0.8rem;
|
padding: 0.5rem 0.8rem;
|
||||||
border: 1px solid var(--nord2);
|
border: 1px solid var(--color-border);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
@@ -66,9 +66,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.toggle-button:hover {
|
.toggle-button:hover {
|
||||||
background: var(--nord1);
|
background: var(--color-surface);
|
||||||
color: var(--nord4);
|
color: var(--color-text-primary);
|
||||||
border-color: var(--nord3);
|
border-color: var(--color-border-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow {
|
.arrow {
|
||||||
|
|||||||
@@ -13,10 +13,13 @@
|
|||||||
box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
|
box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
a{
|
:global(:root:not([data-theme="light"])) a {
|
||||||
background-color: var(--accent-dark);
|
background-color: var(--accent-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) a {
|
||||||
|
background-color: var(--accent-dark);
|
||||||
|
}
|
||||||
a:hover{
|
a:hover{
|
||||||
--angle: 15deg;
|
--angle: 15deg;
|
||||||
animation: shake 0.5s ease forwards;
|
animation: shake 0.5s ease forwards;
|
||||||
|
|||||||
@@ -107,10 +107,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.filter-label {
|
:global(:root:not([data-theme="light"])) .filter-label {
|
||||||
color: var(--nord6);
|
color: var(--nord6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .filter-label {
|
||||||
|
color: var(--nord6);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 968px) {
|
@media (max-width: 968px) {
|
||||||
.filter-label {
|
.filter-label {
|
||||||
|
|||||||
@@ -386,11 +386,12 @@ function adjust_amount(string, multiplier){
|
|||||||
/* Hover scale override - larger than default */
|
/* Hover scale override - larger than default */
|
||||||
.multipliers :is(button, form):is(:hover, :focus-within){
|
.multipliers :is(button, form):is(:hover, :focus-within){
|
||||||
scale: 1.2;
|
scale: 1.2;
|
||||||
background-color: var(--nord8);
|
background-color: var(--color-primary);
|
||||||
|
color: var(--color-text-on-primary);
|
||||||
}
|
}
|
||||||
.selected{
|
.selected{
|
||||||
background-color: var(--nord9) !important;
|
background-color: var(--color-primary) !important;
|
||||||
color: white !important;
|
color: var(--color-text-on-primary) !important;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
scale: 1.2 !important;
|
scale: 1.2 !important;
|
||||||
}
|
}
|
||||||
@@ -453,8 +454,8 @@ function adjust_amount(string, multiplier){
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.cake-form-selected {
|
.cake-form-selected {
|
||||||
background-color: var(--nord9);
|
background-color: var(--color-primary);
|
||||||
color: white;
|
color: var(--color-text-on-primary);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.cake-form-inputs {
|
.cake-form-inputs {
|
||||||
@@ -467,7 +468,7 @@ function adjust_amount(string, multiplier){
|
|||||||
.cake-form-num {
|
.cake-form-num {
|
||||||
width: 3.5em;
|
width: 3.5em;
|
||||||
padding: 0.2em 0.4em;
|
padding: 0.2em 0.4em;
|
||||||
border: 1px solid var(--nord4);
|
border: 1px solid var(--color-border);
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
@@ -478,7 +479,7 @@ function adjust_amount(string, multiplier){
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 0.4rem;
|
margin-top: 0.4rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--nord10);
|
color: var(--color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -102,13 +102,13 @@ const labels = $derived({
|
|||||||
<style>
|
<style>
|
||||||
ol li::marker{
|
ol li::marker{
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--blue);
|
color: var(--color-primary);
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
.instructions{
|
.instructions{
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
flex-grow: 2;
|
flex-grow: 2;
|
||||||
background-color: var(--nord5);
|
background-color: var(--color-bg-secondary);
|
||||||
padding-block: 1rem;
|
padding-block: 1rem;
|
||||||
padding-inline: 2rem;
|
padding-inline: 2rem;
|
||||||
}
|
}
|
||||||
@@ -129,18 +129,10 @@ ol li::marker{
|
|||||||
.additional_info > *{
|
.additional_info > *{
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
background-color: #FAFAFE;
|
background-color: var(--color-bg-tertiary);
|
||||||
box-shadow: var(--shadow-md);
|
box-shadow: var(--shadow-md);
|
||||||
max-width: 30%
|
max-width: 30%
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark){
|
|
||||||
.instructions{
|
|
||||||
background-color: var(--nord6-dark);
|
|
||||||
}
|
|
||||||
.additional_info > *{
|
|
||||||
background-color: var(--accent-dark);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 500px){
|
@media screen and (max-width: 500px){
|
||||||
.additional_info > *{
|
.additional_info > *{
|
||||||
max-width: 60%;
|
max-width: 60%;
|
||||||
|
|||||||
@@ -48,10 +48,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.filter-label {
|
:global(:root:not([data-theme="light"])) .filter-label {
|
||||||
color: var(--nord6);
|
color: var(--nord6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .filter-label {
|
||||||
|
color: var(--nord6);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 968px) {
|
@media (max-width: 968px) {
|
||||||
.filter-label {
|
.filter-label {
|
||||||
@@ -70,10 +73,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.toggle-container {
|
:global(:root:not([data-theme="light"])) .toggle-container {
|
||||||
color: var(--nord6);
|
color: var(--nord6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .toggle-container {
|
||||||
|
color: var(--nord6);
|
||||||
|
}
|
||||||
|
|
||||||
.toggle-switch {
|
.toggle-switch {
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -115,10 +121,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.mode-label.active {
|
:global(:root:not([data-theme="light"])) .mode-label.active {
|
||||||
color: var(--nord8);
|
color: var(--nord8);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .mode-label.active {
|
||||||
|
color: var(--nord8);
|
||||||
|
}
|
||||||
|
|
||||||
.toggle-switch.or-mode + .mode-label.or {
|
.toggle-switch.or-mode + .mode-label.or {
|
||||||
color: var(--nord12);
|
color: var(--nord12);
|
||||||
@@ -135,7 +144,8 @@
|
|||||||
onclick={() => checked = !checked}
|
onclick={() => checked = !checked}
|
||||||
role="button"
|
role="button"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); checked = !checked; } }}
|
onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); checked = !checked; } }
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<div class="toggle-knob"></div>
|
<div class="toggle-knob"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -307,14 +307,14 @@
|
|||||||
input#search {
|
input#search {
|
||||||
all: unset;
|
all: unset;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: var(--nord0);
|
background: var(--color-surface);
|
||||||
color: #fff;
|
color: var(--color-text-primary);
|
||||||
padding: 0.7rem 2rem;
|
padding: 0.7rem 2rem;
|
||||||
border-radius: var(--radius-pill);
|
border-radius: var(--radius-pill);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
input::placeholder{
|
input::placeholder{
|
||||||
color: var(--nord6);
|
color: var(--color-text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
@@ -344,12 +344,12 @@ input::placeholder{
|
|||||||
right: 0.5em;
|
right: 0.5em;
|
||||||
width: 1.5em;
|
width: 1.5em;
|
||||||
height: 1.5em;
|
height: 1.5em;
|
||||||
color: var(--nord6);
|
color: var(--color-text-tertiary);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: color 180ms ease-in-out;
|
transition: color 180ms ease-in-out;
|
||||||
}
|
}
|
||||||
.search-button:hover {
|
.search-button:hover {
|
||||||
color: white;
|
color: var(--color-text-primary);
|
||||||
scale: 1.1 1.1;
|
scale: 1.1 1.1;
|
||||||
}
|
}
|
||||||
.search-button:active{
|
.search-button:active{
|
||||||
|
|||||||
@@ -101,10 +101,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.filter-label {
|
:global(:root:not([data-theme="light"])) .filter-label {
|
||||||
color: var(--nord6);
|
color: var(--nord6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .filter-label {
|
||||||
|
color: var(--nord6);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 968px) {
|
@media (max-width: 968px) {
|
||||||
.filter-label {
|
.filter-label {
|
||||||
|
|||||||
@@ -29,8 +29,8 @@
|
|||||||
a.month{
|
a.month{
|
||||||
text-decoration: unset;
|
text-decoration: unset;
|
||||||
border-radius: var(--radius-pill);
|
border-radius: var(--radius-pill);
|
||||||
background-color: var(--blue);
|
background-color: var(--color-primary);
|
||||||
color: var(--nord5);
|
color: var(--color-text-on-primary);
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
transition: var(--transition-fast);
|
transition: var(--transition-fast);
|
||||||
min-width: 4em;
|
min-width: 4em;
|
||||||
@@ -40,7 +40,7 @@ a.month:hover,
|
|||||||
.active
|
.active
|
||||||
{
|
{
|
||||||
transform: scale(1.1,1.1) !important;
|
transform: scale(1.1,1.1) !important;
|
||||||
background-color: var(--red) !important;
|
background-color: var(--color-accent) !important;
|
||||||
}
|
}
|
||||||
.months{
|
.months{
|
||||||
display:flex;
|
display:flex;
|
||||||
|
|||||||
@@ -91,10 +91,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.filter-label {
|
:global(:root:not([data-theme="light"])) .filter-label {
|
||||||
color: var(--nord6);
|
color: var(--nord6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .filter-label {
|
||||||
|
color: var(--nord6);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 968px) {
|
@media (max-width: 968px) {
|
||||||
.filter-label {
|
.filter-label {
|
||||||
|
|||||||
@@ -46,9 +46,9 @@
|
|||||||
|
|
||||||
.section {
|
.section {
|
||||||
margin-bottom: -20vh;
|
margin-bottom: -20vh;
|
||||||
|
margin-top: calc(-3.5rem - 12px);
|
||||||
transform-origin: center top;
|
transform-origin: center top;
|
||||||
transform: translateY(-1rem)
|
transform: scaleY(calc(1 - var(--scale)));
|
||||||
scaleY(calc(1 - var(--scale)));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.section > * {
|
.section > * {
|
||||||
@@ -67,7 +67,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
top: 0;
|
top: 0;
|
||||||
height: max(50dvh, 500px);
|
height: max(55dvh, 540px);
|
||||||
z-index: -10;
|
z-index: -10;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
@@ -78,8 +78,8 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
width: min(1000px, 100dvw);
|
width: min(calc(1000px + 2rem), 100dvw);
|
||||||
height: max(60dvh,600px);
|
height: max(65dvh, 640px);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -87,8 +87,8 @@
|
|||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: min(1000px, 100dvw);
|
width: min(calc(1000px + 2rem), 100dvw);
|
||||||
height: max(60dvh,600px);
|
height: max(65dvh, 640px);
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
object-position: 50% 20%;
|
object-position: 50% 20%;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -66,15 +66,24 @@
|
|||||||
color: var(--nord0);
|
color: var(--nord0);
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.link-pill {
|
:global(:root:not([data-theme="light"])) .link-pill {
|
||||||
background-color: var(--nord0);
|
background-color: var(--nord0);
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
.link-pill:hover,
|
:global(:root:not([data-theme="light"])) .link-pill:hover,
|
||||||
.link-pill:focus-visible {
|
:global(:root:not([data-theme="light"])) .link-pill:focus-visible {
|
||||||
background-color: var(--nord8);
|
background-color: var(--nord8);
|
||||||
color: var(--nord0);
|
color: var(--nord0);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .link-pill {
|
||||||
|
background-color: var(--nord0);
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .link-pill:hover,
|
||||||
|
:global(:root[data-theme="dark"]) .link-pill:focus-visible {
|
||||||
|
background-color: var(--nord8);
|
||||||
|
color: var(--nord0);
|
||||||
}
|
}
|
||||||
.notes {
|
.notes {
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
@@ -86,9 +95,12 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.notes {
|
:global(:root:not([data-theme="light"])) .notes {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .notes {
|
||||||
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
.card-btn {
|
.card-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -384,10 +384,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.translation-approval {
|
:global(:root:not([data-theme="dark"])) .translation-approval {
|
||||||
background: var(--nord6);
|
background: var(--nord6);
|
||||||
border-color: var(--nord4);
|
border-color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .translation-approval {
|
||||||
|
background: var(--nord6);
|
||||||
|
border-color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
@@ -403,9 +407,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.header h3 {
|
:global(:root:not([data-theme="dark"])) .header h3 {
|
||||||
color: var(--nord0);
|
color: var(--nord0);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .header h3 {
|
||||||
|
color: var(--nord0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-badge {
|
.status-badge {
|
||||||
@@ -458,12 +465,18 @@
|
|||||||
|
|
||||||
/* Fix button icon visibility in dark mode */
|
/* Fix button icon visibility in dark mode */
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.list-wrapper :global(svg) {
|
:global(:root:not([data-theme="light"])) .list-wrapper :global(svg) {
|
||||||
fill: white !important;
|
fill: white !important;
|
||||||
}
|
}
|
||||||
.list-wrapper :global(.button_arrow) {
|
:global(:root:not([data-theme="light"])) .list-wrapper :global(.button_arrow) {
|
||||||
fill: var(--nord4) !important;
|
fill: var(--nord4) !important;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .list-wrapper :global(svg) {
|
||||||
|
fill: white !important;
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .list-wrapper :global(.button_arrow) {
|
||||||
|
fill: var(--nord4) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.column-header {
|
.column-header {
|
||||||
@@ -585,9 +598,12 @@ button:disabled {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.idle-state {
|
:global(:root:not([data-theme="dark"])) .idle-state {
|
||||||
color: var(--nord2);
|
color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .idle-state {
|
||||||
|
color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.idle-state p {
|
.idle-state p {
|
||||||
|
|||||||
@@ -40,9 +40,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.field-label {
|
:global(:root:not([data-theme="dark"])) .field-label {
|
||||||
color: var(--nord2);
|
color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .field-label {
|
||||||
|
color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-value {
|
.field-value {
|
||||||
@@ -55,11 +58,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.field-value {
|
:global(:root:not([data-theme="dark"])) .field-value {
|
||||||
background: var(--nord5);
|
background: var(--nord5);
|
||||||
color: var(--nord0);
|
color: var(--nord0);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .field-value {
|
||||||
|
background: var(--nord5);
|
||||||
|
color: var(--nord0);
|
||||||
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-value.readonly {
|
.field-value.readonly {
|
||||||
@@ -113,13 +121,19 @@ textarea.field-value {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
:global(.readonly-text strong) {
|
:global(:root:not([data-theme="dark"]) .readonly-text strong) {
|
||||||
color: var(--nord10);
|
color: var(--nord10);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.readonly-text li) {
|
:global(:root:not([data-theme="dark"]) .readonly-text li) {
|
||||||
color: var(--nord2);
|
color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) :global(.readonly-text strong) {
|
||||||
|
color: var(--nord10);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) :global(.readonly-text li) {
|
||||||
|
color: var(--nord2);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
.action_button{
|
.action_button{
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: var(--red);
|
background-color: var(--color-accent);
|
||||||
transition: var(--transition-normal);
|
transition: var(--transition-normal);
|
||||||
box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3);
|
box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3);
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
top: -0.5em;
|
top: -0.5em;
|
||||||
right: -0.5em;
|
right: -0.5em;
|
||||||
padding: 0.25em;
|
padding: 0.25em;
|
||||||
background-color: var(--nord6);
|
background-color: var(--color-bg-tertiary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon:focus {
|
.icon:focus {
|
||||||
@@ -14,12 +14,6 @@
|
|||||||
rotate: var(--angle);
|
rotate: var(--angle);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.icon {
|
|
||||||
background-color: var(--accent-dark);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Input-specific overrides */
|
/* Input-specific overrides */
|
||||||
input.icon {
|
input.icon {
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
|
|||||||
@@ -1,23 +1,11 @@
|
|||||||
/* Shared link styling for recipe reference links in h3 elements */
|
/* Shared link styling for recipe reference links in h3 elements */
|
||||||
h3 a {
|
h3 a {
|
||||||
color: var(--nord10);
|
color: var(--color-link);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
text-decoration-color: var(--nord10);
|
text-decoration-color: var(--color-link);
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 a:hover {
|
h3 a:hover {
|
||||||
color: var(--nord9);
|
color: var(--color-link-hover);
|
||||||
text-decoration-color: var(--nord9);
|
text-decoration-color: var(--color-link-hover);
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
h3 a {
|
|
||||||
color: var(--nord8);
|
|
||||||
text-decoration-color: var(--nord8);
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 a:hover {
|
|
||||||
color: var(--nord7);
|
|
||||||
text-decoration-color: var(--nord7);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import { browser } from '$app/environment';
|
||||||
|
|
||||||
|
export type Theme = 'system' | 'light' | 'dark';
|
||||||
|
|
||||||
|
const STORAGE_KEY = 'theme';
|
||||||
|
const CYCLE: Theme[] = ['system', 'light', 'dark'];
|
||||||
|
|
||||||
|
function applyTheme(theme: Theme) {
|
||||||
|
if (!browser) return;
|
||||||
|
if (theme === 'system') {
|
||||||
|
delete document.documentElement.dataset.theme;
|
||||||
|
} else {
|
||||||
|
document.documentElement.dataset.theme = theme;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTheme() {
|
||||||
|
let theme = $state<Theme>('system');
|
||||||
|
|
||||||
|
if (browser) {
|
||||||
|
const stored = localStorage.getItem(STORAGE_KEY) as Theme | null;
|
||||||
|
if (stored && CYCLE.includes(stored)) {
|
||||||
|
theme = stored;
|
||||||
|
}
|
||||||
|
applyTheme(theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
get theme() { return theme; },
|
||||||
|
|
||||||
|
cycle() {
|
||||||
|
const next = CYCLE[(CYCLE.indexOf(theme) + 1) % CYCLE.length];
|
||||||
|
theme = next;
|
||||||
|
applyTheme(next);
|
||||||
|
if (browser) {
|
||||||
|
if (next === 'system') {
|
||||||
|
localStorage.removeItem(STORAGE_KEY);
|
||||||
|
} else {
|
||||||
|
localStorage.setItem(STORAGE_KEY, next);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export const themeStore = createTheme();
|
||||||
@@ -7,7 +7,7 @@ let { data, children } = $props();
|
|||||||
let user = $derived(data.session?.user);
|
let user = $derived(data.session?.user);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Header>
|
<Header fullSymbol=true>
|
||||||
{#snippet language_selector_mobile()}
|
{#snippet language_selector_mobile()}
|
||||||
<LanguageSelector />
|
<LanguageSelector />
|
||||||
{/snippet}
|
{/snippet}
|
||||||
|
|||||||
@@ -83,13 +83,13 @@ section h2{
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark){
|
@media (prefers-color-scheme: dark){
|
||||||
*{
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.hero img{
|
.hero img{
|
||||||
box-shadow: 0.1em 0.1em 2em 0.5em rgba(255, 255, 255, 0.1);
|
box-shadow: 0.1em 0.1em 2em 0.5em rgba(255, 255, 255, 0.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .hero img {
|
||||||
|
box-shadow: 0.1em 0.1em 2em 0.5em rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
@media (max-width: 600px){
|
@media (max-width: 600px){
|
||||||
.hero{
|
.hero{
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
+49
-11
@@ -169,10 +169,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.error-page {
|
:global(:root:not([data-theme="light"])) .error-page {
|
||||||
background: var(--background-dark);
|
background: var(--background-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .error-page {
|
||||||
|
background: var(--background-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.error-container {
|
.error-container {
|
||||||
background: var(--nord5);
|
background: var(--nord5);
|
||||||
@@ -186,12 +189,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.error-container {
|
:global(:root:not([data-theme="light"])) .error-container {
|
||||||
background: var(--nord1);
|
background: var(--nord1);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .error-container {
|
||||||
|
background: var(--nord1);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
.error-icon {
|
.error-icon {
|
||||||
font-size: 4rem;
|
font-size: 4rem;
|
||||||
@@ -207,10 +215,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.error-title {
|
:global(:root:not([data-theme="light"])) .error-title {
|
||||||
color: var(--nord6);
|
color: var(--nord6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .error-title {
|
||||||
|
color: var(--nord6);
|
||||||
|
}
|
||||||
|
|
||||||
.error-code {
|
.error-code {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
@@ -221,10 +232,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.error-code {
|
:global(:root:not([data-theme="light"])) .error-code {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .error-code {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.error-description {
|
.error-description {
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
@@ -234,10 +248,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.error-description {
|
:global(:root:not([data-theme="light"])) .error-description {
|
||||||
color: var(--nord5);
|
color: var(--nord5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .error-description {
|
||||||
|
color: var(--nord5);
|
||||||
|
}
|
||||||
|
|
||||||
.error-details {
|
.error-details {
|
||||||
background: var(--nord4);
|
background: var(--nord4);
|
||||||
@@ -250,11 +267,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.error-details {
|
:global(:root:not([data-theme="light"])) .error-details {
|
||||||
background: var(--nord2);
|
background: var(--nord2);
|
||||||
color: var(--nord6);
|
color: var(--nord6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .error-details {
|
||||||
|
background: var(--nord2);
|
||||||
|
color: var(--nord6);
|
||||||
|
}
|
||||||
|
|
||||||
.error-actions {
|
.error-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -302,16 +323,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.btn-secondary {
|
:global(:root:not([data-theme="light"])) .btn-secondary {
|
||||||
background: var(--nord2);
|
background: var(--nord2);
|
||||||
color: var(--nord6);
|
color: var(--nord6);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary:hover {
|
:global(:root:not([data-theme="light"])) .btn-secondary:hover {
|
||||||
background: var(--nord3);
|
background: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .btn-secondary {
|
||||||
|
background: var(--nord2);
|
||||||
|
color: var(--nord6);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .btn-secondary:hover {
|
||||||
|
background: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.bible-quote {
|
.bible-quote {
|
||||||
@@ -324,10 +353,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.bible-quote {
|
:global(:root:not([data-theme="light"])) .bible-quote {
|
||||||
background: linear-gradient(135deg, var(--nord2), var(--nord3));
|
background: linear-gradient(135deg, var(--nord2), var(--nord3));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .bible-quote {
|
||||||
|
background: linear-gradient(135deg, var(--nord2), var(--nord3));
|
||||||
|
}
|
||||||
|
|
||||||
.quote-text {
|
.quote-text {
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
@@ -338,10 +370,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.quote-text {
|
:global(:root:not([data-theme="light"])) .quote-text {
|
||||||
color: var(--nord6);
|
color: var(--nord6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .quote-text {
|
||||||
|
color: var(--nord6);
|
||||||
|
}
|
||||||
|
|
||||||
.quote-reference {
|
.quote-reference {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
@@ -352,10 +387,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.quote-reference {
|
:global(:root:not([data-theme="light"])) .quote-reference {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .quote-reference {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
|
|||||||
@@ -1,6 +1,23 @@
|
|||||||
<script>
|
<script>
|
||||||
import '../app.css';
|
import '../app.css';
|
||||||
|
import { onNavigate } from '$app/navigation';
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
|
|
||||||
|
onNavigate((navigation) => {
|
||||||
|
if (!document.startViewTransition) return;
|
||||||
|
|
||||||
|
// Skip if staying within the same route group (recipe layout handles its own)
|
||||||
|
const fromGroup = navigation.from?.route.id?.split('/')[1] ?? '';
|
||||||
|
const toGroup = navigation.to?.route.id?.split('/')[1] ?? '';
|
||||||
|
if (fromGroup === toGroup) return;
|
||||||
|
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
document.startViewTransition(async () => {
|
||||||
|
resolve();
|
||||||
|
await navigation.complete;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{@render children()}
|
{@render children()}
|
||||||
@@ -27,8 +27,8 @@ function isActive(path) {
|
|||||||
<Header>
|
<Header>
|
||||||
{#snippet links()}
|
{#snippet links()}
|
||||||
<ul class=site_header>
|
<ul class=site_header>
|
||||||
<li><a href="/{data.faithLang}/{prayersPath}" class:active={isActive(`/${data.faithLang}/${prayersPath}`)}>{labels.prayers}</a></li>
|
<li><a href="/{data.faithLang}/{prayersPath}" class:active={isActive(`/${data.faithLang}/${prayersPath}`)} title={labels.prayers}><svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 640 512" fill="currentColor"><path d="M351.2 4.8c3.2-2 6.6-3.3 10-4.1c4.7-1 9.6-.9 14.1 .1c7.7 1.8 14.8 6.5 19.4 13.6L514.6 194.2c8.8 13.1 13.4 28.6 13.4 44.4v73.5c0 6.9 4.4 13 10.9 15.2l79.2 26.4C631.2 358 640 370.2 640 384v96c0 9.9-4.6 19.3-12.5 25.4s-18.1 8.1-27.7 5.5L431 465.9c-56-14.9-95-65.7-95-123.7V224c0-17.7 14.3-32 32-32s32 14.3 32 32v80c0 8.8 7.2 16 16 16s16-7.2 16-16V219.1c0-7-1.8-13.8-5.3-19.8L340.3 48.1c-1.7-3-2.9-6.1-3.6-9.3c-1-4.7-1-9.6 .1-14.1c1.9-8 6.8-15.2 14.3-19.9zm-62.4 0c7.5 4.6 12.4 11.9 14.3 19.9c1.1 4.6 1.2 9.4 .1 14.1c-.7 3.2-1.9 6.3-3.6 9.3L213.3 199.3c-3.5 6-5.3 12.9-5.3 19.8V304c0 8.8 7.2 16 16 16s16-7.2 16-16V224c0-17.7 14.3-32 32-32s32 14.3 32 32V342.3c0 58-39 108.7-95 123.7l-168.7 45c-9.6 2.6-19.9 .5-27.7-5.5S0 490 0 480V384c0-13.8 8.8-26 21.9-30.4l79.2-26.4c6.5-2.2 10.9-8.3 10.9-15.2V238.5c0-15.8 4.7-31.2 13.4-44.4L245.2 14.5c4.6-7.1 11.7-11.8 19.4-13.6c4.6-1.1 9.4-1.2 14.1-.1c3.5 .8 6.9 2.1 10 4.1z"/></svg><span class="nav-label">{labels.prayers}</span></a></li>
|
||||||
<li><a href="/{data.faithLang}/{rosaryPath}" class:active={isActive(`/${data.faithLang}/${rosaryPath}`)}>{labels.rosary}</a></li>
|
<li><a href="/{data.faithLang}/{rosaryPath}" class:active={isActive(`/${data.faithLang}/${rosaryPath}`)} title={labels.rosary}><svg class="nav-icon" width="16" height="16" viewBox="0 0 512 512" fill="currentColor"><path d="M241.251,145.056c-39.203-17.423-91.472,17.423-104.54,60.982c-13.068,43.558,8.712,117.608,65.337,143.742 c56.626,26.135,108.896-8.712,87.117-39.202c-74.049-8.712-121.963-87.117-100.184-126.319S280.453,162.479,241.251,145.056z"/><path d="M337.079,271.375c47.914-39.202,21.779-126.319-17.423-135.031c-39.202-8.712-56.626,13.068-26.135,39.202 c39.203,30.491-8.712,91.472-39.202,87.117C254.318,262.663,289.165,310.577,337.079,271.375z"/><path d="M254.318,119.788c43.558-17.423,74.049-9.579,100.184,16.556c13.068-39.202-30.491-104.54-108.896-113.252 S93.153,118.921,127.999,171.191C136.711,153.767,188.981,106.721,254.318,119.788z"/><path d="M110.576,245.24C36.527,262.663,28.87,335.248,45.239,380.27c17.423,47.914,4.356,82.761,26.135,91.472 c20.622,8.253,91.472,13.068,152.454,17.423c60.982,4.356,108.896-47.914,91.472-108.896 C141.067,410.761,110.576,284.442,110.576,245.24z"/><path d="M93.883,235.796c0,0,2.178-28.313,10.89-43.558c-4.356-4.356-8.712-21.779-8.712-21.779 s-4.356-19.601-4.356-34.846c-32.669-6.534-89.295,34.846-91.472,41.38c-2.178,6.534,10.889,80.583,39.202,82.761 C69.927,235.796,93.883,235.796,93.883,235.796z"/><path d="M489.533,175.546c-39.202-82.761-113.252-65.337-113.252-65.337s4.356,21.779-4.356,34.846 c43.558,47.914,13.067,146.643-24.681,158.265c130.675,56.626,159.712-58.081,164.068-75.504 C515.668,210.393,498.245,197.326,489.533,175.546z"/><path d="M454.108,332.076c-22.359,15.841-85.663,11.613-121.964-7.265c1.446,14.514-13.067,37.756-20.325,39.202 c27.59,11.621,53.725,62.436,7.265,116.161c18.878,18.87,95.828,4.356,140.842-24.689c7.325-4.722,18.869-52.27,21.779-79.851 C485.56,339.103,488.963,307.387,454.108,332.076z"/><path d="M257.227,213.294c-18.928,5.164-30.439-6.27-23.234-18.869c5.811-10.167,5.266-20.69-8.712-13.068 c-29.044,17.423-11.612,66.784,24.689,62.428c49.36-17.423,27.581-62.428,14.514-60.982 C251.417,184.249,273.196,208.938,257.227,213.294z"/></svg><span class="nav-label">{labels.rosary}</span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
{/snippet}
|
{/snippet}
|
||||||
|
|
||||||
|
|||||||
@@ -369,19 +369,32 @@ h1{
|
|||||||
color: var(--nord0);
|
color: var(--nord0);
|
||||||
}
|
}
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.category-pill {
|
:global(:root:not([data-theme="dark"])) .category-pill {
|
||||||
border-color: var(--nord4);
|
border-color: var(--nord4);
|
||||||
color: var(--nord3);
|
color: var(--nord3);
|
||||||
}
|
}
|
||||||
.category-pill:hover {
|
:global(:root:not([data-theme="dark"])) .category-pill:hover {
|
||||||
border-color: var(--nord10);
|
border-color: var(--nord10);
|
||||||
color: var(--nord10);
|
color: var(--nord10);
|
||||||
}
|
}
|
||||||
.category-pill.selected {
|
:global(:root:not([data-theme="dark"])) .category-pill.selected {
|
||||||
border-color: var(--nord10);
|
border-color: var(--nord10);
|
||||||
background-color: var(--nord10);
|
background-color: var(--nord10);
|
||||||
color: var(--nord6);
|
color: var(--nord6);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .category-pill {
|
||||||
|
border-color: var(--nord4);
|
||||||
|
color: var(--nord3);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .category-pill:hover {
|
||||||
|
border-color: var(--nord10);
|
||||||
|
color: var(--nord10);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .category-pill.selected {
|
||||||
|
border-color: var(--nord10);
|
||||||
|
background-color: var(--nord10);
|
||||||
|
color: var(--nord6);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Search result styling */
|
/* Search result styling */
|
||||||
@@ -409,10 +422,14 @@ h1{
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.prayer-wrapper.secondary-match::before {
|
:global(:root:not([data-theme="dark"])) .prayer-wrapper.secondary-match::before {
|
||||||
background: var(--nord4);
|
background: var(--nord4);
|
||||||
color: var(--nord0);
|
color: var(--nord0);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .prayer-wrapper.secondary-match::before {
|
||||||
|
background: var(--nord4);
|
||||||
|
color: var(--nord0);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Postcommunio section */
|
/* Postcommunio section */
|
||||||
@@ -424,9 +441,12 @@ h1{
|
|||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.postcommunio-section {
|
:global(:root:not([data-theme="dark"])) .postcommunio-section {
|
||||||
background-color: var(--nord5);
|
background-color: var(--nord5);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .postcommunio-section {
|
||||||
|
background-color: var(--nord5);
|
||||||
}
|
}
|
||||||
/* Seasonal badge */
|
/* Seasonal badge */
|
||||||
.seasonal-badge {
|
.seasonal-badge {
|
||||||
@@ -463,14 +483,16 @@ h1{
|
|||||||
href={buildFilterHref(null)}
|
href={buildFilterHref(null)}
|
||||||
class="category-pill"
|
class="category-pill"
|
||||||
class:selected={!selectedCategory}
|
class:selected={!selectedCategory}
|
||||||
onclick={(e) => { e.preventDefault(); selectedCategory = null; }}
|
onclick={(e) => { e.preventDefault(); selectedCategory = null; }
|
||||||
|
}
|
||||||
>{isEnglish ? 'All' : 'Alle'}</a>
|
>{isEnglish ? 'All' : 'Alle'}</a>
|
||||||
{#each categories as cat (cat.id)}
|
{#each categories as cat (cat.id)}
|
||||||
<a
|
<a
|
||||||
href={buildFilterHref(cat.id)}
|
href={buildFilterHref(cat.id)}
|
||||||
class="category-pill"
|
class="category-pill"
|
||||||
class:selected={selectedCategory === cat.id}
|
class:selected={selectedCategory === cat.id}
|
||||||
onclick={(e) => { e.preventDefault(); selectedCategory = cat.id; }}
|
onclick={(e) => { e.preventDefault(); selectedCategory = cat.id; }
|
||||||
|
}
|
||||||
>{isEnglish ? cat.en : cat.de}</a>
|
>{isEnglish ? cat.en : cat.de}</a>
|
||||||
{/each}
|
{/each}
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@@ -52,9 +52,12 @@ a.gebet-link {
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
.gebet_wrapper {
|
:global(:root:not([data-theme="dark"])) .gebet_wrapper {
|
||||||
background-color: var(--nord5);
|
background-color: var(--nord5);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .gebet_wrapper {
|
||||||
|
background-color: var(--nord5);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -146,9 +146,12 @@ h1 {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
.gebet-wrapper {
|
:global(:root:not([data-theme="dark"])) .gebet-wrapper {
|
||||||
background-color: var(--nord5);
|
background-color: var(--nord5);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .gebet-wrapper {
|
||||||
|
background-color: var(--nord5);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
{#if prayerId === 'postcommunio' || prayerId === 'prayerbeforeacrucifix'}
|
{#if prayerId === 'postcommunio' || prayerId === 'prayerbeforeacrucifix'}
|
||||||
|
|||||||
@@ -488,9 +488,12 @@ onMount(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
.prayer-section {
|
:global(:root:not([data-theme="dark"])) .prayer-section {
|
||||||
background: var(--nord5);
|
background: var(--nord5);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .prayer-section {
|
||||||
|
background: var(--nord5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.prayer-section.decade {
|
.prayer-section.decade {
|
||||||
@@ -603,9 +606,12 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.bible-reference-text {
|
:global(:root:not([data-theme="dark"])) .bible-reference-text {
|
||||||
color: var(--nord10);
|
color: var(--nord10);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .bible-reference-text {
|
||||||
|
color: var(--nord10);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bible-reference-button {
|
.bible-reference-button {
|
||||||
@@ -638,16 +644,25 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.bible-reference-button {
|
:global(:root:not([data-theme="dark"])) .bible-reference-button {
|
||||||
background: var(--nord5);
|
background: var(--nord5);
|
||||||
border-color: var(--nord4);
|
border-color: var(--nord4);
|
||||||
color: var(--nord0);
|
color: var(--nord0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bible-reference-button:hover {
|
:global(:root:not([data-theme="dark"])) .bible-reference-button:hover {
|
||||||
background: var(--nord4);
|
background: var(--nord4);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .bible-reference-button {
|
||||||
|
background: var(--nord5);
|
||||||
|
border-color: var(--nord4);
|
||||||
|
color: var(--nord0);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .bible-reference-button:hover {
|
||||||
|
background: var(--nord4);
|
||||||
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Footnote styles */
|
/* Footnote styles */
|
||||||
@@ -658,9 +673,12 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.footnotes-section {
|
:global(:root:not([data-theme="dark"])) .footnotes-section {
|
||||||
color: var(--nord0);
|
color: var(--nord0);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .footnotes-section {
|
||||||
|
color: var(--nord0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footnotes-section p {
|
.footnotes-section p {
|
||||||
@@ -1028,7 +1046,8 @@ h1 {
|
|||||||
<p><span class="symbol">♱</span>{labels.footnoteSign}</p>
|
<p><span class="symbol">♱</span>{labels.footnoteSign}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a class="scroll-top-button action_button" href="#top" onclick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }} aria-label="Scroll to top">
|
<a class="scroll-top-button action_button" href="#top" onclick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }
|
||||||
|
} aria-label="Scroll to top">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>
|
||||||
</a>
|
</a>
|
||||||
<div class="scroll-padding"></div>
|
<div class="scroll-padding"></div>
|
||||||
|
|||||||
@@ -30,10 +30,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (min-width: 1200px) and (prefers-color-scheme: light) {
|
@media (min-width: 1200px) and (prefers-color-scheme: light) {
|
||||||
figcaption {
|
:global(:root:not([data-theme="dark"])) figcaption {
|
||||||
color: var(--nord2);
|
color: var(--nord2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
:global(:root[data-theme="light"]) figcaption {
|
||||||
|
color: var(--nord2);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="mystery-image-pad" data-target="before"></div>
|
<div class="mystery-image-pad" data-target="before"></div>
|
||||||
|
|||||||
@@ -119,9 +119,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.mystery-button {
|
:global(:root:not([data-theme="dark"])) .mystery-button {
|
||||||
background: var(--nord6);
|
background: var(--nord6);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .mystery-button {
|
||||||
|
background: var(--nord6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mystery-button:hover {
|
.mystery-button:hover {
|
||||||
@@ -146,9 +149,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.mystery-button h3 {
|
:global(:root:not([data-theme="dark"])) .mystery-button:not(.selected):not(:hover) h3 {
|
||||||
color: var(--nord0);
|
color: var(--nord0);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .mystery-button:not(.selected):not(:hover) h3 {
|
||||||
|
color: var(--nord0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mystery-button.selected h3,
|
.mystery-button.selected h3,
|
||||||
@@ -209,7 +215,8 @@
|
|||||||
class:season-lent={season === 'lent' && seasonalMystery === 'freudenreich'}
|
class:season-lent={season === 'lent' && seasonalMystery === 'freudenreich'}
|
||||||
class:season-eastertide={season === 'eastertide' && seasonalMystery === 'freudenreich'}
|
class:season-eastertide={season === 'eastertide' && seasonalMystery === 'freudenreich'}
|
||||||
href={mysteryHref('freudenreich')}
|
href={mysteryHref('freudenreich')}
|
||||||
onclick={(e) => { e.preventDefault(); selectMystery('freudenreich'); }}
|
onclick={(e) => { e.preventDefault(); selectMystery('freudenreich'); }
|
||||||
|
}
|
||||||
>
|
>
|
||||||
{#if seasonalMystery === 'freudenreich' || todaysMystery === 'freudenreich'}
|
{#if seasonalMystery === 'freudenreich' || todaysMystery === 'freudenreich'}
|
||||||
<div class="badge-stack">
|
<div class="badge-stack">
|
||||||
@@ -227,7 +234,8 @@
|
|||||||
class:season-lent={season === 'lent' && seasonalMystery === 'schmerzhaften'}
|
class:season-lent={season === 'lent' && seasonalMystery === 'schmerzhaften'}
|
||||||
class:season-eastertide={season === 'eastertide' && seasonalMystery === 'schmerzhaften'}
|
class:season-eastertide={season === 'eastertide' && seasonalMystery === 'schmerzhaften'}
|
||||||
href={mysteryHref('schmerzhaften')}
|
href={mysteryHref('schmerzhaften')}
|
||||||
onclick={(e) => { e.preventDefault(); selectMystery('schmerzhaften'); }}
|
onclick={(e) => { e.preventDefault(); selectMystery('schmerzhaften'); }
|
||||||
|
}
|
||||||
>
|
>
|
||||||
{#if seasonalMystery === 'schmerzhaften' || todaysMystery === 'schmerzhaften'}
|
{#if seasonalMystery === 'schmerzhaften' || todaysMystery === 'schmerzhaften'}
|
||||||
<div class="badge-stack">
|
<div class="badge-stack">
|
||||||
@@ -245,7 +253,8 @@
|
|||||||
class:season-lent={season === 'lent' && seasonalMystery === 'glorreichen'}
|
class:season-lent={season === 'lent' && seasonalMystery === 'glorreichen'}
|
||||||
class:season-eastertide={season === 'eastertide' && seasonalMystery === 'glorreichen'}
|
class:season-eastertide={season === 'eastertide' && seasonalMystery === 'glorreichen'}
|
||||||
href={mysteryHref('glorreichen')}
|
href={mysteryHref('glorreichen')}
|
||||||
onclick={(e) => { e.preventDefault(); selectMystery('glorreichen'); }}
|
onclick={(e) => { e.preventDefault(); selectMystery('glorreichen'); }
|
||||||
|
}
|
||||||
>
|
>
|
||||||
{#if seasonalMystery === 'glorreichen' || todaysMystery === 'glorreichen'}
|
{#if seasonalMystery === 'glorreichen' || todaysMystery === 'glorreichen'}
|
||||||
<div class="badge-stack">
|
<div class="badge-stack">
|
||||||
@@ -264,7 +273,8 @@
|
|||||||
class:season-lent={season === 'lent' && seasonalMystery === 'lichtreichen'}
|
class:season-lent={season === 'lent' && seasonalMystery === 'lichtreichen'}
|
||||||
class:season-eastertide={season === 'eastertide' && seasonalMystery === 'lichtreichen'}
|
class:season-eastertide={season === 'eastertide' && seasonalMystery === 'lichtreichen'}
|
||||||
href={mysteryHref('lichtreichen')}
|
href={mysteryHref('lichtreichen')}
|
||||||
onclick={(e) => { e.preventDefault(); selectMystery('lichtreichen'); }}
|
onclick={(e) => { e.preventDefault(); selectMystery('lichtreichen'); }
|
||||||
|
}
|
||||||
>
|
>
|
||||||
{#if todaysMystery === 'lichtreichen'}
|
{#if todaysMystery === 'lichtreichen'}
|
||||||
<div class="badge-stack">
|
<div class="badge-stack">
|
||||||
|
|||||||
@@ -32,12 +32,23 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
.cross-symbol {
|
:global(:root:not([data-theme="dark"])) .cross-symbol {
|
||||||
fill: var(--nord3);
|
fill: var(--nord3);
|
||||||
}
|
}
|
||||||
.chain {
|
:global(:root:not([data-theme="dark"])) .chain {
|
||||||
stroke: var(--nord3);
|
stroke: var(--nord3);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .cross-symbol {
|
||||||
|
fill: var(--nord3);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .chain {
|
||||||
|
stroke: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medal SVG is external, can't see data-theme — darken for forced light */
|
||||||
|
:global(:root[data-theme="light"]) .medal {
|
||||||
|
filter: brightness(0.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hitboxes {
|
.hitboxes {
|
||||||
@@ -95,7 +106,7 @@
|
|||||||
<circle cx="25" cy={pos.lbead2} r="15" class="large-bead" class:active-large-bead={activeSection === 'lbead2'} data-section="lbead2" />
|
<circle cx="25" cy={pos.lbead2} r="15" class="large-bead" class:active-large-bead={activeSection === 'lbead2'} data-section="lbead2" />
|
||||||
|
|
||||||
<!-- Benedictus Medal -->
|
<!-- Benedictus Medal -->
|
||||||
<image href="/glaube/benedictus.svg" x="5" y={pos.lbead2 + 25} width="40" height="40" />
|
<image class="medal" href="/glaube/benedictus.svg" x="5" y={pos.lbead2 + 25} width="40" height="40" />
|
||||||
|
|
||||||
<!-- 5 Decades -->
|
<!-- 5 Decades -->
|
||||||
{#each [1, 2, 3, 4, 5] as d (d)}
|
{#each [1, 2, 3, 4, 5] as d (d)}
|
||||||
@@ -114,7 +125,7 @@
|
|||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
<image href="/glaube/benedictus.svg" x="5" y={pos.secret5 + DECADE_OFFSET + 9 * BEAD_SPACING + 15} width="40" height="40" />
|
<image class="medal" href="/glaube/benedictus.svg" x="5" y={pos.secret5 + DECADE_OFFSET + 9 * BEAD_SPACING + 15} width="40" height="40" />
|
||||||
<!-- Final transition: Gloria + Fatima -->
|
<!-- Final transition: Gloria + Fatima -->
|
||||||
<circle cx="25" cy={pos.final_transition} r="15" class="large-bead" class:active-large-bead={activeSection === 'final_transition'} data-section="final_transition" />
|
<circle cx="25" cy={pos.final_transition} r="15" class="large-bead" class:active-large-bead={activeSection === 'final_transition'} data-section="final_transition" />
|
||||||
|
|
||||||
|
|||||||
@@ -45,6 +45,7 @@ onNavigate((navigation) => {
|
|||||||
import UserHeader from '$lib/components/UserHeader.svelte';
|
import UserHeader from '$lib/components/UserHeader.svelte';
|
||||||
import LanguageSelector from '$lib/components/LanguageSelector.svelte';
|
import LanguageSelector from '$lib/components/LanguageSelector.svelte';
|
||||||
import OfflineSyncButton from '$lib/components/OfflineSyncButton.svelte';
|
import OfflineSyncButton from '$lib/components/OfflineSyncButton.svelte';
|
||||||
|
import { BookOpen, Heart, Leaf, LayoutGrid, Palette, Tag } from 'lucide-svelte';
|
||||||
let { data, children } = $props();
|
let { data, children } = $props();
|
||||||
|
|
||||||
let user = $derived(data.session?.user);
|
let user = $derived(data.session?.user);
|
||||||
@@ -73,14 +74,14 @@ function isActive(path) {
|
|||||||
<Header>
|
<Header>
|
||||||
{#snippet links()}
|
{#snippet links()}
|
||||||
<ul class=site_header>
|
<ul class=site_header>
|
||||||
<li><a href="/{data.recipeLang}" class:active={isActive(`/${data.recipeLang}`)}>{labels.allRecipes}</a></li>
|
<li><a href="/{data.recipeLang}" class:active={isActive(`/${data.recipeLang}`)} title={labels.allRecipes}><BookOpen size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">{labels.allRecipes}</span></a></li>
|
||||||
{#if user}
|
{#if user}
|
||||||
<li><a href="/{data.recipeLang}/favorites" class:active={isActive(`/${data.recipeLang}/favorites`)}>{labels.favorites}</a></li>
|
<li><a href="/{data.recipeLang}/favorites" class:active={isActive(`/${data.recipeLang}/favorites`)} title={labels.favorites}><Heart size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">{labels.favorites}</span></a></li>
|
||||||
{/if}
|
{/if}
|
||||||
<li><a href="/{data.recipeLang}/season" class:active={isActive(`/${data.recipeLang}/season`)}>{labels.inSeason}</a></li>
|
<li><a href="/{data.recipeLang}/season" class:active={isActive(`/${data.recipeLang}/season`)} title={labels.inSeason}><Leaf size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">{labels.inSeason}</span></a></li>
|
||||||
<li><a href="/{data.recipeLang}/category" class:active={isActive(`/${data.recipeLang}/category`)}>{labels.category}</a></li>
|
<li><a href="/{data.recipeLang}/category" class:active={isActive(`/${data.recipeLang}/category`)} title={labels.category}><LayoutGrid size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">{labels.category}</span></a></li>
|
||||||
<li><a href="/{data.recipeLang}/icon" class:active={isActive(`/${data.recipeLang}/icon`)}>{labels.icon}</a></li>
|
<li><a href="/{data.recipeLang}/icon" class:active={isActive(`/${data.recipeLang}/icon`)} title={labels.icon}><Palette size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">{labels.icon}</span></a></li>
|
||||||
<li><a href="/{data.recipeLang}/tag" class:active={isActive(`/${data.recipeLang}/tag`)}>{labels.keywords}</a></li>
|
<li><a href="/{data.recipeLang}/tag" class:active={isActive(`/${data.recipeLang}/tag`)} title={labels.keywords}><Tag size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">{labels.keywords}</span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
{/snippet}
|
{/snippet}
|
||||||
|
|
||||||
|
|||||||
@@ -135,7 +135,8 @@
|
|||||||
--parallax-scale: 0.3;
|
--parallax-scale: 0.3;
|
||||||
margin-bottom: calc(var(--parallax-scale) * (20vh - min(60vh, 520px)));
|
margin-bottom: calc(var(--parallax-scale) * (20vh - min(60vh, 520px)));
|
||||||
transform-origin: center top;
|
transform-origin: center top;
|
||||||
transform: translateY(-1rem) scaleY(calc(1 - var(--parallax-scale)));
|
transform: scaleY(calc(1 - var(--parallax-scale)));
|
||||||
|
margin-top: calc(-3.5rem - 12px);
|
||||||
}
|
}
|
||||||
@media (prefers-reduced-motion) {
|
@media (prefers-reduced-motion) {
|
||||||
.hero-section {
|
.hero-section {
|
||||||
@@ -152,9 +153,9 @@
|
|||||||
.hero {
|
.hero {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
height: min(60vh, 520px);
|
height: min(65vh, 560px);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
max-width: 1200px;
|
max-width: calc(1200px + 2rem);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
@@ -262,7 +263,7 @@
|
|||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
background: rgba(255,255,255,0.85);
|
background: rgba(255,255,255,0.85);
|
||||||
color: var(--nord0);
|
color: #2a2a2a;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
.chip:hover {
|
.chip:hover {
|
||||||
@@ -274,8 +275,8 @@
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
.chip.season {
|
.chip.season {
|
||||||
background: var(--color-secondary);
|
background: var(--color-accent);
|
||||||
color: white;
|
color: var(--color-text-on-accent);
|
||||||
}
|
}
|
||||||
.chip .count {
|
.chip .count {
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
|
|||||||
@@ -201,16 +201,10 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: #fbf9f3;
|
background: var(--color-bg-primary);
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.error-page {
|
|
||||||
background: var(--background-dark);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-container {
|
.error-container {
|
||||||
background: var(--nord5);
|
background: var(--nord5);
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
@@ -223,12 +217,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.error-container {
|
:global(:root:not([data-theme="light"])) .error-container {
|
||||||
background: var(--nord1);
|
background: var(--nord1);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .error-container {
|
||||||
|
background: var(--nord1);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
.error-icon {
|
.error-icon {
|
||||||
font-size: 4rem;
|
font-size: 4rem;
|
||||||
@@ -244,10 +243,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.error-title {
|
:global(:root:not([data-theme="light"])) .error-title {
|
||||||
color: var(--nord6);
|
color: var(--nord6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .error-title {
|
||||||
|
color: var(--nord6);
|
||||||
|
}
|
||||||
|
|
||||||
.error-code {
|
.error-code {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
@@ -258,10 +260,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.error-code {
|
:global(:root:not([data-theme="light"])) .error-code {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .error-code {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.error-description {
|
.error-description {
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
@@ -271,10 +276,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.error-description {
|
:global(:root:not([data-theme="light"])) .error-description {
|
||||||
color: var(--nord5);
|
color: var(--nord5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .error-description {
|
||||||
|
color: var(--nord5);
|
||||||
|
}
|
||||||
|
|
||||||
.error-details {
|
.error-details {
|
||||||
background: var(--nord4);
|
background: var(--nord4);
|
||||||
@@ -287,11 +295,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.error-details {
|
:global(:root:not([data-theme="light"])) .error-details {
|
||||||
background: var(--nord2);
|
background: var(--nord2);
|
||||||
color: var(--nord6);
|
color: var(--nord6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .error-details {
|
||||||
|
background: var(--nord2);
|
||||||
|
color: var(--nord6);
|
||||||
|
}
|
||||||
|
|
||||||
.checking-message {
|
.checking-message {
|
||||||
background: var(--nord4);
|
background: var(--nord4);
|
||||||
@@ -304,11 +316,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.checking-message {
|
:global(:root:not([data-theme="light"])) .checking-message {
|
||||||
background: var(--nord2);
|
background: var(--nord2);
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .checking-message {
|
||||||
|
background: var(--nord2);
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.error-actions {
|
.error-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -356,16 +372,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.btn-secondary {
|
:global(:root:not([data-theme="light"])) .btn-secondary {
|
||||||
background: var(--nord2);
|
background: var(--nord2);
|
||||||
color: var(--nord6);
|
color: var(--nord6);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary:hover {
|
:global(:root:not([data-theme="light"])) .btn-secondary:hover {
|
||||||
background: var(--nord3);
|
background: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .btn-secondary {
|
||||||
|
background: var(--nord2);
|
||||||
|
color: var(--nord6);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .btn-secondary:hover {
|
||||||
|
background: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.error-container {
|
.error-container {
|
||||||
|
|||||||
@@ -148,7 +148,7 @@ h2.section-label{
|
|||||||
}
|
}
|
||||||
|
|
||||||
.wrapper_wrapper{
|
.wrapper_wrapper{
|
||||||
--bg-color: #fbf9f3;
|
--bg-color: var(--color-bg-primary);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 2fr;
|
grid-template-columns: 1fr 2fr;
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
@@ -173,11 +173,7 @@ h2.section-label{
|
|||||||
grid-column: 1 / -1;
|
grid-column: 1 / -1;
|
||||||
justify-self: center;
|
justify-self: center;
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
/* bg-color is set via var(--color-bg-primary) which auto-switches in dark mode */
|
||||||
.wrapper_wrapper{
|
|
||||||
--bg-color: var(--background-dark);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 700px){
|
@media screen and (max-width: 700px){
|
||||||
.wrapper_wrapper{
|
.wrapper_wrapper{
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -193,16 +189,11 @@ h2.section-label{
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: min(800px, 80vw);
|
width: min(800px, 80vw);
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
background-color: var(--nord6);
|
background-color: var(--color-bg-tertiary);
|
||||||
padding: 1rem 2rem;
|
padding: 1rem 2rem;
|
||||||
translate: 0 1px; /*bruh*/
|
translate: 0 1px; /*bruh*/
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.title{
|
|
||||||
background-color: var(--nord6-dark);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon{
|
.icon{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -210,12 +201,7 @@ h2.section-label{
|
|||||||
right: -0.75em;
|
right: -0.75em;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
background-color: #FAFAFE;
|
background-color: var(--color-bg-tertiary);
|
||||||
}
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.icon{
|
|
||||||
background-color: var(--accent-dark);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.icon:hover,
|
.icon:hover,
|
||||||
.icon:focus-visible{
|
.icon:focus-visible{
|
||||||
|
|||||||
@@ -261,9 +261,12 @@ button.action_button {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.title {
|
:global(:root:not([data-theme="light"])) .title {
|
||||||
background-color: var(--nord6-dark);
|
background-color: var(--nord6-dark);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .title {
|
||||||
|
background-color: var(--nord6-dark);
|
||||||
}
|
}
|
||||||
.form-size-section {
|
.form-size-section {
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
@@ -326,7 +329,8 @@ button.action_button {
|
|||||||
await update();
|
await update();
|
||||||
submitting = false;
|
submitting = false;
|
||||||
};
|
};
|
||||||
}}
|
}
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<!-- Hidden inputs for complex nested data -->
|
<!-- Hidden inputs for complex nested data -->
|
||||||
<input type="hidden" name="ingredients_json" value={JSON.stringify(ingredients)} />
|
<input type="hidden" name="ingredients_json" value={JSON.stringify(ingredients)} />
|
||||||
@@ -375,19 +379,23 @@ button.action_button {
|
|||||||
<h3>Backform (Standard):</h3>
|
<h3>Backform (Standard):</h3>
|
||||||
<div class="form-size-controls">
|
<div class="form-size-controls">
|
||||||
<label>
|
<label>
|
||||||
<input type="radio" name="formShape" value="none" checked={!defaultForm} onchange={() => { defaultForm = null; }} />
|
<input type="radio" name="formShape" value="none" checked={!defaultForm} onchange={() => { defaultForm = null; }
|
||||||
|
} />
|
||||||
Keine
|
Keine
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
<input type="radio" name="formShape" value="round" checked={defaultForm?.shape === 'round'} onchange={() => { defaultForm = { shape: 'round', diameter: defaultForm?.diameter || 26 }; }} />
|
<input type="radio" name="formShape" value="round" checked={defaultForm?.shape === 'round'} onchange={() => { defaultForm = { shape: 'round', diameter: defaultForm?.diameter || 26 }; }
|
||||||
|
} />
|
||||||
Rund
|
Rund
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
<input type="radio" name="formShape" value="rectangular" checked={defaultForm?.shape === 'rectangular'} onchange={() => { defaultForm = { shape: 'rectangular', width: defaultForm?.width || 20, length: defaultForm?.length || 30 }; }} />
|
<input type="radio" name="formShape" value="rectangular" checked={defaultForm?.shape === 'rectangular'} onchange={() => { defaultForm = { shape: 'rectangular', width: defaultForm?.width || 20, length: defaultForm?.length || 30 }; }
|
||||||
|
} />
|
||||||
Rechteckig
|
Rechteckig
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
<input type="radio" name="formShape" value="gugelhupf" checked={defaultForm?.shape === 'gugelhupf'} onchange={() => { defaultForm = { shape: 'gugelhupf', diameter: defaultForm?.diameter || 24, innerDiameter: defaultForm?.innerDiameter || 8 }; }} />
|
<input type="radio" name="formShape" value="gugelhupf" checked={defaultForm?.shape === 'gugelhupf'} onchange={() => { defaultForm = { shape: 'gugelhupf', diameter: defaultForm?.diameter || 24, innerDiameter: defaultForm?.innerDiameter || 8 }; }
|
||||||
|
} />
|
||||||
Gugelhupf
|
Gugelhupf
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -71,10 +71,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
h1 {
|
:global(:root:not([data-theme="light"])) h1 {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) h1 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
.stats {
|
.stats {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -91,10 +94,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.stat-card {
|
:global(:root:not([data-theme="light"])) .stat-card {
|
||||||
background-color: var(--nord0);
|
background-color: var(--nord0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .stat-card {
|
||||||
|
background-color: var(--nord0);
|
||||||
|
}
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
@@ -132,10 +138,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.controls {
|
:global(:root:not([data-theme="light"])) .controls {
|
||||||
background-color: var(--nord1);
|
background-color: var(--nord1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .controls {
|
||||||
|
background-color: var(--nord1);
|
||||||
|
}
|
||||||
|
|
||||||
.control-group {
|
.control-group {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
@@ -156,13 +165,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
select,
|
:global(:root:not([data-theme="light"])) select,
|
||||||
input {
|
:global(:root:not([data-theme="light"])) input {
|
||||||
background-color: var(--nord0);
|
background-color: var(--nord0);
|
||||||
color: white;
|
color: white;
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) select,
|
||||||
|
:global(:root[data-theme="dark"]) input {
|
||||||
|
background-color: var(--nord0);
|
||||||
|
color: white;
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
padding: 0.75rem 1.5rem;
|
padding: 0.75rem 1.5rem;
|
||||||
@@ -197,10 +212,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.result-item {
|
:global(:root:not([data-theme="light"])) .result-item {
|
||||||
background-color: var(--nord1);
|
background-color: var(--nord1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .result-item {
|
||||||
|
background-color: var(--nord1);
|
||||||
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
|||||||
@@ -67,8 +67,11 @@
|
|||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
h1 { color: white; }
|
:global(:root:not([data-theme="light"])) h1 { color: white; }
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) h1 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
.stats {
|
.stats {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
@@ -82,8 +85,11 @@
|
|||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.stat-card { background-color: var(--nord0); }
|
:global(:root:not([data-theme="light"])) .stat-card { background-color: var(--nord0); }
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .stat-card {
|
||||||
|
background-color: var(--nord0);
|
||||||
|
}
|
||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
color: var(--nord3);
|
color: var(--nord3);
|
||||||
@@ -101,8 +107,11 @@
|
|||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.controls { background-color: var(--nord1); }
|
:global(:root:not([data-theme="light"])) .controls { background-color: var(--nord1); }
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .controls {
|
||||||
|
background-color: var(--nord1);
|
||||||
|
}
|
||||||
.control-group {
|
.control-group {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
@@ -118,12 +127,19 @@
|
|||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
select, input {
|
:global(:root:not([data-theme="light"])) select,
|
||||||
|
:global(:root:not([data-theme="light"])) input {
|
||||||
background-color: var(--nord0);
|
background-color: var(--nord0);
|
||||||
color: white;
|
color: white;
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) select,
|
||||||
|
:global(:root[data-theme="dark"]) input {
|
||||||
|
background-color: var(--nord0);
|
||||||
|
color: white;
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
button {
|
button {
|
||||||
padding: 0.75rem 1.5rem;
|
padding: 0.75rem 1.5rem;
|
||||||
background-color: var(--nord8);
|
background-color: var(--nord8);
|
||||||
@@ -153,8 +169,11 @@
|
|||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.result-item { background-color: var(--nord1); }
|
:global(:root:not([data-theme="light"])) .result-item { background-color: var(--nord1); }
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .result-item {
|
||||||
|
background-color: var(--nord1);
|
||||||
|
}
|
||||||
.color-swatch {
|
.color-swatch {
|
||||||
width: 2.5rem;
|
width: 2.5rem;
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
|
|||||||
@@ -41,10 +41,14 @@ h1 {
|
|||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.stats-container {
|
:global(:root:not([data-theme="dark"])) .stats-container {
|
||||||
background: var(--nord6);
|
background: var(--nord6);
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .stats-container {
|
||||||
|
background: var(--nord6);
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
.stats-grid {
|
.stats-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -59,9 +63,12 @@ h1 {
|
|||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.stat-item {
|
:global(:root:not([data-theme="dark"])) .stat-item {
|
||||||
background: var(--nord5);
|
background: var(--nord5);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .stat-item {
|
||||||
|
background: var(--nord5);
|
||||||
}
|
}
|
||||||
.stat-value {
|
.stat-value {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
@@ -74,9 +81,12 @@ h1 {
|
|||||||
margin-top: 0.25rem;
|
margin-top: 0.25rem;
|
||||||
}
|
}
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.stat-label {
|
:global(:root:not([data-theme="dark"])) .stat-label {
|
||||||
color: var(--nord2);
|
color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .stat-label {
|
||||||
|
color: var(--nord2);
|
||||||
}
|
}
|
||||||
.card-wrapper {
|
.card-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@@ -95,21 +95,36 @@ h1 {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
.admin-card {
|
:global(:root:not([data-theme="dark"])) .admin-card {
|
||||||
background: var(--nord6);
|
background: var(--nord6);
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
.admin-card:hover,
|
:global(:root:not([data-theme="dark"])) .admin-card:hover,
|
||||||
.admin-card:focus {
|
:global(:root:not([data-theme="dark"])) .admin-card:focus {
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
background: hsl(from var(--nord6) h calc(s * 1.1) calc(l * 0.98));
|
background: hsl(from var(--nord6) h calc(s * 1.1) calc(l * 0.98));
|
||||||
}
|
}
|
||||||
.admin-card-description {
|
:global(:root:not([data-theme="dark"])) .admin-card-description {
|
||||||
color: var(--nord2);
|
color: var(--nord2);
|
||||||
}
|
}
|
||||||
.subheading {
|
:global(:root:not([data-theme="dark"])) .subheading {
|
||||||
color: var(--nord2);
|
color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .admin-card {
|
||||||
|
background: var(--nord6);
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .admin-card:hover,
|
||||||
|
:global(:root[data-theme="light"]) .admin-card:focus {
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
background: hsl(from var(--nord6) h calc(s * 1.1) calc(l * 0.98));
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .admin-card-description {
|
||||||
|
color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="light"]) .subheading {
|
||||||
|
color: var(--nord2);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -341,10 +341,13 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.title {
|
:global(:root:not([data-theme="light"])) .title {
|
||||||
background-color: var(--nord6-dark);
|
background-color: var(--nord6-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .title {
|
||||||
|
background-color: var(--nord6-dark);
|
||||||
|
}
|
||||||
.form-size-section {
|
.form-size-section {
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
margin: 1rem auto;
|
margin: 1rem auto;
|
||||||
@@ -406,7 +409,8 @@
|
|||||||
await update();
|
await update();
|
||||||
submitting = false;
|
submitting = false;
|
||||||
};
|
};
|
||||||
}}
|
}
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<!-- Hidden inputs for tracking -->
|
<!-- Hidden inputs for tracking -->
|
||||||
<input type="hidden" name="original_short_name" value={old_short_name} />
|
<input type="hidden" name="original_short_name" value={old_short_name} />
|
||||||
@@ -461,19 +465,23 @@
|
|||||||
<h3>Backform (Standard):</h3>
|
<h3>Backform (Standard):</h3>
|
||||||
<div class="form-size-controls">
|
<div class="form-size-controls">
|
||||||
<label>
|
<label>
|
||||||
<input type="radio" name="formShape" value="none" checked={!defaultForm} onchange={() => { defaultForm = null; }} />
|
<input type="radio" name="formShape" value="none" checked={!defaultForm} onchange={() => { defaultForm = null; }
|
||||||
|
} />
|
||||||
Keine
|
Keine
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
<input type="radio" name="formShape" value="round" checked={defaultForm?.shape === 'round'} onchange={() => { defaultForm = { shape: 'round', diameter: defaultForm?.diameter || 26 }; }} />
|
<input type="radio" name="formShape" value="round" checked={defaultForm?.shape === 'round'} onchange={() => { defaultForm = { shape: 'round', diameter: defaultForm?.diameter || 26 }; }
|
||||||
|
} />
|
||||||
Rund
|
Rund
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
<input type="radio" name="formShape" value="rectangular" checked={defaultForm?.shape === 'rectangular'} onchange={() => { defaultForm = { shape: 'rectangular', width: defaultForm?.width || 20, length: defaultForm?.length || 30 }; }} />
|
<input type="radio" name="formShape" value="rectangular" checked={defaultForm?.shape === 'rectangular'} onchange={() => { defaultForm = { shape: 'rectangular', width: defaultForm?.width || 20, length: defaultForm?.length || 30 }; }
|
||||||
|
} />
|
||||||
Rechteckig
|
Rechteckig
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
<input type="radio" name="formShape" value="gugelhupf" checked={defaultForm?.shape === 'gugelhupf'} onchange={() => { defaultForm = { shape: 'gugelhupf', diameter: defaultForm?.diameter || 24, innerDiameter: defaultForm?.innerDiameter || 8 }; }} />
|
<input type="radio" name="formShape" value="gugelhupf" checked={defaultForm?.shape === 'gugelhupf'} onchange={() => { defaultForm = { shape: 'gugelhupf', diameter: defaultForm?.diameter || 24, innerDiameter: defaultForm?.innerDiameter || 8 }; }
|
||||||
|
} />
|
||||||
Gugelhupf
|
Gugelhupf
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -46,7 +46,7 @@ h1{
|
|||||||
.empty-state{
|
.empty-state{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
color: var(--nord3);
|
color: var(--color-text-tertiary);
|
||||||
}
|
}
|
||||||
.to-try-link{
|
.to-try-link{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -56,8 +56,8 @@ h1{
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0.4em 1.2em;
|
padding: 0.4em 1.2em;
|
||||||
border-radius: var(--radius-pill);
|
border-radius: var(--radius-pill);
|
||||||
background: var(--nord10);
|
background: var(--color-primary);
|
||||||
color: var(--nord6);
|
color: var(--color-text-on-primary);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@@ -67,7 +67,7 @@ h1{
|
|||||||
.to-try-link a:hover,
|
.to-try-link a:hover,
|
||||||
.to-try-link a:focus-visible{
|
.to-try-link a:focus-visible{
|
||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
background: var(--nord9);
|
background: var(--color-primary-hover);
|
||||||
box-shadow: var(--shadow-hover);
|
box-shadow: var(--shadow-hover);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -58,13 +58,13 @@
|
|||||||
.search-info {
|
.search-info {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
color: var(--nord3);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
.filter-info {
|
.filter-info {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
color: var(--nord2);
|
color: var(--color-text-tertiary);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -35,18 +35,11 @@
|
|||||||
input {
|
input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.5rem 0.75rem;
|
padding: 0.5rem 0.75rem;
|
||||||
border: 1px solid var(--nord4);
|
border: 1px solid var(--color-border);
|
||||||
border-radius: var(--radius-pill, 999px);
|
border-radius: var(--radius-pill, 999px);
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
background: var(--nord6, #eceff4);
|
background: var(--color-surface);
|
||||||
color: var(--nord0);
|
color: var(--color-text-primary);
|
||||||
}
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
input {
|
|
||||||
background: var(--nord1);
|
|
||||||
border-color: var(--nord3);
|
|
||||||
color: var(--nord6);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<h1>{labels.title}</h1>
|
<h1>{labels.title}</h1>
|
||||||
|
|||||||
@@ -166,10 +166,14 @@ h1 {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.form-card input,
|
:global(:root:not([data-theme="light"])) .form-card input,
|
||||||
.form-card textarea {
|
:global(:root:not([data-theme="light"])) .form-card textarea {
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .form-card input,
|
||||||
|
:global(:root[data-theme="dark"]) .form-card textarea {
|
||||||
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
.form-card textarea {
|
.form-card textarea {
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
|
|||||||
@@ -74,7 +74,9 @@
|
|||||||
{#if showModal}
|
{#if showModal}
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
{#key paymentId}
|
{#key paymentId}
|
||||||
<div in:fly={{x: 50, duration: 300, easing: quintOut}} out:fly={{x: -50, duration: 300, easing: quintOut}}>
|
<div in:fly={{x: 50, duration: 300, easing: quintOut}
|
||||||
|
} out:fly={{x: -50, duration: 300, easing: quintOut}
|
||||||
|
}>
|
||||||
<PaymentModal {paymentId} on:close={() => showModal = false} on:paymentDeleted={handlePaymentDeleted} />
|
<PaymentModal {paymentId} on:close={() => showModal = false} on:paymentDeleted={handlePaymentDeleted} />
|
||||||
</div>
|
</div>
|
||||||
{/key}
|
{/key}
|
||||||
@@ -135,11 +137,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.side-panel {
|
:global(:root:not([data-theme="light"])) .side-panel {
|
||||||
background: var(--background-dark);
|
background: var(--background-dark);
|
||||||
border-left-color: #434C5E;
|
border-left-color: #434C5E;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .side-panel {
|
||||||
|
background: var(--background-dark);
|
||||||
|
border-left-color: #434C5E;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.layout-container.has-modal .main-content {
|
.layout-container.has-modal .main-content {
|
||||||
@@ -197,4 +203,9 @@
|
|||||||
border-top-color: #434C5E;
|
border-top-color: #434C5E;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
:global(:root[data-theme="dark"]) .side-panel {
|
||||||
|
border-top-color: #434C5E;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -322,14 +322,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
h1 {
|
:global(:root:not([data-theme="light"])) h1 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
:global(:root:not([data-theme="light"])) .error {
|
||||||
background-color: var(--accent-dark);
|
background-color: var(--accent-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) h1 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .error {
|
||||||
|
background-color: var(--accent-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.positive {
|
.positive {
|
||||||
@@ -423,33 +429,54 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.recent-activity {
|
:global(:root:not([data-theme="light"])) .recent-activity {
|
||||||
background: var(--accent-dark);
|
background: var(--accent-dark);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.recent-activity h2 {
|
:global(:root:not([data-theme="light"])) .recent-activity h2 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-label {
|
:global(:root:not([data-theme="light"])) .filter-label {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.clear-filter {
|
:global(:root:not([data-theme="light"])) .clear-filter {
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.clear-filter:hover {
|
:global(:root:not([data-theme="light"])) .clear-filter:hover {
|
||||||
border-color: var(--blue);
|
border-color: var(--blue);
|
||||||
color: var(--blue);
|
color: var(--blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-results {
|
:global(:root:not([data-theme="light"])) .no-results {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .recent-activity {
|
||||||
|
background: var(--accent-dark);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .recent-activity h2 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .filter-label {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .clear-filter {
|
||||||
|
border-color: var(--nord3);
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .clear-filter:hover {
|
||||||
|
border-color: var(--blue);
|
||||||
|
color: var(--blue);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .no-results {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.activity-dialog {
|
.activity-dialog {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -498,16 +525,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.activity-bubble {
|
:global(:root:not([data-theme="light"])) .activity-bubble {
|
||||||
background: var(--nord1);
|
background: var(--nord1);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.activity-message.is-me .activity-bubble {
|
:global(:root:not([data-theme="light"])) .activity-message.is-me .activity-bubble {
|
||||||
background: var(--nord2);
|
background: var(--nord2);
|
||||||
border-color: var(--blue);
|
border-color: var(--blue);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .activity-bubble {
|
||||||
|
background: var(--nord1);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .activity-message.is-me .activity-bubble {
|
||||||
|
background: var(--nord2);
|
||||||
|
border-color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
.activity-bubble:hover {
|
.activity-bubble:hover {
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
@@ -536,14 +571,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.activity-bubble::before {
|
:global(:root:not([data-theme="light"])) .activity-bubble::before {
|
||||||
border-right-color: var(--nord1);
|
border-right-color: var(--nord1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.activity-message.is-me .activity-bubble::before {
|
:global(:root:not([data-theme="light"])) .activity-message.is-me .activity-bubble::before {
|
||||||
border-left-color: var(--nord2);
|
border-left-color: var(--nord2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .activity-bubble::before {
|
||||||
|
border-right-color: var(--nord1);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .activity-message.is-me .activity-bubble::before {
|
||||||
|
border-left-color: var(--nord2);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* New Settlement Flow Activity Styles */
|
/* New Settlement Flow Activity Styles */
|
||||||
@@ -566,15 +607,22 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.settlement-flow-activity {
|
:global(:root:not([data-theme="light"])) .settlement-flow-activity {
|
||||||
background: linear-gradient(135deg, var(--nord2), var(--nord1));
|
background: linear-gradient(135deg, var(--nord2), var(--nord1));
|
||||||
border-color: var(--green);
|
border-color: var(--green);
|
||||||
}
|
}
|
||||||
|
|
||||||
.settlement-flow-activity:hover {
|
:global(:root:not([data-theme="light"])) .settlement-flow-activity:hover {
|
||||||
box-shadow: 0 6px 20px rgba(163, 190, 140, 0.2);
|
box-shadow: 0 6px 20px rgba(163, 190, 140, 0.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .settlement-flow-activity {
|
||||||
|
background: linear-gradient(135deg, var(--nord2), var(--nord1));
|
||||||
|
border-color: var(--green);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .settlement-flow-activity:hover {
|
||||||
|
box-shadow: 0 6px 20px rgba(163, 190, 140, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
.settlement-activity-content {
|
.settlement-activity-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -630,10 +678,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.settlement-date {
|
:global(:root:not([data-theme="light"])) .settlement-date {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .settlement-date {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.activity-header {
|
.activity-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -679,18 +730,27 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.category-name {
|
:global(:root:not([data-theme="light"])) .category-name {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.payment-title {
|
:global(:root:not([data-theme="light"])) .payment-title {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.username {
|
:global(:root:not([data-theme="light"])) .username {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .category-name {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .payment-title {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .username {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.activity-amount {
|
.activity-amount {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@@ -724,14 +784,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.payment-date {
|
:global(:root:not([data-theme="light"])) .payment-date {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.payment-description {
|
:global(:root:not([data-theme="light"])) .payment-description {
|
||||||
color: var(--nord5);
|
color: var(--nord5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .payment-date {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .payment-description {
|
||||||
|
color: var(--nord5);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.cospend-main {
|
.cospend-main {
|
||||||
@@ -858,10 +924,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.chart-section .loading {
|
:global(:root:not([data-theme="light"])) .chart-section .loading {
|
||||||
background: var(--nord1);
|
background: var(--nord1);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .chart-section .loading {
|
||||||
|
background: var(--nord1);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -296,11 +296,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
h1 {
|
:global(:root:not([data-theme="light"])) h1 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) h1 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
padding: 0.75rem 1.5rem;
|
padding: 0.75rem 1.5rem;
|
||||||
@@ -334,16 +336,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.btn-secondary {
|
:global(:root:not([data-theme="light"])) .btn-secondary {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary:hover {
|
:global(:root:not([data-theme="light"])) .btn-secondary:hover {
|
||||||
background-color: var(--nord3);
|
background-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .btn-secondary {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .btn-secondary:hover {
|
||||||
|
background-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
.loading, .error {
|
.loading, .error {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -359,10 +369,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.error {
|
:global(:root:not([data-theme="light"])) .error {
|
||||||
background-color: var(--accent-dark);
|
background-color: var(--accent-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .error {
|
||||||
|
background-color: var(--accent-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.empty-state {
|
.empty-state {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -385,18 +398,27 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.empty-content svg {
|
:global(:root:not([data-theme="light"])) .empty-content svg {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-content h2 {
|
:global(:root:not([data-theme="light"])) .empty-content h2 {
|
||||||
color: var(--nord5);
|
color: var(--nord5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-content p {
|
:global(:root:not([data-theme="light"])) .empty-content p {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .empty-content svg {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .empty-content h2 {
|
||||||
|
color: var(--nord5);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .empty-content p {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.payments-grid {
|
.payments-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -426,15 +448,22 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.payment-card {
|
:global(:root:not([data-theme="light"])) .payment-card {
|
||||||
background: var(--nord1);
|
background: var(--nord1);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.payment-card:hover {
|
:global(:root:not([data-theme="light"])) .payment-card:hover {
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .payment-card {
|
||||||
|
background: var(--nord1);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .payment-card:hover {
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
/* Settlement Card Styles */
|
/* Settlement Card Styles */
|
||||||
.settlement-card {
|
.settlement-card {
|
||||||
@@ -460,14 +489,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.settlement-card {
|
:global(:root:not([data-theme="light"])) .settlement-card {
|
||||||
background: linear-gradient(135deg, #1a2e1a, #1e2b1e);
|
background: linear-gradient(135deg, #1a2e1a, #1e2b1e);
|
||||||
}
|
}
|
||||||
|
|
||||||
.settlement-card:hover {
|
:global(:root:not([data-theme="light"])) .settlement-card:hover {
|
||||||
box-shadow: 0 6px 20px rgba(163, 190, 140, 0.3);
|
box-shadow: 0 6px 20px rgba(163, 190, 140, 0.3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .settlement-card {
|
||||||
|
background: linear-gradient(135deg, #1a2e1a, #1e2b1e);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .settlement-card:hover {
|
||||||
|
box-shadow: 0 6px 20px rgba(163, 190, 140, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
.settlement-header {
|
.settlement-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -500,10 +535,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.settlement-date {
|
:global(:root:not([data-theme="light"])) .settlement-date {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .settlement-date {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.settlement-flow {
|
.settlement-flow {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -563,11 +601,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.settlement-description {
|
:global(:root:not([data-theme="light"])) .settlement-description {
|
||||||
color: var(--nord5);
|
color: var(--nord5);
|
||||||
border-top-color: var(--nord3);
|
border-top-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .settlement-description {
|
||||||
|
color: var(--nord5);
|
||||||
|
border-top-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
.payment-header {
|
.payment-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -602,10 +644,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.payment-title h3 {
|
:global(:root:not([data-theme="light"])) .payment-title h3 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .payment-title h3 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.payment-meta {
|
.payment-meta {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -627,14 +672,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.payment-meta {
|
:global(:root:not([data-theme="light"])) .payment-meta {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.payment-meta .category-name {
|
:global(:root:not([data-theme="light"])) .payment-meta .category-name {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .payment-meta {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .payment-meta .category-name {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.receipt-thumb {
|
.receipt-thumb {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
@@ -645,10 +696,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.receipt-thumb {
|
:global(:root:not([data-theme="light"])) .receipt-thumb {
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .receipt-thumb {
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
|
||||||
.payment-description {
|
.payment-description {
|
||||||
color: var(--nord2);
|
color: var(--nord2);
|
||||||
@@ -657,10 +711,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.payment-description {
|
:global(:root:not([data-theme="light"])) .payment-description {
|
||||||
color: var(--nord5);
|
color: var(--nord5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .payment-description {
|
||||||
|
color: var(--nord5);
|
||||||
|
}
|
||||||
|
|
||||||
.payment-details {
|
.payment-details {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
@@ -682,14 +739,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.detail-row .label {
|
:global(:root:not([data-theme="light"])) .detail-row .label {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-row .value {
|
:global(:root:not([data-theme="light"])) .detail-row .value {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .detail-row .label {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .detail-row .value {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.splits-summary {
|
.splits-summary {
|
||||||
border-top: 1px solid var(--nord4);
|
border-top: 1px solid var(--nord4);
|
||||||
@@ -704,14 +767,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.splits-summary {
|
:global(:root:not([data-theme="light"])) .splits-summary {
|
||||||
border-top-color: var(--nord2);
|
border-top-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.splits-summary h4 {
|
:global(:root:not([data-theme="light"])) .splits-summary h4 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .splits-summary {
|
||||||
|
border-top-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .splits-summary h4 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.splits-list {
|
.splits-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -740,10 +809,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.split-user {
|
:global(:root:not([data-theme="light"])) .split-user {
|
||||||
color: var(--nord5);
|
color: var(--nord5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .split-user {
|
||||||
|
color: var(--nord5);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.pagination {
|
.pagination {
|
||||||
|
|||||||
@@ -638,14 +638,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.header h1 {
|
:global(:root:not([data-theme="light"])) .header h1 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header p {
|
:global(:root:not([data-theme="light"])) .header p {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .header h1 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .header p {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.payment-form {
|
.payment-form {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -669,15 +675,22 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.form-section {
|
:global(:root:not([data-theme="light"])) .form-section {
|
||||||
background: var(--nord1);
|
background: var(--nord1);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-section h2 {
|
:global(:root:not([data-theme="light"])) .form-section h2 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .form-section {
|
||||||
|
background: var(--nord1);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .form-section h2 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
@@ -697,10 +710,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
label {
|
:global(:root:not([data-theme="light"])) label {
|
||||||
color: var(--nord5);
|
color: var(--nord5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) label {
|
||||||
|
color: var(--nord5);
|
||||||
|
}
|
||||||
|
|
||||||
input, textarea, select {
|
input, textarea, select {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -720,12 +736,21 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
input, textarea, select {
|
:global(:root:not([data-theme="light"])) input,
|
||||||
|
:global(:root:not([data-theme="light"])) textarea,
|
||||||
|
:global(:root:not([data-theme="light"])) select {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) input,
|
||||||
|
:global(:root[data-theme="dark"]) textarea,
|
||||||
|
:global(:root[data-theme="dark"]) select {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -741,10 +766,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.error {
|
:global(:root:not([data-theme="light"])) .error {
|
||||||
background-color: var(--accent-dark);
|
background-color: var(--accent-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .error {
|
||||||
|
background-color: var(--accent-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.form-actions {
|
.form-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -792,16 +820,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.btn-secondary {
|
:global(:root:not([data-theme="light"])) .btn-secondary {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary:hover {
|
:global(:root:not([data-theme="light"])) .btn-secondary:hover {
|
||||||
background-color: var(--nord3);
|
background-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .btn-secondary {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .btn-secondary:hover {
|
||||||
|
background-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Progressive enhancement styles */
|
/* Progressive enhancement styles */
|
||||||
@@ -830,10 +866,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.manual-users p {
|
:global(:root:not([data-theme="light"])) .manual-users p {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .manual-users p {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
/* Recurring payment styles */
|
/* Recurring payment styles */
|
||||||
.checkbox-label {
|
.checkbox-label {
|
||||||
@@ -857,11 +896,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.recurring-options {
|
:global(:root:not([data-theme="light"])) .recurring-options {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .recurring-options {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
.help-text {
|
.help-text {
|
||||||
display: block;
|
display: block;
|
||||||
@@ -872,10 +915,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.help-text {
|
:global(:root:not([data-theme="light"])) .help-text {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .help-text {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.help-text p {
|
.help-text p {
|
||||||
margin: 0.5rem 0 0.25rem 0;
|
margin: 0.5rem 0 0.25rem 0;
|
||||||
@@ -891,11 +937,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.help-text code {
|
:global(:root:not([data-theme="light"])) .help-text code {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .help-text code {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
.help-text ul {
|
.help-text ul {
|
||||||
margin: 0.5rem 0;
|
margin: 0.5rem 0;
|
||||||
@@ -947,14 +997,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.execution-preview {
|
:global(:root:not([data-theme="light"])) .execution-preview {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.frequency-description {
|
:global(:root:not([data-theme="light"])) .frequency-description {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .execution-preview {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .frequency-description {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
/* Amount-currency styling */
|
/* Amount-currency styling */
|
||||||
.amount-currency {
|
.amount-currency {
|
||||||
@@ -1007,19 +1063,29 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.conversion-preview.loading {
|
:global(:root:not([data-theme="light"])) .conversion-preview.loading {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.conversion-preview.error {
|
:global(:root:not([data-theme="light"])) .conversion-preview.error {
|
||||||
background-color: var(--accent-dark);
|
background-color: var(--accent-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.conversion-preview.success {
|
:global(:root:not([data-theme="light"])) .conversion-preview.success {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .conversion-preview.loading {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .conversion-preview.error {
|
||||||
|
background-color: var(--accent-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .conversion-preview.success {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.add-payment {
|
.add-payment {
|
||||||
|
|||||||
@@ -348,7 +348,8 @@
|
|||||||
{:else if error}
|
{:else if error}
|
||||||
<div class="error">Error: {error}</div>
|
<div class="error">Error: {error}</div>
|
||||||
{:else if payment}
|
{:else if payment}
|
||||||
<form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="payment-form">
|
<form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }
|
||||||
|
} class="payment-form">
|
||||||
<FormSection title="Payment Details">
|
<FormSection title="Payment Details">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="title">Title *</label>
|
<label for="title">Title *</label>
|
||||||
@@ -510,7 +511,8 @@
|
|||||||
value={split.personalAmount || 0}
|
value={split.personalAmount || 0}
|
||||||
oninput={(e) => {
|
oninput={(e) => {
|
||||||
split.personalAmount = parseFloat(e.target.value) || 0;
|
split.personalAmount = parseFloat(e.target.value) || 0;
|
||||||
}}
|
}
|
||||||
|
}
|
||||||
placeholder="0.00"
|
placeholder="0.00"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -601,14 +603,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.header h1 {
|
:global(:root:not([data-theme="light"])) .header h1 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header p {
|
:global(:root:not([data-theme="light"])) .header p {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .header h1 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .header p {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.loading, .error {
|
.loading, .error {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -624,10 +632,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.error {
|
:global(:root:not([data-theme="light"])) .error {
|
||||||
background-color: var(--accent-dark);
|
background-color: var(--accent-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .error {
|
||||||
|
background-color: var(--accent-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.payment-form {
|
.payment-form {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -653,10 +664,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
label {
|
:global(:root:not([data-theme="light"])) label {
|
||||||
color: var(--nord5);
|
color: var(--nord5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) label {
|
||||||
|
color: var(--nord5);
|
||||||
|
}
|
||||||
|
|
||||||
input, textarea, select {
|
input, textarea, select {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -680,12 +694,21 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
input, textarea, select {
|
:global(:root:not([data-theme="light"])) input,
|
||||||
|
:global(:root:not([data-theme="light"])) textarea,
|
||||||
|
:global(:root:not([data-theme="light"])) select {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) input,
|
||||||
|
:global(:root[data-theme="dark"]) textarea,
|
||||||
|
:global(:root[data-theme="dark"]) select {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
.split-method-info {
|
.split-method-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -699,11 +722,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.split-method-info {
|
:global(:root:not([data-theme="light"])) .split-method-info {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .split-method-info {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
.split-method-info .label {
|
.split-method-info .label {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -716,10 +743,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.split-method-info .label {
|
:global(:root:not([data-theme="light"])) .split-method-info .label {
|
||||||
color: var(--nord5);
|
color: var(--nord5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .split-method-info .label {
|
||||||
|
color: var(--nord5);
|
||||||
|
}
|
||||||
|
|
||||||
.personal-amounts-editor {
|
.personal-amounts-editor {
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
@@ -730,11 +760,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.personal-amounts-editor {
|
:global(:root:not([data-theme="light"])) .personal-amounts-editor {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .personal-amounts-editor {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
.personal-amounts-editor h3 {
|
.personal-amounts-editor h3 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
@@ -744,10 +778,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.personal-amounts-editor h3 {
|
:global(:root:not([data-theme="light"])) .personal-amounts-editor h3 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .personal-amounts-editor h3 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.personal-amounts-editor .description {
|
.personal-amounts-editor .description {
|
||||||
color: var(--nord2);
|
color: var(--nord2);
|
||||||
@@ -757,10 +794,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.personal-amounts-editor .description {
|
:global(:root:not([data-theme="light"])) .personal-amounts-editor .description {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .personal-amounts-editor .description {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.personal-input {
|
.personal-input {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -792,12 +832,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.personal-input input {
|
:global(:root:not([data-theme="light"])) .personal-input input {
|
||||||
background-color: var(--nord1);
|
background-color: var(--nord1);
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .personal-input input {
|
||||||
|
background-color: var(--nord1);
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
.remainder-info {
|
.remainder-info {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
@@ -813,16 +858,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.remainder-info {
|
:global(:root:not([data-theme="light"])) .remainder-info {
|
||||||
background-color: var(--nord1);
|
background-color: var(--nord1);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.remainder-info.error {
|
:global(:root:not([data-theme="light"])) .remainder-info.error {
|
||||||
background-color: var(--accent-dark);
|
background-color: var(--accent-dark);
|
||||||
border-color: var(--red);
|
border-color: var(--red);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .remainder-info {
|
||||||
|
background-color: var(--nord1);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .remainder-info.error {
|
||||||
|
background-color: var(--accent-dark);
|
||||||
|
border-color: var(--red);
|
||||||
|
}
|
||||||
|
|
||||||
.remainder-info span {
|
.remainder-info span {
|
||||||
display: block;
|
display: block;
|
||||||
@@ -832,10 +885,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.remainder-info span {
|
:global(:root:not([data-theme="light"])) .remainder-info span {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .remainder-info span {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.error-message {
|
.error-message {
|
||||||
color: var(--red);
|
color: var(--red);
|
||||||
@@ -859,10 +915,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.splits-display h3 {
|
:global(:root:not([data-theme="light"])) .splits-display h3 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .splits-display h3 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.split-item {
|
.split-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -875,11 +934,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.split-item {
|
:global(:root:not([data-theme="light"])) .split-item {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .split-item {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
.split-username {
|
.split-username {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@@ -887,10 +950,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.split-username {
|
:global(:root:not([data-theme="light"])) .split-username {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .split-username {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.split-amount.positive {
|
.split-amount.positive {
|
||||||
color: var(--green);
|
color: var(--green);
|
||||||
@@ -910,10 +976,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.note {
|
:global(:root:not([data-theme="light"])) .note {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .note {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.js-only {
|
.js-only {
|
||||||
display: none;
|
display: none;
|
||||||
@@ -980,16 +1049,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.btn-secondary {
|
:global(:root:not([data-theme="light"])) .btn-secondary {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary:hover {
|
:global(:root:not([data-theme="light"])) .btn-secondary:hover {
|
||||||
background-color: var(--nord3);
|
background-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .btn-secondary {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .btn-secondary:hover {
|
||||||
|
background-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
.btn-danger {
|
.btn-danger {
|
||||||
background-color: var(--red);
|
background-color: var(--red);
|
||||||
@@ -1066,23 +1143,36 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.conversion-preview.loading {
|
:global(:root:not([data-theme="light"])) .conversion-preview.loading {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.conversion-preview.error {
|
:global(:root:not([data-theme="light"])) .conversion-preview.error {
|
||||||
background-color: var(--accent-dark);
|
background-color: var(--accent-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.conversion-preview.success {
|
:global(:root:not([data-theme="light"])) .conversion-preview.success {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.help-text {
|
:global(:root:not([data-theme="light"])) .help-text {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .conversion-preview.loading {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .conversion-preview.error {
|
||||||
|
background-color: var(--accent-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .conversion-preview.success {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .help-text {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.edit-payment {
|
.edit-payment {
|
||||||
|
|||||||
@@ -196,10 +196,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.error {
|
:global(:root:not([data-theme="light"])) .error {
|
||||||
background-color: var(--accent-dark);
|
background-color: var(--accent-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .error {
|
||||||
|
background-color: var(--accent-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.payment-card {
|
.payment-card {
|
||||||
background: var(--nord6);
|
background: var(--nord6);
|
||||||
@@ -210,11 +213,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.payment-card {
|
:global(:root:not([data-theme="light"])) .payment-card {
|
||||||
background: var(--nord1);
|
background: var(--nord1);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .payment-card {
|
||||||
|
background: var(--nord1);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
|
||||||
.payment-header {
|
.payment-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -226,10 +233,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.payment-header {
|
:global(:root:not([data-theme="light"])) .payment-header {
|
||||||
background: linear-gradient(135deg, var(--nord2), var(--nord3));
|
background: linear-gradient(135deg, var(--nord2), var(--nord3));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .payment-header {
|
||||||
|
background: linear-gradient(135deg, var(--nord2), var(--nord3));
|
||||||
|
}
|
||||||
|
|
||||||
.title-with-category {
|
.title-with-category {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -256,10 +266,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.title-section h1 {
|
:global(:root:not([data-theme="light"])) .title-section h1 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .title-section h1 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.receipt-image {
|
.receipt-image {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@@ -275,10 +288,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.receipt-image img {
|
:global(:root:not([data-theme="light"])) .receipt-image img {
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .receipt-image img {
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
|
||||||
.payment-info {
|
.payment-info {
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
@@ -311,14 +327,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.label {
|
:global(:root:not([data-theme="light"])) .label {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.value {
|
:global(:root:not([data-theme="light"])) .value {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .label {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .value {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
border-top: 1px solid var(--nord4);
|
border-top: 1px solid var(--nord4);
|
||||||
@@ -338,18 +360,27 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.description {
|
:global(:root:not([data-theme="light"])) .description {
|
||||||
border-top-color: var(--nord2);
|
border-top-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.description h3 {
|
:global(:root:not([data-theme="light"])) .description h3 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.description p {
|
:global(:root:not([data-theme="light"])) .description p {
|
||||||
color: var(--nord5);
|
color: var(--nord5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .description {
|
||||||
|
border-top-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .description h3 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .description p {
|
||||||
|
color: var(--nord5);
|
||||||
|
}
|
||||||
|
|
||||||
.splits-section {
|
.splits-section {
|
||||||
border-top: 1px solid var(--nord4);
|
border-top: 1px solid var(--nord4);
|
||||||
@@ -363,14 +394,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.splits-section {
|
:global(:root:not([data-theme="light"])) .splits-section {
|
||||||
border-top-color: var(--nord2);
|
border-top-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.splits-section h3 {
|
:global(:root:not([data-theme="light"])) .splits-section h3 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .splits-section {
|
||||||
|
border-top-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .splits-section h3 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.splits-list {
|
.splits-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -394,16 +431,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.split-item {
|
:global(:root:not([data-theme="light"])) .split-item {
|
||||||
background: var(--nord2);
|
background: var(--nord2);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.split-item.current-user {
|
:global(:root:not([data-theme="light"])) .split-item.current-user {
|
||||||
background: var(--nord3);
|
background: var(--nord3);
|
||||||
border-color: var(--blue);
|
border-color: var(--blue);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .split-item {
|
||||||
|
background: var(--nord2);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .split-item.current-user {
|
||||||
|
background: var(--nord3);
|
||||||
|
border-color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
.split-user {
|
.split-user {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -432,10 +477,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.username {
|
:global(:root:not([data-theme="light"])) .username {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .username {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.split-amount {
|
.split-amount {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@@ -461,10 +509,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.exchange-rate-info {
|
:global(:root:not([data-theme="light"])) .exchange-rate-info {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .exchange-rate-info {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.payment-view {
|
.payment-view {
|
||||||
|
|||||||
@@ -249,14 +249,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.header h1 {
|
:global(:root:not([data-theme="light"])) .header h1 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header p {
|
:global(:root:not([data-theme="light"])) .header p {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .header h1 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .header p {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.filters {
|
.filters {
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
@@ -277,15 +283,22 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.filters {
|
:global(:root:not([data-theme="light"])) .filters {
|
||||||
background: var(--nord1);
|
background: var(--nord1);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters label {
|
:global(:root:not([data-theme="light"])) .filters label {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .filters {
|
||||||
|
background: var(--nord1);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .filters label {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.loading, .error {
|
.loading, .error {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -301,10 +314,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.error {
|
:global(:root:not([data-theme="light"])) .error {
|
||||||
background-color: var(--accent-dark);
|
background-color: var(--accent-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .error {
|
||||||
|
background-color: var(--accent-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.empty-state {
|
.empty-state {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -329,19 +345,29 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.empty-state {
|
:global(:root:not([data-theme="light"])) .empty-state {
|
||||||
background: var(--nord1);
|
background: var(--nord1);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-state h2 {
|
:global(:root:not([data-theme="light"])) .empty-state h2 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-state p {
|
:global(:root:not([data-theme="light"])) .empty-state p {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .empty-state {
|
||||||
|
background: var(--nord1);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .empty-state h2 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .empty-state p {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.payments-grid {
|
.payments-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -371,20 +397,31 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.payment-card {
|
:global(:root:not([data-theme="light"])) .payment-card {
|
||||||
background: var(--nord1);
|
background: var(--nord1);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.payment-card:hover {
|
:global(:root:not([data-theme="light"])) .payment-card:hover {
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.payment-card.inactive {
|
:global(:root:not([data-theme="light"])) .payment-card.inactive {
|
||||||
background: var(--nord2);
|
background: var(--nord2);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .payment-card {
|
||||||
|
background: var(--nord1);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .payment-card:hover {
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .payment-card.inactive {
|
||||||
|
background: var(--nord2);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -411,10 +448,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.payment-title h3 {
|
:global(:root:not([data-theme="light"])) .payment-title h3 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .payment-title h3 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.status-badge {
|
.status-badge {
|
||||||
padding: 0.25rem 0.75rem;
|
padding: 0.25rem 0.75rem;
|
||||||
@@ -448,10 +488,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.payment-description {
|
:global(:root:not([data-theme="light"])) .payment-description {
|
||||||
color: var(--nord5);
|
color: var(--nord5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .payment-description {
|
||||||
|
color: var(--nord5);
|
||||||
|
}
|
||||||
|
|
||||||
.payment-details {
|
.payment-details {
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
@@ -482,14 +525,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.label {
|
:global(:root:not([data-theme="light"])) .label {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.value {
|
:global(:root:not([data-theme="light"])) .value {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .label {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .value {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.payer-info {
|
.payer-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -514,15 +563,22 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.splits-preview {
|
:global(:root:not([data-theme="light"])) .splits-preview {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.splits-preview h4 {
|
:global(:root:not([data-theme="light"])) .splits-preview h4 {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .splits-preview {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .splits-preview h4 {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
|
||||||
.splits-list {
|
.splits-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -556,10 +612,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.split-item .username {
|
:global(:root:not([data-theme="light"])) .split-item .username {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .split-item .username {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.card-actions {
|
.card-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -605,16 +664,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.btn-secondary {
|
:global(:root:not([data-theme="light"])) .btn-secondary {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
border-color: var(--nord3);
|
border-color: var(--nord3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary:hover {
|
:global(:root:not([data-theme="light"])) .btn-secondary:hover {
|
||||||
background-color: var(--nord3);
|
background-color: var(--nord3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .btn-secondary {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
border-color: var(--nord3);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .btn-secondary:hover {
|
||||||
|
background-color: var(--nord3);
|
||||||
|
}
|
||||||
|
|
||||||
.btn-warning {
|
.btn-warning {
|
||||||
background-color: var(--orange);
|
background-color: var(--orange);
|
||||||
|
|||||||
@@ -289,7 +289,8 @@
|
|||||||
{:else if error && !formData.title}
|
{:else if error && !formData.title}
|
||||||
<div class="error">Error: {error}</div>
|
<div class="error">Error: {error}</div>
|
||||||
{:else}
|
{:else}
|
||||||
<form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="payment-form">
|
<form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }
|
||||||
|
} class="payment-form">
|
||||||
<div class="form-section">
|
<div class="form-section">
|
||||||
<h2>Payment Details</h2>
|
<h2>Payment Details</h2>
|
||||||
|
|
||||||
@@ -691,75 +692,136 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.header h1 {
|
:global(:root:not([data-theme="light"])) .header h1 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-section {
|
:global(:root:not([data-theme="light"])) .form-section {
|
||||||
background: var(--accent-dark);
|
background: var(--accent-dark);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-section h2 {
|
:global(:root:not([data-theme="light"])) .form-section h2 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
:global(:root:not([data-theme="light"])) label {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
input, textarea, select {
|
:global(:root:not([data-theme="light"])) input,
|
||||||
|
:global(:root:not([data-theme="light"])) textarea,
|
||||||
|
:global(:root:not([data-theme="light"])) select {
|
||||||
background: var(--nord1);
|
background: var(--nord1);
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:focus, textarea:focus, select:focus {
|
:global(:root:not([data-theme="light"])) input:focus,
|
||||||
|
:global(:root:not([data-theme="light"])) textarea:focus,
|
||||||
|
:global(:root:not([data-theme="light"])) select:focus {
|
||||||
box-shadow: 0 0 0 2px rgba(136, 192, 208, 0.2);
|
box-shadow: 0 0 0 2px rgba(136, 192, 208, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.help-text {
|
:global(:root:not([data-theme="light"])) .help-text {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.help-text code {
|
:global(:root:not([data-theme="light"])) .help-text code {
|
||||||
background-color: var(--nord1);
|
background-color: var(--nord1);
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.execution-preview {
|
:global(:root:not([data-theme="light"])) .execution-preview {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
border-color: var(--blue);
|
border-color: var(--blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.error {
|
:global(:root:not([data-theme="light"])) .error {
|
||||||
background-color: var(--accent-dark);
|
background-color: var(--accent-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary {
|
:global(:root:not([data-theme="light"])) .btn-secondary {
|
||||||
background-color: var(--nord1);
|
background-color: var(--nord1);
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary:hover {
|
:global(:root:not([data-theme="light"])) .btn-secondary:hover {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.conversion-preview.loading {
|
:global(:root:not([data-theme="light"])) .conversion-preview.loading {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.conversion-preview.error {
|
:global(:root:not([data-theme="light"])) .conversion-preview.error {
|
||||||
background-color: var(--accent-dark);
|
background-color: var(--accent-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.conversion-preview.success {
|
:global(:root:not([data-theme="light"])) .conversion-preview.success {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .header h1 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .form-section {
|
||||||
|
background: var(--accent-dark);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .form-section h2 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) label {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) input,
|
||||||
|
:global(:root[data-theme="dark"]) textarea,
|
||||||
|
:global(:root[data-theme="dark"]) select {
|
||||||
|
background: var(--nord1);
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) input:focus,
|
||||||
|
:global(:root[data-theme="dark"]) textarea:focus,
|
||||||
|
:global(:root[data-theme="dark"]) select:focus {
|
||||||
|
box-shadow: 0 0 0 2px rgba(136, 192, 208, 0.2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .help-text {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .help-text code {
|
||||||
|
background-color: var(--nord1);
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .execution-preview {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
border-color: var(--blue);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .error {
|
||||||
|
background-color: var(--accent-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .btn-secondary {
|
||||||
|
background-color: var(--nord1);
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .btn-secondary:hover {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .conversion-preview.loading {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .conversion-preview.error {
|
||||||
|
background-color: var(--accent-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .conversion-preview.success {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
|
||||||
/* Amount-currency styling */
|
/* Amount-currency styling */
|
||||||
.amount-currency {
|
.amount-currency {
|
||||||
|
|||||||
@@ -174,7 +174,8 @@
|
|||||||
tabindex="0"
|
tabindex="0"
|
||||||
class:selected={selectedSettlement?.type === 'receive' && selectedSettlement?.from === debt.username}
|
class:selected={selectedSettlement?.type === 'receive' && selectedSettlement?.from === debt.username}
|
||||||
onclick={() => selectSettlement('receive', debt.username, debt.netAmount)}
|
onclick={() => selectSettlement('receive', debt.username, debt.netAmount)}
|
||||||
onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); selectSettlement('receive', debt.username, debt.netAmount); } }}>
|
onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); selectSettlement('receive', debt.username, debt.netAmount); } }
|
||||||
|
}>
|
||||||
<div class="settlement-user">
|
<div class="settlement-user">
|
||||||
<ProfilePicture username={debt.username} size={40} />
|
<ProfilePicture username={debt.username} size={40} />
|
||||||
<div class="user-details">
|
<div class="user-details">
|
||||||
@@ -199,7 +200,8 @@
|
|||||||
tabindex="0"
|
tabindex="0"
|
||||||
class:selected={selectedSettlement?.type === 'pay' && selectedSettlement?.to === debt.username}
|
class:selected={selectedSettlement?.type === 'pay' && selectedSettlement?.to === debt.username}
|
||||||
onclick={() => selectSettlement('pay', debt.username, debt.netAmount)}
|
onclick={() => selectSettlement('pay', debt.username, debt.netAmount)}
|
||||||
onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); selectSettlement('pay', debt.username, debt.netAmount); } }}>
|
onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); selectSettlement('pay', debt.username, debt.netAmount); } }
|
||||||
|
}>
|
||||||
<div class="settlement-user">
|
<div class="settlement-user">
|
||||||
<ProfilePicture username={debt.username} size={40} />
|
<ProfilePicture username={debt.username} size={40} />
|
||||||
<div class="user-details">
|
<div class="user-details">
|
||||||
@@ -679,109 +681,189 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.header-section h1 {
|
:global(:root:not([data-theme="light"])) .header-section h1 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-section p {
|
:global(:root:not([data-theme="light"])) .header-section p {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
:global(:root:not([data-theme="light"])) .error {
|
||||||
background-color: var(--accent-dark);
|
background-color: var(--accent-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-debts {
|
:global(:root:not([data-theme="light"])) .no-debts {
|
||||||
background: var(--accent-dark);
|
background: var(--accent-dark);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.available-settlements {
|
:global(:root:not([data-theme="light"])) .available-settlements {
|
||||||
background: var(--accent-dark);
|
background: var(--accent-dark);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.settlement-section h3 {
|
:global(:root:not([data-theme="light"])) .settlement-section h3 {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.settlement-option {
|
:global(:root:not([data-theme="light"])) .settlement-option {
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
background: var(--nord1);
|
background: var(--nord1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.settlement-option:hover {
|
:global(:root:not([data-theme="light"])) .settlement-option:hover {
|
||||||
box-shadow: 0 2px 8px rgba(163, 190, 140, 0.2);
|
box-shadow: 0 2px 8px rgba(163, 190, 140, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.settlement-option.selected {
|
:global(:root:not([data-theme="light"])) .settlement-option.selected {
|
||||||
background-color: var(--nord1);
|
background-color: var(--nord1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.username {
|
:global(:root:not([data-theme="light"])) .username {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.debt-amount {
|
:global(:root:not([data-theme="light"])) .debt-amount {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.settlement-details {
|
:global(:root:not([data-theme="light"])) .settlement-details {
|
||||||
background: var(--accent-dark);
|
background: var(--accent-dark);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.settlement-flow {
|
:global(:root:not([data-theme="light"])) .settlement-flow {
|
||||||
background-color: var(--nord1);
|
background-color: var(--nord1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.settlement-amount-section label {
|
:global(:root:not([data-theme="light"])) .settlement-amount-section label {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.amount-input {
|
:global(:root:not([data-theme="light"])) .amount-input {
|
||||||
background: var(--nord1);
|
background: var(--nord1);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.currency {
|
:global(:root:not([data-theme="light"])) .currency {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.max-amount {
|
:global(:root:not([data-theme="light"])) .max-amount {
|
||||||
color: var(--nord4);
|
color: var(--nord4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.settlement-description {
|
:global(:root:not([data-theme="light"])) .settlement-description {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
background-color: var(--nord1);
|
background-color: var(--nord1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.amount-input input {
|
:global(:root:not([data-theme="light"])) .amount-input input {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary {
|
:global(:root:not([data-theme="light"])) .btn-secondary {
|
||||||
background-color: var(--nord1);
|
background-color: var(--nord1);
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary:hover {
|
:global(:root:not([data-theme="light"])) .btn-secondary:hover {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group label {
|
:global(:root:not([data-theme="light"])) .form-group label {
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group select,
|
:global(:root:not([data-theme="light"])) .form-group select,
|
||||||
.form-group input {
|
:global(:root:not([data-theme="light"])) .form-group input {
|
||||||
background-color: var(--nord1);
|
background-color: var(--nord1);
|
||||||
color: var(--font-default-dark);
|
color: var(--font-default-dark);
|
||||||
border-color: var(--nord2);
|
border-color: var(--nord2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .header-section h1 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .header-section p {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .error {
|
||||||
|
background-color: var(--accent-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .no-debts {
|
||||||
|
background: var(--accent-dark);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .available-settlements {
|
||||||
|
background: var(--accent-dark);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .settlement-section h3 {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .settlement-option {
|
||||||
|
border-color: var(--nord2);
|
||||||
|
background: var(--nord1);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .settlement-option:hover {
|
||||||
|
box-shadow: 0 2px 8px rgba(163, 190, 140, 0.2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .settlement-option.selected {
|
||||||
|
background-color: var(--nord1);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .username {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .debt-amount {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .settlement-details {
|
||||||
|
background: var(--accent-dark);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .settlement-flow {
|
||||||
|
background-color: var(--nord1);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .settlement-amount-section label {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .amount-input {
|
||||||
|
background: var(--nord1);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .currency {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .max-amount {
|
||||||
|
color: var(--nord4);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .settlement-description {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
background-color: var(--nord1);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .amount-input input {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .btn-secondary {
|
||||||
|
background-color: var(--nord1);
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .btn-secondary:hover {
|
||||||
|
background-color: var(--nord2);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .form-group label {
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
}
|
||||||
|
:global(:root[data-theme="dark"]) .form-group select,
|
||||||
|
:global(:root[data-theme="dark"]) .form-group input {
|
||||||
|
background-color: var(--nord1);
|
||||||
|
color: var(--font-default-dark);
|
||||||
|
border-color: var(--nord2);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.settle-main {
|
.settle-main {
|
||||||
|
|||||||
+50
-220
@@ -1,247 +1,77 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
|
||||||
|
|
||||||
<svg
|
<svg
|
||||||
width="44.976448mm"
|
width="44.976452mm"
|
||||||
height="47.592033mm"
|
height="47.592026mm"
|
||||||
viewBox="0 0 44.976448 47.592033"
|
viewBox="0 0 44.976452 47.592025"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
id="svg1"
|
id="svg1"
|
||||||
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
|
|
||||||
sodipodi:docname="minimal_favicon.svg"
|
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
|
||||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns:svg="http://www.w3.org/2000/svg">
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
<sodipodi:namedview
|
<defs>
|
||||||
id="namedview1"
|
<style>
|
||||||
pagecolor="#ffffff"
|
path {
|
||||||
bordercolor="#000000"
|
fill: black;
|
||||||
borderopacity="0.25"
|
fill: var(--color-primary);
|
||||||
inkscape:showpageshadow="2"
|
}
|
||||||
inkscape:pageopacity="0.0"
|
.stem{
|
||||||
inkscape:pagecheckerboard="0"
|
stroke: black;
|
||||||
inkscape:deskcolor="#d1d1d1"
|
stroke: var(--color-primary);
|
||||||
inkscape:document-units="mm"
|
fill: none;
|
||||||
inkscape:zoom="0.57704365"
|
}
|
||||||
inkscape:cx="32.926452"
|
@media (prefers-color-scheme: dark) {
|
||||||
inkscape:cy="130.83932"
|
path {
|
||||||
inkscape:window-width="956"
|
fill: white;
|
||||||
inkscape:window-height="517"
|
fill: var(--color-primary);
|
||||||
inkscape:window-x="960"
|
}
|
||||||
inkscape:window-y="37"
|
.stem{
|
||||||
inkscape:window-maximized="1"
|
stroke: white;
|
||||||
inkscape:current-layer="layer1" />
|
stroke: var(--color-primary);
|
||||||
<defs
|
fill: none;
|
||||||
id="defs1">
|
}
|
||||||
<clipPath
|
}
|
||||||
clipPathUnits="userSpaceOnUse"
|
</style>
|
||||||
id="clipPath1167">
|
|
||||||
<g
|
|
||||||
id="g1171"
|
|
||||||
transform="translate(-839.26546,-1493.2693)">
|
|
||||||
<path
|
|
||||||
d="M -77.063638,2283.1277 H 1922.9364 V 283.12772 H -77.063638 Z"
|
|
||||||
id="path1169" />
|
|
||||||
</g>
|
|
||||||
</clipPath>
|
|
||||||
<clipPath
|
|
||||||
clipPathUnits="userSpaceOnUse"
|
|
||||||
id="clipPath1161">
|
|
||||||
<g
|
|
||||||
id="g1165"
|
|
||||||
transform="translate(-870.22246,-1471.759)">
|
|
||||||
<path
|
|
||||||
d="M -77.063638,2283.1277 H 1922.9364 V 283.12772 H -77.063638 Z"
|
|
||||||
id="path1163" />
|
|
||||||
</g>
|
|
||||||
</clipPath>
|
|
||||||
<clipPath
|
|
||||||
clipPathUnits="userSpaceOnUse"
|
|
||||||
id="clipPath1155">
|
|
||||||
<g
|
|
||||||
id="g1159"
|
|
||||||
transform="translate(-879.11756,-1418.6585)">
|
|
||||||
<path
|
|
||||||
d="M -77.063638,2283.1277 H 1922.9364 V 283.12772 H -77.063638 Z"
|
|
||||||
id="path1157" />
|
|
||||||
</g>
|
|
||||||
</clipPath>
|
|
||||||
<clipPath
|
|
||||||
clipPathUnits="userSpaceOnUse"
|
|
||||||
id="clipPath1125">
|
|
||||||
<g
|
|
||||||
id="g1129"
|
|
||||||
transform="translate(-985.61606,-1491.5374)">
|
|
||||||
<path
|
|
||||||
d="M -77.063638,2283.1277 H 1922.9364 V 283.12772 H -77.063638 Z"
|
|
||||||
id="path1127" />
|
|
||||||
</g>
|
|
||||||
</clipPath>
|
|
||||||
<clipPath
|
|
||||||
clipPathUnits="userSpaceOnUse"
|
|
||||||
id="clipPath1119">
|
|
||||||
<g
|
|
||||||
id="g1123"
|
|
||||||
transform="translate(-984.96026,-1455.9641)">
|
|
||||||
<path
|
|
||||||
d="M -77.063638,2283.1277 H 1922.9364 V 283.12772 H -77.063638 Z"
|
|
||||||
id="path1121" />
|
|
||||||
</g>
|
|
||||||
</clipPath>
|
|
||||||
<clipPath
|
|
||||||
clipPathUnits="userSpaceOnUse"
|
|
||||||
id="clipPath1113">
|
|
||||||
<g
|
|
||||||
id="g1117"
|
|
||||||
transform="translate(-945.76396,-1416.9275)">
|
|
||||||
<path
|
|
||||||
d="M -77.063638,2283.1277 H 1922.9364 V 283.12772 H -77.063638 Z"
|
|
||||||
id="path1115" />
|
|
||||||
</g>
|
|
||||||
</clipPath>
|
|
||||||
<clipPath
|
|
||||||
clipPathUnits="userSpaceOnUse"
|
|
||||||
id="clipPath1107">
|
|
||||||
<g
|
|
||||||
id="g1111"
|
|
||||||
transform="translate(-898.03256,-1543.4085)">
|
|
||||||
<path
|
|
||||||
d="M -77.063638,2283.1277 H 1922.9364 V 283.12772 H -77.063638 Z"
|
|
||||||
id="path1109" />
|
|
||||||
</g>
|
|
||||||
</clipPath>
|
|
||||||
<clipPath
|
|
||||||
clipPathUnits="userSpaceOnUse"
|
|
||||||
id="clipPath1101">
|
|
||||||
<g
|
|
||||||
id="g1105"
|
|
||||||
transform="translate(-916.79086,-1510.9075)">
|
|
||||||
<path
|
|
||||||
d="M -77.063638,2283.1277 H 1922.9364 V 283.12772 H -77.063638 Z"
|
|
||||||
id="path1103" />
|
|
||||||
</g>
|
|
||||||
</clipPath>
|
|
||||||
<clipPath
|
|
||||||
clipPathUnits="userSpaceOnUse"
|
|
||||||
id="clipPath1083">
|
|
||||||
<g
|
|
||||||
id="g1087"
|
|
||||||
transform="translate(-941.26306,-1493.7234)">
|
|
||||||
<path
|
|
||||||
d="M -77.063638,2283.1277 H 1922.9364 V 283.12772 H -77.063638 Z"
|
|
||||||
id="path1085" />
|
|
||||||
</g>
|
|
||||||
</clipPath>
|
|
||||||
<clipPath
|
|
||||||
clipPathUnits="userSpaceOnUse"
|
|
||||||
id="clipPath1077">
|
|
||||||
<g
|
|
||||||
id="g1081"
|
|
||||||
transform="translate(-922.93976,-1266.5686)">
|
|
||||||
<path
|
|
||||||
d="M -77.063638,2283.1277 H 1922.9364 V 283.12772 H -77.063638 Z"
|
|
||||||
id="path1079" />
|
|
||||||
</g>
|
|
||||||
</clipPath>
|
|
||||||
</defs>
|
</defs>
|
||||||
<g
|
|
||||||
inkscape:label="Layer 1"
|
|
||||||
inkscape:groupmode="layer"
|
|
||||||
id="layer1"
|
|
||||||
transform="translate(-96.294406,-113.9353)">
|
|
||||||
<g
|
|
||||||
id="g70"
|
|
||||||
transform="matrix(0.35277777,0,0,-0.35277777,100.41097,127.47916)"
|
|
||||||
clip-path="url(#clipPath1167)">
|
|
||||||
<path
|
<path
|
||||||
d="M 0,0 C 6.633,-3.91 14.348,-4.302 20.992,-1.732 20.009,5.333 15.93,11.893 9.31,15.795 2.69,19.697 -5.025,20.088 -11.669,17.519 -10.7,10.462 -6.62,3.901 0,0"
|
d="m 4.116564,13.54386 c 2.33997,1.37936 5.06166,1.51765 7.40551,0.61101 C 11.175294,11.6625 9.736314,9.34827 7.400924,7.97174 5.065534,6.5952 2.343856,6.45726 0,7.36355 0.341842,9.8531 1.781175,12.16767 4.116564,13.54386"
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
style="fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778"
|
||||||
id="path72" />
|
id="path72" />
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g74"
|
|
||||||
transform="matrix(0.35277777,0,0,-0.35277777,106.63384,133.21363)"
|
|
||||||
clip-path="url(#clipPath1161)">
|
|
||||||
<path
|
<path
|
||||||
d="m 0,0 c -6.62,3.901 -14.335,4.293 -20.979,1.724 0.97,-7.058 5.049,-13.618 11.669,-17.519 6.633,-3.91 14.348,-4.301 20.992,-1.732 C 10.699,-10.462 6.62,-3.902 0,0"
|
d="m 10.339434,19.27833 c -2.33539,-1.37619 -5.05707,-1.51447 -7.400925,-0.60819 0.342195,2.48991 1.781175,4.80413 4.116565,6.18031 2.33997,1.37937 5.06165,1.5173 7.40551,0.61102 -0.34678,-2.49238 -1.78576,-4.8066 -4.12115,-6.18314"
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
style="fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778"
|
||||||
id="path76" />
|
id="path76" />
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g78"
|
|
||||||
transform="matrix(0.35277777,0,0,-0.35277777,107.19786,150.50755)"
|
|
||||||
clip-path="url(#clipPath1155)">
|
|
||||||
<path
|
<path
|
||||||
d="M 0,0 C 6.633,-3.909 14.348,-4.301 20.992,-1.731 20.009,5.333 15.93,11.894 9.31,15.795 2.69,19.697 -5.026,20.088 -11.669,17.52 -10.7,10.461 -6.62,3.902 0,0"
|
d="m 10.903454,36.57225 c 2.33997,1.37901 5.06166,1.5173 7.40551,0.61066 -0.34678,-2.49202 -1.78576,-4.8066 -4.12115,-6.18278 -2.33539,-1.37654 -5.05742,-1.51448 -7.40092,-0.60855 0.34184,2.49026 1.78117,4.80413 4.11656,6.18067"
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
style="fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778"
|
||||||
id="path80" />
|
id="path80" />
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g98"
|
|
||||||
transform="matrix(0.35277777,0,0,-0.35277777,129.16573,138.05504)"
|
|
||||||
clip-path="url(#clipPath1125)">
|
|
||||||
<path
|
<path
|
||||||
d="M 0,0 C 6.644,-2.57 14.358,-2.178 20.992,1.732 27.612,5.633 31.691,12.194 32.661,19.25 26.017,21.82 18.302,21.429 11.682,17.527 5.062,13.625 0.982,7.065 0,0"
|
d="m 32.871324,24.11974 c 2.34386,0.90664 5.06518,0.76835 7.40551,-0.61101 2.33539,-1.37619 3.77437,-3.69076 4.11656,-6.17996 -2.34385,-0.90664 -5.06553,-0.7687 -7.40092,0.60783 -2.33539,1.37654 -3.77472,3.69077 -4.12115,6.18314"
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
style="fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778"
|
||||||
id="path100" />
|
id="path100" />
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g102"
|
|
||||||
transform="matrix(0.35277777,0,0,-0.35277777,132.036,149.80546)"
|
|
||||||
clip-path="url(#clipPath1119)">
|
|
||||||
<path
|
<path
|
||||||
d="M 0,0 C 6.62,3.901 10.699,10.461 11.669,17.519 5.025,20.088 -2.689,19.696 -9.31,15.795 -15.93,11.893 -20.009,5.333 -20.992,-1.732 -14.348,-4.301 -6.633,-3.91 0,0"
|
d="m 35.741594,35.87016 c 2.33539,-1.37619 3.77437,-3.69041 4.11656,-6.18031 -2.34385,-0.90629 -5.06518,-0.768 -7.40092,0.60819 -2.33539,1.37653 -3.77437,3.69076 -4.12115,6.18313 2.34385,0.90629 5.06554,0.76835 7.40551,-0.61101"
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
style="fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778"
|
||||||
id="path104" />
|
id="path104" />
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g106"
|
|
||||||
transform="matrix(0.35277777,0,0,-0.35277777,139.41553,131.41004)"
|
|
||||||
clip-path="url(#clipPath1113)">
|
|
||||||
<path
|
<path
|
||||||
d="m -27.40181,13.441787 c 6.644,-2.57 14.359,-2.178 20.9920004,1.731 6.62000002,3.902 10.699,10.461 11.669,17.519 -6.644,2.569 -14.359,2.178 -20.9790004,-1.724 -6.62,-3.901 -10.7,-10.462 -11.682,-17.526"
|
d="m 33.454374,12.73278 c 2.34386,0.90664 5.06554,0.76835 7.40551,-0.61066 2.33539,-1.37654 3.77437,-3.69041 4.11657,-6.18032 -2.34386,-0.90628 -5.06554,-0.76835 -7.40093,0.60819 -2.33539,1.37619 -3.77472,3.69076 -4.12115,6.18279"
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
style="fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778"
|
||||||
id="path108" />
|
id="path108" />
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g110"
|
|
||||||
transform="matrix(0.35277777,0,0,-0.35277777,116.37715,121.06317)"
|
|
||||||
clip-path="url(#clipPath1107)">
|
|
||||||
<path
|
<path
|
||||||
d="m 0,0 c 1.271,7.579 -1.125,14.922 -5.904,20.205 -6.242,-3.433 -10.906,-9.591 -12.178,-17.169 -1.275,-7.594 1.123,-14.937 5.902,-20.22 C -5.936,-13.736 -1.273,-7.578 0,0"
|
d="M 20.082744,7.12787 C 20.531124,4.45417 19.685874,1.86372 17.999944,0 c -2.20204,1.21108 -3.84739,3.38349 -4.29613,6.05684 -0.44979,2.67899 0.39617,5.26944 2.0821,7.13316 2.20274,-1.21637 3.84774,-3.38878 4.29683,-6.06213"
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
style="fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778"
|
||||||
id="path112" />
|
id="path112" />
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g114"
|
|
||||||
transform="matrix(0.35277777,0,0,-0.35277777,123.25775,134.69217)"
|
|
||||||
clip-path="url(#clipPath1101)">
|
|
||||||
<path
|
<path
|
||||||
d="m 0,0 c 1.271,7.579 -1.125,14.922 -5.904,20.206 -6.242,-3.434 -10.906,-9.592 -12.178,-17.17 -1.275,-7.593 1.123,-14.937 5.902,-20.22 C -5.937,-13.736 -1.273,-7.578 0,0"
|
d="m 26.963344,20.75687 c 0.44838,-2.6737 -0.39687,-5.26415 -2.0828,-7.12823 -2.20204,1.21144 -3.84739,3.38385 -4.29613,6.0572 -0.44979,2.67864 0.39617,5.26944 2.0821,7.13316 2.20239,-1.21637 3.84774,-3.38878 4.29683,-6.06213"
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
style="fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778"
|
||||||
id="path116" />
|
id="path116" />
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g126"
|
|
||||||
transform="matrix(0.35277777,0,0,-0.35277777,125.36425,127.9867)"
|
|
||||||
clip-path="url(#clipPath1083)">
|
|
||||||
<path
|
<path
|
||||||
d="M 0,0 C 4.779,5.283 7.176,12.627 5.901,20.22 4.629,27.798 -0.035,33.956 -6.277,37.39 -11.055,32.106 -13.453,24.763 -12.18,17.184 -10.908,9.606 -6.244,3.448 0,0"
|
d="m 29.069844,14.0514 c 1.68592,-1.86372 2.53153,-4.45452 2.08174,-7.13317 -0.44873,-2.67335 -2.09409,-4.84575 -4.29613,-6.05719 -1.68557,1.86408 -2.53153,4.45452 -2.08244,7.12823 0.44873,2.67335 2.09409,4.84575 4.29683,6.06213"
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
style="fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778"
|
||||||
id="path128" />
|
id="path128" />
|
||||||
</g>
|
<path class=stem
|
||||||
<g
|
style="fill:none;fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-dasharray:none;stroke-opacity:1"
|
||||||
id="g10"
|
d="m 23.080434,47.49372 c -0.34605,-9.7943 8.85917,-32.69334 8.85917,-32.69334"
|
||||||
transform="translate(54.26113,76.790102)">
|
|
||||||
<path
|
|
||||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
d="m 65.113709,84.638921 c -0.346049,-9.794303 8.85917,-32.693347 8.85917,-32.693347"
|
|
||||||
id="path9" />
|
id="path9" />
|
||||||
<path
|
<path class=stem
|
||||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-dasharray:none;stroke-opacity:1"
|
style="fill:none;fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-dasharray:none;stroke-opacity:1"
|
||||||
d="m 65.108044,84.684262 c 0.346049,-9.794303 -8.85917,-32.693347 -8.85917,-32.693347"
|
d="m 23.074764,47.53906 c 0.34605,-9.7943 -8.85917,-32.69334 -8.85917,-32.69334"
|
||||||
id="path9-7" />
|
id="path9-7" />
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 8.7 KiB After Width: | Height: | Size: 4.0 KiB |
Reference in New Issue
Block a user