From 5c83df829b57f685f1c2b5e2e9e1c99dfda8eb00 Mon Sep 17 00:00:00 2001 From: metamuffin Date: Tue, 17 Feb 2026 12:53:19 +0100 Subject: fix up css --- ui/client-style/src/layout.css | 26 +------ ui/client-style/src/node_card.css | 147 ++++++++++++++++++++++++++++++++++++++ ui/client-style/src/node_list.css | 30 ++++++++ ui/client-style/src/node_page.css | 106 +++++++++++++++++++++++++++ ui/client-style/src/nodecard.css | 147 -------------------------------------- ui/client-style/src/nodepage.css | 108 ---------------------------- 6 files changed, 284 insertions(+), 280 deletions(-) create mode 100644 ui/client-style/src/node_card.css create mode 100644 ui/client-style/src/node_list.css create mode 100644 ui/client-style/src/node_page.css delete mode 100644 ui/client-style/src/nodecard.css delete mode 100644 ui/client-style/src/nodepage.css (limited to 'ui/client-style/src') diff --git a/ui/client-style/src/layout.css b/ui/client-style/src/layout.css index 5c5272c..a7f0b28 100644 --- a/ui/client-style/src/layout.css +++ b/ui/client-style/src/layout.css @@ -120,32 +120,8 @@ summary h3 { margin-right: 3px; } -.children { - padding: 1em; - padding-left: 3em; - padding-right: 3em; - list-style: none; - width: 100%; - box-sizing: border-box; - display: flex; -} -.children:not(.hlist) { - flex-wrap: wrap; -} -.children li { - display: block; -} -.hlist { - overflow-x: auto; - max-width: 100%; - flex-wrap: nowrap; -} -.hlist li { - display: inline-block; -} - @media (max-width: 750px) { - .hlist ul { + .nl.inline ul { padding-left: 0; } } diff --git a/ui/client-style/src/node_card.css b/ui/client-style/src/node_card.css new file mode 100644 index 0000000..2c0b97f --- /dev/null +++ b/ui/client-style/src/node_card.css @@ -0,0 +1,147 @@ +/* + 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 + Copyright (C) 2023 tpart +*/ + +.poster * img, .bigposter img { + background-color: var(--image-loading-placeholder); +} +.poster a, .bigposter img { + border-radius: 1em; +} + +.card { + padding: 1em; +} + +.card .poster, +.card .poster img { + height: var(--card-size); +} +.aspect-port { + width: calc(var(--card-size) * var(--port-poster-aspect)); +} +.aspect-land { + width: calc(var(--card-size) * var(--land-poster-aspect)); +} +.aspect-thumb { + width: calc(var(--card-size) * var(--land-thumb-aspect)); +} +.aspect-square { + width: calc(var(--card-size)); +} + +.card .poster a img { + object-fit: cover; + object-position: center; + width: 100%; +} +.card .title, .card .subtitle { + text-align: center; + margin-top: 0.5em; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.card .subtitle { + margin-top: 0.25em; +} +.card .subtitle * { + color: var(--font-dark); +} +.card .title a, .card .subtitle a { + text-decoration-line: none; +} +.card .title a:hover { + text-decoration-line: underline; +} +.card .title .subtitle { + color: grey; +} +.card .poster { + display: grid; +} +.card .poster a { + grid-area: 1 / 1; +} + +.card .poster .cardhover { + position: relative; + pointer-events: none; + grid-area: 1 / 1; + transition: opacity 0.3s; + background-color: var(--overlay-poster); + opacity: 0; + display: flex; + justify-content: center; + align-items: center; +} +.card .poster:hover .cardhover { + opacity: 1; +} + +.card .poster a { + overflow: hidden; +} + +.card .poster a img { + transition: transform 0.3s; +} + +.card .poster:hover a img { + transform: scale(1.1); +} + +.card .poster .cardhover a.play { + text-decoration: none; + width: 1em; + height: 1em; + line-height: 1; + margin: auto; + padding: 0.2em; + border-radius: 50%; + font-size: 2.2em; + pointer-events: all; + background-color: var(--overlay); + transition: background-color 0.3s, font-size 0.3s; +} +.card .poster .cardhover a.play:hover { + background-color: var(--overlay-hover); + font-size: 3em; +} +.card .poster .cardhover .props { + position: absolute; + bottom: 0px; + left: 0px; +} + +.widecard { + display: grid; + grid-template-columns: 1fr 10000fr; + width: 100%; +} +.widecard .poster { + grid-column: 1; +} +.widecard .details { + grid-column: 2; + margin: 1em; +} +.widecard .details .title { + font-size: large; +} +.widecard .details .props { + margin-bottom: 0.5em; +} + +@media (max-width: 750px) { + nav .library { + display: none; + } + .children { + justify-content: center; + } +} diff --git a/ui/client-style/src/node_list.css b/ui/client-style/src/node_list.css new file mode 100644 index 0000000..370d8df --- /dev/null +++ b/ui/client-style/src/node_list.css @@ -0,0 +1,30 @@ +/* + 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 +*/ + +.nl.grid { + padding: 1em; + padding-left: 3em; + padding-right: 3em; + list-style: none; + width: 100%; + box-sizing: border-box; + display: flex; +} +.nl.grid { + flex-wrap: wrap; +} +.nl.grid li { + display: block; +} + +.nl.inline { + overflow-x: auto; + max-width: 100%; + flex-wrap: nowrap; +} +.nl.inline li { + display: inline-block; +} diff --git a/ui/client-style/src/node_page.css b/ui/client-style/src/node_page.css new file mode 100644 index 0000000..62c8c7e --- /dev/null +++ b/ui/client-style/src/node_page.css @@ -0,0 +1,106 @@ +/* + 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 + Copyright (C) 2023 tpart +*/ +.backdrop { + width: calc(100% + 2 * var(--main-side-margin)); + height: min(50vh, calc(var(--backdrop-height) + 5em)); + margin-left: calc(-1 * var(--main-side-margin)); + margin-right: calc(-1 * var(--main-side-margin)); + margin-top: calc(-1 * var(--bar-height)); + margin-bottom: -5em; + -webkit-mask-image: linear-gradient( + rgba(0, 0, 0, 1), + transparent min(50vh, calc(var(--backdrop-height) + 5em)) + ); + mask-image: linear-gradient( + rgba(0, 0, 0, 1), + transparent min(50vh, calc(var(--backdrop-height) + 5em)) + ); + -webkit-mask-mode: alpha; + mask-mode: alpha; + pointer-events: none; + object-fit: cover; + object-position: center; +} +.bigposter { + width: max(8em, 25%); + float: left; + margin: 3em; + height: 100%; +} +.bigposter.has_backdrop { + margin-top: -1em; +} +.bigposter img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + display: block; +} + +.bigposter.aspect-thumb { + aspect-ratio: var(--land-thumb-aspect) +} +.bigposter.aspect-land { + aspect-ratio: var(--land-poster-aspect) +} +.bigposter.aspect-port { + aspect-ratio: var(--port-poster-aspect) +} +.bigposter.aspect-square { + aspect-ratio: 1; +} + +.title h1 { + margin-right: 1em; +} +.title .play { + display: inline-block; + font-size: small; + background-color: #52b83340; +} +.title .play::before { + content: "play_arrow"; + vertical-align: middle; +} +.title .mark_watched, +.title .mark_unwatched { + display: inline-block; +} +.title .mark_watched input, +.title .mark_unwatched input { + background-color: #80808040; +} + +/* TODO find a non-horrible way to put the icon there */ +/*.page.node .title .mark_watched input::before { + content: "done_all"; +} +.page.node .title .mark_unwatched input::before { + content: "undo"; +}*/ + +.dirup { + width: 100%; + font-size: large; + display: block; + text-align: center; + background-color: var(--background-light); + border-radius: 0.2em; + padding: 0.6em; + margin: 0.2em; + transition: filter 0.22s; +} +.dirup:hover { + filter: brightness(120%); +} + +@media (max-width: 500px) { + .page.node .bigposter { + margin: 1.5em; + } +} diff --git a/ui/client-style/src/nodecard.css b/ui/client-style/src/nodecard.css deleted file mode 100644 index 2c0b97f..0000000 --- a/ui/client-style/src/nodecard.css +++ /dev/null @@ -1,147 +0,0 @@ -/* - 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 - Copyright (C) 2023 tpart -*/ - -.poster * img, .bigposter img { - background-color: var(--image-loading-placeholder); -} -.poster a, .bigposter img { - border-radius: 1em; -} - -.card { - padding: 1em; -} - -.card .poster, -.card .poster img { - height: var(--card-size); -} -.aspect-port { - width: calc(var(--card-size) * var(--port-poster-aspect)); -} -.aspect-land { - width: calc(var(--card-size) * var(--land-poster-aspect)); -} -.aspect-thumb { - width: calc(var(--card-size) * var(--land-thumb-aspect)); -} -.aspect-square { - width: calc(var(--card-size)); -} - -.card .poster a img { - object-fit: cover; - object-position: center; - width: 100%; -} -.card .title, .card .subtitle { - text-align: center; - margin-top: 0.5em; - text-align: center; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} -.card .subtitle { - margin-top: 0.25em; -} -.card .subtitle * { - color: var(--font-dark); -} -.card .title a, .card .subtitle a { - text-decoration-line: none; -} -.card .title a:hover { - text-decoration-line: underline; -} -.card .title .subtitle { - color: grey; -} -.card .poster { - display: grid; -} -.card .poster a { - grid-area: 1 / 1; -} - -.card .poster .cardhover { - position: relative; - pointer-events: none; - grid-area: 1 / 1; - transition: opacity 0.3s; - background-color: var(--overlay-poster); - opacity: 0; - display: flex; - justify-content: center; - align-items: center; -} -.card .poster:hover .cardhover { - opacity: 1; -} - -.card .poster a { - overflow: hidden; -} - -.card .poster a img { - transition: transform 0.3s; -} - -.card .poster:hover a img { - transform: scale(1.1); -} - -.card .poster .cardhover a.play { - text-decoration: none; - width: 1em; - height: 1em; - line-height: 1; - margin: auto; - padding: 0.2em; - border-radius: 50%; - font-size: 2.2em; - pointer-events: all; - background-color: var(--overlay); - transition: background-color 0.3s, font-size 0.3s; -} -.card .poster .cardhover a.play:hover { - background-color: var(--overlay-hover); - font-size: 3em; -} -.card .poster .cardhover .props { - position: absolute; - bottom: 0px; - left: 0px; -} - -.widecard { - display: grid; - grid-template-columns: 1fr 10000fr; - width: 100%; -} -.widecard .poster { - grid-column: 1; -} -.widecard .details { - grid-column: 2; - margin: 1em; -} -.widecard .details .title { - font-size: large; -} -.widecard .details .props { - margin-bottom: 0.5em; -} - -@media (max-width: 750px) { - nav .library { - display: none; - } - .children { - justify-content: center; - } -} diff --git a/ui/client-style/src/nodepage.css b/ui/client-style/src/nodepage.css deleted file mode 100644 index 1a5b8ee..0000000 --- a/ui/client-style/src/nodepage.css +++ /dev/null @@ -1,108 +0,0 @@ -/* - 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 - Copyright (C) 2023 tpart -*/ -.backdrop { - width: calc(100% + 2 * var(--main-side-margin)); - height: min(50vh, calc(var(--backdrop-height) + 5em)); - margin-left: calc(-1 * var(--main-side-margin)); - margin-right: calc(-1 * var(--main-side-margin)); - margin-top: calc(-1 * var(--bar-height)); - margin-bottom: -5em; - -webkit-mask-image: linear-gradient( - rgba(0, 0, 0, 1), - transparent min(50vh, calc(var(--backdrop-height) + 5em)) - ); - mask-image: linear-gradient( - rgba(0, 0, 0, 1), - transparent min(50vh, calc(var(--backdrop-height) + 5em)) - ); - -webkit-mask-mode: alpha; - mask-mode: alpha; - pointer-events: none; - object-fit: cover; - object-position: center; -} -.page.node { - position: relative; - width: 100%; -} -.page.node .bigposter { - width: max(8em, 25%); - float: left; - margin: 3em; - margin-top: -1em; - height: 100%; -} -.page.node .bigposter img { - width: 100%; - height: 100%; - object-fit: cover; - object-position: center; - display: block; -} - -.bigposter.aspect-thumb { - aspect-ratio: var(--land-thumb-aspect) -} -.bigposter.aspect-land { - aspect-ratio: var(--land-poster-aspect) -} -.bigposter.aspect-port { - aspect-ratio: var(--port-poster-aspect) -} -.bigposter.aspect-square { - aspect-ratio: 1; -} - -.page.node .title h1 { - margin-right: 1em; -} -.page.node .title .play { - display: inline-block; - font-size: small; - background-color: #52b83340; -} -.page.node .title .play::before { - content: "play_arrow"; - vertical-align: middle; -} -.page.node .title .mark_watched, -.page.node .title .mark_unwatched { - display: inline-block; -} -.page.node .title .mark_watched input, -.page.node .title .mark_unwatched input { - background-color: #80808040; -} - -/* TODO find a non-horrible way to put the icon there */ -/*.page.node .title .mark_watched input::before { - content: "done_all"; -} -.page.node .title .mark_unwatched input::before { - content: "undo"; -}*/ - -.dirup { - width: 100%; - font-size: large; - display: block; - text-align: center; - background-color: var(--background-light); - border-radius: 0.2em; - padding: 0.6em; - margin: 0.2em; - transition: filter 0.22s; -} -.dirup:hover { - filter: brightness(120%); -} - -@media (max-width: 500px) { - .page.node .bigposter { - margin: 1.5em; - } -} -- cgit v1.3