No edit summary |
No edit summary |
||
| Line 9: | Line 9: | ||
<style> | <style> | ||
.player { | .player { | ||
background-color: | background-color: hsl(194,100%,50%); | ||
width: 330px; | width: 330px; | ||
height: 190px; | height: 190px; | ||
position: relative; | position: relative; | ||
border-radius: 8px; | border-radius: 8px; | ||
box-shadow: 0 8px 0 0 | box-shadow: 0 8px 0 0 hsl(205,100%,41%); | ||
z-index: 1; | z-index: 1; | ||
} | } | ||
| Line 50: | Line 50: | ||
height: 15px; | height: 15px; | ||
width: 15px; | width: 15px; | ||
border: 20px solid | border: 20px solid #f81472; | ||
border-radius: 50%; | border-radius: 50%; | ||
} | } | ||
| Line 99: | Line 99: | ||
height: 28px; | height: 28px; | ||
width: 28px; | width: 28px; | ||
background-color: | background-color: #d11b66; | ||
border-radius: 50%; | border-radius: 50%; | ||
position: absolute; | position: absolute; | ||
bottom: 20px; | bottom: 20px; | ||
right: 30px; | right: 30px; | ||
border: 3.5px solid | border: 3.5px solid #95003d; | ||
outline: none; | outline: none; | ||
padding: 0 !important; | padding: 0 !important; | ||
| Line 118: | Line 118: | ||
left: 235px; | left: 235px; | ||
top: 60px; | top: 60px; | ||
background-color: | background-color: #d11b66; | ||
outline: none; | outline: none; | ||
border-radius: 3px; | border-radius: 3px; | ||
border: 6px solid | border: 6px solid #95003d; | ||
} | } | ||
.slider::-webkit-slider-thumb { | .slider::-webkit-slider-thumb { | ||
| Line 143: | Line 143: | ||
transform: rotate(360deg); | transform: rotate(360deg); | ||
} | } | ||
} | |||
.player-wrapper .sign-logo { | |||
width: 70px; | |||
height: 29.25px; | |||
right: 68px; | |||
top: 153px; | |||
} | } | ||
</style> | </style> | ||
| Line 164: | Line 171: | ||
/> | /> | ||
</div> | </div> | ||
<img alt="logo" width="347" height="145" class="sign-logo" src="https://themidnight.wiki/images/2/24/The_Midnight_Wiki_Logo_2023.png" /> | <img alt="logo" width="347" height="145" class="sign-logo" src="https://themidnight.wiki/images/2/24/The_Midnight_Wiki_Logo_2023.png" /> | ||
</div> | </div> | ||
<audio loop class="my-song" src="<!--{$mp3|escape:'urlpathinfo'}-->" preload="auto"></audio> | <audio loop class="my-song" src="<!--{$mp3|escape:'urlpathinfo'}-->" preload="auto"></audio> | ||
Revision as of 12:18, 14 June 2023
Sample result
Press the button to play/pause
Adjust volume with slider