improve styles

radio4000 · Nov 10, 2024 · b7274a2 · b7274a2
1 parent ebbb6b3
commit b7274a2
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 14 deletions.
diff --git a/public/themes/classic.css b/public/themes/classic.css
@@ -46,7 +46,6 @@ r4-app {
 	--c-purple-light: #999fff;
 	--c-dark--accent: #9c8fff;
 	--c-dark-lighter: hsl(0deg 2.6% 13%);
-	--c-link: var(--c-purple);
 
 	/* new vars */
 	--c-bg-button: hsl(0, 0%, 98%);
@@ -66,6 +65,7 @@ r4-app[color-scheme='light'] {
 	--c-fg2: color-mix(in oklch, var(--c-fg) 100%, white 50%);
 	--c-bg: hsl(40, 6%, 90%);
 	--c-bg2: color-mix(in oklch, var(--c-bg) 100%, white 50%);
+	--c-link: var(--c-purple);
 }
 
 r4-app[color-scheme='dark'] {
@@ -79,16 +79,9 @@ r4-app[color-scheme='dark'] {
 	--c-bg-button: hsl(0deg 0% 23%);
 	--c-bg-input: hsl(0deg 0% 2%);
 	--c-shadow-input: none;
+	--c-link: var(--c-dark--accent);
 }
 
-r4-app a {
-	/* background-color: var(--c-light); */
-	/* padding: calc(var(--s) / 6) calc(var(--s) / 4); */
-
-	[color-scheme='dark'] & {
-		color: var(--c-dark--accent);
-	}
-}
 r4-app a:hover,
 r4-app a:active {
 	text-decoration: underline;
@@ -470,7 +463,6 @@ r4-dialog {
 	display: flex;
 	justify-content: center;
 	& form {
-		max-width: var(--s-form);
 		width: 100%;
 		padding: calc(var(--s) / 2);
 		border-radius: var(--s-radius);
@@ -507,6 +499,12 @@ r4-supabase-filters form {
 	flex-wrap: wrap;
 	justify-content: center;
 }
+r4-supabase-modifiers,
+r4-supabase-filters {
+	fieldset {
+		flex-direction: row;
+	}
+}
 r4-supabase-filters {
 	& form fieldset:last-of-type {
 		width: 100%;
@@ -589,7 +587,6 @@ r4-page-channel {
 		}
 		& r4-channel-card-body {
 			flex-basis: 100%;
-			padding: var(--s);
 			flex-direction: column;
 			& r4-channel-description {
 				text-align: center;
@@ -703,6 +700,7 @@ r4-page-settings {
 	& r4-password-update,
 	& details {
 		width: 100%;
+		max-width: 40rem;
 	}
 }
 label[for='token'] input[name='token'] {

diff --git a/public/themes/hash.css b/public/themes/hash.css
@@ -106,6 +106,7 @@ r4-app summary {
 r4-app form {
 	padding: calc(var(--s) / 2);
 	border-radius: var(--s-radius);
+	width: 100%;
 }
 r4-app summary,
 r4-app form legend,

diff --git a/src/components/r4-track-create.js b/src/components/r4-track-create.js
@@ -1,6 +1,5 @@
 import {sdk} from '../libs/sdk.js'
 import {fetchOEmbed} from '../libs/oembed.js'
-import {mediaUrlParser} from 'media-url-parser'
 import {parseUrl as parseDiscogsUrl, buildSearchUrl} from '../libs/discogs.js'
 import R4Form from './r4-form.js'
 

diff --git a/src/index.css b/src/index.css
@@ -129,8 +129,7 @@ r4-app fieldset {
 	padding: 0;
 	margin: 0;
 	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
+	flex-direction: column;
 }
 r4-app button,
 r4-app r4-layout::part(controls-button) {
@@ -541,6 +540,7 @@ r4-channel-card-body r4-channel-url a {
 /* supabase queries */
 r4-supabase-modifiers form {
 	display: flex;
+	flex-direction: column;
 	flex-wrap: wrap;
 }
 r4-supabase-modifiers input {
@@ -575,6 +575,11 @@ r4-dialog::part(dialog)::backdrop {
 	/* css variables do not seem to work here */
 	background-color: black;
 	opacity: 0.6;
+	width: 100%;
+}
+r4-dialog::part(dialog) {
+	width: 100%;
+	max-width: clamp(50vmax, 50rem, 100%);
 }
 r4-app dialog[inline] {
 	position: relative;
@@ -701,6 +706,9 @@ r4-query {
 	}
 	& fieldset {
 		padding: calc(var(--s) / 3);
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
 	}
 }
 r4-supabase-filter-search {
@@ -713,6 +721,7 @@ r4-supabase-modifiers,
 r4-supabase-filters {
 	& form {
 		display: flex;
+		flex-direction: row;
 		flex-wrap: wrap;
 		gap: var(--s);
 	}