diff --git a/system/apps/admin-apps/assets/app.css b/system/apps/admin-apps/assets/app.css index e53fe604..42df1a69 100644 --- a/system/apps/admin-apps/assets/app.css +++ b/system/apps/admin-apps/assets/app.css @@ -1,5 +1,7 @@ #admin-apps-app { - color: #102033; + min-height: 100%; + color: #0f172a; + font-family: "IBM Plex Sans", "Segoe UI", sans-serif; } #admin-apps-app, @@ -21,91 +23,86 @@ #admin-apps-app .aa-brand, #admin-apps-app .aa-copy, -#admin-apps-app .aa-meta, -#admin-apps-app .aa-table-copy, -#admin-apps-app .aa-message, -#admin-apps-app .aa-side-metric span, -#admin-apps-app .aa-field span, -#admin-apps-app .aa-inline-card p { - color: #4a6079; +#admin-apps-app .aa-meta { + margin: 0; } #admin-apps-app .aa-kicker { + margin: 0 0 10px; + font-size: 12px; + font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; - font-size: 0.72rem; - color: #6d84a0; - margin: 0 0 0.45rem; -} - -#admin-apps-app .aa-sidebar { - background: linear-gradient(180deg, rgba(10, 32, 58, 0.96), rgba(21, 52, 90, 0.92)); - color: #f3f7fb; -} - -#admin-apps-app .aa-sidebar .aa-copy, -#admin-apps-app .aa-sidebar .aa-meta, -#admin-apps-app .aa-sidebar .aa-side-metric span, -#admin-apps-app .aa-sidebar .aa-kicker { - color: rgba(232, 241, 250, 0.78); -} - -#admin-apps-app .aa-sidebar .aa-card { - background: rgba(255, 255, 255, 0.08); - border: 1px solid rgba(255, 255, 255, 0.08); + color: #2563eb; } #admin-apps-app .aa-nav-button.is-active { - background: rgba(255, 255, 255, 0.16); - border-color: rgba(255, 255, 255, 0.18); + color: #0f172a; +} + +#admin-apps-app .aa-card, +#admin-apps-app .aa-stat-card, +#admin-apps-app .aa-diag-card { + display: grid; + gap: 14px; +} + +#admin-apps-app .aa-side-title, +#admin-apps-app .aa-section-title { + margin: 0; + font-size: 18px; + line-height: 1.2; +} + +#admin-apps-app .aa-side-metric, +#admin-apps-app .aa-field, +#admin-apps-app .aa-inline-card, +#admin-apps-app .aa-stat-card, +#admin-apps-app .aa-diag-card { + display: grid; + gap: 6px; +} + +#admin-apps-app .aa-side-metric span, +#admin-apps-app .aa-field span, +#admin-apps-app .aa-inline-card p, +#admin-apps-app .aa-table-copy, +#admin-apps-app .aa-message, +#admin-apps-app .aa-stat-card span, +#admin-apps-app .aa-diag-card span { + font-size: 14px; + line-height: 1.5; + color: #475569; } #admin-apps-app .aa-grid { display: grid; - gap: 1rem; + gap: 18px; } #admin-apps-app .aa-grid--stats, #admin-apps-app .aa-grid--diag { - grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); - margin-bottom: 1rem; -} - -#admin-apps-app .aa-stat-card, -#admin-apps-app .aa-diag-card { - display: grid; - gap: 0.35rem; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } #admin-apps-app .aa-stat-card strong, #admin-apps-app .aa-diag-card strong, #admin-apps-app .aa-side-metric strong { - font-size: 1.35rem; - color: #102033; -} - -#admin-apps-app .aa-side-title, -#admin-apps-app .aa-section-title { - font-size: 1rem; - margin: 0; -} - -#admin-apps-app .aa-side-metric, -#admin-apps-app .aa-field, -#admin-apps-app .aa-inline-card { - display: grid; - gap: 0.35rem; + font-size: 28px; + line-height: 1.05; + color: #0f172a; } #admin-apps-app .aa-form { display: grid; - gap: 1rem; + gap: 16px; } #admin-apps-app .aa-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 1rem; + gap: 14px; + align-items: start; } #admin-apps-app .aa-field--full { @@ -114,32 +111,50 @@ #admin-apps-app .aa-field input, #admin-apps-app .aa-field textarea, -#admin-apps-app .aa-field select { +#admin-apps-app .aa-field select, +#admin-apps-app .aa-inline-card { width: 100%; - border: 1px solid #c9d4e0; - border-radius: 12px; - padding: 0.8rem 0.95rem; - background: #f8fbfd; - color: #102033; + min-height: 46px; + padding: 12px 14px; + border-radius: 14px; + border: 1px solid rgba(148, 163, 184, 0.24); + background: rgba(255, 255, 255, 0.95); + color: #0f172a; font: inherit; } #admin-apps-app .aa-field textarea { + min-height: 132px; resize: vertical; - min-height: 8rem; +} + +#admin-apps-app .aa-inline-card { + align-self: end; +} + +#admin-apps-app .aa-inline-card strong { + display: block; +} + +#admin-apps-app .aa-inline-card code, +#admin-apps-app .aa-table code { + display: inline-block; + font-size: 13px; + overflow-wrap: anywhere; + word-break: break-word; } #admin-apps-app .aa-section-head, #admin-apps-app .aa-actions { display: flex; - align-items: center; justify-content: space-between; - gap: 1rem; + align-items: flex-start; + gap: 16px; } #admin-apps-app .aa-primary { - background: #153d68; - color: #f7fbff; + background: linear-gradient(135deg, #312e81, #4338ca); + color: #fff; } #admin-apps-app .aa-table-wrap { @@ -148,61 +163,51 @@ #admin-apps-app .aa-table { width: 100%; - border-collapse: collapse; min-width: 760px; + border-collapse: collapse; } #admin-apps-app .aa-table th, #admin-apps-app .aa-table td { + padding: 14px 12px; + border-bottom: 1px solid rgba(148, 163, 184, 0.22); text-align: left; vertical-align: top; - padding: 0.85rem 0.75rem; - border-bottom: 1px solid #dde6ee; } #admin-apps-app .aa-table th { - font-size: 0.78rem; + font-size: 12px; + font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; - color: #6d84a0; + color: #64748b; } -#admin-apps-app .aa-table code, -#admin-apps-app .aa-inline-card code { - display: inline-block; - font-size: 0.86rem; - background: #eef4f8; - color: #153d68; - border-radius: 10px; - padding: 0.18rem 0.45rem; - word-break: break-all; +#admin-apps-app .aa-table td strong { + display: block; + margin-bottom: 4px; + font-size: 15px; } #admin-apps-app .aa-flag-list { display: flex; flex-wrap: wrap; - gap: 0.35rem; -} - -#admin-apps-app .aa-inline-card { - align-self: end; - background: #f4f8fb; + gap: 8px; } #admin-apps-app .aa-message { + padding: 14px 16px; border-radius: 14px; - padding: 0.9rem 1rem; - background: #eef4f8; } #admin-apps-app .aa-message.is-success { - background: #e7f6ec; - color: #1e6a3c; + background: rgba(34, 197, 94, 0.12); + color: #166534; } #admin-apps-app .aa-message.is-error { - background: #fdecec; - color: #9b263a; + background: rgba(239, 68, 68, 0.1); + color: #991b1b; } #admin-apps-app .aa-list {