simplize css

1 files changed, 246 insertions, 10 deletions

diff --git a/app/app.css b/app/app.css
index 99345d8..f7c2b1c 100644
--- a/app/app.css
+++ b/app/app.css
@@ -1,15 +1,251 @@
-@import "tailwindcss";
+*, *::before, *::after { box-sizing: border-box; }
 
-@theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+body {
+  margin: 0;
+  background: #030712;
+  color: #e5e7eb;
+  font-family: ui-sans-serif, system-ui, sans-serif;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
 }
 
-html,
-body {
-  @apply bg-white dark:bg-gray-950;
+a { color: inherit; text-decoration: none; }
+p { margin: 0; }
+h1, h2 { margin: 0; }
+ol, ul { list-style: none; padding: 0; margin: 0; }
+hr { border: none; border-top: 1px solid #1f2937; margin: 1.5rem 0; }
+section { margin-bottom: 1.5rem; }
+pre { background: #111827; border-radius: 6px; padding: 1rem; overflow-x: auto; font-size: .875rem; margin-top: 1rem; }
+
+/* ── Nav ── */
+
+nav { border-bottom: 1px solid #1f2937; }
+nav > div {
+  max-width: 48rem;
+  margin: 0 auto;
+  padding: .75rem 1rem;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+nav a { font-size: .875rem; color: #9ca3af; }
+nav a:hover { color: #f9fafb; }
+nav .logo { font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: -.025em; }
+
+/* ── Main ── */
+
+main {
+  max-width: 48rem;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+}
+
+h1 { font-size: 1.5rem; font-weight: 700; }
+h2 {
+  font-size: .6875rem;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  margin-bottom: .75rem;
+}
+
+/* ── Page header (← Title) ── */
+
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  margin-bottom: 1.5rem;
+}
+.page-header h1 { font-size: 1.25rem; font-weight: 600; }
+.back { color: #6b7280; }
+.back:hover { color: #e5e7eb; }
+
+/* ── Detail header ── */
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+.detail-info { flex: 1; min-width: 0; }
+.detail-subtitle { font-size: .875rem; color: #9ca3af; display: flex; gap: .75rem; margin-top: .25rem; }
+.detail-desc { font-size: .875rem; color: #d1d5db; line-height: 1.6; margin-top: .75rem; }
+.detail-actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
+.detail-actions .history { font-size: .875rem; color: #9ca3af; }
+.detail-actions .history:hover { color: #e5e7eb; }
+.detail-actions .edit {
+  font-size: .875rem;
+  background: #1f2937;
+  color: #e5e7eb;
+  padding: .375rem .75rem;
+  border-radius: 4px;
+}
+.detail-actions .edit:hover { background: #374151; }
+
+/* ── Home band list ── */
+
+.band-list li {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1.5rem;
+  padding: 1rem 0;
+  border-bottom: 1px solid #0f172a;
+}
+.band-list li:last-child { border-bottom: none; }
+.band-list .name-col { min-width: 0; }
+.band-list .name-col a { font-weight: 500; }
+.band-list .name-col a:hover { color: #fff; }
+.band-list .desc {
+  font-size: .875rem;
+  color: #6b7280;
+  margin-top: .125rem;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.band-list .info { font-size: .875rem; color: #6b7280; flex-shrink: 0; display: flex; gap: 1rem; padding-top: .125rem; }
+
+/* ── Detail lists ── */
+
+.member-list { display: flex; flex-direction: column; gap: .5rem; }
+.member-list li { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
+.member-list a { color: #60a5fa; font-weight: 500; }
+.member-list a:hover { color: #93c5fd; }
 
-  @media (prefers-color-scheme: dark) {
-    color-scheme: dark;
-  }
+.link-list { display: flex; flex-direction: column; gap: .375rem; }
+.link-list a { font-size: .875rem; color: #60a5fa; }
+.link-list a:hover { color: #93c5fd; }
+
+/* ── Badge ── */
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: .25rem;
+  background: #111827;
+  color: #9ca3af;
+  font-size: .75rem;
+  padding: .125rem .5rem;
+  border-radius: 3px;
+}
+.badge button { all: unset; cursor: pointer; color: #6b7280; line-height: 1; }
+.badge button:hover { color: #f87171; }
+
+/* ── Meta footer ── */
+
+.meta {
+  font-family: ui-monospace, monospace;
+  font-size: .75rem;
+  color: #374151;
+  display: flex;
+  flex-direction: column;
+  gap: .25rem;
+}
+.meta a:hover { color: #9ca3af; }
+.meta .updated { font-family: ui-sans-serif, system-ui, sans-serif; color: #6b7280; margin-top: .5rem; }
+
+/* ── Forms ── */
+
+form { display: flex; flex-direction: column; gap: 1.25rem; }
+label { display: block; font-size: .875rem; color: #d1d5db; margin-bottom: .25rem; }
+.req { color: #f87171; }
+.muted { font-size: .875rem; color: #6b7280; }
+.muted a { color: #60a5fa; }
+.muted a:hover { color: #93c5fd; }
+
+input, textarea {
+  display: block;
+  width: 100%;
+  background: #1f2937;
+  border: 1px solid #374151;
+  border-radius: 4px;
+  padding: .5rem .75rem;
+  color: #f3f4f6;
+  font: inherit;
+  font-size: .875rem;
 }
+input[type="hidden"] { display: none; }
+select {
+  background: #1f2937;
+  border: 1px solid #374151;
+  border-radius: 4px;
+  padding: .5rem .75rem;
+  color: #f3f4f6;
+  font: inherit;
+  font-size: .875rem;
+  width: auto;
+}
+input:focus, textarea:focus, select:focus { outline: none; border-color: #3b82f6; }
+textarea { resize: vertical; }
+input.mono { font-family: ui-monospace, monospace; }
+
+/* ── Buttons ── */
+
+button {
+  display: inline-flex;
+  align-items: center;
+  padding: .5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  font: inherit;
+  font-size: .875rem;
+  cursor: pointer;
+  background: #1f2937;
+  color: #d1d5db;
+}
+button:hover { background: #374151; }
+button[type="submit"] { background: #2563eb; color: #fff; font-weight: 500; }
+button[type="submit"]:hover { background: #3b82f6; }
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  padding: .5rem 1rem;
+  border-radius: 4px;
+  font-size: .875rem;
+  background: #1f2937;
+  color: #d1d5db;
+}
+.btn:hover { background: #374151; }
+
+.btn-text { background: none; padding: 0; color: #60a5fa; font-size: .875rem; }
+.btn-text:hover { background: none; color: #93c5fd; }
+
+.btn-icon { background: none; padding: .125rem .5rem; color: #6b7280; }
+.btn-icon:hover { background: none; color: #f87171; }
+
+/* ── Form components ── */
+
+.actions { display: flex; gap: .75rem; padding-top: .5rem; }
+.error { color: #f87171; font-size: .875rem; margin-top: .25rem; }
+
+.links-form { display: flex; flex-direction: column; gap: .5rem; }
+.link-row { display: flex; gap: .5rem; align-items: center; }
+.link-row input { width: auto; flex: 1; min-width: 0; }
+.link-row .label-input { flex: 0 0 7rem; }
+.link-row select { width: 9rem; flex-shrink: 0; }
+
+.members-form { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
+.member-card { background: #111827; border-radius: 6px; padding: .75rem; }
+.member-card .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
+.member-card .card-name { font-size: .875rem; font-weight: 500; color: #e5e7eb; }
+.member-card .badges { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .5rem; }
+.member-card .role-row { display: flex; gap: .5rem; align-items: center; }
+.member-card .role-row .custom-input { width: 8rem; flex: none; }
+
+/* ── Revision list ── */
+
+.rev-list { display: flex; flex-direction: column; gap: 1rem; }
+.rev { background: #111827; border-radius: 6px; padding: 1rem; }
+.rev-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
+.rev-main { flex: 1; min-width: 0; }
+.rev-message { font-weight: 500; color: #f3f4f6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rev-time { font-size: .75rem; color: #6b7280; margin-top: .25rem; }
+.rev-latest { font-size: .75rem; color: #60a5fa; flex-shrink: 0; }
+.rev-snap { font-size: .75rem; color: #9ca3af; margin-top: .75rem; display: flex; flex-direction: column; gap: .125rem; }