acp.css

main 1147 lines · 25.8 KB Raw
Alex Alex Commit Initial commit 01/10/2026 09:20
1/* ==========================================================================
2 ZnoteX Admin Control Panel
3 Blue day/night panel, built to feel separate from MyAAC templates.
4 ========================================================================== */
5
6:root {
7 --acp-sidebar-w: 278px;
8 --acp-topbar-h: 44px;
9 --acp-blue-900: #155376;
10 --acp-blue-800: #1d638b;
11 --acp-blue-700: #2478aa;
12 --acp-blue-600: #2f94d1;
13 --acp-blue-100: #e9f4fb;
14 --acp-bg: #ececec;
15 --acp-panel: #ffffff;
16 --acp-panel-2: #f5f8fa;
17 --acp-fg: #15191f;
18 --acp-muted: #5d6878;
19 --acp-line: #d7dce2;
20 --acp-line-soft: #e8edf2;
21 --acp-green: #2f9d68;
22 --acp-red: #d64b4b;
23 --acp-amber: #f08a00;
24 --acp-purple: #8068c4;
25 --acp-radius: 4px;
26 --acp-shadow: 0 1px 2px rgba(0, 0, 0, .08);
27}
28
29[data-acp-theme="dark"] {
30 --acp-blue-900: #0d2638;
31 --acp-blue-800: #123a54;
32 --acp-blue-700: #1b577d;
33 --acp-blue-600: #45a7df;
34 --acp-blue-100: #172736;
35 --acp-bg: #12151a;
36 --acp-panel: #1b2027;
37 --acp-panel-2: #232a33;
38 --acp-fg: #e7ebf1;
39 --acp-muted: #a0a9b6;
40 --acp-line: #303844;
41 --acp-line-soft: #28313d;
42 --acp-shadow: 0 1px 2px rgba(0, 0, 0, .32);
43}
44
45* { box-sizing: border-box; }
46html, body { margin: 0; min-height: 100%; }
47
48body.acp {
49 background: var(--acp-bg);
50 color: var(--acp-fg);
51 font: 14px/1.55 Arial, Helvetica, sans-serif;
52}
53
54.acp a { color: #0977b8; text-decoration: none; }
55.acp a:hover { color: var(--acp-blue-600); text-decoration: underline; }
56[data-acp-theme="dark"] .acp a { color: #72c2ee; }
57.acp h1, .acp h2, .acp h3, .acp h4 { margin: 0; font-weight: 400; line-height: 1.25; }
58.acp p { margin: 0 0 10px; }
59.acp p:last-child { margin-bottom: 0; }
60.acp img { max-width: 100%; height: auto; }
61.acp code, .acp pre { font-family: Consolas, Monaco, monospace; font-size: 12.5px; }
62
63.acp-shell {
64 min-height: 100vh;
65 display: grid;
66 grid-template-columns: var(--acp-sidebar-w) minmax(0, 1fr);
67}
68
69/* Sidebar */
70.acp-sidebar {
71 position: sticky;
72 top: 0;
73 height: 100vh;
74 background: var(--acp-blue-800);
75 color: #d9edf8;
76 box-shadow: 2px 0 8px rgba(0, 0, 0, .18);
77 overflow-y: auto;
78 overflow-x: hidden;
79 z-index: 20;
80 scrollbar-gutter: stable;
81 scrollbar-width: thin;
82 scrollbar-color: rgba(255, 255, 255, .28) transparent;
83}
84
85.acp-sidebar::-webkit-scrollbar {
86 width: 8px;
87}
88
89.acp-sidebar::-webkit-scrollbar-track {
90 background: transparent;
91}
92
93.acp-sidebar::-webkit-scrollbar-thumb {
94 background: rgba(255, 255, 255, .22);
95 border-radius: 4px;
96 border: 2px solid transparent;
97 background-clip: padding-box;
98}
99
100.acp-sidebar::-webkit-scrollbar-thumb:hover {
101 background: rgba(255, 255, 255, .38);
102 background-clip: padding-box;
103}
104
105.acp-sidebar::-webkit-scrollbar-corner {
106 background: transparent;
107}
108
109.acp .acp-side-home,
110.acp .acp-side-home:visited {
111 display: flex;
112 align-items: center;
113 gap: 14px;
114 height: var(--acp-topbar-h);
115 padding: 0 14px;
116 background: var(--acp-blue-900);
117 color: #fff;
118 font-size: 15px;
119 box-shadow: 0 2px 7px rgba(0, 0, 0, .22);
120}
121.acp .acp-side-home:hover,
122.acp .acp-side-home:focus { color: #fff; text-decoration: none; background: #174f70; }
123.acp .acp-side-home .fa {
124 width: 18px;
125 text-align: center;
126 font-size: 17px;
127 color: #fff;
128}
129.acp .acp-side-home span {
130 white-space: nowrap;
131 overflow: hidden;
132 text-overflow: ellipsis;
133 color: #fff;
134}
135
136.acp-nav-filter {
137 position: relative;
138 padding: 12px;
139 background: rgba(0, 0, 0, .08);
140 border-bottom: 1px solid rgba(0, 0, 0, .12);
141}
142.acp-nav-filter .fa {
143 position: absolute;
144 left: 24px;
145 top: 50%;
146 transform: translateY(-50%);
147 color: #b8d7e9;
148 pointer-events: none;
149}
150.acp-nav-filter input {
151 width: 100%;
152 height: 36px;
153 padding: 0 12px 0 34px;
154 border: 1px solid rgba(255, 255, 255, .16);
155 border-radius: var(--acp-radius);
156 background: rgba(255, 255, 255, .12);
157 color: #fff;
158 font: inherit;
159 outline: none;
160}
161.acp-nav-filter input::placeholder { color: #c7deec; }
162.acp-nav-filter input:focus {
163 background: rgba(255, 255, 255, .18);
164 border-color: rgba(255, 255, 255, .42);
165}
166
167.acp-nav-group {
168 border-bottom: 1px solid rgba(0, 0, 0, .14);
169}
170.acp-nav-group-label {
171 width: 100%;
172 height: 69px;
173 display: flex;
174 align-items: center;
175 justify-content: space-between;
176 gap: 12px;
177 padding: 0 13px;
178 border: 0;
179 background: transparent;
180 color: #d9edf8;
181 font: inherit;
182 font-size: 18px;
183 cursor: pointer;
184 text-align: left;
185}
186.acp-nav-group-label:hover,
187.acp-nav-group.is-open > .acp-nav-group-label {
188 background: rgba(0, 0, 0, .11);
189}
190.acp-nav-group-label .fa { color: #b9d9ec; }
191.acp-nav-group:not(.is-open) ul { display: none; }
192
193.acp-nav-plugin { list-style: none; }
194.acp-nav-plugin-label {
195 width: 100%;
196 display: flex;
197 align-items: center;
198 gap: 11px;
199 min-height: 38px;
200 padding: 0 14px 0 24px;
201 border: 0;
202 background: transparent;
203 color: #eef8ff;
204 font: inherit;
205 font-size: 14px;
206 cursor: pointer;
207 text-align: left;
208}
209.acp-nav-plugin-label:hover { background: rgba(255, 255, 255, .08); }
210.acp-nav-plugin-label > .fa:first-child { width: 18px; text-align: center; font-size: 15px; color: #dff3ff; }
211.acp-nav-plugin-label .acp-nav-caret { margin-left: auto; font-size: 12px; color: #b9d9ec; transition: transform .15s; }
212.acp-nav-plugin.is-open > .acp-nav-plugin-label .acp-nav-caret { transform: rotate(90deg); }
213.acp-nav-plugin:not(.is-open) > ul { display: none; }
214.acp-nav-plugin > ul { background: rgba(0, 0, 0, .14); }
215.acp-nav-plugin > ul .acp-nav-link { padding-left: 40px; }
216
217.acp-nav ul {
218 margin: 0;
219 padding: 0 0 8px;
220 list-style: none;
221 background: rgba(0, 0, 0, .09);
222}
223.acp .acp-nav-link {
224 display: flex;
225 align-items: center;
226 gap: 11px;
227 min-height: 38px;
228 padding: 0 14px 0 24px;
229 color: #eef8ff;
230 border-left: 4px solid transparent;
231 font-size: 14px;
232}
233.acp .acp-nav-link:hover {
234 background: rgba(255, 255, 255, .08);
235 color: #fff;
236 text-decoration: none;
237}
238.acp .acp-nav-link.is-active {
239 background: rgba(255, 255, 255, .16);
240 border-left-color: #fff;
241 color: #fff;
242 font-weight: 700;
243}
244.acp .acp-nav-link > .fa:first-child {
245 width: 18px;
246 text-align: center;
247 font-size: 15px;
248 color: #dff3ff;
249}
250.acp .acp-nav-link:hover > .fa:first-child,
251.acp .acp-nav-link.is-active > .fa:first-child {
252 color: #fff;
253}
254.acp .acp-nav-text {
255 flex: 1 1 auto;
256 white-space: nowrap;
257 overflow: hidden;
258 text-overflow: ellipsis;
259 color: inherit;
260}
261.acp .acp-nav-badge {
262 min-width: 22px;
263 height: 22px;
264 padding: 0 7px;
265 border-radius: 50px;
266 background: #f05b73;
267 color: #fff;
268 font-size: 12px;
269 font-weight: 700;
270 line-height: 22px;
271 text-align: center;
272}
273.acp .acp-nav-ext { font-size: 11px; opacity: .75; color: #dff3ff; }
274.acp-nav-nomatch {
275 margin: 0;
276 padding: 14px;
277 color: #e7f5fd;
278 background: rgba(0, 0, 0, .12);
279}
280.acp-backdrop { display: none; }
281
282/* Main panel */
283.acp-panel {
284 min-width: 0;
285 display: flex;
286 flex-direction: column;
287}
288
289.acp-topbar {
290 position: sticky;
291 top: 0;
292 z-index: 15;
293 height: var(--acp-topbar-h);
294 display: flex;
295 align-items: center;
296 gap: 14px;
297 padding: 0 16px;
298 background: var(--acp-blue-900);
299 color: #fff;
300 box-shadow: 0 2px 8px rgba(0, 0, 0, .24);
301}
302.acp-burger { display: inline-flex; }
303.acp-top-title {
304 display: flex;
305 align-items: baseline;
306 gap: 12px;
307 min-width: 0;
308 flex: 1 1 auto;
309}
310.acp-top-title strong {
311 font-size: 15px;
312 white-space: nowrap;
313 overflow: hidden;
314 text-overflow: ellipsis;
315}
316.acp-top-title span {
317 color: #bdd6e6;
318 font-size: 12px;
319 white-space: nowrap;
320}
321.acp-top-actions {
322 display: flex;
323 align-items: center;
324 gap: 8px;
325}
326
327.acp .acp-icon-btn,
328.acp .acp-theme-toggle,
329.acp-user {
330 display: inline-flex;
331 align-items: center;
332 justify-content: center;
333 gap: 8px;
334 height: 32px;
335 border: 0;
336 border-radius: var(--acp-radius);
337 background: rgba(255, 255, 255, .1);
338 color: #fff;
339 font: inherit;
340}
341.acp .acp-icon-btn {
342 width: 32px;
343 padding: 0;
344 cursor: pointer;
345}
346.acp .acp-theme-toggle {
347 padding: 0 11px;
348 cursor: pointer;
349}
350.acp-user { padding: 0 11px; }
351.acp .acp-icon-btn:hover,
352.acp .acp-theme-toggle:hover {
353 background: rgba(255, 255, 255, .18);
354 color: #fff;
355 text-decoration: none;
356}
357.acp .acp-icon-btn .fa,
358.acp .acp-theme-toggle .fa,
359.acp .acp-theme-toggle span,
360.acp .acp-user,
361.acp .acp-user .fa,
362.acp .acp-user span {
363 color: #fff;
364}
365
366.acp-sidebar-closed .acp-shell {
367 grid-template-columns: minmax(0, 1fr);
368}
369.acp-sidebar-closed .acp-sidebar {
370 display: none;
371}
372
373.acp-content {
374 flex: 1 1 auto;
375 width: min(1154px, calc(100% - 42px));
376 margin: 0 auto;
377 padding: 18px 0 24px;
378}
379
380.acp-page-head {
381 margin-bottom: 14px;
382}
383.acp-page-head h1 {
384 font-size: 26px;
385 font-weight: 400;
386 color: var(--acp-fg);
387}
388.acp-page-head p {
389 margin-top: 4px;
390 color: var(--acp-muted);
391}
392
393.acp-breadcrumb {
394 display: flex;
395 align-items: center;
396 gap: 6px;
397 margin-bottom: 6px;
398 font-size: 12.5px;
399 color: var(--acp-muted);
400}
401.acp-breadcrumb a { color: var(--acp-muted); text-decoration: none; }
402.acp-breadcrumb a:hover { color: var(--acp-fg); text-decoration: underline; }
403.acp-breadcrumb-sep { opacity: .6; }
404.acp-breadcrumb-current { color: var(--acp-fg); }
405
406.acp-footer {
407 width: min(1154px, calc(100% - 42px));
408 margin: 0 auto;
409 padding: 10px 0 20px;
410 display: flex;
411 justify-content: space-between;
412 gap: 14px;
413 color: var(--acp-muted);
414 font-size: 12px;
415}
416
417/* Alerts */
418.acp-flash {
419 display: flex;
420 align-items: flex-start;
421 gap: 12px;
422 margin-bottom: 14px;
423 padding: 14px 16px;
424 border: 1px solid #f3d2d2;
425 border-left: 3px solid var(--acp-red);
426 border-radius: var(--acp-radius);
427 background: #fde8e8;
428 color: #bb2f2f;
429}
430.acp-flash .fa { font-size: 22px; flex: 0 0 auto; margin-top: 1px; }
431.acp-flash span {
432 flex: 1 1 auto;
433 min-width: 0;
434 overflow-wrap: anywhere;
435 word-break: break-word;
436 white-space: normal;
437}
438.acp-flash--success {
439 background: #e6f5ed;
440 border-color: #c0e2cf;
441 border-left-color: var(--acp-green);
442 color: #1f7048;
443}
444.acp-flash--info {
445 background: #eaf5fc;
446 border-color: #c9e3f2;
447 border-left-color: var(--acp-blue-600);
448 color: #216282;
449}
450
451/* Cards and grids */
452.acp-card {
453 background: var(--acp-panel);
454 border: 1px solid var(--acp-line);
455 border-radius: var(--acp-radius);
456 box-shadow: var(--acp-shadow);
457 margin-bottom: 22px;
458 overflow: hidden;
459}
460.acp-card-head {
461 display: flex;
462 flex-wrap: wrap;
463 align-items: center;
464 gap: 7px 14px;
465 padding: 10px 12px;
466 background: var(--acp-blue-100);
467 border-bottom: 1px solid var(--acp-line);
468}
469.acp-card-head h2 {
470 color: #12649b;
471 font-size: 21px;
472 font-weight: 400;
473}
474[data-acp-theme="dark"] .acp-card-head h2 { color: #82cdf4; }
475.acp-card-head p {
476 margin: 0;
477 color: var(--acp-muted);
478 font-size: 13px;
479}
480.acp-card-body { padding: 16px; }
481.acp-card-body.is-flush { padding: 0; }
482.acp-card-body > :last-child { margin-bottom: 0; }
483
484.acp-grid { display: grid; gap: 14px; }
485.acp-grid--2 { grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr); }
486.acp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
487.acp-grid > .acp-card { margin-bottom: 0; }
488
489/* Stats */
490.acp-stats {
491 display: grid;
492 grid-template-columns: repeat(6, minmax(132px, 1fr));
493 gap: 8px;
494 margin-bottom: 22px;
495}
496.acp-stat {
497 display: grid;
498 place-items: center;
499 min-height: 102px;
500 padding: 13px;
501 border: 1px solid var(--acp-line);
502 border-radius: var(--acp-radius);
503 background: var(--acp-panel);
504 box-shadow: var(--acp-shadow);
505 color: var(--acp-fg);
506 text-align: center;
507}
508a.acp-stat:hover {
509 border-color: var(--acp-blue-600);
510 color: var(--acp-fg);
511 text-decoration: none;
512}
513.acp-stat-icon {
514 display: block;
515 margin-bottom: 7px;
516 color: #83b7d7;
517 font-size: 31px;
518}
519.acp-stat-label {
520 display: block;
521 color: #12649b;
522 font-size: 14px;
523}
524[data-acp-theme="dark"] .acp-stat-label { color: #82cdf4; }
525.acp-stat-value {
526 display: block;
527 margin-top: 2px;
528 font-size: 23px;
529 font-weight: 700;
530 line-height: 1.1;
531 max-width: 100%;
532 white-space: normal;
533 overflow-wrap: anywhere;
534 word-break: normal;
535}
536.acp-stat--red .acp-stat-icon { color: var(--acp-red); }
537.acp-stat--teal .acp-stat-icon { color: #25a7a7; }
538.acp-stat--green .acp-stat-icon { color: var(--acp-green); }
539.acp-stat--amber .acp-stat-icon { color: var(--acp-amber); }
540.acp-stat--purple .acp-stat-icon { color: var(--acp-purple); }
541
542/* Tables */
543.acp-table-wrap { overflow-x: auto; }
544.acp-table {
545 width: 100%;
546 border-collapse: collapse;
547 font-size: 13.5px;
548}
549.acp-table th,
550.acp-table td {
551 padding: 10px 12px;
552 border-bottom: 1px solid var(--acp-line);
553 text-align: left;
554 vertical-align: middle;
555}
556.acp-table thead th {
557 background: var(--acp-panel-2);
558 color: var(--acp-muted);
559 font-size: 12px;
560 font-weight: 700;
561 letter-spacing: .05em;
562 text-transform: uppercase;
563}
564.acp-table tbody tr:last-child td { border-bottom: 0; }
565.acp-table tbody tr:hover td { background: var(--acp-panel-2); }
566.acp-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
567.acp-table .is-nowrap { white-space: nowrap; }
568.acp-table .is-muted { color: var(--acp-muted); }
569
570.acp-th-sortable {
571 cursor: pointer;
572 user-select: none;
573 position: relative;
574 padding-right: 20px !important;
575}
576.acp-th-sortable:hover { color: var(--acp-fg); }
577.acp-th-sortable::after {
578 content: '\2195';
579 position: absolute;
580 right: 7px;
581 opacity: .35;
582 font-weight: 400;
583}
584.acp-th-sortable.is-sorted-asc::after { content: '\2191'; opacity: 1; color: var(--acp-blue-600); }
585.acp-th-sortable.is-sorted-desc::after { content: '\2193'; opacity: 1; color: var(--acp-blue-600); }
586
587/* Forms */
588.acp-field { margin-bottom: 14px; }
589.acp-field:last-child { margin-bottom: 0; }
590.acp-label {
591 display: block;
592 margin-bottom: 5px;
593 color: var(--acp-fg);
594 font-size: 13px;
595 font-weight: 700;
596}
597.acp-hint {
598 margin: 5px 0 0;
599 color: var(--acp-muted);
600 font-size: 12px;
601}
602.acp-input,
603.acp-select,
604.acp-textarea {
605 width: 100%;
606 padding: 8px 10px;
607 border: 1px solid #c8d2da;
608 border-radius: var(--acp-radius);
609 background: var(--acp-panel);
610 color: var(--acp-fg);
611 font: inherit;
612 outline: none;
613}
614[data-acp-theme="dark"] .acp-input,
615[data-acp-theme="dark"] .acp-select,
616[data-acp-theme="dark"] .acp-textarea {
617 border-color: var(--acp-line);
618}
619.acp-input:focus,
620.acp-select:focus,
621.acp-textarea:focus {
622 border-color: var(--acp-blue-600);
623 box-shadow: 0 0 0 2px rgba(47, 148, 209, .15);
624}
625.acp-input:disabled,
626.acp-select:disabled,
627.acp-textarea:disabled {
628 background: var(--acp-panel-2);
629 color: var(--acp-muted);
630 cursor: not-allowed;
631}
632.acp-textarea { min-height: 130px; resize: vertical; }
633.acp-row {
634 display: grid;
635 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
636 gap: 14px;
637}
638.acp-actions {
639 display: flex;
640 flex-wrap: wrap;
641 align-items: center;
642 gap: 8px;
643 margin-top: 16px;
644}
645.acp-actions.is-tight { margin-top: 0; }
646
647.acp-btn {
648 display: inline-flex;
649 align-items: center;
650 justify-content: center;
651 gap: 7px;
652 min-height: 34px;
653 padding: 0 14px;
654 border: 1px solid #2588c4;
655 border-radius: var(--acp-radius);
656 background: #42a5e8;
657 color: #fff;
658 font: inherit;
659 font-weight: 700;
660 cursor: pointer;
661 white-space: nowrap;
662}
663.acp-btn:hover {
664 background: #58b6f3;
665 color: #fff;
666 text-decoration: none;
667}
668.acp-btn--ghost {
669 background: transparent;
670 border-color: var(--acp-line);
671 color: var(--acp-fg);
672}
673.acp-btn--ghost:hover {
674 background: var(--acp-panel-2);
675 color: var(--acp-fg);
676}
677.acp-btn--green { background: var(--acp-green); border-color: #277c51; }
678.acp-btn--red { background: var(--acp-red); border-color: #b53e3e; }
679.acp-btn--amber { background: var(--acp-amber); border-color: #d27700; }
680.acp-btn--blue { background: var(--acp-blue-600); border-color: #2588c4; }
681.acp-btn--sm { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
682
683.acp a.acp-btn,
684.acp a.acp-btn:hover,
685.acp a.acp-btn:visited,
686[data-acp-theme="dark"] .acp a.acp-btn {
687 color: #fff;
688 text-decoration: none;
689}
690
691.acp a.acp-btn--ghost,
692.acp a.acp-btn--ghost:hover,
693.acp a.acp-btn--ghost:visited,
694[data-acp-theme="dark"] .acp a.acp-btn--ghost {
695 color: var(--acp-fg);
696}
697.acp-inline-form { display: inline-block; margin: 0; }
698
699.acp-pill {
700 display: inline-block;
701 padding: 2px 9px;
702 border: 1px solid var(--acp-line);
703 border-radius: 50px;
704 background: var(--acp-panel-2);
705 color: var(--acp-muted);
706 font-size: 11.5px;
707 font-weight: 700;
708 white-space: nowrap;
709}
710.acp-pill--green { background: #e4f5ec; border-color: #b9dec9; color: #217147; }
711.acp-pill--red { background: #fde8e8; border-color: #f0c5c5; color: #bb2f2f; }
712.acp-pill--amber { background: #fff1dc; border-color: #f5d5a8; color: #a76100; }
713.acp-pill--blue { background: #e6f4fd; border-color: #bfdef1; color: #216282; }
714.acp-pill--purple { background: #eee9fb; border-color: #d3c8f1; color: #614ba1; }
715.acp-pill--grey { background: var(--acp-panel-2); }
716
717.acp-settings-tabs {
718 display: flex;
719 flex-wrap: wrap;
720 gap: 4px;
721 margin-bottom: 14px;
722 padding-bottom: 0;
723 border-bottom: 1px solid var(--acp-line);
724}
725.acp-settings-tab {
726 appearance: none;
727 background: transparent;
728 border: 1px solid transparent;
729 border-bottom: none;
730 border-radius: var(--acp-radius) var(--acp-radius) 0 0;
731 padding: 8px 14px;
732 font-size: 13px;
733 font-weight: 600;
734 color: var(--acp-muted);
735 cursor: pointer;
736 margin-bottom: -1px;
737}
738.acp-settings-tab:hover {
739 color: var(--acp-fg);
740 background: var(--acp-panel-2);
741}
742.acp-settings-tab.is-active {
743 color: var(--acp-blue-700);
744 background: var(--acp-panel);
745 border-color: var(--acp-line);
746 border-bottom: 1px solid var(--acp-panel);
747}
748.acp-settings-panels { display: block; }
749.acp-settings-panel[hidden] { display: none; }
750
751/* Reusable module bits */
752.acp-empty {
753 padding: 38px 20px;
754 text-align: center;
755 color: var(--acp-muted);
756}
757.acp-empty .fa {
758 display: block;
759 margin-bottom: 10px;
760 font-size: 34px;
761 opacity: .42;
762}
763.acp-media {
764 display: grid;
765 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
766 gap: 16px;
767}
768.acp-media-item,
769.acp-post {
770 border: 1px solid var(--acp-line);
771 border-radius: var(--acp-radius);
772 background: var(--acp-panel);
773 overflow: hidden;
774}
775/* Theme screenshots: any size in, the same card height out. */
776.acp-media-item > img {
777 display: block;
778 width: 100%;
779 height: 170px;
780 object-fit: cover;
781 object-position: top center;
782 background: var(--acp-panel-2);
783 border-bottom: 1px solid var(--acp-line);
784}
785
786.acp-media-body { padding: 12px 14px; }
787.acp-media-body h3 { margin-bottom: 5px; font-size: 14px; font-weight: 700; }
788.acp-media-body p { color: var(--acp-muted); font-size: 12.5px; }
789.acp-media-foot {
790 display: flex;
791 flex-wrap: wrap;
792 gap: 6px;
793 padding: 10px 14px;
794 border-top: 1px solid var(--acp-line);
795 background: var(--acp-panel-2);
796}
797.acp-post { margin-bottom: 14px; }
798.acp-post-head {
799 display: flex;
800 flex-wrap: wrap;
801 justify-content: space-between;
802 gap: 4px 12px;
803 padding: 10px 14px;
804 background: var(--acp-panel-2);
805 border-bottom: 1px solid var(--acp-line);
806 color: var(--acp-muted);
807 font-size: 12.5px;
808}
809.acp-post-head strong { color: var(--acp-fg); }
810.acp-post-body { padding: 15px; }
811.acp-post--staff { border-color: var(--acp-blue-600); }
812.acp-post--staff .acp-post-head { background: var(--acp-blue-100); }
813
814.acp-dl {
815 display: grid;
816 grid-template-columns: auto 1fr;
817 gap: 7px 16px;
818 margin: 0;
819 font-size: 13.5px;
820}
821.acp-dl dt { color: var(--acp-muted); }
822.acp-dl dd { margin: 0; min-width: 0; }
823
824.acp-toolbar {
825 display: flex;
826 flex-wrap: wrap;
827 align-items: center;
828 justify-content: space-between;
829 gap: 10px;
830 margin-bottom: 16px;
831}
832.acp-dump {
833 margin: 0;
834 padding: 14px;
835 border-radius: var(--acp-radius);
836 background: #10161e;
837 color: #c3cede;
838 overflow-x: auto;
839 font-size: 12px;
840 line-height: 1.5;
841}
842
843.acp-shop-preview-img,
844.acp-shop-preview-item {
845 display: inline-block;
846 vertical-align: middle;
847 max-width: none;
848}
849.acp-shop-preview-img { height: 48px; }
850.acp-shop-preview-item {
851 height: 32px;
852 image-rendering: auto;
853}
854.acp-shop-preview-img + .acp-shop-preview-img {
855 margin-left: 3px;
856}
857.acp-shop-id-field {
858 display: grid;
859 grid-template-columns: minmax(0, 1fr) 82px;
860 gap: 8px;
861 align-items: stretch;
862}
863.acp-shop-live-preview {
864 min-height: 42px;
865 display: flex;
866 align-items: center;
867 justify-content: center;
868 gap: 3px;
869 padding: 4px;
870 border: 1px solid var(--acp-line);
871 border-radius: var(--acp-radius);
872 background: var(--acp-panel-2);
873 overflow: hidden;
874}
875.acp-shop-live-preview .acp-shop-preview-img { height: 36px; }
876.acp-shop-live-preview .acp-shop-preview-item { height: 30px; }
877.acp-shop-form-card .acp-card-body { padding-bottom: 18px; }
878.acp-shop-form-row { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
879.acp-shop-offers-table th:first-child,
880.acp-shop-offers-table td:first-child { width: 48px; }
881.acp-shop-offers-table th:nth-child(2),
882.acp-shop-offers-table td:nth-child(2) { width: 96px; }
883.acp-shop-offers-table th:nth-child(4),
884.acp-shop-offers-table td:nth-child(4) { width: 100px; }
885.acp-shop-offers-table th:nth-child(5),
886.acp-shop-offers-table td:nth-child(5) { width: 115px; }
887.acp-shop-offer-actions {
888 text-align: right;
889}
890.acp-shop-offer-actions .acp-inline-form { margin-left: 8px; }
891
892@media (max-width: 1200px) {
893 .acp-stats { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
894 .acp-grid--2,
895 .acp-grid--3 { grid-template-columns: 1fr; }
896 .acp-shop-form-row { grid-template-columns: 1fr; }
897}
898
899@media (max-width: 840px) {
900 .acp-shell { grid-template-columns: 1fr; }
901 .acp-sidebar {
902 position: fixed;
903 inset: 0 auto 0 0;
904 width: var(--acp-sidebar-w);
905 transform: translateX(-100%);
906 transition: transform .18s ease;
907 }
908 .acp-nav-open .acp-sidebar { transform: translateX(0); }
909 .acp-backdrop {
910 position: fixed;
911 inset: 0;
912 z-index: 18;
913 background: rgba(0, 0, 0, .45);
914 }
915 .acp-nav-open .acp-backdrop { display: block; }
916 .acp-content,
917 .acp-footer { width: min(100% - 24px, 1154px); }
918 .acp-top-title span { display: none; }
919 .acp-sidebar-closed .acp-sidebar {
920 display: block;
921 }
922}
923
924@media (max-width: 560px) {
925 .acp-topbar { padding: 0 10px; }
926 .acp-user-name,
927 .acp-theme-toggle span { display: none; }
928 .acp-stats { grid-template-columns: 1fr; }
929 .acp-page-head h1 { font-size: 23px; }
930 .acp-footer { flex-direction: column; }
931 .acp-dl { grid-template-columns: 1fr; }
932}
933
934@media print {
935 .acp-sidebar,
936 .acp-topbar,
937 .acp-footer,
938 .acp-backdrop { display: none !important; }
939 .acp-shell { display: block; }
940 .acp-content { width: 100%; margin: 0; padding: 0; }
941 .acp-card { box-shadow: none; break-inside: avoid; }
942}
943
944/* Disabled paging arrow */
945.acp-btn.is-disabled {
946 opacity: .45;
947 pointer-events: none;
948}
949
950/* A catalogue theme that is already installed */
951.acp-media-item.is-dimmed { opacity: .58; }
952.acp-media-item.is-dimmed:hover { opacity: 1; }
953
954.acp-top-search {
955 position: relative;
956 flex: 1 1 auto;
957 max-width: 420px;
958 margin: 0 14px 0 auto;
959}
960
961.acp-top-search .fa {
962 position: absolute;
963 left: 10px;
964 top: 50%;
965 transform: translateY(-50%);
966 font-size: 13px;
967 color: rgba(255, 255, 255, .6);
968 pointer-events: none;
969}
970
971.acp-top-search input {
972 width: 100%;
973 height: 30px;
974 padding: 0 46px 0 30px;
975 border: 1px solid rgba(255, 255, 255, .18);
976 border-radius: 15px;
977 background: rgba(255, 255, 255, .12);
978 color: #fff;
979 font: inherit;
980 font-size: 13px;
981 outline: none;
982}
983
984.acp-top-search input::placeholder { color: rgba(255, 255, 255, .6); }
985
986.acp-top-search input:focus {
987 background: rgba(255, 255, 255, .2);
988 border-color: rgba(255, 255, 255, .45);
989}
990
991.acp-search-kbd {
992 position: absolute;
993 right: 8px;
994 top: 50%;
995 transform: translateY(-50%);
996 padding: 2px 6px;
997 border: 1px solid rgba(255, 255, 255, .25);
998 border-radius: 5px;
999 background: rgba(255, 255, 255, .1);
1000 color: rgba(255, 255, 255, .65);
1001 font-size: 10px;
1002 font-family: inherit;
1003 line-height: 1.4;
1004 pointer-events: none;
1005}
1006
1007.acp-search-page { margin: 0 0 16px; }
1008.acp-input--lg { height: 42px; font-size: 15px; }
1009
1010.acp-search-results { list-style: none; margin: 0; padding: 0; }
1011
1012.acp-search-results li { border-bottom: 1px solid var(--acp-line-soft); }
1013.acp-search-results li:last-child { border-bottom: 0; }
1014
1015.acp .acp-search-results a {
1016 display: flex;
1017 align-items: center;
1018 gap: 12px;
1019 padding: 11px 16px;
1020 color: var(--acp-fg);
1021 text-decoration: none;
1022}
1023
1024.acp .acp-search-results a:hover { background: var(--acp-panel-2); text-decoration: none; }
1025
1026.acp-search-results > li > a > .fa:first-child {
1027 width: 18px;
1028 text-align: center;
1029 color: var(--acp-muted);
1030}
1031
1032.acp-search-main { flex: 1 1 auto; min-width: 0; }
1033
1034.acp-search-title { display: block; font-weight: 600; }
1035
1036.acp-search-ctx {
1037 display: block;
1038 font-size: 12px;
1039 color: var(--acp-muted);
1040}
1041
1042.acp-search-detail {
1043 display: block;
1044 font-size: 12.5px;
1045 color: var(--acp-muted);
1046 margin-top: 2px;
1047}
1048
1049.acp-search-go { color: var(--acp-muted); }
1050
1051.acp-search-results mark {
1052 background: #ffe9a8;
1053 color: inherit;
1054 padding: 0 2px;
1055 border-radius: 2px;
1056}
1057
1058[data-acp-theme="dark"] .acp-search-results mark { background: #6b5a1f; color: #fff; }
1059
1060@media (max-width: 900px) {
1061 .acp-top-search { display: none; }
1062}
1063
1064.acp-field--found {
1065 position: relative;
1066 border-radius: var(--acp-radius);
1067 box-shadow: 0 0 0 3px rgba(47, 148, 209, .55);
1068 animation: acpFound 2.6s ease-out;
1069}
1070
1071@keyframes acpFound {
1072 0%, 60% { background: rgba(47, 148, 209, .14); }
1073 100% { background: transparent; }
1074}
1075
1076.acp-perm-list { display: flex; flex-direction: column; gap: 12px; }
1077.acp-perm-account {
1078 border: 1px solid var(--acp-line);
1079 border-radius: var(--acp-radius);
1080 background: var(--acp-panel-2);
1081 padding: 12px;
1082}
1083.acp-perm-account-head {
1084 display: flex;
1085 align-items: center;
1086 gap: 12px;
1087 flex-wrap: wrap;
1088 margin-bottom: 10px;
1089}
1090.acp-perm-account-head .acp-input { flex: 1 1 220px; min-width: 160px; }
1091.acp-perm-owner-toggle {
1092 display: flex;
1093 align-items: center;
1094 gap: 6px;
1095 font-weight: 700;
1096 white-space: nowrap;
1097}
1098.acp-perm-modules {
1099 display: grid;
1100 grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
1101 gap: 10px 16px;
1102 border-top: 1px solid var(--acp-line);
1103 padding-top: 10px;
1104}
1105.acp-perm-modules[hidden] { display: none; }
1106.acp-perm-group h4 {
1107 margin: 0 0 6px;
1108 font-size: 11px;
1109 font-weight: 700;
1110 letter-spacing: .05em;
1111 text-transform: uppercase;
1112 color: var(--acp-muted);
1113}
1114.acp-perm-mod {
1115 display: flex;
1116 align-items: center;
1117 gap: 7px;
1118 font-weight: 400;
1119 font-size: 13px;
1120 padding: 2px 0;
1121}
1122
1123.acp-progress-bar {
1124 height: 10px;
1125 border-radius: 6px;
1126 background: var(--acp-line);
1127 overflow: hidden;
1128}
1129.acp-progress-fill {
1130 height: 100%;
1131 width: 0%;
1132 background: var(--acp-green);
1133 transition: width .25s ease;
1134}
1135.acp-progress-log {
1136 margin-top: 10px;
1137 max-height: 200px;
1138 overflow-y: auto;
1139 padding: 10px 12px;
1140 border: 1px solid var(--acp-line);
1141 border-radius: 6px;
1142 background: var(--acp-bg-2, rgba(0, 0, 0, .12));
1143 font-family: monospace;
1144 font-size: 12px;
1145 line-height: 1.6;
1146}
1147
Top