hans/rktplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

small adjustments, many enhancements to rktplayer

Browse Source
This commit is contained in:
Hans Dijkema
2026-04-16 22:22:25 +02:00
parent 82fa80746c
commit 4bef5cf94c
8 changed files with 492 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
gui/rktplayer.html
View File

@@ -11,8 +11,8 @@
<div class="pane">
<div class="buttons">
<button id="prev" class="command"><img id="previous-img" src="buttons/previous.svg" /></button>
<button id="pause" class="command"><img id="pause-img" src="buttons/pause.svg" /></button>
<button id="play" class="command"><img id="play-img" src="buttons/play.svg" /></button>
<button id="stop" class="command"><img id="stop-img" src="buttons/stop.svg" /></button>
<button id="next" class="command"><img id="next-img" src="buttons/next.svg" /></button>
<input type="range" min="0" max="100" value="0" class="h-slider" id="seek" step="0.01" />
<div class="text-block"><span id="time" class="time">00:00:00</span></div>
@@ -34,11 +34,17 @@
</div>
</div>
<div class="music-playing">
<div id="tabs" class="tabs">
<span id="tab1" class="tab">Default</span>
</div>
<div id="tracks" class="content scrolly">
<!-- Music playing -->
</div>
</div>
</div>
<div class="status">
<span class="info" id="bits"></span><span class="info" id="rate"></span><span class="info" id="channels"></span>
</div>
</div>
</body>
</html>

54
gui/styles.css
View File

@@ -6,7 +6,7 @@ body {
}
.pane {
height: calc(100vh - 40px - 2em - 10px);
height: calc(100vh - 2em - 20px);
width: calc(100% - 10px);
display: flex;
flex-direction: column;
@@ -31,6 +31,7 @@ button {
button:hover {
background: #909090;
transition: all 0.5s ease-in;
}
@@ -69,7 +70,7 @@ input.h-slider {
}
.hpane {
height: 100%;
height: calc(100% - 40px - 2.5em);
width: 100%;
display: flex;
}
@@ -99,12 +100,45 @@ input.h-slider {
height: 100%;
}
.tabs {
width: 100%;
height: 1.5em;
border-bottom: 1px solid #505050;
}
.tabs span.tab {
width: 50px;
overflow: hide;
text-overflow: hide;
white-space: nowrap;
border: 1px solid #505050;
cursor: default;
padding-left: 5px;
padding-right: 5px;
border-bottom: none;
}
.tabs span.tab.current {
font-weight: bold;
color: #f3961e;
}
.tabs span.tab:hover {
background: #e0e0e0;
color: black;
transition: all 0.5s ease-in;
}
.content {
width: 100%;
height: 100%;
overflow: hidden;
}
.music-playing .content {
height: calc(100% - 1.5em);
}
.scrolly {
overflow-y: auto;
}
@@ -127,6 +161,7 @@ table.music-library tr td {
table.music-library tr td:hover {
background: #e0e0e0;
color: black;
transition: all 0.5s ease-in;
}
.popup-menu, .popup-submenu {
@@ -195,6 +230,7 @@ table.tracks tr, table.tracks td {
table.tracks tr:hover {
background: #e0e0e0;
color: black;
transition: all 0.5s ease-in;
}
table.tracks tr:hover.current {
@@ -218,4 +254,18 @@ table.tracks tr.current {
justify-content: center;
}
div.status {
width: 100%;
height: 2em;
padding-top: 0.25em;
border-left: 1px solid #505050;
}
div.status span.info {
padding-left: 5px;
padding-right: 5px;
border-right: 1px solid #505050;
color: #d0d0d0;
}