29 lines
1.9 KiB
CSS
29 lines
1.9 KiB
CSS
/************************************************************************************
|
||
* Floatina – Admin styling
|
||
************************************************************************************/
|
||
.fi-admin { --fi-gap:14px; --fi-muted:#6b7280; }
|
||
.fi-admin .fi-admin-tabs { display:flex; gap:8px; margin:18px 0 16px; }
|
||
.fi-admin .fi-admin-tabs .fi-tab{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; text-decoration:none; color:#111827; }
|
||
.fi-admin .fi-admin-tabs .fi-tab.is-active{ background:#0ea5ff10; border-color:#93c5fd; box-shadow:0 6px 14px rgba(0,0,0,.06); }
|
||
|
||
.fi-form .fi-field{ margin:18px 0; }
|
||
.fi-form .fi-label{ display:block; font-weight:600; margin-bottom:6px; }
|
||
.fi-form .description{ color:var(--fi-muted); margin:6px 0 0; }
|
||
|
||
.fi-segment{ display:inline-flex; gap:6px; background:#f3f4f6; padding:4px; border-radius:12px; border:1px solid #e5e7eb; }
|
||
.fi-segment label{ display:inline-flex; align-items:center; }
|
||
.fi-segment input{ appearance:none; }
|
||
.fi-segment span{ display:inline-block; padding:6px 12px; border-radius:10px; }
|
||
.fi-segment input:checked + span{ background:#fff; border:1px solid #dbeafe; box-shadow:0 4px 10px rgba(0,0,0,.06); }
|
||
|
||
.fi-toggle{ position:relative; display:inline-block; width:50px; height:28px; }
|
||
.fi-toggle input{ display:none; }
|
||
.fi-toggle .fi-tgl{ position:absolute; inset:0; background:#e5e7eb; border-radius:999px; transition:.2s ease; }
|
||
.fi-toggle .fi-tgl:after{ content:""; position:absolute; width:22px; height:22px; top:3px; left:3px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.15); transition:.2s ease; }
|
||
.fi-toggle input:checked + .fi-tgl{ background:#60a5fa; }
|
||
.fi-toggle input:checked + .fi-tgl:after{ transform:translateX(22px); }
|
||
|
||
.fi-grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
|
||
.fi-color{ width:220px; }
|
||
@media (max-width: 1024px){ .fi-grid2{ grid-template-columns:1fr; } }
|