馃 distributed transcription service
thistle.dunkirk.sh
1main {
2 max-width: 80rem;
3 margin: 0 auto;
4 padding: 2rem;
5}
6
7h1 {
8 margin-bottom: 2rem;
9 color: var(--text);
10}
11
12.section {
13 margin-bottom: 3rem;
14}
15
16.section-title {
17 font-size: 1.5rem;
18 font-weight: 600;
19 color: var(--text);
20 margin-bottom: 1rem;
21 display: flex;
22 align-items: center;
23 gap: 0.5rem;
24}
25
26.tabs {
27 display: flex;
28 gap: 1rem;
29 border-bottom: 2px solid var(--secondary);
30 margin-bottom: 2rem;
31}
32
33.tab {
34 padding: 0.75rem 1.5rem;
35 border: none;
36 background: transparent;
37 color: var(--text);
38 cursor: pointer;
39 font-size: 1rem;
40 font-weight: 500;
41 font-family: inherit;
42 border-bottom: 2px solid transparent;
43 margin-bottom: -2px;
44 transition: all 0.2s;
45}
46
47.tab:hover {
48 color: var(--primary);
49}
50
51.tab.active {
52 color: var(--primary);
53 border-bottom-color: var(--primary);
54}
55
56.tab-content {
57 display: none;
58}
59
60.tab-content.active {
61 display: block;
62}
63
64.empty-state {
65 text-align: center;
66 padding: 3rem;
67 color: var(--text);
68 opacity: 0.6;
69}
70
71.loading {
72 text-align: center;
73 padding: 3rem;
74 color: var(--text);
75}
76
77.error {
78 background: #fee2e2;
79 color: #991b1b;
80 padding: 1rem;
81 border-radius: 6px;
82 margin-bottom: 1rem;
83}
84
85.stats {
86 display: grid;
87 grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
88 gap: 1rem;
89 margin-bottom: 2rem;
90}
91
92.stat-card {
93 background: var(--background);
94 border: 2px solid var(--secondary);
95 border-radius: 8px;
96 padding: 1.5rem;
97}
98
99.stat-value {
100 font-size: 2rem;
101 font-weight: 700;
102 color: var(--primary);
103 margin-bottom: 0.25rem;
104}
105
106.stat-label {
107 color: var(--text);
108 opacity: 0.7;
109 font-size: 0.875rem;
110}
111
112.timestamp {
113 color: var(--text);
114 opacity: 0.6;
115 font-size: 0.875rem;
116}
117
118.hidden {
119 display: none;
120}