Skip to content

Commit 8d7e58d

Browse files
will-break-itwill-break-it
committed
site: traffic calculator styling
1 parent 13da4e1 commit 8d7e58d

File tree

1 file changed

+51
-48
lines changed

1 file changed

+51
-48
lines changed

‎site/src/components/LeiosTrafficCalculator/styles.module.css‎

Lines changed: 51 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
margin: 0;
3535
font-size: 0.95rem;
3636
line-height: 1.5;
37+
color: var(--ifm-color-emphasis-800);
3738
}
3839

3940
.description a {
@@ -55,20 +56,20 @@
5556
.controlGroup {
5657
flex: 1;
5758
min-width: 300px;
58-
background-color: #ffffff;
59+
background-color: var(--ifm-background-surface-color);
5960
padding: 1.5rem;
6061
border-radius: 8px;
61-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
62-
border: 1px solid #e1e4e8;
62+
box-shadow: 0 1px 3px var(--ifm-color-emphasis-200), 0 1px 2px var(--ifm-color-emphasis-200);
63+
border: 1px solid var(--ifm-color-emphasis-200);
6364
}
6465

6566
.controlGroup h4 {
6667
margin: 0 0 1rem 0;
67-
color: #24292f;
68+
color: var(--ifm-color-emphasis-900);
6869
font-size: 1.1rem;
6970
font-weight: 600;
7071
padding-bottom: 0.5rem;
71-
border-bottom: 1px solid #e1e4e8;
72+
border-bottom: 1px solid var(--ifm-color-emphasis-200);
7273
}
7374

7475
.control {
@@ -82,44 +83,44 @@
8283
.control label {
8384
display: block;
8485
margin-bottom: 0.5rem;
85-
color: #24292f;
86+
color: var(--ifm-color-emphasis-700);
8687
font-size: 0.9rem;
8788
font-weight: 500;
8889
}
8990

9091
.control input {
9192
width: 100%;
9293
padding: 0.5rem;
93-
border: 1px solid #e1e4e8;
94+
border: 1px solid var(--ifm-color-emphasis-300);
9495
border-radius: 4px;
95-
background: #ffffff;
96-
color: #24292f;
96+
background: var(--ifm-background-surface-color);
97+
color: var(--ifm-color-emphasis-900);
9798
font-size: 0.9rem;
9899
}
99100

100101
.control input:focus {
101102
outline: none;
102-
border-color: #0969da;
103-
box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.2);
103+
border-color: var(--ifm-color-primary);
104+
box-shadow: 0 0 0 2px var(--ifm-color-primary-lightest);
104105
}
105106

106107
.calculationBreakdown {
107108
width: 100%;
108109
margin: 2rem 0;
109110
padding: 2rem;
110-
background-color: #ffffff;
111+
background-color: var(--ifm-background-surface-color);
111112
border-radius: 8px;
112-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
113-
border: 1px solid #e1e4e8;
113+
box-shadow: 0 1px 3px var(--ifm-color-emphasis-200), 0 1px 2px var(--ifm-color-emphasis-200);
114+
border: 1px solid var(--ifm-color-emphasis-200);
114115
}
115116

116117
.calculationBreakdown h3 {
117-
color: #24292f;
118+
color: var(--ifm-color-emphasis-900);
118119
margin-bottom: 1.5rem;
119120
font-weight: 600;
120121
font-size: 1.25rem;
121122
padding-bottom: 0.5rem;
122-
border-bottom: 1px solid #e1e4e8;
123+
border-bottom: 1px solid var(--ifm-color-emphasis-200);
123124
}
124125

125126
.breakdownGrid {
@@ -137,7 +138,7 @@
137138

138139
.calculationTitle {
139140
font-weight: 600;
140-
color: #24292f;
141+
color: var(--ifm-color-emphasis-800);
141142
font-size: 0.9rem;
142143
margin-top: 0.25rem;
143144
}
@@ -150,29 +151,29 @@
150151
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
151152
font-size: 0.85rem;
152153
line-height: 1.6;
153-
color: #24292f;
154+
color: var(--ifm-color-emphasis-700);
154155
white-space: pre-wrap;
155156
word-break: break-word;
156157
padding: 0.5rem;
157-
background-color: #ffffff;
158+
background-color: var(--ifm-background-surface-color);
158159
border-radius: 4px;
159-
border: 1px solid #e1e4e8;
160+
border: 1px solid var(--ifm-color-emphasis-200);
160161
}
161162

162163
.breakdownItem {
163-
background-color: #f6f8fa;
164+
background-color: var(--ifm-color-emphasis-50);
164165
padding: 1.25rem;
165166
border-radius: 6px;
166-
border: 1px solid #e1e4e8;
167+
border: 1px solid var(--ifm-color-emphasis-200);
167168
}
168169

169170
.breakdownItem h4 {
170171
margin-bottom: 0.75rem;
171-
color: #24292f;
172+
color: var(--ifm-color-emphasis-900);
172173
font-weight: 600;
173174
font-size: 1.1rem;
174175
padding-bottom: 0.5rem;
175-
border-bottom: 1px solid #e1e4e8;
176+
border-bottom: 1px solid var(--ifm-color-emphasis-200);
176177
}
177178

178179
.breakdownItem ul {
@@ -189,19 +190,19 @@
189190
.breakdownItem li {
190191
margin: 0.5rem 0;
191192
font-size: 0.9rem;
192-
color: #24292f;
193+
color: var(--ifm-color-emphasis-700);
193194
}
194195

195196
.calculationNote {
196197
margin-top: 2rem;
197198
padding-top: 1.5rem;
198-
border-top: 1px solid #e1e4e8;
199+
border-top: 1px solid var(--ifm-color-emphasis-200);
199200
}
200201

201202
.calculationNote p {
202203
font-weight: 500;
203204
margin-bottom: 0.75rem;
204-
color: #24292f;
205+
color: var(--ifm-color-emphasis-900);
205206
}
206207

207208
.calculationNote ul {
@@ -212,7 +213,7 @@
212213
.calculationNote li {
213214
margin: 0.25rem 0;
214215
font-size: 0.9rem;
215-
color: #24292f;
216+
color: var(--ifm-color-emphasis-700);
216217
}
217218

218219
.tableContainer {
@@ -236,6 +237,7 @@
236237
white-space: nowrap;
237238
overflow: hidden;
238239
text-overflow: ellipsis;
240+
color: var(--ifm-color-emphasis-700);
239241
}
240242

241243
.table th:first-child,
@@ -255,9 +257,9 @@
255257
}
256258

257259
.table th {
258-
background-color: #f6f8fa;
260+
background-color: var(--ifm-color-emphasis-50);
259261
font-weight: 500;
260-
color: #24292f;
262+
color: var(--ifm-color-emphasis-900);
261263
}
262264

263265
.sortable {
@@ -267,38 +269,38 @@
267269
}
268270

269271
.sortable:hover {
270-
background-color: #e1e4e8;
272+
background-color: var(--ifm-color-emphasis-100);
271273
}
272274

273275
.table tbody tr {
274-
background-color: #ffffff;
276+
background-color: var(--ifm-background-surface-color);
275277
}
276278

277279
.table tbody tr:nth-child(even) {
278-
background-color: #f8f9fa;
280+
background-color: var(--ifm-color-emphasis-50);
279281
}
280282

281283
.table tbody tr:hover {
282-
background-color: #f1f3f5;
284+
background-color: var(--ifm-color-emphasis-100);
283285
}
284286

285287
.note {
286288
margin: 1rem 0;
287289
padding: 1rem;
288-
border-left: 4px solid #0969da;
289-
background-color: #f6f8fa;
290+
border-left: 4px solid var(--ifm-color-primary);
291+
background-color: var(--ifm-color-emphasis-50);
290292
border-radius: 0 6px 6px 0;
291293
}
292294

293295
.noteTitle {
294296
font-weight: 600;
295297
margin-bottom: 0.5rem;
296-
color: #0969da;
298+
color: var(--ifm-color-primary);
297299
}
298300

299301
.noteContent {
300302
margin: 0;
301-
color: #24292f;
303+
color: var(--ifm-color-emphasis-700);
302304
}
303305

304306
.noteContent ul {
@@ -315,25 +317,26 @@
315317
bottom: 20px;
316318
right: 20px;
317319
z-index: 1000;
318-
background: #ffffff;
319-
border: 1px solid #e1e4e8;
320+
background: var(--ifm-background-surface-color);
321+
border: 1px solid var(--ifm-color-emphasis-200);
320322
border-radius: 4px;
321323
padding: 8px 12px;
322324
cursor: pointer;
323325
display: flex;
324326
align-items: center;
325327
gap: 8px;
326-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
328+
box-shadow: 0 1px 3px var(--ifm-color-emphasis-200);
327329
opacity: 0;
328330
transition: opacity 0.3s ease;
331+
color: var(--ifm-color-emphasis-700);
329332
}
330333

331334
.sidebarToggle.visible {
332335
opacity: 1;
333336
}
334337

335338
.sidebarToggle:hover {
336-
background: #f6f8fa;
339+
background: var(--ifm-color-emphasis-50);
337340
}
338341

339342
.sidebar {
@@ -342,8 +345,8 @@
342345
right: -400px;
343346
width: 400px;
344347
height: 100vh;
345-
background: #ffffff;
346-
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
348+
background: var(--ifm-background-surface-color);
349+
box-shadow: -2px 0 5px var(--ifm-color-emphasis-200);
347350
transition: right 0.3s ease;
348351
z-index: 999;
349352
overflow-y: auto;
@@ -366,12 +369,12 @@
366369
align-items: center;
367370
margin-bottom: 1rem;
368371
padding-bottom: 1rem;
369-
border-bottom: 1px solid #e1e4e8;
372+
border-bottom: 1px solid var(--ifm-color-emphasis-200);
370373
}
371374

372375
.sidebarHeader h3 {
373376
margin: 0;
374-
color: #24292f;
377+
color: var(--ifm-color-emphasis-900);
375378
font-size: 1.25rem;
376379
}
377380

@@ -380,13 +383,13 @@
380383
border: none;
381384
font-size: 1.5rem;
382385
cursor: pointer;
383-
color: #24292f;
386+
color: var(--ifm-color-emphasis-700);
384387
padding: 4px;
385388
line-height: 1;
386389
}
387390

388391
.closeButton:hover {
389-
color: #0969da;
392+
color: var(--ifm-color-primary);
390393
}
391394

392395
@media (max-width: 768px) {

0 commit comments

Comments
 (0)