dj7nt/award
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

feat: implement theme switching system with light and dark modes

Browse Source 
Add complete theme switching system supporting Light Mode, Dark Mode, and
System preference (follows OS setting). Uses CSS custom properties for all
colors and Svelte store for state management with localStorage persistence.

New files:
- src/frontend/src/lib/stores/theme.js: Theme state management store
- src/frontend/src/app.css: CSS variables for light/dark themes
- src/frontend/src/lib/components/ThemeSwitcher.svelte: Theme switcher UI

Updated all components to use CSS variables instead of hardcoded colors:
- Main pages (home, awards, QSOs, settings, auth)
- Admin dashboard and award management pages
- Shared components (BackButton, ErrorDisplay, Loading)

Features:
- localStorage persistence for user preference
- System preference detection via matchMedia API
- FOUC prevention with inline script in app.html
- Smooth theme transitions across entire application

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Joerg
2026-01-23 11:46:41 +01:00
parent d1e4c39ad6
commit 239963ed89
20 changed files with 1042 additions and 600 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
src/frontend/src/app.css Normal file
View File

@@ -0,0 +1,186 @@
/* Quickawards Theme System - CSS Variables */
/* Light Mode (default) */
:root, [data-theme="light"] {
/* Backgrounds */
--bg-body: #f5f5f5;
--bg-card: #ffffff;
--bg-navbar: #2c3e50;
--bg-footer: #2c3e50;
--bg-input: #ffffff;
--bg-hover: rgba(255, 255, 255, 0.1);
--bg-secondary: #f8f9fa;
--bg-tertiary: #e9ecef;
/* Text */
--text-primary: #333333;
--text-secondary: #666666;
--text-muted: #999999;
--text-inverted: #ffffff;
--text-link: #4a90e2;
/* Primary colors */
--color-primary: #4a90e2;
--color-primary-hover: #357abd;
--color-primary-light: rgba(74, 144, 226, 0.1);
/* Secondary colors */
--color-secondary: #6c757d;
--color-secondary-hover: #5a6268;
/* Semantic colors */
--color-success: #065f46;
--color-success-bg: #d1fae5;
--color-success-light: #10b981;
--color-warning: #ffc107;
--color-warning-hover: #e0a800;
--color-warning-bg: #fff3cd;
--color-warning-text: #856404;
--color-error: #dc3545;
--color-error-hover: #c82333;
--color-error-bg: #fee2e2;
--color-error-text: #991b1b;
--color-info: #1e40af;
--color-info-bg: #dbeafe;
--color-info-text: #1e40af;
/* Badge/status colors */
--badge-pending-bg: #fef3c7;
--badge-pending-text: #92400e;
--badge-running-bg: #dbeafe;
--badge-running-text: #1e40af;
--badge-completed-bg: #d1fae5;
--badge-completed-text: #065f46;
--badge-failed-bg: #fee2e2;
--badge-failed-text: #991b1b;
--badge-cancelled-bg: #f3e8ff;
--badge-cancelled-text: #6b21a8;
--badge-purple-bg: #8b5cf6;
--badge-purple-text: #ffffff;
/* Borders */
--border-color: #e0e0e0;
--border-color-light: #e9ecef;
--border-radius: 4px;
--border-radius-lg: 8px;
--border-radius-pill: 12px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
/* Focus */
--focus-ring: 0 0 0 2px rgba(74, 144, 226, 0.2);
/* Logout button */
--color-logout: #ff6b6b;
--color-logout-hover: #ff5252;
--color-logout-bg: rgba(255, 107, 107, 0.1);
/* Admin link */
--color-admin-bg: #ffc107;
--color-admin-hover: #e0a800;
--color-admin-text: #000000;
/* Impersonation banner */
--impersonation-bg: #fff3cd;
--impersonation-border: #ffc107;
--impersonation-text: #856404;
/* Gradient colors */
--gradient-primary: linear-gradient(90deg, #4a90e2 0%, #357abd 100%);
--gradient-purple: linear-gradient(90deg, #8b5cf6, #a78bfa);
--gradient-scheduled: linear-gradient(to right, #f8f7ff, white);
}
/* Dark Mode */
[data-theme="dark"] {
/* Backgrounds */
--bg-body: #1a1a1a;
--bg-card: #2d2d2d;
--bg-navbar: #1f2937;
--bg-footer: #1f2937;
--bg-input: #2d2d2d;
--bg-hover: rgba(255, 255, 255, 0.1);
--bg-secondary: #252525;
--bg-tertiary: #333333;
/* Text */
--text-primary: #e0e0e0;
--text-secondary: #a0a0a0;
--text-muted: #707070;
--text-inverted: #ffffff;
--text-link: #5ba3f5;
/* Primary colors */
--color-primary: #5ba3f5;
--color-primary-hover: #4a8ae4;
--color-primary-light: rgba(91, 163, 245, 0.15);
/* Secondary colors */
--color-secondary: #6b7280;
--color-secondary-hover: #4b5563;
/* Semantic colors */
--color-success: #10b981;
--color-success-bg: #064e3b;
--color-success-light: #10b981;
--color-warning: #fbbf24;
--color-warning-hover: #f59e0b;
--color-warning-bg: #451a03;
--color-warning-text: #fef3c7;
--color-error: #f87171;
--color-error-hover: #ef4444;
--color-error-bg: #7f1d1d;
--color-error-text: #fecaca;
--color-info: #3b82f6;
--color-info-bg: #1e3a8a;
--color-info-text: #93c5fd;
/* Badge/status colors */
--badge-pending-bg: #451a03;
--badge-pending-text: #fef3c7;
--badge-running-bg: #1e3a8a;
--badge-running-text: #93c5fd;
--badge-completed-bg: #064e3b;
--badge-completed-text: #6ee7b7;
--badge-failed-bg: #7f1d1d;
--badge-failed-text: #fecaca;
--badge-cancelled-bg: #3b0a4d;
--badge-cancelled-text: #d8b4fe;
--badge-purple-bg: #7c3aed;
--badge-purple-text: #ffffff;
/* Borders */
--border-color: #404040;
--border-color-light: #4a4a4a;
/* Focus */
--focus-ring: 0 0 0 2px rgba(91, 163, 245, 0.2);
/* Logout button */
--color-logout: #f87171;
--color-logout-hover: #ef4444;
--color-logout-bg: rgba(248, 113, 113, 0.15);
/* Admin link */
--color-admin-bg: #f59e0b;
--color-admin-hover: #d97706;
--color-admin-text: #000000;
/* Impersonation banner */
--impersonation-bg: #451a03;
--impersonation-border: #f59e0b;
--impersonation-text: #fef3c7;
/* Gradient colors */
--gradient-primary: linear-gradient(90deg, #5ba3f5 0%, #4a8ae4 100%);
--gradient-purple: linear-gradient(90deg, #7c3aed, #8b5cf6);
--gradient-scheduled: linear-gradient(to right, #2d1f3d, #2d2d2d);
}

8
src/frontend/src/app.html
View File

@@ -4,6 +4,14 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
<script>
// Prevent flash of unstyled content (FOUC)
(function() {
const theme = localStorage.getItem('theme') || 'light';
const isDark = theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
})();
</script>
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>

8
src/frontend/src/lib/components/BackButton.svelte
View File

@@ -11,10 +11,10 @@
<style> <style>
.back-button { .back-button {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background-color: #6c757d; background-color: var(--color-secondary);
color: white; color: white;
text-decoration: none; text-decoration: none;
border-radius: 4px; border-radius: var(--border-radius);
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
transition: background-color 0.2s; transition: background-color 0.2s;
@@ -22,12 +22,12 @@
} }
.back-button:hover { .back-button:hover {
background-color: #5a6268; background-color: var(--color-secondary-hover);
} }
.back-button.secondary { .back-button.secondary {
background-color: transparent; background-color: transparent;
color: #4a90e2; color: var(--color-primary);
padding: 0; padding: 0;
} }

8
src/frontend/src/lib/components/ErrorDisplay.svelte
View File

@@ -16,21 +16,21 @@
text-align: center; text-align: center;
padding: 3rem; padding: 3rem;
font-size: 1.1rem; font-size: 1.1rem;
color: #d32f2f; color: var(--color-error);
} }
.btn { .btn {
display: inline-block; display: inline-block;
margin-top: 1rem; margin-top: 1rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background-color: #4a90e2; background-color: var(--color-primary);
color: white; color: white;
text-decoration: none; text-decoration: none;
border-radius: 4px; border-radius: var(--border-radius);
font-weight: 500; font-weight: 500;
} }
.btn:hover { .btn:hover {
background-color: #357abd; background-color: var(--color-primary-hover);
} }
</style> </style>

2
src/frontend/src/lib/components/Loading.svelte
View File

@@ -11,6 +11,6 @@
text-align: center; text-align: center;
padding: 3rem; padding: 3rem;
font-size: 1.1rem; font-size: 1.1rem;
color: #666; color: var(--text-secondary);
} }
</style> </style>

152
src/frontend/src/lib/components/ThemeSwitcher.svelte Normal file
View File

@@ -0,0 +1,152 @@
<script>
import { theme } from '$lib/stores/theme.js';
import { browser } from '$app/environment';
let isOpen = false;
const themes = [
{ value: 'light', label: 'Light', icon: '☀️' },
{ value: 'dark', label: 'Dark', icon: '🌙' },
{ value: 'system', label: 'System', icon: '💻' },
];
function selectTheme(value) {
theme.setTheme(value);
isOpen = false;
}
function toggle() {
isOpen = !isOpen;
}
// Close dropdown when clicking outside
function handleClickOutside(event) {
if (!event.target.closest('.theme-switcher')) {
isOpen = false;
}
}
if (browser) {
document.addEventListener('click', handleClickOutside);
}
</script>
<svelte:head>
<style>
/* Ensure dropdown is above other content */
.theme-dropdown {
z-index: 1000;
}
</style>
</svelte:head>
<div class="theme-switcher">
<button
class="theme-button"
on:click={toggle}
aria-label="Change theme"
aria-expanded={isOpen}
>
<span class="current-icon">
{#if $theme === 'light'}
☀️
{:else if $theme === 'dark'}
🌙
{:else}
💻
{/if}
</span>
</button>
{#if isOpen}
<div class="theme-dropdown">
{#each themes as t}
<button
class="theme-option"
class:active={$theme === t.value}
on:click={() => selectTheme(t.value)}
>
<span class="theme-icon">{t.icon}</span>
<span class="theme-label">{t.label}</span>
{#if $theme === t.value}
<span class="checkmark">✓</span>
{/if}
</button>
{/each}
</div>
{/if}
</div>
<style>
.theme-switcher {
position: relative;
display: inline-block;
}
.theme-button {
background: transparent;
border: none;
cursor: pointer;
padding: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
transition: background-color 0.2s;
color: var(--text-inverted);
font-size: 1.25rem;
}
.theme-button:hover {
background-color: var(--bg-hover);
}
.theme-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
background-color: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
min-width: 140px;
overflow: hidden;
}
.theme-option {
width: 100%;
padding: 0.75rem 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
font-size: 0.9rem;
color: var(--text-primary);
transition: background-color 0.2s;
}
.theme-option:hover {
background-color: var(--bg-secondary);
}
.theme-option.active {
background-color: var(--bg-secondary);
font-weight: 600;
}
.theme-icon {
font-size: 1.1rem;
}
.theme-label {
flex: 1;
}
.checkmark {
color: var(--color-primary);
font-weight: bold;
}
</style>

56
src/frontend/src/lib/stores/theme.js Normal file
View File

@@ -0,0 +1,56 @@
import { writable, derived } from 'svelte/store';
import { browser } from '$app/environment';
/**
* Theme store
* Manages theme state (light, dark, system) with localStorage persistence
*/
function createThemeStore() {
// Initialize state from localStorage
const initialState = browser ? localStorage.getItem('theme') || 'light' : 'light';
const { subscribe, set, update } = writable(initialState);
// Listen for system preference changes
let mediaQuery;
if (browser) {
mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const handleMediaChange = () => {
// Trigger update to recompute isDark
update((n) => n);
};
mediaQuery.addEventListener('change', handleMediaChange);
}
// Derived store for whether dark mode should be active
const isDark = derived(initialState, ($theme) => {
if (!browser) return false;
if ($theme === 'dark') return true;
if ($theme === 'light') return false;
// system preference
return window.matchMedia('(prefers-color-scheme: dark)').matches;
});
return {
subscribe,
isDark,
setTheme: (theme) => {
if (browser) {
localStorage.setItem('theme', theme);
// Apply data-theme attribute to document
const isDarkMode = theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
}
set(theme);
},
// Initialize theme on client-side
init: () => {
if (!browser) return;
const theme = localStorage.getItem('theme') || 'light';
const isDarkMode = theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
},
};
}
export const theme = createThemeStore();

59
src/frontend/src/routes/+layout.svelte
View File

@@ -1,11 +1,20 @@
<script> <script>
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { onMount } from 'svelte';
import { auth } from '$lib/stores.js'; import { auth } from '$lib/stores.js';
import { theme } from '$lib/stores/theme.js';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { adminAPI, authAPI } from '$lib/api.js'; import { adminAPI, authAPI } from '$lib/api.js';
import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
import '../app.css';
let stoppingImpersonation = false; let stoppingImpersonation = false;
// Initialize theme on mount
onMount(() => {
theme.init();
});
function handleLogout() { function handleLogout() {
auth.logout(); auth.logout();
// Use hard redirect to ensure proper navigation after logout // Use hard redirect to ensure proper navigation after logout
@@ -62,6 +71,7 @@
{#if $auth.user?.isAdmin} {#if $auth.user?.isAdmin}
<a href="/admin" class="nav-link admin-link">Admin</a> <a href="/admin" class="nav-link admin-link">Admin</a>
{/if} {/if}
<ThemeSwitcher />
<button on:click={handleLogout} class="nav-link logout-btn">Logout</button> <button on:click={handleLogout} class="nav-link logout-btn">Logout</button>
</div> </div>
</div> </div>
@@ -111,7 +121,8 @@
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #f5f5f5; background-color: var(--bg-body);
color: var(--text-primary);
} }
.app { .app {
@@ -121,8 +132,8 @@
} }
.navbar { .navbar {
background-color: #2c3e50; background-color: var(--bg-navbar);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-md);
} }
.nav-container { .nav-container {
@@ -136,7 +147,7 @@
} }
.nav-brand .callsign { .nav-brand .callsign {
color: white; color: var(--text-inverted);
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 600; font-weight: 600;
} }
@@ -148,11 +159,12 @@
} }
.nav-link { .nav-link {
color: rgba(255, 255, 255, 0.8); color: var(--text-inverted);
opacity: 0.8;
text-decoration: none; text-decoration: none;
font-size: 0.95rem; font-size: 0.95rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 4px; border-radius: var(--border-radius);
transition: all 0.2s; transition: all 0.2s;
background: none; background: none;
border: none; border: none;
@@ -161,27 +173,27 @@
} }
.nav-link:hover { .nav-link:hover {
color: white; opacity: 1;
background-color: rgba(255, 255, 255, 0.1); background-color: var(--bg-hover);
} }
.logout-btn { .logout-btn {
color: #ff6b6b; color: var(--color-logout);
opacity: 1;
} }
.logout-btn:hover { .logout-btn:hover {
color: #ff5252; background-color: var(--color-logout-bg);
background-color: rgba(255, 107, 107, 0.1);
} }
.admin-link { .admin-link {
background-color: #ffc107; background-color: var(--color-admin-bg);
color: #000; color: var(--color-admin-text);
font-weight: 600; font-weight: 600;
} }
.admin-link:hover { .admin-link:hover {
background-color: #e0a800; background-color: var(--color-admin-hover);
} }
main { main {
@@ -193,8 +205,9 @@
} }
footer { footer {
background-color: #2c3e50; background-color: var(--bg-footer);
color: rgba(255, 255, 255, 0.7); color: var(--text-inverted);
opacity: 0.7;
text-align: center; text-align: center;
padding: 1.5rem; padding: 1.5rem;
margin-top: auto; margin-top: auto;
@@ -207,8 +220,8 @@
/* Impersonation Banner */ /* Impersonation Banner */
.impersonation-banner { .impersonation-banner {
background-color: #fff3cd; background-color: var(--impersonation-bg);
border: 2px solid #ffc107; border: 2px solid var(--impersonation-border);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
} }
@@ -228,15 +241,15 @@
.impersonation-text { .impersonation-text {
flex: 1; flex: 1;
font-size: 0.95rem; font-size: 0.95rem;
color: #856404; color: var(--impersonation-text);
} }
.stop-impersonation-btn { .stop-impersonation-btn {
background-color: #ffc107; background-color: var(--color-warning);
color: #000; color: var(--impersonation-text);
border: none; border: none;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 4px; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
font-size: 0.9rem; font-size: 0.9rem;
@@ -244,7 +257,7 @@
} }
.stop-impersonation-btn:hover:not(:disabled) { .stop-impersonation-btn:hover:not(:disabled) {
background-color: #e0a800; background-color: var(--color-warning-hover);
} }
.stop-impersonation-btn:disabled { .stop-impersonation-btn:disabled {

148
src/frontend/src/routes/+page.svelte
View File

@@ -445,13 +445,13 @@
.welcome h1 { .welcome h1 {
font-size: 2.5rem; font-size: 2.5rem;
color: #333; color: var(--text-primary);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.subtitle { .subtitle {
font-size: 1.25rem; font-size: 1.25rem;
color: #666; color: var(--text-secondary);
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@@ -464,12 +464,12 @@
.dashboard h1 { .dashboard h1 {
font-size: 2rem; font-size: 2rem;
color: #333; color: var(--text-primary);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.welcome-section p { .welcome-section p {
color: #666; color: var(--text-secondary);
font-size: 1.1rem; font-size: 1.1rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@@ -482,21 +482,21 @@
} }
.action-card { .action-card {
background: white; background: var(--bg-card);
border: 1px solid #e0e0e0; border: 1px solid var(--border-color);
border-radius: 8px; border-radius: var(--border-radius-lg);
padding: 1.5rem; padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-sm);
} }
.action-card h3 { .action-card h3 {
margin: 0 0 0.5rem 0; margin: 0 0 0.5rem 0;
font-size: 1.25rem; font-size: 1.25rem;
color: #333; color: var(--text-primary);
} }
.action-card p { .action-card p {
color: #666; color: var(--text-secondary);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -504,7 +504,7 @@
display: inline-block; display: inline-block;
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
border: none; border: none;
border-radius: 4px; border-radius: var(--border-radius);
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 500;
text-decoration: none; text-decoration: none;
@@ -513,25 +513,25 @@
} }
.btn-primary { .btn-primary {
background-color: #4a90e2; background-color: var(--color-primary);
color: white; color: white;
} }
.btn-primary:hover { .btn-primary:hover {
background-color: #357abd; background-color: var(--color-primary-hover);
} }
.btn-secondary { .btn-secondary {
background-color: #6c757d; background-color: var(--color-secondary);
color: white; color: white;
} }
.btn-secondary:hover { .btn-secondary:hover {
background-color: #5a6268; background-color: var(--color-secondary-hover);
} }
.action-card .btn { .action-card .btn {
background-color: #4a90e2; background-color: var(--color-primary);
color: white; color: white;
width: 100%; width: 100%;
text-align: center; text-align: center;
@@ -539,25 +539,25 @@
} }
.action-card .btn:hover { .action-card .btn:hover {
background-color: #357abd; background-color: var(--color-primary-hover);
} }
.info-box { .info-box {
background: #f8f9fa; background: var(--bg-secondary);
border-left: 4px solid #4a90e2; border-left: 4px solid var(--color-primary);
padding: 1.5rem; padding: 1.5rem;
border-radius: 4px; border-radius: var(--border-radius);
} }
.info-box h3 { .info-box h3 {
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
color: #333; color: var(--text-primary);
} }
.info-box ol { .info-box ol {
margin: 0; margin: 0;
padding-left: 1.5rem; padding-left: 1.5rem;
color: #666; color: var(--text-secondary);
line-height: 1.8; line-height: 1.8;
} }
@@ -568,18 +568,18 @@
.section-title { .section-title {
font-size: 1.5rem; font-size: 1.5rem;
color: #333; color: var(--text-primary);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.loading-state, .loading-state,
.empty-state { .empty-state {
background: white; background: var(--bg-card);
border: 1px solid #e0e0e0; border: 1px solid var(--border-color);
border-radius: 8px; border-radius: var(--border-radius-lg);
padding: 2rem; padding: 2rem;
text-align: center; text-align: center;
color: #666; color: var(--text-secondary);
} }
.empty-actions { .empty-actions {
@@ -597,25 +597,25 @@
} }
.job-card { .job-card {
background: white; background: var(--bg-card);
border: 1px solid #e0e0e0; border: 1px solid var(--border-color);
border-radius: 8px; border-radius: var(--border-radius-lg);
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-sm);
transition: box-shadow 0.2s; transition: box-shadow 0.2s;
} }
.job-card:hover { .job-card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); box-shadow: var(--shadow-md);
} }
.job-card.failed { .job-card.failed {
border-left: 4px solid #dc3545; border-left: 4px solid var(--color-error);
} }
.job-card-scheduled { .job-card-scheduled {
border-left: 4px solid #8b5cf6; border-left: 4px solid var(--badge-purple-bg);
background: linear-gradient(to right, #f8f7ff, white); background: var(--gradient-scheduled);
} }
.job-header { .job-header {
@@ -637,62 +637,62 @@
.job-name { .job-name {
font-weight: 600; font-weight: 600;
color: #333; color: var(--text-primary);
font-size: 1.1rem; font-size: 1.1rem;
} }
.job-id { .job-id {
font-size: 0.85rem; font-size: 0.85rem;
color: #999; color: var(--text-muted);
font-family: monospace; font-family: monospace;
} }
.status-badge { .status-badge {
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
border-radius: 12px; border-radius: var(--border-radius-pill);
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 500; font-weight: 500;
text-transform: capitalize; text-transform: capitalize;
} }
.bg-yellow-100 { .bg-yellow-100 {
background-color: #fef3c7; background-color: var(--badge-pending-bg);
} }
.bg-blue-100 { .bg-blue-100 {
background-color: #dbeafe; background-color: var(--badge-running-bg);
} }
.bg-green-100 { .bg-green-100 {
background-color: #d1fae5; background-color: var(--badge-completed-bg);
} }
.bg-red-100 { .bg-red-100 {
background-color: #fee2e2; background-color: var(--badge-failed-bg);
} }
.text-yellow-800 { .text-yellow-800 {
color: #92400e; color: var(--badge-pending-text);
} }
.text-blue-800 { .text-blue-800 {
color: #1e40af; color: var(--badge-running-text);
} }
.text-green-800 { .text-green-800 {
color: #065f46; color: var(--badge-completed-text);
} }
.text-red-800 { .text-red-800 {
color: #991b1b; color: var(--badge-failed-text);
} }
.bg-purple-100 { .bg-purple-100 {
background-color: #f3e8ff; background-color: var(--badge-cancelled-bg);
} }
.text-purple-800 { .text-purple-800 {
color: #6b21a8; color: var(--badge-cancelled-text);
} }
.job-badge { .job-badge {
@@ -705,15 +705,15 @@
} }
.scheduled-badge { .scheduled-badge {
background-color: #8b5cf6; background-color: var(--badge-purple-bg);
color: white; color: var(--badge-purple-text);
} }
.job-meta { .job-meta {
display: flex; display: flex;
gap: 0.75rem; gap: 0.75rem;
font-size: 0.9rem; font-size: 0.9rem;
color: #666; color: var(--text-secondary);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
@@ -724,14 +724,14 @@
.job-time, .job-time,
.job-duration { .job-duration {
color: #999; color: var(--text-muted);
} }
.job-error { .job-error {
background: #fee2e2; background: var(--color-error-bg);
color: #991b1b; color: var(--color-error-text);
padding: 0.75rem; padding: 0.75rem;
border-radius: 4px; border-radius: var(--border-radius);
font-size: 0.95rem; font-size: 0.95rem;
margin-top: 0.5rem; margin-top: 0.5rem;
} }
@@ -745,29 +745,29 @@
.stat-item { .stat-item {
font-size: 0.9rem; font-size: 0.9rem;
color: #666; color: var(--text-secondary);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
background: #f8f9fa; background: var(--bg-secondary);
border-radius: 4px; border-radius: var(--border-radius);
} }
.stat-item strong { .stat-item strong {
color: #333; color: var(--text-primary);
} }
.stat-added { .stat-added {
color: #065f46; color: var(--color-success);
background: #d1fae5; background: var(--color-success-bg);
} }
.stat-updated { .stat-updated {
color: #1e40af; color: var(--color-info);
background: #dbeafe; background: var(--color-info-bg);
} }
.stat-skipped { .stat-skipped {
color: #92400e; color: var(--badge-pending-text);
background: #fef3c7; background: var(--badge-pending-bg);
} }
.job-progress { .job-progress {
@@ -775,7 +775,7 @@
} }
.progress-text { .progress-text {
color: #1e40af; color: var(--color-info);
font-size: 0.9rem; font-size: 0.9rem;
font-style: italic; font-style: italic;
} }
@@ -789,17 +789,17 @@
.btn-cancel { .btn-cancel {
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
font-size: 0.85rem; font-size: 0.85rem;
border: 1px solid #dc3545; border: 1px solid var(--color-error);
background: white; background: var(--bg-card);
color: #dc3545; color: var(--color-error);
border-radius: 4px; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
font-weight: 500; font-weight: 500;
} }
.btn-cancel:hover:not(:disabled) { .btn-cancel:hover:not(:disabled) {
background: #dc3545; background: var(--color-error);
color: white; color: white;
} }
@@ -820,7 +820,7 @@
.countdown-bar { .countdown-bar {
height: 6px; height: 6px;
background: #e5e7eb; background: var(--border-color-light);
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
@@ -828,7 +828,7 @@
.countdown-progress { .countdown-progress {
height: 100%; height: 100%;
background: linear-gradient(90deg, #8b5cf6, #a78bfa); background: var(--gradient-purple);
border-radius: 3px; border-radius: 3px;
width: 100%; width: 100%;
animation: pulse-countdown 2s ease-in-out infinite; animation: pulse-countdown 2s ease-in-out infinite;
@@ -846,7 +846,7 @@
.countdown-text { .countdown-text {
margin: 0; margin: 0;
font-size: 0.85rem; font-size: 0.85rem;
color: #8b5cf6; color: var(--badge-purple-bg);
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
} }

129
src/frontend/src/routes/admin/+page.svelte
View File

@@ -558,19 +558,20 @@
text-align: center; text-align: center;
padding: 3rem; padding: 3rem;
font-size: 1.2rem; font-size: 1.2rem;
color: var(--text-secondary);
} }
.error { .error {
background-color: #fee; background-color: var(--color-error-bg);
border: 1px solid #fcc; border: 1px solid var(--color-error);
padding: 1rem; padding: 1rem;
border-radius: 4px; border-radius: var(--border-radius);
color: #c00; color: var(--color-error-text);
} }
h1 { h1 {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
color: #333; color: var(--text-primary);
} }
/* Tabs */ /* Tabs */
@@ -578,7 +579,7 @@
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
margin-bottom: 2rem; margin-bottom: 2rem;
border-bottom: 2px solid #ddd; border-bottom: 2px solid var(--border-color);
} }
.tab { .tab {
@@ -588,30 +589,30 @@
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 500;
color: #666; color: var(--text-secondary);
position: relative; position: relative;
top: 2px; top: 2px;
} }
.tab:hover { .tab:hover {
color: #333; color: var(--text-primary);
} }
.tab.active { .tab.active {
color: #007bff; color: var(--color-primary);
border-bottom: 2px solid #007bff; border-bottom: 2px solid var(--color-primary);
} }
.tab-content { .tab-content {
background: white; background: var(--bg-card);
padding: 1.5rem; padding: 1.5rem;
border-radius: 4px; border-radius: var(--border-radius);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-sm);
} }
h2 { h2 {
margin-bottom: 1rem; margin-bottom: 1rem;
color: #333; color: var(--text-primary);
} }
/* Stats Grid */ /* Stats Grid */
@@ -626,8 +627,8 @@
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white; color: white;
padding: 1.5rem; padding: 1.5rem;
border-radius: 8px; border-radius: var(--border-radius-lg);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); box-shadow: var(--shadow-md);
} }
.stat-card h3 { .stat-card h3 {
@@ -670,9 +671,11 @@
.search-input, .search-input,
.filter-select { .filter-select {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: var(--border-radius);
font-size: 0.9rem; font-size: 0.9rem;
background: var(--bg-input);
color: var(--text-primary);
} }
.search-input { .search-input {
@@ -687,8 +690,8 @@
.users-table { .users-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
background: white; background: var(--bg-card);
border-radius: 4px; border-radius: var(--border-radius);
overflow: hidden; overflow: hidden;
} }
@@ -696,23 +699,23 @@
.users-table td { .users-table td {
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
text-align: left; text-align: left;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid var(--border-color);
} }
.users-table th { .users-table th {
background-color: #f5f5f5; background-color: var(--bg-secondary);
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
font-size: 0.8rem; font-size: 0.8rem;
color: #666; color: var(--text-secondary);
} }
.users-table tr:hover { .users-table tr:hover {
background-color: #f9f9f9; background-color: var(--bg-secondary);
} }
.admin-row { .admin-row {
background-color: #fff9e6 !important; background-color: var(--color-warning-bg) !important;
} }
.actions-cell { .actions-cell {
@@ -723,7 +726,7 @@
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
margin-right: 0.3rem; margin-right: 0.3rem;
border: none; border: none;
border-radius: 4px; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
font-size: 0.85rem; font-size: 0.85rem;
transition: all 0.2s; transition: all 0.2s;
@@ -744,21 +747,21 @@
} }
.role-btn { .role-btn {
background-color: #ffc107; background-color: var(--color-warning);
color: #000; color: #000;
} }
.role-btn:hover:not(:disabled) { .role-btn:hover:not(:disabled) {
background-color: #e0a800; background-color: var(--color-warning-hover);
} }
.delete-btn { .delete-btn {
background-color: #dc3545; background-color: var(--color-error);
color: white; color: white;
} }
.delete-btn:hover:not(:disabled) { .delete-btn:hover:not(:disabled) {
background-color: #c82333; background-color: var(--color-error-hover);
} }
.role-badge { .role-badge {
@@ -774,13 +777,13 @@
} }
.role-badge.user { .role-badge.user {
background-color: #6c757d; background-color: var(--color-secondary);
color: white; color: white;
} }
.users-count { .users-count {
margin-top: 1rem; margin-top: 1rem;
color: #666; color: var(--text-secondary);
font-style: italic; font-style: italic;
} }
@@ -792,8 +795,8 @@
.actions-table { .actions-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
background: white; background: var(--bg-card);
border-radius: 4px; border-radius: var(--border-radius);
overflow: hidden; overflow: hidden;
} }
@@ -801,15 +804,15 @@
.actions-table td { .actions-table td {
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
text-align: left; text-align: left;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid var(--border-color);
} }
.actions-table th { .actions-table th {
background-color: #f5f5f5; background-color: var(--bg-secondary);
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
font-size: 0.8rem; font-size: 0.8rem;
color: #666; color: var(--text-secondary);
} }
.action-type { .action-type {
@@ -820,12 +823,12 @@
} }
.action-type.impersonate_start { .action-type.impersonate_start {
background-color: #ffc107; background-color: var(--color-warning);
color: #000; color: #000;
} }
.action-type.impersonate_stop { .action-type.impersonate_stop {
background-color: #28a745; background-color: var(--color-success-light);
color: white; color: white;
} }
@@ -835,14 +838,14 @@
} }
.action-type.user_delete { .action-type.user_delete {
background-color: #dc3545; background-color: var(--color-error);
color: white; color: white;
} }
.details-json { .details-json {
background-color: #f5f5f5; background-color: var(--bg-secondary);
padding: 0.5rem; padding: 0.5rem;
border-radius: 4px; border-radius: var(--border-radius);
font-size: 0.8rem; font-size: 0.8rem;
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
@@ -851,7 +854,7 @@
.no-actions { .no-actions {
text-align: center; text-align: center;
padding: 2rem; padding: 2rem;
color: #666; color: var(--text-secondary);
} }
/* Modal */ /* Modal */
@@ -869,30 +872,30 @@
} }
.modal-content { .modal-content {
background: white; background: var(--bg-card);
padding: 2rem; padding: 2rem;
border-radius: 8px; border-radius: var(--border-radius-lg);
max-width: 500px; max-width: 500px;
width: 90%; width: 90%;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: var(--shadow-md);
} }
.modal-content h2 { .modal-content h2 {
margin-top: 0; margin-top: 0;
color: #333; color: var(--text-primary);
} }
.modal-content p { .modal-content p {
color: #666; color: var(--text-secondary);
line-height: 1.5; line-height: 1.5;
} }
.modal-content .warning { .modal-content .warning {
background-color: #fff3cd; background-color: var(--badge-pending-bg);
border-left: 4px solid #ffc107; border-left: 4px solid var(--color-warning);
padding: 1rem; padding: 1rem;
margin: 1rem 0; margin: 1rem 0;
color: #856404; color: var(--badge-pending-text);
} }
.modal-actions { .modal-actions {
@@ -905,36 +908,36 @@
.modal-button { .modal-button {
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
border: none; border: none;
border-radius: 4px; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
transition: all 0.2s; transition: all 0.2s;
} }
.modal-button.cancel { .modal-button.cancel {
background-color: #6c757d; background-color: var(--color-secondary);
color: white; color: white;
} }
.modal-button.cancel:hover { .modal-button.cancel:hover {
background-color: #5a6268; background-color: var(--color-secondary-hover);
} }
.modal-button.confirm { .modal-button.confirm {
background-color: #007bff; background-color: var(--color-primary);
color: white; color: white;
} }
.modal-button.confirm:hover { .modal-button.confirm:hover {
background-color: #0056b3; background-color: var(--color-primary-hover);
} }
.modal-button.delete-confirm { .modal-button.delete-confirm {
background-color: #dc3545; background-color: var(--color-error);
} }
.modal-button.delete-confirm:hover { .modal-button.delete-confirm:hover {
background-color: #c82333; background-color: var(--color-error-hover);
} }
.role-options { .role-options {
@@ -952,7 +955,7 @@
} }
.help-text { .help-text {
color: #666; color: var(--text-secondary);
font-style: italic; font-style: italic;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -962,16 +965,16 @@
} }
.awards-info { .awards-info {
background-color: #f9f9f9; background-color: var(--bg-secondary);
border-left: 4px solid #667eea; border-left: 4px solid #667eea;
padding: 1.5rem; padding: 1.5rem;
border-radius: 4px; border-radius: var(--border-radius);
} }
.awards-info h3 { .awards-info h3 {
margin-top: 0; margin-top: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
color: #333; color: var(--text-primary);
} }
.awards-info p { .awards-info p {
@@ -988,7 +991,7 @@
} }
.awards-info code { .awards-info code {
background-color: #e0e0e0; background-color: var(--border-color);
padding: 0.2rem 0.4rem; padding: 0.2rem 0.4rem;
border-radius: 3px; border-radius: 3px;
font-family: monospace; font-family: monospace;

53
src/frontend/src/routes/admin/awards/+page.svelte
View File

@@ -176,15 +176,15 @@
text-align: center; text-align: center;
padding: 3rem; padding: 3rem;
font-size: 1.2rem; font-size: 1.2rem;
color: #666; color: var(--text-secondary);
} }
.error { .error {
background-color: #fee; background-color: var(--color-error-bg);
border: 1px solid #fcc; border: 1px solid var(--color-error);
padding: 1rem; padding: 1rem;
border-radius: 4px; border-radius: var(--border-radius);
color: #c00; color: var(--color-error);
margin: 2rem; margin: 2rem;
} }
@@ -199,7 +199,7 @@
.header h1 { .header h1 {
margin: 0; margin: 0;
color: #333; color: var(--text-primary);
} }
.filters { .filters {
@@ -212,9 +212,11 @@
.search-input, .search-input,
.category-filter { .category-filter {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: var(--border-radius);
font-size: 0.9rem; font-size: 0.9rem;
background: var(--bg-input);
color: var(--text-primary);
} }
.search-input { .search-input {
@@ -229,7 +231,7 @@
.btn { .btn {
padding: 0.6rem 1.2rem; padding: 0.6rem 1.2rem;
border: none; border: none;
border-radius: 4px; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
text-decoration: none; text-decoration: none;
@@ -238,19 +240,19 @@
} }
.btn-primary { .btn-primary {
background-color: #667eea; background-color: var(--color-primary);
color: white; color: var(--text-inverted);
} }
.btn-primary:hover { .btn-primary:hover {
background-color: #5568d3; background-color: var(--color-primary-hover);
} }
.awards-table-container { .awards-table-container {
overflow-x: auto; overflow-x: auto;
background: white; background: var(--bg-card);
border-radius: 8px; border-radius: var(--border-radius-lg);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-sm);
} }
.awards-table { .awards-table {
@@ -262,24 +264,25 @@
.awards-table td { .awards-table td {
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
text-align: left; text-align: left;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid var(--border-color);
color: var(--text-primary);
} }
.awards-table th { .awards-table th {
background-color: #f5f5f5; background-color: var(--bg-hover);
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
font-size: 0.8rem; font-size: 0.8rem;
color: #666; color: var(--text-secondary);
} }
.awards-table tr:hover { .awards-table tr:hover {
background-color: #f9f9f9; background-color: var(--bg-secondary);
} }
.id-cell { .id-cell {
font-family: monospace; font-family: monospace;
color: #666; color: var(--text-secondary);
font-size: 0.9rem; font-size: 0.9rem;
} }
@@ -289,7 +292,7 @@
} }
.name-cell small { .name-cell small {
color: #888; color: var(--text-muted);
font-size: 0.85rem; font-size: 0.85rem;
margin-top: 0.25rem; margin-top: 0.25rem;
} }
@@ -317,17 +320,17 @@
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
margin-right: 0.3rem; margin-right: 0.3rem;
border: none; border: none;
border-radius: 4px; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
font-size: 0.85rem; font-size: 0.85rem;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
transition: all 0.2s; transition: all 0.2s;
color: var(--text-inverted);
} }
.edit-btn { .edit-btn {
background-color: #3498db; background-color: #3498db;
color: white;
} }
.edit-btn:hover { .edit-btn:hover {
@@ -336,7 +339,6 @@
.view-btn { .view-btn {
background-color: #27ae60; background-color: #27ae60;
color: white;
} }
.view-btn:hover { .view-btn:hover {
@@ -345,7 +347,6 @@
.delete-btn { .delete-btn {
background-color: #e74c3c; background-color: #e74c3c;
color: white;
} }
.delete-btn:hover { .delete-btn:hover {
@@ -354,7 +355,7 @@
.count { .count {
margin-top: 1rem; margin-top: 1rem;
color: #666; color: var(--text-secondary);
font-style: italic; font-style: italic;
} }

94
src/frontend/src/routes/admin/awards/[id]/+page.svelte
View File

@@ -880,7 +880,7 @@
text-align: center; text-align: center;
padding: 3rem; padding: 3rem;
font-size: 1.2rem; font-size: 1.2rem;
color: #666; color: var(--text-secondary);
} }
.header { .header {
@@ -894,7 +894,7 @@
.header h1 { .header h1 {
margin: 0; margin: 0;
color: #333; color: var(--text-primary);
} }
.header-actions { .header-actions {
@@ -903,20 +903,20 @@
} }
.error, .validation-errors { .error, .validation-errors {
background-color: #fee; background-color: var(--color-error-bg);
border: 1px solid #fcc; border: 1px solid var(--color-error);
padding: 1rem; padding: 1rem;
border-radius: 4px; border-radius: var(--border-radius);
color: #c00; color: var(--color-error);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.validation-warnings { .validation-warnings {
background-color: #fff3cd; background-color: var(--color-warning-bg);
border: 1px solid #ffc107; border: 1px solid var(--color-warning);
padding: 1rem; padding: 1rem;
border-radius: 4px; border-radius: var(--border-radius);
color: #856404; color: var(--color-warning);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -934,7 +934,7 @@
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
border-bottom: 2px solid #ddd; border-bottom: 2px solid var(--border-color);
} }
.tab { .tab {
@@ -944,25 +944,25 @@
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 500;
color: #666; color: var(--text-secondary);
position: relative; position: relative;
top: 2px; top: 2px;
} }
.tab:hover { .tab:hover {
color: #333; color: var(--text-primary);
} }
.tab.active { .tab.active {
color: #667eea; color: var(--color-primary);
border-bottom: 2px solid #667eea; border-bottom: 2px solid var(--color-primary);
} }
.form-section { .form-section {
background: white; background: var(--bg-card);
padding: 2rem; padding: 2rem;
border-radius: 8px; border-radius: var(--border-radius-lg);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-sm);
} }
.form-group { .form-group {
@@ -973,7 +973,7 @@
display: block; display: block;
font-weight: 500; font-weight: 500;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
color: #333; color: var(--text-primary);
} }
.form-group input[type="text"], .form-group input[type="text"],
@@ -982,9 +982,11 @@
.form-group textarea { .form-group textarea {
width: 100%; width: 100%;
padding: 0.6rem; padding: 0.6rem;
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: var(--border-radius);
font-size: 1rem; font-size: 1rem;
background: var(--bg-input);
color: var(--text-primary);
} }
.form-group textarea { .form-group textarea {
@@ -995,17 +997,18 @@
.form-group small { .form-group small {
display: block; display: block;
margin-top: 0.25rem; margin-top: 0.25rem;
color: #888; color: var(--text-muted);
font-size: 0.85rem; font-size: 0.85rem;
} }
.btn { .btn {
padding: 0.6rem 1.2rem; padding: 0.6rem 1.2rem;
border: none; border: none;
border-radius: 4px; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
transition: all 0.2s; transition: all 0.2s;
color: var(--text-inverted);
} }
.btn:disabled { .btn:disabled {
@@ -1014,17 +1017,15 @@
} }
.btn-primary { .btn-primary {
background-color: #667eea; background-color: var(--color-primary);
color: white;
} }
.btn-primary:hover:not(:disabled) { .btn-primary:hover:not(:disabled) {
background-color: #5568d3; background-color: var(--color-primary-hover);
} }
.btn-secondary { .btn-secondary {
background-color: #6c757d; background-color: #6c757d;
color: white;
} }
.btn-secondary:hover { .btn-secondary:hover {
@@ -1032,13 +1033,13 @@
} }
.btn-remove { .btn-remove {
background-color: #e74c3c; background-color: var(--color-error);
color: white;
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
border: none; border: none;
border-radius: 4px; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
font-size: 0.85rem; font-size: 0.85rem;
color: var(--text-inverted);
} }
.btn-remove:hover { .btn-remove:hover {
@@ -1046,7 +1047,7 @@
} }
.help-text { .help-text {
color: #666; color: var(--text-secondary);
font-style: italic; font-style: italic;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -1059,10 +1060,10 @@
} }
.mode-group-item { .mode-group-item {
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: var(--border-radius);
padding: 1rem; padding: 1rem;
background: #f9f9f9; background: var(--bg-secondary);
} }
.mode-group-header { .mode-group-header {
@@ -1073,17 +1074,18 @@
} }
.mode-group-modes { .mode-group-modes {
color: #666; color: var(--text-secondary);
font-size: 0.9rem; font-size: 0.9rem;
} }
.add-mode-group { .add-mode-group {
border-top: 1px solid #ddd; border-top: 1px solid var(--border-color);
padding-top: 2rem; padding-top: 2rem;
} }
.add-mode-group h3 { .add-mode-group h3 {
margin-bottom: 1rem; margin-bottom: 1rem;
color: var(--text-primary);
} }
.mode-selector, .bands-selector { .mode-selector, .bands-selector {
@@ -1099,6 +1101,7 @@
gap: 0.5rem; gap: 0.5rem;
padding: 0.25rem; padding: 0.25rem;
cursor: pointer; cursor: pointer;
color: var(--text-primary);
} }
.mode-checkbox input, .band-checkbox input { .mode-checkbox input, .band-checkbox input {
@@ -1106,24 +1109,25 @@
} }
.rule-config { .rule-config {
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: var(--border-radius);
padding: 1.5rem; padding: 1.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
background: #f9f9f9; background: var(--bg-secondary);
} }
.rule-config h3 { .rule-config h3 {
margin-top: 0; margin-top: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
color: var(--text-primary);
} }
.info-box { .info-box {
background-color: #e3f2fd; background-color: var(--color-info-bg);
border-left: 4px solid #2196f3; border-left: 4px solid var(--color-info);
padding: 1rem; padding: 1rem;
margin-top: 1rem; margin-top: 1rem;
color: #0d47a1; color: var(--color-info);
} }
.stations-editor { .stations-editor {
@@ -1149,17 +1153,17 @@
.base-rule-config { .base-rule-config {
padding-left: 1rem; padding-left: 1rem;
border-left: 3px solid #ddd; border-left: 3px solid var(--border-color);
} }
.filters-section { .filters-section {
margin-top: 2rem; margin-top: 2rem;
padding-top: 2rem; padding-top: 2rem;
border-top: 1px solid #ddd; border-top: 1px solid var(--border-color);
} }
.empty-state { .empty-state {
color: #888; color: var(--text-muted);
font-style: italic; font-style: italic;
text-align: center; text-align: center;
padding: 1rem; padding: 1rem;

47
src/frontend/src/routes/admin/awards/components/FilterBuilder.svelte
View File

@@ -283,16 +283,16 @@
<style> <style>
.filter-builder { .filter-builder {
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: var(--border-radius);
padding: 1.5rem; padding: 1.5rem;
background: #fafafa; background: var(--bg-secondary);
} }
.no-filters { .no-filters {
text-align: center; text-align: center;
padding: 1rem; padding: 1rem;
color: #666; color: var(--text-secondary);
} }
.filter-group { .filter-group {
@@ -310,7 +310,7 @@
.filter-group-header h4 { .filter-group-header h4 {
margin: 0; margin: 0;
color: #333; color: var(--text-primary);
} }
.operator-selector { .operator-selector {
@@ -323,6 +323,7 @@
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
cursor: pointer; cursor: pointer;
color: var(--text-primary);
} }
.filter-list { .filter-list {
@@ -332,9 +333,9 @@
} }
.filter-item { .filter-item {
background: white; background: var(--bg-card);
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: var(--border-radius);
padding: 1rem; padding: 1rem;
} }
@@ -348,9 +349,11 @@
.single-filter select, .single-filter select,
.single-filter input { .single-filter input {
padding: 0.5rem; padding: 0.5rem;
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: var(--border-radius);
font-size: 0.9rem; font-size: 0.9rem;
background: var(--bg-input);
color: var(--text-primary);
} }
.field-select { .field-select {
@@ -372,7 +375,7 @@
} }
.nested-filter-group { .nested-filter-group {
border-left: 3px solid #667eea; border-left: 3px solid var(--color-primary);
padding-left: 1rem; padding-left: 1rem;
} }
@@ -385,7 +388,7 @@
.group-label { .group-label {
font-weight: 500; font-weight: 500;
color: #667eea; color: var(--color-primary);
} }
.multi-select { .multi-select {
@@ -399,10 +402,11 @@
align-items: center; align-items: center;
gap: 0.25rem; gap: 0.25rem;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
background: #f5f5f5; background: var(--bg-hover);
border-radius: 4px; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
font-size: 0.85rem; font-size: 0.85rem;
color: var(--text-primary);
} }
.checkbox-option input { .checkbox-option input {
@@ -410,11 +414,11 @@
} }
.btn-remove { .btn-remove {
background-color: #dc3545; background-color: var(--color-error);
color: white; color: var(--text-inverted);
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
border: none; border: none;
border-radius: 4px; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
font-size: 0.85rem; font-size: 0.85rem;
} }
@@ -429,21 +433,21 @@
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 1rem; margin-top: 1rem;
padding-top: 1rem; padding-top: 1rem;
border-top: 1px solid #ddd; border-top: 1px solid var(--border-color);
} }
.btn { .btn {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border: none; border: none;
border-radius: 4px; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
font-size: 0.9rem; font-size: 0.9rem;
color: var(--text-inverted);
} }
.btn-secondary { .btn-secondary {
background-color: #6c757d; background-color: #6c757d;
color: white;
} }
.btn-secondary:hover { .btn-secondary:hover {
@@ -451,8 +455,7 @@
} }
.btn-danger { .btn-danger {
background-color: #dc3545; background-color: var(--color-error);
color: white;
} }
.btn-danger:hover { .btn-danger:hover {

111
src/frontend/src/routes/admin/awards/components/TestAwardModal.svelte
View File

@@ -525,15 +525,15 @@
} }
.modal-content { .modal-content {
background: white; background: var(--bg-card);
border-radius: 8px; border-radius: var(--border-radius-lg);
max-width: 800px; max-width: 800px;
width: 100%; width: 100%;
max-height: 90vh; max-height: 90vh;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: var(--shadow-md);
} }
.modal-content.large { .modal-content.large {
@@ -545,12 +545,12 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1.5rem; padding: 1.5rem;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid var(--border-color);
} }
.modal-header h2 { .modal-header h2 {
margin: 0; margin: 0;
color: #333; color: var(--text-primary);
} }
.close-btn { .close-btn {
@@ -558,7 +558,7 @@
border: none; border: none;
font-size: 1.5rem; font-size: 1.5rem;
cursor: pointer; cursor: pointer;
color: #888; color: var(--text-muted);
padding: 0; padding: 0;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
@@ -568,7 +568,7 @@
} }
.close-btn:hover { .close-btn:hover {
color: #333; color: var(--text-primary);
} }
.modal-body { .modal-body {
@@ -583,38 +583,39 @@
.validation-section h3 { .validation-section h3 {
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
color: #333; color: var(--text-primary);
} }
.validation-block { .validation-block {
padding: 1rem; padding: 1rem;
border-radius: 4px; border-radius: var(--border-radius);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.validation-block h4 { .validation-block h4 {
margin: 0 0 0.75rem 0; margin: 0 0 0.75rem 0;
font-size: 1rem; font-size: 1rem;
color: var(--text-primary);
} }
.validation-block.errors { .validation-block.errors {
background-color: #fee; background-color: var(--color-error-bg);
border-left: 4px solid #dc3545; border-left: 4px solid var(--color-error);
} }
.validation-block.warnings { .validation-block.warnings {
background-color: #fff3cd; background-color: var(--color-warning-bg);
border-left: 4px solid #ffc107; border-left: 4px solid var(--color-warning);
} }
.validation-block.info { .validation-block.info {
background-color: #e3f2fd; background-color: var(--color-info-bg);
border-left: 4px solid #2196f3; border-left: 4px solid var(--color-info);
} }
.validation-block.success { .validation-block.success {
background-color: #d4edda; background-color: var(--color-success-bg);
border-left: 4px solid #28a745; border-left: 4px solid var(--color-success);
} }
.validation-block ul { .validation-block ul {
@@ -624,32 +625,33 @@
.validation-block li { .validation-block li {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
color: var(--text-primary);
} }
.severity-error { .severity-error {
color: #dc3545; color: var(--color-error);
} }
.severity-warning { .severity-warning {
color: #856404; color: var(--color-warning);
} }
.severity-info { .severity-info {
color: #0d47a1; color: var(--color-info);
} }
.test-config { .test-config {
border-top: 1px solid #e0e0e0; border-top: 1px solid var(--border-color);
padding-top: 1.5rem; padding-top: 1.5rem;
} }
.test-config h3 { .test-config h3 {
margin: 0 0 0.5rem 0; margin: 0 0 0.5rem 0;
color: #333; color: var(--text-primary);
} }
.help-text { .help-text {
color: #666; color: var(--text-secondary);
font-size: 0.9rem; font-size: 0.9rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -663,33 +665,37 @@
.user-selector label { .user-selector label {
font-weight: 500; font-weight: 500;
color: var(--text-primary);
} }
.user-selector select { .user-selector select {
flex: 1; flex: 1;
padding: 0.5rem; padding: 0.5rem;
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: var(--border-radius);
background: var(--bg-input);
color: var(--text-primary);
} }
.test-results { .test-results {
margin-top: 1.5rem; margin-top: 1.5rem;
padding: 1rem; padding: 1rem;
border-radius: 4px; border-radius: var(--border-radius);
} }
.test-results.error { .test-results.error {
background-color: #fee; background-color: var(--color-error-bg);
border-left: 4px solid #dc3545; border-left: 4px solid var(--color-error);
} }
.test-results.success { .test-results.success {
background-color: #f9f9f9; background-color: var(--bg-secondary);
border: 1px solid #ddd; border: 1px solid var(--border-color);
} }
.test-results h4 { .test-results h4 {
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
color: var(--text-primary);
} }
.result-summary { .result-summary {
@@ -704,40 +710,40 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 0.75rem; padding: 0.75rem;
background: white; background: var(--bg-card);
border-radius: 4px; border-radius: var(--border-radius);
} }
.result-item .label { .result-item .label {
font-size: 0.8rem; font-size: 0.8rem;
color: #666; color: var(--text-secondary);
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.result-item .value { .result-item .value {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: bold; font-weight: bold;
color: #333; color: var(--text-primary);
} }
.result-item .value.confirmed { .result-item .value.confirmed {
color: #28a745; color: var(--color-success);
} }
.result-item .value.progress { .result-item .value.progress {
color: #667eea; color: var(--color-primary);
} }
.result-warnings { .result-warnings {
background-color: #fff3cd; background-color: var(--color-warning-bg);
padding: 0.75rem; padding: 0.75rem;
border-radius: 4px; border-radius: var(--border-radius);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.result-warnings h5 { .result-warnings h5 {
margin: 0 0 0.5rem 0; margin: 0 0 0.5rem 0;
color: #856404; color: var(--color-warning);
} }
.result-warnings ul { .result-warnings ul {
@@ -746,14 +752,14 @@
} }
.sample-entities { .sample-entities {
background-color: #e3f2fd; background-color: var(--color-info-bg);
padding: 0.75rem; padding: 0.75rem;
border-radius: 4px; border-radius: var(--border-radius);
} }
.sample-entities h5 { .sample-entities h5 {
margin: 0 0 0.5rem 0; margin: 0 0 0.5rem 0;
color: #0d47a1; color: var(--color-info);
} }
.entities-list { .entities-list {
@@ -763,24 +769,24 @@
} }
.entity-tag { .entity-tag {
background-color: white; background-color: var(--bg-card);
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
border-radius: 12px; border-radius: 12px;
font-size: 0.85rem; font-size: 0.85rem;
color: #0d47a1; color: var(--color-info);
} }
.no-matches { .no-matches {
background-color: #fff3cd; background-color: var(--color-warning-bg);
padding: 0.75rem; padding: 0.75rem;
border-radius: 4px; border-radius: var(--border-radius);
text-align: center; text-align: center;
color: #856404; color: var(--color-warning);
} }
.modal-footer { .modal-footer {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
border-top: 1px solid #e0e0e0; border-top: 1px solid var(--border-color);
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
@@ -788,10 +794,11 @@
.btn { .btn {
padding: 0.6rem 1.2rem; padding: 0.6rem 1.2rem;
border: none; border: none;
border-radius: 4px; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
transition: all 0.2s; transition: all 0.2s;
color: var(--text-inverted);
} }
.btn:disabled { .btn:disabled {
@@ -800,17 +807,15 @@
} }
.btn-primary { .btn-primary {
background-color: #667eea; background-color: var(--color-primary);
color: white;
} }
.btn-primary:hover:not(:disabled) { .btn-primary:hover:not(:disabled) {
background-color: #5568d3; background-color: var(--color-primary-hover);
} }
.btn-secondary { .btn-secondary {
background-color: #6c757d; background-color: #6c757d;
color: white;
} }
.btn-secondary:hover { .btn-secondary:hover {

94
src/frontend/src/routes/admin/awards/create/+page.svelte
View File

@@ -906,7 +906,7 @@
text-align: center; text-align: center;
padding: 3rem; padding: 3rem;
font-size: 1.2rem; font-size: 1.2rem;
color: #666; color: var(--text-secondary);
} }
.header { .header {
@@ -920,7 +920,7 @@
.header h1 { .header h1 {
margin: 0; margin: 0;
color: #333; color: var(--text-primary);
} }
.header-actions { .header-actions {
@@ -929,20 +929,20 @@
} }
.error, .validation-errors { .error, .validation-errors {
background-color: #fee; background-color: var(--color-error-bg);
border: 1px solid #fcc; border: 1px solid var(--color-error);
padding: 1rem; padding: 1rem;
border-radius: 4px; border-radius: var(--border-radius);
color: #c00; color: var(--color-error);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.validation-warnings { .validation-warnings {
background-color: #fff3cd; background-color: var(--color-warning-bg);
border: 1px solid #ffc107; border: 1px solid var(--color-warning);
padding: 1rem; padding: 1rem;
border-radius: 4px; border-radius: var(--border-radius);
color: #856404; color: var(--color-warning);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -960,7 +960,7 @@
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
border-bottom: 2px solid #ddd; border-bottom: 2px solid var(--border-color);
} }
.tab { .tab {
@@ -970,25 +970,25 @@
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 500;
color: #666; color: var(--text-secondary);
position: relative; position: relative;
top: 2px; top: 2px;
} }
.tab:hover { .tab:hover {
color: #333; color: var(--text-primary);
} }
.tab.active { .tab.active {
color: #667eea; color: var(--color-primary);
border-bottom: 2px solid #667eea; border-bottom: 2px solid var(--color-primary);
} }
.form-section { .form-section {
background: white; background: var(--bg-card);
padding: 2rem; padding: 2rem;
border-radius: 8px; border-radius: var(--border-radius-lg);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-sm);
} }
.form-group { .form-group {
@@ -999,7 +999,7 @@
display: block; display: block;
font-weight: 500; font-weight: 500;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
color: #333; color: var(--text-primary);
} }
.form-group input[type="text"], .form-group input[type="text"],
@@ -1008,9 +1008,11 @@
.form-group textarea { .form-group textarea {
width: 100%; width: 100%;
padding: 0.6rem; padding: 0.6rem;
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: var(--border-radius);
font-size: 1rem; font-size: 1rem;
background: var(--bg-input);
color: var(--text-primary);
} }
.form-group textarea { .form-group textarea {
@@ -1021,17 +1023,18 @@
.form-group small { .form-group small {
display: block; display: block;
margin-top: 0.25rem; margin-top: 0.25rem;
color: #888; color: var(--text-muted);
font-size: 0.85rem; font-size: 0.85rem;
} }
.btn { .btn {
padding: 0.6rem 1.2rem; padding: 0.6rem 1.2rem;
border: none; border: none;
border-radius: 4px; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
transition: all 0.2s; transition: all 0.2s;
color: var(--text-inverted);
} }
.btn:disabled { .btn:disabled {
@@ -1040,17 +1043,15 @@
} }
.btn-primary { .btn-primary {
background-color: #667eea; background-color: var(--color-primary);
color: white;
} }
.btn-primary:hover:not(:disabled) { .btn-primary:hover:not(:disabled) {
background-color: #5568d3; background-color: var(--color-primary-hover);
} }
.btn-secondary { .btn-secondary {
background-color: #6c757d; background-color: #6c757d;
color: white;
} }
.btn-secondary:hover { .btn-secondary:hover {
@@ -1058,13 +1059,13 @@
} }
.btn-remove { .btn-remove {
background-color: #e74c3c; background-color: var(--color-error);
color: white;
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
border: none; border: none;
border-radius: 4px; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
font-size: 0.85rem; font-size: 0.85rem;
color: var(--text-inverted);
} }
.btn-remove:hover { .btn-remove:hover {
@@ -1072,7 +1073,7 @@
} }
.help-text { .help-text {
color: #666; color: var(--text-secondary);
font-style: italic; font-style: italic;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -1085,10 +1086,10 @@
} }
.mode-group-item { .mode-group-item {
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: var(--border-radius);
padding: 1rem; padding: 1rem;
background: #f9f9f9; background: var(--bg-secondary);
} }
.mode-group-header { .mode-group-header {
@@ -1099,17 +1100,18 @@
} }
.mode-group-modes { .mode-group-modes {
color: #666; color: var(--text-secondary);
font-size: 0.9rem; font-size: 0.9rem;
} }
.add-mode-group { .add-mode-group {
border-top: 1px solid #ddd; border-top: 1px solid var(--border-color);
padding-top: 2rem; padding-top: 2rem;
} }
.add-mode-group h3 { .add-mode-group h3 {
margin-bottom: 1rem; margin-bottom: 1rem;
color: var(--text-primary);
} }
.mode-selector, .bands-selector { .mode-selector, .bands-selector {
@@ -1125,6 +1127,7 @@
gap: 0.5rem; gap: 0.5rem;
padding: 0.25rem; padding: 0.25rem;
cursor: pointer; cursor: pointer;
color: var(--text-primary);
} }
.mode-checkbox input, .band-checkbox input { .mode-checkbox input, .band-checkbox input {
@@ -1132,24 +1135,25 @@
} }
.rule-config { .rule-config {
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: var(--border-radius);
padding: 1.5rem; padding: 1.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
background: #f9f9f9; background: var(--bg-secondary);
} }
.rule-config h3 { .rule-config h3 {
margin-top: 0; margin-top: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
color: var(--text-primary);
} }
.info-box { .info-box {
background-color: #e3f2fd; background-color: var(--color-info-bg);
border-left: 4px solid #2196f3; border-left: 4px solid var(--color-info);
padding: 1rem; padding: 1rem;
margin-top: 1rem; margin-top: 1rem;
color: #0d47a1; color: var(--color-info);
} }
.stations-editor { .stations-editor {
@@ -1175,17 +1179,17 @@
.base-rule-config { .base-rule-config {
padding-left: 1rem; padding-left: 1rem;
border-left: 3px solid #ddd; border-left: 3px solid var(--border-color);
} }
.filters-section { .filters-section {
margin-top: 2rem; margin-top: 2rem;
padding-top: 2rem; padding-top: 2rem;
border-top: 1px solid #ddd; border-top: 1px solid var(--border-color);
} }
.empty-state { .empty-state {
color: #888; color: var(--text-muted);
font-style: italic; font-style: italic;
text-align: center; text-align: center;
padding: 1rem; padding: 1rem;

65
src/frontend/src/routes/awards/+page.svelte
View File

@@ -180,13 +180,13 @@
h1 { h1 {
font-size: 2.5rem; font-size: 2.5rem;
color: #333; color: var(--text-primary);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.subtitle { .subtitle {
font-size: 1.25rem; font-size: 1.25rem;
color: #666; color: var(--text-secondary);
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@@ -205,28 +205,29 @@
.filter-group label { .filter-group label {
font-weight: 600; font-weight: 600;
color: #333; color: var(--text-primary);
font-size: 0.9rem; font-size: 0.9rem;
} }
.filter-group select { .filter-group select {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border: 1px solid #ccc; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: var(--border-radius);
background-color: white; background-color: var(--bg-input);
font-size: 0.9rem; font-size: 0.9rem;
cursor: pointer; cursor: pointer;
min-width: 150px; min-width: 150px;
color: var(--text-primary);
} }
.filter-group select:hover { .filter-group select:hover {
border-color: #4a90e2; border-color: var(--color-primary);
} }
.filter-group select:focus { .filter-group select:focus {
outline: none; outline: none;
border-color: #4a90e2; border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2); box-shadow: var(--focus-ring);
} }
.loading, .loading,
@@ -235,11 +236,11 @@
text-align: center; text-align: center;
padding: 3rem; padding: 3rem;
font-size: 1.1rem; font-size: 1.1rem;
color: #666; color: var(--text-secondary);
} }
.error { .error {
color: #d32f2f; color: var(--color-error);
} }
.awards-grid { .awards-grid {
@@ -249,11 +250,11 @@
} }
.award-card { .award-card {
background: white; background: var(--bg-card);
border: 1px solid #e0e0e0; border: 1px solid var(--border-color);
border-radius: 8px; border-radius: var(--border-radius-lg);
padding: 1.5rem; padding: 1.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-sm);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@@ -268,16 +269,16 @@
.award-header h2 { .award-header h2 {
font-size: 1.5rem; font-size: 1.5rem;
color: #333; color: var(--text-primary);
margin: 0; margin: 0;
flex: 1; flex: 1;
} }
.category { .category {
background-color: #4a90e2; background-color: var(--color-primary);
color: white; color: white;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
border-radius: 12px; border-radius: var(--border-radius-pill);
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
@@ -285,7 +286,7 @@
} }
.description { .description {
color: #666; color: var(--text-secondary);
margin-bottom: 1rem; margin-bottom: 1rem;
flex-grow: 1; flex-grow: 1;
} }
@@ -295,8 +296,8 @@
gap: 2rem; gap: 2rem;
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0.75rem; padding: 0.75rem;
background-color: #f8f9fa; background-color: var(--bg-secondary);
border-radius: 4px; border-radius: var(--border-radius);
} }
.info-item { .info-item {
@@ -307,14 +308,14 @@
.label { .label {
font-size: 0.75rem; font-size: 0.75rem;
color: #666; color: var(--text-secondary);
text-transform: uppercase; text-transform: uppercase;
font-weight: 600; font-weight: 600;
} }
.value { .value {
font-size: 1rem; font-size: 1rem;
color: #333; color: var(--text-primary);
font-weight: 500; font-weight: 500;
} }
@@ -325,15 +326,15 @@
.progress-bar { .progress-bar {
width: 100%; width: 100%;
height: 8px; height: 8px;
background-color: #e0e0e0; background-color: var(--border-color);
border-radius: 4px; border-radius: var(--border-radius);
overflow: hidden; overflow: hidden;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.progress-fill { .progress-fill {
height: 100%; height: 100%;
background: linear-gradient(90deg, #4a90e2 0%, #357abd 100%); background: var(--gradient-primary);
transition: width 0.3s ease; transition: width 0.3s ease;
} }
@@ -348,7 +349,7 @@
text-align: center; text-align: center;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
color: #4a90e2; color: var(--color-primary);
} }
.worked, .worked,
@@ -357,20 +358,20 @@
} }
.worked { .worked {
color: #666; color: var(--text-secondary);
} }
.confirmed { .confirmed {
color: #4a90e2; color: var(--color-primary);
} }
.btn { .btn {
display: inline-block; display: inline-block;
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
background-color: #4a90e2; background-color: var(--color-primary);
color: white; color: white;
text-decoration: none; text-decoration: none;
border-radius: 4px; border-radius: var(--border-radius);
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
transition: background-color 0.2s; transition: background-color 0.2s;
@@ -379,6 +380,6 @@
} }
.btn:hover { .btn:hover {
background-color: #357abd; background-color: var(--color-primary-hover);
} }
</style> </style>

208
src/frontend/src/routes/awards/[id]/+page.svelte
View File

@@ -916,43 +916,43 @@
text-align: center; text-align: center;
padding: 3rem; padding: 3rem;
font-size: 1.1rem; font-size: 1.1rem;
color: #666; color: var(--text-secondary);
} }
.error { .error {
color: #d32f2f; color: var(--color-error);
} }
.award-table { .award-table {
border: 1px solid #000; border: 1px solid var(--text-primary);
border-collapse: collapse; border-collapse: collapse;
} }
.award-table td { .award-table td {
border: 1px solid #000; border: 1px solid var(--text-primary);
padding: 0px 3px 0px 3px; padding: 0px 3px 0px 3px;
} }
.award-table tfoot { .award-table tfoot {
background-color: #f5f5f5; background-color: var(--bg-secondary);
border-top: 2px solid #333; border-top: 2px solid var(--text-primary);
} }
.sum-row td { .sum-row td {
border: 1px solid #000; border: 1px solid var(--text-primary);
padding: 8px 5px; padding: 8px 5px;
text-align: center; text-align: center;
background-color: #f5f5f5; background-color: var(--bg-secondary);
font-weight: 600; font-weight: 600;
} }
.sum-label { .sum-label {
text-align: left !important; text-align: left !important;
color: #333; color: var(--text-primary);
} }
.sum-cell { .sum-cell {
color: #4a90e2; color: var(--color-primary);
} }
.award-header { .award-header {
@@ -961,30 +961,30 @@
h1 { h1 {
font-size: 2.5rem; font-size: 2.5rem;
color: #333; color: var(--text-primary);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.description { .description {
font-size: 1.1rem; font-size: 1.1rem;
color: #666; color: var(--text-secondary);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.caption { .caption {
background-color: #f0f7ff; background-color: var(--color-primary-light);
border-left: 4px solid #4a90e2; border-left: 4px solid var(--color-primary);
padding: 1rem; padding: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
border-radius: 4px; border-radius: var(--border-radius);
font-size: 0.95rem; font-size: 0.95rem;
line-height: 1.6; line-height: 1.6;
color: #333; color: var(--text-primary);
} }
.back-link { .back-link {
display: inline-block; display: inline-block;
color: #4a90e2; color: var(--color-primary);
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
} }
@@ -1001,33 +1001,33 @@
} }
.summary-card { .summary-card {
background: white; background: var(--bg-card);
border: 1px solid #e0e0e0; border: 1px solid var(--border-color);
border-radius: 8px; border-radius: var(--border-radius-lg);
padding: 1rem; padding: 1rem;
text-align: center; text-align: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-sm);
} }
.summary-card.confirmed { .summary-card.confirmed {
border-color: #4a90e2; border-color: var(--color-primary);
background-color: #f0f7ff; background-color: var(--color-primary-light);
} }
.summary-card.worked { .summary-card.worked {
border-color: #66bb6a; border-color: var(--color-success-light);
background-color: #f5fff5; background-color: var(--color-success-bg);
} }
.summary-card.unworked { .summary-card.unworked {
border-color: #ffa726; border-color: var(--color-warning);
background-color: #fff8f0; background-color: var(--color-warning-bg);
} }
.summary-label { .summary-label {
display: block; display: block;
font-size: 0.875rem; font-size: 0.875rem;
color: #666; color: var(--text-secondary);
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
@@ -1035,7 +1035,7 @@
display: block; display: block;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 600; font-weight: 600;
color: #333; color: var(--text-primary);
} }
.entities-list { .entities-list {
@@ -1045,31 +1045,31 @@
} }
.entity-card { .entity-card {
background: white; background: var(--bg-card);
border: 1px solid #e0e0e0; border: 1px solid var(--border-color);
border-radius: 8px; border-radius: var(--border-radius-lg);
padding: 1rem; padding: 1rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-sm);
transition: all 0.2s; transition: all 0.2s;
} }
.entity-card:hover { .entity-card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); box-shadow: var(--shadow-md);
} }
.entity-card.confirmed { .entity-card.confirmed {
border-left: 4px solid #4a90e2; border-left: 4px solid var(--color-primary);
} }
.entity-card.worked { .entity-card.worked {
border-left: 4px solid #ffa726; border-left: 4px solid var(--color-warning);
} }
.entity-card.unworked { .entity-card.unworked {
border-left: 4px solid #bdbdbd; border-left: 4px solid var(--text-muted);
opacity: 0.7; opacity: 0.7;
} }
@@ -1080,14 +1080,14 @@
.entity-name { .entity-name {
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 600; font-weight: 600;
color: #333; color: var(--text-primary);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.entity-id { .entity-id {
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 400; font-weight: 400;
color: #999; color: var(--text-muted);
margin-left: 0.5rem; margin-left: 0.5rem;
} }
@@ -1112,7 +1112,7 @@
.band, .band,
.mode, .mode,
.date { .date {
color: #666; color: var(--text-secondary);
} }
.entity-status { .entity-status {
@@ -1128,33 +1128,33 @@
} }
.status-badge.confirmed { .status-badge.confirmed {
background-color: #4a90e2; background-color: var(--color-primary);
color: white; color: white;
} }
.status-badge.worked { .status-badge.worked {
background-color: #ffa726; background-color: var(--color-warning);
color: white; color: white;
} }
.status-badge.unworked { .status-badge.unworked {
background-color: #e0e0e0; background-color: var(--border-color);
color: #666; color: var(--text-secondary);
} }
.btn { .btn {
display: inline-block; display: inline-block;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background-color: #4a90e2; background-color: var(--color-primary);
color: white; color: white;
text-decoration: none; text-decoration: none;
border-radius: 4px; border-radius: var(--border-radius);
font-weight: 500; font-weight: 500;
margin-top: 1rem; margin-top: 1rem;
} }
.btn:hover { .btn:hover {
background-color: #357abd; background-color: var(--color-primary-hover);
} }
/* QSO Detail Modal Styles */ /* QSO Detail Modal Styles */
@@ -1162,15 +1162,15 @@
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; transition: background-color 0.2s;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: 4px; border-radius: var(--border-radius);
} }
.qso-entry:hover { .qso-entry:hover {
background-color: #f0f7ff; background-color: var(--color-primary-light);
} }
.qso-entry:focus { .qso-entry:focus {
outline: 2px solid #4a90e2; outline: 2px solid var(--color-primary);
outline-offset: -2px; outline-offset: -2px;
} }
@@ -1191,13 +1191,13 @@
/* Modal Content */ /* Modal Content */
.modal-content { .modal-content {
background: white; background: var(--bg-card);
border-radius: 8px; border-radius: var(--border-radius-lg);
max-width: 700px; max-width: 700px;
width: 100%; width: 100%;
max-height: 90vh; max-height: 90vh;
overflow-y: auto; overflow-y: auto;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); box-shadow: var(--shadow-md);
} }
/* Modal Header */ /* Modal Header */
@@ -1206,13 +1206,13 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1.5rem; padding: 1.5rem;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid var(--border-color);
} }
.modal-header h2 { .modal-header h2 {
margin: 0; margin: 0;
font-size: 1.5rem; font-size: 1.5rem;
color: #333; color: var(--text-primary);
} }
.modal-close { .modal-close {
@@ -1227,14 +1227,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #666; color: var(--text-secondary);
border-radius: 4px; border-radius: var(--border-radius);
transition: all 0.2s; transition: all 0.2s;
} }
.modal-close:hover { .modal-close:hover {
background-color: #f0f0f0; background-color: var(--bg-tertiary);
color: #333; color: var(--text-primary);
} }
/* Modal Body */ /* Modal Body */
@@ -1246,7 +1246,7 @@
.loading-modal { .loading-modal {
text-align: center; text-align: center;
padding: 3rem; padding: 3rem;
color: #666; color: var(--text-secondary);
} }
/* Detail Sections */ /* Detail Sections */
@@ -1260,10 +1260,10 @@
.qso-detail-section h3 { .qso-detail-section h3 {
font-size: 1.1rem; font-size: 1.1rem;
color: #4a90e2; color: var(--color-primary);
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
border-bottom: 2px solid #e0e0e0; border-bottom: 2px solid var(--border-color);
} }
/* Detail Grid */ /* Detail Grid */
@@ -1281,14 +1281,14 @@
.detail-label { .detail-label {
font-size: 0.75rem; font-size: 0.75rem;
color: #666; color: var(--text-secondary);
text-transform: uppercase; text-transform: uppercase;
font-weight: 600; font-weight: 600;
} }
.detail-value { .detail-value {
font-size: 0.95rem; font-size: 0.95rem;
color: #333; color: var(--text-primary);
font-weight: 500; font-weight: 500;
} }
@@ -1301,10 +1301,10 @@
.confirmation-service h4 { .confirmation-service h4 {
font-size: 1rem; font-size: 1rem;
color: #333; color: var(--text-primary);
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid var(--border-color);
} }
.confirmation-status-item { .confirmation-status-item {
@@ -1324,19 +1324,19 @@
} }
.status-badge.confirmed { .status-badge.confirmed {
background-color: #4a90e2; background-color: var(--color-primary);
color: white; color: white;
} }
.status-badge.not-confirmed, .status-badge.not-confirmed,
.status-badge.no-data { .status-badge.no-data {
background-color: #e0e0e0; background-color: var(--border-color);
color: #666; color: var(--text-secondary);
} }
.status-badge.unknown { .status-badge.unknown {
background-color: #fff3cd; background-color: var(--badge-pending-bg);
color: #856404; color: var(--badge-pending-text);
} }
/* Meta Info */ /* Meta Info */
@@ -1344,18 +1344,18 @@
display: flex; display: flex;
gap: 2rem; gap: 2rem;
padding: 1rem; padding: 1rem;
background-color: #f8f9fa; background-color: var(--bg-secondary);
border-radius: 4px; border-radius: var(--border-radius);
font-size: 0.8rem; font-size: 0.8rem;
} }
.meta-label { .meta-label {
color: #666; color: var(--text-secondary);
font-weight: 600; font-weight: 600;
} }
.meta-value { .meta-value {
color: #333; color: var(--text-primary);
font-family: monospace; font-family: monospace;
} }
@@ -1365,16 +1365,16 @@
} }
.modal-content::-webkit-scrollbar-track { .modal-content::-webkit-scrollbar-track {
background: #f1f1f1; background: var(--bg-secondary);
} }
.modal-content::-webkit-scrollbar-thumb { .modal-content::-webkit-scrollbar-thumb {
background: #888; background: var(--text-muted);
border-radius: 4px; border-radius: 4px;
} }
.modal-content::-webkit-scrollbar-thumb:hover { .modal-content::-webkit-scrollbar-thumb:hover {
background: #555; background: var(--text-secondary);
} }
/* Mode Filter */ /* Mode Filter */
@@ -1384,44 +1384,44 @@
gap: 1rem; gap: 1rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
padding: 1rem; padding: 1rem;
background-color: #f8f9fa; background-color: var(--bg-secondary);
border-radius: 8px; border-radius: var(--border-radius-lg);
border: 1px solid #e0e0e0; border: 1px solid var(--border-color);
} }
.mode-filter label { .mode-filter label {
font-weight: 600; font-weight: 600;
color: #333; color: var(--text-primary);
margin: 0; margin: 0;
} }
.mode-filter select { .mode-filter select {
padding: 0.5rem 2rem 0.5rem 1rem; padding: 0.5rem 2rem 0.5rem 1rem;
border: 1px solid #ccc; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: var(--border-radius);
background-color: white; background-color: var(--bg-input);
font-size: 0.95rem; font-size: 0.95rem;
color: #333; color: var(--text-primary);
cursor: pointer; cursor: pointer;
min-width: 150px; min-width: 150px;
} }
.mode-filter select:hover { .mode-filter select:hover {
border-color: #4a90e2; border-color: var(--color-primary);
} }
.mode-filter select:focus { .mode-filter select:focus {
outline: none; outline: none;
border-color: #4a90e2; border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2); box-shadow: var(--focus-ring);
} }
.clear-filter-btn { .clear-filter-btn {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background-color: #e0e0e0; background-color: var(--border-color);
color: #333; color: var(--text-primary);
border: none; border: none;
border-radius: 4px; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
@@ -1429,32 +1429,32 @@
} }
.clear-filter-btn:hover { .clear-filter-btn:hover {
background-color: #d0d0d0; background-color: var(--border-color-light);
} }
/* QSO Count Link */ /* QSO Count Link */
.qso-count-link { .qso-count-link {
cursor: pointer; cursor: pointer;
color: #4a90e2; color: var(--color-primary);
font-weight: 500; font-weight: 500;
text-decoration: none; text-decoration: none;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: 4px; border-radius: var(--border-radius);
transition: background-color 0.2s; transition: background-color 0.2s;
} }
.qso-count-link:hover { .qso-count-link:hover {
background-color: #f0f7ff; background-color: var(--color-primary-light);
text-decoration: underline; text-decoration: underline;
} }
.qso-count-link:focus { .qso-count-link:focus {
outline: 2px solid #4a90e2; outline: 2px solid var(--color-primary);
outline-offset: -2px; outline-offset: -2px;
} }
.no-qso { .no-qso {
color: #999; color: var(--text-muted);
} }
/* QSO List Modal */ /* QSO List Modal */
@@ -1471,13 +1471,13 @@
.qso-list-table td { .qso-list-table td {
padding: 0.75rem; padding: 0.75rem;
text-align: left; text-align: left;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid var(--border-color);
} }
.qso-list-table th { .qso-list-table th {
background-color: #f8f9fa; background-color: var(--bg-secondary);
font-weight: 600; font-weight: 600;
color: #333; color: var(--text-primary);
font-size: 0.85rem; font-size: 0.85rem;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -1488,17 +1488,17 @@
} }
.qso-list-row:hover { .qso-list-row:hover {
background-color: #f0f7ff; background-color: var(--color-primary-light);
} }
.qso-list-row:focus { .qso-list-row:focus {
outline: 2px solid #4a90e2; outline: 2px solid var(--color-primary);
outline-offset: -2px; outline-offset: -2px;
} }
.callsign-cell { .callsign-cell {
font-family: monospace; font-family: monospace;
font-weight: 600; font-weight: 600;
color: #333; color: var(--text-primary);
} }
</style> </style>

200
src/frontend/src/routes/qsos/+page.svelte
View File

@@ -899,22 +899,22 @@
.header h1 { .header h1 {
margin: 0; margin: 0;
color: #333; color: var(--text-primary);
} }
.back-button { .back-button {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background-color: #6c757d; background-color: var(--color-secondary);
color: white; color: white;
text-decoration: none; text-decoration: none;
border-radius: 4px; border-radius: var(--border-radius);
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
.back-button:hover { .back-button:hover {
background-color: #5a6268; background-color: var(--color-secondary-hover);
} }
.header-buttons { .header-buttons {
@@ -924,16 +924,16 @@
} }
.filters { .filters {
background: #f8f9fa; background: var(--bg-secondary);
padding: 1rem; padding: 1rem;
border-radius: 8px; border-radius: var(--border-radius-lg);
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.filters h3 { .filters h3 {
margin: 0; margin: 0;
font-size: 1rem; font-size: 1rem;
color: #333; color: var(--text-primary);
} }
.filters-header { .filters-header {
@@ -947,11 +947,11 @@
.filter-count { .filter-count {
font-size: 0.875rem; font-size: 0.875rem;
color: #666; color: var(--text-secondary);
} }
.filter-count strong { .filter-count strong {
color: #4a90e2; color: var(--color-primary);
font-weight: 600; font-weight: 600;
} }
@@ -964,24 +964,28 @@
.filter-row select { .filter-row select {
padding: 0.5rem; padding: 0.5rem;
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: var(--border-radius);
font-size: 0.9rem; font-size: 0.9rem;
background: var(--bg-input);
color: var(--text-primary);
} }
.search-input { .search-input {
flex: 1; flex: 1;
min-width: 200px; min-width: 200px;
padding: 0.5rem; padding: 0.5rem;
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: var(--border-radius);
font-size: 0.9rem; font-size: 0.9rem;
background: var(--bg-input);
color: var(--text-primary);
} }
.search-input:focus { .search-input:focus {
outline: none; outline: none;
border-color: #4a90e2; border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2); box-shadow: var(--focus-ring);
} }
.checkbox-label { .checkbox-label {
@@ -994,7 +998,7 @@
.btn { .btn {
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
border: none; border: none;
border-radius: 4px; border-radius: var(--border-radius);
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
@@ -1002,12 +1006,12 @@
} }
.btn-primary { .btn-primary {
background-color: #4a90e2; background-color: var(--color-primary);
color: white; color: white;
} }
.btn-primary:hover:not(:disabled) { .btn-primary:hover:not(:disabled) {
background-color: #357abd; background-color: var(--color-primary-hover);
} }
.btn-primary:disabled { .btn-primary:disabled {
@@ -1016,21 +1020,21 @@
} }
.btn-secondary { .btn-secondary {
background-color: #6c757d; background-color: var(--color-secondary);
color: white; color: white;
} }
.btn-secondary:hover { .btn-secondary:hover {
background-color: #5a6268; background-color: var(--color-secondary-hover);
} }
.btn-danger { .btn-danger {
background-color: #dc3545; background-color: var(--color-error);
color: white; color: white;
} }
.btn-danger:hover:not(:disabled) { .btn-danger:hover:not(:disabled) {
background-color: #c82333; background-color: var(--color-error-hover);
} }
.btn-danger:disabled { .btn-danger:disabled {
@@ -1043,14 +1047,14 @@
font-size: 0.875rem; font-size: 0.875rem;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 4px; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
color: inherit; color: inherit;
} }
.alert { .alert {
padding: 1rem; padding: 1rem;
border-radius: 8px; border-radius: var(--border-radius-lg);
margin-bottom: 2rem; margin-bottom: 2rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -1058,21 +1062,21 @@
} }
.alert-success { .alert-success {
background-color: #d4edda; background-color: var(--color-success-bg);
border: 1px solid #c3e6cb; border: 1px solid var(--color-success);
color: #155724; color: var(--color-success);
} }
.alert-error { .alert-error {
background-color: #f8d7da; background-color: var(--color-error-bg);
border: 1px solid #f5c6cb; border: 1px solid var(--color-error);
color: #721c24; color: var(--color-error);
} }
.alert-info { .alert-info {
background-color: #d1ecf1; background-color: var(--color-info-bg);
border: 1px solid #bee5eb; border: 1px solid var(--color-info);
color: #0c5460; color: var(--color-info);
} }
.alert h3 { .alert h3 {
@@ -1090,11 +1094,13 @@
.delete-input { .delete-input {
padding: 0.5rem; padding: 0.5rem;
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: var(--border-radius);
font-size: 1rem; font-size: 1rem;
margin: 0.5rem 0; margin: 0.5rem 0;
width: 200px; width: 200px;
background: var(--bg-input);
color: var(--text-primary);
} }
.delete-buttons { .delete-buttons {
@@ -1105,8 +1111,8 @@
.qso-table-container { .qso-table-container {
overflow-x: auto; overflow-x: auto;
border: 1px solid #e0e0e0; border: 1px solid var(--border-color);
border-radius: 8px; border-radius: var(--border-radius-lg);
} }
.qso-table { .qso-table {
@@ -1118,39 +1124,39 @@
.qso-table td { .qso-table td {
padding: 0.75rem; padding: 0.75rem;
text-align: left; text-align: left;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid var(--border-color);
} }
.qso-table th { .qso-table th {
background-color: #f8f9fa; background-color: var(--bg-secondary);
font-weight: 600; font-weight: 600;
color: #333; color: var(--text-primary);
} }
.qso-table tr:hover { .qso-table tr:hover {
background-color: #f8f9fa; background-color: var(--bg-secondary);
} }
.callsign { .callsign {
font-weight: 600; font-weight: 600;
color: #4a90e2; color: var(--color-primary);
} }
.badge { .badge {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: 4px; border-radius: var(--border-radius);
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
} }
.badge-success { .badge-success {
background-color: #d4edda; background-color: var(--color-success-bg);
color: #155724; color: var(--color-success);
} }
.badge-pending { .badge-pending {
background-color: #fff3cd; background-color: var(--badge-pending-bg);
color: #856404; color: var(--badge-pending-text);
} }
.confirmation-list { .confirmation-list {
@@ -1168,29 +1174,29 @@
.service-type { .service-type {
font-size: 0.7rem; font-size: 0.7rem;
font-weight: 600; font-weight: 600;
color: #4a90e2; color: var(--color-primary);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
.confirmation-date { .confirmation-date {
font-size: 0.875rem; font-size: 0.875rem;
color: #333; color: var(--text-primary);
} }
.loading, .error, .empty { .loading, .error, .empty {
text-align: center; text-align: center;
padding: 3rem; padding: 3rem;
color: #666; color: var(--text-secondary);
} }
.error { .error {
color: #dc3545; color: var(--color-error);
} }
.showing { .showing {
text-align: center; text-align: center;
color: #666; color: var(--text-secondary);
font-size: 0.875rem; font-size: 0.875rem;
margin-top: 1rem; margin-top: 1rem;
} }
@@ -1201,14 +1207,14 @@
align-items: center; align-items: center;
margin-top: 1.5rem; margin-top: 1.5rem;
padding: 1rem; padding: 1rem;
background: #f8f9fa; background: var(--bg-secondary);
border-radius: 8px; border-radius: var(--border-radius-lg);
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: 1rem;
} }
.pagination-info { .pagination-info {
color: #666; color: var(--text-secondary);
font-size: 0.9rem; font-size: 0.9rem;
} }
@@ -1226,7 +1232,7 @@
.page-ellipsis { .page-ellipsis {
padding: 0 0.5rem; padding: 0 0.5rem;
color: #666; color: var(--text-secondary);
} }
.btn-small { .btn-small {
@@ -1241,16 +1247,16 @@
} }
.import-log { .import-log {
background: white; background: var(--bg-card);
border: 1px solid #e0e0e0; border: 1px solid var(--border-color);
border-radius: 8px; border-radius: var(--border-radius-lg);
padding: 1.5rem; padding: 1.5rem;
margin-top: 1rem; margin-top: 1rem;
} }
.import-log h3 { .import-log h3 {
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
color: #333; color: var(--text-primary);
font-size: 1.25rem; font-size: 1.25rem;
} }
@@ -1264,15 +1270,15 @@
.log-section h4 { .log-section h4 {
margin: 0 0 0.75rem 0; margin: 0 0 0.75rem 0;
color: #555; color: var(--text-secondary);
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
} }
.log-table-container { .log-table-container {
overflow-x: auto; overflow-x: auto;
border: 1px solid #e0e0e0; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: var(--border-radius);
} }
.log-table { .log-table {
@@ -1285,13 +1291,13 @@
.log-table td { .log-table td {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
text-align: left; text-align: left;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid var(--border-color);
} }
.log-table th { .log-table th {
background-color: #f8f9fa; background-color: var(--bg-secondary);
font-weight: 600; font-weight: 600;
color: #333; color: var(--text-primary);
font-size: 0.85rem; font-size: 0.85rem;
} }
@@ -1300,12 +1306,12 @@
} }
.log-table tr:hover { .log-table tr:hover {
background-color: #f8f9fa; background-color: var(--bg-secondary);
} }
.log-table .callsign { .log-table .callsign {
font-weight: 600; font-weight: 600;
color: #4a90e2; color: var(--color-primary);
} }
/* QSO Detail Modal Styles */ /* QSO Detail Modal Styles */
@@ -1315,11 +1321,11 @@
} }
.qso-row:hover { .qso-row:hover {
background-color: #f0f7ff !important; background-color: var(--color-primary-light) !important;
} }
.qso-row:focus { .qso-row:focus {
outline: 2px solid #4a90e2; outline: 2px solid var(--color-primary);
outline-offset: -2px; outline-offset: -2px;
} }
@@ -1340,13 +1346,13 @@
/* Modal Content */ /* Modal Content */
.modal-content { .modal-content {
background: white; background: var(--bg-card);
border-radius: 8px; border-radius: var(--border-radius-lg);
max-width: 700px; max-width: 700px;
width: 100%; width: 100%;
max-height: 90vh; max-height: 90vh;
overflow-y: auto; overflow-y: auto;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); box-shadow: var(--shadow-md);
} }
/* Modal Header */ /* Modal Header */
@@ -1355,13 +1361,13 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1.5rem; padding: 1.5rem;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid var(--border-color);
} }
.modal-header h2 { .modal-header h2 {
margin: 0; margin: 0;
font-size: 1.5rem; font-size: 1.5rem;
color: #333; color: var(--text-primary);
} }
.modal-close { .modal-close {
@@ -1376,14 +1382,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #666; color: var(--text-secondary);
border-radius: 4px; border-radius: var(--border-radius);
transition: all 0.2s; transition: all 0.2s;
} }
.modal-close:hover { .modal-close:hover {
background-color: #f0f0f0; background-color: var(--bg-tertiary);
color: #333; color: var(--text-primary);
} }
/* Modal Body */ /* Modal Body */
@@ -1402,10 +1408,10 @@
.qso-detail-section h3 { .qso-detail-section h3 {
font-size: 1.1rem; font-size: 1.1rem;
color: #4a90e2; color: var(--color-primary);
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
border-bottom: 2px solid #e0e0e0; border-bottom: 2px solid var(--border-color);
} }
/* Detail Grid */ /* Detail Grid */
@@ -1423,14 +1429,14 @@
.detail-label { .detail-label {
font-size: 0.75rem; font-size: 0.75rem;
color: #666; color: var(--text-secondary);
text-transform: uppercase; text-transform: uppercase;
font-weight: 600; font-weight: 600;
} }
.detail-value { .detail-value {
font-size: 0.95rem; font-size: 0.95rem;
color: #333; color: var(--text-primary);
font-weight: 500; font-weight: 500;
} }
@@ -1443,10 +1449,10 @@
.confirmation-service h4 { .confirmation-service h4 {
font-size: 1rem; font-size: 1rem;
color: #333; color: var(--text-primary);
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid var(--border-color);
} }
.confirmation-status-item { .confirmation-status-item {
@@ -1466,19 +1472,19 @@
} }
.status-badge.confirmed { .status-badge.confirmed {
background-color: #4a90e2; background-color: var(--color-primary);
color: white; color: white;
} }
.status-badge.not-confirmed, .status-badge.not-confirmed,
.status-badge.no-data { .status-badge.no-data {
background-color: #e0e0e0; background-color: var(--border-color);
color: #666; color: var(--text-secondary);
} }
.status-badge.unknown { .status-badge.unknown {
background-color: #fff3cd; background-color: var(--badge-pending-bg);
color: #856404; color: var(--badge-pending-text);
} }
/* Meta Info */ /* Meta Info */
@@ -1486,18 +1492,18 @@
display: flex; display: flex;
gap: 2rem; gap: 2rem;
padding: 1rem; padding: 1rem;
background-color: #f8f9fa; background-color: var(--bg-secondary);
border-radius: 4px; border-radius: var(--border-radius);
font-size: 0.8rem; font-size: 0.8rem;
} }
.meta-label { .meta-label {
color: #666; color: var(--text-secondary);
font-weight: 600; font-weight: 600;
} }
.meta-value { .meta-value {
color: #333; color: var(--text-primary);
font-family: monospace; font-family: monospace;
} }
@@ -1507,15 +1513,15 @@
} }
.modal-content::-webkit-scrollbar-track { .modal-content::-webkit-scrollbar-track {
background: #f1f1f1; background: var(--bg-secondary);
} }
.modal-content::-webkit-scrollbar-thumb { .modal-content::-webkit-scrollbar-thumb {
background: #888; background: var(--text-muted);
border-radius: 4px; border-radius: 4px;
} }
.modal-content::-webkit-scrollbar-thumb:hover { .modal-content::-webkit-scrollbar-thumb:hover {
background: #555; background: var(--text-secondary);
} }
</style> </style>

10
src/frontend/src/routes/qsos/components/QSOStats.svelte
View File

@@ -32,9 +32,9 @@
} }
.stat-card { .stat-card {
background: white; background: var(--bg-card);
border: 1px solid #e0e0e0; border: 1px solid var(--border-color);
border-radius: 8px; border-radius: var(--border-radius-lg);
padding: 1.5rem; padding: 1.5rem;
text-align: center; text-align: center;
} }
@@ -42,11 +42,11 @@
.stat-value { .stat-value {
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
color: #4a90e2; color: var(--color-primary);
} }
.stat-label { .stat-label {
color: #666; color: var(--text-secondary);
margin-top: 0.5rem; margin-top: 0.5rem;
} }
</style> </style>

4
src/frontend/src/routes/qsos/components/SyncButton.svelte
View File

@@ -23,11 +23,11 @@
<style> <style>
.lotw-btn { .lotw-btn {
background-color: #4a90e2; background-color: var(--color-primary);
} }
.lotw-btn:hover:not(:disabled) { .lotw-btn:hover:not(:disabled) {
background-color: #357abd; background-color: var(--color-primary-hover);
} }
.dcl-btn { .dcl-btn {