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

Feriefridage logic improved, mobile styling

Browse source
This commit is contained in:
marijo 2026-06-09 11:20:11 +00:00
parent c48c26290e
commit 71aeb691df
2 changed files with 89 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

66
style.css
View file

@ -367,6 +367,7 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
@media (max-width: 1050px) {
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.header-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.two-col { grid-template-columns: 1fr; }
.form-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@ -374,10 +375,11 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
@media (max-width: 680px) {
body { font-size: 14px; }
.floating-header { padding: .25rem .3rem; }
.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .22rem; }
.cards, .header-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .18rem; }
.card { padding: .28rem .32rem; min-width: 0; }
.card .label { font-size: .52rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .value { font-size: .82rem; line-height: 1.05; }
.header-cards .card { flex-direction: column; align-items: center; gap: .02rem; padding: .18rem .16rem; }
.card .label { font-size: .48rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.card .value { font-size: .76rem; line-height: 1.05; }
.card .hint { display: none; }
.header-cards .card { padding: .14rem .2rem; gap: .18rem; }
.header-cards .card .label { font-size: .48rem; }
@ -422,20 +424,62 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
.header-warning, .header-action-button { min-height: 1.2rem; font-size: .62rem; padding: .14rem .3rem; }
main { padding: 0 .3rem 3rem; }
.planner-column-header { margin-top: .1rem; padding-top: .08rem; }
.planner-header-table th { padding: .14rem .24rem; font-size: .54rem; letter-spacing: .01em; line-height: 1; }
.planner-body-table td { padding: .32rem .24rem; }
.month-table { min-width: 600px; }
.month-table th:nth-child(1), .month-table td:nth-child(1) { width: 6.8rem; }
.planner-column-header { display: none; }
.planner-panel .table-wrap { overflow: visible; }
.month-table,
.planner-body-table,
.planner-body-table tbody { display: block; width: 100%; min-width: 0; }
.planner-body-table tr {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .18rem .28rem;
padding: .42rem 0;
border-bottom: 1px solid var(--line);
}
.planner-body-table td {
display: block;
border-bottom: 0;
padding: 0;
min-width: 0;
}
.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;
min-width: 0;
}
.planner-body-table td:nth-child(n+3) {
text-align: left;
}
.planner-body-table td:nth-child(3)::before { content: 'VD'; }
.planner-body-table td:nth-child(4)::before { content: 'FF'; }
.planner-body-table td:nth-child(5)::before { content: 'FLEX'; }
.planner-body-table td:nth-child(6)::before { content: 'Total'; }
.planner-body-table td:nth-child(n+3)::before {
display: block;
color: var(--muted);
font-size: .52rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: .12rem;
}
.month-table th:nth-child(1), .month-table td:nth-child(1),
.month-table th:nth-child(2), .month-table td:nth-child(2),
.month-table th:nth-child(3), .month-table td:nth-child(3),
.month-table th:nth-child(4), .month-table td:nth-child(4),
.month-table th:nth-child(5), .month-table td:nth-child(5),
.month-table th:nth-child(6), .month-table td:nth-child(6) { width: 5.2rem; }
.month-table td.entries { min-width: 10rem; }
.month-table th:nth-child(6), .month-table td:nth-child(6) { width: auto; }
.month-table td.entries { min-width: 0; }
.month-entry { margin: .05rem 0 .18rem; }
.planner-entry-meta { display: block; margin-left: 0; font-size: .64rem; }
.planner-entry-dates { font-size: .6rem; }
.balance-override-input { width: 4.15rem; padding: .22rem .25rem; font-size: .75rem; }
.balance-override-input { width: 100%; max-width: 4.8rem; padding: .22rem .25rem; font-size: .75rem; }
.important-col { border-radius: 8px; padding: .2rem .25rem !important; }
.modal { width: calc(100vw - .8rem); max-height: calc(100dvh - .8rem); padding: .75rem; overflow: auto; }
.modal-heading { margin-bottom: .7rem; }