cccb/sanic
cccb/sanic
11
1
Fork 0
Code Issues 5 Pull requests Packages Projects 1 Releases Activity

static: add symbols next to volume slider

Browse source
This commit is contained in:
coon 2023-12-05 02:42:39 +01:00
parent 9f568251cc
commit 468b35f791
2 changed files with 13 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
static/flexbox/index.html
View file

@ -49,7 +49,9 @@
</div> </div>
</div> </div>
<div id="volume-control"> <div id="volume-control">
<button class="borderless-button">&#x1F509;</button> <!-- 🔉 Speaker with sound wave -->
<input id="volume" name="volume" type="range" min="1" max="100" value="50"> <input id="volume" name="volume" type="range" min="1" max="100" value="50">
<button class="borderless-button">&#x1F50A;</button> <!-- 🔊 Speaker with sound waves -->
</div> </div>
</div> </div>
<div class="track-info"> <div class="track-info">

12
static/flexbox/sanic.css
View file

@ -29,6 +29,12 @@ button {
border-bottom-color: #3A3A3A; border-bottom-color: #3A3A3A;
} }
.borderless-button {
border: none;
background-color: inherit;
cursor: pointer;
}
input[type=text] { input[type=text] {
background-color: #28374a; background-color: #28374a;
color: white; color: white;
@ -168,7 +174,6 @@ table tr:hover td {
} }
#volume { #volume {
margin-left: 10px;
width: 90%; width: 90%;
} }
@ -192,6 +197,11 @@ table tr:hover td {
flex-direction: row; flex-direction: row;
} }
#volume-control {
display: flex;
flex-direction: row;
}
#top-logo { #top-logo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;