169 lines
3.1 KiB
CSS
169 lines
3.1 KiB
CSS
/**
|
|
* Warehouse Stocktake PWA - App-Specific Styles
|
|
*/
|
|
|
|
/* QR Scanner Container */
|
|
#qr-reader {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
border-radius: 0.5rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#qr-reader video {
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
/* Hide default html5-qrcode UI elements we don't need */
|
|
#qr-reader__status_span,
|
|
#qr-reader__dashboard_section_csr,
|
|
#qr-reader__dashboard_section_swaplink {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Scanner frame styling */
|
|
#qr-reader__scan_region {
|
|
background: transparent !important;
|
|
}
|
|
|
|
#qr-reader__scan_region img {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* Keypad styling */
|
|
.keypad-button {
|
|
min-height: 60px;
|
|
}
|
|
|
|
/* Numeric display */
|
|
.quantity-display {
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Tab indicator animation */
|
|
.tab-indicator {
|
|
transition: transform 0.3s ease, width 0.3s ease;
|
|
}
|
|
|
|
/* Card hover effect */
|
|
.stocktake-card:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
/* Search results scrolling */
|
|
.search-results {
|
|
max-height: calc(100vh - 280px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* History list */
|
|
.history-list {
|
|
max-height: calc(100vh - 200px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Already scanned badge pulse */
|
|
@keyframes pulse-amber {
|
|
0%, 100% {
|
|
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
|
|
}
|
|
}
|
|
|
|
.already-scanned-pulse {
|
|
animation: pulse-amber 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Toast slide up animation (complementing base.css) */
|
|
.toast-enter-active {
|
|
animation: toast-slide-up 0.3s ease-out;
|
|
}
|
|
|
|
.toast-leave-active {
|
|
animation: toast-slide-down 0.3s ease-in;
|
|
}
|
|
|
|
@keyframes toast-slide-up {
|
|
from {
|
|
transform: translateY(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes toast-slide-down {
|
|
from {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
transform: translateY(100%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Settings panel slide */
|
|
.settings-panel {
|
|
transform: translateX(100%);
|
|
transition: transform 0.3s ease-out;
|
|
}
|
|
|
|
.settings-panel.open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* Loading spinner */
|
|
.spinner {
|
|
border: 3px solid rgba(0, 83, 132, 0.1);
|
|
border-top-color: #005384;
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/* Dark mode specific overrides */
|
|
.dark .spinner {
|
|
border-color: rgba(250, 196, 27, 0.1);
|
|
border-top-color: #fac41b;
|
|
}
|
|
|
|
/* Scan success flash */
|
|
@keyframes scan-flash {
|
|
0% {
|
|
background-color: rgba(34, 197, 94, 0.3);
|
|
}
|
|
100% {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.scan-success-flash {
|
|
animation: scan-flash 0.5s ease-out;
|
|
}
|
|
|
|
/* Custom scrollbar for webkit browsers */
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|