From e2f492ccae9afcc98ae7eb76bb94dc973aed60d8 Mon Sep 17 00:00:00 2001 From: yyamashita Date: Sat, 9 May 2026 14:11:33 +0900 Subject: simplize css --- app/app.css | 256 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 246 insertions(+), 10 deletions(-) (limited to 'app/app.css') 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; } -- cgit v1.2.3