feat: Adding audio player + music to play
This commit is contained in:
gauvainboiche
+2
-2
@@ -104,8 +104,8 @@ body {
|
||||
|
||||
#side {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
gap: 22px;
|
||||
grid-template-rows: auto auto minmax(0, 1fr);
|
||||
gap: 18px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -16,6 +16,8 @@
|
||||
.cal__menu { display: block; width: 100%; margin-top: 8px; }
|
||||
|
||||
.menu__folder {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #a37a24 rgba(110, 75, 25, 0.25);
|
||||
position: relative;
|
||||
width: min(580px, 94%);
|
||||
max-height: 100%;
|
||||
@@ -147,3 +149,18 @@
|
||||
.rules th { background: rgba(28, 42, 68, 0.1); font-weight: 700; }
|
||||
.rules blockquote { margin: 8px 0; padding: 4px 10px; border-left: 4px solid var(--ink-red); background: rgba(255, 255, 255, 0.3); font-style: italic; }
|
||||
.rules hr { border: 0; border-top: 1px dashed rgba(43, 36, 24, 0.5); margin: 14px 0; }
|
||||
|
||||
/* ---- The sound mixer: a label, a slider and the level on each line ---- */
|
||||
.mixer { display: grid; margin: 8px 0 12px; }
|
||||
.mixer__row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 3.2em;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 2px 0;
|
||||
border-bottom: 1px dotted rgba(43, 36, 24, 0.4);
|
||||
font-size: 13px;
|
||||
}
|
||||
.mixer__row--master { margin-bottom: 4px; font-weight: 700; border-bottom: 2px solid var(--ink); }
|
||||
.mixer__row input[type="range"] { width: 100%; min-height: 30px; margin: 0; accent-color: #a37a24; }
|
||||
.mixer__row output { font-family: var(--font-num); font-weight: 700; text-align: right; }
|
||||
|
||||
+11
-8
@@ -24,21 +24,24 @@
|
||||
#pad > * { grid-column: 1; }
|
||||
|
||||
/* Papers lie flat on a phone: a rotated sheet wastes the little width there is. */
|
||||
.paper { transform: none; }
|
||||
.paper, #walkman { transform: none; }
|
||||
#side, #ledger, #dashboard, #folder { overflow-x: hidden; }
|
||||
|
||||
/* One paper at a time */
|
||||
#dashboard, #folder, #ledger, #newspaper, #calendar { grid-row: 2; display: none; overflow-y: auto; }
|
||||
#side { display: contents; }
|
||||
#dashboard, #folder, #ledger { grid-row: 2; display: none; overflow-y: auto; }
|
||||
#side { grid-row: 2; display: none; grid-template-rows: none; align-content: start; gap: 12px; overflow-y: auto; }
|
||||
#calendar, #walkman, #newspaper { display: none; }
|
||||
#pad[data-view="tray"] #folder,
|
||||
#pad[data-view="brief"] #dashboard,
|
||||
#pad[data-view="news"] #newspaper,
|
||||
#pad[data-view="clock"] #calendar { display: block; }
|
||||
#calendar { align-self: start; }
|
||||
#pad[data-view="brief"] #dashboard { display: block; }
|
||||
#pad[data-view="clock"] #side,
|
||||
#pad[data-view="news"] #side { display: grid; }
|
||||
#pad[data-view="clock"] #calendar,
|
||||
#pad[data-view="clock"] #walkman,
|
||||
#pad[data-view="news"] #newspaper { display: block; }
|
||||
|
||||
/* The ledger is a view of its own while a review is open; the tabs still reach the other papers */
|
||||
#pad.is-ledger #folder { display: none; }
|
||||
#pad[data-view="ledger"] #ledger:not([hidden]) { display: block; }
|
||||
#pad.is-ledger #side { display: contents; }
|
||||
#ledger { grid-column: 1; }
|
||||
|
||||
/* Menu and end screens cover the shelf too */
|
||||
|
||||
@@ -0,0 +1,115 @@
|
||||
/* 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; }
|
||||
}
|
||||
Reference in New Issue
Block a user