Skip to content

Commit 17fc4be

Browse files
fehmerMiodecCopilot
authored
impr: use data-nav-item to address navigation items (@fehmer) (monkeytypegame#7558)
Co-authored-by: Jack <jack@monkeytype.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 parent 1f5255c commit 17fc4be

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+288
-399
lines changed

‎frontend/src/html/header.html‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ <h1 class="text">
4949
<a
5050
id="startTestButton"
5151
class="textButton view-start"
52+
data-nav-item="test"
5253
href="/"
5354
onclick="this.blur()"
5455
router-link
@@ -60,6 +61,7 @@ <h1 class="text">
6061
</a>
6162
<a
6263
class="textButton view-leaderboards"
64+
data-nav-item="leaderboards"
6365
href="/leaderboards"
6466
onclick="this.blur()"
6567
router-link
@@ -71,6 +73,7 @@ <h1 class="text">
7173
</a>
7274
<a
7375
class="textButton view-about"
76+
data-nav-item="about"
7477
href="/about"
7578
onclick="this.blur()"
7679
router-link
@@ -82,6 +85,7 @@ <h1 class="text">
8285
</a>
8386
<a
8487
class="textButton view-settings"
88+
data-nav-item="settings"
8589
href="/settings"
8690
onclick="this.blur()"
8791
router-link
@@ -92,14 +96,19 @@ <h1 class="text">
9296
</div>
9397
</a>
9498
<div class="spacer"></div>
95-
<button class="text showAlerts" onclick="this.blur()">
99+
<button
100+
class="text showAlerts"
101+
onclick="this.blur()"
102+
data-nav-item="alerts"
103+
>
96104
<div class="icon">
97105
<i class="fas fa-fw fa-bell"></i>
98106
</div>
99107
<div class="notificationBubble hidden"></div>
100108
</button>
101109
<a
102110
class="textButton view-login"
111+
data-nav-item="login"
103112
href="/login"
104113
onclick="this.blur()"
105114
router-link
@@ -109,6 +118,7 @@ <h1 class="text">
109118
<div class="accountButtonAndMenu hidden">
110119
<a
111120
class="textButton view-account"
121+
data-nav-item="account"
112122
href="/account"
113123
onclick="this.blur()"
114124
router-link

‎frontend/static/themes/9009.css‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,18 @@ kbd {
33
background-color: var(--main-color);
44
}
55

6-
nav > .textButton {
6+
[data-nav-item] {
77
color: var(--main-color);
88
}
99

10-
nav > .textButton:nth-child(1) {
10+
[data-nav-item="test"] {
1111
color: var(--error-color);
1212
}
1313

14-
nav > .textButton:nth-child(4) {
14+
[data-nav-item="alerts"] {
15+
color: var(--color-alt);
16+
}
17+
18+
[data-nav-item="settings"] {
1519
color: var(--caret-color);
1620
}

‎frontend/static/themes/aether.css‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
1-
nav > .textButton:nth-child(1) {
1+
[data-nav-item="test"] {
22
color: #e4002b;
33
}
44

5-
nav > .textButton:nth-child(2) {
5+
[data-nav-item="leaderboards"] {
66
color: #c53562;
77
}
88

9-
nav > .textButton:nth-child(3) {
9+
[data-nav-item="about"] {
1010
color: #95549e;
1111
}
1212

13-
nav > .textButton:nth-child(4) {
13+
[data-nav-item="settings"] {
1414
color: #6744a1;
1515
}
1616

17-
nav > .textButton:nth-child(5),
18-
nav > .textButton:nth-child(6) {
17+
[data-nav-item="alerts"],
18+
[data-nav-item="account"],
19+
[data-nav-item="login"] {
1920
color: #393c73;
2021
}

‎frontend/static/themes/aurora.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,7 @@ header .button.discord.dotHidden::after {
5050
#logo .bottom,
5151
header .config .group .buttons .textButton.active,
5252
#result .stats .group .bottom,
53-
nav .textButton:hover,
54-
nav button.text:hover,
53+
[data-nav-item]:hover,
5554
header .config .group .buttons .textButton:hover,
5655
footer .textButton:hover,
5756
footer button.text:hover,

‎frontend/static/themes/beach.css‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
nav > .textButton:nth-child(1),
2-
nav > .textButton:nth-child(2),
3-
nav > .textButton:nth-child(3),
4-
nav > .textButton:nth-child(4),
5-
nav > .textButton:nth-child(5),
6-
nav > .textButton:nth-child(6) {
1+
[data-nav-item] {
72
color: #ff6f69;
83
}

‎frontend/static/themes/bingsu.css‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
/* .word.error{
2-
border-bottom: double 4px var(--error-color);
3-
} */
4-
5-
nav .textButton:nth-child(1) {
1+
[data-nav-item="test"] {
62
color: var(--caret-color);
73
}

‎frontend/static/themes/catppuccin.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
1-
nav .view-start {
1+
[data-nav-item="test"] {
22
color: #f38ba8;
33
}
44

5-
nav .view-leaderboards {
5+
[data-nav-item="leaderboards"] {
66
color: #fab387;
77
}
88

9-
nav .view-about {
9+
[data-nav-item="about"] {
1010
color: #f9e2af;
1111
}
1212

13-
nav .view-settings {
13+
[data-nav-item="settings"] {
1414
color: #a6e3a1;
1515
}
1616

17-
nav .view-account {
17+
[data-nav-item="account"] {
1818
color: #89dceb;
1919
}
2020

21-
nav .showAlerts {
21+
[data-nav-item="alerts"] {
2222
color: #89b4fa;
2323
}
2424

25-
nav .signInOut {
25+
[data-nav-item="login"] {
2626
color: #b4befe;
2727
}

‎frontend/static/themes/chaos_theory.css‎

Lines changed: 30 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ header #logo .icon {
5959
align-content: right;
6060
}
6161

62-
header.focus nav .textButton,
62+
header.focus [data-nav-item],
6363
header.focus nav:before,
6464
header.focus nav:after {
6565
background: var(--sub-color);
@@ -94,107 +94,103 @@ nav {
9494
gap: 0.5rem;
9595
}
9696

97-
nav > .textButton {
97+
[data-nav-item] {
9898
border-radius: 10rem i !important;
9999
color: var(--bg-color);
100100
transition: 0.5s;
101101
}
102102

103-
nav > .textButton:nth-child(1) {
103+
[data-nav-item="test"] {
104104
background: #ab92e1;
105105
}
106106

107-
nav > .textButton:nth-child(2) {
107+
[data-nav-item="leaderboards"] {
108108
background: #f3ea5d;
109109
}
110110

111-
nav > .textButton:nth-child(3) {
111+
[data-nav-item="about"] {
112112
background: #7ae1bf;
113113
}
114114

115-
nav > .textButton:nth-child(4) {
115+
[data-nav-item="settings"] {
116116
background: #ff5869;
117117
}
118118

119-
nav > .textButton:nth-child(5) {
119+
[data-nav-item="account"] {
120120
background: #fc76d9;
121121
}
122122

123-
nav > .textButton:nth-child(6) {
124-
background: #fc76d9;
123+
nav .notificationBubble {
124+
box-shadow: none;
125+
background: var(--color-bg);
126+
padding-right: 0.2em;
127+
right: 0.85em;
128+
left: 2.75em;
125129
}
126130

127-
nav > .textButton:nth-child(7) {
128-
background: #ab92e1;
131+
nav .level {
132+
background: var(--color-bg);
133+
color: var(--main-color);
129134
}
130135

131-
nav > .textButton:nth-child(8) {
132-
background: #f3ea5d;
136+
[data-nav-item="alerts"] {
137+
background: #fc76d9;
138+
}
139+
140+
[data-nav-item="login"] {
141+
background: #ab92e1;
133142
}
134143

135-
body.crtmode nav .textButton:nth-child(1) {
144+
body.crtmode [data-nav-item="test"] {
136145
box-shadow:
137146
3px 0 1px color-mix(in srgb, #ab92e1 20%, transparent),
138147
-3px 0 color-mix(in srgb, #ab92e1 30%, transparent),
139148
0 0 3px;
140149
}
141150

142-
body.crtmode nav .textButton:nth-child(2) {
151+
body.crtmode [data-nav-item="leaderboards"] {
143152
box-shadow:
144153
3px 0 1px color-mix(in srgb, #f3ea5d 20%, transparent),
145154
-3px 0 color-mix(in srgb, #f3ea5d 30%, transparent),
146155
0 0 3px;
147156
}
148157

149-
body.crtmode nav .textButton:nth-child(3) {
158+
body.crtmode [data-nav-item="about"] {
150159
box-shadow:
151160
3px 0 1px color-mix(in srgb, #7ae1bf 20%, transparent),
152161
-3px 0 color-mix(in srgb, #7ae1bf 30%, transparent),
153162
0 0 3px;
154163
}
155164

156-
body.crtmode nav .textButton:nth-child(4) {
165+
body.crtmode [data-nav-item="settings"] {
157166
box-shadow:
158167
3px 0 1px color-mix(in srgb, #ff5869 20%, transparent),
159168
-3px 0 color-mix(in srgb, #ff5869 30%, transparent),
160169
0 0 3px;
161170
}
162171

163-
body.crtmode nav .textButton:nth-child(5) {
172+
body.crtmode [data-nav-item="account"],
173+
body.crtmode [data-nav-item="alerts"] {
164174
box-shadow:
165175
3px 0 1px color-mix(in srgb, #fc76d9 20%, transparent),
166176
-3px 0 color-mix(in srgb, #fc76d9 30%, transparent),
167177
0 0 3px;
168178
}
169179

170-
body.crtmode nav .textButton:nth-child(6) {
171-
box-shadow:
172-
3px 0 1px color-mix(in srgb, #fc76d9 20%, transparent),
173-
-3px 0 color-mix(in srgb, #fc76d9 30%, transparent),
174-
0 0 3px;
175-
}
176-
177-
body.crtmode nav .textButton:nth-child(7) {
180+
body.crtmode [data-nav-item="login"] {
178181
box-shadow:
179182
3px 0 1px color-mix(in srgb, #ab92e1 20%, transparent),
180183
-3px 0 color-mix(in srgb, #ab92e1 30%, transparent),
181184
0 0 3px;
182185
}
183186

184-
body.crtmode nav .textButton:nth-child(8) {
185-
box-shadow:
186-
3px 0 1px color-mix(in srgb, #f3ea5d 20%, transparent),
187-
-3px 0 color-mix(in srgb, #f3ea5d 30%, transparent),
188-
0 0 3px;
189-
}
190-
191187
body.crtmode #caret {
192188
box-shadow: none !important;
193189
filter: drop-shadow(3px 0px 1px var(--crt-main-color-glow))
194190
drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
195191
}
196192

197-
body.crtmode header.focus nav .textButton {
193+
body.crtmode header.focus [data-nav-item] {
198194
box-shadow:
199195
3px 0 1px var(--crt-sub-color-glow),
200196
-3px 0 var(--crt-sub-color-glow);

‎frontend/static/themes/cheesecake.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,6 @@
3131
}
3232
}
3333

34-
header > div#logo > div.icon > svg path {
34+
header .icon > svg path {
3535
animation: 10s linear infinite 0.1s cheesecake;
3636
}

‎frontend/static/themes/desert_oasis.css‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,3 @@
1-
nav > .textButton:nth-child(1) {
2-
color: #76bb40;
3-
}
4-
5-
nav > .textButton:nth-child(2) {
6-
color: #76bb40;
7-
}
8-
9-
nav > .textButton:nth-child(3) {
10-
color: #76bb40;
11-
}
12-
13-
nav > .textButton:nth-child(4) {
14-
color: #76bb40;
15-
}
16-
17-
nav > .textButton:nth-child(5),
18-
nav > .textButton:nth-child(6) {
1+
[data-nav-item] {
192
color: #76bb40;
203
}

0 commit comments

Comments
 (0)