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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
/* Resets and Base Styles */
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Dashboard Layout */
.dashboard {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
/* Prevent body scroll */
}
.dashboard-header {
/* Legacy didn't really have a top header, but we need one for settings/logout.
Keeping it minimal/flat or matching sidebar bg if we want to blend in.
For now, let's make it dark gray to stand out less or match legacy dark mode if applicable.
Actually, let's keep it distinct but apply the font styles. */
background: #222;
color: white;
padding: 0.5rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: bold;
}
.dashboard-header h1 {
margin: 0;
font-size: 1.2rem;
font-variant: small-caps;
text-transform: lowercase;
}
.nav-link,
.logout-btn {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-transform: lowercase;
font-size: 1rem;
background: transparent;
border: none;
color: #ccc;
cursor: pointer;
margin-left: 1rem;
}
.nav-link:hover,
.logout-btn:hover {
color: white;
text-decoration: underline;
}
.dashboard-content {
display: flex;
flex: 1;
overflow: hidden;
}
.dashboard-sidebar {
width: 15rem;
background: var(--sidebar-bg);
border-right: 1px solid #999;
display: flex;
flex-direction: column;
overflow-y: auto;
padding: 1rem;
}
.dashboard-main {
flex: 1;
padding: 2rem;
overflow-y: auto;
background: var(--bg-color);
margin-left: 0;
}
.dashboard-main>* {
max-width: 35rem;
/* Legacy width */
margin: 0 auto;
}
.logout-btn {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
font-size: 0.9rem;
}
.logout-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
}
|
