oiwmiodev/recorder-player
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Align responsive player controls

Browse Source
This commit is contained in:
human insan
2026-08-27 23:20:30 +01:00
parent 7e034d07ca
commit 2bc0c77d81
1 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+7 -5
View File
@@ -44,11 +44,11 @@
.scrub:hover .scrub-hover { display: block; } .scrub:hover .scrub-hover { display: block; }
/* control row */ /* control row */
.ctrl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ctrl-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ctrl-row button { background: none; border: none; color: #fff; cursor: pointer; padding: 4px; border-radius: 50%; display: grid; place-items: center; } .ctrl-row button { width: 30px; height: 30px; flex: 0 0 30px; background: none; border: none; color: #fff; cursor: pointer; padding: 4px; border-radius: 50%; display: grid; place-items: center; }
.ctrl-row button:hover { background: rgba(255,255,255,.15); } .ctrl-row button:hover { background: rgba(255,255,255,.15); }
.ctrl-row svg { width: 22px; height: 22px; fill: currentColor; } .ctrl-row svg { width: 22px; height: 22px; fill: currentColor; }
.time-label { font-size: 13px; color: #ddd; font-variant-numeric: tabular-nums; margin-left: 4px; user-select: none; } .time-label { font-size: 13px; color: #ddd; font-variant-numeric: tabular-nums; margin-left: 4px; user-select: none; white-space: nowrap; }
.spacer { flex: 1; } .spacer { flex: 1; }
.vol-wrap { display: flex; align-items: center; gap: 4px; } .vol-wrap { display: flex; align-items: center; gap: 4px; }
.vol-wrap input { width: 0; opacity: 0; transition: width .2s, opacity .2s; accent-color: #fff; } .vol-wrap input { width: 0; opacity: 0; transition: width .2s, opacity .2s; accent-color: #fff; }
@@ -100,10 +100,12 @@
@media (max-width: 600px) { @media (max-width: 600px) {
.page { padding: 8px; } .page { padding: 8px; }
.ctrl-row { gap: 4px; } .ctrl-row { gap: 3px; }
.ctrl-row button { min-width: 36px; min-height: 34px; } .ctrl-row button { width: 32px; height: 32px; flex-basis: 32px; }
.ctrl-row svg { width: 20px; height: 20px; } .ctrl-row svg { width: 20px; height: 20px; }
.time-label { font-size: 11px; } .time-label { font-size: 11px; }
.ctrl-row .spacer { display: none; }
.vol-wrap input { width: 54px; opacity: 1; }
.hours span:nth-child(even) { display: none; } .hours span:nth-child(even) { display: none; }
} }
</style> </style>