From 380698258a3031aff566601a96a920802fb415b3 Mon Sep 17 00:00:00 2001 From: consultoria-as Date: Wed, 1 Apr 2026 06:22:46 +0000 Subject: [PATCH] feat: agregar design system completo con 2 temas (Industrial + Moderno) - Login: PIN pad con seleccion de usuario + auth real via API - Catalogo: grid de productos con sidebar nav y filtros - POS: layout split con numpad y area de venta - tokens.css: sistema completo de CSS variables (colores, tipografia, espaciado) - 2 temas: Industrial Robusto (dark/amber) y Tecnico Moderno (light/orange) Co-Authored-By: Claude Opus 4.6 (1M context) --- pos/static/css/catalog-design.css | 1383 ++++++++++++++++ pos/static/css/login-design.css | 834 ++++++++++ pos/static/css/pos-design.css | 1298 ++++++++++++++++ pos/static/css/tokens.css | 564 +++++++ pos/templates/catalog.html | 2136 ++++++++++++++++++++++++- pos/templates/login.html | 1426 ++++++++++++++++- pos/templates/pos.html | 2422 ++++++++++++++++++++++++----- 7 files changed, 9576 insertions(+), 487 deletions(-) create mode 100644 pos/static/css/catalog-design.css create mode 100644 pos/static/css/login-design.css create mode 100644 pos/static/css/pos-design.css create mode 100644 pos/static/css/tokens.css diff --git a/pos/static/css/catalog-design.css b/pos/static/css/catalog-design.css new file mode 100644 index 0000000..00c08a1 --- /dev/null +++ b/pos/static/css/catalog-design.css @@ -0,0 +1,1383 @@ + + /* ========================================================================= + BASE RESET & SHELL + ========================================================================= */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + } + + body { + font-family: var(--font-body); + 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; + } + + [data-theme="modern"] body, + [data-theme="modern"].body-shell { + background-color: var(--color-bg-base); + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ========================================================================= + THEME SWITCHER BAR + ========================================================================= */ + + .theme-bar { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: var(--z-toast); + display: flex; + align-items: center; + justify-content: flex-end; + gap: var(--space-2); + padding: var(--space-2) var(--space-4); + background: var(--color-bg-overlay); + border-bottom: 1px solid var(--color-border); + backdrop-filter: blur(8px); + height: 36px; + } + + .theme-bar__label { + font-size: var(--text-caption); + color: var(--color-text-muted); + font-family: var(--font-body); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .theme-btn { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: 3px var(--space-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-full); + background: transparent; + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: var(--transition-fast); + } + + .theme-btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + .theme-btn.is-active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-inverse); + } + + /* ========================================================================= + APP LAYOUT + ========================================================================= */ + + .app-shell { + display: flex; + height: 100vh; + padding-top: 36px; /* theme bar height */ + } + + /* ========================================================================= + SIDEBAR + ========================================================================= */ + + .sidebar { + width: 260px; + flex-shrink: 0; + display: flex; + flex-direction: column; + background: var(--color-bg-elevated); + border-right: 1px solid var(--color-border); + overflow-y: auto; + transition: var(--transition-normal); + } + + [data-theme="industrial"] .sidebar { + border-right-color: var(--color-border); + } + + /* ---- Brand ---- */ + + .sidebar__brand { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-5) var(--space-5) var(--space-4); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + .brand-logo { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + color: var(--color-text-inverse); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.375rem; + letter-spacing: var(--tracking-tight); + flex-shrink: 0; + } + + [data-theme="industrial"] .brand-logo { + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); + border-radius: 0; + } + + [data-theme="modern"] .brand-logo { + border-radius: var(--radius-md); + } + + .brand-name { + display: flex; + flex-direction: column; + line-height: 1; + } + + .brand-name__primary { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.125rem; + letter-spacing: var(--tracking-wide); + color: var(--color-text-primary); + text-transform: uppercase; + } + + .brand-name__sub { + font-family: var(--font-body); + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + margin-top: 2px; + } + + /* ---- Navigation ---- */ + + .sidebar__nav { + flex: 1; + padding: var(--space-3) 0; + } + + .nav-section-label { + padding: var(--space-3) var(--space-5) var(--space-1); + font-size: var(--text-caption); + font-family: var(--font-body); + font-weight: var(--font-weight-semibold); + color: var(--color-text-muted); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + } + + .nav-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-2) var(--space-5); + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-regular); + text-decoration: none; + cursor: pointer; + border: none; + background: none; + width: 100%; + text-align: left; + transition: var(--transition-fast); + border-left: 3px solid transparent; + position: relative; + } + + .nav-item:hover { + background: var(--color-primary-muted); + color: var(--color-text-primary); + border-left-color: var(--color-primary); + } + + .nav-item.is-active { + background: var(--color-primary-muted); + color: var(--color-primary); + font-weight: var(--font-weight-semibold); + border-left-color: var(--color-primary); + } + + [data-theme="industrial"] .nav-item.is-active { + background: rgba(245, 166, 35, 0.12); + } + + .nav-item__icon { + width: 18px; + height: 18px; + opacity: 0.75; + flex-shrink: 0; + } + + .nav-item.is-active .nav-item__icon, + .nav-item:hover .nav-item__icon { + opacity: 1; + } + + .nav-item__badge { + margin-left: auto; + background: var(--color-primary); + color: var(--color-text-inverse); + font-size: 10px; + font-weight: var(--font-weight-bold); + padding: 1px 6px; + border-radius: var(--radius-full); + line-height: 1.4; + } + + /* ---- User profile ---- */ + + .sidebar__profile { + padding: var(--space-4) var(--space-5); + border-top: 1px solid var(--color-border); + display: flex; + align-items: center; + gap: var(--space-3); + flex-shrink: 0; + } + + .profile-avatar { + width: 36px; + height: 36px; + background: var(--color-primary); + color: var(--color-text-inverse); + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.9rem; + flex-shrink: 0; + } + + [data-theme="industrial"] .profile-avatar { + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); + } + + [data-theme="modern"] .profile-avatar { + border-radius: var(--radius-full); + } + + .profile-info { + flex: 1; + min-width: 0; + } + + .profile-info__name { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .profile-info__role { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .profile-btn { + background: none; + border: none; + color: var(--color-text-muted); + cursor: pointer; + padding: var(--space-1); + border-radius: var(--radius-sm); + transition: var(--transition-fast); + flex-shrink: 0; + } + + .profile-btn:hover { + color: var(--color-text-primary); + background: var(--color-primary-muted); + } + + /* ========================================================================= + MAIN CONTENT AREA + ========================================================================= */ + + .main-content { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + min-width: 0; + } + + /* ---- Header bar ---- */ + + .content-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--space-6); + height: 56px; + flex-shrink: 0; + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + } + + .breadcrumb { + display: flex; + align-items: center; + gap: var(--space-2); + font-size: var(--text-body-sm); + color: var(--color-text-muted); + } + + .breadcrumb__link { + color: var(--color-text-muted); + text-decoration: none; + transition: var(--transition-fast); + } + + .breadcrumb__link:hover { + color: var(--color-primary); + } + + .breadcrumb__sep { + color: var(--color-text-disabled); + } + + .breadcrumb__current { + color: var(--color-text-primary); + font-weight: var(--font-weight-semibold); + } + + .header-actions { + display: flex; + align-items: center; + gap: var(--space-3); + } + + .icon-btn { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: none; + border: 1px solid var(--color-border); + color: var(--color-text-secondary); + cursor: pointer; + transition: var(--transition-fast); + border-radius: var(--radius-md); + position: relative; + } + + [data-theme="industrial"] .icon-btn { + border-radius: 0; + } + + .icon-btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + .icon-btn .notif-dot { + position: absolute; + top: 6px; + right: 6px; + width: 7px; + height: 7px; + background: var(--color-error); + border-radius: var(--radius-full); + border: 1px solid var(--color-bg-elevated); + } + + /* ========================================================================= + SCROLLABLE PAGE BODY + ========================================================================= */ + + .page-body { + flex: 1; + overflow-y: auto; + padding: var(--space-6); + display: flex; + flex-direction: column; + gap: var(--space-5); + } + + [data-theme="modern"] .page-body { + background-color: var(--color-bg-base); + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ========================================================================= + SEARCH SECTION + ========================================================================= */ + + .search-panel { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + padding: var(--space-5); + box-shadow: var(--shadow-sm); + } + + [data-theme="industrial"] .search-panel { + clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); + border-radius: 0; + } + + [data-theme="modern"] .search-panel { + border-radius: var(--radius-lg); + } + + .search-panel__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h5); + color: var(--color-text-primary); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + margin-bottom: var(--space-4); + display: flex; + align-items: center; + gap: var(--space-2); + } + + [data-theme="industrial"] .search-panel__title { + color: var(--color-primary); + } + + .search-panel__title svg { + color: var(--color-primary); + } + + .vehicle-search-row { + display: grid; + grid-template-columns: 1fr 1fr 1fr auto; + gap: var(--space-3); + align-items: end; + } + + .form-group { + display: flex; + flex-direction: column; + gap: var(--space-1); + } + + .form-label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + } + + .form-select, + .form-input { + width: 100%; + padding: var(--space-2) var(--space-3); + background: var(--color-bg-overlay); + border: 1px solid var(--color-border); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + outline: none; + transition: var(--transition-fast); + appearance: none; + -webkit-appearance: none; + height: 40px; + } + + [data-theme="industrial"] .form-select, + [data-theme="industrial"] .form-input { + border-radius: 0; + } + + [data-theme="modern"] .form-select, + [data-theme="modern"] .form-input { + border-radius: var(--radius-md); + } + + .form-select:focus, + .form-input:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-focus); + } + + .form-select { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 10px center; + padding-right: var(--space-8); + cursor: pointer; + } + + .form-select option { + background: var(--color-bg-overlay); + color: var(--color-text-primary); + } + + /* Part search row */ + + .part-search-row { + display: grid; + grid-template-columns: 1fr auto; + gap: var(--space-3); + align-items: end; + margin-top: var(--space-3); + } + + .form-input-with-icon { + position: relative; + } + + .form-input-with-icon svg { + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); + color: var(--color-text-muted); + pointer-events: none; + } + + .form-input-with-icon .form-input { + padding-left: var(--space-8); + } + + /* ---- Buttons ---- */ + + .btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-2); + padding: 0 var(--space-5); + height: 40px; + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + border: 1px solid transparent; + cursor: pointer; + transition: var(--transition-fast); + white-space: nowrap; + text-decoration: none; + letter-spacing: var(--tracking-wide); + } + + [data-theme="industrial"] .btn { + border-radius: 0; + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); + text-transform: uppercase; + } + + [data-theme="modern"] .btn { + border-radius: var(--radius-md); + } + + .btn-primary { + background: var(--btn-primary-bg); + color: var(--btn-primary-text); + border-color: var(--btn-primary-border); + } + + .btn-primary:hover { + background: var(--btn-primary-bg-hover); + } + + .btn-primary:active { + background: var(--btn-primary-bg-active); + } + + .btn-secondary { + background: var(--btn-secondary-bg); + color: var(--btn-secondary-text); + border-color: var(--btn-secondary-border); + } + + .btn-secondary:hover { + background: var(--btn-secondary-bg-hover); + } + + .btn-ghost { + background: var(--btn-ghost-bg); + color: var(--btn-ghost-text); + border-color: var(--btn-ghost-border); + } + + .btn-ghost:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + /* ========================================================================= + RESULTS BAR + ========================================================================= */ + + .results-bar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--space-3); + } + + .results-count { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-h5); + color: var(--color-text-primary); + letter-spacing: var(--tracking-snug); + } + + .results-count strong { + color: var(--color-primary); + font-weight: var(--heading-weight-primary); + } + + /* ========================================================================= + FILTER CHIPS + ========================================================================= */ + + .filters-row { + display: flex; + align-items: center; + gap: var(--space-2); + flex-wrap: wrap; + } + + .filters-label { + font-size: var(--text-caption); + color: var(--color-text-muted); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + flex-shrink: 0; + } + + .chip { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: 4px var(--space-3); + border: 1px solid var(--color-border); + background: transparent; + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: var(--transition-fast); + user-select: none; + } + + [data-theme="industrial"] .chip { + border-radius: 0; + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + [data-theme="modern"] .chip { + border-radius: var(--radius-full); + } + + .chip:hover { + border-color: var(--color-primary); + color: var(--color-primary); + background: var(--color-primary-muted); + } + + .chip.is-active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-inverse); + } + + [data-theme="industrial"] .chip.is-active { + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); + } + + /* ========================================================================= + TOOLBAR (sort + view toggle) + ========================================================================= */ + + .catalog-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-3); + } + + .sort-row { + display: flex; + align-items: center; + gap: var(--space-3); + } + + .sort-label { + font-size: var(--text-caption); + color: var(--color-text-muted); + font-weight: var(--font-weight-semibold); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + } + + .sort-select { + padding: 4px var(--space-7) 4px var(--space-3); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-caption); + outline: none; + cursor: pointer; + appearance: none; + -webkit-appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 8px center; + transition: var(--transition-fast); + height: 32px; + } + + [data-theme="industrial"] .sort-select { + border-radius: 0; + } + + [data-theme="modern"] .sort-select { + border-radius: var(--radius-md); + } + + .sort-select:focus { + border-color: var(--color-border-focus); + } + + .view-toggle { + display: flex; + border: 1px solid var(--color-border); + overflow: hidden; + } + + [data-theme="industrial"] .view-toggle { + border-radius: 0; + } + + [data-theme="modern"] .view-toggle { + border-radius: var(--radius-md); + } + + .view-btn { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background: transparent; + border: none; + color: var(--color-text-muted); + cursor: pointer; + transition: var(--transition-fast); + border-right: 1px solid var(--color-border); + } + + .view-btn:last-child { + border-right: none; + } + + .view-btn:hover { + color: var(--color-primary); + background: var(--color-primary-muted); + } + + .view-btn.is-active { + background: var(--color-primary); + color: var(--color-text-inverse); + } + + /* ========================================================================= + PRODUCT GRID + ========================================================================= */ + + .product-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-4); + } + + .product-grid.view-list { + grid-template-columns: 1fr; + } + + /* ---- Product Card ---- */ + + .product-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + display: flex; + flex-direction: column; + transition: var(--transition-normal); + position: relative; + overflow: hidden; + } + + [data-theme="industrial"] .product-card { + border-radius: 0; + clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); + } + + [data-theme="modern"] .product-card { + border-radius: var(--radius-lg); + } + + .product-card:hover { + border-color: var(--color-primary); + box-shadow: var(--shadow-md); + transform: translateY(-2px); + } + + [data-theme="industrial"] .product-card:hover { + box-shadow: 0 4px 16px rgba(245, 166, 35, 0.15), var(--shadow-md); + } + + /* List view card overrides */ + + .view-list .product-card { + flex-direction: row; + align-items: center; + } + + [data-theme="industrial"] .view-list .product-card { + clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); + } + + .view-list .product-card__image { + width: 100px; + min-width: 100px; + height: 80px; + } + + .view-list .product-card__body { + flex: 1; + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + gap: var(--space-4); + } + + .view-list .product-card__pricing { + text-align: right; + flex-shrink: 0; + } + + .view-list .product-card__compatibility { + grid-column: 1 / -1; + } + + /* Card image placeholder */ + + .product-card__image { + height: 140px; + background: var(--color-bg-overlay); + display: flex; + align-items: center; + justify-content: center; + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + position: relative; + overflow: hidden; + } + + [data-theme="industrial"] .product-card__image { + background: var(--color-surface-2); + } + + .product-card__image svg { + color: var(--color-text-disabled); + opacity: 0.5; + } + + .product-card__image-label { + position: absolute; + bottom: var(--space-2); + left: var(--space-2); + font-size: 10px; + font-family: var(--font-mono); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + background: var(--color-bg-elevated); + padding: 1px var(--space-2); + } + + [data-theme="industrial"] .product-card__image-label { + border-radius: 0; + border-left: 2px solid var(--color-primary); + } + + [data-theme="modern"] .product-card__image-label { + border-radius: var(--radius-sm); + } + + /* Card stock badge (on image) */ + + .stock-badge { + position: absolute; + top: var(--space-2); + right: var(--space-2); + display: flex; + align-items: center; + gap: 4px; + padding: 3px var(--space-2); + font-size: 10px; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + } + + [data-theme="industrial"] .stock-badge { + border-radius: 0; + } + + [data-theme="modern"] .stock-badge { + border-radius: var(--radius-full); + } + + .stock-badge::before { + content: ''; + width: 6px; + height: 6px; + border-radius: var(--radius-full); + flex-shrink: 0; + } + + .stock-badge.stock-ok { + background: rgba(34, 197, 94, 0.15); + color: var(--color-success); + border: 1px solid rgba(34, 197, 94, 0.3); + } + + .stock-badge.stock-ok::before { background: var(--color-success); } + + .stock-badge.stock-low { + background: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + border: 1px solid rgba(234, 179, 8, 0.3); + } + + .stock-badge.stock-low::before { background: var(--color-warning); } + + .stock-badge.stock-out { + background: rgba(239, 68, 68, 0.15); + color: var(--color-error); + border: 1px solid rgba(239, 68, 68, 0.3); + } + + .stock-badge.stock-out::before { background: var(--color-error); } + + /* Card body */ + + .product-card__body { + padding: var(--space-4); + flex: 1; + display: flex; + flex-direction: column; + gap: var(--space-2); + } + + .product-card__category { + font-size: 10px; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-primary); + } + + .product-card__name { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: 0.9375rem; + color: var(--color-text-primary); + line-height: 1.3; + letter-spacing: var(--tracking-snug); + } + + [data-theme="industrial"] .product-card__name { + text-transform: uppercase; + } + + .product-card__oem { + font-family: var(--font-mono); + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + } + + .product-card__brand { + font-size: var(--text-caption); + color: var(--color-text-secondary); + display: flex; + align-items: center; + gap: var(--space-1); + } + + .product-card__brand-dot { + width: 3px; + height: 3px; + border-radius: var(--radius-full); + background: var(--color-text-disabled); + flex-shrink: 0; + } + + .product-card__compatibility { + display: flex; + align-items: center; + gap: var(--space-1); + padding: var(--space-1) var(--space-2); + background: var(--color-primary-muted); + border-left: 2px solid var(--color-primary); + font-size: 10px; + font-family: var(--font-body); + color: var(--color-text-accent); + } + + [data-theme="modern"] .product-card__compatibility { + border-radius: 0 var(--radius-sm) var(--radius-sm) 0; + } + + /* Card footer */ + + .product-card__footer { + padding: var(--space-3) var(--space-4); + border-top: 1px solid var(--color-border); + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-3); + flex-shrink: 0; + } + + .product-card__pricing {} + + .product-card__price { + font-family: var(--font-mono); + font-weight: var(--font-weight-bold); + font-size: 1.1875rem; + color: var(--color-text-primary); + line-height: 1; + } + + [data-theme="industrial"] .product-card__price { + color: var(--color-primary); + } + + .product-card__price-unit { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + } + + /* Add button */ + + .btn-add { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: var(--space-1) var(--space-3); + background: var(--btn-primary-bg); + color: var(--btn-primary-text); + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-bold); + border: 1px solid transparent; + cursor: pointer; + transition: var(--transition-fast); + letter-spacing: var(--tracking-wide); + white-space: nowrap; + height: 32px; + } + + [data-theme="industrial"] .btn-add { + border-radius: 0; + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); + text-transform: uppercase; + } + + [data-theme="modern"] .btn-add { + border-radius: var(--radius-md); + } + + .btn-add:hover { + background: var(--btn-primary-bg-hover); + } + + .btn-add:active { + background: var(--btn-primary-bg-active); + } + + /* ========================================================================= + PAGINATION + ========================================================================= */ + + .pagination { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-1); + padding: var(--space-4) 0; + } + + .page-item { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: var(--transition-fast); + user-select: none; + } + + [data-theme="industrial"] .page-item { + border-radius: 0; + font-family: var(--font-mono); + } + + [data-theme="modern"] .page-item { + border-radius: var(--radius-md); + } + + .page-item:hover:not(.is-active):not(.is-disabled) { + border-color: var(--color-primary); + color: var(--color-primary); + background: var(--color-primary-muted); + } + + .page-item.is-active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-inverse); + } + + [data-theme="industrial"] .page-item.is-active { + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); + } + + .page-item.is-disabled { + opacity: 0.4; + cursor: not-allowed; + } + + .page-item--wide { + width: auto; + padding: 0 var(--space-3); + gap: var(--space-1); + } + + .page-ellipsis { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-text-muted); + font-size: var(--text-body-sm); + user-select: none; + } + + /* ========================================================================= + SCROLLBAR + ========================================================================= */ + + .page-body::-webkit-scrollbar, + .sidebar::-webkit-scrollbar { + width: 6px; + } + + .page-body::-webkit-scrollbar-track, + .sidebar::-webkit-scrollbar-track { + background: var(--scrollbar-track); + } + + .page-body::-webkit-scrollbar-thumb, + .sidebar::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-thumb); + border-radius: var(--radius-full); + } + + .page-body::-webkit-scrollbar-thumb:hover, + .sidebar::-webkit-scrollbar-thumb:hover { + background-color: var(--scrollbar-thumb-hover); + } + + /* ========================================================================= + INDUSTRIAL THEME — DECORATIVE ACCENTS + ========================================================================= */ + + [data-theme="industrial"] .sidebar__brand::after { + display: none; /* removed, using clip already */ + } + + [data-theme="industrial"] .content-header { + border-bottom-color: var(--color-border); + position: relative; + } + + [data-theme="industrial"] .content-header::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 80px; + height: 2px; + background: var(--color-primary); + } + + /* ========================================================================= + SIDEBAR TOGGLE (mobile) + ========================================================================= */ + + .sidebar-toggle { + display: none; + width: 36px; + height: 36px; + align-items: center; + justify-content: center; + background: none; + border: 1px solid var(--color-border); + color: var(--color-text-secondary); + cursor: pointer; + transition: var(--transition-fast); + border-radius: var(--radius-md); + } + + [data-theme="industrial"] .sidebar-toggle { + border-radius: 0; + } + + /* ========================================================================= + RESPONSIVE + ========================================================================= */ + + @media (max-width: 1024px) { + .product-grid:not(.view-list) { + grid-template-columns: repeat(2, 1fr); + } + + .vehicle-search-row { + grid-template-columns: 1fr 1fr; + } + + .vehicle-search-row .form-group:last-child { + grid-column: 1 / -1; + } + } + + @media (max-width: 768px) { + .sidebar { + position: fixed; + top: 36px; + left: 0; + bottom: 0; + z-index: var(--z-dropdown); + transform: translateX(-100%); + transition: transform var(--duration-normal) var(--ease-in-out); + } + + .sidebar.is-open { + transform: translateX(0); + box-shadow: var(--shadow-xl); + } + + .sidebar-toggle { + display: flex; + } + + .product-grid:not(.view-list) { + grid-template-columns: repeat(2, 1fr); + } + + .vehicle-search-row { + grid-template-columns: 1fr; + } + + .vehicle-search-row .form-group:last-child { + grid-column: auto; + } + + .part-search-row { + grid-template-columns: 1fr; + } + + .catalog-toolbar { + flex-direction: column; + align-items: flex-start; + } + + .results-bar { + flex-direction: column; + align-items: flex-start; + } + } + + @media (max-width: 480px) { + .product-grid:not(.view-list) { + grid-template-columns: 1fr; + } + + .page-body { + padding: var(--space-4); + } + } + + /* ========================================================================= + OVERLAY (mobile sidebar backdrop) + ========================================================================= */ + + .sidebar-overlay { + display: none; + position: fixed; + inset: 0; + top: 36px; + background: var(--overlay-backdrop); + z-index: calc(var(--z-dropdown) - 1); + backdrop-filter: blur(2px); + } + + .sidebar-overlay.is-open { + display: block; + } + \ No newline at end of file diff --git a/pos/static/css/login-design.css b/pos/static/css/login-design.css new file mode 100644 index 0000000..c12c015 --- /dev/null +++ b/pos/static/css/login-design.css @@ -0,0 +1,834 @@ + + + /* ===================================================================== + RESET & BASE + ===================================================================== */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + } + + body { + font-family: var(--font-body); + 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; + } + + /* Modern theme dot-grid on body */ + [data-theme="modern"] body, + [data-theme="modern"].theme-root { + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + button { + cursor: pointer; + border: none; + background: none; + font-family: inherit; + } + + /* ===================================================================== + THEME SWITCHER BAR (sticky top) + ===================================================================== */ + + .theme-bar { + position: sticky; + top: 0; + z-index: var(--z-sticky); + display: flex; + align-items: center; + justify-content: flex-end; + gap: var(--space-2); + padding: var(--space-2) var(--space-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 { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + margin-right: var(--space-2); + } + + .theme-btn { + display: flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-4); + border-radius: var(--radius-full); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); + border: 1.5px solid var(--color-border); + background: transparent; + transition: var(--transition-normal); + letter-spacing: var(--tracking-wide); + } + + .theme-btn:hover { + color: var(--color-primary); + border-color: var(--color-primary); + background: var(--color-primary-muted); + } + + .theme-btn.active { + color: var(--color-text-inverse); + background: var(--color-primary); + border-color: var(--color-primary); + } + + [data-theme="industrial"] .theme-btn.active { + color: #000; + } + + .theme-btn__dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: currentColor; + flex-shrink: 0; + } + + .theme-btn[data-theme-target="industrial"] .theme-btn__dot { + background: #F5A623; + } + + .theme-btn[data-theme-target="industrial"].active .theme-btn__dot { + background: #000; + } + + .theme-btn[data-theme-target="modern"] .theme-btn__dot { + background: #FF6B35; + } + + .theme-btn[data-theme-target="modern"].active .theme-btn__dot { + background: #fff; + } + + /* ===================================================================== + LAYOUT — centered login screen + ===================================================================== */ + + .login-screen { + min-height: calc(100vh - 49px); /* subtract theme bar height */ + display: flex; + align-items: center; + justify-content: center; + padding: var(--space-8) var(--space-4); + } + + /* ===================================================================== + LOGIN CARD + ===================================================================== */ + + .login-card { + width: 100%; + max-width: 480px; + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + box-shadow: var(--shadow-xl); + overflow: hidden; + transition: background-color var(--duration-slow) var(--ease-in-out), + border-color var(--duration-slow) var(--ease-in-out), + box-shadow var(--duration-slow) var(--ease-in-out); + } + + /* Industrial theme: angular clip-path on the card */ + [data-theme="industrial"] .login-card { + border-radius: 0; + clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); + } + + /* Modern theme: smooth rounded corners */ + [data-theme="modern"] .login-card { + border-radius: var(--radius-xl); + } + + /* ===================================================================== + CARD HEADER — brand / logo + ===================================================================== */ + + .card-header { + padding: var(--space-8) var(--space-8) var(--space-6); + text-align: center; + border-bottom: 1px solid var(--color-border); + position: relative; + overflow: hidden; + } + + /* Industrial: amber accent bar at top of header */ + [data-theme="industrial"] .card-header::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, transparent, var(--color-primary), transparent); + } + + /* Modern: subtle gradient wash */ + [data-theme="modern"] .card-header { + background: linear-gradient( + 135deg, + rgba(255, 107, 53, 0.04) 0%, + rgba(255, 107, 53, 0.01) 100% + ); + } + + .brand { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-4); + } + + .brand-logo { + width: 52px; + height: 52px; + background: var(--color-primary); + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-heading); + font-size: 1.75rem; + font-weight: var(--heading-weight-primary); + color: var(--color-text-inverse); + flex-shrink: 0; + transition: background var(--duration-normal) var(--ease-in-out); + } + + [data-theme="industrial"] .brand-logo { + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); + border-radius: 0; + } + + [data-theme="modern"] .brand-logo { + border-radius: var(--radius-md); + box-shadow: var(--shadow-md); + } + + [data-theme="industrial"] .brand-logo { + color: #000; + } + + .brand-text { + text-align: left; + } + + .brand-name { + font-family: var(--font-heading); + font-size: var(--text-h4); + font-weight: var(--heading-weight-primary); + color: var(--color-text-primary); + letter-spacing: var(--heading-tracking-h4); + line-height: var(--leading-h4); + text-transform: uppercase; + } + + [data-theme="industrial"] .brand-name { + letter-spacing: var(--tracking-wider); + } + + .brand-sub { + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-accent); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + margin-top: var(--space-1); + } + + /* ===================================================================== + CARD BODY + ===================================================================== */ + + .card-body { + padding: var(--space-6) var(--space-8); + display: flex; + flex-direction: column; + gap: var(--space-6); + } + + /* ===================================================================== + SECTION LABEL + ===================================================================== */ + + .section-label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + margin-bottom: var(--space-3); + } + + /* ===================================================================== + USER SELECTION + ===================================================================== */ + + .users-section {} + + .users-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-3); + } + + .user-avatar-btn { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-2); + padding: var(--space-3) var(--space-2); + background: var(--color-surface-1); + border: 1.5px solid var(--color-border); + cursor: pointer; + transition: var(--transition-normal); + position: relative; + } + + [data-theme="industrial"] .user-avatar-btn { + border-radius: 0; + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); + } + + [data-theme="modern"] .user-avatar-btn { + border-radius: var(--radius-lg); + } + + .user-avatar-btn:hover { + border-color: var(--color-primary); + background: var(--color-primary-muted); + transform: translateY(-2px); + box-shadow: var(--shadow-md); + } + + .user-avatar-btn.selected { + border-color: var(--color-primary); + background: var(--color-primary-muted); + box-shadow: var(--shadow-accent); + } + + [data-theme="industrial"] .user-avatar-btn.selected { + background: rgba(245, 166, 35, 0.10); + } + + .user-avatar-btn.selected .user-initials { + background: var(--color-primary); + color: var(--color-text-inverse); + } + + [data-theme="industrial"] .user-avatar-btn.selected .user-initials { + color: #000; + } + + /* Selected check indicator */ + .user-avatar-btn.selected::after { + content: '✓'; + position: absolute; + top: 4px; + right: 6px; + font-size: 10px; + font-weight: bold; + color: var(--color-primary); + line-height: 1; + } + + .user-initials { + width: 44px; + height: 44px; + background: var(--color-surface-2); + border: 1.5px solid var(--color-border); + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-heading); + font-size: 0.9rem; + font-weight: var(--heading-weight-primary); + color: var(--color-text-secondary); + letter-spacing: var(--tracking-wide); + transition: var(--transition-normal); + flex-shrink: 0; + } + + [data-theme="industrial"] .user-initials { + border-radius: 0; + clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); + } + + [data-theme="modern"] .user-initials { + border-radius: var(--radius-full); + } + + .user-name { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); + text-align: center; + line-height: 1.3; + transition: color var(--duration-normal); + } + + .user-avatar-btn.selected .user-name { + color: var(--color-text-accent); + } + + .user-role { + font-size: 10px; + color: var(--color-text-muted); + text-align: center; + letter-spacing: var(--tracking-wide); + } + + /* ===================================================================== + PIN DISPLAY (dots) + ===================================================================== */ + + .pin-section {} + + .pin-display { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-4); + padding: var(--space-4) var(--space-6); + background: var(--color-surface-2); + border: 1.5px solid var(--color-border); + margin-bottom: var(--space-4); + transition: border-color var(--duration-normal), box-shadow var(--duration-normal); + min-height: 64px; + } + + [data-theme="industrial"] .pin-display { + border-radius: 0; + } + + [data-theme="modern"] .pin-display { + border-radius: var(--radius-lg); + } + + .pin-display.has-digits { + border-color: var(--color-border-accent); + } + + .pin-display.error { + border-color: var(--color-error); + animation: pin-shake 0.4s var(--ease-in-out); + } + + @keyframes pin-shake { + 0%, 100% { transform: translateX(0); } + 20% { transform: translateX(-8px); } + 40% { transform: translateX(8px); } + 60% { transform: translateX(-5px); } + 80% { transform: translateX(5px); } + } + + .pin-dot { + width: 14px; + height: 14px; + border-radius: 50%; + border: 2px solid var(--color-border-strong); + background: transparent; + transition: all var(--duration-fast) var(--ease-out); + flex-shrink: 0; + } + + .pin-dot.filled { + background: var(--color-primary); + border-color: var(--color-primary); + transform: scale(1.1); + box-shadow: 0 0 8px var(--color-primary); + } + + /* PIN placeholder text when no user selected */ + .pin-placeholder { + font-size: var(--text-body-sm); + color: var(--color-text-muted); + font-style: italic; + } + + /* ===================================================================== + PIN PAD + ===================================================================== */ + + .pin-pad { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-3); + } + + .pin-key { + position: relative; + padding: 0; + height: 64px; + background: var(--color-surface-2); + border: 1.5px solid var(--color-border); + font-family: var(--font-heading); + font-size: 1.5rem; + font-weight: var(--heading-weight-primary); + color: var(--color-text-primary); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: var(--transition-fast); + user-select: none; + -webkit-tap-highlight-color: transparent; + overflow: hidden; + } + + [data-theme="industrial"] .pin-key { + border-radius: 0; + letter-spacing: var(--tracking-normal); + } + + [data-theme="modern"] .pin-key { + border-radius: var(--radius-md); + letter-spacing: var(--tracking-snug); + } + + .pin-key:hover { + background: var(--color-surface-3); + border-color: var(--color-border-strong); + transform: translateY(-1px); + box-shadow: var(--shadow-sm); + } + + .pin-key:active { + transform: translateY(1px) scale(0.97); + box-shadow: none; + background: var(--color-primary-muted); + border-color: var(--color-primary); + } + + /* Ripple effect */ + .pin-key::after { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background: var(--color-primary); + opacity: 0; + border-radius: inherit; + transform: scale(0); + transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out); + } + + .pin-key.ripple::after { + transform: scale(2.5); + opacity: 0.12; + } + + /* Backspace key */ + .pin-key--backspace { + font-size: 1.1rem; + color: var(--color-text-muted); + } + + .pin-key--backspace:hover { + color: var(--color-error); + border-color: var(--color-error); + background: rgba(239, 68, 68, 0.06); + } + + .pin-key--backspace:active { + border-color: var(--color-error); + background: rgba(239, 68, 68, 0.12); + } + + /* Enter key */ + .pin-key--enter { + background: var(--color-primary-muted); + border-color: var(--color-primary); + color: var(--color-primary); + font-size: 1rem; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + } + + .pin-key--enter:hover { + background: var(--color-primary); + color: var(--color-text-inverse); + transform: translateY(-1px); + box-shadow: var(--shadow-md); + } + + [data-theme="industrial"] .pin-key--enter:hover { + color: #000; + } + + .pin-key--enter:active { + background: var(--color-primary-active, var(--color-primary)); + color: var(--color-text-inverse); + transform: translateY(1px) scale(0.97); + } + + /* ===================================================================== + SUBMIT BUTTON + ===================================================================== */ + + .btn-login { + width: 100%; + padding: var(--space-4) var(--space-6); + background: var(--btn-primary-bg); + color: var(--btn-primary-text); + border: 1.5px solid var(--btn-primary-border, transparent); + font-family: var(--font-heading); + font-size: var(--text-h5); + font-weight: var(--heading-weight-primary); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + cursor: pointer; + transition: var(--transition-normal); + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-3); + position: relative; + overflow: hidden; + } + + [data-theme="industrial"] .btn-login { + border-radius: 0; + clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); + } + + [data-theme="modern"] .btn-login { + border-radius: var(--radius-lg); + box-shadow: var(--shadow-md); + } + + .btn-login:hover:not(:disabled) { + background: var(--btn-primary-bg-hover); + transform: translateY(-2px); + box-shadow: var(--shadow-lg); + } + + .btn-login:active:not(:disabled) { + background: var(--btn-primary-bg-active); + transform: translateY(0); + box-shadow: var(--shadow-sm); + } + + .btn-login:disabled { + opacity: 0.45; + cursor: not-allowed; + transform: none; + } + + .btn-login__icon { + font-size: 1.1rem; + line-height: 1; + } + + /* ===================================================================== + CARD FOOTER + ===================================================================== */ + + .card-footer { + padding: var(--space-4) var(--space-8); + border-top: 1px solid var(--color-border); + display: flex; + align-items: center; + 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 { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + font-family: var(--font-mono); + } + + .footer-status { + display: flex; + align-items: center; + gap: var(--space-2); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .status-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--color-success); + animation: status-pulse 2.5s infinite ease-in-out; + flex-shrink: 0; + } + + @keyframes status-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.5; transform: scale(0.85); } + } + + /* ===================================================================== + INDUSTRIAL THEME EXTRAS — accent border line on card + ===================================================================== */ + + [data-theme="industrial"] .login-card { + border-color: #2a2a2a; + position: relative; + } + + [data-theme="industrial"] .login-card::before { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + /* Simulated angular highlight on top-left edge */ + border-top: 1px solid rgba(245, 166, 35, 0.15); + border-left: 1px solid rgba(245, 166, 35, 0.08); + clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); + z-index: 1; + } + + /* ===================================================================== + NOTIFICATION / TOAST for error feedback + ===================================================================== */ + + .toast { + position: fixed; + bottom: var(--space-8); + left: 50%; + transform: translateX(-50%) translateY(120%); + background: var(--color-error); + color: #fff; + padding: var(--space-3) var(--space-6); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + border-radius: var(--radius-full); + box-shadow: var(--shadow-lg); + z-index: var(--z-toast); + transition: transform 0.3s var(--ease-out); + white-space: nowrap; + pointer-events: none; + } + + .toast.show { + transform: translateX(-50%) translateY(0); + } + + /* ===================================================================== + RESPONSIVE + ===================================================================== */ + + @media (max-width: 640px) { + .theme-bar { + padding: var(--space-2) var(--space-4); + } + + .theme-bar__label { + display: none; + } + + .login-screen { + padding: var(--space-4) var(--space-3); + align-items: flex-start; + padding-top: var(--space-6); + } + + .card-body { + padding: var(--space-5) var(--space-5); + gap: var(--space-5); + } + + .card-header { + padding: var(--space-6) var(--space-5) var(--space-5); + } + + .card-footer { + padding: var(--space-3) var(--space-5); + } + + .brand-logo { + width: 44px; + height: 44px; + font-size: 1.4rem; + } + + .brand-name { + font-size: 1.25rem; + } + + .users-grid { + grid-template-columns: repeat(3, 1fr); + gap: var(--space-2); + } + + .pin-key { + height: 56px; + font-size: 1.35rem; + } + + .pin-dot { + width: 12px; + height: 12px; + } + } + + @media (max-width: 360px) { + .users-grid { + grid-template-columns: repeat(3, 1fr); + } + + .user-initials { + width: 36px; + height: 36px; + font-size: 0.75rem; + } + + .pin-key { + height: 50px; + font-size: 1.2rem; + } + } + + /* ===================================================================== + ACCESSIBILITY + ===================================================================== */ + + .pin-key:focus-visible, + .user-avatar-btn:focus-visible, + .theme-btn:focus-visible, + .btn-login:focus-visible { + outline: 2px solid var(--color-border-focus); + outline-offset: 3px; + } + + @media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + transition-duration: 0.01ms !important; + animation-duration: 0.01ms !important; + } + } + + \ No newline at end of file diff --git a/pos/static/css/pos-design.css b/pos/static/css/pos-design.css new file mode 100644 index 0000000..42f643a --- /dev/null +++ b/pos/static/css/pos-design.css @@ -0,0 +1,1298 @@ + + /* ===================================================================== + BASE RESET & LAYOUT SHELL + ===================================================================== */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + overflow: hidden; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body); + 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; + } + + /* Dot-grid for modern theme (applied to body shell) */ + [data-theme="modern"] body, + [data-theme="modern"].pos-shell { + background-color: var(--color-bg-base); + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ===================================================================== + STATUS BAR (very top) + ===================================================================== */ + + .status-bar { + display: flex; + align-items: center; + justify-content: space-between; + height: 36px; + padding: 0 var(--space-5); + background-color: var(--color-surface-3); + border-bottom: 1px solid var(--color-border); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + flex-shrink: 0; + z-index: var(--z-sticky); + } + + [data-theme="industrial"] .status-bar { + background-color: #111111; + border-bottom-color: var(--color-primary-muted); + } + + .status-bar__store { + display: flex; + align-items: center; + gap: var(--space-3); + color: var(--color-text-accent); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.8rem; + letter-spacing: var(--tracking-widest); + } + + .status-bar__store-dot { + width: 7px; + height: 7px; + background-color: var(--color-success); + border-radius: var(--radius-full); + box-shadow: 0 0 6px var(--color-success); + animation: pulse-dot 2.5s ease-in-out infinite; + } + + @keyframes pulse-dot { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.4; } + } + + .status-bar__center { + display: flex; + align-items: center; + gap: var(--space-6); + } + + .status-bar__right { + display: flex; + align-items: center; + gap: var(--space-4); + } + + .status-bar__user { + display: flex; + align-items: center; + gap: var(--space-2); + color: var(--color-text-secondary); + } + + .status-bar__user-avatar { + width: 20px; + height: 20px; + border-radius: var(--radius-full); + background-color: var(--color-primary); + color: var(--color-text-inverse); + display: flex; + align-items: center; + justify-content: center; + font-size: 0.6rem; + font-weight: var(--font-weight-bold); + } + + /* Theme switcher inside status bar */ + .theme-switcher { + display: flex; + align-items: center; + gap: var(--space-2); + background-color: var(--color-surface-1); + border: 1px solid var(--color-border); + border-radius: var(--radius-full); + padding: 2px; + } + + .theme-btn { + display: flex; + align-items: center; + gap: var(--space-1); + padding: 3px var(--space-3); + border: none; + border-radius: var(--radius-full); + font-family: var(--font-body); + font-size: 0.68rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + cursor: pointer; + transition: var(--transition-fast); + background: transparent; + color: var(--color-text-muted); + } + + .theme-btn.active { + background-color: var(--color-primary); + color: var(--color-text-inverse); + box-shadow: var(--shadow-sm); + } + + [data-theme="industrial"] .theme-btn.active { + color: #000; + } + + /* ===================================================================== + MAIN CONTENT — split layout + ===================================================================== */ + + .pos-shell { + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; + } + + .pos-main { + display: flex; + flex: 1; + overflow: hidden; + gap: 0; + } + + /* ===================================================================== + LEFT PANEL — Product Browser (60%) + ===================================================================== */ + + .panel-products { + display: flex; + flex-direction: column; + width: 60%; + min-width: 0; + border-right: 1px solid var(--color-border); + background-color: var(--color-bg-base); + overflow: hidden; + } + + [data-theme="modern"] .panel-products { + background-color: transparent; + } + + /* Search bar row */ + .search-row { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-4) var(--space-5); + background-color: var(--color-surface-1); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + .search-wrap { + position: relative; + flex: 1; + } + + .search-icon { + position: absolute; + left: var(--space-4); + top: 50%; + transform: translateY(-50%); + color: var(--color-text-muted); + pointer-events: none; + } + + .search-input { + width: 100%; + height: 48px; + padding: 0 var(--space-4) 0 44px; + background-color: var(--color-bg-overlay); + border: 1.5px solid var(--color-border); + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-lg); + font-weight: var(--font-weight-regular); + color: var(--color-text-primary); + outline: none; + transition: var(--transition-fast); + } + + .search-input::placeholder { + color: var(--color-text-muted); + } + + .search-input:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-focus); + background-color: var(--color-bg-overlay); + } + + [data-theme="modern"] .search-input { + border-radius: var(--radius-lg); + background-color: #fff; + } + + .btn-scan { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--btn-secondary-bg); + border: 1.5px solid var(--btn-secondary-border); + border-radius: var(--radius-md); + color: var(--color-primary); + cursor: pointer; + transition: var(--transition-fast); + flex-shrink: 0; + } + + .btn-scan:hover { + background-color: var(--btn-secondary-bg-hover); + box-shadow: var(--shadow-accent); + } + + [data-theme="industrial"] .btn-scan { + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); + } + + [data-theme="modern"] .btn-scan { + border-radius: var(--radius-lg); + } + + /* Quick category buttons */ + .categories-row { + display: flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-3) var(--space-5); + border-bottom: 1px solid var(--color-border); + overflow-x: auto; + flex-shrink: 0; + scrollbar-width: none; + } + + .categories-row::-webkit-scrollbar { display: none; } + + .category-label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + white-space: nowrap; + margin-right: var(--space-1); + } + + .cat-btn { + display: flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-4); + border: 1.5px solid var(--color-border); + border-radius: var(--radius-sm); + background-color: transparent; + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); + cursor: pointer; + white-space: nowrap; + transition: var(--transition-fast); + letter-spacing: var(--tracking-snug); + } + + .cat-btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); + background-color: var(--color-primary-muted); + } + + .cat-btn.active { + border-color: var(--color-primary); + background-color: var(--color-primary); + color: var(--color-text-inverse); + } + + [data-theme="industrial"] .cat-btn.active { color: #000; } + + [data-theme="modern"] .cat-btn { + border-radius: var(--radius-full); + } + + [data-theme="industrial"] .cat-btn { + clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); + } + + /* Product grid */ + .product-grid-wrap { + flex: 1; + overflow-y: auto; + padding: var(--space-4) var(--space-5); + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .product-grid-wrap::-webkit-scrollbar { width: 6px; } + .product-grid-wrap::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .product-grid-wrap::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-thumb); + border-radius: var(--radius-full); + } + .product-grid-wrap::-webkit-scrollbar-thumb:hover { + background-color: var(--scrollbar-thumb-hover); + } + + .product-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-3); + } + + @media (max-width: 1100px) { + .product-grid { + grid-template-columns: repeat(2, 1fr); + } + } + + /* Product card */ + .product-card { + position: relative; + display: flex; + flex-direction: column; + padding: var(--space-4); + background-color: var(--color-surface-1); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + cursor: pointer; + transition: var(--transition-fast); + overflow: hidden; + } + + .product-card:hover { + border-color: var(--color-primary); + box-shadow: var(--shadow-md); + transform: translateY(-1px); + } + + .product-card:hover .product-card__add { + opacity: 1; + transform: scale(1); + } + + [data-theme="industrial"] .product-card { + clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); + background-color: var(--color-surface-1); + border-color: #2a2a2a; + } + + [data-theme="industrial"] .product-card:hover { + border-color: var(--color-primary); + box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-md); + } + + [data-theme="modern"] .product-card { + border-radius: var(--radius-lg); + background-color: #fff; + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .product-card:hover { + box-shadow: var(--shadow-lg); + } + + .product-card__category { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-primary); + margin-bottom: var(--space-1); + } + + .product-card__name { + font-family: var(--font-heading); + font-size: var(--text-body); + font-weight: var(--heading-weight-primary); + line-height: var(--leading-h5); + color: var(--color-text-primary); + margin-bottom: var(--space-1); + letter-spacing: var(--heading-tracking-h5); + } + + [data-theme="industrial"] .product-card__name { + font-size: 1.05rem; + letter-spacing: 0.01em; + } + + .product-card__oem { + font-family: var(--font-mono); + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-bottom: var(--space-3); + } + + .product-card__footer { + display: flex; + align-items: flex-end; + justify-content: space-between; + margin-top: auto; + gap: var(--space-2); + } + + .product-card__price { + font-family: var(--font-mono); + font-size: 1.1rem; + font-weight: var(--font-weight-bold); + color: var(--color-text-primary); + line-height: 1; + } + + .product-card__stock { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + } + + .product-card__stock.low { color: var(--color-warning); } + .product-card__stock.out { color: var(--color-error); } + + .product-card__add { + width: 32px; + height: 32px; + border: none; + border-radius: var(--radius-sm); + background-color: var(--color-primary); + color: var(--color-text-inverse); + font-size: 1.2rem; + font-weight: var(--font-weight-bold); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.75; + transform: scale(0.95); + transition: var(--transition-fast); + flex-shrink: 0; + } + + .product-card__add:hover { + background-color: var(--color-primary-hover); + opacity: 1; + transform: scale(1.08) !important; + } + + [data-theme="industrial"] .product-card__add { color: #000; } + [data-theme="modern"] .product-card__add { border-radius: var(--radius-md); } + + /* Add flash animation */ + @keyframes card-flash { + 0% { background-color: var(--color-primary-muted); } + 100% { background-color: transparent; } + } + + .product-card.added { + animation: card-flash 0.4s ease forwards; + } + + /* ===================================================================== + RIGHT PANEL — Cart / Ticket (40%) + ===================================================================== */ + + .panel-cart { + display: flex; + flex-direction: column; + width: 40%; + min-width: 320px; + background-color: var(--color-surface-1); + overflow: hidden; + position: relative; + } + + [data-theme="modern"] .panel-cart { + background-color: #fff; + box-shadow: -4px 0 20px rgba(26, 26, 46, 0.06); + } + + [data-theme="industrial"] .panel-cart { + background-color: #141414; + border-left: 1px solid #2a2a2a; + } + + /* Cart header */ + .cart-header { + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + background-color: var(--color-surface-2); + } + + [data-theme="industrial"] .cart-header { + background-color: #1a1a1a; + border-bottom-color: var(--color-primary-muted); + } + + .cart-header__top { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-3); + } + + .cart-header__sale-id { + font-family: var(--font-heading); + font-size: var(--text-h5); + font-weight: var(--heading-weight-primary); + color: var(--color-text-primary); + letter-spacing: var(--heading-tracking-h5); + display: flex; + align-items: center; + gap: var(--space-2); + } + + .cart-header__sale-id::before { + content: ''; + display: block; + width: 4px; + height: 20px; + background-color: var(--color-primary); + border-radius: 2px; + flex-shrink: 0; + } + + [data-theme="industrial"] .cart-header__sale-id { + font-size: 1.35rem; + letter-spacing: 0.03em; + } + + .cart-header__status { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-success); + background-color: rgba(34, 197, 94, 0.12); + padding: 3px var(--space-3); + border-radius: var(--radius-full); + border: 1px solid rgba(34, 197, 94, 0.25); + } + + /* Customer row */ + .customer-row { + display: flex; + align-items: center; + gap: var(--space-3); + } + + .customer-icon { + width: 34px; + height: 34px; + border-radius: var(--radius-full); + background-color: var(--color-primary-muted); + border: 1.5px solid var(--color-primary); + display: flex; + align-items: center; + justify-content: center; + color: var(--color-primary); + flex-shrink: 0; + } + + .customer-info { + flex: 1; + min-width: 0; + } + + .customer-info__name { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .customer-info__label { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .btn-change-customer { + padding: var(--space-1) var(--space-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-full); + background: transparent; + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-muted); + cursor: pointer; + transition: var(--transition-fast); + white-space: nowrap; + } + + .btn-change-customer:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + /* Cart items list */ + .cart-items { + flex: 1; + overflow-y: auto; + padding: var(--space-3) var(--space-4); + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .cart-items::-webkit-scrollbar { width: 4px; } + .cart-items::-webkit-scrollbar-track { background: transparent; } + .cart-items::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-thumb); + border-radius: var(--radius-full); + } + + .cart-empty { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 120px; + color: var(--color-text-muted); + font-size: var(--text-body-sm); + gap: var(--space-2); + opacity: 0.6; + } + + .cart-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-3) var(--space-2); + border-bottom: 1px solid var(--color-border); + transition: var(--transition-fast); + animation: item-slide-in 0.2s ease; + } + + @keyframes item-slide-in { + from { opacity: 0; transform: translateX(10px); } + to { opacity: 1; transform: translateX(0); } + } + + .cart-item:hover { + background-color: var(--color-primary-muted); + border-radius: var(--radius-sm); + } + + .cart-item:last-child { border-bottom: none; } + + .cart-item__qty-ctrl { + display: flex; + align-items: center; + gap: var(--space-1); + flex-shrink: 0; + } + + .qty-btn { + width: 26px; + height: 26px; + border: 1px solid var(--color-border-strong); + border-radius: var(--radius-sm); + background-color: var(--color-surface-3); + color: var(--color-text-primary); + font-size: 0.9rem; + font-weight: var(--font-weight-bold); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: var(--transition-fast); + line-height: 1; + } + + .qty-btn:hover { + border-color: var(--color-primary); + background-color: var(--color-primary); + color: var(--color-text-inverse); + } + + [data-theme="industrial"] .qty-btn:hover { color: #000; } + + .qty-display { + font-family: var(--font-mono); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-bold); + color: var(--color-text-primary); + min-width: 24px; + text-align: center; + } + + .cart-item__info { + flex: 1; + min-width: 0; + } + + .cart-item__name { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .cart-item__unit { + font-family: var(--font-mono); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .cart-item__total { + font-family: var(--font-mono); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-bold); + color: var(--color-text-primary); + text-align: right; + min-width: 72px; + } + + .cart-item__remove { + width: 24px; + height: 24px; + border: none; + border-radius: var(--radius-sm); + background: transparent; + color: var(--color-text-muted); + font-size: 1rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: var(--transition-fast); + flex-shrink: 0; + line-height: 1; + } + + .cart-item__remove:hover { + background-color: rgba(239, 68, 68, 0.15); + color: var(--color-error); + } + + /* Cart footer (totals + payment) */ + .cart-footer { + flex-shrink: 0; + border-top: 1px solid var(--color-border); + background-color: var(--color-surface-2); + } + + [data-theme="industrial"] .cart-footer { + background-color: #1a1a1a; + border-top-color: var(--color-primary-muted); + } + + .totals-block { + padding: var(--space-3) var(--space-5) var(--space-2); + } + + .totals-row { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--space-1) 0; + } + + .totals-row__label { + font-size: var(--text-body-sm); + color: var(--color-text-muted); + } + + .totals-row__value { + font-family: var(--font-mono); + font-size: var(--text-body-sm); + color: var(--color-text-secondary); + } + + .totals-row--total { + margin-top: var(--space-2); + padding-top: var(--space-2); + border-top: 1px solid var(--color-border); + } + + .totals-row--total .totals-row__label { + font-family: var(--font-heading); + font-size: var(--text-body-lg); + font-weight: var(--heading-weight-primary); + color: var(--color-text-primary); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .totals-row--total .totals-row__value { + font-family: var(--font-mono); + font-size: 1.5rem; + font-weight: var(--font-weight-bold); + color: var(--color-primary); + } + + /* Discount row */ + .discount-row { + display: flex; + align-items: center; + gap: var(--space-3); + padding: 0 var(--space-5) var(--space-3); + } + + .discount-label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + white-space: nowrap; + } + + .discount-input { + flex: 1; + height: 30px; + padding: 0 var(--space-3); + background-color: var(--color-bg-base); + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + font-family: var(--font-mono); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + outline: none; + transition: var(--transition-fast); + } + + .discount-input:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-focus); + } + + [data-theme="modern"] .discount-input { + border-radius: var(--radius-md); + } + + .discount-input::placeholder { color: var(--color-text-muted); } + + /* Payment method buttons */ + .payment-methods { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-2); + padding: 0 var(--space-5) var(--space-3); + } + + .pay-btn { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 3px; + padding: var(--space-2) var(--space-2); + border: 1.5px solid var(--color-border); + border-radius: var(--radius-sm); + background: transparent; + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + color: var(--color-text-muted); + cursor: pointer; + transition: var(--transition-fast); + } + + .pay-btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); + background-color: var(--color-primary-muted); + } + + .pay-btn.selected { + border-color: var(--color-primary); + background-color: var(--color-primary-muted); + color: var(--color-primary); + box-shadow: var(--shadow-accent); + } + + .pay-btn__icon { + font-size: 1.1rem; + } + + [data-theme="modern"] .pay-btn { + border-radius: var(--radius-md); + } + + [data-theme="industrial"] .pay-btn { + clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); + } + + /* Main CTA button */ + .btn-cobrar { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-3); + width: calc(100% - var(--space-10)); + margin: 0 var(--space-5) var(--space-3); + height: 56px; + background-color: var(--btn-primary-bg); + border: none; + border-radius: var(--radius-md); + font-family: var(--font-heading); + font-size: 1.2rem; + font-weight: var(--heading-weight-primary); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--btn-primary-text); + cursor: pointer; + transition: var(--transition-fast); + box-shadow: var(--shadow-md); + } + + .btn-cobrar:hover { + background-color: var(--btn-primary-bg-hover); + transform: translateY(-1px); + box-shadow: var(--shadow-lg); + } + + .btn-cobrar:active { + background-color: var(--btn-primary-bg-active); + transform: translateY(0); + } + + .btn-cobrar:disabled { + opacity: 0.4; + cursor: not-allowed; + transform: none; + } + + [data-theme="industrial"] .btn-cobrar { + clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); + } + + [data-theme="modern"] .btn-cobrar { + border-radius: var(--radius-lg); + } + + /* Secondary actions row */ + .secondary-actions { + display: flex; + gap: var(--space-2); + padding: 0 var(--space-5) var(--space-4); + } + + .btn-secondary-action { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-1); + height: 34px; + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + background: transparent; + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + color: var(--color-text-muted); + cursor: pointer; + transition: var(--transition-fast); + } + + .btn-secondary-action:hover { + border-color: var(--color-border-strong); + color: var(--color-text-secondary); + background-color: var(--color-surface-3); + } + + .btn-secondary-action.danger:hover { + border-color: var(--color-error); + color: var(--color-error); + background-color: rgba(239, 68, 68, 0.08); + } + + [data-theme="modern"] .btn-secondary-action { + border-radius: var(--radius-md); + } + + /* ===================================================================== + NUMPAD OVERLAY + ===================================================================== */ + + .numpad-overlay { + position: fixed; + inset: 0; + background-color: var(--overlay-backdrop); + display: flex; + align-items: flex-end; + justify-content: center; + z-index: var(--z-modal); + opacity: 0; + pointer-events: none; + transition: opacity var(--duration-normal) var(--ease-in-out); + } + + .numpad-overlay.visible { + opacity: 1; + pointer-events: all; + } + + .numpad-panel { + width: 360px; + background-color: var(--color-surface-2); + border: 1px solid var(--color-border-strong); + border-bottom: none; + border-radius: var(--radius-lg) var(--radius-lg) 0 0; + padding: var(--space-5); + transform: translateY(100%); + transition: transform var(--duration-normal) var(--ease-out); + } + + .numpad-overlay.visible .numpad-panel { + transform: translateY(0); + } + + [data-theme="industrial"] .numpad-panel { + border-radius: var(--radius-sm) var(--radius-sm) 0 0; + background-color: #1e1e1e; + border-color: var(--color-primary-muted); + } + + .numpad-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-4); + } + + .numpad-title { + font-family: var(--font-heading); + font-size: var(--text-h6); + font-weight: var(--heading-weight-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-widest); + color: var(--color-text-primary); + } + + .numpad-close { + width: 28px; + height: 28px; + border: 1px solid var(--color-border); + border-radius: var(--radius-full); + background: transparent; + color: var(--color-text-muted); + font-size: 1rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: var(--transition-fast); + } + + .numpad-close:hover { + border-color: var(--color-error); + color: var(--color-error); + } + + .numpad-display { + background-color: var(--color-bg-base); + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + padding: var(--space-3) var(--space-4); + font-family: var(--font-mono); + font-size: 1.8rem; + font-weight: var(--font-weight-bold); + color: var(--color-primary); + text-align: right; + margin-bottom: var(--space-4); + min-height: 60px; + display: flex; + align-items: center; + justify-content: flex-end; + letter-spacing: var(--tracking-wide); + } + + .numpad-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-2); + } + + .numpad-key { + height: 52px; + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + background-color: var(--color-surface-3); + font-family: var(--font-mono); + font-size: 1.1rem; + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + cursor: pointer; + transition: var(--transition-fast); + display: flex; + align-items: center; + justify-content: center; + } + + .numpad-key:hover { + background-color: var(--color-primary-muted); + border-color: var(--color-primary); + color: var(--color-primary); + } + + .numpad-key:active { + transform: scale(0.95); + } + + .numpad-key.key-0 { grid-column: span 2; } + + .numpad-key.key-clear { + background-color: rgba(239, 68, 68, 0.1); + border-color: rgba(239, 68, 68, 0.3); + color: var(--color-error); + } + + .numpad-key.key-enter { + background-color: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-inverse); + font-family: var(--font-heading); + font-size: 0.85rem; + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + } + + [data-theme="industrial"] .numpad-key.key-enter { color: #000; } + + .numpad-key.key-enter:hover { + background-color: var(--color-primary-hover); + } + + [data-theme="modern"] .numpad-key { + border-radius: var(--radius-md); + } + + /* ===================================================================== + TOAST NOTIFICATION + ===================================================================== */ + + .toast-container { + position: fixed; + bottom: var(--space-6); + left: 50%; + transform: translateX(-50%); + z-index: var(--z-toast); + display: flex; + flex-direction: column; + gap: var(--space-2); + pointer-events: none; + } + + .toast { + padding: var(--space-3) var(--space-5); + background-color: var(--color-surface-3); + border: 1px solid var(--color-border); + border-left: 3px solid var(--color-primary); + border-radius: var(--radius-md); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + box-shadow: var(--shadow-lg); + white-space: nowrap; + animation: toast-in 0.25s ease, toast-out 0.3s ease 1.7s forwards; + } + + @keyframes toast-in { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } + } + + @keyframes toast-out { + from { opacity: 1; transform: translateY(0); } + to { opacity: 0; transform: translateY(-6px); } + } + + /* ===================================================================== + RESPONSIVE — tablet/small desktop + ===================================================================== */ + + @media (max-width: 900px) { + .pos-main { + flex-direction: column; + } + + .panel-products, + .panel-cart { + width: 100%; + min-width: 0; + } + + .panel-products { + border-right: none; + border-bottom: 1px solid var(--color-border); + max-height: 55%; + } + + .panel-cart { + max-height: 45%; + } + + .product-grid { + grid-template-columns: repeat(2, 1fr); + } + + .status-bar__center { display: none; } + } + + @media (max-width: 600px) { + .product-grid { + grid-template-columns: repeat(2, 1fr); + } + + .payment-methods { + grid-template-columns: repeat(3, 1fr); + } + + .status-bar { padding: 0 var(--space-3); } + .search-row { padding: var(--space-3); } + .categories-row { padding: var(--space-2) var(--space-3); } + } + + /* ===================================================================== + UTILITY + ===================================================================== */ + + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; + } + \ No newline at end of file diff --git a/pos/static/css/tokens.css b/pos/static/css/tokens.css new file mode 100644 index 0000000..cad8bfb --- /dev/null +++ b/pos/static/css/tokens.css @@ -0,0 +1,564 @@ +/* ========================================================================== + NEXUS AUTOPARTS — Design Tokens + POS System for Auto Parts Stores + Version: 1.0.0 + ========================================================================== + Themes: + - [data-theme="industrial"] — Industrial Robusto (Dark) + - [data-theme="modern"] — Técnico Moderno (Light) + ========================================================================== */ + +/* -------------------------------------------------------------------------- + GOOGLE FONTS IMPORTS + -------------------------------------------------------------------------- */ + +@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&family=Barlow+Condensed:wght@600;800&family=Poppins:wght@300;400;600;700&display=swap'); + + +/* ========================================================================== + GLOBAL TOKENS — Theme-independent, shared across both themes + ========================================================================== */ + +:root { + + /* ------------------------------------------------------------------------ + SEMANTIC COLORS — Status / Feedback (shared) + ------------------------------------------------------------------------ */ + + --color-success: #22c55e; + --color-success-light: #bbf7d0; + --color-success-dark: #15803d; + + --color-warning: #eab308; + --color-warning-light: #fef08a; + --color-warning-dark: #a16207; + + --color-error: #ef4444; + --color-error-light: #fecaca; + --color-error-dark: #b91c1c; + + /* ------------------------------------------------------------------------ + NEUTRAL SCALE — Grey ramp (50–900) + ------------------------------------------------------------------------ */ + + --color-neutral-50: #fafafa; + --color-neutral-100: #f5f5f5; + --color-neutral-200: #e5e5e5; + --color-neutral-300: #d4d4d4; + --color-neutral-400: #a3a3a3; + --color-neutral-500: #737373; + --color-neutral-600: #525252; + --color-neutral-700: #404040; + --color-neutral-800: #262626; + --color-neutral-900: #171717; + + /* ------------------------------------------------------------------------ + SPACING — 4px base grid + ------------------------------------------------------------------------ */ + /* --space-N = N × 4px */ + + --space-1: 4px; /* 4px */ + --space-2: 8px; /* 8px */ + --space-3: 12px; /* 12px */ + --space-4: 16px; /* 16px */ + --space-5: 20px; /* 20px */ + --space-6: 24px; /* 24px */ + --space-7: 28px; /* 28px */ + --space-8: 32px; /* 32px */ + --space-9: 36px; /* 36px */ + --space-10: 40px; /* 40px */ + --space-11: 44px; /* 44px */ + --space-12: 48px; /* 48px */ + --space-14: 56px; /* 56px */ + --space-16: 64px; /* 64px */ + + /* ------------------------------------------------------------------------ + BORDER RADIUS + ------------------------------------------------------------------------ */ + + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-xl: 20px; + --radius-full: 9999px; + + /* ------------------------------------------------------------------------ + TRANSITIONS + ------------------------------------------------------------------------ */ + + --transition-fast: all 0.10s ease; + --transition-normal: all 0.20s ease; + --transition-slow: all 0.40s ease; + + /* Easing functions for fine-grained control */ + --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); + --ease-out: cubic-bezier(0, 0, 0.2, 1); + --ease-in: cubic-bezier(0.4, 0, 1, 1); + + --duration-fast: 100ms; + --duration-normal: 200ms; + --duration-slow: 400ms; + + /* ------------------------------------------------------------------------ + Z-INDEX SCALE + ------------------------------------------------------------------------ */ + + --z-dropdown: 1000; + --z-sticky: 1020; + --z-modal: 1050; + --z-toast: 1080; + + /* ------------------------------------------------------------------------ + BREAKPOINTS — Reference only (use in media queries, not calc()) + sm: 640px + md: 768px + lg: 1024px + xl: 1280px + ------------------------------------------------------------------------ */ + +} + + +/* ========================================================================== + THEME A — Industrial Robusto (Dark) + Usage: or + Style: Industrial, robust, high-contrast amber accents, clip-path diagonals + ========================================================================== */ + +[data-theme="industrial"] { + + /* ------------------------------------------------------------------------ + PRIMITIVE COLORS + ------------------------------------------------------------------------ */ + + --color-primary: #F5A623; /* Amber gold — main brand accent */ + --color-primary-hover: #e8951a; /* Darker amber on hover */ + --color-primary-active: #d4850f; /* Pressed state */ + --color-primary-muted: rgba(245, 166, 35, 0.15); /* Subtle tint */ + + --color-secondary: #333333; /* Mid-dark border / secondary bg */ + --color-secondary-hover: #444444; + + --color-accent: #F5A623; /* Same as primary in this theme */ + + /* ------------------------------------------------------------------------ + BACKGROUNDS + ------------------------------------------------------------------------ */ + + --color-bg-base: #0d0d0d; /* Page / app shell background */ + --color-bg-elevated: #1a1a1a; /* Cards, panels, sidebars */ + --color-bg-overlay: #252525; /* Modals, dropdowns, tooltips */ + + /* Surface levels (for layered UI) */ + --color-surface-1: #1a1a1a; /* Lowest raised surface */ + --color-surface-2: #252525; /* Mid-level surface */ + --color-surface-3: #303030; /* Highest raised surface */ + + /* ------------------------------------------------------------------------ + TEXT + ------------------------------------------------------------------------ */ + + --color-text-primary: #FFFFFF; + --color-text-secondary: #CCCCCC; + --color-text-muted: #888888; + --color-text-disabled: #555555; + --color-text-inverse: #000000; /* Text on amber background */ + --color-text-accent: #F5A623; + + /* ------------------------------------------------------------------------ + BORDERS + ------------------------------------------------------------------------ */ + + --color-border: #333333; + --color-border-strong: #555555; + --color-border-accent: #F5A623; + --color-border-focus: #F5A623; + + /* ------------------------------------------------------------------------ + BUTTONS + ------------------------------------------------------------------------ */ + + /* Primary button */ + --btn-primary-bg: #F5A623; + --btn-primary-bg-hover: #e8951a; + --btn-primary-bg-active: #d4850f; + --btn-primary-text: #000000; + --btn-primary-border: transparent; + + /* Secondary button */ + --btn-secondary-bg: transparent; + --btn-secondary-bg-hover: rgba(245, 166, 35, 0.10); + --btn-secondary-text: #F5A623; + --btn-secondary-border: #F5A623; + + /* Ghost / Danger */ + --btn-ghost-bg: transparent; + --btn-ghost-text: #CCCCCC; + --btn-ghost-border: #333333; + + --btn-danger-bg: #ef4444; + --btn-danger-text: #FFFFFF; + + /* ------------------------------------------------------------------------ + TYPOGRAPHY + ------------------------------------------------------------------------ */ + + /* Font families */ + --font-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif; + --font-body: 'Barlow', 'Arial', sans-serif; + --font-mono: 'Courier New', 'Consolas', monospace; /* prices / SKUs */ + + /* Font weights */ + --font-weight-light: 300; /* n/a in Barlow — falls to 400 */ + --font-weight-regular: 400; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --font-weight-extrabold: 800; + + /* Heading weights (Barlow Condensed) */ + --heading-weight-primary: 800; + --heading-weight-secondary: 600; + + /* ------------------------------------------------------------------------ + SHADOWS / ELEVATION + Tinted with amber to feel cohesive with the theme + ------------------------------------------------------------------------ */ + + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.60), + 0 1px 2px rgba(0, 0, 0, 0.40); + + --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.60), + 0 2px 4px rgba(0, 0, 0, 0.40); + + --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.70), + 0 4px 6px rgba(0, 0, 0, 0.50); + + --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.80), + 0 10px 10px rgba(0, 0, 0, 0.50); + + /* Accent glow — use on focused/highlighted elements */ + --shadow-accent: 0 0 0 3px rgba(245, 166, 35, 0.40); + --shadow-focus: 0 0 0 3px rgba(245, 166, 35, 0.50); + + /* ------------------------------------------------------------------------ + MISC UI + ------------------------------------------------------------------------ */ + + --scrollbar-track: #1a1a1a; + --scrollbar-thumb: #444444; + --scrollbar-thumb-hover: #F5A623; + + --overlay-backdrop: rgba(0, 0, 0, 0.75); + + /* Industrial clip-path angle (use in clip-path: polygon(...) utilities) */ + --clip-diagonal-angle: 6deg; + +} + + +/* ========================================================================== + THEME B — Técnico Moderno (Light) + Usage: or + Style: Clean, modern, Poppins typography, subtle dot-grid background + ========================================================================== */ + +[data-theme="modern"] { + + /* ------------------------------------------------------------------------ + PRIMITIVE COLORS + ------------------------------------------------------------------------ */ + + --color-primary: #FF6B35; /* Orange — main brand accent */ + --color-primary-hover: #f05a22; /* Darker on hover */ + --color-primary-active: #dc4a12; /* Pressed state */ + --color-primary-muted: rgba(255, 107, 53, 0.10); /* Subtle tint */ + + --color-secondary: #1a1a2e; /* Deep navy — used for strong text */ + --color-secondary-hover: #252545; + + --color-accent: #FF6B35; /* Same as primary in this theme */ + + /* ------------------------------------------------------------------------ + BACKGROUNDS + ------------------------------------------------------------------------ */ + + --color-bg-base: #FFFFFF; /* Page / app shell background */ + --color-bg-elevated: #F8F9FF; /* Cards, panels — very subtle blue */ + --color-bg-overlay: #FFFFFF; /* Modals, dropdowns */ + + /* Surface levels */ + --color-surface-1: #F8F9FF; + --color-surface-2: #F0F2FF; + --color-surface-3: #E8EBFF; + + /* Dot-grid background pattern (apply via background-image on body/shell) */ + /* background-image: radial-gradient(circle, var(--dot-grid-color) 1px, transparent 1px); */ + /* background-size: var(--dot-grid-size) var(--dot-grid-size); */ + --dot-grid-color: rgba(26, 26, 46, 0.07); + --dot-grid-size: 24px; + + /* ------------------------------------------------------------------------ + TEXT + ------------------------------------------------------------------------ */ + + --color-text-primary: #1a1a2e; + --color-text-secondary: #4a4a6a; + --color-text-muted: #8080a0; + --color-text-disabled: #b0b0c8; + --color-text-inverse: #FFFFFF; /* Text on orange background */ + --color-text-accent: #FF6B35; + + /* ------------------------------------------------------------------------ + BORDERS + ------------------------------------------------------------------------ */ + + --color-border: #e2e4f0; + --color-border-strong: #c8cadc; + --color-border-accent: #FF6B35; + --color-border-focus: #FF6B35; + + /* ------------------------------------------------------------------------ + BUTTONS + ------------------------------------------------------------------------ */ + + /* Primary button */ + --btn-primary-bg: #FF6B35; + --btn-primary-bg-hover: #f05a22; + --btn-primary-bg-active: #dc4a12; + --btn-primary-text: #FFFFFF; + --btn-primary-border: transparent; + + /* Secondary button */ + --btn-secondary-bg: transparent; + --btn-secondary-bg-hover: rgba(255, 107, 53, 0.08); + --btn-secondary-text: #FF6B35; + --btn-secondary-border: #FF6B35; + + /* Ghost / Danger */ + --btn-ghost-bg: transparent; + --btn-ghost-text: #4a4a6a; + --btn-ghost-border: #e2e4f0; + + --btn-danger-bg: #ef4444; + --btn-danger-text: #FFFFFF; + + /* ------------------------------------------------------------------------ + TYPOGRAPHY + ------------------------------------------------------------------------ */ + + /* Font families */ + --font-heading: 'Poppins', 'Segoe UI', sans-serif; + --font-body: 'Poppins', 'Segoe UI', sans-serif; + --font-mono: 'Courier New', 'Consolas', monospace; /* prices / SKUs */ + + /* Font weights */ + --font-weight-light: 300; + --font-weight-regular: 400; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --font-weight-extrabold: 800; /* falls to 700 in Poppins */ + + /* Heading weights (Poppins) */ + --heading-weight-primary: 700; + --heading-weight-secondary: 600; + + /* ------------------------------------------------------------------------ + SHADOWS / ELEVATION + Softer, cooler tints for the light theme + ------------------------------------------------------------------------ */ + + --shadow-sm: 0 1px 3px rgba(26, 26, 46, 0.08), + 0 1px 2px rgba(26, 26, 46, 0.05); + + --shadow-md: 0 4px 6px rgba(26, 26, 46, 0.08), + 0 2px 4px rgba(26, 26, 46, 0.05); + + --shadow-lg: 0 10px 15px rgba(26, 26, 46, 0.10), + 0 4px 6px rgba(26, 26, 46, 0.06); + + --shadow-xl: 0 20px 25px rgba(26, 26, 46, 0.12), + 0 10px 10px rgba(26, 26, 46, 0.06); + + /* Accent glow — use on focused/highlighted elements */ + --shadow-accent: 0 0 0 3px rgba(255, 107, 53, 0.25); + --shadow-focus: 0 0 0 3px rgba(255, 107, 53, 0.30); + + /* ------------------------------------------------------------------------ + MISC UI + ------------------------------------------------------------------------ */ + + --scrollbar-track: #F8F9FF; + --scrollbar-thumb: #c8cadc; + --scrollbar-thumb-hover: #FF6B35; + + --overlay-backdrop: rgba(26, 26, 46, 0.50); + + /* No diagonal clip in modern theme — set to 0 for override-safe utilities */ + --clip-diagonal-angle: 0deg; + +} + + +/* ========================================================================== + TYPOGRAPHY SCALE — Token definitions + Resolved at theme level because font families differ between themes. + These tokens map to semantic roles and should be consumed directly. + ========================================================================== */ + +/* Shared scale values (dimensionless, theme-independent) */ +:root { + + /* --- Type scale (font-size) --- */ + --text-h1: clamp(2.25rem, 5vw, 3.5rem); /* 36px → 56px */ + --text-h2: clamp(1.875rem, 4vw, 2.75rem); /* 30px → 44px */ + --text-h3: clamp(1.5rem, 3vw, 2.125rem); /* 24px → 34px */ + --text-h4: clamp(1.25rem, 2vw, 1.625rem); /* 20px → 26px */ + --text-h5: 1.125rem; /* 18px */ + --text-h6: 1rem; /* 16px */ + + --text-body-lg: 1.125rem; /* 18px */ + --text-body: 1rem; /* 16px */ + --text-body-sm: 0.875rem; /* 14px */ + --text-caption: 0.75rem; /* 12px */ + --text-label: 0.8125rem; /* 13px */ + --text-mono: 1rem; /* 16px — prices, SKUs */ + + /* --- Line heights --- */ + --leading-h1: 1.10; + --leading-h2: 1.12; + --leading-h3: 1.15; + --leading-h4: 1.20; + --leading-h5: 1.25; + --leading-h6: 1.30; + + --leading-body-lg: 1.65; + --leading-body: 1.60; + --leading-body-sm: 1.55; + --leading-caption: 1.45; + --leading-label: 1.40; + --leading-mono: 1.50; + + /* --- Letter spacing --- */ + --tracking-tight: -0.03em; + --tracking-snug: -0.01em; + --tracking-normal: 0em; + --tracking-wide: 0.03em; + --tracking-wider: 0.06em; + --tracking-widest: 0.12em; /* Use for ALL-CAPS labels / badges */ + +} + +/* Heading letter-spacing per theme */ +[data-theme="industrial"] { + --heading-tracking-h1: -0.02em; + --heading-tracking-h2: -0.02em; + --heading-tracking-h3: -0.01em; + --heading-tracking-h4: 0em; + --heading-tracking-h5: 0.02em; + --heading-tracking-h6: 0.04em; +} + +[data-theme="modern"] { + --heading-tracking-h1: -0.03em; + --heading-tracking-h2: -0.02em; + --heading-tracking-h3: -0.01em; + --heading-tracking-h4: 0em; + --heading-tracking-h5: 0em; + --heading-tracking-h6: 0.01em; +} + + +/* ========================================================================== + COMPONENT SHORTHAND TOKENS + Convenience aliases that combine multiple primitives. Components should + reference these rather than the primitives above. + ========================================================================== */ + +:root { + + /* --- Input / form fields --- */ + /* These are intentionally left as CSS variable references so they resolve + correctly within whichever theme is active at runtime. */ + + /* (No :root overrides needed — components consume --color-* directly.) */ + + /* --- Focus ring --- */ + --focus-ring: 0 0 0 3px var(--shadow-focus, rgba(245,166,35,0.40)); + + /* --- Content max widths --- */ + --content-xs: 480px; + --content-sm: 640px; + --content-md: 768px; + --content-lg: 1024px; + --content-xl: 1280px; + --content-full: 100%; + +} + + +/* ========================================================================== + UTILITY — Scrollbar styles (opt-in via class) + ========================================================================== */ + +.themed-scrollbar { + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); +} + +.themed-scrollbar::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +.themed-scrollbar::-webkit-scrollbar-track { + background: var(--scrollbar-track); +} + +.themed-scrollbar::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-thumb); + border-radius: var(--radius-full); + border: 2px solid var(--scrollbar-track); +} + +.themed-scrollbar::-webkit-scrollbar-thumb:hover { + background-color: var(--scrollbar-thumb-hover); +} + + +/* ========================================================================== + UTILITY — Dot-grid background (Theme B helper) + Apply class .bg-dot-grid to body or layout shell when using modern theme. + ========================================================================== */ + +[data-theme="modern"] .bg-dot-grid { + background-color: var(--color-bg-base); + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); +} + + +/* ========================================================================== + UTILITY — Industrial diagonal clip helpers (Theme A) + ========================================================================== */ + +[data-theme="industrial"] .clip-top-right { + clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); +} + +[data-theme="industrial"] .clip-bottom-left { + clip-path: polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px)); +} + +[data-theme="industrial"] .clip-corner { + clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); +} + + +/* ========================================================================== + END OF TOKENS FILE + nexus-autoparts-design/tokens/tokens.css + ========================================================================== */ diff --git a/pos/templates/catalog.html b/pos/templates/catalog.html index 7d36555..bd3b9e3 100644 --- a/pos/templates/catalog.html +++ b/pos/templates/catalog.html @@ -1,91 +1,2073 @@ - - + - - - Catalogo - Nexus POS - - + + + Catálogo — Nexus Autoparts POS + + + + -
-

Catalogo

-
- + + + + + + + + +
+ + +
-
- + -
-
-
- + +
-
-
+
+ + +
+
+ + +
+
+ + +
+
- -
-
-

Carrito

- -
-
-
Carrito vacio
-
-
- Subtotal$0.00 -
-
- IVA$0.00 -
-
- Total$0.00 -
- - -
+ +
+
+ +
+ + +
+
+
+ + +
+
+ + + +
+
+ 1,247 partes encontradas + para Toyota Corolla 2018 +
+
+ Filtrar: + + + + + + + + +
+
+ + +
+
+ Ordenar por: + +
+
+ + +
+
+ + +
+ + +
+
+ + +
En stock
+
+
+
Frenos
+
Pastillas de Freno Delanteras Cerámicas
+
OEM: 04465-02260
+
+ Akebono + + Japón +
+
+ + Compatible con: Toyota Corolla 2018–2022 +
+
+
+
+
$485.00
+
MXN / juego
+
+ +
+
+ + +
+
+ + +
En stock
+
+
+
Suspensión
+
Amortiguador Delantero Gas KYB Excel-G
+
OEM: 339175
+
+ KYB + + Japón +
+
+ + Compatible con: Toyota Corolla 2014–2019 +
+
+
+
+
$1,250.00
+
MXN / pieza
+
+ +
+
+ + +
+
+ + +
Últimas 3
+
+
+
Eléctrico
+
Sensor de Oxígeno Aguas Arriba Denso
+
OEM: 234-4209
+
+ Denso + + Japón +
+
+ + Compatible con: Toyota Corolla 2009–2019 +
+
+
+
+
$890.00
+
MXN / pieza
+
+ +
+
+ + +
+
+ + +
En stock
+
+
+
Motor
+
Filtro de Aceite Motor Toyota Original
+
OEM: 90915-YZZE1
+
+ Toyota Genuine + + OEM +
+
+ + Compatible con: Toyota Corolla 2014–2024 +
+
+
+
+
$145.00
+
MXN / pieza
+
+ +
+
+ + +
+
+ + +
En stock
+
+
+
Motor
+
Kit Banda de Distribución con Bomba de Agua Gates
+
OEM: TCK328B
+
+ Gates + + EUA +
+
+ + Compatible con: Toyota Corolla 2009–2020 +
+
+
+
+
$2,380.00
+
MXN / kit
+
+ +
+
+ + +
+
+ + +
Agotado
+
+
+
Frenos
+
Disco de Freno Ventilado Delantero Brembo
+
OEM: 09.9807.11
+
+ Brembo + + Italia +
+
+ + Compatible con: Toyota Corolla 2014–2022 +
+
+
+
+
$1,940.00
+
MXN / pieza
+
+ +
+
+ +
+ + + + + +
+ + + + + + + + + + - diff --git a/pos/templates/login.html b/pos/templates/login.html index e592fa9..70ef065 100644 --- a/pos/templates/login.html +++ b/pos/templates/login.html @@ -1,53 +1,1387 @@ - - + - - - Nexus POS — Login - - + + + Nexus Autoparts — Iniciar Sesión + + -