Skip to content

Commit af888b4

Browse files
mbillowmbillow
committed
fix: move to csh bootstrap, fix some weird colors
1 parent 0a1c3a7 commit af888b4

1 file changed

Lines changed: 70 additions & 35 deletions

File tree

‎templates/layout.html‎

Lines changed: 70 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -5,47 +5,47 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>PINT | {{block "title" .}}CSH WiFi{{end}}</title>
8-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
8+
<link rel="stylesheet" href="https://assets.csh.rit.edu/csh-material-bootstrap/5.3.8/dist/css/bootstrap.min.css" media="screen">
99
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css">
1010
<style>
1111
/* ── Design tokens ──────────────────────────────────────────
1212
Light values reference Bootstrap CSS vars.
1313
Dark values are overridden in the media query below. */
1414
:root {
15-
--pint-code-color: var(--bs-secondary);
16-
--pint-code-bg: var(--bs-light);
17-
--pint-alt-header-bg: var(--bs-light);
18-
--pint-alt-header-color: var(--bs-dark);
19-
--pint-alt-header-border: var(--bs-secondary);
20-
--pint-surface: var(--bs-white);
21-
--pint-surface-raised: var(--bs-light);
22-
--pint-border: var(--bs-border-color);
23-
--pint-text: var(--bs-dark);
24-
--pint-muted: var(--bs-secondary);
25-
--pint-muted-strong: var(--bs-secondary);
26-
--pint-input-bg: var(--bs-white);
27-
--pint-input-bg-ro: var(--bs-light);
28-
--pint-input-border: var(--bs-secondary);
15+
--pint-code-color: #6c757d;
16+
--pint-code-bg: #f8f9fa;
17+
--pint-alt-header-bg: #f8f9fa;
18+
--pint-alt-header-color: #212529;
19+
--pint-alt-header-border: #dee2e6;
20+
--pint-surface: #fff;
21+
--pint-surface-raised: #f8f9fa;
22+
--pint-border: #dee2e6;
23+
--pint-text: #212529;
24+
--pint-muted: #6c757d;
25+
--pint-muted-strong: #6c757d;
26+
--pint-input-bg: #fff;
27+
--pint-input-bg-ro: #f8f9fa;
28+
--pint-input-border: #ced4da;
2929
}
3030

3131
@media (prefers-color-scheme: dark) {
3232
:root {
33-
/* Dark surface scale — Bootstrap 5.0 has no dark tokens */
34-
--pint-body-bg: var(--bs-gray-dark);
35-
--pint-code-color: var(--bs-secondary);
36-
--pint-code-bg: var(--bs-dark);
37-
--pint-alt-header-bg: var(--bs-dark);
38-
--pint-alt-header-color: var(--bs-light);
39-
--pint-alt-header-border: var(--bs-gray);
40-
--pint-surface: var(--bs-gray-dark);
41-
--pint-surface-raised: var(--bs-dark);
42-
--pint-border: rgba(var(--bs-light-rgb), .08);
43-
--pint-text: var(--bs-light);
44-
--pint-muted: var(--bs-gray);
45-
--pint-muted-strong: var(--bs-secondary);
46-
--pint-input-bg: var(--bs-dark);
47-
--pint-input-bg-ro: var(--bs-gray-dark);
48-
--pint-input-border: var(--bs-gray);
33+
/* Concrete dark values — don't rely on CSH bootstrap's --bs-* vars */
34+
--pint-body-bg: #1e1e1e;
35+
--pint-code-color: #adb5bd;
36+
--pint-code-bg: #2a2a2a;
37+
--pint-alt-header-bg: #2a2a2a;
38+
--pint-alt-header-color: #e0e0e0;
39+
--pint-alt-header-border: #444;
40+
--pint-surface: #2a2a2a;
41+
--pint-surface-raised: #333;
42+
--pint-border: rgba(255,255,255,.1);
43+
--pint-text: #e0e0e0;
44+
--pint-muted: #888;
45+
--pint-muted-strong: #adb5bd;
46+
--pint-input-bg: #2a2a2a;
47+
--pint-input-bg-ro: #1e1e1e;
48+
--pint-input-border: #555;
4949
}
5050
}
5151

@@ -59,6 +59,34 @@
5959
font-size: .875em;
6060
}
6161

62+
/* ── Restore gray secondary buttons (CSH theme maps --bs-secondary to brand red) */
63+
.btn-secondary {
64+
--bs-btn-color: #fff;
65+
--bs-btn-bg: #6c757d;
66+
--bs-btn-border-color: #6c757d;
67+
--bs-btn-hover-color: #fff;
68+
--bs-btn-hover-bg: #5c636a;
69+
--bs-btn-hover-border-color: #565e64;
70+
--bs-btn-active-color: #fff;
71+
--bs-btn-active-bg: #565e64;
72+
--bs-btn-active-border-color:#51585e;
73+
--bs-btn-disabled-color: #fff;
74+
--bs-btn-disabled-bg: #6c757d;
75+
--bs-btn-disabled-border-color:#6c757d;
76+
}
77+
.btn-outline-secondary {
78+
--bs-btn-color: #6c757d;
79+
--bs-btn-border-color: #6c757d;
80+
--bs-btn-hover-color: #fff;
81+
--bs-btn-hover-bg: #6c757d;
82+
--bs-btn-hover-border-color: #6c757d;
83+
--bs-btn-active-color: #fff;
84+
--bs-btn-active-bg: #6c757d;
85+
--bs-btn-active-border-color:#6c757d;
86+
--bs-btn-disabled-color: #6c757d;
87+
--bs-btn-disabled-border-color:#6c757d;
88+
}
89+
6290
/* ── Custom components ──────────────────────────────────── */
6391
.platform-header-alt {
6492
background-color: var(--pint-alt-header-bg);
@@ -77,7 +105,7 @@
77105

78106
/* ── Dark mode surface overrides ────────────────────────── */
79107
@media (prefers-color-scheme: dark) {
80-
body { background-color: var(--pint-body-bg); color: var(--pint-text); }
108+
body { background-color: var(--pint-body-bg); color: var(--pint-text); --bs-body-color: var(--pint-text); --bs-body-bg: var(--pint-body-bg); }
81109

82110
.card { background-color: var(--pint-surface); border-color: var(--pint-border); }
83111

@@ -105,8 +133,15 @@
105133
}
106134
.input-group > .btn-secondary:hover { background-color: var(--pint-surface-raised); }
107135

108-
.table { color: var(--pint-text); }
109-
.table-bordered > :not(caption) > * > * { border-color: var(--pint-border); }
136+
.table {
137+
--bs-table-color: var(--pint-text);
138+
--bs-table-bg: transparent;
139+
--bs-table-border-color: var(--pint-border);
140+
--bs-table-hover-bg: rgba(255,255,255,.04);
141+
--bs-table-striped-bg: rgba(255,255,255,.04);
142+
color: var(--pint-text);
143+
}
144+
.table > :not(caption) > * > * { border-color: var(--pint-border); }
110145
.table > :not(:first-child) { border-top-color: var(--pint-border); }
111146

112147
.modal-content { background-color: var(--pint-surface); color: var(--pint-text); border-color: var(--pint-border); }
@@ -177,7 +212,7 @@
177212
<div class="container mt-4 mb-5">
178213
{{block "content" .}}{{end}}
179214
</div>
180-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
215+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
181216
{{block "scripts" .}}{{end}}
182217
</body>
183218
</html>

0 commit comments

Comments
 (0)