diff options
Diffstat (limited to 'theme/Brutalist')
| -rw-r--r-- | theme/Brutalist/main.css | 198 |
1 files changed, 198 insertions, 0 deletions
diff --git a/theme/Brutalist/main.css b/theme/Brutalist/main.css new file mode 100644 index 0000000..52f82d2 --- /dev/null +++ b/theme/Brutalist/main.css @@ -0,0 +1,198 @@ +:root { + font-family: sans-serif; + background: #eee; +} + +body { + margin: 0; +} + +main { + width: 100vw; + display: flex; + align-items: center; + flex-direction: column; +} + +header { + box-sizing: border-box; + width: calc(100vw - 64px); + background: black; + margin: 32px; + padding: 16px; + color: white; + display: grid; + grid-auto-flow: column; + grid-auto-columns: 1fr auto; + align-items: center; + + a { + color: white; + } + + frontend-name { + font-size: 0; + &::after { + font-size: large; + font-weight: bold; + content: "Brutalist Sounds"; + } + } + + #search-form { + input { + background: black; + border: 1px solid white; + color: white; + font-family: inherit; + font-size: small; + padding: 4px 8px; + &::placeholder { + color: #bbb; + } + } + } +} + +inline-display-module { + border: 1px solid black; + margin: 16px; + padding: 16px; + display: flex; + flex-direction: column; + gap: 16px; + height: fit-content; + max-height: 600px; + overflow-y: scroll; + box-sizing: border-box; + width: min(1000px, calc(100vw - 64px)); + background: white; + color: black; + + h2 { + top: -16px; + margin: -16px; + margin-bottom: 0; + position: sticky; + background: black; + color: white; + padding: 8px; + padding-left: 16px; + } + + module-description { + font-weight: bold; + } +} + +inline-header-module { + display: block; + padding: 16px; + + h2 { + font-size: xx-large; + } + + container-item { + display: none; + } +} + +playable-item, container-item, display-item, broadcast-summary { + display: block; + padding: 8px; + + item-first-titles { + margin: -8px; + margin-bottom: 8px; + background: black; + color: white; + padding: 0 8px; + display: grid; + grid-auto-flow: column; + grid-auto-columns: 1fr auto; + align-items: baseline; + } + + h3 { + margin: 0; + } + + secondary-title { + display: block; + font-weight: bold; + } + + tertiary-title { + display: block; + font-style: italic; + } + + synopsis { + display: block; + margin-top: 8px; + white-space: pre-wrap; + + details { + summary { + list-style: none; + &::after { + font-weight: bold; + content: ' Show more…'; + } + } + &[open] { + summary { + display: none; + } + } + } + } + + a { + font-style: italic; + display: block; + text-align: end; + &::after { + content: " »"; + } + } +} + +#aod_play_area, #single_item_promo { +padding: 0; +gap: 0; +h2 { + margin: 0px; +} +playable-item, display-item { + h3, secondary-title, tertiary-title, synopsis { + padding: 0 8px; + } + + a { + display: none; + } +} +} + +segment-item { + display: grid; + gap: 8px; + grid-auto-flow: column; + grid-auto-columns: 1fr auto auto; + border-bottom: 0.5px dashed black; + + primary-title { + font-weight: bold; + margin-inline-end: 12px; + } + tertiary-title { + display: none; + } + + offset-start::after { + margin-inline-start: 8px; + content: '—'; + } +} |
