1 files changed, 102 insertions, 0 deletions
diff --git a/web/player.css b/web/player.css
new file mode 100644
index 0000000..eb1a0a0
--- /dev/null
+++ b/web/player.css
@@ -0,0 +1,102 @@
+/*
+    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>
+    Copyright (C) 2023 tpart
+*/
+
+input {
+    color: white;
+    background-color: black;
+}
+option {
+    font-family: "Cantarell", sans-serif;
+}
+
+fieldset {
+    background-color: var(--background-light);
+    border-radius: 8px;
+}
+
+form.playerconf {
+    display: grid;
+    grid-template-areas:
+        "h h h"
+        "v a s"
+        "b b b";
+    gap: 1em;
+    grid-template-columns: auto auto auto;
+    grid-template-rows: 3em auto 5em;
+}
+
+legend {
+    font-size: 1.5em;
+}
+input[type="radio"] {
+    appearance: none;
+    display: inline-block;
+    width: 1.2em;
+    height: 1.2em;
+    border-radius: 8px;
+    padding: 2px;
+    background-clip: content-box;
+    border: 2px solid var(--font);
+    background-color: transparent;
+    transition: background-color 0.3s;
+}
+input[type="radio"]:checked {
+    background-color: var(--accent-light);
+}
+
+fieldset label {
+    transition: color 0.2s;
+}
+fieldset label:hover {
+    color: var(--accent-light);
+}
+
+.playerconf {
+    margin: 2em;
+}
+.playerconf h2 {
+    grid-area: h;
+    text-align: center;
+}
+.playerconf h3 {
+    grid-area: h;
+    text-align: center;
+}
+.playerconf .video {
+    grid-area: v;
+}
+.playerconf .audio {
+    grid-area: a;
+}
+.playerconf .subtitles {
+    grid-area: s;
+}
+.playerconf input[type="submit"] {
+    grid-area: b;
+    width: 30%;
+    height: 3em;
+    font-size: 1.5em;
+}
+
+.player nav {
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+.player nav:hover {
+    opacity: 1;
+}
+.player #main {
+    margin-top: 0px;
+    margin-left: 0px;
+    margin-right: 0px;
+    margin-bottom: 0px;
+}
+.player video {
+    width: 100vw;
+    height: 100vh;
+    background-color: black;
+}