This commit is contained in:
parent
8b1772966e
commit
e726f78d16
1 changed files with 400 additions and 0 deletions
400
css/admin.css
400
css/admin.css
|
|
@ -1548,3 +1548,403 @@ code {
|
||||||
transition-duration: 0.01ms !important;
|
transition-duration: 0.01ms !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Minimal workspace theme --------------------------------------------------
|
||||||
|
Inspired by modern payment dashboards: flat surfaces, quiet dividers,
|
||||||
|
compact controls, and a single cool accent. Kept as a final theme layer so
|
||||||
|
the admin tools and responsive layout above remain unchanged. */
|
||||||
|
:root {
|
||||||
|
--admin-bg: #ffffff;
|
||||||
|
--admin-surface: #ffffff;
|
||||||
|
--admin-surface-soft: #f6f8fb;
|
||||||
|
--admin-sidebar: #ffffff;
|
||||||
|
--admin-sidebar-soft: #f3f7ff;
|
||||||
|
--admin-text: #172b4d;
|
||||||
|
--admin-muted: #61708a;
|
||||||
|
--admin-border: #e2e8f0;
|
||||||
|
--admin-border-strong: #cdd8e7;
|
||||||
|
--admin-primary: #635bff;
|
||||||
|
--admin-primary-hover: #5147f5;
|
||||||
|
--admin-primary-soft: #f0efff;
|
||||||
|
--admin-blue: #466180;
|
||||||
|
--admin-blue-soft: #f2f5f9;
|
||||||
|
--admin-success: #287052;
|
||||||
|
--admin-success-soft: #edf8f3;
|
||||||
|
--admin-warning: #8a5b14;
|
||||||
|
--admin-warning-soft: #fff8e7;
|
||||||
|
--admin-danger: #b42318;
|
||||||
|
--admin-shadow: none;
|
||||||
|
--admin-radius: 10px;
|
||||||
|
--admin-radius-small: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus-visible {
|
||||||
|
outline-color: rgba(99, 91, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-app {
|
||||||
|
grid-template-columns: 248px minmax(0, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-sidebar {
|
||||||
|
gap: 30px;
|
||||||
|
padding: 22px 14px 18px;
|
||||||
|
border-right: 1px solid var(--admin-border);
|
||||||
|
color: var(--admin-text);
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-brand {
|
||||||
|
padding: 0 8px;
|
||||||
|
color: var(--admin-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-brand-mark {
|
||||||
|
width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
flex-basis: 38px;
|
||||||
|
border: 1px solid var(--admin-border);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-brand-mark img {
|
||||||
|
width: 31px;
|
||||||
|
height: 31px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-brand-copy strong {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-brand-copy span,
|
||||||
|
.admin-nav-label {
|
||||||
|
color: var(--admin-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-nav-label {
|
||||||
|
margin-bottom: 7px;
|
||||||
|
font-size: 10px;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-nav-button {
|
||||||
|
min-height: 40px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border-radius: 7px;
|
||||||
|
color: #3e5270;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-nav-button:hover {
|
||||||
|
color: var(--admin-text);
|
||||||
|
background: #f6f8fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-nav-button[aria-selected="true"] {
|
||||||
|
border-color: #b9d9ff;
|
||||||
|
color: var(--admin-primary);
|
||||||
|
background: #f8fbff;
|
||||||
|
box-shadow: 0 0 0 3px #dceeff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-nav-button[aria-selected="true"]::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-sidebar-note {
|
||||||
|
gap: 5px;
|
||||||
|
padding: 13px;
|
||||||
|
border-color: var(--admin-border);
|
||||||
|
color: var(--admin-text);
|
||||||
|
background: var(--admin-surface-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-sidebar-note p {
|
||||||
|
color: var(--admin-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-topbar {
|
||||||
|
position: relative;
|
||||||
|
min-height: 88px;
|
||||||
|
padding: 20px clamp(28px, 4vw, 56px);
|
||||||
|
border-bottom: 0;
|
||||||
|
background: #ffffff;
|
||||||
|
backdrop-filter: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-topbar-copy p {
|
||||||
|
color: var(--admin-muted);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-topbar-copy h1 {
|
||||||
|
margin-top: 3px;
|
||||||
|
font-size: 27px;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-main {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px clamp(28px, 4vw, 56px) 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-tab-panel {
|
||||||
|
gap: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-button,
|
||||||
|
.admin-link-button {
|
||||||
|
min-height: 38px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-color: var(--admin-border-strong);
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0 1px 1px rgba(23, 43, 77, 0.03);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 650;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-button:hover,
|
||||||
|
.admin-link-button:hover {
|
||||||
|
border-color: #9fb0c7;
|
||||||
|
background: #f9fbfd;
|
||||||
|
box-shadow: 0 2px 5px rgba(23, 43, 77, 0.07);
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-button-primary,
|
||||||
|
.admin-link-button-primary {
|
||||||
|
border-color: var(--admin-primary);
|
||||||
|
background: var(--admin-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-overview-banner {
|
||||||
|
display: flex;
|
||||||
|
overflow: visible;
|
||||||
|
gap: 24px;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 4px 0 28px;
|
||||||
|
border: 0;
|
||||||
|
border-bottom: 1px solid var(--admin-border);
|
||||||
|
border-radius: 0;
|
||||||
|
color: var(--admin-text);
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-overview-banner::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-banner-copy h2 {
|
||||||
|
max-width: 760px;
|
||||||
|
font-size: clamp(28px, 3vw, 38px);
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-banner-copy p {
|
||||||
|
max-width: 720px;
|
||||||
|
margin-top: 8px;
|
||||||
|
color: var(--admin-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-banner-actions {
|
||||||
|
display: flex;
|
||||||
|
min-width: 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-banner-actions .admin-button,
|
||||||
|
.admin-banner-actions .admin-link-button {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-banner-actions .admin-button:not(.admin-button-primary),
|
||||||
|
.admin-banner-actions .admin-link-button {
|
||||||
|
border-color: var(--admin-border-strong);
|
||||||
|
color: var(--admin-text);
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-banner-actions .admin-button:not(.admin-button-primary):hover,
|
||||||
|
.admin-banner-actions .admin-link-button:hover {
|
||||||
|
background: #f9fbfd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-stat-grid {
|
||||||
|
gap: 0;
|
||||||
|
border: 1px solid var(--admin-border);
|
||||||
|
border-radius: var(--admin-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-stat-card {
|
||||||
|
min-height: 112px;
|
||||||
|
padding: 18px;
|
||||||
|
border: 0;
|
||||||
|
border-right: 1px solid var(--admin-border);
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-stat-card:first-child {
|
||||||
|
border-radius: var(--admin-radius) 0 0 var(--admin-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-stat-card:last-child {
|
||||||
|
border-right: 0;
|
||||||
|
border-radius: 0 var(--admin-radius) var(--admin-radius) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-stat-icon,
|
||||||
|
.admin-setting-card-icon {
|
||||||
|
border-radius: 7px;
|
||||||
|
color: var(--admin-blue);
|
||||||
|
background: var(--admin-blue-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-stat-icon.is-warm,
|
||||||
|
.admin-stat-icon.is-green {
|
||||||
|
color: var(--admin-blue);
|
||||||
|
background: var(--admin-blue-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-stat-copy strong {
|
||||||
|
font-size: 23px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-overview-grid {
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-panel,
|
||||||
|
.admin-setting-card {
|
||||||
|
border-color: var(--admin-border);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-panel-header {
|
||||||
|
min-height: 70px;
|
||||||
|
padding: 16px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-panel-header h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-panel-body {
|
||||||
|
padding: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-content-type,
|
||||||
|
.admin-status-pill {
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-field input,
|
||||||
|
.admin-field select,
|
||||||
|
.admin-field textarea,
|
||||||
|
.admin-code-output,
|
||||||
|
.admin-search-wrap input,
|
||||||
|
.admin-filter-select {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-field input:focus,
|
||||||
|
.admin-field select:focus,
|
||||||
|
.admin-field textarea:focus,
|
||||||
|
.admin-code-output:focus {
|
||||||
|
border-color: var(--admin-primary);
|
||||||
|
box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-speech-row.is-selected {
|
||||||
|
border-color: #c7c4ff;
|
||||||
|
background: var(--admin-primary-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1220px) and (min-width: 1001px) {
|
||||||
|
.admin-stat-card:nth-child(2) {
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-stat-card:nth-child(-n + 2) {
|
||||||
|
border-bottom: 1px solid var(--admin-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-stat-card:first-child,
|
||||||
|
.admin-stat-card:nth-child(2),
|
||||||
|
.admin-stat-card:nth-child(3),
|
||||||
|
.admin-stat-card:last-child {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
.admin-app {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-sidebar {
|
||||||
|
border-right: 0;
|
||||||
|
border-bottom: 1px solid var(--admin-border);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.admin-topbar {
|
||||||
|
padding: 15px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-main {
|
||||||
|
padding: 14px 16px 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-overview-banner {
|
||||||
|
display: grid;
|
||||||
|
align-items: stretch;
|
||||||
|
padding-bottom: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-banner-actions {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-banner-actions .admin-button,
|
||||||
|
.admin-banner-actions .admin-link-button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 520px) {
|
||||||
|
.admin-stat-grid {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-stat-card,
|
||||||
|
.admin-stat-card:first-child,
|
||||||
|
.admin-stat-card:last-child {
|
||||||
|
border-right: 0;
|
||||||
|
border-bottom: 1px solid var(--admin-border);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-stat-card:last-child {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-banner-actions {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue