Merge branch 'main' into desarrollo_hector
This commit is contained in:
@@ -19,8 +19,6 @@
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
2
pos/static/css/accounting.min.css
vendored
2
pos/static/css/accounting.min.css
vendored
@@ -19,8 +19,6 @@
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -12,8 +12,6 @@
|
||||
font-size: var(--text-body);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
2
pos/static/css/catalog.min.css
vendored
2
pos/static/css/catalog.min.css
vendored
@@ -12,8 +12,6 @@
|
||||
font-size: var(--text-body);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -19,8 +19,6 @@
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
2
pos/static/css/config.min.css
vendored
2
pos/static/css/config.min.css
vendored
@@ -19,8 +19,6 @@
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -20,8 +20,6 @@
|
||||
font-weight: var(--font-weight-regular);
|
||||
background-color: var(--color-bg-base);
|
||||
color: var(--color-text-primary);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
2
pos/static/css/customers.min.css
vendored
2
pos/static/css/customers.min.css
vendored
@@ -20,8 +20,6 @@
|
||||
font-weight: var(--font-weight-regular);
|
||||
background-color: var(--color-bg-base);
|
||||
color: var(--color-text-primary);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -23,8 +23,6 @@
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
}
|
||||
|
||||
/* Modern theme dot-grid on body */
|
||||
@@ -814,6 +812,18 @@
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.chart-canvas-wrap {
|
||||
position: relative;
|
||||
height: 220px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chart-canvas-wrap canvas {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.rank-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
2
pos/static/css/dashboard.min.css
vendored
2
pos/static/css/dashboard.min.css
vendored
@@ -23,8 +23,6 @@
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
}
|
||||
|
||||
/* Modern theme dot-grid on body */
|
||||
|
||||
@@ -12,8 +12,6 @@
|
||||
font-size: var(--text-body);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
2
pos/static/css/diagrams.min.css
vendored
2
pos/static/css/diagrams.min.css
vendored
@@ -12,8 +12,6 @@
|
||||
font-size: var(--text-body);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -19,8 +19,6 @@
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
2
pos/static/css/fleet.min.css
vendored
2
pos/static/css/fleet.min.css
vendored
@@ -19,8 +19,6 @@
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -19,8 +19,6 @@
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -732,6 +730,20 @@
|
||||
font-size: var(--text-caption);
|
||||
}
|
||||
|
||||
.btn--meli {
|
||||
background: #FFE600;
|
||||
color: #2D3277;
|
||||
border-color: transparent;
|
||||
font-weight: 700;
|
||||
}
|
||||
.btn--meli:hover {
|
||||
background: #e6cf00;
|
||||
color: #1a1f5c;
|
||||
}
|
||||
.btn--meli svg {
|
||||
stroke: currentColor;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
DATA TABLE
|
||||
========================================================================= */
|
||||
@@ -1261,7 +1273,7 @@
|
||||
.inv-field label {
|
||||
font-size: var(--text-caption);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-muted);
|
||||
color: var(--color-text-secondary);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -1282,6 +1294,23 @@
|
||||
box-shadow: 0 0 0 2px var(--color-primary-muted);
|
||||
}
|
||||
|
||||
.inv-field select {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: var(--color-surface-1);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text-primary);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-body-sm);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.inv-field select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 2px var(--color-primary-muted);
|
||||
}
|
||||
|
||||
.count-row {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
@@ -1301,3 +1330,129 @@
|
||||
|
||||
/* History table inside modal */
|
||||
.inv-modal .data-table { width: 100%; }
|
||||
|
||||
/* ─── Virtual Scroll fixes ───────────────────────────────────────────── */
|
||||
.vs-container {
|
||||
will-change: transform;
|
||||
contain: layout paint;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.vs-container table {
|
||||
will-change: transform;
|
||||
}
|
||||
.vs-container tbody tr {
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: auto 48px;
|
||||
}
|
||||
|
||||
/* ─── MercadoLibre Publish Modal Enhancements ────────────────────────── */
|
||||
.meli-preview-card {
|
||||
display: grid;
|
||||
grid-template-columns: 56px 1fr auto auto auto;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
padding: var(--space-3);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: var(--space-2);
|
||||
background: var(--color-surface-1);
|
||||
}
|
||||
.meli-preview-card img {
|
||||
width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm);
|
||||
background: var(--color-surface-2);
|
||||
}
|
||||
.meli-preview-card .meli-title-input {
|
||||
width: 100%;
|
||||
background: var(--color-surface-2);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text-primary);
|
||||
padding: 4px 8px;
|
||||
font-size: var(--text-caption);
|
||||
}
|
||||
.meli-preview-card .meli-num-input {
|
||||
width: 80px;
|
||||
background: var(--color-surface-2);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text-primary);
|
||||
padding: 4px 8px;
|
||||
font-size: var(--text-caption);
|
||||
text-align: right;
|
||||
}
|
||||
.meli-check { font-size: var(--text-caption); display: flex; align-items: center; gap: 4px; }
|
||||
.meli-check.ok { color: var(--color-success); }
|
||||
.meli-check.fail { color: var(--color-error); }
|
||||
.meli-checks-row {
|
||||
display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-1);
|
||||
}
|
||||
.meli-attrs-section {
|
||||
margin-top: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
border: 1px dashed var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface-1);
|
||||
}
|
||||
.meli-attrs-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.meli-img-upload {
|
||||
border: 2px dashed var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-3);
|
||||
text-align: center;
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--text-caption);
|
||||
cursor: pointer;
|
||||
transition: border-color var(--transition-fast);
|
||||
}
|
||||
.meli-img-upload:hover { border-color: var(--color-primary); }
|
||||
.meli-img-upload input { display: none; }
|
||||
|
||||
/* ─── MercadoLibre Category Autocomplete ─────────────────────────────── */
|
||||
.meli-cat-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 200;
|
||||
background: var(--color-surface-1);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.meli-cat-item {
|
||||
padding: 10px 14px;
|
||||
cursor: pointer;
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-text-primary);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
transition: background var(--transition-fast);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.meli-cat-item:last-child { border-bottom: none; }
|
||||
.meli-cat-item:hover,
|
||||
.meli-cat-item.is-active {
|
||||
background: var(--color-surface-2);
|
||||
}
|
||||
.meli-cat-item .cat-id {
|
||||
font-size: var(--text-caption);
|
||||
color: var(--color-text-muted);
|
||||
margin-left: 8px;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.meli-cat-loading,
|
||||
.meli-cat-empty {
|
||||
padding: 12px 14px;
|
||||
font-size: var(--text-caption);
|
||||
color: var(--color-text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
2
pos/static/css/inventory.min.css
vendored
2
pos/static/css/inventory.min.css
vendored
@@ -19,8 +19,6 @@
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -19,8 +19,6 @@
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
2
pos/static/css/invoicing.min.css
vendored
2
pos/static/css/invoicing.min.css
vendored
@@ -19,8 +19,6 @@
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -19,8 +19,6 @@
|
||||
font-size: var(--text-body);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-slow) var(--ease-in-out),
|
||||
color var(--duration-slow) var(--ease-in-out);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@@ -58,8 +56,6 @@
|
||||
background-color: var(--color-bg-elevated);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: background-color var(--duration-slow) var(--ease-in-out),
|
||||
border-color var(--duration-slow) var(--ease-in-out);
|
||||
}
|
||||
|
||||
.theme-bar__label {
|
||||
@@ -657,8 +653,6 @@
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
background: var(--color-surface-1);
|
||||
transition: background-color var(--duration-slow) var(--ease-in-out),
|
||||
border-color var(--duration-slow) var(--ease-in-out);
|
||||
}
|
||||
|
||||
.footer-version {
|
||||
|
||||
6
pos/static/css/login.min.css
vendored
6
pos/static/css/login.min.css
vendored
@@ -19,8 +19,6 @@
|
||||
font-size: var(--text-body);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-slow) var(--ease-in-out),
|
||||
color var(--duration-slow) var(--ease-in-out);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@@ -58,8 +56,6 @@
|
||||
background-color: var(--color-bg-elevated);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: background-color var(--duration-slow) var(--ease-in-out),
|
||||
border-color var(--duration-slow) var(--ease-in-out);
|
||||
}
|
||||
|
||||
.theme-bar__label {
|
||||
@@ -657,8 +653,6 @@
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
background: var(--color-surface-1);
|
||||
transition: background-color var(--duration-slow) var(--ease-in-out),
|
||||
border-color var(--duration-slow) var(--ease-in-out);
|
||||
}
|
||||
|
||||
.footer-version {
|
||||
|
||||
@@ -18,14 +18,22 @@ body {
|
||||
SIDEBAR — Glass treatment
|
||||
========================================================================== */
|
||||
|
||||
/* Prevent flash/stun while sidebar.js replaces static sidebar markup */
|
||||
.sidebar,
|
||||
.pos-sidebar {
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
background: var(--glass-bg-strong) !important;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-right: 1px solid var(--glass-border) !important;
|
||||
}
|
||||
|
||||
body.sidebar-ready .sidebar,
|
||||
body.sidebar-ready .pos-sidebar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sidebar__logo {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
861
pos/static/css/pos-ui.css
Normal file
861
pos/static/css/pos-ui.css
Normal file
@@ -0,0 +1,861 @@
|
||||
/**
|
||||
* pos-ui.css — Nexus POS UI Polish Kit
|
||||
* Backlog visual improvements: skeletons, toasts, empty states,
|
||||
* scrollbars, focus rings, badges, tooltips, compact mode, etc.
|
||||
* Load AFTER tokens.css and common.css, BEFORE page-specific CSS.
|
||||
*/
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
0. ICON BUTTONS (header bar)
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.icon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-md, 8px);
|
||||
background: var(--color-surface-2, #222);
|
||||
border: 1px solid var(--color-border, #2a2a2a);
|
||||
color: var(--color-text-secondary, #aaa);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
position: relative;
|
||||
}
|
||||
.icon-btn:hover {
|
||||
background: var(--color-surface-3, #333);
|
||||
color: var(--color-text-primary, #eee);
|
||||
border-color: var(--color-primary, #F5A623);
|
||||
}
|
||||
.notif-dot {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-error, #ef4444);
|
||||
box-shadow: 0 0 4px var(--color-error, #ef4444);
|
||||
}
|
||||
.notif-dot:empty { display: none; }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
1. CUSTOM SCROLLBAR (global)
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb, #444) var(--scrollbar-track, transparent); }
|
||||
*::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
*::-webkit-scrollbar-track { background: var(--scrollbar-track, transparent); }
|
||||
*::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb, #444); border-radius: var(--radius-full, 999px); }
|
||||
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover, #666); }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
2. SKELETON SCREENS
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
@keyframes skeleton-shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg,
|
||||
var(--color-surface-1, #1a1a1a) 25%,
|
||||
var(--color-surface-2, #2a2a2a) 50%,
|
||||
var(--color-surface-1, #1a1a1a) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-shimmer 1.6s ease-in-out infinite;
|
||||
border-radius: var(--radius-md, 8px);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
.skeleton--text { height: 1em; width: 100%; }
|
||||
.skeleton--text-sm { height: 0.75em; width: 60%; }
|
||||
.skeleton--circle { width: 40px; height: 40px; border-radius: var(--radius-full, 999px); }
|
||||
.skeleton--rect { height: 80px; width: 100%; }
|
||||
.skeleton--btn { height: 36px; width: 100px; border-radius: var(--radius-md, 8px); }
|
||||
.skeleton--table-row td { border: none !important; background: transparent !important; }
|
||||
.skeleton--table-row td .skeleton { height: 16px; }
|
||||
.skeleton--table-row td:nth-child(1) .skeleton { width: 40px; }
|
||||
.skeleton--table-row td:nth-child(2) .skeleton { width: 90%; }
|
||||
.skeleton--table-row td:nth-child(3) .skeleton { width: 70%; }
|
||||
.skeleton--table-row td:nth-child(4) .skeleton { width: 50%; }
|
||||
.skeleton--table-row td:nth-child(5) .skeleton { width: 60%; }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
3. EMPTY STATES (illustrated)
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-8, 2rem);
|
||||
text-align: center;
|
||||
color: var(--color-text-muted, #888);
|
||||
}
|
||||
.empty-state__icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: var(--space-4, 1rem);
|
||||
opacity: 0.4;
|
||||
color: var(--color-text-muted, #888);
|
||||
}
|
||||
.empty-state__icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.empty-state__title {
|
||||
font-size: var(--text-lg, 1.125rem);
|
||||
font-weight: var(--font-weight-bold, 700);
|
||||
color: var(--color-text-primary, #eee);
|
||||
margin-bottom: var(--space-2, 0.5rem);
|
||||
}
|
||||
.empty-state__subtitle {
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
max-width: 360px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-4, 1rem);
|
||||
}
|
||||
.empty-state__action {
|
||||
margin-top: var(--space-2, 0.5rem);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
4. UNIFIED INPUT FOCUS RING
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
input:focus, select:focus, textarea:focus,
|
||||
.inv-field input:focus, .inv-field select:focus, .inv-field textarea:focus,
|
||||
.search-box:focus-within, .select-filter:focus,
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary, #F5A623) !important;
|
||||
box-shadow: 0 0 0 3px var(--color-primary-muted, rgba(245,166,35,0.25)) !important;
|
||||
}
|
||||
input:disabled, select:disabled, textarea:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
5. BADGES (enhanced + new variants)
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 3px 10px;
|
||||
border-radius: var(--radius-full, 999px);
|
||||
font-size: 0.6875rem;
|
||||
font-weight: var(--font-weight-bold, 700);
|
||||
letter-spacing: var(--tracking-wide, 0.05em);
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.badge::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: var(--radius-full, 999px);
|
||||
background: currentColor;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.badge--ok { background: rgba(34, 197, 94, 0.12); color: var(--color-success, #22c55e); }
|
||||
.badge--low { background: rgba(239, 68, 68, 0.12); color: var(--color-error, #ef4444); }
|
||||
.badge--over { background: rgba(234, 179, 8, 0.12); color: var(--color-warning, #eab308); }
|
||||
.badge--pending { background: var(--color-primary-muted, rgba(245,166,35,0.15)); color: var(--color-primary, #F5A623); }
|
||||
.badge--complete { background: rgba(34, 197, 94, 0.12); color: var(--color-success, #22c55e); }
|
||||
.badge--transit { background: rgba(99, 102, 241, 0.12); color: #818cf8; }
|
||||
.badge--cancelled{ background: rgba(115, 115, 115, 0.12);color: var(--color-text-muted, #888); }
|
||||
.badge--damage { background: rgba(239, 68, 68, 0.12); color: var(--color-error, #ef4444); }
|
||||
.badge--shrinkage{ background: rgba(234, 179, 8, 0.12); color: var(--color-warning, #eab308); }
|
||||
.badge--correction{ background: var(--color-primary-muted, rgba(245,166,35,0.15)); color: var(--color-primary, #F5A623); }
|
||||
.badge--partial { background: rgba(234, 179, 8, 0.12); color: var(--color-warning, #eab308); }
|
||||
.badge--ml { background: rgba(255, 230, 0, 0.15); color: #2D3277; }
|
||||
.badge--ml::before { background: #2D3277; }
|
||||
.badge--new { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
|
||||
.badge--syncing { background: rgba(245, 166, 35, 0.12); color: var(--color-primary, #F5A623); animation: pulse-dot 1.5s ease-in-out infinite; }
|
||||
@keyframes pulse-dot {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
6. HOVER STATES (table + cards)
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.data-table tbody tr {
|
||||
border-bottom: 1px solid var(--color-border, #2a2a2a);
|
||||
transition: background var(--duration-fast, 150ms) var(--ease-in-out, ease-in-out),
|
||||
transform var(--duration-fast, 150ms) var(--ease-in-out, ease-in-out);
|
||||
}
|
||||
.data-table tbody tr:hover {
|
||||
background: var(--color-surface-2, #222);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
.data-table tbody tr:active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.card, .glass-card, .stat-card, .info-card {
|
||||
transition: transform var(--duration-fast, 150ms) var(--ease-in-out, ease-in-out),
|
||||
box-shadow var(--duration-fast, 150ms) var(--ease-in-out, ease-in-out);
|
||||
}
|
||||
.card:hover, .glass-card:hover, .stat-card:hover, .info-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.3));
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
7. TOAST NOTIFICATIONS (enhanced)
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
#toast-container {
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
pointer-events: none;
|
||||
max-width: 420px;
|
||||
}
|
||||
.toast {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius-lg, 12px);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
|
||||
pointer-events: auto;
|
||||
animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
.toast--ok { background: rgba(26, 122, 58, 0.95); color: #fff; }
|
||||
.toast--error { background: rgba(192, 57, 43, 0.95); color: #fff; }
|
||||
.toast--warn { background: rgba(212, 160, 23, 0.95); color: #000; }
|
||||
.toast--info { background: rgba(40, 40, 45, 0.95); color: #eee; border-color: rgba(255,255,255,0.08); }
|
||||
.toast__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
|
||||
.toast__content { flex: 1; }
|
||||
.toast__title { font-weight: 700; margin-bottom: 2px; font-size: 13px; }
|
||||
.toast__msg { font-size: 13px; opacity: 0.9; }
|
||||
.toast__action { margin-top: 8px; }
|
||||
.toast__action button {
|
||||
background: rgba(255,255,255,0.15);
|
||||
border: none;
|
||||
color: inherit;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.toast__action button:hover { background: rgba(255,255,255,0.25); }
|
||||
.toast__close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: inherit;
|
||||
opacity: 0.6;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
margin-left: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.toast__close:hover { opacity: 1; }
|
||||
.toast__progress {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 3px;
|
||||
background: rgba(255,255,255,0.4);
|
||||
border-radius: 0 0 0 var(--radius-lg, 12px);
|
||||
animation: toastProgress linear forwards;
|
||||
}
|
||||
@keyframes toastSlideIn {
|
||||
from { opacity: 0; transform: translateX(40px) scale(0.95); }
|
||||
to { opacity: 1; transform: translateX(0) scale(1); }
|
||||
}
|
||||
@keyframes toastSlideOut {
|
||||
from { opacity: 1; transform: translateX(0) scale(1); }
|
||||
to { opacity: 0; transform: translateX(40px) scale(0.95); }
|
||||
}
|
||||
@keyframes toastProgress {
|
||||
from { width: 100%; }
|
||||
to { width: 0%; }
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
8. TOOLTIPS
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
[data-tooltip] {
|
||||
position: relative;
|
||||
cursor: help;
|
||||
}
|
||||
[data-tooltip]::after {
|
||||
content: attr(data-tooltip);
|
||||
position: absolute;
|
||||
bottom: calc(100% + 6px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scale(0.9);
|
||||
padding: 6px 10px;
|
||||
background: var(--color-surface-3, #333);
|
||||
color: var(--color-text-primary, #eee);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
border-radius: var(--radius-md, 8px);
|
||||
box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.2));
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.15s, transform 0.15s;
|
||||
z-index: 10000;
|
||||
border: 1px solid var(--color-border, #2a2a2a);
|
||||
}
|
||||
[data-tooltip]:hover::after {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) scale(1);
|
||||
}
|
||||
[data-tooltip-pos="bottom"]::after {
|
||||
bottom: auto;
|
||||
top: calc(100% + 6px);
|
||||
}
|
||||
[data-tooltip-pos="left"]::after {
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
right: calc(100% + 6px);
|
||||
top: 50%;
|
||||
transform: translateY(-50%) scale(0.9);
|
||||
}
|
||||
[data-tooltip-pos="left"]:hover::after {
|
||||
transform: translateY(-50%) scale(1);
|
||||
}
|
||||
[data-tooltip-pos="right"]::after {
|
||||
bottom: auto;
|
||||
left: calc(100% + 6px);
|
||||
top: 50%;
|
||||
transform: translateY(-50%) scale(0.9);
|
||||
}
|
||||
[data-tooltip-pos="right"]:hover::after {
|
||||
transform: translateY(-50%) scale(1);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
9. COMPACT / DENSE MODE
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
[data-density="compact"] .data-table th,
|
||||
[data-density="compact"] .data-table td {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
[data-density="compact"] .data-table tbody tr {
|
||||
height: 36px;
|
||||
}
|
||||
[data-density="compact"] .sidebar__nav-link {
|
||||
padding: 8px 14px;
|
||||
}
|
||||
[data-density="compact"] .card, [data-density="compact"] .glass-card {
|
||||
padding: var(--space-3, 0.75rem);
|
||||
}
|
||||
[data-density="compact"] .form-group {
|
||||
margin-bottom: var(--space-2, 0.5rem);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
10. STICKY TABLE HEADERS
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.data-table thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.data-table thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--color-surface-1, #1a1a1a);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
11. RESIZABLE COLUMNS (visual cue)
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.data-table th {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
.data-table th .resize-handle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
cursor: col-resize;
|
||||
background: transparent;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.data-table th .resize-handle:hover,
|
||||
.data-table th.is-resizing .resize-handle {
|
||||
background: var(--color-primary, #F5A623);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
12. BREADCRUMBS
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2, 0.5rem);
|
||||
padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-muted, #888);
|
||||
border-bottom: 1px solid var(--color-border, #2a2a2a);
|
||||
}
|
||||
.breadcrumbs a {
|
||||
color: var(--color-text-secondary, #aaa);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.breadcrumbs a:hover {
|
||||
color: var(--color-primary, #F5A623);
|
||||
}
|
||||
.breadcrumbs__sep {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.breadcrumbs__current {
|
||||
color: var(--color-text-primary, #eee);
|
||||
font-weight: var(--font-weight-semibold, 600);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
13. USER AVATARS (initials)
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-full, 999px);
|
||||
font-size: 14px;
|
||||
font-weight: var(--font-weight-bold, 700);
|
||||
color: #fff;
|
||||
background: var(--color-primary, #F5A623);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.avatar--sm { width: 28px; height: 28px; font-size: 12px; }
|
||||
.avatar--lg { width: 48px; height: 48px; font-size: 18px; }
|
||||
.avatar--circle { border-radius: var(--radius-full, 999px); }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
14. CONNECTION INDICATOR
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.connection-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-full, 999px);
|
||||
background: var(--color-surface-2, #222);
|
||||
}
|
||||
.connection-indicator::before {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: var(--radius-full, 999px);
|
||||
background: var(--color-success, #22c55e);
|
||||
box-shadow: 0 0 6px var(--color-success, #22c55e);
|
||||
}
|
||||
.connection-indicator--offline::before {
|
||||
background: var(--color-error, #ef4444);
|
||||
box-shadow: 0 0 6px var(--color-error, #ef4444);
|
||||
}
|
||||
.connection-indicator--syncing::before {
|
||||
background: var(--color-primary, #F5A623);
|
||||
animation: pulse-dot 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
15. NOTIFICATIONS DROPDOWN
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.notif-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
width: 360px;
|
||||
max-height: 480px;
|
||||
background: var(--color-surface-1, #1a1a1a);
|
||||
border: 1px solid var(--color-border, #2a2a2a);
|
||||
border-radius: var(--radius-lg, 12px);
|
||||
box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.3));
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.notif-dropdown__header {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--color-border, #2a2a2a);
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.notif-dropdown__list {
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
.notif-dropdown__item {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--color-border, #2a2a2a);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.notif-dropdown__item:hover { background: var(--color-surface-2, #222); }
|
||||
.notif-dropdown__item--unread { border-left: 3px solid var(--color-primary, #F5A623); }
|
||||
.notif-dropdown__icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-md, 8px); display: flex; align-items: center; justify-content: center; background: var(--color-surface-2, #222); font-size: 14px; }
|
||||
.notif-dropdown__content { flex: 1; }
|
||||
.notif-dropdown__title { font-size: 13px; font-weight: 600; color: var(--color-text-primary, #eee); margin-bottom: 2px; }
|
||||
.notif-dropdown__time { font-size: 11px; color: var(--color-text-muted, #888); }
|
||||
.notif-dropdown__empty { padding: 24px; text-align: center; color: var(--color-text-muted, #888); font-size: 13px; }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
16. CMD+K SEARCH OVERLAY
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.cmdk-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding-top: 15vh;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
pointer-events: none;
|
||||
}
|
||||
.cmdk-overlay.is-open { opacity: 1; pointer-events: auto; }
|
||||
.cmdk-modal {
|
||||
width: 640px;
|
||||
max-width: 90vw;
|
||||
background: var(--color-surface-1, #1a1a1a);
|
||||
border: 1px solid var(--color-border, #2a2a2a);
|
||||
border-radius: var(--radius-xl, 16px);
|
||||
box-shadow: var(--shadow-xl, 0 16px 48px rgba(0,0,0,0.4));
|
||||
overflow: hidden;
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.cmdk-overlay.is-open .cmdk-modal { transform: scale(1); }
|
||||
.cmdk-input-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--color-border, #2a2a2a);
|
||||
}
|
||||
.cmdk-input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--color-text-primary, #eee);
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
}
|
||||
.cmdk-input::placeholder { color: var(--color-text-muted, #888); }
|
||||
.cmdk-shortcut { font-size: 11px; color: var(--color-text-muted, #888); background: var(--color-surface-2, #222); padding: 2px 6px; border-radius: 4px; }
|
||||
.cmdk-results { max-height: 400px; overflow-y: auto; }
|
||||
.cmdk-group { padding: 8px 0; }
|
||||
.cmdk-group__label { padding: 4px 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted, #888); }
|
||||
.cmdk-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
font-size: 14px;
|
||||
}
|
||||
.cmdk-item:hover, .cmdk-item.is-selected { background: var(--color-surface-2, #222); }
|
||||
.cmdk-item__icon { width: 28px; height: 28px; border-radius: var(--radius-md, 8px); display: flex; align-items: center; justify-content: center; background: var(--color-surface-2, #222); font-size: 13px; }
|
||||
.cmdk-item__meta { margin-left: auto; font-size: 11px; color: var(--color-text-muted, #888); }
|
||||
.cmdk-footer { padding: 8px 20px; border-top: 1px solid var(--color-border, #2a2a2a); font-size: 11px; color: var(--color-text-muted, #888); display: flex; justify-content: space-between; }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
17. ENTRANCE ANIMATIONS
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(12px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes scaleIn {
|
||||
from { opacity: 0; transform: scale(0.95); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
.animate-fade-in-up { animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
|
||||
.animate-fade-in { animation: fadeIn 0.3s ease both; }
|
||||
.animate-scale-in { animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
|
||||
/* Stagger delays */
|
||||
.stagger-1 { animation-delay: 0.05s; }
|
||||
.stagger-2 { animation-delay: 0.10s; }
|
||||
.stagger-3 { animation-delay: 0.15s; }
|
||||
.stagger-4 { animation-delay: 0.20s; }
|
||||
.stagger-5 { animation-delay: 0.25s; }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
18. SPARKLINE (mini charts)
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.sparkline { display: flex; align-items: flex-end; gap: 2px; height: 24px; }
|
||||
.sparkline__bar { flex: 1; border-radius: 1px; background: var(--color-primary, #F5A623); opacity: 0.6; transition: opacity 0.15s; min-width: 3px; }
|
||||
.sparkline__bar:hover { opacity: 1; }
|
||||
.sparkline--up .sparkline__bar { background: var(--color-success, #22c55e); }
|
||||
.sparkline--down .sparkline__bar { background: var(--color-error, #ef4444); }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
19. SYNC SPINNER / ANIMATED ICONS
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
@keyframes spin-slow { to { transform: rotate(360deg); } }
|
||||
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
|
||||
.icon-spin { animation: spin-slow 1.2s linear infinite; }
|
||||
.icon-bounce { animation: bounce 1s ease-in-out infinite; }
|
||||
.icon-pulse { animation: pulse-dot 1.5s ease-in-out infinite; }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
20. KIOSK / TOUCH MODE
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
[data-touch="true"] .data-table th,
|
||||
[data-touch="true"] .data-table td { padding: 16px 14px; font-size: 1rem; }
|
||||
[data-touch="true"] .btn { padding: 14px 24px; font-size: 1rem; min-height: 48px; }
|
||||
[data-touch="true"] .sidebar__nav-link { padding: 16px 18px; font-size: 1rem; }
|
||||
[data-touch="true"] input, [data-touch="true"] select, [data-touch="true"] textarea { font-size: 16px; padding: 14px 12px; }
|
||||
[data-touch="true"] .search-box { min-height: 48px; }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
21. BULK ACTIONS TOOLBAR
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.bulk-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3, 0.75rem);
|
||||
padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
|
||||
background: var(--color-surface-2, #222);
|
||||
border: 1px solid var(--color-border, #2a2a2a);
|
||||
border-radius: var(--radius-lg, 12px);
|
||||
margin-bottom: var(--space-4, 1rem);
|
||||
animation: fadeInUp 0.25s ease both;
|
||||
}
|
||||
.bulk-toolbar__count {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary, #eee);
|
||||
padding-right: var(--space-3, 0.75rem);
|
||||
border-right: 1px solid var(--color-border, #2a2a2a);
|
||||
}
|
||||
.bulk-toolbar__actions { display: flex; gap: var(--space-2, 0.5rem); }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
22. TICKET PREVIEW
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.ticket-preview {
|
||||
background: #fff;
|
||||
color: #222;
|
||||
padding: 24px;
|
||||
border-radius: var(--radius-md, 8px);
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
max-width: 320px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
.ticket-preview__header { text-align: center; border-bottom: 1px dashed #ccc; padding-bottom: 12px; margin-bottom: 12px; }
|
||||
.ticket-preview__title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
|
||||
.ticket-preview__meta { font-size: 11px; color: #666; }
|
||||
.ticket-preview__row { display: flex; justify-content: space-between; margin-bottom: 4px; }
|
||||
.ticket-preview__total { border-top: 1px dashed #ccc; padding-top: 8px; margin-top: 8px; font-size: 14px; font-weight: 700; }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
23. IMAGE COMPARATOR
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.img-compare {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-lg, 12px);
|
||||
user-select: none;
|
||||
}
|
||||
.img-compare__img { width: 100%; display: block; }
|
||||
.img-compare__overlay {
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0;
|
||||
width: 50%;
|
||||
overflow: hidden;
|
||||
border-right: 2px solid var(--color-primary, #F5A623);
|
||||
}
|
||||
.img-compare__overlay img { height: 100%; width: auto; max-width: none; }
|
||||
.img-compare__handle {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 36px; height: 36px;
|
||||
background: var(--color-primary, #F5A623);
|
||||
border-radius: var(--radius-full, 999px);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
cursor: ew-resize;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
24. CUSTOM LOADER / SPINNER
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.nx-loader {
|
||||
position: relative;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
.nx-loader__ring {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: var(--color-primary, #F5A623);
|
||||
border-radius: 50%;
|
||||
animation: spin-slow 1s linear infinite;
|
||||
}
|
||||
.nx-loader__ring:nth-child(2) {
|
||||
inset: 6px;
|
||||
border-top-color: var(--color-secondary, #3b82f6);
|
||||
animation-duration: 1.3s;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
.nx-loader__ring:nth-child(3) {
|
||||
inset: 12px;
|
||||
border-top-color: var(--color-success, #22c55e);
|
||||
animation-duration: 0.8s;
|
||||
}
|
||||
.nx-loader--sm { width: 24px; height: 24px; }
|
||||
.nx-loader--sm .nx-loader__ring { border-width: 2px; }
|
||||
.nx-loader--sm .nx-loader__ring:nth-child(2) { inset: 4px; }
|
||||
.nx-loader--sm .nx-loader__ring:nth-child(3) { inset: 8px; }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
21. TIMELINE
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.timeline { position: relative; padding-left: 24px; }
|
||||
.timeline::before { content: ''; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: var(--color-border, #2a2a2a); }
|
||||
.timeline__item { position: relative; margin-bottom: var(--space-4, 1rem); display: flex; gap: 12px; align-items: flex-start; }
|
||||
.timeline__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--color-primary, #F5A623); border: 3px solid var(--color-surface-1, #1a1a1a); flex-shrink: 0; margin-left: -24px; margin-top: 3px; z-index: 1; }
|
||||
.timeline__dot--green { background: var(--color-success, #22c55e); }
|
||||
.timeline__dot--red { background: var(--color-error, #ef4444); }
|
||||
.timeline__dot--blue { background: #3b82f6; }
|
||||
.timeline__content { flex: 1; }
|
||||
.timeline__date { font-size: 11px; color: var(--color-text-muted, #888); margin-bottom: 2px; }
|
||||
.timeline__title { font-size: 13px; font-weight: 600; color: var(--color-text-primary, #eee); }
|
||||
.timeline__desc { font-size: 12px; color: var(--color-text-secondary, #aaa); margin-top: 2px; }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
22. KANBAN BOARD
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.kanban { display: flex; gap: var(--space-4, 1rem); overflow-x: auto; padding-bottom: var(--space-2, 0.5rem); }
|
||||
.kanban__col { min-width: 280px; max-width: 320px; flex: 1; background: var(--color-surface-2, #222); border-radius: var(--radius-lg, 12px); border: 1px solid var(--color-border, #2a2a2a); display: flex; flex-direction: column; max-height: 70vh; }
|
||||
.kanban__col-header { padding: 12px 16px; border-bottom: 1px solid var(--color-border, #2a2a2a); font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
|
||||
.kanban__col-count { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-full, 999px); background: var(--color-surface-3, #333); color: var(--color-text-muted, #888); }
|
||||
.kanban__cards { flex: 1; overflow-y: auto; padding: var(--space-3, 0.75rem); display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); }
|
||||
.kanban__card { background: var(--color-surface-1, #1a1a1a); border: 1px solid var(--color-border, #2a2a2a); border-radius: var(--radius-md, 8px); padding: 12px; cursor: grab; transition: all 0.15s; }
|
||||
.kanban__card:hover { border-color: var(--color-primary, #F5A623); transform: translateY(-1px); }
|
||||
.kanban__card-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
|
||||
.kanban__card-meta { font-size: 11px; color: var(--color-text-muted, #888); }
|
||||
.kanban__card.dragging { opacity: 0.5; cursor: grabbing; }
|
||||
.kanban__col.drag-over { background: var(--color-surface-3, #333); border-color: var(--color-primary, #F5A623); }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
25. SAVED FILTERS CHIPS
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.filter-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
background: var(--color-surface-2, #222);
|
||||
border: 1px solid var(--color-border, #2a2a2a);
|
||||
border-radius: var(--radius-full, 999px);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-secondary, #aaa);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.filter-chip:hover { border-color: var(--color-primary, #F5A623); color: var(--color-text-primary, #eee); }
|
||||
.filter-chip.is-active { background: var(--color-primary-muted, rgba(245,166,35,0.15)); border-color: var(--color-primary, #F5A623); color: var(--color-primary, #F5A623); }
|
||||
.filter-chip__remove { background: none; border: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; opacity: 0.6; }
|
||||
.filter-chip__remove:hover { opacity: 1; }
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
26. DARK MODE REFINEMENTS (subtle borders, depth)
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
[data-theme="modern"] .data-table thead th {
|
||||
background: linear-gradient(180deg, var(--color-surface-1, #1a1a1a) 0%, var(--color-surface-2, #222) 100%);
|
||||
}
|
||||
[data-theme="modern"] .card, [data-theme="modern"] .glass-card {
|
||||
border: 1px solid rgba(255,255,255,0.04);
|
||||
}
|
||||
[data-theme="industrial"] .data-table thead th {
|
||||
background: var(--color-surface-1, #1a1a1a);
|
||||
border-bottom: 2px solid var(--color-primary, #F5A623);
|
||||
}
|
||||
|
||||
/* Enhanced depth layers for both themes */
|
||||
[data-theme="modern"] {
|
||||
--shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
|
||||
--shadow-md: 0 4px 12px rgba(0,0,0,0.4);
|
||||
--shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
|
||||
--shadow-xl: 0 16px 48px rgba(0,0,0,0.6);
|
||||
}
|
||||
[data-theme="industrial"] {
|
||||
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
|
||||
--shadow-md: 0 4px 12px rgba(0,0,0,0.5);
|
||||
--shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
|
||||
--shadow-xl: 0 16px 48px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
/* Smooth theme transition (only on properties that don't cause flash) */
|
||||
.card, .glass-card, .btn, .icon-btn, .kpi-card, .alert-card, .meli-card {
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
/* Improved text rendering in dark */
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Focus visible for accessibility */
|
||||
*:focus-visible {
|
||||
outline: 2px solid var(--color-primary, #F5A623);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Reduced motion preference */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
@@ -21,8 +21,6 @@
|
||||
font-weight: var(--font-weight-regular);
|
||||
background-color: var(--color-bg-base);
|
||||
color: var(--color-text-primary);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
2
pos/static/css/pos.min.css
vendored
2
pos/static/css/pos.min.css
vendored
@@ -21,8 +21,6 @@
|
||||
font-weight: var(--font-weight-regular);
|
||||
background-color: var(--color-bg-base);
|
||||
color: var(--color-text-primary);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@@ -19,8 +19,6 @@
|
||||
font-size: var(--text-body);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
2
pos/static/css/reports.min.css
vendored
2
pos/static/css/reports.min.css
vendored
@@ -19,8 +19,6 @@
|
||||
font-size: var(--text-body);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -19,8 +19,6 @@
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
2
pos/static/css/whatsapp.min.css
vendored
2
pos/static/css/whatsapp.min.css
vendored
@@ -19,8 +19,6 @@
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-normal) var(--ease-in-out),
|
||||
color var(--duration-normal) var(--ease-in-out);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user