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
|
/* Resets and Base Styles */
* {
box-sizing: border-box;
}
body {
margin: 0;
-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-weight: bold;
}
.dashboard-header h1 {
margin: 0;
font-size: 1.2rem;
font-variant: small-caps;
text-transform: lowercase;
}
.nav-link,
.logout-btn {
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);
}
|
