feat: complete session — catalog, marketplace, WhatsApp, peer-to-peer, install scripts
Major features: - Pixel-Perfect glassmorphism design (landing + POS + public catalog) - OEM/Local catalog toggle with Nexpart taxonomy (14 groups, 108 subgroups, 558 part types) - Marketplace B2B Phase 1 (bodegas, POs, status machine, WA+email notifications) - Peer-to-peer inventory (multi-instance, LAN discovery) - WhatsApp: photo→Vision AI, voice→Whisper, conversational quotations - Smart unified search (VIN/plate/part_number/keyword auto-detect) - Shop Supplies tab (vehicle-independent parts) - Chatbot AI fallback chain (5 models) + response cache - CSV inventory import tool + setup_instance.sh installer - Tablet-responsive CSS + sidebar toggle - Filters, export CSV, employee edit, business data save - Quotation system (WA→POS) with auto-print on confirmation - Live stats on landing page Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
683
pos/static/css/pos-glass.css
Normal file
683
pos/static/css/pos-glass.css
Normal file
@@ -0,0 +1,683 @@
|
||||
/* ==========================================================================
|
||||
POS-GLASS.CSS — Pixel-Perfect glassmorphism overlay for Nexus POS
|
||||
Load AFTER tokens.css. Applies glass effects, glow, 3D buttons,
|
||||
and animations to all POS pages without modifying inline styles.
|
||||
========================================================================== */
|
||||
|
||||
/* ── Hidden scrollbar (global) ── */
|
||||
html { scrollbar-width: none; }
|
||||
html::-webkit-scrollbar { width: 0; }
|
||||
|
||||
/* ── Smooth font rendering ── */
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
SIDEBAR — Glass treatment
|
||||
========================================================================== */
|
||||
|
||||
.sidebar,
|
||||
.pos-sidebar {
|
||||
background: var(--glass-bg-strong) !important;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-right: 1px solid var(--glass-border) !important;
|
||||
}
|
||||
|
||||
.sidebar__logo {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar__logo-text {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Glow under logo text */
|
||||
.sidebar__logo-text::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: var(--gradient-accent);
|
||||
border-radius: 1px;
|
||||
opacity: 0.4;
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
/* Nav items — hover glow */
|
||||
.sidebar__nav a,
|
||||
.sidebar__nav-item,
|
||||
.sidebar .nav-item {
|
||||
transition: all 0.25s var(--ease-out) !important;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.sidebar__nav a:hover,
|
||||
.sidebar__nav-item:hover,
|
||||
.sidebar .nav-item:hover {
|
||||
box-shadow: 0 0 12px var(--glow-color-soft);
|
||||
}
|
||||
|
||||
.sidebar__nav a.active,
|
||||
.sidebar__nav-item.active,
|
||||
.sidebar .nav-item.active {
|
||||
box-shadow: 0 0 16px var(--glow-color-soft), inset 0 0 0 1px var(--glass-border);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
THEME BAR — Glass
|
||||
========================================================================== */
|
||||
|
||||
.theme-bar {
|
||||
background: var(--glass-bg-strong) !important;
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border-bottom: 1px solid var(--glass-border) !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
CARDS — Glass with glow hover
|
||||
========================================================================== */
|
||||
|
||||
.kpi-card,
|
||||
.table-card,
|
||||
.card,
|
||||
.stat-card,
|
||||
.chart-card,
|
||||
.alert-card,
|
||||
.config-card,
|
||||
.fleet-card,
|
||||
.report-card,
|
||||
.invoice-card,
|
||||
.customer-card,
|
||||
.panel {
|
||||
background: var(--glass-bg) !important;
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
border: 1px solid var(--glass-border) !important;
|
||||
transition: all 0.3s var(--ease-out) !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Accent top-line on hover */
|
||||
.kpi-card::before,
|
||||
.table-card::before,
|
||||
.chart-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: var(--gradient-accent);
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.4s var(--ease-out);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.kpi-card:hover::before,
|
||||
.table-card:hover::before,
|
||||
.chart-card:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.kpi-card:hover,
|
||||
.table-card:hover,
|
||||
.card:hover,
|
||||
.stat-card:hover,
|
||||
.chart-card:hover,
|
||||
.config-card:hover,
|
||||
.fleet-card:hover,
|
||||
.report-card:hover {
|
||||
border-color: var(--color-border-accent) !important;
|
||||
box-shadow: 0 4px 20px var(--glow-color-soft);
|
||||
}
|
||||
|
||||
/* KPI card accent bar — add glow */
|
||||
.kpi-card__accent-bar {
|
||||
box-shadow: 0 0 8px var(--glow-color-soft);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
BUTTONS — 3D depth effect
|
||||
========================================================================== */
|
||||
|
||||
/* Primary buttons */
|
||||
.btn--primary,
|
||||
button.primary,
|
||||
.btn-primary,
|
||||
input[type="submit"],
|
||||
button[type="submit"] {
|
||||
background: var(--gradient-accent) !important;
|
||||
border: none !important;
|
||||
box-shadow: 0 3px 0 var(--color-primary-active),
|
||||
0 4px 10px var(--glow-color-soft) !important;
|
||||
transition: all 0.25s var(--ease-out) !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn--primary:hover,
|
||||
button.primary:hover,
|
||||
.btn-primary:hover,
|
||||
input[type="submit"]:hover,
|
||||
button[type="submit"]:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 0 var(--color-primary-active),
|
||||
0 8px 20px var(--glow-color) !important;
|
||||
}
|
||||
|
||||
.btn--primary:active,
|
||||
button.primary:active,
|
||||
.btn-primary:active,
|
||||
input[type="submit"]:active,
|
||||
button[type="submit"]:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 1px 0 var(--color-primary-active) !important;
|
||||
}
|
||||
|
||||
/* Ghost / secondary buttons — glass */
|
||||
.btn--ghost,
|
||||
.btn--secondary,
|
||||
.btn-secondary,
|
||||
.btn-ghost,
|
||||
button.secondary {
|
||||
background: var(--glass-bg) !important;
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid var(--glass-border) !important;
|
||||
transition: all 0.25s var(--ease-out) !important;
|
||||
}
|
||||
|
||||
.btn--ghost:hover,
|
||||
.btn--secondary:hover,
|
||||
.btn-secondary:hover,
|
||||
.btn-ghost:hover,
|
||||
button.secondary:hover {
|
||||
border-color: var(--color-border-accent) !important;
|
||||
box-shadow: 0 0 16px var(--glow-color-soft);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
INPUTS — Glass with focus glow
|
||||
========================================================================== */
|
||||
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="date"],
|
||||
input[type="url"],
|
||||
textarea,
|
||||
select,
|
||||
.search-input,
|
||||
.filter-input {
|
||||
background: var(--glass-bg) !important;
|
||||
border: 1px solid var(--glass-border) !important;
|
||||
transition: all 0.25s var(--ease-out) !important;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="date"]:focus,
|
||||
input[type="url"]:focus,
|
||||
textarea:focus,
|
||||
select:focus,
|
||||
.search-input:focus,
|
||||
.filter-input:focus {
|
||||
border-color: var(--color-border-focus) !important;
|
||||
box-shadow: 0 0 0 3px var(--glow-color-soft), 0 0 16px var(--glow-color-soft) !important;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
TABLES — Subtle glass rows
|
||||
========================================================================== */
|
||||
|
||||
table thead th {
|
||||
background: var(--glass-bg) !important;
|
||||
backdrop-filter: blur(8px);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-caption);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--tracking-wider);
|
||||
}
|
||||
|
||||
table tbody tr {
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
table tbody tr:hover {
|
||||
background: var(--glass-highlight) !important;
|
||||
box-shadow: inset 0 0 0 1px var(--glass-border);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
MODALS — Glass overlay + glass content
|
||||
========================================================================== */
|
||||
|
||||
.modal-overlay,
|
||||
.overlay,
|
||||
.modal-backdrop {
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.modal,
|
||||
.modal-content,
|
||||
.modal-dialog,
|
||||
.dialog {
|
||||
background: var(--glass-bg-strong) !important;
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border: 1px solid var(--glass-border) !important;
|
||||
box-shadow: 0 24px 48px rgba(0,0,0,0.3) !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
TABS — Glass active state
|
||||
========================================================================== */
|
||||
|
||||
.tab,
|
||||
.tab-btn,
|
||||
.tabs button {
|
||||
transition: all 0.25s var(--ease-out) !important;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.tab.active,
|
||||
.tab-btn.active,
|
||||
.tabs button.active {
|
||||
background: var(--color-primary-muted) !important;
|
||||
box-shadow: 0 0 12px var(--glow-color-soft);
|
||||
border-color: var(--color-border-accent) !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
BADGES / TAGS — Subtle glow
|
||||
========================================================================== */
|
||||
|
||||
.badge,
|
||||
.tag,
|
||||
.status-badge,
|
||||
.pill {
|
||||
backdrop-filter: blur(4px);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
SCROLL REVEAL — Available for any POS page that wants it
|
||||
========================================================================== */
|
||||
|
||||
.nx-reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
|
||||
}
|
||||
.nx-reveal.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.nx-stagger > .nx-reveal:nth-child(1) { transition-delay: 0ms; }
|
||||
.nx-stagger > .nx-reveal:nth-child(2) { transition-delay: 80ms; }
|
||||
.nx-stagger > .nx-reveal:nth-child(3) { transition-delay: 160ms; }
|
||||
.nx-stagger > .nx-reveal:nth-child(4) { transition-delay: 240ms; }
|
||||
.nx-stagger > .nx-reveal:nth-child(5) { transition-delay: 320ms; }
|
||||
.nx-stagger > .nx-reveal:nth-child(6) { transition-delay: 400ms; }
|
||||
|
||||
/* ==========================================================================
|
||||
TOAST / NOTIFICATIONS — Glass
|
||||
========================================================================== */
|
||||
|
||||
.toast,
|
||||
.notification,
|
||||
.snackbar,
|
||||
.alert {
|
||||
background: var(--glass-bg-strong) !important;
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border) !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
DROPDOWN / POPOVER — Glass
|
||||
========================================================================== */
|
||||
|
||||
.dropdown-menu,
|
||||
.popover,
|
||||
.autocomplete-list,
|
||||
.suggestion-list {
|
||||
background: var(--glass-bg-strong) !important;
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border) !important;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
STATUS BAR (POS) — Glass
|
||||
========================================================================== */
|
||||
|
||||
.status-bar,
|
||||
.pos-status-bar {
|
||||
background: var(--glass-bg-strong) !important;
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border-bottom: 1px solid var(--glass-border) !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
LOADING SPINNER — Glow animation
|
||||
========================================================================== */
|
||||
|
||||
.spinner,
|
||||
.loading-spinner {
|
||||
animation: nx-glow-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
ANIMATIONS — Available keyframes
|
||||
========================================================================== */
|
||||
|
||||
@keyframes pos-fade-in {
|
||||
from { opacity: 0; transform: translateY(12px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Apply subtle entry animation to main content area */
|
||||
.content,
|
||||
.main-content,
|
||||
main {
|
||||
animation: pos-fade-in 0.4s var(--ease-out) both;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
DASHED BORDER ACCENTS (Pixel-Perfect style)
|
||||
========================================================================== */
|
||||
|
||||
.section-divider,
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px dashed var(--glass-border);
|
||||
margin: var(--space-4) 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
TABLET RESPONSIVE — Adaptive layout for 768px-1024px screens
|
||||
Applied globally to all POS pages via pos-glass.css.
|
||||
Targets iPad (768×1024), Android tablets (800×1280), and similar.
|
||||
========================================================================== */
|
||||
|
||||
/* ── Tablet portrait (768-1023px) — sidebar collapses, grids reflow ── */
|
||||
@media (max-width: 1023px) {
|
||||
|
||||
/* Sidebar collapses to an overlay drawer */
|
||||
.sidebar,
|
||||
.pos-sidebar {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
bottom: 0 !important;
|
||||
z-index: var(--z-modal) !important;
|
||||
transform: translateX(-100%) !important;
|
||||
transition: transform 0.3s var(--ease-out) !important;
|
||||
width: 260px !important;
|
||||
}
|
||||
|
||||
.sidebar.open,
|
||||
.pos-sidebar.open {
|
||||
transform: translateX(0) !important;
|
||||
box-shadow: 0 0 40px rgba(0,0,0,0.3) !important;
|
||||
}
|
||||
|
||||
.sidebar-overlay {
|
||||
display: none !important;
|
||||
position: fixed !important;
|
||||
inset: 0 !important;
|
||||
z-index: calc(var(--z-modal) - 1) !important;
|
||||
background: rgba(0,0,0,0.5) !important;
|
||||
}
|
||||
|
||||
.sidebar-overlay.open {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* App shell: full width when sidebar is hidden */
|
||||
.app-shell {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.app-shell > main,
|
||||
.app-shell > .main-content,
|
||||
.app-shell > .content,
|
||||
.main-content,
|
||||
.content {
|
||||
margin-left: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* Show hamburger button */
|
||||
.hamburger-btn {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
/* Touch-friendly targets — minimum 44px tap area */
|
||||
button,
|
||||
.btn,
|
||||
.nav-card,
|
||||
.tab-btn,
|
||||
.tab,
|
||||
.part-card,
|
||||
.search-result-item,
|
||||
table tbody tr,
|
||||
.kpi-card {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
/* Larger text for readability on tablets */
|
||||
.kpi-card__value {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
/* Grid reflow: 2 columns instead of 3-4 */
|
||||
.kpi-grid {
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
}
|
||||
|
||||
.nav-grid {
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
}
|
||||
|
||||
/* Tables: horizontal scroll wrapper on narrow screens */
|
||||
.table-wrap,
|
||||
.table-card {
|
||||
overflow-x: auto !important;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* POS-specific: if the POS has a side panel (cart), stack vertically */
|
||||
.pos-layout {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.pos-layout .pos-cart,
|
||||
.pos-layout .cart-panel {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
max-height: 40vh !important;
|
||||
}
|
||||
|
||||
/* Content headers: tighter padding */
|
||||
.content-header,
|
||||
.header,
|
||||
.page-header {
|
||||
padding: var(--space-3) var(--space-4) !important;
|
||||
}
|
||||
|
||||
/* Search bar: full width */
|
||||
.search-bar,
|
||||
.search-wrapper {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
/* Mode toggle: slightly larger buttons for touch */
|
||||
.mode-toggle button {
|
||||
padding: 6px 14px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
/* Vehicle selector dropdowns: stack on smaller tablets */
|
||||
.vehicle-selector__inner,
|
||||
.vehicle-selector .vs-group {
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
|
||||
.vehicle-selector .vs-arrow {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.vehicle-selector .vs-select {
|
||||
min-width: 130px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Phone portrait (< 768px) — single column, max simplification ── */
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.sidebar {
|
||||
width: 85vw !important;
|
||||
max-width: 300px !important;
|
||||
}
|
||||
|
||||
.kpi-grid,
|
||||
.nav-grid,
|
||||
.results-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
.kpi-card__value {
|
||||
font-size: 1.3rem !important;
|
||||
}
|
||||
|
||||
/* Stack the mode toggle buttons vertically if tight */
|
||||
.mode-toggle {
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
|
||||
/* Hide non-essential UI to save space */
|
||||
.header__store-badge,
|
||||
.vs-vin-divider {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Full-width modals */
|
||||
.modal-content {
|
||||
max-width: 95vw !important;
|
||||
margin: var(--space-3) !important;
|
||||
padding: var(--space-4) !important;
|
||||
}
|
||||
|
||||
/* Tables: force readable font size */
|
||||
table {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
padding: var(--space-2) var(--space-2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Landscape tablet (height < 600px with wide screen) ── */
|
||||
@media (max-height: 600px) and (min-width: 768px) {
|
||||
/* Reduce vertical padding for landscape tablet use */
|
||||
.kpi-grid {
|
||||
gap: var(--space-2) !important;
|
||||
}
|
||||
|
||||
.dashboard,
|
||||
.main-content,
|
||||
.content {
|
||||
padding: var(--space-3) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Touch device hints ── */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
/* Remove hover-only effects on touch devices — they cause sticky states */
|
||||
.kpi-card:hover,
|
||||
.nav-card:hover,
|
||||
.part-card:hover,
|
||||
.table-card:hover,
|
||||
.card:hover {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* Larger touch targets for interactive elements */
|
||||
.sidebar__nav a,
|
||||
.sidebar__nav-item,
|
||||
.sidebar .nav-item {
|
||||
padding: 12px 16px !important;
|
||||
min-height: 48px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
/* Scroll momentum on iOS */
|
||||
.table-wrap,
|
||||
.main-content,
|
||||
.content,
|
||||
.parts-grid,
|
||||
.nav-grid {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Disable text selection on buttons (prevents accidental blue highlight on long tap) */
|
||||
button,
|
||||
.btn,
|
||||
.nav-card,
|
||||
.tab-btn {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
PRINT — Disable glass effects for printing
|
||||
========================================================================== */
|
||||
|
||||
@media print {
|
||||
.sidebar,
|
||||
.theme-bar,
|
||||
.kpi-card,
|
||||
.table-card,
|
||||
.card,
|
||||
.modal,
|
||||
.modal-content,
|
||||
table thead th,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
background: #fff !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
box-shadow: none !important;
|
||||
border-color: #ccc !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
@@ -558,6 +558,69 @@
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
GLASSMORPHISM TOKENS
|
||||
========================================================================== */
|
||||
|
||||
[data-theme="industrial"] {
|
||||
--glass-bg: rgba(26, 26, 26, 0.70);
|
||||
--glass-bg-strong: rgba(26, 26, 26, 0.85);
|
||||
--glass-border: rgba(255, 255, 255, 0.08);
|
||||
--glass-blur: 16px;
|
||||
--glass-highlight: rgba(245, 166, 35, 0.06);
|
||||
|
||||
--glow-color: rgba(245, 166, 35, 0.40);
|
||||
--glow-color-soft: rgba(245, 166, 35, 0.15);
|
||||
--glow-color-strong: rgba(245, 166, 35, 0.60);
|
||||
|
||||
--gradient-accent: linear-gradient(135deg, #F5A623 0%, #e8951a 50%, #d4850f 100%);
|
||||
--gradient-text: linear-gradient(135deg, #F5A623 0%, #FFD080 50%, #F5A623 100%);
|
||||
|
||||
--canvas-grid-color: rgba(255, 255, 255, 0.06);
|
||||
--canvas-star-color: rgba(245, 166, 35, 0.30);
|
||||
--canvas-glow-color: rgba(245, 166, 35, 0.08);
|
||||
}
|
||||
|
||||
[data-theme="modern"] {
|
||||
--glass-bg: rgba(248, 249, 255, 0.70);
|
||||
--glass-bg-strong: rgba(248, 249, 255, 0.85);
|
||||
--glass-border: rgba(26, 26, 46, 0.08);
|
||||
--glass-blur: 16px;
|
||||
--glass-highlight: rgba(255, 107, 53, 0.04);
|
||||
|
||||
--glow-color: rgba(255, 107, 53, 0.35);
|
||||
--glow-color-soft: rgba(255, 107, 53, 0.12);
|
||||
--glow-color-strong: rgba(255, 107, 53, 0.55);
|
||||
|
||||
--gradient-accent: linear-gradient(135deg, #FF6B35 0%, #FF8F65 50%, #FF6B35 100%);
|
||||
--gradient-text: linear-gradient(135deg, #FF6B35 0%, #FF8F65 50%, #e85520 100%);
|
||||
|
||||
--canvas-grid-color: rgba(26, 26, 46, 0.05);
|
||||
--canvas-star-color: rgba(255, 107, 53, 0.20);
|
||||
--canvas-glow-color: rgba(255, 107, 53, 0.06);
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
ANIMATION KEYFRAMES
|
||||
========================================================================== */
|
||||
|
||||
@keyframes nx-fade-up {
|
||||
from { opacity: 0; transform: translateY(24px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes nx-glow-pulse {
|
||||
0%, 100% { box-shadow: 0 0 20px var(--glow-color-soft); }
|
||||
50% { box-shadow: 0 0 40px var(--glow-color); }
|
||||
}
|
||||
|
||||
@keyframes nx-shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
END OF TOKENS FILE
|
||||
nexus-autoparts-design/tokens/tokens.css
|
||||
|
||||
Reference in New Issue
Block a user