1 files changed, 255 insertions, 0 deletions
diff --git a/ui/client-style/src/js-player.css b/ui/client-style/src/js-player.css
new file mode 100644
index 0000000..5c10ff9
--- /dev/null
+++ b/ui/client-style/src/js-player.css
@@ -0,0 +1,255 @@
+/*
+    This file is part of jellything (https://codeberg.org/metamuffin/jellything)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2026 metamuffin <metamuffin.org>
+*/
+
+.jsp {
+    --csize: 50px;
+}
+
+.jsp .jsp-controls,
+.jsp-popup {
+    background-color: #1d1d1d99;
+}
+
+.jsp .jsp-controls {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    height: var(--csize);
+    transition: opacity 0.2s;
+    display: flex;
+    flex-direction: row;
+}
+
+.jsp .jsp-controls button,
+.jsp .jsp-track-list button {
+    padding: 0px;
+    width: var(--csize);
+    height: 100%;
+    border: none;
+    margin: 0;
+    background-color: #ffffff10;
+    border-radius: 0px;
+}
+
+.jsp-controls p.jsp-status {
+    display: inline-block;
+    width: 6em;
+    text-align: right;
+    margin: 0px;
+    font-family: monospace;
+    padding: 0.4em;
+}
+.jsp-track-select {
+    display: inherit;
+}
+.jsp-track-state {
+    border: 0px solid transparent;
+    font-size: x-large;
+    background-color: transparent;
+    cursor: pointer;
+}
+
+.jsp-pri {
+    position: relative;
+    flex-grow: 1;
+    padding: 0px;
+    display: inline-block;
+    margin: 0px;
+    width: calc(100% - var(--csize) * 2 - 2px);
+    height: var(--csize);
+}
+.jsp-pri-current {
+    z-index: 101;
+    position: absolute;
+    height: var(--csize);
+    background-color: #ffffff20;
+}
+.jsp-pri-buffer {
+    z-index: 100;
+    position: absolute;
+}
+.jsp-pri-buffer-buffered {
+    background-color: #08fa0018;
+}
+.jsp-pri-buffer-loading {
+    background-color: #ffd00018;
+}
+
+.jsp-overlay {
+    position: absolute;
+    bottom: var(--csize);
+    left: 0px;
+}
+.jsp-overlay .jsp-buffering {
+    margin: 0.2em;
+    font-size: larger;
+    color: grey;
+}
+.jsp-stats {
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.404);
+    top: 0px;
+    left: 0px;
+    padding: 1em;
+}
+.jsp-stats pre {
+    margin: 0.1em;
+}
+.jsp .icon {
+    font-size: 1.5em;
+}
+
+.jsp .jsh-log {
+    position: absolute;
+    bottom: var(--csize);
+    left: 0px;
+}
+.jsp .jsh-log-line {
+    padding: 0.15em;
+    margin: 0px;
+    font-size: large;
+}
+.jsp .jsh-log-line-appear {
+    animation-name: appear;
+    animation-timing-function: linear;
+    animation-duration: 0.5s;
+    animation-fill-mode: forwards;
+}
+.jsp .jsh-log-line-disappear {
+    animation-name: disappear;
+    animation-timing-function: linear;
+    animation-duration: 0.2s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes appear {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@keyframes disappear {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+.jsp-popup {
+    position: absolute;
+    bottom: var(--csize);
+    right: 0px;
+    animation-name: popup-in;
+    animation-delay: 180ms;
+    animation-duration: 100ms;
+    animation-fill-mode: both;
+    animation-timing-function: ease-out;
+}
+.jsp-popup-out {
+    animation-name: popup-out;
+    animation-delay: 0ms;
+    animation-duration: 100ms;
+    animation-fill-mode: both;
+    animation-timing-function: ease-in;
+}
+@keyframes popup-in {
+    from {
+        bottom: calc(var(--csize) - 20px);
+        opacity: 0;
+    }
+    to {
+        bottom: var(--csize);
+        opacity: 1;
+    }
+}
+@keyframes popup-out {
+    from {
+        bottom: var(--csize);
+        opacity: 1;
+    }
+    to {
+        bottom: calc(var(--csize) - 20px);
+        opacity: 0;
+    }
+}
+
+.jsp-settings-popup {
+    padding: 1em;
+    min-width: 14em;
+}
+.jsp-track-select-popup {
+    min-width: 14em;
+    padding: 1em;
+}
+.jsp-settings-popup h2,
+.jsp-settings-popup h3 {
+    margin-top: 0.1em;
+    margin-bottom: 0.1em;
+}
+
+.jsp-controlgroup {
+    padding: 0.5em;
+    margin-top: 1em;
+    margin-bottom: 1em;
+    background-color: #00000038;
+}
+
+ul.jsp-track-list {
+    list-style: none;
+    padding: 0px;
+}
+ul.jsp-track-list li.active {
+    background-color: #047a0073;
+}
+
+.jsp-volumecontrol input {
+    appearance: none;
+    width: 100%;
+    height: 24px;
+    background-color: black;
+    opacity: 0.5;
+    outline: none;
+}
+.jsp-volumecontrol input:hover {
+    opacity: 1;
+}
+.jsp-volumecontrol input::-webkit-slider-thumb,
+.jsp-volumecontrol input::-moz-range-thumb {
+    width: 24px;
+    height: 24px;
+    border-radius: 0px;
+    background-color: #06ad00;
+    cursor: ew-resize;
+    border: 0px solid transparent;
+}
+
+.jsp-volume {
+    display: inline-block;
+    margin-left: 2em;
+    font-family: monospace;
+    font-size: large;
+    width: 20em;
+}
+
+.jsp-chapter {
+    position: absolute;
+    height: var(--csize);
+    padding-left: 2px;
+    border-left: 2px solid rgba(255, 161, 55, 0.548);
+}
+.jsp-chapter p {
+    font-size: small;
+    text-overflow: ellipsis;
+    overflow: visible;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 100%;
+}