marijo/go
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Style update

Browse source
This commit is contained in:
marijo 2026-06-09 12:40:25 +00:00
parent 32657844ea
commit f6e8033398
1 changed files with 38 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

78
style.css
View file

@ -1,16 +1,17 @@
:root { :root {
--bg: #18120F; --bg: #0b0b0b;
--panel: #241A16; --panel: #1b1b1b;
--ink: #F5EADC; --field: #101010;
--muted: #B9A89A; --ink: #f2f2f2;
--brand: #C9874A; --muted: #aaa;
--brand-dark: #E0A15F; --brand: #2f8f3a;
--accent: #A38A63; --brand-dark: #3baa48;
--good: #A38A63; --accent: #2d6cdf;
--warn: #C9874A; --good: #2f8f3a;
--bad: #D96B5F; --warn: #d9822b;
--line: rgba(163,138,99,.32); --bad: #d65b4f;
--shadow: 0 2px 16px rgba(0, 0, 0, 0.55); --line: #333;
--shadow: 0 8px 24px rgba(0, 0, 0, 0.40);
--radius: 14px; --radius: 14px;
} }
@ -19,7 +20,7 @@
body { body {
margin: 0; margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: radial-gradient(circle at top left, rgba(163,138,99,.16), transparent 32rem), radial-gradient(circle at top right, rgba(201,135,74,.14), transparent 30rem), var(--bg); background: linear-gradient(rgba(11,11,11,.82), rgba(11,11,11,.92)), var(--bg);
color: var(--ink); color: var(--ink);
} }
@ -28,8 +29,8 @@ body {
top: 0; top: 0;
z-index: 50; z-index: 50;
padding: .35rem clamp(.45rem, 2vw, 1.25rem); padding: .35rem clamp(.45rem, 2vw, 1.25rem);
background: linear-gradient(180deg, rgba(72,55,43,.82), rgba(58,43,34,.68)); background: linear-gradient(180deg, rgba(58,58,58,.62), rgba(34,34,34,.48));
border-bottom: 1px solid rgba(163,138,99,.32); border-bottom: 1px solid var(--line);
box-shadow: 0 2px 16px #0008; box-shadow: 0 2px 16px #0008;
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
} }
@ -74,9 +75,9 @@ h2 { margin-bottom: 0; font-size: 1.1rem; }
.header-entries { .header-entries {
margin: .25rem 0 .25rem; margin: .25rem 0 .25rem;
padding: .25rem .35rem; padding: .25rem .35rem;
border: 1px solid rgba(163,138,99,.26); border: 1px solid var(--line);
border-radius: 10px; border-radius: 10px;
background: rgba(24,18,15,.72); background: rgba(16,16,16,.84);
} }
.header-entries.is-collapsed tbody { display: none; } .header-entries.is-collapsed tbody { display: none; }
.header-entries thead { cursor: pointer; user-select: none; } .header-entries thead { cursor: pointer; user-select: none; }
@ -94,14 +95,14 @@ h2 { margin-bottom: 0; font-size: 1.1rem; }
min-height: 1.45rem; min-height: 1.45rem;
padding: .22rem .45rem; padding: .22rem .45rem;
border-radius: 999px; border-radius: 999px;
background: rgba(201,135,74,.18); background: rgba(217,130,43,.18);
color: var(--brand-dark); color: var(--warn);
border: 1px solid rgba(201,135,74,.50); border: 1px solid rgba(217,130,43,.55);
font-size: .72rem; font-size: .72rem;
font-weight: 800; font-weight: 800;
line-height: 1; line-height: 1;
} }
.header-warning.bad { background: rgba(126,59,50,.36); color: #F1B5A9; border-color: rgba(217,107,95,.55); } .header-warning.bad { background: rgba(214,91,79,.22); color: #f0aaa3; border-color: rgba(214,91,79,.55); }
.header-action-button { .header-action-button {
appearance: none; appearance: none;
display: inline-flex; display: inline-flex;
@ -110,7 +111,7 @@ h2 { margin-bottom: 0; font-size: 1.1rem; }
min-height: 1.45rem; min-height: 1.45rem;
padding: .22rem .45rem; padding: .22rem .45rem;
border-radius: 999px; border-radius: 999px;
background: #18120F; background: var(--field);
color: var(--ink); color: var(--ink);
border: 1px solid var(--accent); border: 1px solid var(--accent);
font-size: .72rem; font-size: .72rem;
@ -118,10 +119,10 @@ h2 { margin-bottom: 0; font-size: 1.1rem; }
cursor: pointer; cursor: pointer;
line-height: 1; line-height: 1;
} }
.header-action-button:hover { background: var(--accent); color: #18120F; border-color: var(--accent); transform: none; } .header-action-button:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); transform: none; }
.planner-column-header { .planner-column-header {
margin-top: .15rem; margin-top: .15rem;
border-top: 1px solid rgba(163,138,99,.24); border-top: 1px solid var(--line);
padding-top: .1rem; padding-top: .1rem;
} }
.planner-header-table th { .planner-header-table th {
@ -150,8 +151,8 @@ main {
} }
.card, .panel { .card, .panel {
background: rgba(36,26,22,.92); background: rgba(27,27,27,.88);
border: 1px solid rgba(163,138,99,.32); border: 1px solid var(--line);
border-radius: var(--radius); border-radius: var(--radius);
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
@ -210,10 +211,10 @@ input, select, textarea {
padding: .7rem .8rem; padding: .7rem .8rem;
font: inherit; font: inherit;
color: var(--ink); color: var(--ink);
background: #18120F; background: var(--field);
} }
textarea { resize: vertical; } textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(201,135,74,.22); border-color: var(--brand); } input:focus, select:focus, textarea:focus { outline: 3px solid rgba(217,130,43,.22); border-color: var(--brand); }
.checkbox-row { .checkbox-row {
display: flex; display: flex;
@ -238,13 +239,13 @@ button {
} }
button:hover { background: var(--brand-dark); transform: translateY(-1px); } button:hover { background: var(--brand-dark); transform: translateY(-1px); }
button.ghost { button.ghost {
background: #18120F; background: var(--field);
color: var(--ink); color: var(--ink);
border: 1px solid var(--accent); border: 1px solid var(--accent);
} }
button.ghost:hover { background: var(--accent); color: #18120F; } button.ghost:hover { background: var(--accent); color: var(--ink); }
button.small { padding: .36rem .55rem; font-size: .78rem; } button.small { padding: .36rem .55rem; font-size: .78rem; }
button.danger { background: #7E3B32; color: var(--ink); border: 1px solid #7E3B32; } button.danger { background: #5a2320; color: var(--ink); border: 1px solid #5a2320; }
.actions { display: flex; justify-content: flex-end; gap: .6rem; } .actions { display: flex; justify-content: flex-end; gap: .6rem; }
.help-text { color: var(--muted); margin: 0; font-size: .9rem; } .help-text { color: var(--muted); margin: 0; font-size: .9rem; }
.hidden { display: none !important; } .hidden { display: none !important; }
@ -302,14 +303,14 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
align-items: center; align-items: center;
padding: .2rem .55rem; padding: .2rem .55rem;
border-radius: 999px; border-radius: 999px;
background: #26383A; background: #333;
color: var(--ink); color: var(--ink);
font-size: .78rem; font-size: .78rem;
font-weight: 800; font-weight: 800;
} }
.pill.approved, .pill.confirmed { background: #1f3b32; color: var(--ink); } .pill.approved, .pill.confirmed { background: #17351a; color: var(--ink); }
.pill.unpaid { background: rgba(201,135,74,.22); color: var(--brand-dark); } .pill.unpaid { background: rgba(217,130,43,.22); color: var(--brand-dark); }
.important-col { background: rgba(163,138,99,.13); font-size: 1rem; } .important-col { background: rgba(47,143,58,.14); font-size: 1rem; }
.balance-override-input { .balance-override-input {
width: 5.2rem; width: 5.2rem;
padding: .28rem .35rem; padding: .28rem .35rem;
@ -325,7 +326,7 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
.warnings { display: grid; gap: .55rem; } .warnings { display: grid; gap: .55rem; }
.warning { .warning {
border-left: 4px solid var(--warn); border-left: 4px solid var(--warn);
background: rgba(201,135,74,.16); background: rgba(217,130,43,.16);
padding: .65rem .75rem; padding: .65rem .75rem;
border-radius: 12px; border-radius: 12px;
} }
@ -397,7 +398,7 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
gap: .12rem .32rem; gap: .12rem .32rem;
align-items: center; align-items: center;
padding: .18rem 0; padding: .18rem 0;
border-bottom: 1px solid rgba(163,138,99,.22); border-bottom: 1px solid rgba(51,51,51,.85);
} }
.compact-entries-table tbody tr:last-child { border-bottom: 0; } .compact-entries-table tbody tr:last-child { border-bottom: 0; }
.compact-entries-table td { .compact-entries-table td {
@ -446,9 +447,6 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
} }
.planner-body-table td:nth-child(1) { .planner-body-table td:nth-child(1) {
grid-column: 1 / 2; grid-column: 1 / 2;
font-weight: 900;
font-size: .78rem;
line-height: 1.1;
} }
.planner-body-table td:nth-child(2) { .planner-body-table td:nth-child(2) {
grid-column: 2 / -1; grid-column: 2 / -1;