move stylesheets and refactor js bundler

1 files changed, 52 insertions, 0 deletions

diff --git a/web/js-player.css b/web/js-player.css
new file mode 100644
index 0000000..79dffa0
--- /dev/null
+++ b/web/js-player.css
@@ -0,0 +1,52 @@
+/*
+    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) 2023 metamuffin <metamuffin.org>
+*/
+
+.js-player {
+    --csize: 50px;
+}
+
+.js-player .controls {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    height: var(--csize);
+    background-color: #1d1d1d99;
+    transition: opacity 0.2s;
+
+    display: flex;
+    flex-direction: row;
+}
+
+.js-player .controls button {
+    padding: 0px;
+    width: var(--csize);
+    height: 100%;
+    border: none;
+    background-color: #ffffff10;
+}
+
+.js-player .controls p.status {
+    display: inline-block;
+    width: 6em;
+    text-align: right;
+    margin: 0px;
+    font-family: monospace;
+    margin: 0.4em;
+}
+
+.pri {
+    flex-grow: 1;
+    padding: 0px;
+    display: inline-block;
+    margin: 0px;
+    width: calc(100% - var(--csize) * 2 - 2px);
+    height: var(--csize);
+}
+.pri-current {
+    height: var(--csize);
+    background-color: #ffffff20;
+}