Arav/dwelling-radio
1
0
Fork 0
Code Releases 25 Activity

Updated a play button.

Browse Source
This commit is contained in:
Alexander Andreev 2024-06-19 00:52:55 +04:00
parent 5bc653f50a
commit 9b959eb7ab
Signed by: Arav
GPG Key ID: 25969B23DCB5CA34
4 changed files with 6 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/assets/css/main.css
View File

@ -36,8 +36,7 @@ button {
color: var(--primary-color); color: var(--primary-color);
text-decoration: none; } text-decoration: none; }
a:hover, a:hover {
button:hover {
color: var(--secondary-color); color: var(--secondary-color);
cursor: pointer; cursor: pointer;
text-decoration: underline dotted; text-decoration: underline dotted;
@ -45,9 +44,7 @@ button:hover {
button { button {
background: none; background: none;
border: none; border: none; }
font: inherit;
padding: 0; }
p { p {
text-align: justify; text-align: justify;
@ -122,15 +119,11 @@ section { margin-top: 1rem; }
padding: 0 .7rem; } padding: 0 .7rem; }
button#radio-play { button#radio-play {
-webkit-mask-image: url(/assets/img/play.svg); background-image: url(/assets/img/play.svg);
background-color: var(--primary-color);
height: 3rem; height: 3rem;
mask-image: url(/assets/img/play.svg);
min-width: 3rem; min-width: 3rem;
width: 3rem; } width: 3rem; }
button#radio-play:hover { text-decoration: none; }
input#radio-volume { input#radio-volume {
accent-color: var(--primary-color); accent-color: var(--primary-color);
direction: rtl; direction: rtl;

2
web/assets/img/play.svg
View File

@ -1 +1 @@
<svg version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path transform="matrix(.75195 -.012986 .014978 .65194 38.971 49.316)" d="m-25.978 46.549 1.6542-92 78.847 47.433-40.251 22.284z" stroke-width=".26458"/><circle cx="50" cy="50" r="47.585" fill="none" stroke="#000" stroke-width="4.8301"/></svg> <svg version="1.1" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg"><path d="m1.1317 1.8418v6.6254l-.0005522 6.6248 6.6353-3.3119 6.6348-3.3113-6.6348-3.3135z" fill="#9f2b68" stroke="#000" stroke-width="2"/></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 341 B

After

Width:  |  Height:  |  Size: 220 B

2
web/assets/img/stop.svg
View File

@ -1 +1 @@
<svg version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path transform="matrix(.75195 -.012986 .014978 .65194 38.971 49.316)" d="m-25.978 46.549 1.6542-92 78.847 47.433-40.251 22.284z" stroke-width=".26458"/><circle cx="50" cy="50" r="47.585" fill="none" stroke="#000" stroke-width="4.8301"/><rect x="20.886" y="20.886" width="58.228" height="58.228" rx="57.392" ry="0" stroke="#000" stroke-width="1.7724"/></svg> <svg version="1.1" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1" width="14" height="14" fill="#9f2b68" stroke="#000" stroke-width="3"/></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 456 B

After

Width:  |  Height:  |  Size: 169 B

2
web/assets/js/main.js
View File

@ -88,5 +88,5 @@ $("player").style.display = $("player").firstChild.style.display = "flex";
$("radio-play").addEventListener("click", e => { $("radio-play").addEventListener("click", e => {
audio.paused ? (audio.src = audio_src) && audio.play() : audio.src = ""; audio.paused ? (audio.src = audio_src) && audio.play() : audio.src = "";
e.target.style.maskImage = e.target.style.webkitMaskImage = audio.paused ? e.target.style.backgroundImage = audio.paused ?
"url(/assets/img/play.svg)" : "url(/assets/img/stop.svg)"; }); "url(/assets/img/play.svg)" : "url(/assets/img/stop.svg)"; });