Skip to content

Commit 1023fce

Browse files
tzhftzhf
committed
styles tweaks
1 parent c250bbb commit 1023fce

File tree

8 files changed

+92
-106
lines changed

8 files changed

+92
-106
lines changed

‎src/renderer/assets/override-gg-styles.css

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
display: none !important;
55
}
66

7-
[class^="header-desktop_desktopSectionLeft__"] > *:not(:first-child) {
7+
[class^='header-desktop_desktopSectionLeft__'] > *:not(:first-child) {
88
display: none;
99
}
1010

@@ -13,7 +13,7 @@
1313
}
1414

1515
/* Hide promo and daily challenge from menu */
16-
[class^="quick-search_wrapper__"] + * {
16+
[class^='quick-search_wrapper__'] + * {
1717
display: none !important;
1818
}
1919

@@ -23,7 +23,6 @@
2323
display: none;
2424
}
2525

26-
2726
/* Hides friends list bar */
2827
[class^='version4_sidebar__'] {
2928
display: none;
@@ -53,13 +52,18 @@
5352
width: 150px;
5453
}
5554

55+
[data-qa='perform-guess'] {
56+
min-width: 0;
57+
}
58+
5659
/* CG Guess Markers InfoWindow */
57-
[data-qa="correct-location-marker"] {
60+
[data-qa='correct-location-marker'] {
5861
position: relative;
5962
z-index: 999;
6063
}
64+
6165
/* change opacity of correct-location-marker on hover */
62-
[data-qa="correct-location-marker"]:hover {
66+
[data-qa='correct-location-marker']:hover {
6367
opacity: 0.4;
6468
}
6569

‎src/renderer/assets/styles.css

Lines changed: 47 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,21 @@ hr {
3131
border: none;
3232
}
3333

34+
#satelliteCanvas {
35+
display: none;
36+
width: 100%;
37+
height: 100%;
38+
z-index: 9;
39+
}
40+
41+
.username {
42+
white-space: nowrap;
43+
overflow: hidden;
44+
text-overflow: ellipsis;
45+
font-size: 15px;
46+
text-shadow: 1px 1px 0px #000;
47+
}
48+
3449
.avatar {
3550
background-size: contain;
3651
width: 26px;
@@ -54,13 +69,38 @@ hr {
5469
content: '\00a0';
5570
}
5671

57-
#satelliteCanvas {
58-
display: none;
59-
width: 100%;
60-
height: 100%;
61-
z-index: 9;
72+
/* GLOBAL MAP RENDERER */
73+
.custom-guess-marker {
74+
position: relative;
75+
pointer-events: auto !important;
76+
top: 22px;
77+
left: -1px;
78+
}
79+
.custom-guess-marker--avatar {
80+
width: 40px;
81+
height: 40px;
82+
object-fit: cover;
83+
border-radius: 100%;
84+
box-shadow: 0 0.375rem 0.625rem #1a1a1a47;
85+
}
86+
.custom-guess-marker--label {
87+
position: absolute;
88+
display: flex;
89+
align-items: center;
90+
justify-content: center;
91+
left: 26px;
92+
top: 28px;
93+
width: 16px;
94+
height: 16px;
95+
font-size: 11px;
96+
font-weight: bold;
97+
background-color: white;
98+
color: black;
99+
border: 1px solid black;
100+
border-radius: 50%;
62101
}
63102

103+
/* FORMS */
64104
.form__group {
65105
display: flex;
66106
align-items: center;
@@ -69,6 +109,7 @@ hr {
69109
height: 24px;
70110
margin-bottom: 0.3rem;
71111
}
112+
72113
.form__group label {
73114
width: 100%;
74115
display: flex;
@@ -106,7 +147,7 @@ hr {
106147
min-width: 520px;
107148
}
108149
.form__group input[type='text'][disabled] {
109-
color:gray
150+
color: gray;
110151
}
111152

112153
.form__group input[type='range'],
@@ -228,87 +269,3 @@ textarea:hover {
228269
color: rgb(157, 157, 157);
229270
background-color: rgb(91, 91, 91);
230271
}
231-
232-
.flag-icon {
233-
background-size: contain;
234-
background-position: 50%;
235-
background-repeat: no-repeat;
236-
position: relative;
237-
display: inline-block;
238-
font-size: 1.2rem;
239-
width: 1.33333333em;
240-
line-height: 1rem;
241-
}
242-
243-
.flag-icon:before {
244-
content: '\00a0';
245-
}
246-
247-
/* These Scoreboard styles cannot be scoped in so we put em in here */
248-
.scoreboard_handle {
249-
display: block !important;
250-
background: none;
251-
border: none;
252-
}
253-
.scoreboard_handle-tm,
254-
.scoreboard_handle-bm {
255-
height: 12px;
256-
width: 100%;
257-
left: 0;
258-
margin: 0;
259-
}
260-
.scoreboard_handle-ml,
261-
.scoreboard_handle-mr {
262-
width: 12px;
263-
height: 100%;
264-
top: 0;
265-
margin: 0;
266-
}
267-
.scoreboard_handle-tl,
268-
.scoreboard_handle-tr,
269-
.scoreboard_handle-bl,
270-
.scoreboard_handle-br {
271-
width: 12px;
272-
height: 12px;
273-
z-index: 99;
274-
}
275-
276-
/* GLOBAL MAP RENDERER */
277-
.custom-guess-marker {
278-
position: relative;
279-
pointer-events: auto !important;
280-
top: 22px;
281-
left: -1px;
282-
283-
}
284-
.custom-guess-marker--avatar {
285-
width: 40px;
286-
height: 40px;
287-
object-fit: cover;
288-
border-radius: 100%;
289-
box-shadow: 0 0.375rem 0.625rem #1a1a1a47
290-
}
291-
.custom-guess-marker--label {
292-
position: absolute;
293-
display: flex;
294-
align-items: center;
295-
justify-content: center;
296-
left: 26px;
297-
top: 28px;
298-
width: 16px;
299-
height: 16px;
300-
background-color: white;
301-
border: 1px solid black;
302-
border-radius: 50%;
303-
font-size: 11px;
304-
font-weight: bold;
305-
color: black;
306-
}
307-
308-
.username {
309-
white-space: nowrap;
310-
overflow: hidden;
311-
text-overflow: ellipsis;
312-
font-size: 15px;
313-
text-shadow: 1px 1px 0px #000;
314-
}

‎src/renderer/components/Frame.vue

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -379,12 +379,6 @@ function useSocketConnectionState() {
379379
}
380380
</script>
381381

382-
<style>
383-
[data-qa='perform-guess'] {
384-
min-width: 0;
385-
}
386-
</style>
387-
388382
<style scoped>
389383
[hidden] {
390384
display: none !important;

‎src/renderer/components/Leaderboard/Timeframe.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ h2 {
4646
right: 0px;
4747
border-radius: 9px;
4848
overflow-x: hidden;
49-
background-color: rgba(0, 0, 0, 0.15);
49+
background-color: var(--bg-dark-transparent);
5050
border: 1px solid rgb(255, 255, 255, 0.15);
5151
scrollbar-color: #bbbbbb transparent;
5252
scrollbar-width: thin;

‎src/renderer/components/Scoreboard.vue

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -668,3 +668,34 @@ th.sortable:hover {
668668
}
669669
}
670670
</style>
671+
672+
<style>
673+
/* These Scoreboard styles cannot be scoped in so we put em in here */
674+
.scoreboard_handle {
675+
display: block !important;
676+
background: none;
677+
border: none;
678+
}
679+
.scoreboard_handle-tm,
680+
.scoreboard_handle-bm {
681+
height: 12px;
682+
width: 100%;
683+
left: 0;
684+
margin: 0;
685+
}
686+
.scoreboard_handle-ml,
687+
.scoreboard_handle-mr {
688+
width: 12px;
689+
height: 100%;
690+
top: 0;
691+
margin: 0;
692+
}
693+
.scoreboard_handle-tl,
694+
.scoreboard_handle-tr,
695+
.scoreboard_handle-bl,
696+
.scoreboard_handle-br {
697+
width: 12px;
698+
height: 12px;
699+
z-index: 99;
700+
}
701+
</style>

‎src/renderer/components/ui/Modal.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ onClickOutside(target, () => emit('close'))
5252
font-size: 13px;
5353
color: white;
5454
border-radius: 5px;
55-
background-color: rgba(51, 51, 51, 0.6);
55+
background-color: var(--bg-dark-transparent);
5656
backdrop-filter: blur(10px);
5757
border: 1px solid rgb(99, 99, 99);
5858
box-shadow: 0 2px 8px #000c;

‎src/renderer/components/ui/Tabs.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ defineEmits(['change'])
3838
}
3939
4040
.tab button {
41-
background-color: rgb(34, 34, 34, 0.7);
41+
background-color: var(--bg-dark-transparent);
4242
}
4343
.tab button:not(:last-child) {
4444
border-right: solid 1px rgb(129 129 129);

‎src/renderer/rendererApi.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ async function drawRoundResults(
4444

4545
guessMarkerContent.addEventListener('mouseover', () => {
4646
infoWindow.setContent(`
47-
${result.player.flag ? `<span class="flag-icon" style="background-image: url(flag:${result.player.flag})"></span>` : ''}
47+
${result.player.flag ? `<span class="flag" style="background-image: url(flag:${result.player.flag})"></span>` : ''}
4848
<span class="username" style="color:${result.player.color}">${result.player.username}</span><br>
4949
${result.score}<br>
5050
${parseDistance(result.distance)}
@@ -98,7 +98,7 @@ async function drawPlayerResults(locations: Location_[], result: GameResultDispl
9898

9999
guessMarkerContent.addEventListener('mouseover', () => {
100100
infoWindow.setContent(`
101-
${result.player.flag ? `<span class="flag-icon" style="background-image: url(flag:${result.player.flag})"></span>` : ''}
101+
${result.player.flag ? `<span class="flag" style="background-image: url(flag:${result.player.flag})"></span>` : ''}
102102
<span class="username" style="color:${result.player.color}">${result.player.username}</span><br>
103103
${result.scores[index]}<br>
104104
${parseDistance(result.distances[index]!)}

0 commit comments

Comments
 (0)