diff --git a/web/assets/css/main.css b/web/assets/css/main.css index 8a5c041..6bae0d6 100644 --- a/web/assets/css/main.css +++ b/web/assets/css/main.css @@ -36,8 +36,7 @@ button { color: var(--primary-color); text-decoration: none; } -a:hover, -button:hover { +a:hover { color: var(--secondary-color); cursor: pointer; text-decoration: underline dotted; @@ -45,9 +44,7 @@ button:hover { button { background: none; - border: none; - font: inherit; - padding: 0; } + border: none; } p { text-align: justify; @@ -122,15 +119,11 @@ section { margin-top: 1rem; } padding: 0 .7rem; } button#radio-play { - -webkit-mask-image: url(/assets/img/play.svg); - background-color: var(--primary-color); + background-image: url(/assets/img/play.svg); height: 3rem; - mask-image: url(/assets/img/play.svg); min-width: 3rem; width: 3rem; } -button#radio-play:hover { text-decoration: none; } - input#radio-volume { accent-color: var(--primary-color); direction: rtl; diff --git a/web/assets/img/play.svg b/web/assets/img/play.svg index 887cfd9..237e100 100644 --- a/web/assets/img/play.svg +++ b/web/assets/img/play.svg @@ -1 +1 @@ - + diff --git a/web/assets/img/stop.svg b/web/assets/img/stop.svg index 14e2211..5348a24 100644 --- a/web/assets/img/stop.svg +++ b/web/assets/img/stop.svg @@ -1 +1 @@ - + diff --git a/web/assets/js/main.js b/web/assets/js/main.js index f342a98..1ed27eb 100644 --- a/web/assets/js/main.js +++ b/web/assets/js/main.js @@ -88,5 +88,5 @@ $("player").style.display = $("player").firstChild.style.display = "flex"; $("radio-play").addEventListener("click", e => { 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)"; });