docs/sidebar-groups.css at main · Graphify-Labs/docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/* Sidebar: separate groups with a thin rule, more space, and quiet section labels. */
div:has(> .sidebar-group-header) ~ div:has(> .sidebar-group-header) {
  border-top: 1px solid #e5e5e5;
  padding-top: 1.25rem;
  margin-top: 1.25rem;
}
html.dark div:has(> .sidebar-group-header) ~ div:has(> .sidebar-group-header) {
  border-top-color: #262626;
}
.sidebar-group-header {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Mobile nav drawer (390px, 768px): 44px tap targets, tighter group rhythm. */
#mobile-nav .sidebar-group a,
#mobile-nav #navigation-items li > a,
#mobile-nav #navigation-items li > button {
  min-height: 44px;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
#mobile-nav .sidebar-group-header {
  min-height: 32px;
  align-items: center;
}
#mobile-nav div:has(> .sidebar-group-header) ~ div:has(> .sidebar-group-header) {
  padding-top: 1rem;
  margin-top: 1rem;
}
#mobile-nav a.nav-anchor {
  min-height: 44px;
  align-items: center;
  margin-bottom: 0.5rem;
}
#mobile-nav button[aria-haspopup],
#mobile-nav button[aria-label*="lose" i] {
  min-height: 44px;
  min-width: 44px;
}
/* Theme switch: grow the hit area to 44px tall without changing the pill. */
#mobile-nav button[aria-label^="Switch to"] {
  position: relative;
}
#mobile-nav button[aria-label^="Switch to"]::after {
  content: "";
  position: absolute;
  inset: -7px 0;
}

/* Sidebar page and group icons (Lucide, 16px masks): neutral ink, not green.
   Active page keeps the green accent. Scoped to nav icons only. */
:is(#sidebar, #mobile-nav) :is(.sidebar-group a, .sidebar-group-header) svg {
  background-color: #3f3f46 !important;
  color: #3f3f46 !important;
}
html.dark :is(#sidebar, #mobile-nav) :is(.sidebar-group a, .sidebar-group-header) svg {
  background-color: #d4d4d4 !important;
  color: #d4d4d4 !important;
}
:is(#sidebar, #mobile-nav) .sidebar-group a:is([aria-current="page"], .active) svg {
  background-color: #118d4f !important;
  color: #118d4f !important;
}
html.dark :is(#sidebar, #mobile-nav) .sidebar-group a:is([aria-current="page"], .active) svg {
  background-color: #4dea9c !important;
  color: #4dea9c !important;
}