Style update
This commit is contained in:
parent
32657844ea
commit
f6e8033398
1 changed files with 38 additions and 40 deletions
78
style.css
78
style.css
|
|
@ -1,16 +1,17 @@
|
|||
:root {
|
||||
--bg: #18120F;
|
||||
--panel: #241A16;
|
||||
--ink: #F5EADC;
|
||||
--muted: #B9A89A;
|
||||
--brand: #C9874A;
|
||||
--brand-dark: #E0A15F;
|
||||
--accent: #A38A63;
|
||||
--good: #A38A63;
|
||||
--warn: #C9874A;
|
||||
--bad: #D96B5F;
|
||||
--line: rgba(163,138,99,.32);
|
||||
--shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
|
||||
--bg: #0b0b0b;
|
||||
--panel: #1b1b1b;
|
||||
--field: #101010;
|
||||
--ink: #f2f2f2;
|
||||
--muted: #aaa;
|
||||
--brand: #2f8f3a;
|
||||
--brand-dark: #3baa48;
|
||||
--accent: #2d6cdf;
|
||||
--good: #2f8f3a;
|
||||
--warn: #d9822b;
|
||||
--bad: #d65b4f;
|
||||
--line: #333;
|
||||
--shadow: 0 8px 24px rgba(0, 0, 0, 0.40);
|
||||
--radius: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -19,7 +20,7 @@
|
|||
body {
|
||||
margin: 0;
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -28,8 +29,8 @@ body {
|
|||
top: 0;
|
||||
z-index: 50;
|
||||
padding: .35rem clamp(.45rem, 2vw, 1.25rem);
|
||||
background: linear-gradient(180deg, rgba(72,55,43,.82), rgba(58,43,34,.68));
|
||||
border-bottom: 1px solid rgba(163,138,99,.32);
|
||||
background: linear-gradient(180deg, rgba(58,58,58,.62), rgba(34,34,34,.48));
|
||||
border-bottom: 1px solid var(--line);
|
||||
box-shadow: 0 2px 16px #0008;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
|
@ -74,9 +75,9 @@ h2 { margin-bottom: 0; font-size: 1.1rem; }
|
|||
.header-entries {
|
||||
margin: .25rem 0 .25rem;
|
||||
padding: .25rem .35rem;
|
||||
border: 1px solid rgba(163,138,99,.26);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
background: rgba(24,18,15,.72);
|
||||
background: rgba(16,16,16,.84);
|
||||
}
|
||||
.header-entries.is-collapsed tbody { display: 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;
|
||||
padding: .22rem .45rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(201,135,74,.18);
|
||||
color: var(--brand-dark);
|
||||
border: 1px solid rgba(201,135,74,.50);
|
||||
background: rgba(217,130,43,.18);
|
||||
color: var(--warn);
|
||||
border: 1px solid rgba(217,130,43,.55);
|
||||
font-size: .72rem;
|
||||
font-weight: 800;
|
||||
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 {
|
||||
appearance: none;
|
||||
display: inline-flex;
|
||||
|
|
@ -110,7 +111,7 @@ h2 { margin-bottom: 0; font-size: 1.1rem; }
|
|||
min-height: 1.45rem;
|
||||
padding: .22rem .45rem;
|
||||
border-radius: 999px;
|
||||
background: #18120F;
|
||||
background: var(--field);
|
||||
color: var(--ink);
|
||||
border: 1px solid var(--accent);
|
||||
font-size: .72rem;
|
||||
|
|
@ -118,10 +119,10 @@ h2 { margin-bottom: 0; font-size: 1.1rem; }
|
|||
cursor: pointer;
|
||||
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 {
|
||||
margin-top: .15rem;
|
||||
border-top: 1px solid rgba(163,138,99,.24);
|
||||
border-top: 1px solid var(--line);
|
||||
padding-top: .1rem;
|
||||
}
|
||||
.planner-header-table th {
|
||||
|
|
@ -150,8 +151,8 @@ main {
|
|||
}
|
||||
|
||||
.card, .panel {
|
||||
background: rgba(36,26,22,.92);
|
||||
border: 1px solid rgba(163,138,99,.32);
|
||||
background: rgba(27,27,27,.88);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
|
@ -210,10 +211,10 @@ input, select, textarea {
|
|||
padding: .7rem .8rem;
|
||||
font: inherit;
|
||||
color: var(--ink);
|
||||
background: #18120F;
|
||||
background: var(--field);
|
||||
}
|
||||
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 {
|
||||
display: flex;
|
||||
|
|
@ -238,13 +239,13 @@ button {
|
|||
}
|
||||
button:hover { background: var(--brand-dark); transform: translateY(-1px); }
|
||||
button.ghost {
|
||||
background: #18120F;
|
||||
background: var(--field);
|
||||
color: var(--ink);
|
||||
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.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; }
|
||||
.help-text { color: var(--muted); margin: 0; font-size: .9rem; }
|
||||
.hidden { display: none !important; }
|
||||
|
|
@ -302,14 +303,14 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
|
|||
align-items: center;
|
||||
padding: .2rem .55rem;
|
||||
border-radius: 999px;
|
||||
background: #26383A;
|
||||
background: #333;
|
||||
color: var(--ink);
|
||||
font-size: .78rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
.pill.approved, .pill.confirmed { background: #1f3b32; color: var(--ink); }
|
||||
.pill.unpaid { background: rgba(201,135,74,.22); color: var(--brand-dark); }
|
||||
.important-col { background: rgba(163,138,99,.13); font-size: 1rem; }
|
||||
.pill.approved, .pill.confirmed { background: #17351a; color: var(--ink); }
|
||||
.pill.unpaid { background: rgba(217,130,43,.22); color: var(--brand-dark); }
|
||||
.important-col { background: rgba(47,143,58,.14); font-size: 1rem; }
|
||||
.balance-override-input {
|
||||
width: 5.2rem;
|
||||
padding: .28rem .35rem;
|
||||
|
|
@ -325,7 +326,7 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
|
|||
.warnings { display: grid; gap: .55rem; }
|
||||
.warning {
|
||||
border-left: 4px solid var(--warn);
|
||||
background: rgba(201,135,74,.16);
|
||||
background: rgba(217,130,43,.16);
|
||||
padding: .65rem .75rem;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
|
@ -397,7 +398,7 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
|
|||
gap: .12rem .32rem;
|
||||
align-items: center;
|
||||
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 td {
|
||||
|
|
@ -446,9 +447,6 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
|
|||
}
|
||||
.planner-body-table td:nth-child(1) {
|
||||
grid-column: 1 / 2;
|
||||
font-weight: 900;
|
||||
font-size: .78rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.planner-body-table td:nth-child(2) {
|
||||
grid-column: 2 / -1;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue