initial mobile layouts
This commit is contained in:
cottongin
parent
539f55b6e9
commit
ef9bb85d65
@ -1397,3 +1397,595 @@ simple-boost {
|
||||
/* ========================================
|
||||
VERSION BUTTON & MODAL STYLES - END
|
||||
======================================== */
|
||||
|
||||
/* ========================================
|
||||
MOBILE RESPONSIVE STYLES - START
|
||||
Supports portrait (rotated) and landscape modes
|
||||
======================================== */
|
||||
|
||||
/* ----------------------------------------
|
||||
MOBILE LANDSCAPE MODE
|
||||
For phones held sideways (short height, moderate width)
|
||||
Scale player proportionally to fit viewport
|
||||
---------------------------------------- */
|
||||
@media (max-width: 900px) and (max-height: 500px) {
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.player {
|
||||
/* Scale entire player to fit viewport height */
|
||||
transform: perspective(1000px) rotateX(1deg) scale(0.85);
|
||||
transform-origin: center center;
|
||||
width: calc(100vw - 10px);
|
||||
max-width: 700px; /* Slightly larger since we're scaling down */
|
||||
padding: 50px 20px 20px 20px;
|
||||
}
|
||||
|
||||
/* Scale display area */
|
||||
.display {
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.display-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
font-size: 18px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
/* Scale cassette */
|
||||
.cassette {
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.cassette-label {
|
||||
padding: 8px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* Scale tape window and reels */
|
||||
.tape-window {
|
||||
width: 280px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.reel {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.reel-left {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.reel-right {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.reel-inner {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
margin-left: -22.5px;
|
||||
margin-top: -22.5px;
|
||||
}
|
||||
|
||||
/* Scale control buttons - maintain touch-friendly size */
|
||||
.controls {
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
/* Scale button icons */
|
||||
.btn-prev::before {
|
||||
border-right-width: 10px;
|
||||
border-top-width: 6px;
|
||||
border-bottom-width: 6px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.btn-prev::after {
|
||||
height: 12px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.btn-play::before {
|
||||
border-left-width: 16px;
|
||||
border-top-width: 10px;
|
||||
border-bottom-width: 10px;
|
||||
}
|
||||
|
||||
.btn-pause::before {
|
||||
width: 16px;
|
||||
height: 20px;
|
||||
border-left-width: 5px;
|
||||
border-right-width: 5px;
|
||||
}
|
||||
|
||||
.btn-stop::before {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.btn-next::before {
|
||||
border-left-width: 10px;
|
||||
border-top-width: 6px;
|
||||
border-bottom-width: 6px;
|
||||
margin-left: -6px;
|
||||
}
|
||||
|
||||
.btn-next::after {
|
||||
height: 12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* Scale volume control */
|
||||
.volume-control {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.volume-label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* Scale top buttons */
|
||||
.eject-btn,
|
||||
.lightning-btn {
|
||||
top: 10px;
|
||||
width: 40px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.eject-btn {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.lightning-btn {
|
||||
right: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.eject-btn::before {
|
||||
border-left-width: 6px;
|
||||
border-right-width: 6px;
|
||||
border-bottom-width: 8px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.eject-btn::after {
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
/* Scale version button */
|
||||
.version-btn {
|
||||
bottom: 5px;
|
||||
right: 8px;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
/* Modals in landscape */
|
||||
.alby-panel {
|
||||
width: 320px;
|
||||
max-height: 85vh;
|
||||
}
|
||||
|
||||
.version-modal {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------
|
||||
MOBILE PORTRAIT MODE
|
||||
For phones held upright (narrow width, tall height)
|
||||
Only the cassette/tape rotates 90 degrees - everything else stays horizontal
|
||||
Layout: [E][L] -> Screen -> ROTATED TAPE -> Controls -> Volume
|
||||
---------------------------------------- */
|
||||
@media (max-width: 500px) and (min-height: 600px) {
|
||||
html, body {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.player {
|
||||
/* Player stays horizontal, just scaled to fit width */
|
||||
width: calc(100vw - 20px);
|
||||
max-width: 390px;
|
||||
/* Increased vertical padding to fill screen better */
|
||||
padding: 55px 15px 25px 15px;
|
||||
/* Remove the 3D perspective tilt on mobile for cleaner look */
|
||||
transform: none;
|
||||
/* Scale down border for mobile */
|
||||
border-width: 6px;
|
||||
/* Contain the ::before pseudo-element */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Fix background texture scaling */
|
||||
.player::before {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* Scale display for portrait - stays horizontal */
|
||||
.display {
|
||||
padding: 12px;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.display-text {
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
font-size: 16px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
/* ----------------------------------------
|
||||
CASSETTE - SCALED TO FIT WIDTH
|
||||
Horizontal layout, scaled down for portrait
|
||||
---------------------------------------- */
|
||||
.cassette {
|
||||
padding: 12px;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.cassette-label {
|
||||
padding: 10px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* Tape window scaled to fit portrait width */
|
||||
.tape-window {
|
||||
width: calc(100% - 20px);
|
||||
max-width: 280px;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.reel {
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.reel-left {
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
.reel-right {
|
||||
right: 18px;
|
||||
}
|
||||
|
||||
.reel-inner {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
margin-left: -21px;
|
||||
margin-top: -21px;
|
||||
}
|
||||
|
||||
/* Scale the entire reel (including tape-wound set by JS) */
|
||||
.reel {
|
||||
transform: translateY(-50%) scale(0.7);
|
||||
}
|
||||
|
||||
/* Control buttons - stays horizontal, scaled for touch */
|
||||
.controls {
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
/* Scale button icons for portrait */
|
||||
.btn-prev::before {
|
||||
border-right-width: 9px;
|
||||
border-top-width: 6px;
|
||||
border-bottom-width: 6px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.btn-prev::after {
|
||||
height: 12px;
|
||||
margin-left: -9px;
|
||||
}
|
||||
|
||||
.btn-play::before {
|
||||
border-left-width: 14px;
|
||||
border-top-width: 9px;
|
||||
border-bottom-width: 9px;
|
||||
}
|
||||
|
||||
.btn-pause::before {
|
||||
width: 14px;
|
||||
height: 18px;
|
||||
border-left-width: 5px;
|
||||
border-right-width: 5px;
|
||||
}
|
||||
|
||||
.btn-stop::before {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.btn-next::before {
|
||||
border-left-width: 9px;
|
||||
border-top-width: 6px;
|
||||
border-bottom-width: 6px;
|
||||
margin-left: -6px;
|
||||
}
|
||||
|
||||
.btn-next::after {
|
||||
height: 12px;
|
||||
margin-left: 9px;
|
||||
}
|
||||
|
||||
/* Volume control - stays horizontal */
|
||||
.volume-control {
|
||||
margin-top: 30px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.volume-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
width: 120px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
/* Top buttons - scaled */
|
||||
.eject-btn,
|
||||
.lightning-btn {
|
||||
top: 10px;
|
||||
width: 40px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.eject-btn {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.lightning-btn {
|
||||
right: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.eject-btn::before {
|
||||
border-left-width: 6px;
|
||||
border-right-width: 6px;
|
||||
border-bottom-width: 8px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.eject-btn::after {
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
/* Version button */
|
||||
.version-btn {
|
||||
bottom: 4px;
|
||||
right: 6px;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
/* ----------------------------------------
|
||||
MODALS IN PORTRAIT MODE
|
||||
---------------------------------------- */
|
||||
.alby-panel {
|
||||
width: calc(100vw - 30px);
|
||||
max-width: 360px;
|
||||
max-height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
.version-modal {
|
||||
width: calc(100vw - 40px);
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.close-video {
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------
|
||||
VERY SMALL PORTRAIT (iPhone SE, etc.)
|
||||
Additional scaling for smaller devices
|
||||
---------------------------------------- */
|
||||
@media (max-width: 380px) and (min-height: 600px) {
|
||||
.player {
|
||||
width: calc(100vw - 16px);
|
||||
padding: 40px 10px 10px 10px;
|
||||
}
|
||||
|
||||
/* Smaller cassette for tiny screens */
|
||||
.cassette {
|
||||
padding: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.tape-window {
|
||||
width: calc(100% - 16px);
|
||||
max-width: 240px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.reel {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
transform: translateY(-50%) scale(0.6);
|
||||
}
|
||||
|
||||
.reel-left {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.reel-right {
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.reel-inner {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-left: -18px;
|
||||
margin-top: -18px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.eject-btn,
|
||||
.lightning-btn {
|
||||
width: 34px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.eject-btn {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.lightning-btn {
|
||||
right: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------
|
||||
TABLET PORTRAIT MODE
|
||||
For tablets held upright - no rotation, just scale
|
||||
---------------------------------------- */
|
||||
@media (min-width: 501px) and (max-width: 768px) {
|
||||
.player {
|
||||
width: calc(100vw - 40px);
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------
|
||||
TOUCH DEVICE ENHANCEMENTS
|
||||
Better hover states and touch feedback
|
||||
---------------------------------------- */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
/* Touch devices don't need hover state changes */
|
||||
.btn:hover,
|
||||
.eject-btn:hover,
|
||||
.lightning-btn:hover,
|
||||
.alby-btn:hover,
|
||||
.alby-boost-btn:hover,
|
||||
.alby-close-btn:hover,
|
||||
.version-btn:hover,
|
||||
.version-close-btn:hover {
|
||||
/* Reset hover-specific box-shadow to default state */
|
||||
box-shadow: inherit;
|
||||
}
|
||||
|
||||
/* Larger touch targets for interactive elements */
|
||||
.alby-close-btn,
|
||||
.version-close-btn {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.alby-btn {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
/* Ensure checkbox is easily tappable */
|
||||
.alby-checkbox-label {
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
.alby-checkbox-label input[type="checkbox"] {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------
|
||||
PREVENT ZOOM ON INPUT FOCUS (iOS)
|
||||
iOS zooms when focusing inputs with font-size < 16px
|
||||
---------------------------------------- */
|
||||
@media (max-width: 900px) {
|
||||
.alby-input,
|
||||
.alby-textarea {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
MOBILE RESPONSIVE STYLES - END
|
||||
======================================== */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user