1 files changed, 250 insertions, 0 deletions
diff --git a/theme/Default/main.css b/theme/Default/main.css
new file mode 100644
index 0000000..b2892fb
--- /dev/null
+++ b/theme/Default/main.css
@@ -0,0 +1,250 @@
+body {
+	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;
+}
+
+header, main {
+	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;
+
+	> * {
+		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';
+		}
+	}
+}
+
+inline-display-module {
+	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;
+	}
+
+	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;
+	}
+
+	module-description, synopsis {
+		white-space: pre-wrap;
+		margin: 8px;
+		display: block;
+	}
+
+	details {
+		summary {
+			list-style: none;
+			&::after {
+				font-weight: bold;
+				content: ' More…';
+			}
+		}
+		&[open] summary {
+			font-size: 0;
+			&::after {
+				font-size: 10pt;
+				content: 'Less…';
+			}
+		}
+	}
+
+	a {
+		display: block;
+		background: #efefef;
+		padding: 4px;
+		text-align: center;
+		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 {
+	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;
+
+module-description {
+	display: none;
+}
+
+h2 {
+	position: sticky;
+	left: 0;
+}
+
+playable-item {
+	display: block;
+	border-right: 1px solid #ccc;
+	width: 300px;
+	background: #eee;
+}
+
+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 {
+	background: #ffeecb;
+	border: none;
+}
+h2 { display: none; }
+}
+
+#categories {
+display: flex;
+
+container-item {
+	display: flex;
+	align-items: baseline;
+	background: #efefef;
+	border-top: 1px solid #fec;
+	border-bottom: 1px solid #aaa;
+
+	item-titles {
+		background: none;
+		border: none;
+	}
+
+	a {
+		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;
+
+	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;
+	}
+}