Tabular styles

radio4000 · Jun 4, 2024 · 242ccaa · 242ccaa
1 parent efcea2e
commit 242ccaa
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 12 deletions.
diff --git a/public/themes/tabular.css b/public/themes/tabular.css
@@ -1,13 +1,17 @@
 html {
-	font-size: 13px;
+	font-size: 14px;
 }
 
 r4-app {
 	--s: 1rem;
 	--s-radius: 3px;
-	--s-font: 13px;
+	--s-font: 14px;
 	--s-line-height: 1.5;
 	--font: system-ui, segoe ui, sans-serif, 'Segoe UI Symbol';
+	/* textarea height */
+	--s-textarea: 4em;
+	/* width of forms */
+	--s-form: 50ch;
 
 	/* in use */
 	--blue: #7A8DB3;
@@ -95,6 +99,7 @@ r4-app[color-scheme='light'] {
 
 	--dark: rgba(0,0,0,0.4);
 	--light: rgba(255,255,255,0.3);
+	--s-shadow: 	rgba(0, 0, 0, 0.12) 0px 4px 30px, rgba(0, 0, 0, 0.04) 0px 3px 17px, rgba(0, 0, 0, 0.04) 0px 2px 8px, rgba(0, 0, 0, 0.04) 0px 1px 1px;
 }
 
 r4-app[color-scheme='dark'] {
@@ -110,6 +115,7 @@ r4-app[color-scheme='dark'] {
 
 	--dark: rgba(0,0,0,0.8);
 	--light: rgba(255,255,255,0.2);
+	--s-shadow: rgba(0, 0, 0, 0.184) 0px 3px 8px, rgba(0, 0, 0, 0.184) 0px 2px 5px, rgba(0, 0, 0, 0.184) 0px 1px 1px;
 }
 
 r4-list-item:nth-child(odd) {
@@ -183,6 +189,7 @@ r4-app {
 
 	/* no margins */
 	button,
+	r4-dialog::part(button),
 	select,
 	input[type='text'],
 	input[type='number'],
@@ -218,6 +225,7 @@ r4-app {
 			border-color: var(--blue);
 		}
 	}
+
 	/* Text inputs */
 	input[type='text'],
 	input[type='number'],
@@ -227,16 +235,22 @@ r4-app {
 	input[type='url'],
 	textarea {
 	}
+
 	/* "Buttons" */
 	button,
 	select,
+	r4-dialog::part(button),
 	r4-layout::part(controls-button) {
 		background: var(--c-bg2);
 		cursor: initial;
 
 		&[disabled] {
 			opacity: 0.5;
 		}
+
+		&[role=primary] {
+			background: var(--c-accent1);
+		}
 	}
 
 	h1,
@@ -329,23 +343,44 @@ r4-button-play button {
 r4-app form legend,
 r4-app form label {
 	font-weight: bold;
+	color: var(--c-fg);
 }
 r4-app form slot[name='submit'] fieldset:last-of-type {
 	justify-content: flex-start;
 }
 r4-app form {
+	max-width: var(--s-form);
+
+	display: flex;
+	flex-flow: column;
+	gap: 1rem;
+
 	& input[type='text'],
 	& input[type='email'],
 	& input[type='password'],
 	& input[type='url'],
 	& textarea {
-		/* width: 100%; */
+		width: 100%;
 	}
 	& textarea {
 		min-height: var(--s-textarea);
 	}
 }
 
+/* Dialogs */
+r4-dialog::part(dialog) {
+	width: var(--s-form);
+	max-width: calc(100% - 4rem);
+	background: var(--c-bg2);
+	border: 0.5px solid var(--c-border);
+	border-radius: var(--s-radius);
+	box-shadow: var(--s-shadow);
+}
+
+r4-dialog form {
+	margin-top: 1rem;
+}
+
 r4-avatar {
 	max-width: none;
 }
@@ -385,6 +420,9 @@ r4-supabase-modifiers input[name="limit"] {
 r4-supabase-filter-search,
 r4-supabase-modifiers,
 r4-supabase-filters {
+	form {
+		flex-flow: row wrap;
+	}
 	& legend {
 		transform: translate(-20%, -50%);
 	}
@@ -427,6 +465,13 @@ r4-page-settings  {
 	}
 }
 
+/* Pages with padding hm */
+r4-page-add {
+	r4-page-main {
+		margin: 1rem;
+	}
+}
+
 r4-list,
 r4-page-channel {
 	a:has(r4-channel-name) {

diff --git a/src/components/r4-admin.js b/src/components/r4-admin.js
@@ -2,6 +2,15 @@ import {LitElement, html} from 'lit'
 import {createClient} from '@supabase/supabase-js'
 import {sdk} from '../libs/sdk'
 
+export const ONETIME_MAIL_DOMAINS = [
+	'clearmailhub.com',
+	'connectmailhub.com',
+	'emailnestpro.com',
+	'inboxmasters.com',
+	'rocketpostbox.com',
+	'trustymailpro.com',
+]
+
 /**
  * To use, be sure to pass in the two supabase keys.
  * Renders an admin dashboard that allows you to combat spam content and more.
@@ -88,15 +97,7 @@ export default class R4Admin extends LitElement {
 	}
 
 	isPotentiallySpam(user) {
-		const domains = [
-			'clearmailhub.com',
-			'connectmailhub.com',
-			'emailnestpro.com',
-			'inboxmasters.com',
-			'rocketpostbox.com',
-			'trustymailpro.com',
-		]
-		return domains.some((ltd) => user.email.includes(ltd))
+		return ONETIME_MAIL_DOMAINS.some((ltd) => user.email.includes(ltd))
 	}
 
 	render() {