diff --git a/app/static/css/style.css b/app/static/css/style.css index fcdcbea..4ea8a6f 100644 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -9,7 +9,9 @@ --danger: #ef4444; } -* { box-sizing: border-box; } +* { + box-sizing: border-box; +} body { margin: 0; @@ -19,23 +21,51 @@ body { line-height: 1.5; } -a { color: #a5b4fc; text-decoration: none; } -a:hover { text-decoration: underline; } +a { + color: #a5b4fc; + text-decoration: none; +} -.muted { color: var(--muted); } +a:hover { + text-decoration: underline; +} -.container { max-width: 1000px; margin: 0 auto; padding: 1.5rem; } +.muted { + color: var(--muted); +} + +.container { + max-width: 95%; + margin: 0 auto; + padding: 1.5rem; +} /* Top bar */ .topbar { - display: flex; align-items: center; gap: 1.5rem; + display: flex; + align-items: center; + gap: 1.5rem; padding: 0.75rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--border); } -.topbar .brand a { font-weight: 700; color: var(--text); } -.topbar nav { display: flex; gap: 1rem; } -.topbar .logout { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; } + +.topbar .brand a { + font-weight: 700; + color: var(--text); +} + +.topbar nav { + display: flex; + gap: 1rem; +} + +.topbar .logout { + margin-left: auto; + display: flex; + align-items: center; + gap: 0.75rem; +} /* Cards */ .card { @@ -45,57 +75,204 @@ a:hover { text-decoration: underline; } padding: 1.25rem; margin-bottom: 1.25rem; } -.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } -@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } } -h1 { margin-top: 0; } -h2 { margin-top: 0; font-size: 1.1rem; } +.grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.25rem; +} + +@media (max-width: 720px) { + .grid { + grid-template-columns: 1fr; + } +} + +h1 { + margin-top: 0; +} + +h2 { + margin-top: 0; + font-size: 1.1rem; +} /* Tables */ -.table { width: 100%; border-collapse: collapse; } -.table th, .table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: middle; } -.table th { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; } -.row-actions { display: flex; gap: 0.4rem; } +.table { + width: 100%; + border-collapse: collapse; +} + +.table th, +.table td { + text-align: left; + padding: 0.5rem 0.6rem; + border-bottom: 1px solid var(--border); + vertical-align: middle; +} + +.table th { + color: var(--muted); + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 0.04em; +} + +.row-actions { + display: flex; + gap: 0.4rem; +} /* Tags / definition lists */ .tag { - display: inline-block; background: var(--surface-2); border: 1px solid var(--border); - border-radius: 999px; padding: 0.05rem 0.55rem; margin: 0 0.2rem 0.2rem 0; font-size: 0.8rem; + display: inline-block; + background: var(--surface-2); + border: 1px solid var(--border); + border-radius: 999px; + padding: 0.05rem 0.55rem; + margin: 0 0.2rem 0.2rem 0; + font-size: 0.8rem; +} + +.kv { + display: grid; + grid-template-columns: auto 1fr; + gap: 0.4rem 1rem; +} + +.kv dt { + color: var(--muted); +} + +.kv dd { + margin: 0; +} + +.links { + padding-left: 1.1rem; } -.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; } -.kv dt { color: var(--muted); } -.kv dd { margin: 0; } -.links { padding-left: 1.1rem; } /* Forms */ -label { display: block; margin-bottom: 0.6rem; font-size: 0.9rem; } -input[type=text], input[type=email], input[type=password] { - display: block; width: 100%; margin-top: 0.25rem; - padding: 0.5rem; border-radius: 6px; border: 1px solid var(--border); - background: var(--bg); color: var(--text); +label { + display: block; + margin-bottom: 0.6rem; + font-size: 0.9rem; +} + +input[type=text], +input[type=email], +input[type=password] { + display: block; + width: 100%; + margin-top: 0.25rem; + padding: 0.5rem; + border-radius: 6px; + border: 1px solid var(--border); + background: var(--bg); + color: var(--text); +} + +.check { + display: flex; + align-items: center; + gap: 0.4rem; +} + +.check input { + width: auto; + margin: 0; +} + +.form-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.75rem 1rem; + align-items: end; +} + +.form-grid>button { + grid-column: 1 / -1; + justify-self: start; +} + +.roles-field { + grid-column: 1 / -1; + border: 1px solid var(--border); + border-radius: 6px; + padding: 0.6rem; +} + +.roles-field legend { + color: var(--muted); + padding: 0 0.4rem; +} + +.inline-edit { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + align-items: end; } -.check { display: flex; align-items: center; gap: 0.4rem; } -.check input { width: auto; margin: 0; } -.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; align-items: end; } -.form-grid > button { grid-column: 1 / -1; justify-self: start; } -.roles-field { grid-column: 1 / -1; border: 1px solid var(--border); border-radius: 6px; padding: 0.6rem; } -.roles-field legend { color: var(--muted); padding: 0 0.4rem; } -.inline-edit { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; } /* Buttons */ .btn { - font: inherit; cursor: pointer; border: 1px solid var(--border); - background: var(--surface-2); color: var(--text); - padding: 0.4rem 0.8rem; border-radius: 6px; + font: inherit; + cursor: pointer; + border: 1px solid var(--border); + background: var(--surface-2); + color: var(--text); + padding: 0.4rem 0.8rem; + border-radius: 6px; +} + +.btn:hover { + filter: brightness(1.1); +} + +.btn-primary { + background: var(--primary); + border-color: var(--primary); + color: #fff; +} + +.btn-danger { + background: transparent; + border-color: var(--danger); + color: #fca5a5; +} + +.btn-ghost { + background: transparent; } -.btn:hover { filter: brightness(1.1); } -.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; } -.btn-danger { background: transparent; border-color: var(--danger); color: #fca5a5; } -.btn-ghost { background: transparent; } /* Auth */ -.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 1rem; } -.auth-card { width: 100%; max-width: 360px; } -.auth-card h1 { margin: 0 0 0.25rem; font-size: 1.4rem; } -.auth-card button { width: 100%; margin-top: 0.5rem; } -.alert { background: rgba(239, 68, 68, 0.15); border: 1px solid var(--danger); color: #fca5a5; padding: 0.5rem 0.75rem; border-radius: 6px; margin-bottom: 0.75rem; } +.auth-shell { + min-height: 100vh; + display: grid; + place-items: center; + padding: 1rem; +} + +.auth-card { + width: 100%; + max-width: 360px; +} + +.auth-card h1 { + margin: 0 0 0.25rem; + font-size: 1.4rem; +} + +.auth-card button { + width: 100%; + margin-top: 0.5rem; +} + +.alert { + background: rgba(239, 68, 68, 0.15); + border: 1px solid var(--danger); + color: #fca5a5; + padding: 0.5rem 0.75rem; + border-radius: 6px; + margin-bottom: 0.75rem; +}