189 lines
4.7 KiB
CSS
189 lines
4.7 KiB
CSS
/* ==================== MOBILE STYLES (Phones) ==================== */
|
|
/* Viewport: 360-767px | Target: min-width: 360px and max-width: 767px */
|
|
/* This file contains overrides for mobile phones (iPhone, Android, etc.) */
|
|
|
|
@media screen and (min-width: 360px) and (max-width: 767px) {
|
|
|
|
/* ---------------------------------------------------------
|
|
Base Typography
|
|
--------------------------------------------------------- */
|
|
html {
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* ---------------------------------------------------------
|
|
Navbar
|
|
--------------------------------------------------------- */
|
|
.nav-content {
|
|
flex-direction: row;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
/* ---------------------------------------------------------
|
|
Forms
|
|
--------------------------------------------------------- */
|
|
.form-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/* ---------------------------------------------------------
|
|
Dashboard
|
|
--------------------------------------------------------- */
|
|
.dashboard-header {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.sessions-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.session-stats {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.baseline-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/* ---------------------------------------------------------
|
|
Scanning Interface
|
|
--------------------------------------------------------- */
|
|
.scan-input {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.location-name {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
/* ---------------------------------------------------------
|
|
Modals
|
|
--------------------------------------------------------- */
|
|
.modal-content {
|
|
padding: var(--space-md);
|
|
margin: var(--space-xs);
|
|
}
|
|
|
|
.modal-header-bar {
|
|
padding: var(--space-md) 0;
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.modal-large,
|
|
.modal-xl {
|
|
width: 95%;
|
|
max-width: 95%;
|
|
margin: var(--space-xs);
|
|
}
|
|
|
|
/* ---------------------------------------------------------
|
|
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;
|
|
}
|
|
|
|
/* ---------------------------------------------------------
|
|
Forms (Mobile)
|
|
--------------------------------------------------------- */
|
|
.form-group {
|
|
margin-bottom: var(--space-sm);
|
|
}
|
|
|
|
/* ---------------------------------------------------------
|
|
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: 270px;
|
|
}
|
|
|
|
.scroll-to-bottom {
|
|
right: 10px;
|
|
bottom: 170px;
|
|
}
|
|
|
|
}
|