Skip to content

Commit 9661742

Browse files
lastzerolastzero
committed
CSS: Use variables to define app fonts, refactor text and splash styles
Signed-off-by: Michael Mayer <[email protected]>
1 parent 7989b88 commit 9661742

File tree

8 files changed

+165
-177
lines changed

8 files changed

+165
-177
lines changed

‎frontend/src/css/app.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ Additional information can be found in our Developer Guide:
2525

2626
@import url("../../node_modules/photoswipe/dist/photoswipe.css");
2727
@import url("../../node_modules/maplibre-gl/dist/maplibre-gl.css");
28+
@import url("root.css");
2829
@import url("splash.css");
29-
@import url("body.css");
3030
@import url("text.css");
3131
@import url("lightbox.css");
3232
@import url("controls.css");

‎frontend/src/css/body.css‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎frontend/src/css/logs.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
display: block;
1111
text-align: left;
1212
font-size: 0.825rem;
13-
font-family: monospace;
13+
font-family: var(--v-font-family-mono);
1414
white-space: normal;
1515
color: rgb(var(--v-theme-on-surface));
1616
padding: 4px;

‎frontend/src/css/navigation.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@
55
user-select: none;
66
}
77

8+
#p-navigation ::-webkit-scrollbar {
9+
/* Hides scrollbar in sidebar navigation to save space */
10+
/* see https://css-tricks.com/custom-scrollbars-in-webkit/#aa-the-different-pieces */
11+
width: 0;
12+
background: transparent;
13+
}
14+
815
nav .v-list__item__title.title {
916
line-height: normal !important;
1017
}

‎frontend/src/css/root.css‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
:root {
2+
--v-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
3+
--v-font-family-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
4+
}
5+
6+
/* HTML Body: Fonts, Color Schemes, Loading, and Scrollbar Styles */
7+
8+
html {
9+
font-size: 16px;
10+
}
11+
12+
html,
13+
body,
14+
body #app {
15+
/* Use the system fonts defined above for faster rendering and a native look */
16+
font-family: var(--v-font-family);
17+
letter-spacing: normal !important;
18+
line-height: normal;
19+
text-justify: inter-word;
20+
-webkit-font-smoothing: antialiased;
21+
text-rendering: optimizeLegibility;
22+
-moz-osx-font-smoothing: grayscale;
23+
font-feature-settings: "kern", "liga";
24+
}
25+
26+
body {
27+
color: #333333;
28+
font-size: 17px;
29+
}
30+
31+
[data-color-mode="light"][data-light-theme*="dark"],
32+
[data-color-mode="dark"][data-dark-theme*="dark"] {
33+
color-scheme: dark;
34+
}
35+
36+
:root,
37+
[data-color-mode="light"][data-light-theme*="light"],
38+
[data-color-mode="dark"][data-dark-theme*="light"] {
39+
color-scheme: light;
40+
}
41+
42+
body.dark-theme {
43+
color-scheme: dark !important;
44+
}
45+
46+
html.loading {
47+
overflow-y: hidden !important;
48+
scrollbar-width: none;
49+
}
50+
51+
html.hide-scrollbar {
52+
scrollbar-width: none;
53+
}
54+
55+
body.nojs::-webkit-scrollbar,
56+
body.hide-scrollbar::-webkit-scrollbar,
57+
html.hide-scrollbar ::-webkit-scrollbar {
58+
width: 0;
59+
background: transparent;
60+
z-index: -1000;
61+
}
62+
63+
body.nojs,
64+
body.hide-scrollbar,
65+
html.hide-scrollbar body {
66+
-ms-overflow-style: none;
67+
}
68+
69+
/* Mozilla Firefox */
70+
71+
body.firefox.dark-theme {
72+
scrollbar-color: dark !important;
73+
}
74+
75+
/* Chrome, Chromium, and compatible browsers */
76+
77+
::-webkit-scrollbar {
78+
height: 7px;
79+
width: 7px;
80+
overflow: visible;
81+
}
82+
83+
::-webkit-scrollbar-button {
84+
height: 0;
85+
width: 0;
86+
}
87+
88+
@media only screen and (min-width: 600px) {
89+
::-webkit-scrollbar {
90+
height: 11px;
91+
width: 11px;
92+
overflow: visible;
93+
}
94+
}
95+
96+
::-webkit-scrollbar-corner {
97+
background: transparent;
98+
}
99+
100+
::-webkit-scrollbar-track {
101+
background-color: rgba(var(--v-theme-secondary), 0.2);
102+
border: solid transparent;
103+
border-width: 0 0 0 4px;
104+
}
105+
106+
::-webkit-scrollbar-thumb {
107+
background-color: rgba(var(--v-theme-on-surface), 0.28);
108+
border-style: solid;
109+
border-color: rgba(var(--v-theme-secondary), 0.56);
110+
border-width: 1px;
111+
border-radius: 6px;
112+
min-height: 28px;
113+
padding: 100px 0 0;
114+
}

‎frontend/src/css/splash.css‎

Lines changed: 1 addition & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,4 @@
1-
/* Inline <HTML>, <Body>, and Splash Screen Styles */
2-
3-
html.loading {
4-
overflow-y: hidden !important;
5-
scrollbar-width: none;
6-
}
7-
8-
html.hide-scrollbar {
9-
scrollbar-width: none;
10-
}
11-
12-
[data-color-mode="light"][data-light-theme*="dark"],
13-
[data-color-mode="dark"][data-dark-theme*="dark"] {
14-
color-scheme: dark;
15-
}
16-
17-
:root,
18-
[data-color-mode="light"][data-light-theme*="light"],
19-
[data-color-mode="dark"][data-dark-theme*="light"] {
20-
color-scheme: light;
21-
}
22-
23-
body {
24-
color: #333333;
25-
font-size: 17px;
26-
}
27-
28-
html,
29-
body {
30-
/* Use a system font for faster rendering and a native look */
31-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
32-
33-
/* Text rendering defaults. */
34-
letter-spacing: normal !important;
35-
line-height: normal;
36-
text-justify: inter-word;
37-
38-
/* Support for all WebKit browsers. */
39-
-webkit-font-smoothing: antialiased;
40-
41-
/* Support for Safari and Chrome. */
42-
43-
text-rendering: optimizeLegibility;
44-
/* Support for Firefox. */
45-
-moz-osx-font-smoothing: grayscale;
46-
47-
/* Enable font features. */
48-
font-feature-settings: "kern", "liga";
49-
}
50-
51-
body.nojs::-webkit-scrollbar,
52-
body.hide-scrollbar::-webkit-scrollbar,
53-
html.hide-scrollbar ::-webkit-scrollbar {
54-
width: 0;
55-
background: transparent;
56-
z-index: -1000;
57-
}
58-
59-
body.nojs,
60-
body.hide-scrollbar,
61-
html.hide-scrollbar body {
62-
-ms-overflow-style: none;
63-
}
64-
65-
/* Loading Animation Styles */
1+
/* Splash Screen Styles */
662

673
#busy-overlay {
684
display: none;

0 commit comments

Comments
 (0)