lzw-723/loongyan
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 2 Releases Wiki Activity

统一前端样式

Browse Source
This commit is contained in:
lzw-723
2026-03-20 21:44:43 +08:00
parent 333db62330
commit 91262de77d
15 changed files with 496 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
web/src/lib/components/album/AlbumCard.svelte
View File

@@ -9,6 +9,9 @@
/** @type {AlbumCardProps} */ /** @type {AlbumCardProps} */
let { album } = $props(); let { album } = $props();
/**
* @param {string} dateString
*/
function formatDate(dateString) { function formatDate(dateString) {
return new Date(dateString).toLocaleDateString(); return new Date(dateString).toLocaleDateString();
} }
@@ -25,37 +28,37 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 2rem; padding: var(--space-xl);
background: #f9fafb; background: var(--color-bg-secondary);
border-radius: 12px; border-radius: var(--radius-lg);
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
transition: transition:
transform 0.2s, transform var(--transition-normal),
box-shadow 0.2s; box-shadow var(--transition-normal);
} }
.album-card:hover { .album-card:hover {
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-lg);
} }
.album-icon { .album-icon {
font-size: 4rem; font-size: var(--space-3xl);
margin-bottom: 1rem; margin-bottom: var(--space-md);
} }
.album-name { .album-name {
font-size: 1.125rem; font-size: var(--font-size-lg);
font-weight: 600; font-weight: var(--font-weight-semibold);
margin: 0 0 0.5rem 0; margin: 0 0 var(--space-sm) 0;
color: #1a1a1a; color: var(--color-text);
text-align: center; text-align: center;
} }
.album-date { .album-date {
font-size: 0.875rem; font-size: var(--font-size-sm);
color: #6b7280; color: var(--color-text-secondary);
margin: 0; margin: 0;
} }
</style> </style>

2
web/src/lib/components/album/AlbumList.svelte
View File

@@ -25,6 +25,6 @@
.album-grid { .album-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5rem; gap: var(--space-lg);
} }
</style> </style>

18
web/src/lib/components/layout/BackLink.svelte
View File

@@ -24,22 +24,22 @@
.back-link { .back-link {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--space-sm);
color: #3b82f6; color: var(--color-primary);
text-decoration: none; text-decoration: none;
font-size: 1rem; font-size: var(--font-size-base);
padding: 0.5rem 0.75rem; padding: var(--space-sm) var(--space-md);
background: rgba(59, 130, 246, 0.1); background: var(--color-primary-light);
border-radius: 6px; border-radius: var(--radius-md);
transition: all 0.2s; transition: all var(--transition-normal);
} }
.back-link:hover { .back-link:hover {
background: rgba(59, 130, 246, 0.2); background: var(--color-primary-lighter);
} }
.back-icon { .back-icon {
font-size: 1.25rem; font-size: var(--font-size-xl);
line-height: 1; line-height: 1;
} }

18
web/src/lib/components/layout/PageHeader.svelte
View File

@@ -29,9 +29,9 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
margin-bottom: 1rem; margin-bottom: var(--space-md);
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: var(--space-md);
flex-shrink: 0; flex-shrink: 0;
overflow: hidden; overflow: hidden;
} }
@@ -42,22 +42,22 @@
} }
.header-title { .header-title {
font-size: 2rem; font-size: var(--font-size-3xl);
font-weight: 700; font-weight: var(--font-weight-bold);
color: #1a1a1a; color: var(--color-text);
margin: 0 0 0.5rem 0; margin: 0 0 var(--space-sm) 0;
} }
.header-subtitle { .header-subtitle {
font-size: 1rem; font-size: var(--font-size-base);
color: #6b7280; color: var(--color-text-secondary);
margin: 0; margin: 0;
} }
.header-actions { .header-actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.75rem; gap: var(--space-sm);
flex-shrink: 0; flex-shrink: 0;
} }

38
web/src/lib/components/photo/PhotoCard.svelte
View File

@@ -60,19 +60,19 @@
.photo-wrapper { .photo-wrapper {
position: relative; position: relative;
aspect-ratio: 1; aspect-ratio: 1;
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); background: linear-gradient(135deg, var(--color-bg-tertiary) 0%, var(--color-border) 100%);
border-radius: 8px; border-radius: var(--radius-md);
overflow: hidden; overflow: hidden;
margin-bottom: 0.5rem; margin-bottom: var(--space-sm);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-sm);
} }
.photo-wrapper img { .photo-wrapper img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transition: transform 0.3s ease; transition: transform var(--transition-slow);
background: #e5e7eb; background: var(--color-border);
} }
.photo-card:hover .photo-wrapper img { .photo-card:hover .photo-wrapper img {
@@ -85,33 +85,33 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #6b7280; color: var(--color-text-secondary);
font-size: 0.875rem; font-size: var(--font-size-sm);
padding: 1rem; padding: var(--space-md);
text-align: center; text-align: center;
word-break: break-word; word-break: break-word;
} }
.video-indicator { .video-indicator {
position: absolute; position: absolute;
top: 0.5rem; top: var(--space-sm);
right: 0.5rem; right: var(--space-sm);
background: rgba(0, 0, 0, 0.75); background: var(--color-overlay-dark);
color: white; color: var(--color-text-inverse);
padding: 0.35rem 0.6rem; padding: 0.35rem var(--space-sm);
border-radius: 6px; border-radius: var(--radius-md);
font-size: 0.875rem; font-size: var(--font-size-sm);
z-index: 1; z-index: 1;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
} }
.photo-name { .photo-name {
font-size: 0.875rem; font-size: var(--font-size-sm);
color: #374151; color: var(--color-text);
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
padding: 0 0.25rem; padding: 0 var(--space-xs);
} }
</style> </style>

28
web/src/lib/components/photo/PhotoGrid.svelte
View File

@@ -71,24 +71,24 @@
} }
.photo-scroll-container::-webkit-scrollbar-track { .photo-scroll-container::-webkit-scrollbar-track {
background: #f1f1f1; background: var(--color-bg-tertiary);
border-radius: 4px; border-radius: var(--radius-sm);
} }
.photo-scroll-container::-webkit-scrollbar-thumb { .photo-scroll-container::-webkit-scrollbar-thumb {
background: #c1c1c1; background: var(--color-border);
border-radius: 4px; border-radius: var(--radius-sm);
} }
.photo-scroll-container::-webkit-scrollbar-thumb:hover { .photo-scroll-container::-webkit-scrollbar-thumb:hover {
background: #a1a1a1; background: var(--color-text-tertiary);
} }
.photo-grid { .photo-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1rem; gap: var(--space-md);
padding-bottom: 2rem; padding-bottom: var(--space-xl);
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@@ -100,20 +100,20 @@
.load-more-trigger, .load-more-trigger,
.loading-trigger { .loading-trigger {
text-align: center; text-align: center;
padding: 2rem; padding: var(--space-xl);
} }
.loading-more { .loading-more {
display: inline-block; display: inline-block;
color: #6b7280; color: var(--color-text-secondary);
font-size: 0.95rem; font-size: var(--font-size-base);
} }
.load-complete { .load-complete {
text-align: center; text-align: center;
padding: 2rem; padding: var(--space-xl);
color: #10b981; color: var(--color-success);
font-size: 0.875rem; font-size: var(--font-size-sm);
font-weight: 500; font-weight: var(--font-weight-medium);
} }
</style> </style>

40
web/src/lib/components/ui/Button.svelte
View File

@@ -30,10 +30,10 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: none; border: none;
border-radius: 8px; border-radius: var(--radius-md);
font-weight: 500; font-weight: var(--font-weight-medium);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all var(--transition-normal);
text-decoration: none; text-decoration: none;
} }
@@ -44,55 +44,55 @@
/* Variants */ /* Variants */
.btn-primary { .btn-primary {
background: #3b82f6; background: var(--color-primary);
color: white; color: var(--color-text-inverse);
} }
.btn-primary:hover:not(:disabled) { .btn-primary:hover:not(:disabled) {
background: #2563eb; background: var(--color-primary-hover);
transform: translateY(-1px); transform: translateY(-1px);
} }
.btn-secondary { .btn-secondary {
background: #f3f4f6; background: var(--color-bg-tertiary);
color: #374151; color: var(--color-text);
} }
.btn-secondary:hover:not(:disabled) { .btn-secondary:hover:not(:disabled) {
background: #e5e7eb; background: var(--color-border);
} }
.btn-ghost { .btn-ghost {
background: transparent; background: transparent;
color: #3b82f6; color: var(--color-primary);
} }
.btn-ghost:hover:not(:disabled) { .btn-ghost:hover:not(:disabled) {
background: rgba(59, 130, 246, 0.1); background: var(--color-primary-light);
} }
.btn-danger { .btn-danger {
background: #ef4444; background: var(--color-error);
color: white; color: var(--color-text-inverse);
} }
.btn-danger:hover:not(:disabled) { .btn-danger:hover:not(:disabled) {
background: #dc2626; background: var(--color-error-hover);
} }
/* Sizes */ /* Sizes */
.btn-small { .btn-small {
padding: 0.5rem 1rem; padding: var(--space-sm) var(--space-md);
font-size: 0.875rem; font-size: var(--font-size-sm);
} }
.btn-medium { .btn-medium {
padding: 0.625rem 1.25rem; padding: 0.625rem var(--space-lg);
font-size: 0.95rem; font-size: var(--font-size-base);
} }
.btn-large { .btn-large {
padding: 0.75rem 1.5rem; padding: var(--space-md) var(--space-xl);
font-size: 1rem; font-size: var(--font-size-lg);
} }
</style> </style>

18
web/src/lib/components/ui/Card.svelte
View File

@@ -25,18 +25,18 @@
.card { .card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #f9fafb; background: var(--color-bg-secondary);
border-radius: 12px; border-radius: var(--radius-lg);
overflow: hidden; overflow: hidden;
transition: all 0.2s; transition: all var(--transition-normal);
} }
.card-default { .card-default {
padding: 1.5rem; padding: var(--space-lg);
} }
.card-interactive { .card-interactive {
padding: 2rem; padding: var(--space-xl);
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
cursor: pointer; cursor: pointer;
@@ -44,13 +44,11 @@
.card-interactive:hover { .card-interactive:hover {
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-lg);
} }
.card-elevated { .card-elevated {
padding: 1.5rem; padding: var(--space-lg);
box-shadow: box-shadow: var(--shadow-md);
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
} }
</style> </style>

8
web/src/lib/components/ui/Container.svelte
View File

@@ -17,7 +17,7 @@
.container { .container {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: var(--space-xl);
min-height: calc(100vh - 4rem); min-height: calc(100vh - 4rem);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -26,14 +26,14 @@
} }
.container-default { .container-default {
max-width: 1200px; max-width: var(--container-max);
} }
.container-wide { .container-wide {
max-width: 1400px; max-width: var(--container-wide-max);
} }
.container-narrow { .container-narrow {
max-width: 800px; max-width: var(--container-narrow-max);
} }
</style> </style>

14
web/src/lib/components/ui/Empty.svelte
View File

@@ -26,23 +26,23 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 4rem 2rem; padding: var(--space-3xl) var(--space-xl);
text-align: center; text-align: center;
} }
.empty-icon { .empty-icon {
font-size: 4rem; font-size: var(--space-3xl);
margin-bottom: 1rem; margin-bottom: var(--space-md);
opacity: 0.5; opacity: 0.5;
} }
.empty-message { .empty-message {
color: #666; color: var(--color-text-secondary);
font-size: 1.125rem; font-size: var(--font-size-lg);
margin: 0 0 1.5rem 0; margin: 0 0 var(--space-lg) 0;
} }
.empty-action { .empty-action {
margin-top: 0.5rem; margin-top: var(--space-sm);
} }
</style> </style>

18
web/src/lib/components/ui/Loading.svelte
View File

@@ -22,21 +22,21 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 2rem; padding: var(--space-xl);
} }
.loading-small { .loading-small {
padding: 1rem; padding: var(--space-md);
} }
.loading-large { .loading-large {
padding: 4rem; padding: var(--space-3xl);
} }
.spinner { .spinner {
border: 3px solid rgba(0, 0, 0, 0.1); border: 3px solid var(--color-overlay-light);
border-top-color: #3b82f6; border-top-color: var(--color-primary);
border-radius: 50%; border-radius: var(--radius-full);
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
@@ -58,9 +58,9 @@
} }
.loading-message { .loading-message {
margin-top: 1rem; margin-top: var(--space-md);
color: #6b7280; color: var(--color-text-secondary);
font-size: 0.95rem; font-size: var(--font-size-base);
} }
@keyframes spin { @keyframes spin {

109
web/src/lib/styles/global.css Normal file
View File

@@ -0,0 +1,109 @@
/* Loongyan Photo Album - Global Styles */
@import './theme.css';
/* ========== Reset & Base ========== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-family: var(--font-family);
font-size: 16px;
line-height: var(--line-height-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: var(--color-bg);
color: var(--color-text);
min-height: 100vh;
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-primary-hover);
}
img,
video {
max-width: 100%;
height: auto;
display: block;
}
button {
font-family: inherit;
cursor: pointer;
}
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
}
/* ========== Utility Classes ========== */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ========== Scrollbar ========== */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--color-bg-secondary);
}
::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-text-tertiary);
}
/* ========== Focus Styles ========== */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
outline: none;
}
/* ========== Selection ========== */
::selection {
background: var(--color-primary-lighter);
color: var(--color-text);
}

155
web/src/lib/styles/theme.css Normal file
View File

@@ -0,0 +1,155 @@
/* Loongyan Photo Album - Theme Variables */
:root {
/* ========== Colors ========== */
/* Primary */
--color-primary: #3b82f6;
--color-primary-hover: #2563eb;
--color-primary-light: rgba(59, 130, 246, 0.1);
--color-primary-lighter: rgba(59, 130, 246, 0.2);
/* Secondary */
--color-secondary: #6b7280;
--color-secondary-hover: #4b5563;
/* Background */
--color-bg: #ffffff;
--color-bg-secondary: #f9fafb;
--color-bg-tertiary: #f3f4f6;
/* Text */
--color-text: #1a1a1a;
--color-text-secondary: #6b7280;
--color-text-tertiary: #9ca3af;
--color-text-inverse: #ffffff;
/* Border */
--color-border: #e5e7eb;
--color-border-light: #f3f4f6;
/* Status */
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
--color-error-hover: #dc2626;
/* Overlay */
--color-overlay: rgba(0, 0, 0, 0.5);
--color-overlay-light: rgba(0, 0, 0, 0.1);
--color-overlay-dark: rgba(0, 0, 0, 0.8);
/* ========== Spacing ========== */
--space-xs: 0.25rem; /* 4px */
--space-sm: 0.5rem; /* 8px */
--space-md: 1rem; /* 16px */
--space-lg: 1.5rem; /* 24px */
--space-xl: 2rem; /* 32px */
--space-2xl: 3rem; /* 48px */
--space-3xl: 4rem; /* 64px */
/* ========== Border Radius ========== */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
/* ========== Typography ========== */
--font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 2rem; /* 32px */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
/* ========== Shadows ========== */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
/* ========== Transitions ========== */
--transition-fast: 0.15s ease;
--transition-normal: 0.2s ease;
--transition-slow: 0.3s ease;
/* ========== Z-Index ========== */
--z-base: 0;
--z-dropdown: 10;
--z-sticky: 20;
--z-overlay: 100;
--z-modal: 1000;
--z-toast: 1100;
/* ========== Layout ========== */
--container-max: 1200px;
--container-wide-max: 1400px;
--container-narrow-max: 800px;
}
/* ========== Dark Mode ========== */
@media (prefers-color-scheme: dark) {
:root {
/* Background */
--color-bg: #111827;
--color-bg-secondary: #1f2937;
--color-bg-tertiary: #374151;
/* Text */
--color-text: #f9fafb;
--color-text-secondary: #d1d5db;
--color-text-tertiary: #9ca3af;
/* Border */
--color-border: #374151;
--color-border-light: #4b5563;
/* Primary adjustments */
--color-primary-light: rgba(59, 130, 246, 0.2);
--color-primary-lighter: rgba(59, 130, 246, 0.3);
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}
}
/* Manual dark mode class */
[data-theme='dark'] {
/* Background */
--color-bg: #111827;
--color-bg-secondary: #1f2937;
--color-bg-tertiary: #374151;
/* Text */
--color-text: #f9fafb;
--color-text-secondary: #d1d5db;
--color-text-tertiary: #9ca3af;
/* Border */
--color-border: #374151;
--color-border-light: #4b5563;
/* Primary adjustments */
--color-primary-light: rgba(59, 130, 246, 0.2);
--color-primary-lighter: rgba(59, 130, 246, 0.3);
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

1
web/src/routes/+layout.svelte
View File

@@ -3,6 +3,7 @@
import { locales, localizeHref } from '$lib/paraglide/runtime'; import { locales, localizeHref } from '$lib/paraglide/runtime';
import { resolve } from '$app/paths'; import { resolve } from '$app/paths';
import favicon from '$lib/assets/favicon.svg'; import favicon from '$lib/assets/favicon.svg';
import '$lib/styles/global.css';
let { children } = $props(); let { children } = $props();
</script> </script>

229
web/src/routes/photo/[id]/+page.svelte
View File

@@ -881,10 +881,10 @@
position: fixed; position: fixed;
inset: 0; inset: 0;
background: #000; background: #000;
color: white; color: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
z-index: 1000; z-index: var(--z-modal);
outline: none; outline: none;
overflow: hidden; overflow: hidden;
touch-action: pan-y; touch-action: pan-y;
@@ -900,15 +900,15 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
gap: 1rem; gap: var(--space-md);
} }
.loading-spinner { .loading-spinner {
width: 48px; width: 48px;
height: 48px; height: 48px;
border: 3px solid rgba(255, 255, 255, 0.3); border: 3px solid var(--color-overlay-light);
border-top-color: white; border-top-color: var(--color-text);
border-radius: 50%; border-radius: var(--radius-full);
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
@@ -925,8 +925,8 @@
} }
.loading p { .loading p {
color: #9ca3af; color: var(--color-text-tertiary);
font-size: 1rem; font-size: var(--font-size-base);
margin: 0; margin: 0;
} }
@@ -944,29 +944,29 @@
top: 80px; top: 80px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
background: rgba(239, 68, 68, 0.9); background: var(--color-error);
color: white; color: var(--color-text-inverse);
padding: 0.75rem 1.5rem; padding: var(--space-md) var(--space-lg);
border-radius: 8px; border-radius: var(--radius-md);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: var(--space-md);
z-index: 101; z-index: 101;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); box-shadow: var(--shadow-lg);
} }
.error-toast button { .error-toast button {
background: rgba(255, 255, 255, 0.2); background: var(--color-overlay-light);
border: none; border: none;
color: white; color: var(--color-text-inverse);
padding: 0.25rem 0.75rem; padding: var(--space-xs) var(--space-md);
border-radius: 4px; border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
font-size: 0.875rem; font-size: var(--font-size-sm);
} }
.error-toast button:hover { .error-toast button:hover {
background: rgba(255, 255, 255, 0.3); background: var(--color-overlay);
} }
.progress-indicator { .progress-indicator {
@@ -974,13 +974,13 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.8); background: var(--color-overlay-dark);
padding: 1rem 1.5rem; padding: var(--space-md) var(--space-lg);
border-radius: 12px; border-radius: var(--radius-lg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 0.75rem; gap: var(--space-md);
z-index: 102; z-index: 102;
min-width: 200px; min-width: 200px;
} }
@@ -988,22 +988,22 @@
.progress-bar { .progress-bar {
width: 100%; width: 100%;
height: 6px; height: 6px;
background: rgba(255, 255, 255, 0.2); background: var(--color-overlay-light);
border-radius: 3px; border-radius: var(--radius-sm);
overflow: hidden; overflow: hidden;
} }
.progress-fill { .progress-fill {
height: 100%; height: 100%;
background: linear-gradient(90deg, #3b82f6, #8b5cf6); background: linear-gradient(90deg, var(--color-primary), #8b5cf6);
transition: width 0.2s ease; transition: width var(--transition-normal);
border-radius: 3px; border-radius: var(--radius-sm);
} }
.progress-text { .progress-text {
color: white; color: var(--color-text-inverse);
font-size: 0.875rem; font-size: var(--font-size-sm);
font-weight: 600; font-weight: var(--font-weight-semibold);
} }
.quality-upgrade-btn { .quality-upgrade-btn {
@@ -1011,26 +1011,25 @@
bottom: 120px; bottom: 120px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
background: rgba(59, 130, 246, 0.9); background: var(--color-primary);
color: white; color: var(--color-text-inverse);
border: none; border: none;
padding: 0.625rem 1.25rem; padding: var(--space-sm) var(--space-lg);
border-radius: 8px; border-radius: var(--radius-md);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--space-sm);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all var(--transition-normal);
z-index: 101; z-index: 101;
font-size: 0.875rem; font-size: var(--font-size-sm);
font-weight: 500; font-weight: var(--font-weight-medium);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); box-shadow: var(--shadow-lg);
} }
.quality-upgrade-btn:hover { .quality-upgrade-btn:hover {
background: rgba(59, 130, 246, 1); background: var(--color-primary-hover);
transform: translateX(-50%) scale(1.05); transform: translateX(-50%) scale(1.05);
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
} }
.quality-upgrade-btn:active { .quality-upgrade-btn:active {
@@ -1045,8 +1044,8 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0.75rem 1rem; padding: var(--space-md) var(--space-md);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent); background: linear-gradient(to bottom, var(--color-overlay-dark), transparent);
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -1057,22 +1056,22 @@
.back-link { .back-link {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--space-sm);
color: white; color: var(--color-text-inverse);
text-decoration: none; text-decoration: none;
font-size: 0.95rem; font-size: var(--font-size-base);
padding: 0.5rem 0.75rem; padding: var(--space-sm) var(--space-md);
background: rgba(255, 255, 255, 0.1); background: var(--color-overlay-light);
border-radius: 6px; border-radius: var(--radius-md);
transition: background 0.2s; transition: background var(--transition-normal);
} }
.back-link:hover { .back-link:hover {
background: rgba(255, 255, 255, 0.2); background: var(--color-overlay);
} }
.back-icon { .back-icon {
font-size: 1.25rem; font-size: var(--font-size-xl);
line-height: 1; line-height: 1;
} }
@@ -1083,20 +1082,20 @@
} }
.photo-index { .photo-index {
color: #d1d5db; color: var(--color-text-secondary);
font-size: 0.875rem; font-size: var(--font-size-sm);
background: rgba(255, 255, 255, 0.1); background: var(--color-overlay-light);
padding: 0.35rem 0.75rem; padding: 0.35rem var(--space-md);
border-radius: 6px; border-radius: var(--radius-md);
} }
.quality-indicator { .quality-indicator {
color: #3b82f6; color: var(--color-primary);
font-size: 0.75rem; font-size: var(--font-size-xs);
background: rgba(59, 130, 246, 0.2); background: var(--color-primary-light);
padding: 0.25rem 0.625rem; padding: var(--space-xs) 0.625rem;
border-radius: 4px; border-radius: var(--radius-sm);
font-weight: 600; font-weight: var(--font-weight-semibold);
} }
.viewer-content { .viewer-content {
@@ -1122,7 +1121,7 @@
.image-wrapper video { .image-wrapper video {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
transition: opacity 0.3s ease; transition: opacity var(--transition-slow);
user-select: none; user-select: none;
-webkit-user-drag: none; -webkit-user-drag: none;
} }
@@ -1139,15 +1138,15 @@
.reset-zoom-btn { .reset-zoom-btn {
position: absolute; position: absolute;
top: 1rem; top: var(--space-md);
right: 1rem; right: var(--space-md);
background: rgba(0, 0, 0, 0.7); background: var(--color-overlay-dark);
color: white; color: var(--color-text-inverse);
border: none; border: none;
padding: 0.625rem; padding: var(--space-sm);
border-radius: 8px; border-radius: var(--radius-md);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all var(--transition-normal);
z-index: 20; z-index: 20;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -1155,7 +1154,7 @@
} }
.reset-zoom-btn:hover { .reset-zoom-btn:hover {
background: rgba(59, 130, 246, 0.9); background: var(--color-primary);
transform: scale(1.1); transform: scale(1.1);
} }
@@ -1167,13 +1166,13 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
background: rgba(255, 255, 255, 0.1); background: var(--color-overlay-light);
color: white; color: var(--color-text-inverse);
border: none; border: none;
padding: 0.75rem; padding: var(--space-md);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all var(--transition-normal);
border-radius: 50%; border-radius: var(--radius-full);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -1186,7 +1185,7 @@
} }
.nav-button:hover:not(:disabled) { .nav-button:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.25); background: var(--color-overlay);
transform: translateY(-50%) scale(1.1); transform: translateY(-50%) scale(1.1);
} }
@@ -1200,11 +1199,11 @@
} }
.nav-button.prev { .nav-button.prev {
left: 1rem; left: var(--space-md);
} }
.nav-button.next { .nav-button.next {
right: 1rem; right: var(--space-md);
} }
.zoom-controls { .zoom-controls {
@@ -1212,31 +1211,31 @@
bottom: 60px; bottom: 60px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8); background: var(--color-overlay-dark);
padding: 0.5rem 0.75rem; padding: var(--space-sm) var(--space-md);
border-radius: 12px; border-radius: var(--radius-lg);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--space-sm);
z-index: 101; z-index: 101;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-lg);
} }
.zoom-controls button { .zoom-controls button {
background: rgba(255, 255, 255, 0.1); background: var(--color-overlay-light);
color: white; color: var(--color-text-inverse);
border: none; border: none;
padding: 0.5rem; padding: var(--space-sm);
border-radius: 8px; border-radius: var(--radius-md);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all var(--transition-normal);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.zoom-controls button:hover:not(:disabled) { .zoom-controls button:hover:not(:disabled) {
background: rgba(59, 130, 246, 0.9); background: var(--color-primary);
transform: scale(1.1); transform: scale(1.1);
} }
@@ -1252,23 +1251,23 @@
.zoom-level { .zoom-level {
min-width: 50px; min-width: 50px;
text-align: center; text-align: center;
font-size: 0.875rem; font-size: var(--font-size-sm);
font-weight: 600; font-weight: var(--font-weight-semibold);
color: white; color: var(--color-text-inverse);
} }
.shortcut-hints { .shortcut-hints {
position: absolute; position: absolute;
bottom: 1rem; bottom: var(--space-md);
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
background: rgba(0, 0, 0, 0.6); background: var(--color-overlay-dark);
padding: 0.5rem 1rem; padding: var(--space-sm) var(--space-md);
border-radius: 8px; border-radius: var(--radius-md);
display: flex; display: flex;
gap: 1rem; gap: var(--space-md);
font-size: 0.75rem; font-size: var(--font-size-xs);
color: rgba(255, 255, 255, 0.7); color: var(--color-text-tertiary);
z-index: 10; z-index: 10;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
@@ -1276,7 +1275,7 @@
@media (max-width: 768px) { @media (max-width: 768px) {
.nav-button { .nav-button {
padding: 0.5rem; padding: var(--space-sm);
} }
.nav-button svg { .nav-button svg {
@@ -1285,11 +1284,11 @@
} }
.nav-button.prev { .nav-button.prev {
left: 0.5rem; left: var(--space-sm);
} }
.nav-button.next { .nav-button.next {
right: 0.5rem; right: var(--space-sm);
} }
.shortcut-hints { .shortcut-hints {
@@ -1302,8 +1301,8 @@
} }
.photo-info { .photo-info {
padding: 1rem; padding: var(--space-md);
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent); background: linear-gradient(to top, var(--color-overlay-dark), transparent);
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@@ -1317,21 +1316,21 @@
} }
.photo-info h2 { .photo-info h2 {
font-size: 1rem; font-size: var(--font-size-base);
font-weight: 600; font-weight: var(--font-weight-semibold);
margin: 0 0 0.5rem 0; margin: 0 0 var(--space-sm) 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
color: white; color: var(--color-text-inverse);
} }
.photo-info .meta { .photo-info .meta {
font-size: 0.8rem; font-size: var(--font-size-xs);
color: #9ca3af; color: var(--color-text-tertiary);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.75rem; gap: var(--space-md);
} }
.photo-info .meta span { .photo-info .meta span {