345 lines
8.2 KiB
CSS
345 lines
8.2 KiB
CSS
/* ==================== 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;
|
|
}
|
|
}
|