From 7da168e2130487d9ccd6d9c345d5cad7f5c6c9f7 Mon Sep 17 00:00:00 2001 From: Kerim Atilgan Date: Fri, 15 May 2026 20:16:29 +0200 Subject: [PATCH] UI redesign step 5 (admin shell): Stitch-styled sidebar + page chrome MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Refresh the Administration tab in line with the Stitch design system: - Sidebar gets a soft cool-grey panel with a "Administration / Systemsteuerung" header. Each category button is a flat row with a Material Symbol on the left, label-caps text on the right; the active entry switches to a solid primary fill with a filled icon. - Replace the emoji icons (🏢 🔢 …) with the matching Material symbols (corporate_fare, badge, receipt_long, tune, percent, payments, rule, public). - Admin sub-pages drop the lavender gradient header and split into bordered white cards: section header (h3 + p) sits on the page background, form and content sections are independent surface cards with a subtle shadow. - Form controls (text/number/date inputs, selects, textareas) now share a compact h-30ish style with focus ring; labels render as label-caps. Primary form buttons swap from the legacy green to the primary blue. - Admin table reuses the same column header band as the Übersicht and Provisionen tables. Action buttons override the generic `table button` reset back to text-style pills with proper success / danger variants. Co-Authored-By: Claude Opus 4.7 (1M context) --- public/index.html | 290 ++++++++++++++++++++++++++++++++-------------- 1 file changed, 202 insertions(+), 88 deletions(-) diff --git a/public/index.html b/public/index.html index 2aa1b61..c44876b 100644 --- a/public/index.html +++ b/public/index.html @@ -253,70 +253,87 @@ } /* New Admin Interface Styles: sidebar + content */ + /* Admin layout — Stitch style sidebar + content pane */ .admin-layout { display: grid; grid-template-columns: 260px 1fr; - gap: 20px; + gap: 24px; align-items: start; } .admin-sidebar { - background: white; - padding: 20px; + background: #eff4ff; + padding: 16px; + border: 1px solid #c3c6d7; border-radius: 8px; - box-shadow: 0 2px 10px rgba(0,0,0,0.08); position: sticky; - top: 20px; + top: 76px; } .admin-sidebar h2 { + margin: 0 0 4px 0; + color: #0b1c30; + font-size: 14px; + font-weight: 600; + padding: 0 8px; + } + .admin-sidebar .admin-sidebar-subtitle { margin: 0 0 16px 0; - color: #2c3e50; - text-align: left; - font-size: 18px; + color: #434655; + font-size: 13px; + padding: 0 8px; } .admin-main { min-width: 0; + display: flex; + flex-direction: column; + gap: 24px; } .admin-categories { display: flex; flex-direction: column; - gap: 6px; + gap: 2px; } .admin-cat-btn { display: flex; align-items: center; - gap: 10px; - padding: 10px 14px; - background: #ffffff; - border: 1px solid #dee2e6; + gap: 12px; + padding: 8px 12px; + background: transparent; + border: none; border-radius: 8px; cursor: pointer; transition: all 0.15s ease; text-align: left; - font-size: 14px; + font-family: inherit; + font-size: 13px; font-weight: 500; - color: #2c3e50; + color: #434655; width: 100%; } - + .admin-cat-btn .material-symbols-outlined { + font-size: 20px; + color: #737686; + flex-shrink: 0; + } .admin-cat-btn:hover { - background: #e3f2fd; - border-color: #2196f3; + background: #dce9ff; + color: #0b1c30; + } + .admin-cat-btn:hover .material-symbols-outlined { + color: #0b1c30; } - .admin-cat-btn.active { - background: #2196f3; - color: white; - border-color: #1976d2; + background: #2563eb; + color: #ffffff; + font-weight: 600; } - - .admin-icon { - font-size: 18px; - line-height: 1; + .admin-cat-btn.active .material-symbols-outlined { + color: #ffffff; + font-variation-settings: 'FILL' 1; } @media (max-width: 900px) { @@ -356,59 +373,56 @@ .admin-category { display: none; - animation: fadeIn 0.3s ease-in; } - .admin-category.active { - display: block; + display: flex; + flex-direction: column; + gap: 24px; } + /* Each admin sub-page is now a column of bordered cards */ .admin-page { - background: white; - border-radius: 12px; - box-shadow: 0 4px 15px rgba(0,0,0,0.1); - overflow: hidden; + display: flex; + flex-direction: column; + gap: 24px; } .admin-header { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - padding: 30px; - text-align: center; + background: transparent; + padding: 0; + text-align: left; + color: inherit; + border-bottom: 1px solid #c3c6d7; + padding-bottom: 16px; } - .admin-header h3 { - margin: 0 0 10px 0; + margin: 0 0 4px 0; font-size: 24px; font-weight: 600; + color: #0b1c30; + letter-spacing: -0.01em; } - .admin-header p { margin: 0; - opacity: 0.9; - font-size: 16px; - } - - .admin-form-section { - padding: 30px; - border-bottom: 1px solid #eee; - background: #f8f9fa; - } - - .admin-form-section h4 { - margin: 0 0 20px 0; - color: #495057; - font-size: 18px; + color: #434655; + font-size: 14px; + opacity: 1; } + .admin-form-section, .admin-content-section { - padding: 30px; + padding: 20px; + background: #ffffff; + border: 1px solid #c3c6d7; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0,0,0,0.04); } - + .admin-form-section h4, .admin-content-section h4 { - margin: 0 0 20px 0; - color: #495057; - font-size: 18px; + margin: 0 0 16px 0; + color: #0b1c30; + font-size: 16px; + font-weight: 600; } .form-row { @@ -473,37 +487,87 @@ } .admin-list { - display: grid; - gap: 10px; + display: flex; + flex-direction: column; + gap: 8px; } .admin-table { width: 100%; border-collapse: collapse; - margin-top: 10px; + font-size: 13px; } - - .admin-table th, - .admin-table td { - padding: 12px; - text-align: left; - border-bottom: 1px solid #dee2e6; + .admin-table thead { + background: #dce9ff; + border-bottom: 2px solid #c3c6d7; } - .admin-table th { - background: #f8f9fa; - font-weight: 600; - color: #495057; + padding: 10px 16px; + text-align: left; + font-family: 'Hanken Grotesk', sans-serif; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.05em; + text-transform: uppercase; + color: #434655; } - - .admin-table tr:hover { - background: #f8f9fa; + .admin-table td { + padding: 8px 16px; + border-bottom: 1px solid rgba(195, 198, 215, 0.3); + color: #0b1c30; + } + .admin-table tbody tr:nth-child(even) { + background: rgba(239, 244, 255, 0.5); + } + .admin-table tbody tr:hover { + background: rgba(211, 228, 254, 0.3); } .table-container { overflow-x: auto; + border: 1px solid #c3c6d7; + border-radius: 8px; + background: #ffffff; + } + + /* Admin table action buttons — Stitch-like text buttons. + Overrides the table-button reset for the admin tables. */ + .admin-table button { + background: #ffffff; + color: #434655; + padding: 4px 10px; + border: 1px solid #c3c6d7; border-radius: 6px; - border: 1px solid #dee2e6; + font-size: 12px; + font-weight: 500; + cursor: pointer; + font-family: inherit; + transition: background 0.15s, color 0.15s, border-color 0.15s; + } + .admin-table button:hover { + background: #dce9ff; + color: #0b1c30; + border-color: #2563eb; + } + .admin-table button.btn-success, + .admin-table button.btn-primary { + background: #2563eb; + color: #ffffff; + border-color: #2563eb; + } + .admin-table button.btn-success:hover, + .admin-table button.btn-primary:hover { + background: #004ac6; + border-color: #004ac6; + } + .admin-table button.btn-danger { + background: #ffffff; + color: #ba1a1a; + border-color: #ffdad6; + } + .admin-table button.btn-danger:hover { + background: #ffdad6; + border-color: #ba1a1a; } @keyframes fadeIn { @@ -526,6 +590,55 @@ } } + /* Compact admin form controls */ + .admin-form-section input[type=text], + .admin-form-section input[type=number], + .admin-form-section input[type=date], + .admin-form-section select, + .admin-form-section textarea { + padding: 6px 10px; + border: 1px solid #c3c6d7; + border-radius: 6px; + font-size: 13px; + font-family: inherit; + background: #ffffff; + color: #0b1c30; + } + .admin-form-section input:focus, + .admin-form-section select:focus, + .admin-form-section textarea:focus { + outline: none; + border-color: #2563eb; + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); + } + .admin-form-section label { + font-size: 11px; + font-weight: 700; + letter-spacing: 0.05em; + text-transform: uppercase; + color: #434655; + min-width: 0; + } + /* Admin form buttons (primary + ghost) */ + .admin-form-section .btn-success, + .admin-form-section .btn-primary, + .admin-form-section button.btn { + background: #2563eb; + color: #ffffff; + padding: 8px 16px; + border-radius: 8px; + font-size: 13px; + font-weight: 500; + border: none; + cursor: pointer; + transition: background 0.15s; + } + .admin-form-section .btn-success:hover, + .admin-form-section .btn-primary:hover, + .admin-form-section button.btn:hover { + background: #004ac6; + } + .add-form { display: flex; gap: 10px; @@ -1128,38 +1241,39 @@