v0.9.0 - CSS refactor: split into device files, scanner UI improvements, scroll buttons
This commit is contained in:
Javier
344
static/css/scanner.css
Normal file
344
static/css/scanner.css
Normal file
@@ -0,0 +1,344 @@
|
||||
/* ==================== SCANNER STYLES (MC9300) ==================== */
|
||||
/* Viewport: 320 x 405 | Target: max-width: 359px */
|
||||
/* This file contains overrides for Zebra MC9300 handheld scanners */
|
||||
|
||||
@media screen and (max-width: 359px) {
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
CSS Variables - Tighter spacing for small screen
|
||||
--------------------------------------------------------- */
|
||||
:root {
|
||||
--space-2xl: 0.8rem;
|
||||
--space-xl: 0.6rem;
|
||||
--space-lg: 0.4rem;
|
||||
--space-md: 0.3rem;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
Navbar - Minimal, compact
|
||||
--------------------------------------------------------- */
|
||||
.navbar {
|
||||
padding: 4px 10px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.user-badge,
|
||||
.role-pill,
|
||||
.breadcrumb,
|
||||
.settings-dropdown {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-logout {
|
||||
padding: 2px 8px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
Page Header
|
||||
--------------------------------------------------------- */
|
||||
.page-title {
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 5px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
Location Header - Compact single line top
|
||||
--------------------------------------------------------- */
|
||||
.location-header {
|
||||
padding: 6px 10px;
|
||||
margin-bottom: 6px;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.location-info {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 0 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.location-label {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
font-size: 0.6rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.location-stats {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
justify-content: flex-end;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.location-name {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
font-size: 1.4rem;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.stat-pill {
|
||||
padding: 2px 6px;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
Scan Input Card - Compact
|
||||
--------------------------------------------------------- */
|
||||
.scan-card {
|
||||
padding: 8px;
|
||||
margin-bottom: 6px;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.scan-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scan-input {
|
||||
padding: 8px;
|
||||
font-size: 1rem;
|
||||
height: 38px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
Scanned/Expected Lists
|
||||
--------------------------------------------------------- */
|
||||
.scans-section,
|
||||
.expected-section {
|
||||
padding: 5px;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.scans-header {
|
||||
margin-bottom: 4px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.scans-title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
Lists - No scroll boxes, natural page flow
|
||||
--------------------------------------------------------- */
|
||||
.scans-grid {
|
||||
max-height: none;
|
||||
overflow-y: visible;
|
||||
gap: normal;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
List Rows - 2-row layout for scanner
|
||||
Row 1: Lot number (full width)
|
||||
Row 2: Item + Weight
|
||||
--------------------------------------------------------- */
|
||||
.scan-row,
|
||||
.expected-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 2px 8px;
|
||||
padding: 6px 8px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* Lot spans full width on row 1 */
|
||||
.scan-row-lot {
|
||||
grid-column: 1 / -1;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Item on row 2, left */
|
||||
.scan-row-item {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
/* Weight on row 2, right */
|
||||
.scan-row-weight {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Hide status column on scanner */
|
||||
.scan-row-status {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
Row Status Colors (more visible without status badge)
|
||||
--------------------------------------------------------- */
|
||||
.scan-row-match {
|
||||
background: rgba(0, 255, 136, 0.15);
|
||||
}
|
||||
|
||||
.scan-row-wrong_location {
|
||||
background: rgba(255, 170, 0, 0.15);
|
||||
}
|
||||
|
||||
.scan-row-ghost_lot {
|
||||
background: rgba(179, 102, 255, 0.15);
|
||||
}
|
||||
|
||||
.scan-row-weight_discrepancy {
|
||||
background: rgba(255, 152, 0, 0.25);
|
||||
}
|
||||
|
||||
.scan-row-duplicate-01,
|
||||
.scan-row-duplicate-04 {
|
||||
background: rgba(0, 163, 255, 0.15);
|
||||
}
|
||||
|
||||
.scan-row-duplicate-03 {
|
||||
background: rgba(255, 140, 0, 0.15);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
Action Buttons (Back / Finish)
|
||||
--------------------------------------------------------- */
|
||||
.finish-section {
|
||||
position: relative; /* Not fixed/floating */
|
||||
bottom: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.action-buttons-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-buttons-row .btn {
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
font-size: 0.85rem;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: var(--color-success);
|
||||
box-shadow: none; /* Remove glow for performance */
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
Detail Sections (Scan Detail Modal)
|
||||
--------------------------------------------------------- */
|
||||
.detail-section {
|
||||
padding: var(--space-md) 0;
|
||||
}
|
||||
|
||||
.detail-section-title {
|
||||
font-size: 1rem;
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-sm) 0;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
flex: none;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.detail-lot {
|
||||
font-size: 0.95rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.detail-input {
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.detail-form {
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.detail-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-md) 0 0 0;
|
||||
}
|
||||
|
||||
.detail-actions .btn {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
Scroll to Top or Bottom Buttonss
|
||||
--------------------------------------------------------- */
|
||||
/* ---------------------------------------------------------
|
||||
Scroll Buttons - Floating, semi-transparent
|
||||
--------------------------------------------------------- */
|
||||
.scroll-to-top,
|
||||
.scroll-to-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: rgba(0, 212, 255, 0.3);
|
||||
color: var(--color-text);
|
||||
border: 1px solid rgba(0, 212, 255, 0.4);
|
||||
border-radius: 50%;
|
||||
font-size: 1.3rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
z-index: 50;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.scroll-to-top:active,
|
||||
.scroll-to-bottom:active {
|
||||
background: rgba(0, 212, 255, 0.6);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.scroll-to-top {
|
||||
right: 10px;
|
||||
bottom: 150px;
|
||||
}
|
||||
|
||||
.scroll-to-bottom {
|
||||
right: 10px;
|
||||
bottom: 70px;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
Footer - Hidden on scanner
|
||||
--------------------------------------------------------- */
|
||||
.footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user