File size: 3,189 Bytes
c682b53
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
71
72
73
74
75
76
77
/* ============================================================
   Modernist theme for the main left sidebar (navbar_dda.html) —
   shared, identical partial injected into every page, so this
   reskin applies globally rather than being scoped to one page.
   Reuses the shared --dm-* tokens declared once at :root in
   dda.css: flat surfaces, hairline dividers, sharp corners, one
   accent color, Archivo for the brand/nav. Pure visual restyle —
   the DB-driven menu structure, RBAC, and every id/class app.js/
   notifications.js select on are untouched.
   ============================================================ */

.dda-sidebar-nav {
  background: var(--dm-bg);
  border-right: 2px solid var(--dm-line);
}

/* --- Brand --- */
.dda-sidebar-brand > svg { color: var(--dm-accent); }
.dda-sidebar-brand-name {
  font-family: var(--dm-font);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--dm-ink);
}
.dda-sidebar-brand-sub { color: var(--dm-ink-muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.68rem; }
.dda-sidebar-toggle { border-color: var(--dm-line); border-radius: 0; color: var(--dm-ink-muted); }
.dda-sidebar-toggle:hover { background: var(--dm-accent-100); color: var(--dm-accent); }

/* --- Nav tabs --- */
.dda-tab {
  border-radius: 0;
  border-left: 2px solid transparent;
  color: var(--dm-ink);
  font-weight: 500;
}
.dda-tab:hover { background: var(--dm-bg); color: var(--dm-ink); }
.dda-tab.active {
  background: var(--dm-accent-100);
  border-left-color: var(--dm-accent);
  color: var(--dm-accent);
  font-weight: 700;
}
.dda-subtab { color: var(--dm-ink); font-weight: 500; }
.dda-subtab.active {
  background: var(--dm-accent-100);
  border-left-color: var(--dm-accent);
  color: var(--dm-accent);
  font-weight: 700;
}
.dda-sidebar-submenu { border-left-color: var(--dm-line); }
.dda-sidebar-group > summary.dda-tab-group { border-radius: 0; }

/* --- Footer: notifications + user menu --- */
.dda-sidebar-footer { border-top-color: var(--dm-line); }
.dda-notify-btn { border-color: var(--dm-line); border-radius: 0; color: var(--dm-ink); }
.dda-notify-btn:hover { background: var(--dm-accent-100); color: var(--dm-accent); }
.dda-notify-badge { background: var(--dm-accent); border-radius: 0; }
.dda-notify-panel { border-radius: 0; border-color: var(--dm-line); background: var(--dm-surface); }
.dda-notify-item { border-radius: 0; }
.dda-notify-item:hover { background: var(--dm-bg); }
.dda-notify-item.unread { background: var(--dm-accent-100); }

.dda-user-avatar {
  border-radius: 0;
  background: var(--dm-ink);
}
.dda-user-wrap #dda-user-email { color: var(--dm-ink); }
.dda-user-menu-panel { border-top-color: var(--dm-line); }
.dda-user-menu-link { border-radius: 0; color: var(--dm-ink); }
.dda-user-menu-link:hover { background: var(--dm-accent-100); color: var(--dm-accent); }
.dda-user-menu-link.active { color: var(--dm-accent); font-weight: 700; }
.dda-sidebar-nav.collapsed .dda-user-menu-panel { border-radius: 0; border-color: var(--dm-line); background: var(--dm-surface); box-shadow: none; }