summaryrefslogtreecommitdiff
path: root/app/app.css
diff options
context:
space:
mode:
Diffstat (limited to 'app/app.css')
-rw-r--r--app/app.css305
1 files changed, 105 insertions, 200 deletions
diff --git a/app/app.css b/app/app.css
index f7c2b1c..1a24300 100644
--- a/app/app.css
+++ b/app/app.css
@@ -1,243 +1,148 @@
-*, *::before, *::after { box-sizing: border-box; }
-
-body {
- margin: 0;
- background: #030712;
- color: #e5e7eb;
- font-family: ui-sans-serif, system-ui, sans-serif;
- line-height: 1.5;
- -webkit-font-smoothing: antialiased;
-}
+/* ── Reset / base ── */
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { font-family: system-ui, sans-serif; background: #0f1117; color: #d1d5db; }
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;
+a:hover { text-decoration: underline; }
+
+input, select, textarea, button {
+ font: inherit;
+ background: #1f2937;
+ color: #f3f4f6;
+ border: 1px solid #374151;
+ border-radius: 4px;
+ padding: .375rem .625rem;
}
-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; }
+input:focus, select:focus, textarea:focus { outline: 1px solid #6366f1; }
+button { cursor: pointer; }
-/* ── Main ── */
+/* ── Layout ── */
-main {
- max-width: 48rem;
- margin: 0 auto;
- padding: 2rem 1rem;
-}
+.nav { background: #111827; border-bottom: 1px solid #1f2937; padding: .75rem 1.5rem; display: flex; gap: 1.5rem; align-items: center; }
+.nav-brand { font-weight: 700; color: #f9fafb; font-size: 1.1rem; }
+.nav a { font-size: .875rem; color: #9ca3af; }
+.nav a:hover { color: #f3f4f6; text-decoration: none; }
-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;
-}
+main { max-width: 760px; margin: 2rem auto; padding: 0 1.5rem; }
-/* ── Page header (← Title) ── */
+/* ── Page header ── */
-.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; }
+.page-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
+.page-header h1 { font-size: 1.5rem; font-weight: 700; color: #f9fafb; }
+.back { color: #6b7280; font-size: 1.25rem; text-decoration: none; }
+.back:hover { color: #9ca3af; }
/* ── 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; }
+.detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; }
+.detail-info h1 { font-size: 1.75rem; font-weight: 700; color: #f9fafb; }
+.detail-subtitle { display: flex; gap: .75rem; color: #6b7280; font-size: .875rem; margin-top: .25rem; }
+.detail-desc { color: #9ca3af; font-size: .875rem; margin-top: .5rem; white-space: pre-wrap; }
+.detail-actions { display: flex; gap: .5rem; flex-shrink: 0; }
-/* ── Home band list ── */
+/* ── Sections ── */
-.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; }
+section { margin-bottom: 2rem; }
+section h2 { font-size: 1rem; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .75rem; }
-/* ── Detail lists ── */
+/* ── Member list (detail view) ── */
.member-list { display: flex; flex-direction: column; gap: .5rem; }
-.member-list li { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
+.member-list li { display: flex; flex-direction: column; gap: .25rem; }
+.member-main { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.member-list a { color: #60a5fa; font-weight: 500; }
.member-list a:hover { color: #93c5fd; }
-.link-list { display: flex; flex-direction: column; gap: .375rem; }
-.link-list a { font-size: .875rem; color: #60a5fa; }
-.link-list a:hover { color: #93c5fd; }
+/* ── Period display (detail view) ── */
-/* ── 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; }
+.period-list { list-style: none; display: flex; flex-direction: column; gap: .125rem; padding-left: .75rem; border-left: 2px solid #374151; margin-top: .125rem; }
+.period-item { display: flex; gap: .5rem; align-items: baseline; font-size: .8rem; }
+.period-range { color: #9ca3af; }
+.period-note { color: #6b7280; }
-/* ── Meta footer ── */
+/* ── Link list ── */
-.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; }
+.link-list { display: flex; flex-direction: column; gap: .375rem; }
+.link-list a { color: #60a5fa; font-size: .875rem; }
+.link-list a:hover { color: #93c5fd; }
-/* ── Forms ── */
+/* ── Band list / home ── */
-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; }
+.band-list { display: flex; flex-direction: column; gap: .5rem; }
+.band-item { display: flex; align-items: center; gap: .75rem; padding: .75rem; background: #111827; border-radius: 6px; }
+.band-item a { font-weight: 500; color: #f3f4f6; flex: 1; }
+.band-item a:hover { color: #60a5fa; text-decoration: none; }
-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; }
+/* ── Meta ── */
+
+.meta { font-size: .75rem; color: #6b7280; display: flex; flex-direction: column; gap: .25rem; }
+.meta a { color: #6b7280; }
+.meta a:hover { color: #9ca3af; }
+.updated { color: #6b7280; }
+.muted { color: #6b7280; font-size: .875rem; }
/* ── 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 { display: inline-flex; align-items: center; padding: .375rem .875rem; border-radius: 4px; font-size: .875rem; background: #1f2937; border: 1px solid #374151; color: #d1d5db; text-decoration: none; }
+.btn:hover { background: #374151; text-decoration: none; }
+button[type="submit"], .btn-primary { background: #4f46e5; border-color: #4f46e5; color: #fff; padding: .375rem .875rem; border-radius: 4px; }
+button[type="submit"]:hover, .btn-primary:hover { background: #4338ca; }
+.btn-text { background: none; border: none; color: #60a5fa; font-size: .8rem; padding: .25rem .125rem; }
+.btn-text:hover { color: #93c5fd; }
+.btn-icon { background: none; border: none; color: #6b7280; font-size: .875rem; padding: .25rem .375rem; }
+.btn-icon:hover { color: #f3f4f6; }
+.edit, .history { font-size: .875rem; color: #6b7280; padding: .375rem .75rem; border: 1px solid #374151; border-radius: 4px; }
+.edit:hover, .history:hover { color: #d1d5db; border-color: #6b7280; text-decoration: none; }
+
+/* ── Badges ── */
+
+.badge { display: inline-flex; align-items: center; gap: .25rem; background: #1e3a5f; color: #93c5fd; font-size: .75rem; padding: .125rem .5rem; border-radius: 9999px; }
+.badge button { background: none; border: none; color: #60a5fa; font-size: .7rem; padding: 0; line-height: 1; }
+.badge button:hover { color: #f87171; }
-.btn-text { background: none; padding: 0; color: #60a5fa; font-size: .875rem; }
-.btn-text:hover { background: none; color: #93c5fd; }
+/* ── Form ── */
-.btn-icon { background: none; padding: .125rem .5rem; color: #6b7280; }
-.btn-icon:hover { background: none; color: #f87171; }
+form { display: flex; flex-direction: column; gap: 1rem; }
+form > div { display: flex; flex-direction: column; gap: .375rem; }
+form label { font-size: .875rem; color: #9ca3af; }
+form input, form select, form textarea { width: 100%; }
+.req { color: #f87171; }
+.error { font-size: .75rem; color: #f87171; }
+.mono { font-family: monospace; }
-/* ── Form components ── */
+/* ── Actions row ── */
-.actions { display: flex; gap: .75rem; padding-top: .5rem; }
-.error { color: #f87171; font-size: .875rem; margin-top: .25rem; }
+.actions { display: flex; gap: .75rem; align-items: center; padding-top: .5rem; }
-.links-form { display: flex; flex-direction: column; gap: .5rem; }
+/* ── Links form ── */
+
+.links-form { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
.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; }
+/* ── Members form (edit/new) ── */
+
+.members-form { display: flex; flex-direction: column; gap: .75rem; margin-bottom: .75rem; }
+
+.member-group { background: #111827; border-radius: 6px; overflow: hidden; }
+.member-group > .card-header { display: flex; justify-content: space-between; align-items: center; padding: .625rem .75rem; border-bottom: 1px solid #1f2937; }
+
+.member-card { padding: .75rem; border-top: 1px solid #1f2937; }
+.member-card:first-of-type { border-top: none; }
.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 { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.member-card .role-row .custom-input { width: 8rem; flex: none; }
+.card-name { font-size: .875rem; font-weight: 500; color: #e5e7eb; }
+
+/* ── Period row (edit/new form) ── */
+
+.period-row { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; }
+.period-row input { flex: 1; min-width: 0; font-size: .8rem; }
+.period-row .period-note { flex: 1.5; }
+.period-sep { color: #6b7280; flex-shrink: 0; font-size: .875rem; }
/* ── Revision list ── */
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-17 13:19:09 +0000