Skip to content

Commit daadf1a

Browse files
davegaeddertdavegaeddert
committed
Start of light admin
1 parent c41d11c commit daadf1a

File tree

15 files changed

+451
-260
lines changed

15 files changed

+451
-260
lines changed

‎plain-admin/plain/admin/assets/admin/admin.css‎

Lines changed: 232 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -7,142 +7,260 @@ could unintentionally overwrite those since our CSS is combined.
77
*/
88

99
/* biome-disable lint/style/noDescendingSpecificity */
10-
table {
11-
width: 100%;
12-
font-size: 0.875rem;
13-
line-height: 1.25rem;
14-
table-layout: auto;
15-
}
1610

17-
th {
18-
text-align: left;
19-
padding: 0.5rem 0.5rem;
20-
}
11+
/* Base element styles - using @layer base so Tailwind utilities can override */
12+
@layer base {
13+
table {
14+
width: 100%;
15+
font-size: 0.875rem;
16+
line-height: 1.25rem;
17+
table-layout: auto;
18+
}
2119

22-
main a {
23-
color: rgb(37, 99, 235);
24-
}
20+
th {
21+
text-align: left;
22+
padding: 0.5rem 0.5rem;
23+
}
2524

26-
main a:hover {
27-
text-decoration: underline;
28-
}
25+
td {
26+
padding: 0.5rem 0.5rem;
27+
white-space: nowrap;
28+
border-bottom: 1px solid rgb(231, 229, 228); /* stone-200 */
29+
}
2930

30-
table th a {
31-
color: rgba(255, 255, 255, 0.6);
32-
}
31+
tr:last-child td {
32+
border-bottom: none;
33+
}
34+
35+
tbody tr:hover {
36+
background-color: rgb(250, 250, 249); /* stone-50 */
37+
}
38+
39+
table img {
40+
height: 1.2rem;
41+
border-radius: 2px;
42+
}
43+
44+
main a {
45+
color: rgb(29, 78, 216); /* blue-700 */
46+
}
47+
48+
main a:hover {
49+
text-decoration: underline;
50+
}
51+
52+
table th a {
53+
color: rgba(0, 0, 0, 0.6); /* black/60 */
54+
}
55+
56+
table td a {
57+
color: rgba(0, 0, 0, 0.9); /* black/90 */
58+
59+
&:hover {
60+
text-decoration: none;
61+
}
62+
}
63+
64+
/* Form elements */
65+
label {
66+
display: block;
67+
font-size: 0.875rem;
68+
font-weight: 500;
69+
color: rgba(0, 0, 0, 0.9); /* black/90 */
70+
margin-bottom: 0.25rem;
71+
}
72+
73+
input[type="text"],
74+
input[type="email"],
75+
input[type="password"],
76+
input[type="number"],
77+
input[type="url"],
78+
input[type="tel"],
79+
input[type="search"],
80+
input[type="date"],
81+
input[type="time"],
82+
input[type="datetime-local"],
83+
textarea,
84+
select {
85+
display: block;
86+
width: 100%;
87+
padding: 0.375rem 0.75rem;
88+
font-size: 0.875rem;
89+
line-height: 1.25rem;
90+
color: rgba(0, 0, 0, 0.9); /* black/90 */
91+
background-color: rgb(255, 255, 255); /* white */
92+
border: 1px solid rgb(214, 211, 209); /* stone-300 */
93+
border-radius: 6px;
94+
}
3395

34-
table td a {
35-
color: white;
96+
input[type="text"]:focus,
97+
input[type="email"]:focus,
98+
input[type="password"]:focus,
99+
input[type="number"]:focus,
100+
input[type="url"]:focus,
101+
input[type="tel"]:focus,
102+
input[type="search"]:focus,
103+
input[type="date"]:focus,
104+
input[type="time"]:focus,
105+
input[type="datetime-local"]:focus,
106+
textarea:focus,
107+
select:focus {
108+
outline: none;
109+
border-color: rgb(29, 78, 216); /* blue-700 */
110+
ring: 1px solid rgb(29, 78, 216); /* blue-700 */
111+
}
112+
113+
input::placeholder,
114+
textarea::placeholder {
115+
color: rgba(0, 0, 0, 0.4); /* black/40 */
116+
}
117+
118+
textarea {
119+
field-sizing: content;
120+
min-height: 4rem;
121+
}
122+
123+
select {
124+
padding-right: 2rem;
125+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
126+
background-position: right 0.5rem center;
127+
background-repeat: no-repeat;
128+
background-size: 1.5em 1.5em;
129+
}
36130

37-
&:hover {
131+
/* Buttons */
132+
main button:not([data-dropdown]):not([data-nav-toggle]),
133+
main a.button,
134+
.actions button,
135+
.actions a {
136+
display: inline-block;
137+
padding: 4px 12px;
138+
font-size: 13px;
139+
font-weight: 500;
140+
color: rgba(0, 0, 0, 0.9); /* black/90 */
141+
text-align: center;
38142
text-decoration: none;
143+
background-color: rgb(245, 245, 244); /* stone-100 */
144+
border: 1px solid rgb(214, 211, 209); /* stone-300 */
145+
border-radius: 6px;
146+
transition:
147+
background-color 0.2s,
148+
border-color 0.2s,
149+
transform 0.2s;
150+
cursor: pointer;
151+
flex-shrink: 0;
152+
153+
@media (max-width: 640px) {
154+
font-size: 12px;
155+
padding: 6px 12px;
156+
}
157+
158+
&:hover {
159+
background-color: rgb(231, 229, 228); /* stone-200 */
160+
border-color: rgb(168, 162, 158); /* stone-400 */
161+
transform: translateY(-1px);
162+
}
163+
164+
&:active {
165+
background-color: rgb(214, 211, 209); /* stone-300 */
166+
border-color: rgb(168, 162, 158); /* stone-400 */
167+
transform: translateY(0);
168+
}
169+
170+
&:focus {
171+
outline: 2px solid rgb(29, 78, 216); /* blue-700 */
172+
outline-offset: 2px;
173+
}
39174
}
40-
}
41175

42-
tbody tr:hover {
43-
background-color: rgb(255, 255, 255, 0.1);
44-
}
176+
main button[type="submit"] {
177+
background-color: #434f40; /* sage green from plainframework.com */
178+
border-color: #434f40;
179+
color: rgb(250, 250, 249); /* stone-50 */
45180

46-
td {
47-
padding: 0.5rem 0.5rem;
48-
white-space: nowrap;
49-
border-bottom: 1px solid rgb(255, 255, 255, 0.1);
50-
}
51-
tr:last-child td {
52-
border-bottom: none;
53-
}
181+
&:hover {
182+
background-color: #3a4438; /* darker sage */
183+
border-color: #3a4438;
184+
}
185+
&:focus {
186+
outline: 2px solid #434f40;
187+
outline-offset: 2px;
188+
}
189+
}
190+
191+
/* Card elements (aside) */
192+
aside {
193+
border: rgb(231, 229, 228) 1px solid; /* stone-200 */
194+
border-radius: 0.275rem;
195+
overflow: auto;
196+
background-color: rgb(255, 255, 255); /* white */
197+
color: rgba(0, 0, 0, 0.7); /* black/70 */
198+
display: flex;
199+
flex-direction: column;
200+
}
54201

55-
table img {
56-
height: 1.2rem;
57-
border-radius: 2px;
202+
aside > header {
203+
padding: 0.5rem;
204+
border-bottom: rgb(245, 245, 244) 1px solid; /* stone-100 */
205+
}
206+
207+
.card-content {
208+
padding: 0.75rem 0.5rem 0;
209+
flex-grow: 1;
210+
display: flex;
211+
flex-direction: column;
212+
align-items: center;
213+
justify-content: center;
214+
overflow: auto;
215+
}
58216
}
59217

60-
select {
61-
border-radius: 6px;
62-
background-color: rgba(255, 255, 255, 0.05);
63-
border: 1px solid rgba(255, 255, 255, 0.1);
218+
/* Tippy dropdown styling */
219+
.tippy-box {
220+
background-color: rgb(255, 255, 255) !important; /* white */
221+
color: rgba(0, 0, 0, 0.9) !important; /* black/90 */
222+
border: 1px solid rgb(231, 229, 228) !important; /* stone-200 */
223+
box-shadow:
224+
0 10px 15px -3px rgb(0 0 0 / 0.1),
225+
0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
64226
}
65227

66-
main button,
67-
.actions button,
68-
.actions a {
69-
display: inline-block;
70-
padding: 4px 12px;
71-
font-size: 13px;
72-
font-weight: 500;
73-
color: #ffffff;
74-
text-align: center;
75-
text-decoration: none;
76-
background-color: #2a2826;
77-
border: 1px solid #3f3d3b;
78-
border-radius: 6px;
79-
transition:
80-
background-color 0.2s,
81-
border-color 0.2s,
82-
transform 0.2s;
83-
cursor: pointer;
84-
flex-shrink: 0;
85-
86-
@media (max-width: 640px) {
87-
font-size: 12px;
88-
padding: 6px 12px;
89-
}
90-
91-
&:hover {
92-
background-color: #2a2928;
93-
border-color: #504e4c;
94-
transform: translateY(-1px);
95-
}
96-
97-
&:active {
98-
background-color: #141312;
99-
border-color: #3f3d3b;
100-
transform: translateY(0);
101-
}
102-
103-
&:focus {
104-
outline: 2px solid #e5e7eb;
105-
outline-offset: 2px;
106-
}
228+
.tippy-box a {
229+
color: rgba(0, 0, 0, 0.7) !important; /* black/70 */
107230
}
108231

109-
main button[type="submit"] {
110-
background-color: #2563eb;
111-
border-color: #2563eb;
232+
/* Sidebar collapse/expand styles - no transitions for instant toggle */
233+
.admin-sidebar {
234+
margin-left: 0;
235+
position: relative;
236+
transition: box-shadow 0.15s ease-in-out;
237+
}
112238

113-
&:hover {
114-
background-color: #1d4ed8;
115-
border-color: #1d4ed8;
116-
}
117-
&:focus {
118-
outline: 2px solid #2563eb;
119-
outline-offset: 2px;
120-
}
239+
/* When collapsed, sidebar is hidden off-screen and positioned absolutely for overlay */
240+
.admin-sidebar-collapsed .admin-sidebar {
241+
position: absolute;
242+
left: 0;
243+
top: 0;
244+
bottom: 0;
245+
margin-left: -13rem; /* -w-52 */
246+
z-index: 100;
121247
}
122248

123-
/* Cards use these? */
124-
section {
125-
border: rgba(255, 255, 255, 0.1) 1px solid;
126-
border-radius: 0.275rem;
127-
overflow: auto;
128-
background-color: rgba(255, 255, 255, 0.05);
129-
color: rgba(255, 255, 255, 0.8);
130-
display: flex;
131-
flex-direction: column;
249+
/* Show sidebar on hover when collapsed (triggered by JS) */
250+
.admin-sidebar-collapsed .admin-sidebar.hover-preview {
251+
margin-left: 0;
252+
box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
132253
}
133254

134-
section > header {
135-
padding: 0.5rem;
136-
/* background-color: #FFFCF0; */
137-
border-bottom: rgba(255, 255, 255, 0.05) 1px solid;
255+
/* Content area adjustments when sidebar is collapsed */
256+
.admin-content {
257+
width: 100%;
258+
min-width: 0; /* Allow flex child to shrink below content size */
138259
}
139260

140-
section > div {
141-
padding: 0.75rem 0.5rem;
142-
flex-grow: 1;
143-
display: flex;
144-
flex-direction: column;
145-
align-items: center;
146-
justify-content: center;
147-
overflow: auto;
261+
@media (max-width: 1023px) {
262+
/* On mobile, hide completely when collapsed */
263+
.admin-sidebar-collapsed .admin-sidebar {
264+
margin-left: -13rem;
265+
}
148266
}

0 commit comments

Comments
 (0)