Skip to content

Commit b7a132a

Browse files
ReenigneArcherReenigneArcher
committed
Use themeable classes for license, gamepad, projects
Replace hardcoded Bootstrap dark/text-white styles with custom themeable classes and centralized SASS rules. Updated templates and includes to use .license-entry-item, .license-card, .gamepad-info-card, .gamepad-info-table, stick/raw-data classes, and project link/nav classes. Moved inline styles into _sass/styles.scss (stick visuals, card theming, hover states, and text-muted override) and removed direct JS color/style mutations (gamepad card background and explicit text color classes). These changes centralize theming for light/dark support and improve maintainability while preserving existing functionality.
1 parent d0aa641 commit b7a132a

7 files changed

Lines changed: 154 additions & 42 deletions

File tree

‎_includes/license-entry.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
<li class="list-group-item bg-dark text-white">
1+
<li class="list-group-item license-entry-item">
22
<div class="d-flex justify-content-between align-items-center">
33
<div>
44
<strong>{{ include.item.name }}</strong>
55
{% if include.item.version %}<span class="ms-2 badge bg-secondary">{{ include.item.version }}</span>{% endif %}
6-
<small class="d-block text-muted">
7-
<a href="{{ include.item.url }}" target="_blank" class="text-info">{{ include.item.url }}</a>
6+
<small class="d-block license-entry-text-muted">
7+
<a href="{{ include.item.url }}" target="_blank" class="license-entry-link">{{ include.item.url }}</a>
88
</small>
99
</div>
1010
<span class="badge bg-primary">{{ include.item.license }}</span>

‎_sass/styles.scss‎

Lines changed: 124 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -144,42 +144,156 @@ table tr:nth-child(2n) {
144144
background-color: var(--footer-col);
145145
}
146146

147-
.list-group-item.bg-dark {
148-
border-color: var(--navbar-col);
147+
/* License entry styling */
148+
.list-group {
149+
--bs-list-group-bg: var(--navbar-col);
149150
}
150151

151-
.list-group-item.bg-dark .text-muted {
152+
/* License entry styling */
153+
.license-entry-item {
154+
background-color: var(--navbar-col);
152155
color: var(--text-col);
156+
border-color: var(--navbar-col);
153157
}
154158

155-
.list-group-item.bg-dark a {
159+
.license-entry-text-muted {
160+
color: var(--footer-text-col);
161+
}
162+
163+
.license-entry-link {
164+
color: var(--link-col);
156165
text-decoration: none;
157166
}
158167

159-
.list-group-item.bg-dark a:hover {
168+
.license-entry-link:hover {
169+
color: var(--hover-col);
160170
text-decoration: underline;
161171
}
162172

163-
/* list groups */
164-
.list-group {
165-
--bs-list-group-bg: var(--navbar-col);
173+
/* License card styling */
174+
.license-card {
175+
background-color: var(--navbar-col);
176+
color: var(--text-col);
177+
}
178+
179+
/* Gamepad info cards */
180+
.gamepad-info-card {
181+
background-color: var(--navbar-col);
182+
color: var(--text-col);
183+
}
184+
185+
.gamepad-info-table {
186+
color: var(--text-col);
187+
}
188+
189+
.gamepad-info-table th,
190+
.gamepad-info-table td {
191+
border-color: var(--footer-col);
192+
}
193+
194+
.gamepad-raw-data {
195+
background-color: var(--footer-col);
196+
color: var(--text-col);
197+
}
198+
199+
/* Stick visualization */
200+
.stick-circle {
201+
width: 120px;
202+
height: 120px;
203+
border: 2px solid var(--navbar-border-col);
204+
border-radius: 50%;
205+
}
206+
207+
.stick-position {
208+
width: 16px;
209+
height: 16px;
210+
border-radius: 50%;
211+
transform: translate(-50%, -50%);
212+
}
213+
214+
.stick-line-vertical {
215+
width: 2px;
216+
height: 100%;
217+
background-color: var(--navbar-border-col);
218+
left: 50%;
219+
top: 0;
220+
}
221+
222+
.stick-line-horizontal {
223+
width: 100%;
224+
height: 2px;
225+
background-color: var(--navbar-border-col);
226+
left: 0;
227+
top: 50%;
228+
}
229+
230+
/* Project card styling */
231+
.project-card-link {
232+
color: var(--text-col);
233+
}
234+
235+
.project-card-link:hover {
236+
color: var(--link-col);
237+
}
238+
239+
.project-nav-link {
240+
color: var(--text-col);
241+
}
242+
243+
.project-nav-link:hover {
244+
color: var(--hover-col);
166245
}
167246

168247
/* gamepad selector cards */
169248
.gamepad-selector-card {
170249
transition: all 0.2s ease-in-out;
171250
user-select: none;
251+
background-color: var(--navbar-col);
252+
color: var(--text-col);
253+
}
254+
255+
.gamepad-selector-card.border-secondary {
256+
background-color: var(--footer-col);
257+
}
258+
259+
[data-bs-theme="dark"] .gamepad-selector-card.border-primary {
260+
background-color: rgba(13, 110, 253, 0.15);
261+
}
262+
263+
[data-bs-theme="light"] .gamepad-selector-card.border-primary {
264+
background-color: rgba(13, 110, 253, 0.08);
172265
}
173266

174267
.gamepad-selector-card:hover {
175268
transform: translateY(-2px);
269+
}
270+
271+
[data-bs-theme="dark"] .gamepad-selector-card:hover {
176272
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
177273
}
178274

179-
.gamepad-selector-card.border-primary {
275+
[data-bs-theme="light"] .gamepad-selector-card:hover {
276+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
277+
}
278+
279+
[data-bs-theme="dark"] .gamepad-selector-card.border-primary {
180280
box-shadow: 0 0 10px rgba(13, 110, 253, 0.3);
181281
}
182282

183-
.gamepad-selector-card.border-primary:hover {
283+
[data-bs-theme="light"] .gamepad-selector-card.border-primary {
284+
box-shadow: 0 0 10px rgba(13, 110, 253, 0.2);
285+
}
286+
287+
[data-bs-theme="dark"] .gamepad-selector-card.border-primary:hover {
184288
box-shadow: 0 4px 12px rgba(13, 110, 253, 0.5);
185289
}
290+
291+
[data-bs-theme="light"] .gamepad-selector-card.border-primary:hover {
292+
box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
293+
}
294+
295+
/* Override Bootstrap's text-muted to use theme colors */
296+
.text-muted {
297+
color: var(--footer-text-col) !important;
298+
}
299+

‎assets/js/gamepad-tester.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -105,10 +105,8 @@ document.addEventListener('DOMContentLoaded', function() {
105105
// Mark active gamepad card
106106
if (isActive) {
107107
card.classList.add('border-primary');
108-
card.style.backgroundColor = 'rgba(13, 110, 253, 0.15)';
109108
} else {
110109
card.classList.add('border-secondary');
111-
card.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';
112110
}
113111

114112
const cardBody = document.createElement('div');
@@ -120,12 +118,12 @@ document.addEventListener('DOMContentLoaded', function() {
120118
cardBody.innerHTML = `
121119
<div class="d-flex align-items-center">
122120
<div class="me-2">
123-
<i class="fas fa-gamepad fa-2x ${isActive ? 'text-primary' : 'text-light'}"></i>
121+
<i class="fas fa-gamepad fa-2x ${isActive ? 'text-primary' : ''}"></i>
124122
</div>
125123
<div class="flex-grow-1">
126-
<div class="fw-bold small text-truncate text-white">${typeInfo.name}</div>
127-
<div class="text-light opacity-75" style="font-size: 0.75rem;">Index: ${index}</div>
128-
<div class="text-light opacity-75" style="font-size: 0.7rem;">${gamepadInfo.buttons.length} buttons, ${gamepadInfo.axes.length} axes</div>
124+
<div class="fw-bold small text-truncate">${typeInfo.name}</div>
125+
<div class="opacity-75" style="font-size: 0.75rem;">Index: ${index}</div>
126+
<div class="opacity-75" style="font-size: 0.7rem;">${gamepadInfo.buttons.length} buttons, ${gamepadInfo.axes.length} axes</div>
129127
</div>
130128
<div class="ms-2" style="min-width: 50px; text-align: right;">
131129
${isActive ? '<span class="badge bg-primary">Active</span>' : ''}

‎assets/js/projects.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,11 +72,11 @@ $(document).ready(function(){
7272
banner_link.append(banner)
7373

7474
let card_body = document.createElement("div")
75-
card_body.className = "card-body text-white p-4 rounded-0"
75+
card_body.className = "card-body p-4 rounded-0"
7676
card.appendChild(card_body)
7777

7878
let card_title_link = document.createElement("a")
79-
card_title_link.className = "text-decoration-none link-light crowdin-ignore"
79+
card_title_link.className = "text-decoration-none project-card-link crowdin-ignore"
8080
card_title_link.href = sorted[repo]['html_url']
8181
card_title_link.target = "_blank"
8282
card_body.appendChild(card_title_link)
@@ -158,7 +158,7 @@ $(document).ready(function(){
158158
card_footer.appendChild(repo_data_row)
159159

160160
let github_link = document.createElement("a")
161-
github_link.className = "nav-link text-white ms-3"
161+
github_link.className = "nav-link project-nav-link ms-3"
162162
github_link.href = sorted[repo]['html_url']
163163
github_link.target = "_blank"
164164
repo_data_row.appendChild(github_link)
@@ -178,7 +178,7 @@ $(document).ready(function(){
178178
})
179179

180180
let star_link = document.createElement("a")
181-
star_link.className = "nav-link nav-link-sm text-white ms-3 crowdin-ignore"
181+
star_link.className = "nav-link nav-link-sm project-nav-link ms-3 crowdin-ignore"
182182
star_link.href = `https://star-history.com/#${sorted[repo]['full_name']}`
183183
star_link.target = "_blank"
184184
star_link.textContent = window.formatNumber(sorted[repo]['stargazers_count'])
@@ -189,7 +189,7 @@ $(document).ready(function(){
189189
star_link.prepend(star_link_image)
190190

191191
let fork_link = document.createElement("a")
192-
fork_link.className = "nav-link nav-link-sm text-white ms-3 crowdin-ignore"
192+
fork_link.className = "nav-link nav-link-sm project-nav-link ms-3 crowdin-ignore"
193193
fork_link.href = `https://github.com/${sorted[repo]['full_name']}/network/members`
194194
fork_link.target = "_blank"
195195
fork_link.textContent = window.formatNumber(sorted[repo]['forks'])

‎assets/js/roadmap.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ document.addEventListener('DOMContentLoaded', function() {
4242
});
4343

4444
const cardBody = document.createElement('div');
45-
cardBody.className = 'card-body text-white p-4 rounded-0';
45+
cardBody.className = 'card-body p-4 rounded-0';
4646

4747
// Issue title
4848
const titleEl = document.createElement('h5');

‎gamepad-tester.html‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@ <h2 class="fw-bolder mb-1">Gamepad Tester</h2>
3333

3434
<div class="row g-3" id="gamepad-info" style="display: none;">
3535
<div class="col-md-4">
36-
<div class="card bg-dark text-white h-100">
36+
<div class="card gamepad-info-card h-100">
3737
<div class="card-header py-1">
3838
<h5 class="card-title mb-0">Gamepad Info</h5>
3939
</div>
4040
<div class="card-body p-2">
4141
<div class="table-responsive">
42-
<table class="table table-dark table-sm mb-0">
42+
<table class="table gamepad-info-table table-sm mb-0">
4343
<tbody>
4444
<tr><th>ID</th><td id="gamepad-id">-</td></tr>
4545
<tr><th>Index</th><td id="gamepad-index">-</td></tr>
@@ -57,7 +57,7 @@ <h5 class="card-title mb-0">Gamepad Info</h5>
5757
</div>
5858

5959
<div class="col-md-3">
60-
<div class="card bg-dark text-white h-100">
60+
<div class="card gamepad-info-card h-100">
6161
<div class="card-header py-1">
6262
<h5 class="card-title mb-0">Vibration Test</h5>
6363
</div>
@@ -110,7 +110,7 @@ <h5 class="card-title mb-0">Vibration Test</h5>
110110
</div>
111111

112112
<div class="col-md-5">
113-
<div class="card bg-dark text-white h-100">
113+
<div class="card gamepad-info-card h-100">
114114
<div class="card-header py-1">
115115
<h5 class="card-title mb-0">Buttons</h5>
116116
</div>
@@ -121,7 +121,7 @@ <h5 class="card-title mb-0">Buttons</h5>
121121
</div>
122122

123123
<div class="col-md-6">
124-
<div class="card bg-dark text-white h-100">
124+
<div class="card gamepad-info-card h-100">
125125
<div class="card-header py-1">
126126
<h5 class="card-title mb-0">Axes</h5>
127127
</div>
@@ -132,7 +132,7 @@ <h5 class="card-title mb-0">Axes</h5>
132132
</div>
133133

134134
<div class="col-md-6">
135-
<div class="card bg-dark text-white h-100">
135+
<div class="card gamepad-info-card h-100">
136136
<div class="card-header py-1">
137137
<h5 class="card-title mb-0">Sticks</h5>
138138
</div>
@@ -141,20 +141,20 @@ <h5 class="card-title mb-0">Sticks</h5>
141141
<div class="col-6">
142142
<div class="stick-container text-center">
143143
<h6 class="mb-1">Left</h6>
144-
<div class="position-relative mx-auto" style="width: 120px; height: 120px; border: 2px solid #555; border-radius: 50%;">
145-
<div id="left-stick-position" class="position-absolute bg-primary" style="width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%);"></div>
146-
<div class="position-absolute" style="width: 2px; height: 100%; background-color: #555; left: 50%; top: 0;"></div>
147-
<div class="position-absolute" style="width: 100%; height: 2px; background-color: #555; left: 0; top: 50%;"></div>
144+
<div class="position-relative mx-auto stick-circle">
145+
<div id="left-stick-position" class="position-absolute bg-primary stick-position"></div>
146+
<div class="position-absolute stick-line-vertical"></div>
147+
<div class="position-absolute stick-line-horizontal"></div>
148148
</div>
149149
</div>
150150
</div>
151151
<div class="col-6">
152152
<div class="stick-container text-center">
153153
<h6 class="mb-1">Right</h6>
154-
<div class="position-relative mx-auto" style="width: 120px; height: 120px; border: 2px solid #555; border-radius: 50%;">
155-
<div id="right-stick-position" class="position-absolute bg-primary" style="width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%);"></div>
156-
<div class="position-absolute" style="width: 2px; height: 100%; background-color: #555; left: 50%; top: 0;"></div>
157-
<div class="position-absolute" style="width: 100%; height: 2px; background-color: #555; left: 0; top: 50%;"></div>
154+
<div class="position-relative mx-auto stick-circle">
155+
<div id="right-stick-position" class="position-absolute bg-primary stick-position"></div>
156+
<div class="position-absolute stick-line-vertical"></div>
157+
<div class="position-absolute stick-line-horizontal"></div>
158158
</div>
159159
</div>
160160
</div>
@@ -164,12 +164,12 @@ <h6 class="mb-1">Right</h6>
164164
</div>
165165

166166
<div class="col-12 d-none">
167-
<div class="card bg-dark text-white">
167+
<div class="card gamepad-info-card">
168168
<div class="card-header py-1">
169169
<h5 class="card-title mb-0">Raw Data</h5>
170170
</div>
171171
<div class="card-body p-2">
172-
<pre id="raw-data" class="bg-dark text-light p-2 rounded mb-0" style="max-height: 200px; overflow-y: auto;"></pre>
172+
<pre id="raw-data" class="gamepad-raw-data p-2 rounded mb-0" style="max-height: 200px; overflow-y: auto;"></pre>
173173
</div>
174174
</div>
175175
</div>

‎licenses.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ <h2 class="mb-4">Licenses & Attributions</h2>
1010

1111
<p class="lead">This website makes use of the following third-party tools, libraries, and resources.</p>
1212

13-
<div class="card bg-dark text-white mb-4">
13+
<div class="card license-card mb-4">
1414
<div class="card-header">
1515
<h5 class="card-title mb-0">Dependencies</h5>
1616
</div>

0 commit comments

Comments
 (0)