/* =======================================================================
LUVEEDU UI LIBRARY - library.css (v1)
Shared, unified design system for all Luveedu products.
Source of truth: emailsend.luveedu.com + postman.luveedu.com design.
VERSIONING
-----------
Use the versioned file so upgrades never break markup:
https://files.luveedu.com/ui-library/css/v1/library.css
https://files.luveedu.com/ui-library/js/v1/library.js
When the design evolves, publish library-v2.css / library-v2.js
with the SAME class names and just bump the version in your /
Icons: - sized in em, scales
with the parent font-size. Set a font-size on the container for control.
======================================================================= */
/* ------------------------------------------------------------------------
1. FONTS - Bricolage Grotesque (body) - TASA Orbiter (headings)
Self-hosted woff2 files in /fonts (no external requests).
------------------------------------------------------------------------ */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 200 800;
font-stretch: 100%;
font-display: swap;
src: url(../../fonts/bricolage-grotesque-vietnamese.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 200 800;
font-stretch: 100%;
font-display: swap;
src: url(../../fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 200 800;
font-stretch: 100%;
font-display: swap;
src: url(../../fonts/bricolage-grotesque-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'TASA Orbiter';
font-style: normal;
font-weight: 400 800;
font-stretch: 100%;
font-display: swap;
src: url(../../fonts/tasa-orbiter-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'TASA Orbiter';
font-style: normal;
font-weight: 400 800;
font-stretch: 100%;
font-display: swap;
src: url(../../fonts/tasa-orbiter-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ------------------------------------------------------------------------ */
:root {
/* Surfaces */
--lv-bg-canvas: #e2e8ee;
--lv-bg-shell: #ffffff;
--lv-bg-surface-1: #ffffff;
--lv-bg-surface-2: #f8fafc;
--lv-bg-surface-3: #eef2ff;
/* Borders */
--lv-border-muted: #d6deea;
--lv-border-strong: #c2cedf;
/* Text */
--lv-text-primary: #111827;
--lv-text-secondary: #334155;
--lv-text-tertiary: #64748b;
--lv-text-disabled: #94a3b8;
--lv-text-inverse: #ffffff;
/* Accent */
--lv-accent-100: #cdeeff;
--lv-accent-200: #93c5fd;
--lv-accent-300: #60a5fa;
--lv-accent-400: #3b82f6;
--lv-accent-500: #2563eb;
--lv-accent-600: #1d4ed8;
/* Semantic */
--lv-success-500: #23b36b;
--lv-warning-500: #f4a31c;
--lv-danger-500: #dc2626;
--lv-danger: #dc2626;
--lv-error-500: #dc2626;
--lv-focus-ring: #82d8ff;
--lv-link-default: #1d4ed8;
--lv-link-hover: #1e40af;
/* Sidebar (always dark - emailsend standard) */
--lv-sidebar-bg: #0f172a;
--lv-sidebar-border: #1e293b;
--lv-sidebar-text: #cbd5e1;
--lv-sidebar-text-muted: #64748b;
--lv-sidebar-group-label: #334155;
--lv-sidebar-hover-bg: #1e293b;
--lv-sidebar-active-bg: #1e293b;
--lv-sidebar-active-icon: #2563eb;
--lv-sidebar-danger: #f87171;
--lv-sidebar-danger-hover: #fca5a5;
/* Spacing */
--lv-space-2: 8px;
--lv-space-3: 12px;
--lv-space-4: 16px;
--lv-space-5: 20px;
--lv-space-6: 24px;
--lv-space-8: 32px;
/* Radius - 6px standard */
--lv-radius-xs: 6px;
--lv-radius-sm: 6px;
--lv-radius-md: 6px;
--lv-radius-lg: 6px;
--lv-radius-xl: 6px;
--lv-radius-pill: 9999px;
/* Typography */
--lv-font-ui: 'Bricolage Grotesque', system-ui, sans-serif;
--lv-font-heading: 'TASA Orbiter', 'Bricolage Grotesque', system-ui, sans-serif;
--lv-font-mono: 'Bricolage Grotesque', system-ui, sans-serif;
/* Shadows */
--lv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--lv-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.3);
--lv-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.38);
/* Motion */
--lv-duration-fast: 120ms;
--lv-duration-base: 180ms;
--lv-duration-slow: 260ms;
--lv-easing-standard: cubic-bezier(0.2, 0, 0.2, 1);
--lv-easing-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
}
body[data-theme='dark'] {
--lv-bg-canvas: #0a0f1a;
--lv-bg-shell: #0f1627;
--lv-bg-surface-1: #121c31;
--lv-bg-surface-2: #18253e;
--lv-bg-surface-3: #22314d;
--lv-border-muted: #273753;
--lv-border-strong: #385070;
--lv-text-primary: #eaf2ff;
--lv-text-secondary: #b9c8e5;
--lv-text-tertiary: #8ba0c4;
--lv-text-disabled: #62789f;
--lv-text-inverse: #0a0f1a;
--lv-accent-200: #9bdeff;
--lv-accent-300: #65ccff;
--lv-accent-400: #34bcff;
--lv-accent-500: #08abf5;
--lv-accent-600: #008ace;
--lv-link-default: #65ccff;
--lv-link-hover: #9bdeff;
}
/* ------------------------------------------------------------------------
3. RESET + BASE
------------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Force the main UI font everywhere (including charts & code surfaces) */
* {
font-family: var(--lv-font-ui);
}
.apexcharts-text,
.apexcharts-legend-text,
.apexcharts-tooltip,
.apexcharts-title-text,
.apexcharts-subtitle-text {
font-family: var(--lv-font-ui) !important;
}
html {
height: 100%;
font-family: var(--lv-font-ui);
font-size: 16px;
color: var(--lv-text-primary);
background: var(--lv-bg-canvas);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.5;
}
body {
min-height: 100%;
font-family: var(--lv-font-ui);
font-size: 16px;
color: var(--lv-text-primary);
background: var(--lv-bg-canvas);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.5;
}
body[data-theme='dark'] { background: var(--lv-bg-canvas); }
a { color: var(--lv-link-default); text-decoration: none; }
a:hover { color: var(--lv-link-hover); }
/* -- Headings use TASA Orbiter -- */
h1, h2, h3, h4, h5, h6,
.lv-panel-title,
.lv-card-title,
.lv-stat-value,
.lv-drawer-head h3 {
font-family: var(--lv-font-heading) !important;
}
.lv-stat-value {
font-weight: 700;
font-variant-numeric: tabular-nums;
}
code, pre, kbd, samp,
.lv-mono { font-family: var(--lv-font-ui); }
/* Focus ring (keyboard) */
:focus-visible {
outline: 2px solid var(--lv-focus-ring);
outline-offset: 2px;
}
/* Bare form elements (no class) inherit the UI font + 6px radius */
input,
select,
textarea,
button { font-family: inherit; }
input:not([type='radio']):not([type='checkbox']),
select,
textarea { border-radius: var(--lv-radius-sm); }
/* Page / panel header */
.lv-panel-title {
margin: 0;
font-size: 20px;
font-weight: 700;
color: var(--lv-text-primary);
}
.lv-panel-subtitle {
margin: 4px 0 0;
font-size: 13px;
color: var(--lv-text-tertiary);
}
/* ------------------------------------------------------------------------
4. APP SHELL - body + main container + columns
------------------------------------------------------------------------ */
.lv-app {
display: flex;
min-height: 100vh;
width: 100%;
align-items: stretch;
}
.lv-app-main {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
.lv-main {
flex: 1;
min-width: 0;
padding: 28px 32px 36px;
background: var(--lv-bg-canvas);
}
body[data-theme='dark'] .lv-main { background: var(--lv-bg-canvas); }
/* -- Grid + columns -- */
.lv-grid { display: grid; gap: var(--lv-space-4); }
.lv-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lv-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lv-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lv-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lv-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1023px) {
.lv-grid-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lv-grid-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
.lv-grid-cols-3,
.lv-grid-cols-4,
.lv-grid-cols-5,
.lv-grid-cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lv-col-span-2 { grid-column: span 2 / span 2; }
.lv-col-span-3 { grid-column: span 3 / span 3; }
.lv-col-span-4 { grid-column: span 4 / span 4; }
.lv-flex { display: flex; }
.lv-flex-col { display: flex; flex-direction: column; }
.lv-items-center { align-items: center; }
.lv-items-start { align-items: flex-start; }
.lv-items-end { align-items: flex-end; }
.lv-justify-between { justify-content: space-between; }
.lv-justify-end { justify-content: flex-end; }
.lv-justify-center { justify-content: center; }
.lv-flex-1 { flex: 1; min-width: 0; }
.lv-shrink-0 { flex-shrink: 0; }
.lv-gap-1 { gap: 4px; }
.lv-gap-2 { gap: 8px; }
.lv-gap-3 { gap: 12px; }
.lv-gap-4 { gap: 16px; }
/* ------------------------------------------------------------------------
5. SIDEBAR - always dark (#0f172a) in both themes
------------------------------------------------------------------------ */
.lv-sidebar {
width: 268px;
flex-shrink: 0;
height: 100vh;
position: sticky;
top: 0;
z-index: 20;
display: flex;
flex-direction: column;
background: var(--lv-sidebar-bg);
border-right: 1px solid var(--lv-sidebar-border);
overflow: hidden;
}
.lv-sidebar-brand {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--lv-sidebar-border);
padding: 24px;
}
.lv-sidebar-brand img {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: var(--lv-radius-pill);
object-fit: cover;
}
.lv-sidebar-brand-name {
margin: 0;
font-size: 14px;
font-weight: 700;
line-height: 1.25;
color: #ffffff;
}
.lv-sidebar-brand-sub {
margin: 2px 0 0;
font-size: 12px;
line-height: 1.25;
color: var(--lv-sidebar-text-muted);
}
.lv-sidebar-nav {
flex: 1;
overflow-y: auto;
padding: 20px 16px;
scrollbar-width: thin;
scrollbar-color: #64748b transparent;
}
.lv-nav-group-label {
margin: 4px 12px 8px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--lv-sidebar-group-label);
}
.lv-nav-link {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
margin-bottom: 2px;
border-radius: var(--lv-radius-md);
font-size: 14px;
color: var(--lv-sidebar-text);
text-decoration: none;
cursor: pointer;
transition: background var(--lv-duration-fast) var(--lv-easing-standard),
color var(--lv-duration-fast) var(--lv-easing-standard);
}
.lv-nav-link:hover { background: var(--lv-sidebar-hover-bg); color: #ffffff; }
.lv-nav-link.active {
background: var(--lv-sidebar-active-bg);
color: #ffffff;
font-weight: 600;
}
.lv-nav-link.active .lv-icon { color: var(--lv-sidebar-active-icon); }
.lv-sidebar-divider {
margin: 12px -16px;
border-top: 1px solid var(--lv-sidebar-border);
}
/* Collapsible submenu (grouped nav links) */
.lv-nav-submenu-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
padding: 10px 12px;
margin-bottom: 2px;
border: none;
border-radius: var(--lv-radius-md);
background: transparent;
color: var(--lv-sidebar-text);
font-family: var(--lv-font-ui);
font-size: 14px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background var(--lv-duration-fast) var(--lv-easing-standard),
color var(--lv-duration-fast) var(--lv-easing-standard);
}
.lv-nav-submenu-btn:hover,
.lv-nav-submenu-btn.open { background: var(--lv-sidebar-hover-bg); color: #ffffff; }
.lv-nav-submenu-btn .lv-chevron {
flex-shrink: 0;
color: var(--lv-sidebar-text-muted);
transition: transform 0.2s ease;
}
.lv-nav-submenu-btn.open .lv-chevron { transform: rotate(180deg); }
.lv-nav-submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease;
}
.lv-nav-submenu.open { max-height: 500px; }
.lv-nav-submenu-inner {
margin: 2px 8px 4px;
padding: 6px 4px;
border-radius: var(--lv-radius-md);
background: rgba(30, 41, 59, 0.5);
}
.lv-nav-submenu .lv-nav-link {
padding: 6px 12px 6px 12px;
font-size: 12.5px;
color: var(--lv-sidebar-text-muted);
}
.lv-nav-submenu .lv-nav-link.active {
color: #ffffff;
}
.lv-sidebar-footer {
flex-shrink: 0;
border-top: 1px solid var(--lv-sidebar-border);
}
.lv-sidebar-user {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
}
.lv-sidebar-user-name {
margin: 0;
font-size: 14px;
font-weight: 600;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lv-sidebar-user-handle {
margin: 0;
font-size: 12px;
color: var(--lv-sidebar-text-muted);
}
.lv-sidebar-card {
border: 1px solid var(--lv-sidebar-border);
background: rgba(30, 41, 59, 0.5);
border-radius: var(--lv-radius-md);
padding: 12px;
}
/* ------------------------------------------------------------------------
6. HEADER - sticky top bar
------------------------------------------------------------------------ */
.lv-header {
position: sticky;
top: 0;
z-index: 30;
height: 68px;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: nowrap;
border-bottom: 1px solid var(--lv-border-muted);
background: var(--lv-bg-surface-1);
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
flex-shrink: 0;
}
.lv-header-left,
.lv-header-right { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lv-header-right > * { flex-shrink: 0; }
/* Mobile brand - logo + name + tagline, shown in the header on phones only */
.lv-header-brand {
display: none;
align-items: center;
gap: 10px;
text-decoration: none;
min-width: 0;
}
.lv-header-brand img {
width: 36px;
height: 36px;
border-radius: var(--lv-radius-pill);
object-fit: cover;
flex-shrink: 0;
}
.lv-header-brand-name {
display: block;
font-family: var(--lv-font-heading);
font-weight: 700;
font-size: 14px;
line-height: 1.1;
color: var(--lv-text-primary);
white-space: nowrap;
}
.lv-header-brand-tag {
display: block;
font-size: 11px;
line-height: 1.2;
color: var(--lv-text-tertiary);
white-space: nowrap;
}
.lv-header-search {
min-width: 360px;
height: 38px;
border-radius: var(--lv-radius-sm);
border: 1px solid var(--lv-border-muted);
background: var(--lv-bg-surface-2);
color: var(--lv-text-secondary);
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px;
}
.lv-header-search .lv-icon { font-size: 14px; color: var(--lv-text-secondary); flex-shrink: 0; }
.lv-header-search input {
width: 100%;
border: 0;
outline: 0;
background: transparent;
}
/* Search inputs in page title areas — white background */
.lv-input-wrap input[type="search"] {
background: var(--lv-bg-surface-1);
}
color: var(--lv-text-primary);
font-size: 14px;
font-family: var(--lv-font-ui);
}
.lv-header-search input::placeholder { color: var(--lv-text-tertiary); }
body[data-theme='dark'] .lv-header-search {
border-color: var(--lv-border-muted);
background: rgba(255, 255, 255, 0.05);
}
/* ------------------------------------------------------------------------
7. FOOTER + floating save bar
------------------------------------------------------------------------ */
.lv-footer {
flex-shrink: 0;
border-top: 1px solid var(--lv-border-muted);
background: var(--lv-bg-surface-1);
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.lv-save-bar {
position: fixed;
bottom: 24px;
left: 268px;
right: 0;
z-index: 50;
display: flex;
justify-content: center;
padding: 0 16px;
pointer-events: none;
}
.lv-save-bar-inner {
pointer-events: auto;
display: flex;
width: 100%;
max-width: 576px;
align-items: center;
justify-content: space-between;
gap: 24px;
border-radius: var(--lv-radius-md);
border: 1px solid #2d3448;
background: #1a1f2e;
padding: 12px 16px;
}
.lv-save-bar-title { margin: 0; font-size: 13px; font-weight: 700; color: #ffffff; }
.lv-save-bar-hint { margin: 0; font-size: 11px; color: #8b95b0; }
/* ------------------------------------------------------------------------
8. DRAWERS - profile / notifications (right slide-in)
------------------------------------------------------------------------ */
.lv-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(5, 10, 18, 0.68);
opacity: 0;
pointer-events: none;
transition: opacity var(--lv-duration-base) var(--lv-easing-standard);
z-index: 40;
}
.lv-drawer-overlay.show { opacity: 1; pointer-events: auto; }
.lv-drawer {
position: fixed;
top: 0;
right: 0;
width: 420px;
max-width: 100%;
height: 100vh;
background: var(--lv-bg-surface-1);
border-left: 1px solid var(--lv-border-strong);
border-radius: 16px 0 0 16px;
transform: translateX(100%);
transition: transform var(--lv-duration-base) var(--lv-easing-standard);
z-index: 45;
display: flex;
flex-direction: column;
overflow: hidden;
}
.lv-drawer.open { transform: translateX(0); }
.lv-drawer-head {
min-height: 56px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
border-bottom: 1px solid var(--lv-border-muted);
background: var(--lv-bg-surface-1);
}
.lv-drawer-head h3 {
margin: 0;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: var(--lv-text-primary);
}
.lv-drawer-body {
padding: 16px;
overflow-y: auto;
display: grid;
gap: 12px;
background: var(--lv-bg-surface-2);
}
.lv-drawer-link {
min-height: 38px;
border-radius: var(--lv-radius-sm);
text-decoration: none;
font-size: 13px;
font-weight: 500;
color: var(--lv-text-secondary);
display: flex;
align-items: center;
gap: 10px;
padding: 0 12px;
cursor: pointer;
border: 1px solid transparent;
transition: color var(--lv-duration-fast) var(--lv-easing-standard),
background var(--lv-duration-fast) var(--lv-easing-standard),
border-color var(--lv-duration-fast) var(--lv-easing-standard);
}
.lv-drawer-link:hover {
color: var(--lv-text-primary);
background: var(--lv-bg-surface-2);
border-color: var(--lv-border-muted);
}
.lv-drawer-link .lv-icon { font-size: 14px; }
.lv-drawer-link.danger {
color: var(--lv-danger-500);
font-weight: 600;
background: transparent;
border-color: transparent;
}
.lv-drawer-link.danger:hover {
background: rgba(233, 77, 101, 0.14);
color: var(--lv-danger-500);
border-color: transparent;
}
body[data-theme='dark'] .lv-drawer-link.danger {
color: #f87171;
background: transparent;
border-color: transparent;
}
body[data-theme='dark'] .lv-drawer-link.danger:hover {
background: rgba(248, 113, 113, 0.16);
color: #f87171;
border-color: transparent;
}
.lv-drawer-avatar-banner {
padding: 24px 20px 20px;
border-bottom: 1px solid var(--lv-border-muted);
background: var(--lv-bg-surface-2);
}
.lv-drawer-avatar { width: 52px; height: 52px; border-radius: var(--lv-radius-sm); object-fit: cover; flex-shrink: 0; }
.lv-drawer-avatar-initial {
width: 52px; height: 52px; border-radius: var(--lv-radius-sm);
background: var(--lv-accent-600); color: #ffffff;
font-size: 20px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.lv-drawer-avatar-name { margin: 0; font-size: 15px; font-weight: 700; color: var(--lv-text-primary); }
.lv-drawer-avatar-email { margin: 3px 0 0; font-size: 12px; color: var(--lv-text-tertiary); word-break: break-all; }
/* Full-width divider between drawer sections (touches left & right edges) */
.lv-drawer-divider {
border-top: 1px solid var(--lv-border-muted);
}
/* ------------------------------------------------------------------------
9. FORM ELEMENTS - inputs, selects, textareas, chips, checkbox, radio, toggle
------------------------------------------------------------------------ */
.lv-field { margin-bottom: 16px; }
.lv-label {
display: block;
margin-bottom: 2px;
font-size: 12px;
font-weight: 600;
color: var(--lv-text-secondary);
}
.lv-label .lv-required { color: var(--lv-danger-500); }
.lv-hint {
margin: 0 0 6px;
font-size: 12px;
color: var(--lv-text-tertiary);
}
.lv-input,
.lv-select,
.lv-textarea {
display: block;
width: 100%;
height: 36px;
padding: 0 12px;
font-size: 13px;
font-family: var(--lv-font-ui);
color: var(--lv-text-primary);
background: var(--lv-bg-surface-2);
border: 1px solid var(--lv-border-muted);
border-radius: var(--lv-radius-sm);
outline: none;
transition: border-color var(--lv-duration-fast) var(--lv-easing-standard);
}
.lv-select { cursor: pointer; }
.lv-select option { background: var(--lv-bg-surface-1); color: var(--lv-text-primary); }
.lv-textarea {
height: auto;
min-height: 80px;
padding: 8px 12px;
line-height: 1.5;
resize: vertical;
background: var(--lv-bg-surface-2);
outline: 0;
}
.lv-input::placeholder,
.lv-textarea::placeholder { color: var(--lv-text-disabled); }
.lv-input:focus,
.lv-select:focus,
.lv-textarea:focus { border-color: var(--lv-accent-500); }
/* Input with a leading icon - wrap in .lv-input-wrap, icon sized in em (14px) */
.lv-input-wrap { position: relative; }
.lv-input-wrap .lv-icon {
position: absolute;
left: 0.9em;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: var(--lv-text-tertiary);
pointer-events: none;
z-index: 1;
}
.lv-input-wrap .lv-input,
.lv-input-wrap .lv-select,
.lv-input-wrap input[type="text"],
.lv-input-wrap input[type="email"],
.lv-input-wrap input[type="search"],
.lv-input-wrap input[type="url"],
.lv-input-wrap input[type="password"],
.lv-input-wrap input[type="number"],
.lv-input-wrap select,
.lv-input-wrap textarea {
padding-left: 2.6em;
}
/* Style bare inputs inside .lv-input-wrap even without .lv-input class */
.lv-input-wrap > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.lv-input),
.lv-input-wrap > select:not(.lv-select),
.lv-input-wrap > textarea:not(.lv-textarea) {
display: block;
width: 100%;
height: 36px;
padding-right: 12px;
font-size: 13px;
font-family: var(--lv-font-ui);
color: var(--lv-text-primary);
background: var(--lv-bg-surface-2);
border: 1px solid var(--lv-border-muted);
border-radius: var(--lv-radius-sm);
outline: none;
transition: border-color var(--lv-duration-fast) var(--lv-easing-standard);
}
.lv-input-wrap > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.lv-input):focus {
border-color: var(--lv-accent-500);
}
.lv-input-wrap > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.lv-input)::placeholder {
color: var(--lv-text-disabled);
}
/* Password toggle button inside input-wrap */
.password-toggle {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: 4px;
background: transparent;
color: var(--lv-text-tertiary);
cursor: pointer;
z-index: 2;
transition: color 0.12s ease, background 0.12s ease;
}
.password-toggle:hover {
color: var(--lv-text-primary);
background: var(--lv-bg-surface-2);
}
.password-toggle .lv-icon {
width: 16px;
height: 16px;
pointer-events: none;
}
/* Input with password toggle needs right padding */
.lv-input-wrap .lv-input[type="password"],
.lv-input-wrap input[type="password"] {
padding-right: 40px;
}
.lv-field-error {
display: none;
margin: 6px 0 0;
font-size: 12px;
font-weight: 600;
color: var(--lv-danger-500);
}
.lv-field-error.show { display: block; }
/* Form section (title + description block, emailsend settings standard) */
.lv-form-section {
padding-bottom: 20px;
border-bottom: 1px solid var(--lv-border-muted);
margin-bottom: 20px;
}
.lv-form-section:last-child {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.lv-form-section-title {
margin: 0 0 4px;
font-size: 14px;
font-weight: 700;
color: var(--lv-text-primary);
}
.lv-form-section-desc {
margin: 0 0 16px;
font-size: 12px;
color: var(--lv-text-tertiary);
}
/* Chips / pills (tab pattern) */
.lv-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 12px;
border-radius: var(--lv-radius-sm);
font-size: 12px;
font-weight: 600;
font-family: var(--lv-font-ui);
border: 1px solid var(--lv-border-muted);
background: var(--lv-bg-surface-2);
color: var(--lv-text-secondary);
cursor: pointer;
transition: color var(--lv-duration-fast) var(--lv-easing-standard),
border-color var(--lv-duration-fast) var(--lv-easing-standard),
background var(--lv-duration-fast) var(--lv-easing-standard);
}
.lv-chip .lv-icon { font-size: 14px; }
.lv-chip:hover { color: var(--lv-text-primary); }
.lv-chip.active {
border-color: var(--lv-accent-500);
background: var(--lv-accent-500);
color: #ffffff;
}
/* Small chip */
.lv-chip-sm {
height: 24px;
padding: 0 10px;
font-size: 11px;
}
/* Checkbox + radio */
.lv-checkbox,
.lv-radio {
width: 15px;
height: 15px;
border-radius: 3px;
border: 1px solid var(--lv-border-strong);
cursor: pointer;
accent-color: var(--lv-accent-500);
flex-shrink: 0;
}
.lv-radio { border-radius: var(--lv-radius-pill); }
/* Toggle switch */
.lv-toggle {
position: relative;
display: inline-flex;
cursor: pointer;
align-items: center;
}
.lv-toggle input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.lv-toggle-track {
width: 36px;
height: 20px;
border-radius: var(--lv-radius-pill);
border: 1px solid var(--lv-border-muted);
background: var(--lv-bg-surface-2);
transition: border-color var(--lv-duration-fast), background var(--lv-duration-fast);
}
.lv-toggle-thumb {
position: absolute;
left: 2px;
top: 2px;
width: 16px;
height: 16px;
border-radius: var(--lv-radius-pill);
background: var(--lv-text-tertiary);
transition: transform var(--lv-duration-fast), background var(--lv-duration-fast);
}
.lv-toggle input:checked + .lv-toggle-track {
border-color: var(--lv-accent-500);
background: var(--lv-accent-500);
}
.lv-toggle input:checked + .lv-toggle-track + .lv-toggle-thumb {
transform: translateX(16px);
background: #ffffff;
}
/* ------------------------------------------------------------------------
10. BUTTONS - primary / secondary / icon-only / text-only / danger
------------------------------------------------------------------------ */
.lv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
padding: 0 16px;
border-radius: var(--lv-radius-sm);
font-size: 13px;
font-weight: 600;
font-family: var(--lv-font-ui);
color: inherit;
cursor: pointer;
border: 1px solid transparent;
transition: background var(--lv-duration-fast) var(--lv-easing-standard),
color var(--lv-duration-fast) var(--lv-easing-standard),
border-color var(--lv-duration-fast) var(--lv-easing-standard),
opacity var(--lv-duration-fast);
text-decoration: none;
white-space: nowrap;
}
.lv-btn .lv-icon { font-size: 14px; }
.lv-btn:active { transform: scale(0.98); }
.lv-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.lv-btn-primary {
background: var(--lv-accent-500);
border-color: var(--lv-accent-500);
color: #ffffff;
}
.lv-btn-primary:hover:not(:disabled) { background: var(--lv-accent-400); color: #ffffff; }
.lv-btn-secondary {
background: var(--lv-bg-surface-1);
border-color: var(--lv-border-muted);
color: var(--lv-text-secondary);
}
.lv-btn-secondary:hover:not(:disabled) { background: var(--lv-bg-surface-2); }
.lv-btn-danger {
background: var(--lv-danger-500);
border-color: var(--lv-danger-500);
color: #ffffff;
box-shadow: 0 1px 2px rgba(220, 38, 38, 0.25);
}
.lv-btn-danger:hover:not(:disabled) {
background: #b91c1c;
border-color: #b91c1c;
}
.lv-btn-danger:active:not(:disabled) { background: #991b1b; border-color: #991b1b; }
.lv-btn-danger:disabled { background: rgba(220, 38, 38, 0.45); border-color: transparent; color: rgba(255,255,255,0.8); }
/* Icon-only button - 36px box, 16px icon */
.lv-btn-icon {
width: 36px;
height: 36px;
padding: 0;
justify-content: center;
border-radius: var(--lv-radius-sm);
border: 1px solid var(--lv-border-muted);
background: var(--lv-bg-surface-1);
color: var(--lv-text-secondary);
font-size: 16px;
cursor: pointer;
display: inline-flex;
align-items: center;
cursor: pointer;
transition: background var(--lv-duration-fast) var(--lv-easing-standard),
color var(--lv-duration-fast) var(--lv-easing-standard),
border-color var(--lv-duration-fast) var(--lv-easing-standard);
}
.lv-btn-icon:hover:not(:disabled) { background: var(--lv-bg-surface-2); color: var(--lv-text-primary); }
.lv-btn-icon .lv-icon { font-size: 16px; }
.lv-btn-icon:disabled { opacity: 0.55; cursor: not-allowed; }
/* Small icon-only button (table rows) - same height as .lv-btn (36px) */
.lv-btn-icon-sm {
width: 36px;
height: 36px;
font-size: 16px;
}
.lv-btn-icon-sm .lv-icon { font-size: 16px; }
/* Danger icon-only button (delete actions) */
.lv-btn-icon-danger {
border: 1px solid #fecaca;
background: #fef2f2;
color: #dc2626;
}
.lv-btn-icon-danger:hover:not(:disabled) {
background: #fee2e2;
color: #dc2626;
}
/* Text-only button */
.lv-btn-text {
background: transparent;
border-color: transparent;
color: var(--lv-text-tertiary);
padding: 0 8px;
}
.lv-btn-text:hover:not(:disabled) { color: var(--lv-text-primary); }
/* Sizes */
.lv-btn-sm { height: 32px; padding: 0 12px; font-size: 12px; }
.lv-btn-full { width: 100%; }
/* Shine sweep for primary buttons */
.lv-btn-shine { position: relative; overflow: hidden; }
.lv-btn-shine::after {
content: '';
position: absolute;
top: 0;
left: -150%;
width: 55%;
height: 100%;
background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.38) 50%, transparent 80%);
transform: skewX(-20deg);
animation: lv-shine-sweep 2.8s ease-in-out infinite;
pointer-events: none;
}
@keyframes lv-shine-sweep {
0% { left: -150%; }
55%, 100% { left: 160%; }
}
/* Button loading state - add .is-loading, text hides, spinner appears */
.lv-btn.is-loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.lv-btn.is-loading .lv-icon { opacity: 0; }
.lv-btn.is-loading::after {
content: '';
position: absolute;
width: 14px;
height: 14px;
border-radius: var(--lv-radius-pill);
border: 2px solid currentColor;
border-top-color: transparent;
opacity: 0.75;
animation: lv-spin 0.7s linear infinite;
}
/* ------------------------------------------------------------------------
11. ICONS - lucide, em-sized, 2.5 stroke width
The wrapper becomes inline-flex with a 1em box; the lucide