my own indieAuth provider!
indiko.dunkirk.sh/docs
dunkirk.sh
indieauth
oauth2-server
1/* Indiko - Consolidated Styles */
2
3/* CSS Variables */
4:root {
5 --mahogany: #26242b;
6 --lavender: #d9d0de;
7 --old-rose: #bc8da0;
8 --rosewood: #a04668;
9 --berry-crush: #ab4967;
10}
11
12/* Reset */
13* {
14 margin: 0;
15 padding: 0;
16 box-sizing: border-box;
17}
18
19/* Base */
20body {
21 font-family: "Space Grotesk", sans-serif;
22 background: var(--mahogany);
23 color: var(--lavender);
24 min-height: 100vh;
25 display: flex;
26 flex-direction: column;
27 align-items: center;
28 padding: 2.5rem 1.25rem;
29}
30
31/* Typography */
32h1 {
33 font-size: 2rem;
34 font-weight: 700;
35 background: linear-gradient(
36 135deg,
37 var(--old-rose),
38 var(--berry-crush),
39 var(--rosewood)
40 );
41 -webkit-background-clip: text;
42 -webkit-text-fill-color: transparent;
43 background-clip: text;
44 letter-spacing: -0.125rem;
45}
46
47h2 {
48 font-size: 1.5rem;
49 font-weight: 600;
50 color: var(--lavender);
51 margin-bottom: 1.5rem;
52 letter-spacing: -0.05rem;
53}
54
55.subtitle {
56 color: var(--old-rose);
57 font-size: 1rem;
58 font-weight: 300;
59 letter-spacing: 0.05rem;
60}
61
62/* Links */
63a {
64 color: var(--berry-crush);
65 text-decoration: none;
66 transition: color 0.2s;
67}
68
69a:hover {
70 color: var(--rosewood);
71 text-decoration: underline;
72}
73
74/* Forms */
75label {
76 display: block;
77 color: var(--old-rose);
78 font-size: 0.875rem;
79 font-weight: 500;
80 margin-bottom: 0.5rem;
81 text-transform: uppercase;
82 letter-spacing: 0.05rem;
83}
84
85input[type="text"],
86input[type="email"],
87input[type="url"],
88input[type="number"],
89input[type="password"],
90input[type="datetime-local"],
91textarea {
92 width: 100%;
93 padding: 0.875rem 1rem;
94 background: rgba(12, 23, 19, 0.6);
95 border: 2px solid var(--rosewood);
96 border-radius: 0;
97 color: var(--lavender);
98 font-size: 1rem;
99 font-family: "Space Grotesk", sans-serif;
100 transition: border-color 0.2s;
101 letter-spacing: 0.025rem;
102}
103
104input:focus,
105textarea:focus {
106 outline: none;
107 border-color: var(--berry-crush);
108 background: rgba(12, 23, 19, 0.8);
109}
110
111input::placeholder,
112textarea::placeholder {
113 color: rgba(217, 208, 222, 0.4);
114}
115
116input:disabled,
117textarea:disabled {
118 opacity: 0.5;
119 cursor: not-allowed;
120}
121
122textarea {
123 resize: vertical;
124 min-height: 4rem;
125}
126
127.form-group {
128 margin-bottom: 1.5rem;
129}
130
131.form-help {
132 font-size: 0.75rem;
133 color: var(--old-rose);
134 margin-top: 0.25rem;
135}
136
137/* Buttons */
138button {
139 position: relative;
140 padding: 1rem 2rem;
141 background: var(--berry-crush);
142 color: var(--lavender);
143 border: 4px solid var(--mahogany);
144 border-radius: 0;
145 font-size: 1rem;
146 font-weight: 700;
147 cursor: pointer;
148 font-family: "Space Grotesk", sans-serif;
149 transition: all 0.15s ease;
150 text-transform: uppercase;
151 letter-spacing: 0.1rem;
152 box-shadow: 6px 6px 0 var(--mahogany);
153}
154
155button::before {
156 content: "";
157 position: absolute;
158 top: -4px;
159 left: -4px;
160 right: -4px;
161 bottom: -4px;
162 background: transparent;
163 border: 4px solid var(--rosewood);
164 pointer-events: none;
165 transition: all 0.15s ease;
166}
167
168button:hover:not(:disabled) {
169 transform: translate(3px, 3px);
170 box-shadow: 3px 3px 0 var(--mahogany);
171}
172
173button:hover:not(:disabled)::before {
174 top: -7px;
175 left: -7px;
176 right: -7px;
177 bottom: -7px;
178}
179
180button:active:not(:disabled) {
181 transform: translate(6px, 6px);
182 box-shadow: 0 0 0 var(--mahogany);
183}
184
185button:disabled {
186 opacity: 0.5;
187 cursor: not-allowed;
188}
189
190.secondary-btn,
191.button-secondary {
192 background: transparent;
193 color: var(--old-rose);
194 box-shadow: 4px 4px 0 var(--mahogany);
195}
196
197.secondary-btn::before,
198.button-secondary::before {
199 border-color: var(--old-rose);
200}
201
202.secondary-btn:hover:not(:disabled),
203.button-secondary:hover:not(:disabled) {
204 background: rgba(188, 141, 160, 0.1);
205}
206
207/* Small action buttons - clean style with subtle backgrounds */
208.btn-edit,
209.btn-delete,
210.btn-copy,
211.btn-disable,
212.revoke-btn {
213 padding: 0.5rem 1rem;
214 font-family: "Space Grotesk", sans-serif;
215 font-size: 0.875rem;
216 font-weight: 600;
217 cursor: pointer;
218 transition: all 0.2s;
219 text-transform: none;
220 letter-spacing: normal;
221 box-shadow: none;
222 position: static;
223 border: 2px solid transparent;
224}
225
226.btn-edit::before,
227.btn-delete::before,
228.btn-copy::before,
229.btn-disable::before,
230.revoke-btn::before {
231 display: none;
232}
233
234.btn-edit:hover:not(:disabled),
235.btn-delete:hover:not(:disabled),
236.btn-copy:hover:not(:disabled),
237.btn-disable:hover:not(:disabled),
238.revoke-btn:hover:not(:disabled) {
239 transform: none;
240}
241
242.btn-edit {
243 background: rgba(188, 141, 160, 0.2);
244 color: var(--lavender);
245 border: 2px solid var(--old-rose);
246}
247
248.btn-edit:hover:not(:disabled) {
249 background: rgba(188, 141, 160, 0.3);
250}
251
252.btn-delete,
253.revoke-btn {
254 background: rgba(160, 70, 104, 0.2);
255 color: var(--lavender);
256 border: 2px solid var(--rosewood);
257}
258
259.btn-delete:hover:not(:disabled),
260.revoke-btn:hover:not(:disabled) {
261 background: rgba(160, 70, 104, 0.3);
262}
263
264.btn-disable {
265 background: rgba(229, 115, 115, 0.2);
266 color: var(--lavender);
267 border: 2px solid #e57373;
268}
269
270.btn-disable:hover:not(:disabled) {
271 background: rgba(229, 115, 115, 0.3);
272}
273
274.btn-copy {
275 background: rgba(188, 141, 160, 0.2);
276 color: var(--lavender);
277 border: 2px solid var(--old-rose);
278}
279
280.btn-copy:hover:not(:disabled) {
281 background: rgba(188, 141, 160, 0.3);
282}
283
284.btn-edit:disabled,
285.btn-delete:disabled,
286.btn-copy:disabled,
287.btn-disable:disabled,
288.revoke-btn:disabled {
289 opacity: 0.5;
290 cursor: not-allowed;
291}
292
293/* Messages */
294.message {
295 padding: 0.875rem;
296 margin-bottom: 1rem;
297 border-radius: 0.5rem;
298 font-size: 0.875rem;
299 letter-spacing: 0.025rem;
300 display: none;
301}
302
303.message.show {
304 display: block;
305}
306
307.message.error {
308 background: rgba(160, 70, 104, 0.2);
309 border: 2px solid var(--rosewood);
310 color: var(--lavender);
311}
312
313.message.success {
314 background: rgba(188, 141, 160, 0.2);
315 border: 2px solid var(--old-rose);
316 color: var(--lavender);
317}
318
319/* Cards */
320.card {
321 background: rgba(188, 141, 160, 0.05);
322 border: 1px solid var(--old-rose);
323 padding: 1.5rem;
324}
325
326.card-title {
327 font-size: 1.125rem;
328 font-weight: 600;
329 color: var(--lavender);
330 margin-bottom: 1rem;
331}
332
333/* Avatars */
334.avatar,
335.profile-avatar,
336.user-avatar {
337 width: 4rem;
338 height: 4rem;
339 border-radius: 50%;
340 background: var(--berry-crush);
341 display: flex;
342 align-items: center;
343 justify-content: center;
344 font-size: 1.5rem;
345 font-weight: 700;
346 color: var(--lavender);
347 text-transform: uppercase;
348 flex-shrink: 0;
349 overflow: hidden;
350}
351
352.avatar img,
353.profile-avatar img,
354.user-avatar img {
355 width: 100%;
356 height: 100%;
357 border-radius: 50%;
358 object-fit: cover;
359}
360
361/* Badges */
362.badge,
363.user-badge,
364.scope-badge {
365 display: inline-block;
366 padding: 0.25rem 0.75rem;
367 font-size: 0.75rem;
368 font-weight: 700;
369 text-transform: uppercase;
370 letter-spacing: 0.05rem;
371}
372
373.badge-admin {
374 background: var(--berry-crush);
375 color: var(--lavender);
376}
377
378.badge-role {
379 background: rgba(188, 141, 160, 0.2);
380 color: var(--lavender);
381 border: 1px solid var(--old-rose);
382}
383
384.badge-status {
385 border: 1px solid var(--old-rose);
386}
387
388.badge-status.active {
389 background: rgba(139, 195, 74, 0.2);
390 color: #a5d6a7;
391 border-color: #81c784;
392}
393
394.badge-status.suspended {
395 background: rgba(244, 67, 54, 0.2);
396 color: #ef9a9a;
397 border-color: #e57373;
398}
399
400.badge-status.inactive {
401 background: rgba(158, 158, 158, 0.2);
402 color: #bdbdbd;
403 border-color: #9e9e9e;
404}
405
406/* Header */
407header {
408 width: 100%;
409 max-width: 56.25rem;
410 margin-bottom: 2rem;
411}
412
413.header-nav {
414 display: flex;
415 gap: 1rem;
416 margin-top: 0.5rem;
417}
418
419.header-nav a {
420 color: var(--old-rose);
421 text-decoration: none;
422 font-size: 0.875rem;
423 font-weight: 500;
424 padding: 0.5rem 1rem;
425 border: 1px solid var(--old-rose);
426 transition: all 0.2s;
427}
428
429.header-nav a:hover {
430 background: rgba(188, 141, 160, 0.1);
431 color: var(--berry-crush);
432 border-color: var(--berry-crush);
433}
434
435.header-nav a.active {
436 background: var(--berry-crush);
437 color: var(--lavender);
438 border-color: var(--berry-crush);
439}
440
441/* Main */
442main {
443 flex: 1;
444 width: 100%;
445 max-width: 56.25rem;
446}
447
448/* Footer */
449footer {
450 width: 100%;
451 max-width: 56.25rem;
452 padding: 1rem;
453 text-align: center;
454 color: var(--old-rose);
455 font-size: 0.875rem;
456 font-weight: 300;
457 letter-spacing: 0.05rem;
458}
459
460footer a {
461 color: var(--berry-crush);
462 text-decoration: none;
463 transition: color 0.2s;
464}
465
466footer a:hover {
467 color: var(--rosewood);
468 text-decoration: underline;
469}
470
471/* Utility Classes */
472.loading,
473.error,
474.empty {
475 text-align: center;
476 padding: 2rem;
477 color: var(--old-rose);
478 font-size: 1rem;
479}
480
481.error {
482 color: var(--rosewood);
483}
484
485.back-link {
486 text-align: center;
487 margin-top: 2rem;
488 font-size: 0.875rem;
489}
490
491.back-link a {
492 color: var(--berry-crush);
493 text-decoration: none;
494}
495
496.back-link a:hover {
497 text-decoration: underline;
498}
499
500/* Divider */
501.divider {
502 display: flex;
503 align-items: center;
504 text-align: center;
505 margin: 1.5rem 0;
506 color: var(--old-rose);
507 font-size: 0.875rem;
508 font-weight: 300;
509}
510
511.divider::before,
512.divider::after {
513 content: "";
514 flex: 1;
515 border-bottom: 1px solid rgba(188, 141, 160, 0.3);
516}
517
518.divider span {
519 padding: 0 1rem;
520}
521
522/* Modals */
523.modal {
524 display: none;
525 position: fixed;
526 top: 0;
527 left: 0;
528 width: 100%;
529 height: 100%;
530 background: rgba(0, 0, 0, 0.8);
531 justify-content: center;
532 align-items: center;
533 z-index: 1000;
534}
535
536.modal-content {
537 background: var(--mahogany);
538 border: 2px solid var(--old-rose);
539 padding: 2rem;
540 max-width: 40rem;
541 width: 90%;
542 max-height: 90vh;
543 overflow-y: auto;
544}
545
546.modal-header {
547 display: flex;
548 justify-content: space-between;
549 align-items: center;
550 margin-bottom: 1.5rem;
551}
552
553.modal-header h3 {
554 font-size: 1.5rem;
555 color: var(--lavender);
556 margin: 0;
557}
558
559.modal-close {
560 background: none;
561 border: none;
562 color: var(--old-rose);
563 font-size: 1.5rem;
564 cursor: pointer;
565 padding: 0;
566 line-height: 1;
567}
568
569.modal-close:hover {
570 color: var(--berry-crush);
571}
572
573.modal-actions {
574 display: flex;
575 gap: 1rem;
576 justify-content: flex-end;
577 margin-top: 2rem;
578}
579
580/* Button Groups */
581.button-group {
582 display: flex;
583 gap: 1rem;
584 margin-top: 2rem;
585}