arDTDev
a7296be512
- Implement ThemeContext with CSS variables for dynamic theming - Add theme presets: Cyberpunk, Windows Classic, Dark Modern, Matrix, Industrial, Otaku Mode, Pink Pink - Add theme selector UI in Footer with color preview - Theme persists to localStorage - Each theme has unique background effects, colors, and styling - Otaku Mode: anime-style dark purple with pink/purple glow and star effects - Pink Pink: cute pastel pink with heart pattern overlay 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
529 lines
13 KiB
CSS
529 lines
13 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* ========================================
|
|
CSS Variables for Theming
|
|
======================================== */
|
|
:root {
|
|
/* Default (Cyberpunk) theme */
|
|
--color-primary: #00f3ff;
|
|
--color-primary-rgb: 0, 243, 255;
|
|
--color-secondary: #bc13fe;
|
|
--color-secondary-rgb: 188, 19, 254;
|
|
--color-accent: #ff0099;
|
|
--color-success: #0aff00;
|
|
--color-error: #ff0055;
|
|
--color-warning: #ffe600;
|
|
--color-bg-primary: #020617;
|
|
--color-bg-secondary: #0f172a;
|
|
--color-bg-tertiary: #1e293b;
|
|
--color-text-primary: #f1f5f9;
|
|
--color-text-secondary: #94a3b8;
|
|
--color-border: rgba(0, 243, 255, 0.2);
|
|
--border-radius: 0px;
|
|
}
|
|
|
|
/* ========================================
|
|
Custom Scrollbar (Theme-aware)
|
|
======================================== */
|
|
::-webkit-scrollbar {
|
|
width: 4px;
|
|
height: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(var(--color-primary-rgb), 0.3);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(var(--color-primary-rgb), 0.6);
|
|
}
|
|
|
|
/* ========================================
|
|
Theme: Cyberpunk (Default)
|
|
======================================== */
|
|
[data-theme="cyberpunk"] .glass-holo,
|
|
.glass-holo {
|
|
background: linear-gradient(135deg, rgba(10, 15, 30, 0.7) 0%, rgba(20, 30, 50, 0.5) 100%);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(var(--color-primary-rgb), 0.1);
|
|
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
[data-theme="cyberpunk"] .glass-holo::before,
|
|
.glass-holo::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb), 0.5), transparent);
|
|
}
|
|
|
|
/* Active Element */
|
|
.glass-active {
|
|
background: rgba(var(--color-primary-rgb), 0.1);
|
|
border: 1px solid rgba(var(--color-primary-rgb), 0.4);
|
|
box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.2);
|
|
}
|
|
|
|
/* Text Glows */
|
|
.text-glow-blue {
|
|
color: var(--color-primary);
|
|
text-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.6);
|
|
}
|
|
|
|
.text-glow-purple {
|
|
color: var(--color-secondary);
|
|
text-shadow: 0 0 8px rgba(var(--color-secondary-rgb), 0.6);
|
|
}
|
|
|
|
.text-glow-red {
|
|
color: var(--color-error);
|
|
text-shadow: 0 0 8px rgba(255, 0, 85, 0.6);
|
|
}
|
|
|
|
.text-glow-green {
|
|
color: var(--color-success);
|
|
text-shadow: 0 0 8px rgba(10, 255, 0, 0.6);
|
|
}
|
|
|
|
/* Primary text glow (theme-aware) */
|
|
.text-glow-primary {
|
|
color: var(--color-primary);
|
|
text-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.6);
|
|
}
|
|
|
|
/* Grid Background */
|
|
.grid-bg {
|
|
background-size: 50px 50px;
|
|
background-image:
|
|
linear-gradient(to right, rgba(var(--color-primary-rgb), 0.05) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(var(--color-primary-rgb), 0.05) 1px, transparent 1px);
|
|
mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
|
|
}
|
|
|
|
/* CRT Scanline Effect */
|
|
.scanlines {
|
|
background: linear-gradient(to bottom,
|
|
rgba(255, 255, 255, 0),
|
|
rgba(255, 255, 255, 0) 50%,
|
|
rgba(0, 0, 0, 0.2) 50%,
|
|
rgba(0, 0, 0, 0.2));
|
|
background-size: 100% 4px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Tech Clip Path */
|
|
.clip-tech {
|
|
clip-path: polygon(0 0,
|
|
100% 0,
|
|
100% calc(100% - 10px),
|
|
calc(100% - 10px) 100%,
|
|
0 100%);
|
|
}
|
|
|
|
.clip-tech-inv {
|
|
clip-path: polygon(10px 0,
|
|
100% 0,
|
|
100% 100%,
|
|
0 100%,
|
|
0 10px);
|
|
}
|
|
|
|
/* ========================================
|
|
Theme: Windows Classic
|
|
======================================== */
|
|
[data-theme="windows-classic"] {
|
|
font-family: 'MS Sans Serif', 'Segoe UI', Tahoma, sans-serif !important;
|
|
}
|
|
|
|
[data-theme="windows-classic"] .glass-holo {
|
|
background: #c0c0c0;
|
|
backdrop-filter: none;
|
|
-webkit-backdrop-filter: none;
|
|
border: 2px outset #dfdfdf;
|
|
box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #ffffff;
|
|
border-radius: 0;
|
|
}
|
|
|
|
[data-theme="windows-classic"] .glass-holo::before {
|
|
display: none;
|
|
}
|
|
|
|
[data-theme="windows-classic"] .text-glow-blue,
|
|
[data-theme="windows-classic"] .text-glow-primary {
|
|
color: #000080;
|
|
text-shadow: none;
|
|
}
|
|
|
|
[data-theme="windows-classic"] .text-glow-green {
|
|
color: #008000;
|
|
text-shadow: none;
|
|
}
|
|
|
|
[data-theme="windows-classic"] .text-glow-red {
|
|
color: #ff0000;
|
|
text-shadow: none;
|
|
}
|
|
|
|
[data-theme="windows-classic"] .grid-bg,
|
|
[data-theme="windows-classic"] .scanlines {
|
|
display: none;
|
|
}
|
|
|
|
/* Windows Classic Button Style */
|
|
[data-theme="windows-classic"] .win-button {
|
|
background: #c0c0c0;
|
|
border: 2px outset #dfdfdf;
|
|
box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #ffffff;
|
|
padding: 4px 16px;
|
|
font-family: 'MS Sans Serif', Tahoma, sans-serif;
|
|
font-size: 11px;
|
|
}
|
|
|
|
[data-theme="windows-classic"] .win-button:active {
|
|
border: 2px inset #808080;
|
|
box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
|
|
}
|
|
|
|
/* Windows Classic Title Bar */
|
|
[data-theme="windows-classic"] .win-titlebar {
|
|
background: linear-gradient(to right, #000080, #1084d0);
|
|
color: white;
|
|
font-weight: bold;
|
|
padding: 2px 4px;
|
|
}
|
|
|
|
/* Windows Classic Input */
|
|
[data-theme="windows-classic"] input,
|
|
[data-theme="windows-classic"] select {
|
|
background: white;
|
|
border: 2px inset #808080;
|
|
padding: 2px 4px;
|
|
}
|
|
|
|
/* ========================================
|
|
Theme: Dark Modern
|
|
======================================== */
|
|
[data-theme="dark-modern"] .glass-holo {
|
|
background: rgba(24, 24, 27, 0.8);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(63, 63, 70, 0.5);
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
[data-theme="dark-modern"] .glass-holo::before {
|
|
display: none;
|
|
}
|
|
|
|
[data-theme="dark-modern"] .text-glow-blue,
|
|
[data-theme="dark-modern"] .text-glow-primary {
|
|
color: #3b82f6;
|
|
text-shadow: none;
|
|
}
|
|
|
|
[data-theme="dark-modern"] .text-glow-green {
|
|
color: #22c55e;
|
|
text-shadow: none;
|
|
}
|
|
|
|
[data-theme="dark-modern"] .text-glow-red {
|
|
color: #ef4444;
|
|
text-shadow: none;
|
|
}
|
|
|
|
[data-theme="dark-modern"] .grid-bg,
|
|
[data-theme="dark-modern"] .scanlines {
|
|
display: none;
|
|
}
|
|
|
|
[data-theme="dark-modern"] .clip-tech,
|
|
[data-theme="dark-modern"] .clip-tech-inv {
|
|
clip-path: none;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* ========================================
|
|
Theme: Matrix
|
|
======================================== */
|
|
[data-theme="matrix"] .glass-holo {
|
|
background: rgba(0, 0, 0, 0.9);
|
|
backdrop-filter: none;
|
|
border: 1px solid rgba(0, 255, 0, 0.3);
|
|
box-shadow: 0 0 20px rgba(0, 255, 0, 0.1), inset 0 0 20px rgba(0, 255, 0, 0.05);
|
|
}
|
|
|
|
[data-theme="matrix"] .glass-holo::before {
|
|
background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.5), transparent);
|
|
}
|
|
|
|
[data-theme="matrix"] .text-glow-blue,
|
|
[data-theme="matrix"] .text-glow-primary {
|
|
color: #00ff00;
|
|
text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
|
|
}
|
|
|
|
[data-theme="matrix"] .text-glow-green {
|
|
color: #00ff00;
|
|
text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
|
|
}
|
|
|
|
[data-theme="matrix"] .text-glow-red {
|
|
color: #ff0000;
|
|
text-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
|
|
}
|
|
|
|
[data-theme="matrix"] body {
|
|
background: #000000 !important;
|
|
}
|
|
|
|
[data-theme="matrix"] .grid-bg {
|
|
display: none;
|
|
}
|
|
|
|
/* Matrix rain effect - optional */
|
|
[data-theme="matrix"] .scanlines {
|
|
background: linear-gradient(to bottom,
|
|
rgba(0, 255, 0, 0),
|
|
rgba(0, 255, 0, 0) 50%,
|
|
rgba(0, 0, 0, 0.3) 50%,
|
|
rgba(0, 0, 0, 0.3));
|
|
background-size: 100% 3px;
|
|
}
|
|
|
|
/* ========================================
|
|
Theme: Industrial
|
|
======================================== */
|
|
[data-theme="industrial"] .glass-holo {
|
|
background: rgba(28, 25, 23, 0.95);
|
|
backdrop-filter: none;
|
|
border: 2px solid rgba(249, 115, 22, 0.3);
|
|
box-shadow: 0 0 15px rgba(249, 115, 22, 0.1);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
[data-theme="industrial"] .glass-holo::before {
|
|
background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.5), transparent);
|
|
}
|
|
|
|
[data-theme="industrial"] .text-glow-blue,
|
|
[data-theme="industrial"] .text-glow-primary {
|
|
color: #f97316;
|
|
text-shadow: 0 0 8px rgba(249, 115, 22, 0.6);
|
|
}
|
|
|
|
[data-theme="industrial"] .text-glow-green {
|
|
color: #16a34a;
|
|
text-shadow: 0 0 8px rgba(22, 163, 74, 0.6);
|
|
}
|
|
|
|
[data-theme="industrial"] .text-glow-red {
|
|
color: #dc2626;
|
|
text-shadow: 0 0 8px rgba(220, 38, 38, 0.6);
|
|
}
|
|
|
|
[data-theme="industrial"] .grid-bg,
|
|
[data-theme="industrial"] .scanlines {
|
|
display: none;
|
|
}
|
|
|
|
/* Industrial warning stripes */
|
|
[data-theme="industrial"] .industrial-stripe {
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
#f97316,
|
|
#f97316 10px,
|
|
#000000 10px,
|
|
#000000 20px
|
|
);
|
|
}
|
|
|
|
/* ========================================
|
|
Theme: Otaku Mode (애니메이션/오타쿠 스타일)
|
|
======================================== */
|
|
[data-theme="otaku"] .glass-holo {
|
|
background: linear-gradient(135deg, rgba(26, 16, 37, 0.85) 0%, rgba(45, 31, 61, 0.75) 100%);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 2px solid rgba(255, 107, 157, 0.3);
|
|
box-shadow:
|
|
0 0 30px rgba(255, 107, 157, 0.15),
|
|
0 0 60px rgba(192, 132, 252, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
[data-theme="otaku"] .glass-holo::before {
|
|
background: linear-gradient(90deg,
|
|
transparent,
|
|
rgba(255, 107, 157, 0.6),
|
|
rgba(192, 132, 252, 0.6),
|
|
transparent);
|
|
}
|
|
|
|
[data-theme="otaku"] .text-glow-blue,
|
|
[data-theme="otaku"] .text-glow-primary {
|
|
color: #ff6b9d;
|
|
text-shadow:
|
|
0 0 10px rgba(255, 107, 157, 0.8),
|
|
0 0 20px rgba(255, 107, 157, 0.4),
|
|
0 0 30px rgba(192, 132, 252, 0.3);
|
|
}
|
|
|
|
[data-theme="otaku"] .text-glow-green {
|
|
color: #4ade80;
|
|
text-shadow: 0 0 10px rgba(74, 222, 128, 0.6);
|
|
}
|
|
|
|
[data-theme="otaku"] .text-glow-red {
|
|
color: #f87171;
|
|
text-shadow: 0 0 10px rgba(248, 113, 113, 0.6);
|
|
}
|
|
|
|
/* Otaku 특수 효과 - 반짝이는 별 그리드 */
|
|
[data-theme="otaku"] .grid-bg {
|
|
background-size: 30px 30px;
|
|
background-image:
|
|
radial-gradient(circle, rgba(255, 107, 157, 0.15) 1px, transparent 1px),
|
|
radial-gradient(circle, rgba(192, 132, 252, 0.1) 1px, transparent 1px);
|
|
background-position: 0 0, 15px 15px;
|
|
mask-image: radial-gradient(circle at center, black 50%, transparent 100%);
|
|
}
|
|
|
|
[data-theme="otaku"] .scanlines {
|
|
display: none;
|
|
}
|
|
|
|
/* 귀여운 라운드 버튼 스타일 */
|
|
[data-theme="otaku"] .clip-tech,
|
|
[data-theme="otaku"] .clip-tech-inv {
|
|
clip-path: none;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
/* ========================================
|
|
Theme: Pink Pink (귀여운 파스텔 핑크)
|
|
======================================== */
|
|
[data-theme="pink-pink"] .glass-holo {
|
|
background: linear-gradient(135deg, rgba(255, 240, 245, 0.95) 0%, rgba(255, 228, 233, 0.9) 100%);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 2px solid rgba(255, 105, 180, 0.4);
|
|
box-shadow:
|
|
0 4px 20px rgba(255, 105, 180, 0.2),
|
|
0 0 40px rgba(255, 20, 147, 0.1),
|
|
inset 0 2px 0 rgba(255, 255, 255, 0.8);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
[data-theme="pink-pink"] .glass-holo::before {
|
|
background: linear-gradient(90deg,
|
|
transparent,
|
|
rgba(255, 105, 180, 0.5),
|
|
rgba(255, 20, 147, 0.5),
|
|
transparent);
|
|
height: 2px;
|
|
}
|
|
|
|
[data-theme="pink-pink"] .text-glow-blue,
|
|
[data-theme="pink-pink"] .text-glow-primary {
|
|
color: #ff69b4;
|
|
text-shadow:
|
|
0 0 8px rgba(255, 105, 180, 0.5),
|
|
0 0 16px rgba(255, 20, 147, 0.3);
|
|
}
|
|
|
|
[data-theme="pink-pink"] .text-glow-green {
|
|
color: #2e8b57;
|
|
text-shadow: 0 0 8px rgba(46, 139, 87, 0.4);
|
|
}
|
|
|
|
[data-theme="pink-pink"] .text-glow-red {
|
|
color: #ff6b6b;
|
|
text-shadow: 0 0 8px rgba(255, 107, 107, 0.5);
|
|
}
|
|
|
|
[data-theme="pink-pink"] .grid-bg,
|
|
[data-theme="pink-pink"] .scanlines {
|
|
display: none;
|
|
}
|
|
|
|
/* 핑크 테마 특수 - 하트 패턴 배경 (선택적) */
|
|
[data-theme="pink-pink"] .pink-hearts {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23ff69b4' fill-opacity='0.1' d='M10 3.5c1.5-2 4-2 5.5 0s1.5 5.5-5.5 10c-7-4.5-7-8-5.5-10s4-2 5.5 0z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* 핑크 테마 버튼 스타일 */
|
|
[data-theme="pink-pink"] .clip-tech,
|
|
[data-theme="pink-pink"] .clip-tech-inv {
|
|
clip-path: none;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
/* 핑크 테마 스크롤바 */
|
|
[data-theme="pink-pink"]::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 105, 180, 0.5);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
[data-theme="pink-pink"]::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 105, 180, 0.8);
|
|
}
|
|
|
|
/* ========================================
|
|
Theme-aware utility classes
|
|
======================================== */
|
|
.theme-bg-primary {
|
|
background-color: var(--color-bg-primary);
|
|
}
|
|
|
|
.theme-bg-secondary {
|
|
background-color: var(--color-bg-secondary);
|
|
}
|
|
|
|
.theme-bg-tertiary {
|
|
background-color: var(--color-bg-tertiary);
|
|
}
|
|
|
|
.theme-text-primary {
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.theme-text-secondary {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.theme-border {
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
.theme-accent {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.theme-glow {
|
|
box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
|
|
}
|
|
|
|
/* ========================================
|
|
Disable effects for non-effect themes
|
|
======================================== */
|
|
[data-theme="windows-classic"] .animate-pulse,
|
|
[data-theme="windows-classic"] .animate-glow,
|
|
[data-theme="windows-classic"] .animate-gradient {
|
|
animation: none !important;
|
|
}
|