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