invoxiplaygames.uk
a web-based Rock Band 4 stats viewer and achievement tracker website
1.navbar-toggler {
2 background-color: rgba(255, 255, 255, 0.1);
3}
4
5.top-row {
6 min-height: 3.5rem;
7 background-color: rgba(0,0,0,0.4);
8}
9
10.navbar-brand {
11 font-size: 1.1rem;
12}
13
14.bi {
15 display: inline-block;
16 position: relative;
17 width: 1.25rem;
18 height: 1.25rem;
19 margin-right: 0.75rem;
20 top: -1px;
21 background-size: cover;
22}
23
24.bi-house-door-fill-nav-menu {
25 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
26}
27
28.bi-plus-square-fill-nav-menu {
29 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
30}
31
32.bi-list-nested-nav-menu {
33 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
34}
35
36.bi-trophy-fill-nav-menu {
37 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-trophy-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2.5.5A.5.5 0 0 1 3 0h10a.5.5 0 0 1 .5.5q0 .807-.034 1.536a3 3 0 1 1-1.133 5.89c-.79 1.865-1.878 2.777-2.833 3.011v2.173l1.425.356c.194.048.377.135.537.255L13.3 15.1a.5.5 0 0 1-.3.9H3a.5.5 0 0 1-.3-.9l1.838-1.379c.16-.12.343-.207.537-.255L6.5 13.11v-2.173c-.955-.234-2.043-1.146-2.833-3.012a3 3 0 1 1-1.132-5.89A33 33 0 0 1 2.5.5m.099 2.54a2 2 0 0 0 .72 3.935c-.333-1.05-.588-2.346-.72-3.935m10.083 3.935a2 2 0 0 0 .72-3.935c-.133 1.59-.388 2.885-.72 3.935'%2F%3E%3C%2Fsvg%3E");
38}
39
40.nav-item {
41 font-size: 0.9rem;
42 padding-bottom: 0.5rem;
43}
44
45 .nav-item:first-of-type {
46 padding-top: 1rem;
47 }
48
49 .nav-item:last-of-type {
50 padding-bottom: 1rem;
51 }
52
53 .nav-item ::deep a {
54 color: #d7d7d7;
55 border-radius: 4px;
56 height: 3rem;
57 display: flex;
58 align-items: center;
59 line-height: 3rem;
60 }
61
62.nav-item ::deep a.active {
63 background-color: rgba(255,255,255,0.37);
64 color: white;
65}
66
67.nav-item ::deep a:hover {
68 background-color: rgba(255,255,255,0.1);
69 color: white;
70}
71
72@media (min-width: 641px) {
73 .navbar-toggler {
74 display: none;
75 }
76
77 .collapse {
78 /* Never collapse the sidebar for wide screens */
79 display: block;
80 }
81
82 .nav-scrollable {
83 /* Allow sidebar to scroll for tall menus */
84 height: calc(100vh - 3.5rem);
85 overflow-y: auto;
86 }
87}