mirror of
https://github.com/SamyRai/tercul-frontend.git
synced 2025-12-27 04:51:34 +00:00
0f2384b05b
Implements seasonal themes using CSS variables, a SeasonProvider, and a SeasonSelector component, storing user preferences in local storage. Replit-Commit-Author: Agent Replit-Commit-Session-Id: cbacfb18-842a-4116-a907-18c0105ad8ec Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/39b5c689-6e8a-4d5a-9792-69cc81a56534/5cf2d5fa-a53c-49bf-9d66-cc5f8c3a3659.jpg
437 lines
8.4 KiB
CSS
437 lines
8.4 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Source+Sans+Pro:wght@400;500;600&display=swap');
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/**
|
|
* Base Theme Definition
|
|
* These variables serve as shared values across all seasonal themes
|
|
*/
|
|
:root {
|
|
--radius: 0.5rem;
|
|
|
|
/* Default destructive/error colors that aren't seasonal */
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
|
|
/* Content width variables */
|
|
--content-width: min(90%, 1200px);
|
|
--reading-width: min(90%, 700px);
|
|
}
|
|
|
|
/**
|
|
* Spring Theme 🌱
|
|
* Fresh, vibrant green palette inspired by new growth
|
|
*/
|
|
.spring {
|
|
/* Main colors */
|
|
--background: 120 30% 96%;
|
|
--foreground: 120 15% 15%;
|
|
|
|
--muted: 120 20% 92%;
|
|
--muted-foreground: 120 10% 40%;
|
|
|
|
--popover: 120 30% 96%;
|
|
--popover-foreground: 120 15% 15%;
|
|
|
|
--card: 120 30% 97%;
|
|
--card-foreground: 120 15% 15%;
|
|
|
|
--border: 120 30% 85%;
|
|
--input: 120 30% 85%;
|
|
|
|
--primary: 142 50% 30%;
|
|
--primary-foreground: 120 54% 95%;
|
|
|
|
--secondary: 120 20% 92%;
|
|
--secondary-foreground: 120 15% 15%;
|
|
|
|
--accent: 142 76% 45%;
|
|
--accent-foreground: 120 54% 98%;
|
|
|
|
--ring: 142 50% 30%;
|
|
|
|
/* Legacy semantic colors for backward compatibility */
|
|
--cream: 120 30% 96%;
|
|
--navy: 142 50% 30%;
|
|
--russet: 22 80% 50%;
|
|
--sage: 142 40% 55%;
|
|
--ink: 120 15% 15%;
|
|
--paper: 120 20% 92%;
|
|
}
|
|
|
|
.spring.dark {
|
|
--background: 143 30% 12%;
|
|
--foreground: 120 15% 90%;
|
|
|
|
--muted: 143 25% 18%;
|
|
--muted-foreground: 120 10% 70%;
|
|
|
|
--popover: 143 30% 14%;
|
|
--popover-foreground: 120 15% 90%;
|
|
|
|
--card: 143 30% 14%;
|
|
--card-foreground: 120 15% 90%;
|
|
|
|
--border: 143 25% 25%;
|
|
--input: 143 25% 25%;
|
|
|
|
--primary: 142 75% 45%;
|
|
--primary-foreground: 120 54% 98%;
|
|
|
|
--secondary: 143 25% 20%;
|
|
--secondary-foreground: 120 15% 90%;
|
|
|
|
--accent: 142 75% 45%;
|
|
--accent-foreground: 120 54% 98%;
|
|
|
|
--ring: 142 75% 45%;
|
|
|
|
/* Legacy semantic colors for backward compatibility */
|
|
--cream: 120 15% 90%;
|
|
--navy: 142 75% 45%;
|
|
--russet: 22 70% 55%;
|
|
--sage: 142 60% 45%;
|
|
--ink: 120 15% 90%;
|
|
--paper: 143 25% 18%;
|
|
}
|
|
|
|
/**
|
|
* Summer Theme ☀️
|
|
* Warm, sunny palette with amber and gold tones
|
|
*/
|
|
.summer {
|
|
/* Main colors */
|
|
--background: 48 30% 96%;
|
|
--foreground: 30 15% 15%;
|
|
|
|
--muted: 48 20% 92%;
|
|
--muted-foreground: 30 10% 40%;
|
|
|
|
--popover: 48 30% 96%;
|
|
--popover-foreground: 30 15% 15%;
|
|
|
|
--card: 48 30% 97%;
|
|
--card-foreground: 30 15% 15%;
|
|
|
|
--border: 48 30% 85%;
|
|
--input: 48 30% 85%;
|
|
|
|
--primary: 36 80% 40%;
|
|
--primary-foreground: 48 54% 98%;
|
|
|
|
--secondary: 48 20% 92%;
|
|
--secondary-foreground: 30 15% 15%;
|
|
|
|
--accent: 36 80% 50%;
|
|
--accent-foreground: 48 54% 98%;
|
|
|
|
--ring: 36 80% 40%;
|
|
|
|
/* Legacy semantic colors */
|
|
--cream: 48 30% 96%;
|
|
--navy: 36 80% 40%;
|
|
--russet: 16 80% 55%;
|
|
--sage: 54 60% 45%;
|
|
--ink: 30 15% 15%;
|
|
--paper: 48 20% 92%;
|
|
}
|
|
|
|
.summer.dark {
|
|
--background: 36 30% 12%;
|
|
--foreground: 48 15% 90%;
|
|
|
|
--muted: 36 25% 18%;
|
|
--muted-foreground: 30 10% 70%;
|
|
|
|
--popover: 36 30% 14%;
|
|
--popover-foreground: 48 15% 90%;
|
|
|
|
--card: 36 30% 14%;
|
|
--card-foreground: 48 15% 90%;
|
|
|
|
--border: 36 25% 25%;
|
|
--input: 36 25% 25%;
|
|
|
|
--primary: 36 70% 55%;
|
|
--primary-foreground: 48 54% 98%;
|
|
|
|
--secondary: 36 25% 20%;
|
|
--secondary-foreground: 48 15% 90%;
|
|
|
|
--accent: 36 70% 55%;
|
|
--accent-foreground: 48 54% 98%;
|
|
|
|
--ring: 36 70% 55%;
|
|
|
|
/* Legacy semantic colors */
|
|
--cream: 48 15% 90%;
|
|
--navy: 36 70% 55%;
|
|
--russet: 16 70% 60%;
|
|
--sage: 54 50% 50%;
|
|
--ink: 48 15% 90%;
|
|
--paper: 36 25% 18%;
|
|
}
|
|
|
|
/**
|
|
* Autumn Theme 🍂
|
|
* Rich, earthy palette with warm reds and oranges
|
|
*/
|
|
.autumn {
|
|
/* Main colors */
|
|
--background: 24 30% 96%;
|
|
--foreground: 24 15% 15%;
|
|
|
|
--muted: 24 20% 92%;
|
|
--muted-foreground: 18 10% 40%;
|
|
|
|
--popover: 24 30% 96%;
|
|
--popover-foreground: 24 15% 15%;
|
|
|
|
--card: 24 30% 97%;
|
|
--card-foreground: 24 15% 15%;
|
|
|
|
--border: 24 30% 85%;
|
|
--input: 24 30% 85%;
|
|
|
|
--primary: 18 75% 35%;
|
|
--primary-foreground: 24 54% 98%;
|
|
|
|
--secondary: 24 20% 92%;
|
|
--secondary-foreground: 24 15% 15%;
|
|
|
|
--accent: 18 75% 45%;
|
|
--accent-foreground: 24 54% 98%;
|
|
|
|
--ring: 18 75% 35%;
|
|
|
|
/* Legacy semantic colors */
|
|
--cream: 24 30% 96%;
|
|
--navy: 18 75% 35%;
|
|
--russet: 12 80% 45%;
|
|
--sage: 36 60% 45%;
|
|
--ink: 24 15% 15%;
|
|
--paper: 24 20% 92%;
|
|
}
|
|
|
|
.autumn.dark {
|
|
--background: 18 30% 12%;
|
|
--foreground: 24 15% 90%;
|
|
|
|
--muted: 18 25% 18%;
|
|
--muted-foreground: 18 10% 70%;
|
|
|
|
--popover: 18 30% 14%;
|
|
--popover-foreground: 24 15% 90%;
|
|
|
|
--card: 18 30% 14%;
|
|
--card-foreground: 24 15% 90%;
|
|
|
|
--border: 18 25% 25%;
|
|
--input: 18 25% 25%;
|
|
|
|
--primary: 18 65% 50%;
|
|
--primary-foreground: 24 54% 98%;
|
|
|
|
--secondary: 18 25% 20%;
|
|
--secondary-foreground: 24 15% 90%;
|
|
|
|
--accent: 18 65% 50%;
|
|
--accent-foreground: 24 54% 98%;
|
|
|
|
--ring: 18 65% 50%;
|
|
|
|
/* Legacy semantic colors */
|
|
--cream: 24 15% 90%;
|
|
--navy: 18 65% 50%;
|
|
--russet: 12 70% 50%;
|
|
--sage: 36 50% 50%;
|
|
--ink: 24 15% 90%;
|
|
--paper: 18 25% 18%;
|
|
}
|
|
|
|
/**
|
|
* Winter Theme ❄️
|
|
* Cool, crisp palette with blues and silvers
|
|
*/
|
|
.winter {
|
|
/* Main colors */
|
|
--background: 210 30% 97%;
|
|
--foreground: 210 15% 15%;
|
|
|
|
--muted: 210 20% 93%;
|
|
--muted-foreground: 210 10% 40%;
|
|
|
|
--popover: 210 30% 97%;
|
|
--popover-foreground: 210 15% 15%;
|
|
|
|
--card: 210 30% 98%;
|
|
--card-foreground: 210 15% 15%;
|
|
|
|
--border: 210 30% 85%;
|
|
--input: 210 30% 85%;
|
|
|
|
--primary: 220 70% 35%;
|
|
--primary-foreground: 210 54% 98%;
|
|
|
|
--secondary: 210 20% 93%;
|
|
--secondary-foreground: 210 15% 15%;
|
|
|
|
--accent: 220 70% 45%;
|
|
--accent-foreground: 210 54% 98%;
|
|
|
|
--ring: 220 70% 35%;
|
|
|
|
/* Legacy semantic colors */
|
|
--cream: 210 30% 97%;
|
|
--navy: 220 70% 35%;
|
|
--russet: 0 60% 50%;
|
|
--sage: 200 60% 45%;
|
|
--ink: 210 15% 15%;
|
|
--paper: 210 20% 93%;
|
|
}
|
|
|
|
.winter.dark {
|
|
--background: 220 30% 12%;
|
|
--foreground: 210 15% 90%;
|
|
|
|
--muted: 220 25% 18%;
|
|
--muted-foreground: 210 10% 70%;
|
|
|
|
--popover: 220 30% 14%;
|
|
--popover-foreground: 210 15% 90%;
|
|
|
|
--card: 220 30% 14%;
|
|
--card-foreground: 210 15% 90%;
|
|
|
|
--border: 220 25% 25%;
|
|
--input: 220 25% 25%;
|
|
|
|
--primary: 220 60% 55%;
|
|
--primary-foreground: 210 54% 98%;
|
|
|
|
--secondary: 220 25% 20%;
|
|
--secondary-foreground: 210 15% 90%;
|
|
|
|
--accent: 220 60% 55%;
|
|
--accent-foreground: 210 54% 98%;
|
|
|
|
--ring: 220 60% 55%;
|
|
|
|
/* Legacy semantic colors */
|
|
--cream: 210 15% 90%;
|
|
--navy: 220 60% 55%;
|
|
--russet: 0 55% 55%;
|
|
--sage: 200 45% 50%;
|
|
--ink: 210 15% 90%;
|
|
--paper: 220 25% 18%;
|
|
}
|
|
|
|
/* Content width variables */
|
|
:root {
|
|
--content-width: min(90%, 1200px);
|
|
--reading-width: min(90%, 700px);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
@apply spring; /* Default to spring theme */
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground font-serif antialiased;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
@apply font-serif text-primary dark:text-primary-foreground;
|
|
}
|
|
|
|
p {
|
|
@apply text-foreground dark:text-foreground/90;
|
|
}
|
|
|
|
/* Line numbers for reading view */
|
|
.line-number {
|
|
@apply inline-block min-w-8 mr-2 text-right text-muted-foreground/70 dark:text-muted-foreground/60 select-none;
|
|
}
|
|
|
|
/* Text lines in reading view */
|
|
.text-line {
|
|
@apply flex py-1 rounded;
|
|
}
|
|
|
|
.text-line:hover {
|
|
@apply bg-primary/5 dark:bg-primary-foreground/5;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
@apply w-2 h-2;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-muted/50 dark:bg-muted/50;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-accent/80 rounded-full;
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
@apply bg-accent/70;
|
|
}
|
|
|
|
/* Font size utilities for reading view */
|
|
.text-size-sm {
|
|
font-size: 16px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.text-size-md {
|
|
font-size: 18px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.text-size-lg {
|
|
font-size: 20px;
|
|
line-height: 1.9;
|
|
}
|
|
|
|
.text-size-xl {
|
|
font-size: 22px;
|
|
line-height: 2;
|
|
}
|
|
|
|
/* Progress bar animation */
|
|
.progress-indicator {
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
/* Zen mode */
|
|
.zen-mode .navigation-header,
|
|
.zen-mode .site-footer,
|
|
.zen-mode .context-sidebar,
|
|
.zen-mode .progress-bar {
|
|
@apply hidden;
|
|
}
|
|
|
|
.zen-mode .reading-container {
|
|
@apply mx-auto p-8 max-w-full;
|
|
}
|
|
|
|
/* Animation for UI feedback */
|
|
.btn-feedback {
|
|
@apply transition-transform;
|
|
}
|
|
|
|
.btn-feedback:active {
|
|
@apply scale-95;
|
|
}
|
|
}
|