summaryrefslogtreecommitdiff
path: root/theme
diff options
context:
space:
mode:
Diffstat (limited to 'theme')
-rw-r--r--theme/Brutalist/main.css288
-rw-r--r--theme/Default/main.css346
2 files changed, 319 insertions, 315 deletions
diff --git a/theme/Brutalist/main.css b/theme/Brutalist/main.css
index 52f82d2..e9b22ed 100644
--- a/theme/Brutalist/main.css
+++ b/theme/Brutalist/main.css
@@ -1,198 +1,198 @@
:root {
- font-family: sans-serif;
- background: #eee;
+ font-family: sans-serif;
+ background: #eee;
}
body {
- margin: 0;
+ margin: 0;
}
main {
- width: 100vw;
- display: flex;
- align-items: center;
- flex-direction: column;
+ 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;
+ 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;
- }
+ a {
+ color: white;
+ }
- frontend-name {
- font-size: 0;
- &::after {
- font-size: large;
- font-weight: bold;
- content: "Brutalist Sounds";
- }
+ frontend-name {
+ font-size: 0;
+ &::after {
+ font-size: large;
+ font-weight: bold;
+ content: "Brutalist Sounds";
}
+ }
- #search-form {
+ #search-form {
input {
- background: black;
- border: 1px solid white;
- color: white;
- font-family: inherit;
- font-size: small;
- padding: 4px 8px;
- &::placeholder {
- color: #bbb;
- }
- }
+ 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;
+ 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;
- }
+ h2 {
+ top: -16px;
+ margin: -16px;
+ margin-bottom: 0;
+ position: sticky;
+ background: black;
+ color: white;
+ padding: 8px;
+ padding-left: 16px;
+ }
- module-description {
- font-weight: bold;
- }
+ module-description {
+ font-weight: bold;
+ }
}
inline-header-module {
- display: block;
- padding: 16px;
+ display: block;
+ padding: 16px;
- h2 {
- font-size: xx-large;
- }
+ h2 {
+ font-size: xx-large;
+ }
- container-item {
- display: none;
- }
+ container-item {
+ display: none;
+ }
}
playable-item, container-item, display-item, broadcast-summary {
- display: block;
- padding: 8px;
+ 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;
- }
+ 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;
- }
+ h3 {
+ margin: 0;
+ }
- secondary-title {
- display: block;
- font-weight: bold;
- }
+ secondary-title {
+ display: block;
+ font-weight: bold;
+ }
- tertiary-title {
- display: block;
- font-style: italic;
- }
+ tertiary-title {
+ display: block;
+ font-style: italic;
+ }
- synopsis {
- display: block;
- margin-top: 8px;
- white-space: pre-wrap;
+ 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;
- }
- }
+ 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: " »";
- }
+ a {
+ font-style: italic;
+ display: block;
+ text-align: end;
+ &::after {
+ content: " »";
}
+ }
}
#aod_play_area, #single_item_promo {
-padding: 0;
-gap: 0;
-h2 {
+ padding: 0;
+ gap: 0;
+ h2 {
margin: 0px;
-}
-playable-item, display-item {
+ }
+ playable-item, display-item {
h3, secondary-title, tertiary-title, synopsis {
- padding: 0 8px;
+ padding: 0 8px;
}
a {
- display: none;
+ display: none;
}
-}
+ }
}
segment-item {
- display: grid;
- gap: 8px;
- grid-auto-flow: column;
- grid-auto-columns: 1fr auto auto;
- border-bottom: 0.5px dashed black;
+ 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;
- }
+ primary-title {
+ font-weight: bold;
+ margin-inline-end: 12px;
+ }
+ tertiary-title {
+ display: none;
+ }
- offset-start::after {
- margin-inline-start: 8px;
- content: '—';
- }
+ offset-start::after {
+ margin-inline-start: 8px;
+ content: '—';
+ }
}
diff --git a/theme/Default/main.css b/theme/Default/main.css
index b2892fb..23fe9bc 100644
--- a/theme/Default/main.css
+++ b/theme/Default/main.css
@@ -1,195 +1,195 @@
body {
- background: #eee;
- display: flex;
- flex-direction: column;
- align-items: center;
- font-size: 10pt;
- margin: 0;
- padding: 16px;
- gap: 16px;
- font-family: sans-serif;
+ background: #eee;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ font-size: 10pt;
+ margin: 0;
+ padding: 16px;
+ gap: 16px;
+ font-family: sans-serif;
}
a {
- text-decoration: none;
- color: #8a6040;
+ text-decoration: none;
+ color: #8a6040;
}
header, main {
- width: min(800px, calc(100vw - 32px));
- box-sizing: border-box;
- background: white;
- border-radius: 4px;
- overflow: clip;
- border: 2px solid grey;
+ width: min(800px, calc(100vw - 32px));
+ box-sizing: border-box;
+ background: white;
+ border-radius: 4px;
+ overflow: clip;
+ border: 2px solid grey;
}
header {
- display: grid;
- grid-auto-flow: column;
- grid-auto-columns: 1fr auto;
- align-items: center;
- background: #963;
+ display: grid;
+ grid-auto-flow: column;
+ grid-auto-columns: 1fr auto;
+ align-items: center;
+ background: #963;
- > * {
- padding: 8px;
- }
+ > * {
+ padding: 8px;
+ }
- a {
- background: linear-gradient(to right, #ca9a7a, #963);
- display: block;
- color: white;
- font-weight: bold;
- width: max-content;
- font-size: 0;
- &::after {
- font-size: 16pt;
- content: 'BBC Sounds';
- }
+ a {
+ background: linear-gradient(to right, #ca9a7a, #963);
+ display: block;
+ color: white;
+ font-weight: bold;
+ width: max-content;
+ font-size: 0;
+ &::after {
+ font-size: 16pt;
+ content: 'BBC Sounds';
}
+ }
}
inline-display-module {
- display: flex;
- flex-direction: column;
+ display: flex;
+ flex-direction: column;
- h2 {
- text-align: center;
- margin: 0;
- background: linear-gradient(to bottom, #ffeeca, #efba99);
- padding: 8px;
- border-top: 1px solid #daaa55;
- margin-top: 16px;
- }
-
- item-titles {
- display: grid;
- background: linear-gradient(to bottom, #fefefe, #efefef);
- padding: 8px;
- gap: 4px;
- border-top: 2px solid #eee;
- border-bottom: 1px solid #eee;
- }
- item-first-titles {
- grid-row: 1;
- display: grid;
- grid-auto-flow: column;
- grid-auto-columns: 1fr auto;
- align-items: baseline;
- }
- h3 {
- margin: 0;
- }
+ h2 {
+ text-align: center;
+ margin: 0;
+ background: linear-gradient(to bottom, #ffeeca, #efba99);
+ padding: 8px;
+ border-top: 1px solid #daaa55;
+ margin-top: 16px;
+ }
- item-network {
- grid-row: 1;
- grid-column: 2;
- }
- secondary-title {
- font-weight: bold;
- grid-row: 2;
- grid-column: 1;
- }
- tertiary-title {
- grid-row: 3;
- grid-column: 1;
- }
+ item-titles {
+ display: grid;
+ background: linear-gradient(to bottom, #fefefe, #efefef);
+ padding: 8px;
+ gap: 4px;
+ border-top: 2px solid #eee;
+ border-bottom: 1px solid #eee;
+ }
+ item-first-titles {
+ grid-row: 1;
+ display: grid;
+ grid-auto-flow: column;
+ grid-auto-columns: 1fr auto;
+ align-items: baseline;
+ }
+ h3 {
+ margin: 0;
+ }
- module-description, synopsis {
- white-space: pre-wrap;
- margin: 8px;
- display: block;
- }
+ item-network {
+ grid-row: 1;
+ grid-column: 2;
+ }
+ secondary-title {
+ font-weight: bold;
+ grid-row: 2;
+ grid-column: 1;
+ }
+ tertiary-title {
+ grid-row: 3;
+ grid-column: 1;
+ }
- details {
- summary {
- list-style: none;
- &::after {
- font-weight: bold;
- content: ' More…';
- }
- }
- &[open] summary {
- font-size: 0;
- &::after {
- font-size: 10pt;
- content: 'Less…';
- }
- }
- }
+ module-description, synopsis {
+ white-space: pre-wrap;
+ margin: 8px;
+ display: block;
+ }
- a {
- display: block;
- background: #efefef;
- padding: 4px;
- text-align: center;
+ details {
+ summary {
+ list-style: none;
+ &::after {
font-weight: bold;
+ content: ' More…';
+ }
}
-}
+ &[open] summary {
+ font-size: 0;
+ &::after {
+ font-size: 10pt;
+ content: 'Less…';
+ }
+ }
+ }
-inline-header-module {
+ a {
display: block;
- padding: 16px;
+ background: #efefef;
+ padding: 4px;
text-align: center;
- module-items {
- display: none;
- }
+ font-weight: bold;
+ }
+}
+
+inline-header-module {
+ display: block;
+ padding: 16px;
+ text-align: center;
+ module-items {
+ display: none;
+ }
}
#listen_sign_in_upsell {
-h2 { margin-top: 0; }
-module-description::after {
+ h2 { margin-top: 0; }
+ module-description::after {
display: block;
margin-top: 8px;
content: "Please note this is an unofficial frontend to BBC services and is not affiliated with or endorsed by the BBC in any way.";
-}
+ }
}
inline-display-module:first-child h2 { margin-top: 0; }
#listen_live {
-overflow-x: scroll;
+ overflow-x: scroll;
-module-description {
+ module-description {
display: none;
-}
+ }
-h2 {
+ h2 {
position: sticky;
left: 0;
-}
+ }
-playable-item {
+ playable-item {
display: block;
border-right: 1px solid #ccc;
width: 300px;
background: #eee;
-}
+ }
-module-items {
+ module-items {
display: flex;
flex-direction: row;
overflow-x: scroll;
border-bottom: 1px solid #ccc;
width: max-content;
-}
+ }
}
#single_item_promo {
-margin: 32px;
-border: 1px solid #963;
-border-radius: 4px;
-overflow: clip;
-> module-items > display-item > item-titles {
+ margin: 32px;
+ border: 1px solid #963;
+ border-radius: 4px;
+ overflow: clip;
+ > module-items > display-item > item-titles {
background: #ffeecb;
border: none;
-}
-h2 { display: none; }
+ }
+ h2 { display: none; }
}
#categories {
-display: flex;
+ display: flex;
-container-item {
+ container-item {
display: flex;
align-items: baseline;
background: #efefef;
@@ -197,54 +197,58 @@ container-item {
border-bottom: 1px solid #aaa;
item-titles {
- background: none;
- border: none;
+ background: none;
+ border: none;
}
a {
- font-size: 0;
- &::after {
- font-size: 10pt;
- content: "view category »"
- }
+ font-size: 0;
+ &::after {
+ font-size: 10pt;
+ content: "view category »"
+ }
}
-}
+ }
}
segment-item {
- display: grid;
- grid-template-columns: 1fr auto auto;
- align-items: baseline;
- padding: 0 8px 0 0;
- background: linear-gradient(to bottom, #fff, #f8f8f8);
- border-bottom: 1px solid #ccc;
+ display: grid;
+ grid-template-columns: 1fr auto auto;
+ align-items: baseline;
+ padding: 0 8px 0 0;
+ background: linear-gradient(to bottom, #fff, #f8f8f8);
+ border-bottom: 1px solid #ccc;
- item-titles {
- background: none;
- border: none;
- }
+ item-titles {
+ background: none;
+ border: none;
+ }
- primary-title {
- grid-row: 1;
- grid-column: 1;
- }
- secondary-title {
- grid-row: 2;
- grid-column: 1;
- }
- tertiary-title {
- white-space: pre-wrap;
- font-size: 8pt;
- }
- offset-start {
- grid-row: 1;
- grid-column: 2;
- &::after {
- content: '—';
- }
- }
- offset-end {
- grid-row: 1;
- grid-column: 3;
+ primary-title {
+ grid-row: 1;
+ grid-column: 1;
+ }
+ secondary-title {
+ grid-row: 2;
+ grid-column: 1;
+ }
+ tertiary-title {
+ white-space: pre-wrap;
+ font-size: 8pt;
+ }
+ offset-start {
+ grid-row: 1;
+ grid-column: 2;
+ &::after {
+ content: '—';
}
+ }
+ offset-end {
+ grid-row: 1;
+ grid-column: 3;
+ }
+}
+
+#aod_play_area playable-item a:first-of-type {
+ display: none;
}
generated by cgit v1.3 (git 2.53.0) at 2026-07-21 23:12:14 +0000