53 lines
2.5 KiB
CSS
53 lines
2.5 KiB
CSS
:root { color-scheme: dark; }
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
|
background: #12131a; color: #e8e9ed; line-height: 1.45;
|
|
}
|
|
nav {
|
|
display: flex; align-items: center; gap: 16px; padding: 10px 20px;
|
|
background: #1a1c26; border-bottom: 1px solid #2a2d3a;
|
|
}
|
|
nav a { color: #9fb4ff; text-decoration: none; font-weight: 600; }
|
|
nav a:hover { color: #c7d3ff; }
|
|
nav .spacer { flex: 1; }
|
|
nav .who { color: #8a8da0; font-size: 0.9em; }
|
|
main { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }
|
|
h1 { font-size: 1.6em; margin-top: 0; }
|
|
h2 { font-size: 1.15em; margin-top: 28px; color: #b9bdd0; }
|
|
.card { background: #1a1c26; border: 1px solid #2a2d3a; border-radius: 10px; padding: 24px; }
|
|
.card.narrow { max-width: 380px; margin: 60px auto; }
|
|
form label { display: block; margin: 10px 0 2px; font-size: 0.85em; color: #9aa0b5; }
|
|
input, select, textarea {
|
|
width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid #34384a;
|
|
background: #0f1016; color: #e8e9ed; font: inherit;
|
|
}
|
|
form.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
|
form.inline input, form.inline select { width: auto; }
|
|
form.filters input { width: 220px; }
|
|
form.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; max-width: 760px; }
|
|
form.grid .wide { grid-column: 1 / -1; }
|
|
button {
|
|
padding: 8px 16px; border: 0; border-radius: 6px; cursor: pointer;
|
|
background: #3b5bdb; color: #fff; font: inherit; font-weight: 600;
|
|
}
|
|
button:hover { background: #4c6ef5; }
|
|
button.ghost { background: transparent; border: 1px solid #34384a; color: #c7cadb; }
|
|
button.danger { background: #b03a3a; }
|
|
button.danger:hover { background: #d14a4a; }
|
|
table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.95em; }
|
|
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid #262936; }
|
|
th { color: #9aa0b5; font-weight: 600; }
|
|
tr:hover td { background: #171923; }
|
|
.cards { display: flex; gap: 14px; flex-wrap: wrap; }
|
|
.stat { flex: 1; min-width: 120px; background: #1a1c26; border: 1px solid #2a2d3a;
|
|
border-radius: 10px; padding: 16px; text-align: center; }
|
|
.stat b { display: block; font-size: 1.7em; }
|
|
.stat span { color: #8a8da0; font-size: 0.85em; }
|
|
.error { color: #ff8787; }
|
|
.muted { color: #8a8da0; }
|
|
.cover { max-width: 200px; border-radius: 8px; border: 1px solid #2a2d3a; margin-bottom: 10px; }
|
|
code { background: #0f1016; padding: 2px 6px; border-radius: 4px; }
|
|
label.check { display: flex; align-items: center; gap: 6px; margin: 0; }
|
|
label.check input { width: auto; }
|