116 lines
4.2 KiB
CSS
116 lines
4.2 KiB
CSS
/* A small silver cassette player on the desk, with an orange brand stripe and chunky keys */
|
|
|
|
#walkman {
|
|
position: relative;
|
|
transform: rotate(var(--rot, 0deg));
|
|
filter: drop-shadow(0 8px 9px rgba(0, 0, 0, 0.55));
|
|
}
|
|
|
|
.walkman__body {
|
|
padding: 8px 10px 10px;
|
|
background: linear-gradient(160deg, #d3d6d8 0%, #acb0b4 45%, #92969a 100%);
|
|
border: 1px solid #5d6064;
|
|
border-radius: 10px;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -3px 6px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.walkman__badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 6px;
|
|
font-family: var(--font-num);
|
|
color: #3a3d40;
|
|
}
|
|
.walkman__badge b { font-size: 12px; letter-spacing: 0.22em; color: #c4521f; }
|
|
.walkman__badge span { flex: 1; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
|
|
|
|
.walkman__led {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
background: #5a1b14;
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
|
|
transition: background 0.3s, box-shadow 0.3s;
|
|
}
|
|
.walkman.is-playing .walkman__led { background: #ff5a3c; box-shadow: 0 0 8px 2px rgba(255, 90, 60, 0.65); }
|
|
|
|
/* The cassette window: two reels around the label with the title */
|
|
.walkman__window {
|
|
display: grid;
|
|
grid-template-columns: 38px minmax(0, 1fr) 38px;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 8px;
|
|
background: linear-gradient(#26292c, #15171a);
|
|
border: 2px solid #4b4e52;
|
|
border-radius: 6px;
|
|
box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
}
|
|
.walkman__reel { width: 38px; height: 38px; }
|
|
.walkman__tape { fill: #3b2b21; stroke: #1b130e; stroke-width: 1.5; }
|
|
.walkman__spokes line { stroke: #d9d3c1; stroke-width: 2.4; stroke-linecap: round; }
|
|
.walkman__spokes { transform-box: fill-box; transform-origin: 50% 50%; }
|
|
.walkman__hub { fill: #d9d3c1; stroke: #8a8472; stroke-width: 1; }
|
|
.walkman.is-playing .walkman__reel--left .walkman__spokes { animation: wm-spin 3.2s linear infinite; }
|
|
.walkman.is-playing .walkman__reel--right .walkman__spokes { animation: wm-spin 2.4s linear infinite; }
|
|
|
|
.walkman__label {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 34px;
|
|
padding: 0 7px;
|
|
overflow: hidden;
|
|
background: #efe4c4 var(--paper-grain);
|
|
border-bottom: 3px solid #c4521f;
|
|
border-radius: 3px;
|
|
box-shadow: inset 0 0 8px rgba(120, 90, 40, 0.3);
|
|
font-family: var(--font-type);
|
|
font-size: 12px;
|
|
color: var(--text);
|
|
}
|
|
.walkman__title { display: block; white-space: nowrap; }
|
|
.walkman.is-empty .walkman__title { opacity: 0.55; font-style: italic; }
|
|
.walkman.is-playing .walkman__title.is-scroll { width: max-content; animation: wm-marquee 11s linear infinite; }
|
|
|
|
/* Vintage keys: raised piano keys that sink when pressed */
|
|
.walkman__keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 9px; }
|
|
.walkman__key {
|
|
height: 30px;
|
|
padding: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #ebe7d8;
|
|
cursor: pointer;
|
|
background: linear-gradient(#63676b, #34373a);
|
|
border: 1px solid #1d1f21;
|
|
border-bottom-width: 4px;
|
|
border-radius: 3px;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
transition: transform 0.07s, border-bottom-width 0.07s, filter 0.15s;
|
|
}
|
|
.walkman__key svg { width: 20px; height: 14px; fill: currentColor; }
|
|
.walkman__key--play { box-shadow: inset 0 3px 0 #4f8f5a, 0 1px 2px rgba(0, 0, 0, 0.5); }
|
|
.walkman__key--stop { box-shadow: inset 0 3px 0 #c4521f, 0 1px 2px rgba(0, 0, 0, 0.5); }
|
|
.walkman__key:hover:not(:disabled) { filter: brightness(1.18); }
|
|
.walkman__key:active:not(:disabled),
|
|
.walkman__key[aria-pressed="true"] {
|
|
border-bottom-width: 1px;
|
|
transform: translateY(3px);
|
|
background: linear-gradient(#34373a, #4b4e52);
|
|
}
|
|
.walkman__key:focus-visible { outline: 2px solid #c4521f; outline-offset: 2px; }
|
|
.walkman__key:disabled { opacity: 0.4; cursor: default; }
|
|
|
|
@keyframes wm-spin { to { transform: rotate(360deg); } }
|
|
@keyframes wm-marquee {
|
|
from { transform: translateX(40%); }
|
|
to { transform: translateX(-100%); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.walkman.is-playing .walkman__spokes,
|
|
.walkman.is-playing .walkman__title.is-scroll { animation: none !important; }
|
|
.walkman__title { overflow: hidden; text-overflow: ellipsis; }
|
|
}
|