/* 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) 2024 metamuffin */ .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 { 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); --pribufsize: calc(var(--csize) * 0.5); } .jsp-pri-current { z-index: 101; position: absolute; height: var(--csize); background-color: #ffffff20; } .jsp-pri-buffer { z-index: 100; position: absolute; height: var(--pribufsize); } .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); bottom: var(--csize); right: 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; 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 { margin-top: 1em; margin-bottom: 1em; }