DataDreamerX/clock

1:root {
2    /* Default Theme: Midnight Monolith */
3    --bg-color: #000000;
4    --text-color: #ffffff;
5    --dim-text-color: #a0a0a0;
6    --font-family: 'Inter', sans-serif;
7    --time-font-weight: 700;
8    --text-shadow: none;
9    --accent-color: #ffffff;
10}
11
12/* Theme Definitions */
13[data-theme="polar"] {
14    --bg-color: #f0f0f0;
15    --text-color: #222222;
16    --dim-text-color: #666666;
17    --accent-color: #222222;
18}
19
20[data-theme="neon"] {
21    /* Digital Day - 7-segment on white */
22    --bg-color: #ffffff;
23    --text-color: #ff0000;
24    --dim-text-color: #ffcccc;
25    --font-family: 'Jersey 10', sans-serif;
26    --text-shadow: none;
27    --accent-color: #ff0000;
28    --time-font-weight: 400;
29}
30
31[data-theme="retro"] {
32    /* Retro Pop - Beige bg, colorful text */
33    --bg-color: #fdf6e3;
34    --text-color: #d33682;
35    /* Magenta for time */
36    --dim-text-color: #268bd2;
37    /* Blue for date */
38    --font-family: 'VT323', monospace;
39    --text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
40    --accent-color: #859900;
41}
42
43[data-theme="swiss"] {
44    --bg-color: #e5e5e5;
45    --text-color: #1a1a1a;
46    --dim-text-color: #555555;
47    --font-family: 'Helvetica', 'Arial', sans-serif;
48    --time-font-weight: 900;
49    --accent-color: #ff3333;
50}
51
52* {
53    box-sizing: border-box;
54    margin: 0;
55    padding: 0;
56    transition: background-color 0.3s ease, color 0.3s ease;
57}
58
59body {
60    background-color: var(--bg-color);
61    color: var(--text-color);
62    font-family: var(--font-family);
63    height: 100vh;
64    display: flex;
65    justify-content: center;
66    align-items: center;
67    overflow: hidden;
68    position: relative;
69}
70
71.clock-container {
72    text-align: center;
73    display: flex;
74    flex-direction: column;
75    gap: 20px;
76}
77
78.date-section {
79    display: flex;
80    flex-direction: column;
81    gap: 5px;
82}
83
84.solar-date {
85    font-size: 1.5rem;
86    font-weight: 400;
87    color: var(--dim-text-color);
88    text-shadow: var(--text-shadow);
89}
90
91.lunar-date {
92    font-size: 1.2rem;
93    font-weight: 300;
94    color: var(--dim-text-color);
95    opacity: 0.8;
96    text-shadow: var(--text-shadow);
97}
98
99.time-display {
100    font-size: 12rem;
101    font-weight: var(--time-font-weight);
102    line-height: 1;
103    letter-spacing: -5px;
104    text-shadow: var(--text-shadow);
105}
106
107/* Theme Switcher UI */
108.theme-toggle {
109    position: absolute;
110    top: 20px;
111    right: 20px;
112    background: transparent;
113    border: none;
114    color: var(--dim-text-color);
115    cursor: pointer;
116    padding: 10px;
117    border-radius: 50%;
118    transition: all 0.2s ease;
119}
120
121.theme-toggle:hover {
122    color: var(--text-color);
123    background-color: rgba(255, 255, 255, 0.1);
124}
125
126.theme-menu {
127    position: absolute;
128    top: 70px;
129    right: 20px;
130    background-color: rgba(20, 20, 20, 0.9);
131    backdrop-filter: blur(10px);
132    padding: 15px;
133    border-radius: 10px;
134    display: flex;
135    flex-direction: column;
136    gap: 10px;
137    border: 1px solid rgba(255, 255, 255, 0.1);
138    z-index: 100;
139}
140
141[data-theme="polar"] .theme-menu,
142[data-theme="swiss"] .theme-menu {
143    background-color: rgba(240, 240, 240, 0.9);
144    border: 1px solid rgba(0, 0, 0, 0.1);
145}
146
147.theme-menu.hidden {
148    display: none;
149}
150
151.theme-menu h3 {
152    font-size: 0.9rem;
153    color: var(--dim-text-color);
154    margin-bottom: 5px;
155    text-transform: uppercase;
156    letter-spacing: 1px;
157}
158
159.theme-btn {
160    background: transparent;
161    border: 1px solid var(--dim-text-color);
162    color: var(--text-color);
163    padding: 8px 12px;
164    border-radius: 5px;
165    cursor: pointer;
166    font-family: inherit;
167    transition: all 0.2s;
168    text-align: left;
169}
170
171.theme-btn:hover {
172    background-color: var(--dim-text-color);
173    color: var(--bg-color);
174}
175
176@media (max-width: 768px) {
177    .time-display {
178        font-size: 6rem;
179        letter-spacing: -2px;
180    }
181
182    .solar-date {
183        font-size: 1.2rem;
184    }
185
186    .lunar-date {
187        font-size: 1rem;
188    }
189}