AtAuth
feat: polish admin dashboard UI, add screenshots section to README
Admin dashboard CSS: gradient background, frosted glass sidebar,
card shadows with hover lifts, consistent 12px border-radius matching
the login modal theme.
README: add screenshots section with placeholders, update clone URL
to GitHub.
Bryan Brooks
(Feb 27, 2026, 9:54 AM -0600)
43d24712
a5196709
+52
-13
+13
-1
README.md
+13
-1
README.md
···
24
24
25
25
Any app that supports OpenID Connect can use ATAuth. No custom integration needed.
26
26
27
+
## Screenshots
28
+
29
+
<!-- Add your own screenshots to docs/screenshots/ -->
30
+
31
+
32
+
33
+
34
+
35
+
36
+
37
+
38
+
27
39
## Features
28
40
29
41
- **Standard OIDC Provider**: Discovery, authorization, token, userinfo, revocation, JWKS endpoints
···
45
57
### 1. Clone and configure
46
58
47
59
```bash
48
-
git clone https://gitea.cloudforest-basilisk.ts.net/Arcnode.xyz/atauth.git
60
+
git clone https://github.com/Cache8063/atauth.git
49
61
cd atauth
50
62
cp gateway/.env.example .env
51
63
```
+39
-12
gateway/src/routes/admin-dashboard.ts
+39
-12
gateway/src/routes/admin-dashboard.ts
···
1307
1307
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
1308
1308
body {
1309
1309
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1310
-
background: #0f172a;
1310
+
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
1311
+
background-attachment: fixed;
1311
1312
color: #e2e8f0;
1312
1313
min-height: 100vh;
1313
1314
}
···
1317
1318
}
1318
1319
nav {
1319
1320
width: 220px;
1320
-
background: #1e293b;
1321
-
border-right: 1px solid #334155;
1321
+
background: rgba(30, 41, 59, 0.85);
1322
+
backdrop-filter: blur(12px);
1323
+
-webkit-backdrop-filter: blur(12px);
1324
+
border-right: 1px solid rgba(51, 65, 85, 0.6);
1322
1325
padding: 1.5rem 0;
1323
1326
flex-shrink: 0;
1324
1327
}
···
1365
1368
.card {
1366
1369
background: #1e293b;
1367
1370
border: 1px solid #334155;
1368
-
border-radius: 10px;
1371
+
border-radius: 12px;
1369
1372
padding: 1.25rem;
1373
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
1370
1374
}
1371
1375
.stats-grid {
1372
1376
display: grid;
···
1376
1380
.stat-card {
1377
1381
background: #1e293b;
1378
1382
border: 1px solid #334155;
1379
-
border-radius: 10px;
1383
+
border-radius: 12px;
1380
1384
padding: 1.25rem;
1381
1385
text-align: center;
1386
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
1387
+
transition: transform 0.15s ease, box-shadow 0.15s ease;
1388
+
}
1389
+
.stat-card:hover {
1390
+
transform: translateY(-2px);
1391
+
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
1382
1392
}
1383
1393
.stat-value {
1384
1394
font-size: 2rem;
···
1403
1413
border-collapse: collapse;
1404
1414
background: #1e293b;
1405
1415
border: 1px solid #334155;
1406
-
border-radius: 10px;
1416
+
border-radius: 12px;
1407
1417
overflow: hidden;
1418
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
1408
1419
}
1409
1420
th, td {
1410
1421
padding: 0.625rem 0.875rem;
···
1499
1510
border-radius: 8px;
1500
1511
margin-bottom: 1rem;
1501
1512
font-size: 0.875rem;
1513
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
1502
1514
}
1503
1515
.flash-success {
1504
1516
background: #14532d;
···
1538
1550
.secret-box {
1539
1551
background: #0f172a;
1540
1552
border: 2px solid #f59e0b;
1541
-
border-radius: 8px;
1553
+
border-radius: 12px;
1542
1554
padding: 1rem;
1543
1555
font-family: monospace;
1544
1556
font-size: 0.9rem;
···
1567
1579
color: #fbbf24;
1568
1580
font-size: 0.875rem;
1569
1581
margin: 0.75rem 0;
1582
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
1570
1583
}
1571
1584
.callout-info {
1572
1585
background: #0c1a2e;
···
1577
1590
font-size: 0.875rem;
1578
1591
margin: 0.75rem 0;
1579
1592
white-space: pre-wrap;
1593
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
1580
1594
}
1581
1595
.wizard-grid {
1582
1596
display: grid;
···
1586
1600
.wizard-card {
1587
1601
background: #1e293b;
1588
1602
border: 1px solid #334155;
1589
-
border-radius: 10px;
1603
+
border-radius: 12px;
1590
1604
padding: 1.25rem;
1591
-
transition: border-color 0.15s;
1605
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
1606
+
transition: border-color 0.15s, transform 0.15s ease, box-shadow 0.15s ease;
1592
1607
}
1593
-
.wizard-card:hover { border-color: #3b82f6; }
1608
+
.wizard-card:hover {
1609
+
border-color: #3b82f6;
1610
+
transform: translateY(-2px);
1611
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
1612
+
}
1594
1613
.wizard-card h4 { color: #f1f5f9; margin-bottom: 0.25rem; }
1595
1614
.wizard-card p { color: #94a3b8; font-size: 0.8rem; margin-bottom: 0.75rem; }
1596
1615
.code-block {
1597
1616
background: #0f172a;
1598
1617
border: 1px solid #334155;
1599
-
border-radius: 8px;
1618
+
border-radius: 12px;
1600
1619
padding: 1rem;
1620
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
1601
1621
font-family: monospace;
1602
1622
font-size: 0.8rem;
1603
1623
color: #7dd3fc;
···
1647
1667
dd { margin-top: 0.15rem; }
1648
1668
@media (max-width: 768px) {
1649
1669
.shell { flex-direction: column; }
1650
-
nav { width: 100%; border-right: none; border-bottom: 1px solid #334155; padding: 1rem 0; }
1670
+
nav {
1671
+
width: 100%;
1672
+
border-right: none;
1673
+
border-bottom: 1px solid rgba(51, 65, 85, 0.6);
1674
+
padding: 1rem 0;
1675
+
backdrop-filter: blur(8px);
1676
+
-webkit-backdrop-filter: blur(8px);
1677
+
}
1651
1678
nav a { display: inline-block; }
1652
1679
main { padding: 1rem; }
1653
1680
}