clause agent mode "make it look like papermod"
Some checks failed
CSS Code Linting / Lint CSS (push) Has been cancelled
JS Code Linting / Lint JS (push) Has been cancelled
PHP Code Linting / Parallel lint (push) Has been cancelled
PHP Code Linting / PHPCS check (push) Has been cancelled

This commit is contained in:
gribse 2025-07-26 16:24:01 +02:00
parent 1c59bd66ea
commit 582e4491c0
91 changed files with 2139 additions and 202 deletions

View file

@ -0,0 +1,74 @@
// CSS Custom Properties for theme switching
// This allows dynamic switching between light and dark themes
:root {
// Light theme (default)
--color-bg-primary: #{$color__background-body};
--color-bg-secondary: #{$color__background-screen};
--color-bg-card: #{$color__background-card};
--color-bg-header: #{$color__background-header};
--color-text-primary: #{$color__text-main};
--color-text-secondary: #{$color__text-muted};
--color-text-tertiary: #{$color__text-light};
--color-link: #{$color__link};
--color-link-visited: #{$color__link-visited};
--color-link-hover: #{$color__link-hover};
--color-border-primary: #{$color__border-main};
--color-border-secondary: #{$color__border-input};
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
--shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
// Transitions
--transition-default: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
--transition-fast: all 0.15s ease-in-out;
}
// Dark theme
[data-theme="dark"] {
--color-bg-primary: #{$color__dark-background-body};
--color-bg-secondary: #{$color__dark-background-screen};
--color-bg-card: #{$color__dark-background-card};
--color-bg-header: #{$color__dark-background-header};
--color-text-primary: #{$color__dark-text-main};
--color-text-secondary: #{$color__dark-text-muted};
--color-text-tertiary: #{$color__dark-text-light};
--color-link: #{$color__dark-link};
--color-link-visited: #{$color__dark-link-visited};
--color-link-hover: #{$color__dark-link-hover};
--color-border-primary: #{$color__dark-border-main};
--color-border-secondary: #{$color__dark-border-input};
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
--shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.7), 0 10px 10px rgba(0, 0, 0, 0.8);
}
// Prefers dark color scheme
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-bg-primary: #{$color__dark-background-body};
--color-bg-secondary: #{$color__dark-background-screen};
--color-bg-card: #{$color__dark-background-card};
--color-bg-header: #{$color__dark-background-header};
--color-text-primary: #{$color__dark-text-main};
--color-text-secondary: #{$color__dark-text-muted};
--color-text-tertiary: #{$color__dark-text-light};
--color-link: #{$color__dark-link};
--color-link-visited: #{$color__dark-link-visited};
--color-link-hover: #{$color__dark-link-hover};
--color-border-primary: #{$color__dark-border-main};
--color-border-secondary: #{$color__dark-border-input};
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
--shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.7), 0 10px 10px rgba(0, 0, 0, 0.8);
}
}