20 lines
1.8 KiB
CSS
20 lines
1.8 KiB
CSS
:root { color-scheme: light dark; font-family: system-ui, sans-serif; line-height: 1.5; }
|
|
body { margin: 0; background: #eef2f7; color: #172033; }
|
|
main { width: min(64rem, calc(100% - 2rem)); margin: 4vh auto; padding: 2rem; background: white; border-radius: .75rem; box-shadow: 0 .5rem 2rem #17203318; }
|
|
section { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid #d0d5dd; }
|
|
header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: white; }
|
|
form { display: grid; gap: 1rem; }
|
|
header form { display: block; }
|
|
.inline { display: inline; margin-left: .5rem; }
|
|
.inline button { padding: .35rem .55rem; }
|
|
label { display: grid; gap: .35rem; font-weight: 600; }
|
|
input, textarea, select, button { box-sizing: border-box; padding: .7rem; font: inherit; border: 1px solid #8a94a6; border-radius: .35rem; }
|
|
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
|
|
.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { padding: .6rem; text-align: left; border-bottom: 1px solid #d0d5dd; white-space: nowrap; }
|
|
.danger { background: #b42318; }
|
|
.warning { padding: .75rem; border-left: .25rem solid #b54708; background: #fffaeb; color: #7a2e0e; }
|
|
button { border: 0; background: #3157d5; color: white; font-weight: 700; cursor: pointer; }
|
|
.error { padding: .75rem; border-left: .25rem solid #b42318; background: #fee4e2; color: #7a271a; }
|
|
@media (max-width: 40rem) { main { padding: 1rem; margin: 1rem; width: auto; } header { padding: 1rem; } .grid { grid-template-columns: 1fr; } }
|
|
@media (prefers-color-scheme: dark) { body { background: #111827; color: #e5e7eb; } main, header { background: #1f2937; } input, textarea, select { background: #111827; color: #e5e7eb; } }
|