mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-22 04:06:43 +02:00
75a2527b60
- Rename entire quote project to zitare (German name) - Add global search page with quote and author search - Add search to navigation with Cmd/Ctrl+K shortcut - Add missing icons to PillNavigation (heart, list, compass) - Update all package names from @quote/* to @zitare/* - Update env variables from QUOTE_* to ZITARE_* - Update CLAUDE.md documentation - Fix layout with flex container structure 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
157 lines
4.2 KiB
CSS
157 lines
4.2 KiB
CSS
/* Base Styles & Theme Variables */
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
/* Default Colors - Can be overridden per app */
|
|
--color-primary: 102 126 234; /* #667eea */
|
|
--color-primary-dark: 118 75 162; /* #764ba2 */
|
|
--color-secondary: 236 72 153; /* #ec4899 */
|
|
|
|
/* Semantic Colors - Light Mode */
|
|
--color-background: 255 255 255;
|
|
--color-surface: 245 245 245;
|
|
--color-surface-elevated: 255 255 255;
|
|
|
|
--color-text-primary: 51 51 51;
|
|
--color-text-secondary: 102 102 102;
|
|
--color-text-tertiary: 153 153 153;
|
|
|
|
--color-border: 224 224 224;
|
|
--color-border-hover: 189 189 189;
|
|
|
|
/* Status Colors */
|
|
--color-success: 34 197 94;
|
|
--color-warning: 234 179 8;
|
|
--color-error: 239 68 68;
|
|
--color-info: 59 130 246;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
|
|
|
/* Spacing */
|
|
--spacing-xs: 0.25rem;
|
|
--spacing-sm: 0.5rem;
|
|
--spacing-md: 1rem;
|
|
--spacing-lg: 1.5rem;
|
|
--spacing-xl: 2rem;
|
|
--spacing-2xl: 3rem;
|
|
|
|
/* Border Radius */
|
|
--radius-sm: 0.25rem;
|
|
--radius-md: 0.5rem;
|
|
--radius-lg: 0.75rem;
|
|
--radius-xl: 1rem;
|
|
--radius-full: 9999px;
|
|
|
|
/* Transitions */
|
|
--transition-fast: 150ms ease;
|
|
--transition-base: 200ms ease;
|
|
--transition-slow: 300ms ease;
|
|
}
|
|
|
|
/* Dark Mode */
|
|
[data-theme="dark"] {
|
|
--color-background: 17 24 39; /* gray-900 */
|
|
--color-surface: 31 41 55; /* gray-800 */
|
|
--color-surface-elevated: 55 65 81; /* gray-700 */
|
|
|
|
--color-text-primary: 243 244 246; /* gray-100 */
|
|
--color-text-secondary: 209 213 219; /* gray-300 */
|
|
--color-text-tertiary: 156 163 175; /* gray-400 */
|
|
|
|
--color-border: 55 65 81; /* gray-700 */
|
|
--color-border-hover: 75 85 99; /* gray-600 */
|
|
|
|
/* Adjust shadows for dark mode */
|
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
|
|
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* Apply theme colors to base elements */
|
|
body {
|
|
background-color: rgb(var(--color-background));
|
|
color: rgb(var(--color-text-primary));
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
transition: background-color var(--transition-base), color var(--transition-base);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
/* Utility Classes */
|
|
@layer components {
|
|
/* Gradient backgrounds */
|
|
.gradient-primary {
|
|
background: linear-gradient(135deg, rgb(var(--color-primary)) 0%, rgb(var(--color-primary-dark)) 100%);
|
|
}
|
|
|
|
/* Glass effect */
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
[data-theme="dark"] .glass {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Card styles */
|
|
.card {
|
|
background-color: rgb(var(--color-surface-elevated));
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-lg);
|
|
border: 1px solid rgb(var(--color-border));
|
|
transition: transform var(--transition-base), box-shadow var(--transition-base);
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
/* Button styles */
|
|
.btn {
|
|
padding: var(--spacing-sm) var(--spacing-lg);
|
|
border-radius: var(--radius-md);
|
|
font-weight: 500;
|
|
transition: all var(--transition-base);
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: rgb(var(--color-primary));
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: rgb(var(--color-primary-dark));
|
|
}
|
|
|
|
/* Input styles */
|
|
.input {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border: 2px solid rgb(var(--color-border));
|
|
border-radius: var(--radius-md);
|
|
background-color: rgb(var(--color-background));
|
|
color: rgb(var(--color-text-primary));
|
|
transition: border-color var(--transition-fast);
|
|
}
|
|
|
|
.input:focus {
|
|
outline: none;
|
|
border-color: rgb(var(--color-primary));
|
|
}
|
|
}
|