First commit

ui/generator.css

@@ -0,0 +1,191 @@
+/*!
+ * Relibre
+ * Copyleft (🄯) 2025 James Osborne
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+:root {
+  --bg: #0b0b0c;
+  --panel: #121214;
+  --fg: #eaeaea;
+  --muted: #9aa0a6;
+  --warn: #ffc107;
+  --acc: #e53935;
+  --acc2: #ff7aa5;
+  --br: 14px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+}
+
+.wrap {
+  max-width: 980px;
+  margin: 32px auto;
+  padding: 0 16px;
+}
+
+h1 {
+  margin: 0 0 6px;
+}
+
+.sub {
+  margin: 0 0 16px;
+  color: var(--muted);
+}
+
+.warn {
+  color: var(--warn);
+  font-weight: 600;
+}
+
+section {
+  background: var(--panel);
+  border: 1px solid #1e1f22;
+  border-radius: var(--br);
+  padding: 16px;
+  margin: 16px 0;
+}
+
+label {
+  display: block;
+  margin: 10px 0;
+  font-weight: 600;
+}
+
+input[type="text"],
+input[type="url"],
+input[type="file"],
+textarea,
+select {
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid #2a2b2f;
+  background: #0f0f11;
+  color: var(--fg);
+  font: inherit;
+}
+
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding-right: 36px; /* room for the chevron */
+  background-image: url("data:image/svg+xml;utf8,\
+<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 18px 18px;
+}
+
+/* Focus to match buttons/inputs */
+select:focus {
+  outline: none;
+  border-color: #3a3c40;
+  box-shadow: 0 0 0 2px rgba(229,57,53,.35);
+}
+
+/* Dark dropdown list (supported in modern browsers) */
+select option {
+  background: #121214;
+  color: var(--fg);
+}
+
+
+textarea {
+  min-height: 120px;
+  resize: vertical;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+}
+
+.grid2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.hidden {
+  display: none;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+button {
+  background: #202226;
+  color: var(--fg);
+  border: 1px solid #2a2b2f;
+  padding: 10px 14px;
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+button.primary {
+  background: var(--acc);
+  border-color: transparent;
+  color: #fff;
+}
+
+button:hover {
+  filter: brightness(1.08);
+}
+
+button[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+button + button {
+  margin-left: 6px;
+}
+
+#status,
+#envStatus {
+  color: var(--muted);
+  font-size: 14px;
+}
+
+footer {
+  color: var(--muted);
+  margin: 28px 0 8px;
+}
+
+details.tip {
+  margin: 8px 0 16px;
+}
+
+details.tip summary {
+  cursor: pointer;
+  color: var(--acc2);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.help-text {
+  display: block;
+  font-size: 0.85em;
+  color: var(--muted);
+  margin-top: 4px;
+}