571 lines
26 KiB
CSS
571 lines
26 KiB
CSS
/* ================================================================
|
|
AutoBooking Admin Dashboard — CSS v1.2.0
|
|
Mismo lenguaje visual que Driver Dashboard y Passenger Dashboard:
|
|
glassmorphism, --ab-orange, --ab-dark, fondo oscuro con imagen.
|
|
================================================================ */
|
|
|
|
/* ── Variables — IDÉNTICAS al sistema unificado AutoBooking ─── */
|
|
:root {
|
|
--ab-orange : #FF6F00;
|
|
--ab-orange-600 : #e86500;
|
|
--ab-dark : #0b0b0b;
|
|
--ab-glass : rgba(17,17,17,.55);
|
|
--ab-glass-border : rgba(255,255,255,.13);
|
|
--ab-text : #fff;
|
|
--ab-green : #22C55E;
|
|
--ab-red : #ef4444;
|
|
--ab-yellow : #f59e0b;
|
|
--ab-blue : #3b82f6;
|
|
--ab-radius : 14px;
|
|
--ab-radius-sm : 8px;
|
|
--ab-font : system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
|
|
--ab-mono : 'SF Mono','Fira Code',monospace;
|
|
}
|
|
|
|
/* ── Reset ─────────────────────────────────────────────────── */
|
|
#abad-app *,
|
|
#abad-app *::before,
|
|
#abad-app *::after { box-sizing:border-box; margin:0; padding:0; }
|
|
|
|
/* ── Raíz — fondo oscuro con imagen de vehículo ────────────── */
|
|
#abad-app {
|
|
background : var(--ab-dark);
|
|
color : var(--ab-text);
|
|
font-family : var(--ab-font);
|
|
font-size : 14px;
|
|
line-height : 1.5;
|
|
min-height : 100vh;
|
|
position : relative;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Overlay de fondo — imagen de vehículo sutil */
|
|
#abad-app::before {
|
|
content : '';
|
|
position : fixed;
|
|
inset : 0;
|
|
background-image : url('/wp-content/plugins/autobooking-driver-dashboard/assets/car-bg.webp');
|
|
background-size : cover;
|
|
background-position : center 30%;
|
|
background-repeat : no-repeat;
|
|
opacity : 0.06;
|
|
z-index : 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#abad-app > * { position: relative; z-index: 1; }
|
|
|
|
/* ── Header ─────────────────────────────────────────────────── */
|
|
.abad-header {
|
|
display : flex;
|
|
align-items : center;
|
|
justify-content : space-between;
|
|
padding : 0 22px;
|
|
height : 58px;
|
|
background : rgba(10,10,10,.92);
|
|
border-bottom : 1px solid var(--ab-glass-border);
|
|
backdrop-filter : blur(12px);
|
|
position : sticky;
|
|
top : 0;
|
|
z-index : 200;
|
|
gap : 16px;
|
|
}
|
|
|
|
.abad-header__brand {
|
|
display : flex;
|
|
align-items : center;
|
|
gap : 12px;
|
|
flex-shrink : 0;
|
|
}
|
|
|
|
.abad-header__logo { height:30px; border-radius:6px; }
|
|
|
|
.abad-header__icon {
|
|
width : 36px;
|
|
height : 36px;
|
|
background : rgba(255,111,0,.15);
|
|
border : 1px solid rgba(255,111,0,.30);
|
|
border-radius : 10px;
|
|
display : grid;
|
|
place-items : center;
|
|
flex-shrink : 0;
|
|
}
|
|
|
|
.abad-header__wordmark { display:flex; flex-direction:column; gap:2px; }
|
|
.abad-header__name { font-size:15px; font-weight:800; color:var(--ab-text); letter-spacing:.01em; line-height:1; }
|
|
.abad-header__role { font-size:9.5px; color:var(--ab-orange); text-transform:uppercase; letter-spacing:.10em; font-weight:700; line-height:1; }
|
|
|
|
.abad-header__right { display:flex; align-items:center; gap:12px; }
|
|
|
|
.abad-header__user {
|
|
font-size : 12px;
|
|
color : rgba(255,255,255,.55);
|
|
background : rgba(255,255,255,.06);
|
|
border : 1px solid var(--ab-glass-border);
|
|
border-radius: 20px;
|
|
padding : 4px 12px;
|
|
}
|
|
|
|
.abad-sos-indicator {
|
|
display : flex;
|
|
align-items : center;
|
|
gap : 6px;
|
|
background : rgba(239,68,68,.15);
|
|
border : 1px solid rgba(239,68,68,.35);
|
|
border-radius : 20px;
|
|
padding : 5px 13px;
|
|
font-size : 11.5px;
|
|
font-weight : 800;
|
|
color : var(--ab-red);
|
|
cursor : pointer;
|
|
animation : ab-alert 1.6s ease-in-out infinite;
|
|
}
|
|
@keyframes ab-alert {
|
|
0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
|
|
50% { box-shadow: 0 0 0 5px rgba(239,68,68,.15); }
|
|
}
|
|
|
|
.abad-lang-btn {
|
|
background : rgba(255,255,255,.07);
|
|
border : 1px solid var(--ab-glass-border);
|
|
color : rgba(255,255,255,.55);
|
|
font-size : 11px;
|
|
font-weight : 800;
|
|
letter-spacing:.06em;
|
|
border-radius: var(--ab-radius-sm);
|
|
padding : 5px 11px;
|
|
cursor : pointer;
|
|
transition : all .15s;
|
|
}
|
|
.abad-lang-btn:hover { border-color:var(--ab-orange); color:var(--ab-orange); }
|
|
|
|
/* ── Tab Navigation ─────────────────────────────────────────── */
|
|
.abad-tabs {
|
|
display : flex;
|
|
background : rgba(8,8,8,.85);
|
|
border-bottom : 1px solid var(--ab-glass-border);
|
|
backdrop-filter : blur(10px);
|
|
overflow-x : auto;
|
|
scrollbar-width : none;
|
|
padding : 0 18px;
|
|
gap : 2px;
|
|
}
|
|
.abad-tabs::-webkit-scrollbar { display:none; }
|
|
|
|
.abad-tab {
|
|
display : flex;
|
|
align-items : center;
|
|
gap : 7px;
|
|
padding : 15px 16px;
|
|
background : none;
|
|
border : none;
|
|
border-bottom : 2px solid transparent;
|
|
color : rgba(255,255,255,.35);
|
|
font-size : 11px;
|
|
font-weight : 700;
|
|
letter-spacing : .07em;
|
|
cursor : pointer;
|
|
white-space : nowrap;
|
|
transition : color .15s, border-color .15s;
|
|
text-transform : uppercase;
|
|
font-family : var(--ab-font);
|
|
}
|
|
.abad-tab svg { opacity:.5; transition:opacity .15s; }
|
|
.abad-tab:hover { color:rgba(255,255,255,.7); }
|
|
.abad-tab:hover svg{ opacity:.8; }
|
|
.abad-tab--active { color:var(--ab-orange); border-bottom-color:var(--ab-orange); }
|
|
.abad-tab--active svg { opacity:1; }
|
|
|
|
.abad-badge {
|
|
display : inline-flex;
|
|
align-items : center;
|
|
justify-content: center;
|
|
min-width : 18px;
|
|
height : 18px;
|
|
padding : 0 5px;
|
|
background : var(--ab-orange);
|
|
color : #fff;
|
|
font-size : 10px;
|
|
font-weight : 800;
|
|
border-radius : 9px;
|
|
line-height : 1;
|
|
}
|
|
.abad-badge--red { background: var(--ab-red); }
|
|
.abad-badge--inline { margin-left:2px; }
|
|
|
|
/* ── Panels ─────────────────────────────────────────────────── */
|
|
.abad-panel { padding:22px; max-width:1360px; margin:0 auto; }
|
|
|
|
/* ── KPI Grid ───────────────────────────────────────────────── */
|
|
.abad-kpi-grid {
|
|
display : grid;
|
|
grid-template-columns : repeat(auto-fill,minmax(175px,1fr));
|
|
gap : 14px;
|
|
margin-bottom : 20px;
|
|
}
|
|
|
|
.abad-kpi {
|
|
background : var(--ab-glass);
|
|
border : 1px solid var(--ab-glass-border);
|
|
border-radius : var(--ab-radius);
|
|
padding : 18px 20px 16px;
|
|
backdrop-filter : blur(12px);
|
|
position : relative;
|
|
overflow : hidden;
|
|
transition : transform .18s, border-color .18s;
|
|
cursor : default;
|
|
}
|
|
.abad-kpi::before {
|
|
content : '';
|
|
position : absolute;
|
|
top:0; left:0; right:0;
|
|
height : 2px;
|
|
background: var(--ab-glass-border);
|
|
}
|
|
.abad-kpi:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.22); }
|
|
|
|
/* Colored accent per type */
|
|
.abad-kpi--or::before { background: var(--ab-orange); }
|
|
.abad-kpi--gr::before { background: var(--ab-green); }
|
|
.abad-kpi--re::before { background: var(--ab-red); }
|
|
.abad-kpi--ye::before { background: var(--ab-yellow); }
|
|
.abad-kpi--bl::before { background: var(--ab-blue); }
|
|
.abad-kpi--pu::before { background: #a78bfa; }
|
|
|
|
.abad-kpi--re { border-color:rgba(239,68,68,.25); }
|
|
.abad-kpi--ye { border-color:rgba(245,158,11,.22); }
|
|
|
|
.abad-kpi__icon {
|
|
width : 36px;
|
|
height : 36px;
|
|
border-radius : 10px;
|
|
display : grid;
|
|
place-items : center;
|
|
margin-bottom : 14px;
|
|
background : rgba(255,255,255,.07);
|
|
border : 1px solid var(--ab-glass-border);
|
|
}
|
|
.abad-kpi--or .abad-kpi__icon { background:rgba(255,111,0,.15); color:var(--ab-orange); border-color:rgba(255,111,0,.25); }
|
|
.abad-kpi--gr .abad-kpi__icon { background:rgba(34,197,94,.12); color:var(--ab-green); border-color:rgba(34,197,94,.22); }
|
|
.abad-kpi--re .abad-kpi__icon { background:rgba(239,68,68,.12); color:var(--ab-red); border-color:rgba(239,68,68,.22); }
|
|
.abad-kpi--ye .abad-kpi__icon { background:rgba(245,158,11,.12);color:var(--ab-yellow); border-color:rgba(245,158,11,.22); }
|
|
.abad-kpi--bl .abad-kpi__icon { background:rgba(59,130,246,.12);color:var(--ab-blue); border-color:rgba(59,130,246,.22); }
|
|
.abad-kpi--pu .abad-kpi__icon { background:rgba(167,139,250,.12);color:#a78bfa; border-color:rgba(167,139,250,.22); }
|
|
|
|
.abad-kpi__val {
|
|
font-size : 2.5rem;
|
|
font-weight : 800;
|
|
color : var(--ab-text);
|
|
line-height : 1;
|
|
margin-bottom : 6px;
|
|
font-feature-settings: "tnum";
|
|
letter-spacing : -.02em;
|
|
}
|
|
.abad-kpi--or .abad-kpi__val { color:var(--ab-orange); }
|
|
.abad-kpi--gr .abad-kpi__val { color:var(--ab-green); }
|
|
.abad-kpi--re .abad-kpi__val { color:var(--ab-red); }
|
|
.abad-kpi--ye .abad-kpi__val { color:var(--ab-yellow); }
|
|
.abad-kpi--bl .abad-kpi__val { color:var(--ab-blue); }
|
|
|
|
.abad-kpi__label {
|
|
font-size : 10px;
|
|
font-weight : 700;
|
|
text-transform : uppercase;
|
|
letter-spacing : .08em;
|
|
color : rgba(255,255,255,.45);
|
|
}
|
|
|
|
/* ── Glass Card ─────────────────────────────────────────────── */
|
|
.abad-card {
|
|
background : var(--ab-glass);
|
|
border : 1px solid var(--ab-glass-border);
|
|
border-radius : var(--ab-radius);
|
|
backdrop-filter : blur(10px);
|
|
overflow : hidden;
|
|
}
|
|
.abad-card__header {
|
|
display : flex;
|
|
align-items : center;
|
|
justify-content : space-between;
|
|
padding : 13px 18px;
|
|
border-bottom : 1px solid var(--ab-glass-border);
|
|
}
|
|
.abad-card__title {
|
|
font-size : 10.5px;
|
|
font-weight : 700;
|
|
text-transform : uppercase;
|
|
letter-spacing : .08em;
|
|
color : rgba(255,255,255,.5);
|
|
}
|
|
.abad-card__body { padding:16px 18px; }
|
|
|
|
/* Bar chart */
|
|
.abad-bar-chart { display:flex; align-items:flex-end; gap:3px; height:72px; }
|
|
.abad-bar-chart__bar {
|
|
flex : 1;
|
|
background : linear-gradient(to top, var(--ab-orange), rgba(255,111,0,.4));
|
|
border-radius : 3px 3px 0 0;
|
|
min-width : 3px;
|
|
opacity : 0.6;
|
|
transition : opacity .15s;
|
|
cursor : default;
|
|
}
|
|
.abad-bar-chart__bar:hover { opacity:1; }
|
|
|
|
.abad-section-title {
|
|
font-size : 14px;
|
|
font-weight : 800;
|
|
color : var(--ab-text);
|
|
margin-bottom: 14px;
|
|
padding-top : 6px;
|
|
}
|
|
|
|
/* ── Toolbar ─────────────────────────────────────────────────── */
|
|
.abad-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
|
|
.abad-spacer { flex:1; }
|
|
|
|
/* ── Table ───────────────────────────────────────────────────── */
|
|
.abad-table-wrap {
|
|
background : var(--ab-glass);
|
|
border : 1px solid var(--ab-glass-border);
|
|
border-radius : var(--ab-radius);
|
|
backdrop-filter : blur(8px);
|
|
overflow : auto;
|
|
margin-bottom : 12px;
|
|
}
|
|
.abad-table { width:100%; border-collapse:collapse; font-size:13.5px; }
|
|
.abad-table thead { background:rgba(0,0,0,.3); }
|
|
.abad-table th {
|
|
padding : 11px 16px;
|
|
text-align : left;
|
|
font-size : 10px;
|
|
font-weight : 700;
|
|
text-transform : uppercase;
|
|
letter-spacing : .08em;
|
|
color : rgba(255,255,255,.4);
|
|
border-bottom : 1px solid var(--ab-glass-border);
|
|
white-space : nowrap;
|
|
}
|
|
.abad-table td {
|
|
padding : 13px 16px;
|
|
border-bottom : 1px solid rgba(255,255,255,.05);
|
|
vertical-align: middle;
|
|
color : var(--ab-text);
|
|
}
|
|
.abad-table tr:last-child td { border-bottom:none; }
|
|
.abad-table tbody tr { transition:background .1s; }
|
|
.abad-table tbody tr:hover td { background:rgba(255,255,255,.04); }
|
|
|
|
/* Avatar in table */
|
|
.abad-av { display:inline-flex; align-items:center; gap:10px; }
|
|
.abad-av__img { width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--ab-glass-border);flex-shrink:0; }
|
|
.abad-av__init { width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--ab-glass-border);display:grid;place-items:center;font-size:12px;font-weight:700;color:rgba(255,255,255,.6);flex-shrink:0; }
|
|
.abad-av__name { font-weight:700;font-size:13.5px;display:block;line-height:1.3; }
|
|
.abad-av__sub { font-size:11px;color:rgba(255,255,255,.45);display:block; }
|
|
|
|
/* Pill badges */
|
|
.abad-pill { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap; }
|
|
.abad-pill__dot { width:5px;height:5px;border-radius:50%;flex-shrink:0; }
|
|
.abad-pill--on { background:rgba(34,197,94,.14); color:var(--ab-green); border:1px solid rgba(34,197,94,.25); }
|
|
.abad-pill--on .abad-pill__dot { background:var(--ab-green); box-shadow:0 0 6px var(--ab-green); }
|
|
.abad-pill--off { background:rgba(255,255,255,.06); color:rgba(255,255,255,.4); border:1px solid var(--ab-glass-border); }
|
|
.abad-pill--off .abad-pill__dot { background:rgba(255,255,255,.3); }
|
|
.abad-pill--re { background:rgba(239,68,68,.14); color:var(--ab-red); border:1px solid rgba(239,68,68,.28); }
|
|
.abad-pill--ye { background:rgba(245,158,11,.12);color:var(--ab-yellow); border:1px solid rgba(245,158,11,.25); }
|
|
.abad-pill--gr { background:rgba(34,197,94,.12); color:var(--ab-green); border:1px solid rgba(34,197,94,.22); }
|
|
|
|
/* Status chips */
|
|
.abad-chip { display:inline-block;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:700;font-family:var(--ab-mono);background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);border:1px solid var(--ab-glass-border); }
|
|
.abad-chip--fin { background:rgba(34,197,94,.12); color:var(--ab-green); border-color:rgba(34,197,94,.25); }
|
|
.abad-chip--act { background:rgba(255,111,0,.14); color:var(--ab-orange); border-color:rgba(255,111,0,.30); }
|
|
.abad-chip--asgn { background:rgba(59,130,246,.12);color:var(--ab-blue); border-color:rgba(59,130,246,.25); }
|
|
.abad-chip--can { background:rgba(239,68,68,.12); color:var(--ab-red); border-color:rgba(239,68,68,.28); }
|
|
|
|
/* ── Item Cards ──────────────────────────────────────────────── */
|
|
.abad-cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
|
|
|
|
.abad-item-card {
|
|
background : var(--ab-glass);
|
|
border : 1px solid var(--ab-glass-border);
|
|
border-radius : var(--ab-radius);
|
|
padding : 18px;
|
|
backdrop-filter : blur(8px);
|
|
transition : border-color .15s, transform .15s;
|
|
}
|
|
.abad-item-card:hover { border-color:rgba(255,255,255,.22); transform:translateY(-1px); }
|
|
.abad-item-card--re { border-color:rgba(239,68,68,.30); }
|
|
.abad-item-card--ye { border-color:rgba(245,158,11,.25); }
|
|
|
|
.abad-icard-head { display:flex;align-items:flex-start;gap:12px;margin-bottom:12px; }
|
|
.abad-icard-av { width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid var(--ab-glass-border);display:grid;place-items:center;font-size:15px;font-weight:800;color:rgba(255,255,255,.6);flex-shrink:0;overflow:hidden; }
|
|
.abad-icard-av img { width:100%;height:100%;object-fit:cover; }
|
|
.abad-icard-name { font-weight:800;font-size:14px;color:var(--ab-text);line-height:1.3;margin-bottom:2px;display:block; }
|
|
.abad-icard-sub { font-size:11px;color:rgba(255,255,255,.45);display:block; }
|
|
.abad-icard-meta { font-size:12px;color:rgba(255,255,255,.6);display:flex;flex-direction:column;gap:5px;margin-bottom:14px; }
|
|
.abad-icard-meta-r { display:flex;align-items:center;gap:6px; }
|
|
.abad-icard-meta-r svg { color:rgba(255,255,255,.35);flex-shrink:0; }
|
|
.abad-icard-actions { display:flex;gap:8px;flex-wrap:wrap;padding-top:13px;border-top:1px solid var(--ab-glass-border); }
|
|
|
|
/* ── Pagination ──────────────────────────────────────────────── */
|
|
.abad-pagination { display:flex;gap:4px;margin-top:10px;flex-wrap:wrap;align-items:center; }
|
|
.abad-page-btn {
|
|
padding : 6px 12px;
|
|
background : var(--ab-glass);
|
|
border : 1px solid var(--ab-glass-border);
|
|
border-radius: var(--ab-radius-sm);
|
|
color : rgba(255,255,255,.5);
|
|
font-size : 12px;
|
|
font-weight : 600;
|
|
cursor : pointer;
|
|
transition : all .1s;
|
|
font-family : var(--ab-mono);
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
.abad-page-btn--active { background:rgba(255,111,0,.18);border-color:rgba(255,111,0,.45);color:var(--ab-orange);font-weight:800; }
|
|
.abad-page-btn:hover:not(:disabled) { border-color:rgba(255,255,255,.25);color:var(--ab-text); }
|
|
.abad-page-btn:disabled { opacity:.35;cursor:default; }
|
|
|
|
/* ── Map ─────────────────────────────────────────────────────── */
|
|
.abad-map { width:100%;height:300px;border-radius:var(--ab-radius);overflow:hidden;background:rgba(0,0,0,.4);border:1px solid var(--ab-glass-border);margin-bottom:16px; }
|
|
.abad-map--modal { height:230px;border-radius:var(--ab-radius) var(--ab-radius) 0 0;margin-bottom:0;border:none;border-bottom:1px solid var(--ab-glass-border); }
|
|
|
|
/* ── Buttons ─────────────────────────────────────────────────── */
|
|
.abad-btn {
|
|
display : inline-flex;
|
|
align-items : center;
|
|
gap : 7px;
|
|
padding : 9px 18px;
|
|
border-radius : var(--ab-radius-sm);
|
|
font-size : 13px;
|
|
font-weight : 800;
|
|
font-family : var(--ab-font);
|
|
cursor : pointer;
|
|
border : 2px solid transparent;
|
|
transition : all .15s;
|
|
white-space : nowrap;
|
|
line-height : 1;
|
|
letter-spacing : .2px;
|
|
text-transform : uppercase;
|
|
}
|
|
.abad-btn:disabled { opacity:.5;cursor:default;pointer-events:none; }
|
|
.abad-btn:active { transform:translateY(1px); }
|
|
|
|
.abad-btn--brand { background:var(--ab-orange);color:#fff;box-shadow:0 2px 12px rgba(255,111,0,.35); }
|
|
.abad-btn--brand:hover { background:var(--ab-orange-600); }
|
|
|
|
.abad-btn--outline { background:transparent;border-color:var(--ab-glass-border);color:rgba(255,255,255,.7); }
|
|
.abad-btn--outline:hover { border-color:rgba(255,255,255,.3);color:var(--ab-text);background:rgba(255,255,255,.05); }
|
|
|
|
.abad-btn--ghost { background:rgba(255,255,255,.07);color:rgba(255,255,255,.7);border-color:var(--ab-glass-border); }
|
|
.abad-btn--ghost:hover { background:rgba(255,255,255,.12);color:var(--ab-text); }
|
|
|
|
.abad-btn--danger { background:rgba(239,68,68,.15);color:var(--ab-red);border-color:rgba(239,68,68,.30); }
|
|
.abad-btn--danger:hover { background:rgba(239,68,68,.25); }
|
|
|
|
.abad-btn--approve { background:rgba(34,197,94,.14);color:var(--ab-green);border-color:rgba(34,197,94,.28); }
|
|
.abad-btn--approve:hover { background:rgba(34,197,94,.24); }
|
|
|
|
.abad-btn--sm { padding:6px 13px;font-size:11.5px; }
|
|
.abad-btn--wide { width:100%;justify-content:center;padding:11px 18px; }
|
|
|
|
/* ── Forms ───────────────────────────────────────────────────── */
|
|
.abad-input,.abad-select,.abad-textarea {
|
|
width : 100%;
|
|
background : rgba(255,255,255,.07);
|
|
border : 1px solid var(--ab-glass-border);
|
|
border-radius : var(--ab-radius-sm);
|
|
color : var(--ab-text);
|
|
padding : 9px 13px;
|
|
font-size : 13px;
|
|
font-family : var(--ab-font);
|
|
outline : none;
|
|
transition : border-color .15s, box-shadow .15s;
|
|
backdrop-filter : blur(4px);
|
|
}
|
|
.abad-input:focus,.abad-select:focus,.abad-textarea:focus {
|
|
border-color: rgba(255,111,0,.6);
|
|
box-shadow : 0 0 0 3px rgba(255,111,0,.10);
|
|
}
|
|
.abad-input::placeholder,.abad-textarea::placeholder { color:rgba(255,255,255,.25); }
|
|
.abad-input--sm,.abad-select--sm { padding:7px 10px;font-size:12px; }
|
|
.abad-select { appearance:none;cursor:pointer; }
|
|
.abad-textarea { resize:vertical;line-height:1.55; }
|
|
.abad-form-group { margin-bottom:14px; }
|
|
.abad-label { display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.4);margin-bottom:6px; }
|
|
.abad-form-row { display:flex;gap:10px;flex-wrap:wrap; }
|
|
.abad-form-row .abad-form-group { flex:1;min-width:100px; }
|
|
|
|
/* ── Alerts ──────────────────────────────────────────────────── */
|
|
.abad-alert { padding:10px 14px;border-radius:var(--ab-radius-sm);font-size:12.5px;margin-bottom:12px;backdrop-filter:blur(4px); }
|
|
.abad-alert--success { background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.25);color:var(--ab-green); }
|
|
.abad-alert--info { background:rgba(59,130,246,.10);border:1px solid rgba(59,130,246,.22);color:var(--ab-blue); }
|
|
.abad-note { font-size:12px;color:rgba(255,255,255,.4);margin-bottom:14px;line-height:1.6;padding:10px 13px;background:rgba(255,255,255,.05);border-radius:var(--ab-radius-sm);border-left:3px solid var(--ab-glass-border); }
|
|
|
|
/* Toast */
|
|
.abad-toast { position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none; }
|
|
.abad-toast__item { padding:13px 18px;border-radius:var(--ab-radius);font-size:13px;font-weight:600;background:rgba(17,17,17,.95);border:1px solid var(--ab-glass-border);color:var(--ab-text);box-shadow:0 8px 32px rgba(0,0,0,.8);pointer-events:auto;animation:ab-toastin .25s ease-out;max-width:320px;backdrop-filter:blur(12px); }
|
|
.abad-toast__item--ok { border-color:rgba(34,197,94,.35); }
|
|
.abad-toast__item--err { border-color:rgba(239,68,68,.35); }
|
|
@keyframes ab-toastin { from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)} }
|
|
|
|
.abad-empty-state { text-align:center;color:rgba(255,255,255,.35);padding:40px 0;font-size:13px; }
|
|
|
|
/* ── Settings ────────────────────────────────────────────────── */
|
|
.abad-settings-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(370px,1fr));gap:20px; }
|
|
.abad-settings-card { background:var(--ab-glass);border:1px solid var(--ab-glass-border);border-radius:var(--ab-radius);overflow:hidden;backdrop-filter:blur(10px); }
|
|
.abad-settings-card__head { padding:14px 18px;border-bottom:1px solid var(--ab-glass-border);background:rgba(0,0,0,.2);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.45); }
|
|
.abad-settings-card__body { padding:20px; }
|
|
.abad-fare-table { width:100%;border-collapse:collapse;font-size:12px;margin-top:12px; }
|
|
.abad-fare-table th { padding:8px 10px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.35);border-bottom:1px solid var(--ab-glass-border); }
|
|
.abad-fare-table td { padding:10px 10px;border-bottom:1px solid rgba(255,255,255,.05);color:rgba(255,255,255,.6);font-family:var(--ab-mono); }
|
|
.abad-fare-table tr:last-child td { border-bottom:none; }
|
|
.abad-fare-table td:first-child { font-weight:800;color:var(--ab-text);font-family:var(--ab-font); }
|
|
|
|
/* ── Modals ──────────────────────────────────────────────────── */
|
|
.abad-overlay {
|
|
position : fixed;
|
|
inset : 0;
|
|
background : rgba(0,0,0,.75);
|
|
backdrop-filter : blur(6px);
|
|
display : flex;
|
|
align-items : center;
|
|
justify-content : center;
|
|
z-index : 1000;
|
|
padding : 20px;
|
|
}
|
|
.abad-modal {
|
|
background : rgba(14,14,14,.97);
|
|
border : 1px solid var(--ab-glass-border);
|
|
border-radius : 18px;
|
|
max-width : 520px;
|
|
width : 100%;
|
|
max-height : 90vh;
|
|
overflow-y : auto;
|
|
position : relative;
|
|
box-shadow : 0 24px 80px rgba(0,0,0,.9);
|
|
backdrop-filter : blur(20px);
|
|
}
|
|
.abad-modal--wide { max-width:780px; }
|
|
.abad-modal__header { display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--ab-glass-border); }
|
|
.abad-modal__title { font-size:16px;font-weight:800;color:var(--ab-text); }
|
|
.abad-modal__close { width:32px;height:32px;background:rgba(255,255,255,.07);border:1px solid var(--ab-glass-border);border-radius:8px;display:grid;place-items:center;cursor:pointer;color:rgba(255,255,255,.5);transition:all .15s; }
|
|
.abad-modal__close:hover { color:var(--ab-text);border-color:rgba(255,255,255,.25); }
|
|
.abad-modal__body { padding:22px; }
|
|
.abad-modal__footer { display:flex;gap:10px;padding:16px 22px;border-top:1px solid var(--ab-glass-border);background:rgba(0,0,0,.2); }
|
|
|
|
/* ── Scrollbar ───────────────────────────────────────────────── */
|
|
#abad-app ::-webkit-scrollbar { width:5px;height:5px; }
|
|
#abad-app ::-webkit-scrollbar-track { background:transparent; }
|
|
#abad-app ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14);border-radius:3px; }
|
|
|
|
/* ── Responsive ──────────────────────────────────────────────── */
|
|
@media(max-width:768px){
|
|
.abad-kpi-grid { grid-template-columns:repeat(2,1fr); }
|
|
.abad-kpi__val { font-size:1.9rem; }
|
|
.abad-panel { padding:14px; }
|
|
.abad-header { padding:0 14px; }
|
|
.abad-header__user { display:none; }
|
|
.abad-settings-grid { grid-template-columns:1fr; }
|
|
.abad-cards-grid { grid-template-columns:1fr; }
|
|
}
|