style: fix Fluent UI contrast and accessibility
This commit is contained in:
Lago
+110
-66
@@ -505,8 +505,21 @@ dialog::backdrop { background: rgba(0,0,0,0.6); }
|
|||||||
|
|
||||||
/* ---------------- Admin ---------------- */
|
/* ---------------- Admin ---------------- */
|
||||||
body.admin-fluent {
|
body.admin-fluent {
|
||||||
background: #f5f7fb;
|
--bg: #faf9f8;
|
||||||
color: #1b1a19;
|
--bg-elev: #ffffff;
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
--line: #edebe9;
|
||||||
|
--text: #201f1e;
|
||||||
|
--muted: #605e5c;
|
||||||
|
--accent: #0f6cbd;
|
||||||
|
--accent-strong: #115ea3;
|
||||||
|
--danger: #d13438;
|
||||||
|
--ok: #107c10;
|
||||||
|
--radius: 8px;
|
||||||
|
--shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 2px rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
font-family: "Segoe UI", "Segoe UI Web (West European)", system-ui, -apple-system, sans-serif;
|
font-family: "Segoe UI", "Segoe UI Web (West European)", system-ui, -apple-system, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -514,55 +527,61 @@ body.admin-fluent h1,
|
|||||||
body.admin-fluent h2,
|
body.admin-fluent h2,
|
||||||
body.admin-fluent h3,
|
body.admin-fluent h3,
|
||||||
body.admin-fluent h4 {
|
body.admin-fluent h4 {
|
||||||
font-family: "Segoe UI", "Segoe UI Web (West European)", system-ui, sans-serif;
|
font-family: inherit;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
body.admin-fluent .logo-mark {
|
body.admin-fluent .logo-mark {
|
||||||
background: linear-gradient(135deg, #0f6cbd 0%, #0a4f8f 100%);
|
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
|
||||||
color: #fff;
|
color: #ffffff;
|
||||||
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.admin-fluent input,
|
body.admin-fluent input,
|
||||||
body.admin-fluent select,
|
body.admin-fluent select,
|
||||||
body.admin-fluent textarea {
|
body.admin-fluent textarea {
|
||||||
background: #ffffff;
|
background: var(--bg-elev);
|
||||||
border: 1px solid #c8d1dc;
|
border: 1px solid #8a8886;
|
||||||
color: #1b1a19;
|
color: var(--text);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.admin-fluent input:focus,
|
body.admin-fluent input:focus,
|
||||||
body.admin-fluent select:focus,
|
body.admin-fluent select:focus,
|
||||||
body.admin-fluent textarea:focus {
|
body.admin-fluent textarea:focus {
|
||||||
border-color: #0f6cbd;
|
border-color: var(--accent);
|
||||||
|
outline: 2px solid var(--accent);
|
||||||
|
outline-offset: -1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-page {
|
.admin-page {
|
||||||
max-width: 1100px;
|
max-width: 1200px;
|
||||||
margin: 2rem auto;
|
margin: 2rem auto;
|
||||||
padding: 0 1rem;
|
padding: 0 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-login {
|
.admin-login {
|
||||||
max-width: 420px;
|
max-width: 440px;
|
||||||
margin: 5rem auto;
|
margin: 6rem auto;
|
||||||
padding: 2rem;
|
padding: 2.5rem;
|
||||||
background: #ffffff;
|
background: var(--bg-card);
|
||||||
border: 1px solid #dde3ea;
|
border: 1px solid var(--line);
|
||||||
border-radius: 12px;
|
border-radius: var(--radius);
|
||||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-bar {
|
.admin-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 1rem 0;
|
padding: 1.5rem 0;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 2rem;
|
||||||
border-bottom: 1px solid #dde3ea;
|
border-bottom: 1px solid var(--line);
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-bar h1 { margin: 0; font-size: 1.4rem; }
|
.admin-bar h1 { margin: 0; font-size: 1.5rem; font-weight: 600; }
|
||||||
|
|
||||||
.admin-grid {
|
.admin-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -570,74 +589,99 @@ body.admin-fluent textarea:focus {
|
|||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
body.admin-fluent .panel {
|
||||||
background: #ffffff;
|
background: var(--bg-card);
|
||||||
border: 1px solid #dde3ea;
|
border: 1px solid var(--line);
|
||||||
border-radius: 12px;
|
border-radius: var(--radius);
|
||||||
padding: 1.4rem;
|
padding: 1.5rem;
|
||||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel h2 { font-size: 1.1rem; font-family: "Inter", sans-serif; margin-bottom: 1rem; }
|
body.admin-fluent .panel h2 { font-size: 1.25rem; margin-bottom: 1.25rem; font-weight: 600; }
|
||||||
|
|
||||||
table.admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
|
table.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
|
||||||
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.75rem 0.6rem;
|
||||||
border-bottom: 1px solid #ecf0f4;
|
border-bottom: 1px solid var(--line);
|
||||||
}
|
}
|
||||||
table.admin-table th { color: #616161; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
|
table.admin-table th {
|
||||||
table.admin-table tr:hover { background: #f8fafc; }
|
color: var(--text);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
border-bottom: 2px solid var(--line);
|
||||||
|
}
|
||||||
|
table.admin-table tr:hover { background: #f3f2f1; }
|
||||||
|
|
||||||
.admin-form { display: grid; gap: 0.7rem; }
|
.admin-form { display: grid; gap: 1rem; }
|
||||||
.admin-form label { display: grid; gap: 0.25rem; font-size: 0.82rem; color: #616161; }
|
.admin-form label { display: grid; gap: 0.4rem; font-size: 0.9rem; color: var(--text); font-weight: 500; }
|
||||||
.admin-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
|
.admin-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
|
||||||
.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: 1rem; }
|
||||||
|
|
||||||
.admin-photo-preview {
|
.admin-photo-preview {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
aspect-ratio: 16 / 9;
|
aspect-ratio: 16 / 9;
|
||||||
background: #f3f5f8 center / cover no-repeat;
|
background: #f3f2f1 center / cover no-repeat;
|
||||||
border: 1px dashed #c8d1dc;
|
border: 1px dashed #8a8886;
|
||||||
border-radius: 10px;
|
border-radius: 4px;
|
||||||
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 #dde3ea; padding-bottom: 0.2rem; flex-wrap: wrap; }
|
.admin-tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
padding-bottom: 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
.admin-tabs .tab {
|
.admin-tabs .tab {
|
||||||
color: #616161;
|
color: var(--text);
|
||||||
padding: 0.6rem 1rem; border-radius: 10px 10px 0 0;
|
padding: 0.75rem 1.25rem;
|
||||||
font-family: "Segoe UI", sans-serif; font-weight: 600; cursor: pointer;
|
border-radius: 4px 4px 0 0;
|
||||||
display: inline-flex; align-items: center; gap: 0.4rem;
|
font-size: 0.95rem;
|
||||||
border-bottom: 2px solid transparent;
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex; align-items: center; gap: 0.5rem;
|
||||||
|
border-bottom: 3px solid transparent;
|
||||||
}
|
}
|
||||||
.admin-tabs .tab:hover { color: #0f6cbd; }
|
.admin-tabs .tab:hover { color: var(--accent); background: #f3f2f1; }
|
||||||
.admin-tabs .tab.active { color: #0f6cbd; border-bottom-color: #0f6cbd; }
|
.admin-tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
|
||||||
.tab-badge {
|
.tab-badge {
|
||||||
background: #eef2f7; color: #323130;
|
background: #edebe9; color: var(--text);
|
||||||
font-size: 0.7rem; padding: 0.1rem 0.5rem;
|
font-size: 0.75rem; padding: 0.15rem 0.6rem;
|
||||||
border-radius: 999px; min-width: 1.3rem; text-align: center;
|
border-radius: 12px; min-width: 1.5rem; text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
.admin-tabs .tab.active .tab-badge { background: #0f6cbd; color: #fff; }
|
.admin-tabs .tab.active .tab-badge { background: var(--accent); color: #ffffff; }
|
||||||
|
|
||||||
.sub-tabs { display: inline-flex; gap: 0.3rem; background: #f3f5f8; border: 1px solid #d8e0ea; border-radius: 999px; padding: 0.2rem; }
|
.sub-tabs { display: inline-flex; gap: 0.4rem; }
|
||||||
.sub-tab {
|
.sub-tab {
|
||||||
color: #616161;
|
color: var(--text);
|
||||||
padding: 0.35rem 0.9rem; border-radius: 999px; cursor: pointer;
|
padding: 0.4rem 1rem; border-radius: 4px; cursor: pointer;
|
||||||
font-size: 0.82rem; font-family: "Segoe UI", sans-serif;
|
font-size: 0.85rem; font-weight: 500;
|
||||||
}
|
}
|
||||||
.sub-tab.active { background: #0f6cbd; color: #fff; font-weight: 600; }
|
.sub-tab:hover { background: #f3f2f1; }
|
||||||
|
.sub-tab.active { background: #edebe9; color: var(--text); 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 #dde3ea; }
|
.pill {
|
||||||
.pill-new { background: #e8f3ff; color: #0f6cbd; border-color: #bbd8f2; }
|
display: inline-flex;
|
||||||
.pill-qualified { background: #ebf7ee; color: #0b6a38; border-color: #b8ddc5; }
|
align-items: center;
|
||||||
.pill-disqualified { background: #fdeeee; color: #a4262c; border-color: #efb7bc; }
|
padding: 0.2rem 0.6rem;
|
||||||
.pill-active { background: #ebf7ee; color: #0b6a38; border-color: #b8ddc5; }
|
border-radius: 4px;
|
||||||
.pill-inactive { background: #f3f2f1; color: #605e5c; }
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
.pill-new { background: #e8f3ff; color: #005a9e; border-color: #c7e0f4; }
|
||||||
|
.pill-qualified { background: #dff6dd; color: #107c10; border-color: #c3eec0; }
|
||||||
|
.pill-disqualified { background: #fde7e9; color: #a4262c; border-color: #fbd0d5; }
|
||||||
|
.pill-active { background: #dff6dd; color: #107c10; border-color: #c3eec0; }
|
||||||
|
.pill-inactive { background: #f3f2f1; color: #605e5c; border-color: #edebe9; }
|
||||||
|
|
||||||
.muted { color: #616161; }
|
body.admin-fluent .muted { color: var(--muted); }
|
||||||
|
|
||||||
.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; }
|
||||||
@@ -648,7 +692,7 @@ body.admin-fluent fluent-button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body.admin-fluent td fluent-button {
|
body.admin-fluent td fluent-button {
|
||||||
margin-right: 0.35rem;
|
margin-right: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.admin-fluent td fluent-button:last-child {
|
body.admin-fluent td fluent-button:last-child {
|
||||||
|
|||||||
Reference in New Issue
Block a user