a control panel for my server
dunkirk.sh
1* {
2 margin: 0;
3 padding: 0;
4 box-sizing: border-box;
5}
6
7body {
8 font-family: 'Space Grotesk', system-ui, sans-serif;
9 background: #0a0a0a;
10 color: #e5e5e5;
11 min-height: 100vh;
12 line-height: 1.5;
13}
14
15.container {
16 max-width: 800px;
17 margin: 0 auto;
18 padding: 2rem;
19}
20
21header {
22 display: flex;
23 justify-content: space-between;
24 align-items: center;
25 padding-bottom: 2rem;
26 border-bottom: 1px solid #262626;
27 margin-bottom: 2rem;
28}
29
30h1 {
31 font-size: 1.5rem;
32 font-weight: 500;
33 letter-spacing: -0.02em;
34}
35
36.user-info {
37 display: flex;
38 align-items: center;
39 gap: 1rem;
40}
41
42.user-name {
43 color: #a3a3a3;
44 font-size: 0.875rem;
45}
46
47.logout-btn {
48 background: transparent;
49 border: 1px solid #404040;
50 color: #a3a3a3;
51 padding: 0.5rem 1rem;
52 border-radius: 6px;
53 cursor: pointer;
54 font-size: 0.875rem;
55 font-family: inherit;
56 transition: all 0.15s;
57}
58
59.logout-btn:hover {
60 border-color: #525252;
61 color: #e5e5e5;
62}
63
64.service-section {
65 margin-bottom: 2rem;
66}
67
68.service-title {
69 font-size: 0.75rem;
70 font-weight: 500;
71 color: #737373;
72 text-transform: uppercase;
73 letter-spacing: 0.05em;
74 margin-bottom: 0.75rem;
75}
76
77.flag-card {
78 background: #171717;
79 border: 1px solid #262626;
80 border-radius: 8px;
81 padding: 1rem 1.25rem;
82 display: flex;
83 justify-content: space-between;
84 align-items: center;
85 margin-bottom: 0.5rem;
86}
87
88.flag-info h3 {
89 font-size: 0.9375rem;
90 font-weight: 500;
91 margin-bottom: 0.25rem;
92}
93
94.flag-info p {
95 font-size: 0.8125rem;
96 color: #737373;
97}
98
99.toggle {
100 position: relative;
101 width: 52px;
102 height: 28px;
103 flex-shrink: 0;
104}
105
106.toggle input {
107 opacity: 0;
108 width: 0;
109 height: 0;
110}
111
112.toggle-slider {
113 position: absolute;
114 cursor: pointer;
115 inset: 0;
116 background: #262626;
117 border-radius: 14px;
118 transition: all 0.2s;
119}
120
121.toggle-slider:before {
122 content: "";
123 position: absolute;
124 height: 20px;
125 width: 20px;
126 left: 4px;
127 bottom: 4px;
128 background: #525252;
129 border-radius: 50%;
130 transition: all 0.2s;
131}
132
133.toggle input:checked + .toggle-slider {
134 background: #22c55e;
135}
136
137.toggle input:checked + .toggle-slider:before {
138 transform: translateX(24px);
139 background: #fff;
140}
141
142.toggle input:disabled + .toggle-slider {
143 opacity: 0.5;
144 cursor: not-allowed;
145}
146
147.empty-state {
148 text-align: center;
149 padding: 3rem;
150 color: #525252;
151}
152
153.loading {
154 display: flex;
155 align-items: center;
156 justify-content: center;
157 min-height: 50vh;
158 color: #525252;
159}
160
161.error {
162 text-align: center;
163 padding: 3rem;
164 color: #ef4444;
165}