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

-

Browse Source
This commit is contained in:
Hans Dijkema
2026-02-25 18:11:13 +01:00
parent 1a05a53b6f
commit 7cefed4d68
8 changed files with 249 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
gui/buttons/pause.svg Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 5C10 3.34315 8.65686 2 7 2H5C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H7C8.65686 22 10 20.6569 10 19V5ZM8 5C8 4.44772 7.55229 4 7 4H5C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H7C7.55229 20 8 19.5523 8 19V5Z" fill="#0F0F0F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 5C22 3.34315 20.6569 2 19 2H17C15.3431 2 14 3.34315 14 5V19C14 20.6569 15.3431 22 17 22H19C20.6569 22 22 20.6569 22 19V5ZM20 5C20 4.44772 19.5523 4 19 4H17C16.4477 4 16 4.44772 16 5V19C16 19.5523 16.4477 20 17 20H19C19.5523 20 20 19.5523 20 19V5Z" fill="#0F0F0F"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 849 B

17
gui/buttons/stop.svg Normal file
View File

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>stop</title>
<desc>Created with Sketch Beta.</desc>
<defs>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-518.000000, -569.000000)" fill="#000000">
<path d="M544,594 C544,594.553 543.553,595 543,595 L521,595 C520.447,595 520,594.553 520,594 L520,572 C520,571.448 520.447,571 521,571 L543,571 C543.553,571 544,571.448 544,572 L544,594 L544,594 Z M544,569 L520,569 C518.896,569 518,569.896 518,571 L518,595 C518,596.104 518.896,597 520,597 L544,597 C545.104,597 546,596.104 546,595 L546,571 C546,569.896 545.104,569 544,569 L544,569 Z" id="stop" sketch:type="MSShapeGroup">
</path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

7
gui/rktplayer.html
View File

@@ -11,6 +11,7 @@
<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="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" />
@@ -23,18 +24,18 @@
<div class="music-info">
<div class="music-library">
<div id="library" class="content scrolly">
Library
<!-- Library -->
</div>
</div>
<div class="album-art">
<div id="album-art" class="content">
Album art
<!-- Album art -->
</div>
</div>
</div>
<div class="music-playing">
<div id="tracks" class="content scrolly">
Music playing
<!-- Music playing -->
</div>
</div>
</div>

45
gui/styles.css
View File

@@ -1,6 +1,8 @@
body {
font-family: Arial;
font-size: 11pt;
background: #202020;
color: #ffffff;
}
.pane {
@@ -16,15 +18,15 @@ body {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
border: 1px solid #505050;
margin-bottom: 5px;
}
button {
background: #e0e0e0;
border: none;
border-left: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid #505050;
border-right: 1px solid #505050;
}
button:hover {
@@ -56,7 +58,7 @@ input.h-slider {
justify-content: center;
align-items: center;
/*width: 4em;*/
border-left: 1px solid black;
border-left: 1px solid #505050;
}
.buttons span.time, .buttons span.totaltime {
@@ -73,13 +75,13 @@ input.h-slider {
}
.music-info {
border: 1px solid black;
border: 1px solid #505050;
width: 30%;
height: 100%;
}
.music-library {
border-bottom: 1px solid black;
border-bottom: 1px solid #505050;
width: 100%;
height: 50%;
}
@@ -91,7 +93,7 @@ input.h-slider {
}
.music-playing {
border: 1px solid black;
border: 1px solid #505050;
border-left: none;
width: 70%;
height: 100%;
@@ -124,6 +126,7 @@ table.music-library tr td {
table.music-library tr:hover td {
background: #e0e0e0;
color: black;
}
.popup-menu, .popup-submenu {
@@ -135,6 +138,7 @@ table.music-library tr:hover td {
z-index: 9999;
border: 1px solid black;
background: #e0e0e0;
color: black;
}
.popup-submenu {
@@ -149,6 +153,11 @@ table.music-library tr:hover td {
.menubar .menu-item {
min-width: unset;
width: unset;
color: black;
}
input[type="range"] {
accent-color: #c97101;
}
.menu-item span.menu-name {
@@ -167,17 +176,35 @@ table.tracks td.number {
text-align: right;
}
table.tracks tr {
table.tracks tr, table.tracks td {
cursor: default;
user-select: none;
}
table.tracks tr:hover {
background: #e0e0e0;
color: black;
}
table.tracks tr:hover.current {
color: #955c12;
}
table.tracks tr.current {
font-weight: bold;
color: blue;
color: #f3961e;
}
.album-art .content img {
width: auto;
height: calc(100% - 20px);
aspect-ratio: 1 / 1;
margin: auto;
}
.album-art .content {
display: flex;
justify-content: center;
}