Lago/mc_cars_gmbh_infraestructure
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin): migrate admin UI to Microsoft Fluent web components

Browse Source
This commit is contained in:
Lago
2026-04-17 23:46:57 +02:00
parent fb0f81fbe5
commit 1e5895592a
3 changed files with 130 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/styles.css
+78 -31
View File
@@ -504,6 +504,39 @@ dialog::backdrop { background: rgba(0,0,0,0.6); }
}
/* ---------------- Admin ---------------- */
body.admin-fluent {
background: #f5f7fb;
color: #1b1a19;
font-family: "Segoe UI", "Segoe UI Web (West European)", system-ui, -apple-system, sans-serif;
}
body.admin-fluent h1,
body.admin-fluent h2,
body.admin-fluent h3,
body.admin-fluent h4 {
font-family: "Segoe UI", "Segoe UI Web (West European)", system-ui, sans-serif;
letter-spacing: 0;
}
body.admin-fluent .logo-mark {
background: linear-gradient(135deg, #0f6cbd 0%, #0a4f8f 100%);
color: #fff;
}
body.admin-fluent input,
body.admin-fluent select,
body.admin-fluent textarea {
background: #ffffff;
border: 1px solid #c8d1dc;
color: #1b1a19;
}
body.admin-fluent input:focus,
body.admin-fluent select:focus,
body.admin-fluent textarea:focus {
border-color: #0f6cbd;
}
.admin-page {
max-width: 1100px;
margin: 2rem auto;
@@ -514,9 +547,10 @@ dialog::backdrop { background: rgba(0,0,0,0.6); }
max-width: 420px;
margin: 5rem auto;
padding: 2rem;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius);
background: #ffffff;
border: 1px solid #dde3ea;
border-radius: 12px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.admin-bar {
@@ -525,7 +559,7 @@ dialog::backdrop { background: rgba(0,0,0,0.6); }
align-items: center;
padding: 1rem 0;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--line);
border-bottom: 1px solid #dde3ea;
}
.admin-bar h1 { margin: 0; font-size: 1.4rem; }
@@ -537,10 +571,11 @@ dialog::backdrop { background: rgba(0,0,0,0.6); }
}
.panel {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius);
background: #ffffff;
border: 1px solid #dde3ea;
border-radius: 12px;
padding: 1.4rem;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}
.panel h2 { font-size: 1.1rem; font-family: "Inter", sans-serif; margin-bottom: 1rem; }
@@ -549,65 +584,77 @@ table.admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem;
table.admin-table th, table.admin-table td {
text-align: left;
padding: 0.55rem 0.5rem;
border-bottom: 1px solid var(--line);
border-bottom: 1px solid #ecf0f4;
}
table.admin-table th { color: var(--muted); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
table.admin-table tr:hover { background: rgba(255,255,255,0.02); }
table.admin-table th { color: #616161; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
table.admin-table tr:hover { background: #f8fafc; }
.admin-form { display: grid; gap: 0.7rem; }
.admin-form label { display: grid; gap: 0.25rem; font-size: 0.82rem; color: var(--muted); }
.admin-form label { display: grid; gap: 0.25rem; font-size: 0.82rem; color: #616161; }
.admin-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.admin-form .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.7rem; }
.admin-photo-preview {
width: 100%;
aspect-ratio: 16 / 9;
background: var(--bg-elev) center / cover no-repeat;
border: 1px dashed var(--line);
background: #f3f5f8 center / cover no-repeat;
border: 1px dashed #c8d1dc;
border-radius: 10px;
margin-bottom: 0.5rem;
}
/* Admin tabs */
.admin-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--line); padding-bottom: 0.2rem; flex-wrap: wrap; }
.admin-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.2rem; border-bottom: 1px solid #dde3ea; padding-bottom: 0.2rem; flex-wrap: wrap; }
.admin-tabs .tab {
background: transparent; border: none; color: var(--muted);
color: #616161;
padding: 0.6rem 1rem; border-radius: 10px 10px 0 0;
font-family: "Inter", sans-serif; font-weight: 500; cursor: pointer;
font-family: "Segoe UI", sans-serif; font-weight: 600; cursor: pointer;
display: inline-flex; align-items: center; gap: 0.4rem;
border-bottom: 2px solid transparent;
}
.admin-tabs .tab:hover { color: var(--fg); }
.admin-tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.admin-tabs .tab:hover { color: #0f6cbd; }
.admin-tabs .tab.active { color: #0f6cbd; border-bottom-color: #0f6cbd; }
.tab-badge {
background: var(--bg-elev); color: var(--fg);
background: #eef2f7; color: #323130;
font-size: 0.7rem; padding: 0.1rem 0.5rem;
border-radius: 999px; min-width: 1.3rem; text-align: center;
}
.admin-tabs .tab.active .tab-badge { background: var(--accent); color: #111; }
.admin-tabs .tab.active .tab-badge { background: #0f6cbd; color: #fff; }
.sub-tabs { display: inline-flex; gap: 0.3rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem; }
.sub-tabs { display: inline-flex; gap: 0.3rem; background: #f3f5f8; border: 1px solid #d8e0ea; border-radius: 999px; padding: 0.2rem; }
.sub-tab {
background: transparent; border: none; color: var(--muted);
color: #616161;
padding: 0.35rem 0.9rem; border-radius: 999px; cursor: pointer;
font-size: 0.82rem; font-family: "Inter", sans-serif;
font-size: 0.82rem; font-family: "Segoe UI", sans-serif;
}
.sub-tab.active { background: var(--accent); color: #111; font-weight: 600; }
.sub-tab.active { background: #0f6cbd; color: #fff; font-weight: 600; }
/* Pills */
.pill { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid var(--line); }
.pill-new { background: rgba(200, 150, 80, 0.15); color: #e4b676; border-color: rgba(200, 150, 80, 0.4); }
.pill-qualified { background: rgba(90, 180, 120, 0.15); color: #6ecf96; border-color: rgba(90, 180, 120, 0.4); }
.pill-disqualified { background: rgba(180, 90, 90, 0.15); color: #d48a8a; border-color: rgba(180, 90, 90, 0.4); }
.pill-active { background: rgba(90, 180, 120, 0.15); color: #6ecf96; border-color: rgba(90, 180, 120, 0.4); }
.pill-inactive { background: rgba(160, 160, 160, 0.12); color: var(--muted); }
.pill { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid #dde3ea; }
.pill-new { background: #e8f3ff; color: #0f6cbd; border-color: #bbd8f2; }
.pill-qualified { background: #ebf7ee; color: #0b6a38; border-color: #b8ddc5; }
.pill-disqualified { background: #fdeeee; color: #a4262c; border-color: #efb7bc; }
.pill-active { background: #ebf7ee; color: #0b6a38; border-color: #b8ddc5; }
.pill-inactive { background: #f3f2f1; color: #605e5c; }
.muted { color: var(--muted); }
.muted { color: #616161; }
.btn.small { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
.btn.danger { background: #7a2b2b; color: #fff; }
.btn.danger:hover { background: #8f3535; }
body.admin-fluent fluent-button {
vertical-align: middle;
}
body.admin-fluent td fluent-button {
margin-right: 0.35rem;
}
body.admin-fluent td fluent-button:last-child {
margin-right: 0;
}
/* Dialog */
dialog#leadDialog {
border: 1px solid var(--line); border-radius: var(--radius);