ASCII text
1
.navbar {
2
display: flex;
3
align-items: center;
4
justify-content: space-between;
5
background: var(--color-navbar);
6
height: var(--height-navbar);
7
box-shadow: var(--shadow-navbar);
8
border: var(--border-navbar);
9
padding: var(--padding-navbar);
10
border-radius: var(--radius-navbar);
11
color: var(--color-navbar-text);
12
z-index: 1;
13
}
14
.navrail {
16
display: flex;
17
flex-direction: column;
18
align-items: center;
19
justify-content: space-between;
20
background: var(--color-navrail);
21
width: var(--width-navrail);
22
height: 100%;
23
box-shadow: var(--shadow-navrail);
24
border: var(--border-navrail);
25
padding: var(--padding-navrail);
26
border-radius: var(--radius-navrail);
27
color: var(--color-navrail-text);
28
z-index: 1;
29
}
30
.navbar ul {
32
display: flex;
33
list-style: none;
34
gap: var(--gap-navbar);
35
padding: 0;
36
margin: 0 !important;
37
}
38
.navrail ul {
40
display: flex;
41
flex-direction: column;
42
list-style: none;
43
gap: var(--gap-navrail);
44
padding: 0;
45
margin: 0 !important;
46
}
47
.navrail ul :any-link {
49
color: var(--color-navrail-link);
50
text-decoration: none;
51
}
52
.navrail ul :any-link:hover {
54
color: var(--color-navrail-link-hover);
55
text-decoration: none;
56
}
57
.navrail ul li > a {
59
display: flex;
60
flex-direction: column;
61
text-align: center;
62
min-height: var(--height-navrail-button);
63
}
64
.navrail ul li.selected :any-link {
66
color: var(--color-navrail-link-selected);
67
}
68
.navbar {
70
width: 100%;
71
}
72
.navbar :is(:any-link, a:hover:visited) {
74
color: var(--color-navbar-link);
75
min-width: var(--width-navbar-button);
76
}
77
.sidenav ul {
79
list-style: none;
80
margin: 0 !important;
81
}
82
.sidenav li > a {
84
display: flex;
85
gap: var(--gap-sidenav-item);
86
padding: var(--padding-sidenav);
87
margin: 0;
88
color: var(--color-sidenav-text) !important;
89
background: var(--color-sidenav);
90
text-decoration: none;
91
}