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/admin.html
+35 -23
View File
@@ -4,11 +4,23 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Admin · MC Cars</title> <title>Admin · MC Cars</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
<script type="module">
import {
provideFluentDesignSystem,
fluentButton,
fluentCard
} from "https://esm.sh/@fluentui/web-components@2.6.1";
provideFluentDesignSystem().register(
fluentButton(),
fluentCard()
);
</script>
<script>document.write('<scr'+'ipt src="config.js?v='+Date.now()+'"><\/scr'+'ipt>')</script> <script>document.write('<scr'+'ipt src="config.js?v='+Date.now()+'"><\/scr'+'ipt>')</script>
</head> </head>
<body> <body class="admin-fluent">
<!-- Login --> <!-- Login -->
<section id="loginView" class="admin-login" style="display:none;"> <section id="loginView" class="admin-login" style="display:none;">
<div class="logo" style="justify-content:center;margin-bottom:1.5rem;"> <div class="logo" style="justify-content:center;margin-bottom:1.5rem;">
@@ -24,7 +36,7 @@
<span>Passwort</span> <span>Passwort</span>
<input type="password" name="password" required autocomplete="current-password" /> <input type="password" name="password" required autocomplete="current-password" />
</label> </label>
<button class="btn" type="submit">Anmelden</button> <fluent-button id="loginSubmit" appearance="accent" type="button">Anmelden</fluent-button>
<p class="form-feedback error" id="loginError"></p> <p class="form-feedback error" id="loginError"></p>
<p style="color:var(--muted);font-size:0.82rem;text-align:center;"> <p style="color:var(--muted);font-size:0.82rem;text-align:center;">
Only admins. Self-registration is disabled. Only admins. Self-registration is disabled.
@@ -51,7 +63,7 @@
<span>Wiederholen</span> <span>Wiederholen</span>
<input type="password" name="pw2" minlength="10" required autocomplete="new-password" /> <input type="password" name="pw2" minlength="10" required autocomplete="new-password" />
</label> </label>
<button class="btn" type="submit">Speichern</button> <fluent-button id="rotateSubmit" appearance="accent" type="button">Speichern</fluent-button>
<p class="form-feedback error" id="rotateError"></p> <p class="form-feedback error" id="rotateError"></p>
</form> </form>
</section> </section>
@@ -61,29 +73,29 @@
<div class="admin-bar"> <div class="admin-bar">
<h1>MC Cars · Admin</h1> <h1>MC Cars · Admin</h1>
<div style="display:flex;gap:0.6rem;align-items:center;flex-wrap:wrap;"> <div style="display:flex;gap:0.6rem;align-items:center;flex-wrap:wrap;">
<a href="index.html" class="btn ghost small">Website</a> <a href="index.html"><fluent-button appearance="stealth">Website</fluent-button></a>
<span id="adminWho" style="color:var(--muted);font-size:0.85rem;"></span> <span id="adminWho" style="color:var(--muted);font-size:0.85rem;"></span>
<button id="changePwBtn" class="btn ghost small">Passwort aendern</button> <fluent-button id="changePwBtn" appearance="outline">Passwort aendern</fluent-button>
<button id="logoutBtn" class="btn small">Logout</button> <fluent-button id="logoutBtn" appearance="accent">Logout</fluent-button>
</div> </div>
</div> </div>
<!-- Tabs --> <!-- Tabs -->
<div class="admin-tabs" role="tablist"> <div class="admin-tabs" role="tablist">
<button class="tab active" data-tab="leads" role="tab">Leads <span id="leadsBadge" class="tab-badge">0</span></button> <fluent-button class="tab active" data-tab="leads" role="tab" appearance="stealth">Leads <span id="leadsBadge" class="tab-badge">0</span></fluent-button>
<button class="tab" data-tab="customers" role="tab">Kunden <span id="customersBadge" class="tab-badge">0</span></button> <fluent-button class="tab" data-tab="customers" role="tab" appearance="stealth">Kunden <span id="customersBadge" class="tab-badge">0</span></fluent-button>
<button class="tab" data-tab="vehicles" role="tab">Fahrzeuge</button> <fluent-button class="tab" data-tab="vehicles" role="tab" appearance="stealth">Fahrzeuge</fluent-button>
</div> </div>
<!-- LEADS --> <!-- LEADS -->
<div class="tab-panel" id="tab-leads"> <div class="tab-panel" id="tab-leads">
<div class="panel"> <fluent-card class="panel">
<div style="display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;"> <div style="display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;">
<h2 style="margin:0;">Leads</h2> <h2 style="margin:0;">Leads</h2>
<div class="sub-tabs" role="tablist"> <div class="sub-tabs" role="tablist">
<button class="sub-tab active" data-lview="active">Aktive Leads</button> <fluent-button class="sub-tab active" data-lview="active" appearance="stealth">Aktive Leads</fluent-button>
<button class="sub-tab" data-lview="inactive">Abgeschlossen</button> <fluent-button class="sub-tab" data-lview="inactive" appearance="stealth">Abgeschlossen</fluent-button>
</div> </div>
</div> </div>
<table class="admin-table" id="leadsTable"> <table class="admin-table" id="leadsTable">
@@ -100,12 +112,12 @@
<tbody></tbody> <tbody></tbody>
</table> </table>
<p id="leadsEmpty" class="muted" style="display:none;text-align:center;padding:2rem 0;">Keine Leads in dieser Ansicht.</p> <p id="leadsEmpty" class="muted" style="display:none;text-align:center;padding:2rem 0;">Keine Leads in dieser Ansicht.</p>
</div> </fluent-card>
</div> </div>
<!-- CUSTOMERS --> <!-- CUSTOMERS -->
<div class="tab-panel" id="tab-customers" style="display:none;"> <div class="tab-panel" id="tab-customers" style="display:none;">
<div class="panel"> <fluent-card class="panel">
<h2>Kunden</h2> <h2>Kunden</h2>
<p class="muted" style="margin-top:-0.4rem;">Entstehen automatisch, sobald ein Lead qualifiziert wird. Die Quelle bleibt als <code>lead_id</code> verknuepft.</p> <p class="muted" style="margin-top:-0.4rem;">Entstehen automatisch, sobald ein Lead qualifiziert wird. Die Quelle bleibt als <code>lead_id</code> verknuepft.</p>
<table class="admin-table" id="customersTable"> <table class="admin-table" id="customersTable">
@@ -122,13 +134,13 @@
<tbody></tbody> <tbody></tbody>
</table> </table>
<p id="customersEmpty" class="muted" style="display:none;text-align:center;padding:2rem 0;">Noch keine Kunden.</p> <p id="customersEmpty" class="muted" style="display:none;text-align:center;padding:2rem 0;">Noch keine Kunden.</p>
</div> </fluent-card>
</div> </div>
<!-- VEHICLES --> <!-- VEHICLES -->
<div class="tab-panel" id="tab-vehicles" style="display:none;"> <div class="tab-panel" id="tab-vehicles" style="display:none;">
<div class="admin-grid"> <div class="admin-grid">
<div class="panel"> <fluent-card class="panel">
<h2 id="formTitle">Neues Fahrzeug</h2> <h2 id="formTitle">Neues Fahrzeug</h2>
<form class="admin-form" id="vehicleForm"> <form class="admin-form" id="vehicleForm">
<input type="hidden" name="vid" /> <input type="hidden" name="vid" />
@@ -180,14 +192,14 @@
</label> </label>
<div style="display:flex;gap:0.5rem;"> <div style="display:flex;gap:0.5rem;">
<button class="btn" type="submit" id="saveBtn">Speichern</button> <fluent-button appearance="accent" type="button" id="saveBtn">Speichern</fluent-button>
<button class="btn ghost" type="button" id="resetBtn">Neu</button> <fluent-button appearance="outline" type="button" id="resetBtn">Neu</fluent-button>
</div> </div>
<p class="form-feedback" id="formFeedback"></p> <p class="form-feedback" id="formFeedback"></p>
</form> </form>
</div> </fluent-card>
<div class="panel"> <fluent-card class="panel">
<h2>Alle Fahrzeuge</h2> <h2>Alle Fahrzeuge</h2>
<table class="admin-table" id="adminTable"> <table class="admin-table" id="adminTable">
<thead> <thead>
@@ -201,7 +213,7 @@
</thead> </thead>
<tbody></tbody> <tbody></tbody>
</table> </table>
</div> </fluent-card>
</div> </div>
</div> </div>
</section> </section>
@@ -210,7 +222,7 @@
<dialog id="leadDialog"> <dialog id="leadDialog">
<div class="dialog-head"> <div class="dialog-head">
<h3 id="leadDialogTitle" style="margin:0;">Lead</h3> <h3 id="leadDialogTitle" style="margin:0;">Lead</h3>
<button class="dialog-close" id="leadDialogClose" aria-label="Close">×</button> <fluent-button class="dialog-close" id="leadDialogClose" aria-label="Close" appearance="stealth">×</fluent-button>
</div> </div>
<div class="dialog-body" id="leadDialogBody"></div> <div class="dialog-body" id="leadDialogBody"></div>
</dialog> </dialog>
frontend/admin.js
+17 -11
View File
@@ -17,6 +17,8 @@ const loginForm = document.querySelector("#loginForm");
const loginError = document.querySelector("#loginError"); const loginError = document.querySelector("#loginError");
const rotateForm = document.querySelector("#rotateForm"); const rotateForm = document.querySelector("#rotateForm");
const rotateError = document.querySelector("#rotateError"); const rotateError = document.querySelector("#rotateError");
const loginSubmit = document.querySelector("#loginSubmit");
const rotateSubmit = document.querySelector("#rotateSubmit");
const logoutBtn = document.querySelector("#logoutBtn"); const logoutBtn = document.querySelector("#logoutBtn");
const changePwBtn = document.querySelector("#changePwBtn"); const changePwBtn = document.querySelector("#changePwBtn");
const adminWho = document.querySelector("#adminWho"); const adminWho = document.querySelector("#adminWho");
@@ -41,6 +43,10 @@ const photoInput = document.querySelector("#photoInput");
const photoPreview = document.querySelector("#photoPreview"); const photoPreview = document.querySelector("#photoPreview");
const tableBody = document.querySelector("#adminTable tbody"); const tableBody = document.querySelector("#adminTable tbody");
loginSubmit?.addEventListener("click", () => loginForm.requestSubmit());
rotateSubmit?.addEventListener("click", () => rotateForm.requestSubmit());
saveBtn?.addEventListener("click", () => vehicleForm.requestSubmit());
// ----- State ----- // ----- State -----
const state = { const state = {
user: null, user: null,
@@ -204,8 +210,8 @@ function renderVehicles() {
<td>€ ${v.daily_price_eur}</td> <td>€ ${v.daily_price_eur}</td>
<td>${v.is_active ? "✅" : "—"}</td> <td>${v.is_active ? "✅" : "—"}</td>
<td style="white-space:nowrap;"> <td style="white-space:nowrap;">
<button class="btn small ghost" data-edit="${v.id}">Edit</button> <fluent-button appearance="outline" data-edit="${v.id}">Edit</fluent-button>
<button class="btn small danger" data-del="${v.id}">Del</button> <fluent-button appearance="accent" data-del="${v.id}">Del</fluent-button>
</td>`; </td>`;
tableBody.appendChild(tr); tableBody.appendChild(tr);
} }
@@ -352,12 +358,12 @@ function renderLeads() {
<td>${esc(l.date_from || "—")} → ${esc(l.date_to || "—")}</td> <td>${esc(l.date_from || "—")} → ${esc(l.date_to || "—")}</td>
<td><span class="pill pill-${esc(l.status)}">${esc(l.status)}</span></td> <td><span class="pill pill-${esc(l.status)}">${esc(l.status)}</span></td>
<td style="white-space:nowrap;"> <td style="white-space:nowrap;">
<button class="btn small ghost" data-open="${l.id}">Details</button> <fluent-button appearance="outline" data-open="${l.id}">Details</fluent-button>
${wantActive ? ` ${wantActive ? `
<button class="btn small" data-qual="${l.id}">Qualifizieren</button> <fluent-button appearance="accent" data-qual="${l.id}">Qualifizieren</fluent-button>
<button class="btn small danger" data-disq="${l.id}">Ablehnen</button> <fluent-button appearance="outline" data-disq="${l.id}">Ablehnen</fluent-button>
` : ` ` : `
<button class="btn small ghost" data-reopen="${l.id}">Wieder oeffnen</button> <fluent-button appearance="outline" data-reopen="${l.id}">Wieder oeffnen</fluent-button>
`} `}
</td>`; </td>`;
leadsTableBody.appendChild(tr); leadsTableBody.appendChild(tr);
@@ -385,9 +391,9 @@ function openLead(id) {
</dl> </dl>
<div style="display:flex;gap:0.5rem;justify-content:flex-end;margin-top:0.8rem;"> <div style="display:flex;gap:0.5rem;justify-content:flex-end;margin-top:0.8rem;">
${l.is_active ? ` ${l.is_active ? `
<button class="btn danger" id="dlgDisq">Ablehnen</button> <fluent-button appearance="outline" id="dlgDisq">Ablehnen</fluent-button>
<button class="btn" id="dlgQual">Qualifizieren</button> <fluent-button appearance="accent" id="dlgQual">Qualifizieren</fluent-button>
` : `<button class="btn ghost" id="dlgReopen">Wieder oeffnen</button>`} ` : `<fluent-button appearance="outline" id="dlgReopen">Wieder oeffnen</fluent-button>`}
</div>`; </div>`;
leadDialog.showModal(); leadDialog.showModal();
const note = () => document.querySelector("#leadNote").value; const note = () => document.querySelector("#leadNote").value;
@@ -447,9 +453,9 @@ function renderCustomers() {
<td><code class="muted">${esc(c.lead_id?.slice(0, 8) || "—")}</code></td> <td><code class="muted">${esc(c.lead_id?.slice(0, 8) || "—")}</code></td>
<td><span class="pill pill-${esc(c.status)}">${esc(c.status)}</span></td> <td><span class="pill pill-${esc(c.status)}">${esc(c.status)}</span></td>
<td style="white-space:nowrap;"> <td style="white-space:nowrap;">
<button class="btn small ghost" data-toggle="${c.id}" data-status="${c.status}"> <fluent-button appearance="outline" data-toggle="${c.id}" data-status="${c.status}">
${c.status === "active" ? "Inaktiv setzen" : "Aktiv setzen"} ${c.status === "active" ? "Inaktiv setzen" : "Aktiv setzen"}
</button> </fluent-button>
</td>`; </td>`;
customersTableBody.appendChild(tr); customersTableBody.appendChild(tr);
} }
frontend/styles.css
+78 -31
View File
@@ -504,6 +504,39 @@ dialog::backdrop { background: rgba(0,0,0,0.6); }
} }
/* ---------------- Admin ---------------- */ /* ---------------- 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 { .admin-page {
max-width: 1100px; max-width: 1100px;
margin: 2rem auto; margin: 2rem auto;
@@ -514,9 +547,10 @@ dialog::backdrop { background: rgba(0,0,0,0.6); }
max-width: 420px; max-width: 420px;
margin: 5rem auto; margin: 5rem auto;
padding: 2rem; padding: 2rem;
background: var(--bg-card); background: #ffffff;
border: 1px solid var(--line); border: 1px solid #dde3ea;
border-radius: var(--radius); border-radius: 12px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
} }
.admin-bar { .admin-bar {
@@ -525,7 +559,7 @@ dialog::backdrop { background: rgba(0,0,0,0.6); }
align-items: center; align-items: center;
padding: 1rem 0; padding: 1rem 0;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
border-bottom: 1px solid var(--line); border-bottom: 1px solid #dde3ea;
} }
.admin-bar h1 { margin: 0; font-size: 1.4rem; } .admin-bar h1 { margin: 0; font-size: 1.4rem; }
@@ -537,10 +571,11 @@ dialog::backdrop { background: rgba(0,0,0,0.6); }
} }
.panel { .panel {
background: var(--bg-card); background: #ffffff;
border: 1px solid var(--line); border: 1px solid #dde3ea;
border-radius: var(--radius); border-radius: 12px;
padding: 1.4rem; 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; } .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 { table.admin-table th, table.admin-table td {
text-align: left; text-align: left;
padding: 0.55rem 0.5rem; 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 th { color: #616161; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
table.admin-table tr:hover { background: rgba(255,255,255,0.02); } table.admin-table tr:hover { background: #f8fafc; }
.admin-form { display: grid; gap: 0.7rem; } .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 .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-form .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.7rem; }
.admin-photo-preview { .admin-photo-preview {
width: 100%; width: 100%;
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
background: var(--bg-elev) center / cover no-repeat; background: #f3f5f8 center / cover no-repeat;
border: 1px dashed var(--line); border: 1px dashed #c8d1dc;
border-radius: 10px; border-radius: 10px;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
/* Admin tabs */ /* 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 { .admin-tabs .tab {
background: transparent; border: none; color: var(--muted); color: #616161;
padding: 0.6rem 1rem; border-radius: 10px 10px 0 0; 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; display: inline-flex; align-items: center; gap: 0.4rem;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
} }
.admin-tabs .tab:hover { color: var(--fg); } .admin-tabs .tab:hover { color: #0f6cbd; }
.admin-tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); } .admin-tabs .tab.active { color: #0f6cbd; border-bottom-color: #0f6cbd; }
.tab-badge { .tab-badge {
background: var(--bg-elev); color: var(--fg); background: #eef2f7; color: #323130;
font-size: 0.7rem; padding: 0.1rem 0.5rem; font-size: 0.7rem; padding: 0.1rem 0.5rem;
border-radius: 999px; min-width: 1.3rem; text-align: center; 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 { .sub-tab {
background: transparent; border: none; color: var(--muted); color: #616161;
padding: 0.35rem 0.9rem; border-radius: 999px; cursor: pointer; 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 */ /* 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 { 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: rgba(200, 150, 80, 0.15); color: #e4b676; border-color: rgba(200, 150, 80, 0.4); } .pill-new { background: #e8f3ff; color: #0f6cbd; border-color: #bbd8f2; }
.pill-qualified { background: rgba(90, 180, 120, 0.15); color: #6ecf96; border-color: rgba(90, 180, 120, 0.4); } .pill-qualified { background: #ebf7ee; color: #0b6a38; border-color: #b8ddc5; }
.pill-disqualified { background: rgba(180, 90, 90, 0.15); color: #d48a8a; border-color: rgba(180, 90, 90, 0.4); } .pill-disqualified { background: #fdeeee; color: #a4262c; border-color: #efb7bc; }
.pill-active { background: rgba(90, 180, 120, 0.15); color: #6ecf96; border-color: rgba(90, 180, 120, 0.4); } .pill-active { background: #ebf7ee; color: #0b6a38; border-color: #b8ddc5; }
.pill-inactive { background: rgba(160, 160, 160, 0.12); color: var(--muted); } .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.small { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
.btn.danger { background: #7a2b2b; color: #fff; } .btn.danger { background: #7a2b2b; color: #fff; }
.btn.danger:hover { background: #8f3535; } .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 */
dialog#leadDialog { dialog#leadDialog {
border: 1px solid var(--line); border-radius: var(--radius); border: 1px solid var(--line); border-radius: var(--radius);