build clean, v0.1 firefox only, pre-test

2026-08-10 14:29:54 -03:00
parent 42638eaaf9
commit d01238a9f1
11 changed files with 1061 additions and 3 deletions
--- a/src/ui.css
+++ b/src/ui.css
@@ -0,0 +1,149 @@
+/*
+ * (C)opyright 2026 by Ruben Carlo Benante <rcb@beco.cc>
+ * Licensed under the GNU General Public License v3.0 or later.
+ * See https://www.gnu.org/licenses/ and the LICENSE file.
+ */
+
+:root {
+	color-scheme: light dark;
+	--bg: #ffffff;
+	--fg: #1b1b1b;
+	--muted: #5c5c5c;
+	--line: #d6d6d6;
+	--accent: #2f6f4e;
+	--field: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg: #1e1e1e;
+		--fg: #ededed;
+		--muted: #a8a8a8;
+		--line: #3d3d3d;
+		--accent: #6cc294;
+		--field: #2a2a2a;
+	}
+}
+
+body {
+	margin: 0;
+	background: var(--bg);
+	color: var(--fg);
+	font: 15px/1.5 system-ui, sans-serif;
+}
+
+.page {
+	max-width: 34rem;
+	margin: 0 auto;
+	padding: 1.5rem 1.25rem 3rem;
+}
+
+.popup {
+	width: 20rem;
+	padding: 1rem;
+}
+
+h1 {
+	margin: 0 0 0.25rem;
+	font-size: 1.4rem;
+}
+
+h2 {
+	margin: 2rem 0 0.5rem;
+	font-size: 1rem;
+}
+
+.lede {
+	margin: 0 0 1.5rem;
+	color: var(--muted);
+}
+
+label {
+	display: block;
+	margin: 1rem 0 0.35rem;
+	font-weight: 600;
+}
+
+input[type='text'] {
+	width: 100%;
+	box-sizing: border-box;
+	padding: 0.5rem 0.6rem;
+	border: 1px solid var(--line);
+	border-radius: 6px;
+	background: var(--field);
+	color: inherit;
+	font: inherit;
+}
+
+input[type='text']:focus-visible {
+	outline: 2px solid var(--accent);
+	outline-offset: 1px;
+}
+
+input.invalid {
+	border-color: #c0392b;
+}
+
+.hint {
+	margin: 0.35rem 0 0;
+	color: var(--muted);
+	font-size: 0.85rem;
+}
+
+.check {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	margin-top: 1.25rem;
+	font-weight: 400;
+}
+
+.check input {
+	margin: 0;
+}
+
+.row {
+	display: flex;
+	align-items: center;
+	gap: 0.6rem;
+	margin-top: 1.5rem;
+	flex-wrap: wrap;
+}
+
+button {
+	padding: 0.5rem 1rem;
+	border: 1px solid transparent;
+	border-radius: 6px;
+	background: var(--accent);
+	color: #fff;
+	font: inherit;
+	cursor: pointer;
+}
+
+button.ghost {
+	background: transparent;
+	border-color: var(--line);
+	color: var(--fg);
+}
+
+button:disabled {
+	opacity: 0.5;
+	cursor: default;
+}
+
+#status {
+	color: var(--muted);
+	font-size: 0.9rem;
+}
+
+#status.error {
+	color: #c0392b;
+}
+
+.popup p {
+	margin: 0 0 0.75rem;
+}
+
+.popup .state {
+	font-weight: 600;
+}