dunkirk.sh
the best notes app for me
1/* enɳoté - Dark Theme Styles */
2/* Color Palette from spec */
3:root {
4 --background: #171717;
5 --surface: #212121;
6 --surface-elevated: #2A2A2A;
7 --text-primary: #FAFAFA;
8 --text-secondary: #A3A3A3;
9 --accent: #FBBF23;
10 --accent-muted: #78590A;
11 --success: #4ADE80;
12 --border: #2E2E2E;
13}
14
15* {
16 margin: 0;
17 padding: 0;
18 box-sizing: border-box;
19}
20
21body {
22 font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
23 background-color: var(--background);
24 color: var(--text-primary);
25 min-height: 100vh;
26 line-height: 1.5;
27}
28
29.container {
30 max-width: 480px;
31 margin: 0 auto;
32 padding: 2rem 1.5rem;
33 min-height: 100vh;
34 display: flex;
35 flex-direction: column;
36}
37
38/* Header */
39header {
40 text-align: center;
41 margin-bottom: 2.5rem;
42}
43
44header h1 {
45 font-size: 2rem;
46 font-weight: 600;
47 letter-spacing: -0.02em;
48 margin-bottom: 0.5rem;
49}
50
51.tagline {
52 color: var(--text-secondary);
53 font-size: 0.9rem;
54}
55
56/* Main Content */
57main {
58 flex: 1;
59}
60
61.section {
62 display: flex;
63 flex-direction: column;
64 gap: 1rem;
65}
66
67.hidden {
68 display: none !important;
69}
70
71/* Input Section */
72label {
73 font-size: 0.875rem;
74 color: var(--text-secondary);
75 font-weight: 500;
76}
77
78textarea {
79 width: 100%;
80 padding: 1rem;
81 background-color: var(--surface);
82 border: 1px solid var(--border);
83 border-radius: 12px;
84 color: var(--text-primary);
85 font-family: inherit;
86 font-size: 1rem;
87 line-height: 1.6;
88 resize: vertical;
89 min-height: 200px;
90 transition: border-color 0.2s ease;
91}
92
93textarea::placeholder {
94 color: var(--text-secondary);
95 opacity: 0.6;
96}
97
98textarea:focus {
99 outline: none;
100 border-color: var(--accent);
101}
102
103.note-count {
104 text-align: right;
105 color: var(--text-secondary);
106 font-size: 0.875rem;
107}
108
109.note-count span {
110 color: var(--accent);
111 font-weight: 600;
112}
113
114/* Buttons */
115button {
116 padding: 1rem 1.5rem;
117 border-radius: 12px;
118 font-size: 1rem;
119 font-weight: 600;
120 cursor: pointer;
121 transition: all 0.2s ease;
122 border: none;
123}
124
125.primary-button {
126 background-color: var(--accent);
127 color: var(--background);
128}
129
130.primary-button:hover {
131 background-color: #E5AC1F;
132 transform: translateY(-1px);
133}
134
135.primary-button:active {
136 transform: translateY(0);
137}
138
139.primary-button:disabled {
140 background-color: var(--accent-muted);
141 cursor: not-allowed;
142 transform: none;
143}
144
145.secondary-button {
146 background-color: var(--surface);
147 color: var(--text-primary);
148 border: 1px solid var(--border);
149}
150
151.secondary-button:hover {
152 background-color: var(--surface-elevated);
153 border-color: var(--text-secondary);
154}
155
156/* QR Section */
157#qr-section {
158 align-items: center;
159 text-align: center;
160}
161
162.qr-container {
163 background-color: white;
164 padding: 1.5rem;
165 border-radius: 16px;
166 margin-bottom: 1.5rem;
167}
168
169#qr-canvas {
170 display: block;
171 width: 200px;
172 height: 200px;
173}
174
175/* Timer */
176.timer-container {
177 width: 100%;
178 margin-bottom: 1rem;
179}
180
181.timer-bar {
182 height: 4px;
183 background-color: var(--surface);
184 border-radius: 2px;
185 overflow: hidden;
186 margin-bottom: 0.5rem;
187}
188
189.timer-progress {
190 height: 100%;
191 background-color: var(--accent);
192 width: 100%;
193 transition: width 1s linear;
194}
195
196.timer-progress.warning {
197 background-color: #F97316;
198}
199
200.timer-progress.critical {
201 background-color: #EF4444;
202}
203
204.timer-text {
205 color: var(--text-secondary);
206 font-size: 0.875rem;
207}
208
209.timer-text span {
210 color: var(--text-primary);
211 font-weight: 500;
212 font-variant-numeric: tabular-nums;
213}
214
215.instruction {
216 color: var(--text-secondary);
217 font-size: 0.9rem;
218 margin-bottom: 1.5rem;
219}
220
221/* Footer */
222footer {
223 margin-top: 2rem;
224 text-align: center;
225 padding-top: 1.5rem;
226 border-top: 1px solid var(--border);
227}
228
229footer p {
230 color: var(--text-secondary);
231 font-size: 0.8rem;
232}
233
234/* Responsive */
235@media (max-width: 480px) {
236 .container {
237 padding: 1.5rem 1rem;
238 }
239
240 header h1 {
241 font-size: 1.75rem;
242 }
243
244 textarea {
245 min-height: 180px;
246 }
247}
248
249/* Animation for QR appearance */
250@keyframes fadeIn {
251 from {
252 opacity: 0;
253 transform: scale(0.95);
254 }
255 to {
256 opacity: 1;
257 transform: scale(1);
258 }
259}
260
261#qr-section:not(.hidden) {
262 animation: fadeIn 0.3s ease-out;
263}