Mobile compatibility, and removed unnecessary settings
This commit is contained in:
parent
098844ef7b
commit
57463e3865
4 changed files with 88 additions and 29 deletions
87
style.css
87
style.css
|
|
@ -355,27 +355,72 @@ tbody tr:hover { background: rgba(255,255,255,.04); }
|
|||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.floating-header { padding: .3rem .4rem; }
|
||||
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .28rem; }
|
||||
.card { padding: .34rem .4rem; }
|
||||
.card .label { font-size: .6rem; }
|
||||
.card .value { font-size: .95rem; }
|
||||
body { font-size: 14px; }
|
||||
.floating-header { padding: .25rem .3rem; }
|
||||
.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .22rem; }
|
||||
.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; }
|
||||
.card .hint { display: none; }
|
||||
.quick-flex-form { margin-top: .06rem; }
|
||||
.quick-flex-form input { padding: .26rem .32rem; font-size: .9rem; }
|
||||
.quick-flex-form button { padding: .26rem .38rem; }
|
||||
.header-entries { padding: .18rem .25rem; margin: .18rem 0; }
|
||||
.header-entries .table-wrap { overflow-x: auto; overflow-y: visible; }
|
||||
.compact-entries-table { font-size: .68rem; }
|
||||
.compact-entries-table th, .compact-entries-table td { padding: .18rem .25rem; }
|
||||
.header-warning-row { gap: .3rem; }
|
||||
.header-warning, .header-action-button { min-height: 1.32rem; font-size: .68rem; padding: .18rem .36rem; }
|
||||
main { padding: 0 .4rem 3rem; }
|
||||
.planner-column-header { margin-top: .18rem; padding-top: .16rem; }
|
||||
|
||||
.header-entries { padding: .16rem .22rem; margin: .16rem 0; }
|
||||
.header-entries .table-wrap { overflow-x: visible; overflow-y: visible; }
|
||||
.compact-entries-table,
|
||||
.compact-entries-table tbody { display: block; width: 100%; }
|
||||
.compact-entries-table thead { display: none; }
|
||||
.compact-entries-table tr {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) repeat(4, auto);
|
||||
gap: .12rem .32rem;
|
||||
align-items: center;
|
||||
padding: .18rem 0;
|
||||
border-bottom: 1px solid rgba(163,138,99,.22);
|
||||
}
|
||||
.compact-entries-table tr:last-child { border-bottom: 0; }
|
||||
.compact-entries-table td {
|
||||
display: block;
|
||||
border-bottom: 0;
|
||||
padding: 0;
|
||||
white-space: normal;
|
||||
line-height: 1.05;
|
||||
}
|
||||
.compact-entries-table td:nth-child(1) { grid-column: 1 / -1; min-width: 0; }
|
||||
.compact-entries-table td:nth-child(2)::before { content: 'wd '; color: var(--muted); font-weight: 700; }
|
||||
.compact-entries-table td:nth-child(3)::before { content: 'vd '; color: var(--muted); font-weight: 700; }
|
||||
.compact-entries-table td:nth-child(4)::before { content: 'ff '; color: var(--muted); font-weight: 700; }
|
||||
.compact-entries-table td:nth-child(5)::before { content: 'fl '; color: var(--muted); font-weight: 700; }
|
||||
.compact-entries-table td:nth-child(6) { grid-column: 1 / 2; }
|
||||
.compact-entries-table td:nth-child(7) { grid-column: 2 / -1; }
|
||||
.compact-entries-table .entry-actions { justify-content: flex-end; gap: .18rem; }
|
||||
.compact-entries-table .pill { font-size: .62rem; padding: .08rem .28rem; }
|
||||
.compact-entries-table button.small { padding: .2rem .34rem; font-size: .62rem; }
|
||||
.entry-date { font-size: .6rem; }
|
||||
|
||||
.header-warning-row { gap: .25rem; align-items: center; }
|
||||
.header-warning-list { flex: 1 1 auto; }
|
||||
.header-action-list { flex: none; }
|
||||
.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: .14rem; padding-top: .12rem; }
|
||||
.planner-header-table th,
|
||||
.planner-body-table td { padding: .42rem .32rem; }
|
||||
.planner-header-table th { font-size: .68rem; }
|
||||
.month-table { min-width: 680px; }
|
||||
.form-grid, .form-grid.compact { grid-template-columns: 1fr; }
|
||||
th, td { padding: .55rem .45rem; }
|
||||
.planner-body-table td { padding: .32rem .24rem; }
|
||||
.planner-header-table th { font-size: .58rem; letter-spacing: .02em; }
|
||||
.month-table { min-width: 600px; }
|
||||
.month-table th:nth-child(1), .month-table td:nth-child(1) { width: 6.8rem; }
|
||||
.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-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; }
|
||||
|
||||
.modal { width: calc(100vw - .8rem); max-height: calc(100dvh - .8rem); padding: .75rem; overflow: auto; }
|
||||
.modal-heading { margin-bottom: .7rem; }
|
||||
.form-grid, .form-grid.compact { grid-template-columns: 1fr; gap: .55rem; }
|
||||
input, select, textarea { padding: .62rem .68rem; }
|
||||
th, td { padding: .45rem .35rem; }
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue