diff --git a/src/assets/layout.css b/src/assets/layout.css index 5236ae0..7e15b52 100644 --- a/src/assets/layout.css +++ b/src/assets/layout.css @@ -2,10 +2,10 @@ :root { /* Layout */ --row-h: 2.2em; - --label-w: minmax(4em, 8%); - --cell-w: 1fr; - --cell-h: 12vh; - --overlay-w: minmax(3rem, 5%); + --week-w: 3em; + --day-w: 1fr; + --row-h: 12vh; + --month-w: 4em; } /* Layout & typography */ @@ -69,7 +69,7 @@ header { .calendar-header, #calendar-header { display: grid; - grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w); + grid-template-columns: var(--week-w) repeat(7, var(--day-w)) var(--month-w); border-bottom: 0.2em solid var(--muted); align-items: last baseline; flex-shrink: 0; @@ -107,7 +107,7 @@ header { top: 0; right: 0; bottom: 0; - width: var(--overlay-w); + width: var(--month-w); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; @@ -132,10 +132,10 @@ header { /* Week row: label + 7-day grid + jogwheel column */ .week-row { display: grid; - grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w); + grid-template-columns: var(--week-w) repeat(7, var(--day-w)) var(--month-w); position: relative; overflow: visible; - height: var(--cell-h); + height: var(--row-h); scroll-snap-align: start; width: 100%; } @@ -152,7 +152,7 @@ header { } .week-label { - height: var(--cell-h); + height: var(--row-h); } /* 7-day grid inside each week row */ .week-row > .days-grid { diff --git a/src/components/CalendarDay.vue b/src/components/CalendarDay.vue index 27d29fd..70fb940 100644 --- a/src/components/CalendarDay.vue +++ b/src/components/CalendarDay.vue @@ -46,7 +46,7 @@ const props = defineProps({ padding: 0.25em; overflow: hidden; width: 100%; - height: var(--cell-h); + height: var(--row-h); font-weight: 700; transition: background-color 0.15s ease; } diff --git a/src/components/CalendarHeader.vue b/src/components/CalendarHeader.vue index c414699..0b52a16 100644 --- a/src/components/CalendarHeader.vue +++ b/src/components/CalendarHeader.vue @@ -119,7 +119,7 @@ const weekdayNames = computed(() => { diff --git a/src/components/CalendarWeek.vue b/src/components/CalendarWeek.vue index fd0cbe6..b482276 100644 --- a/src/components/CalendarWeek.vue +++ b/src/components/CalendarWeek.vue @@ -57,9 +57,9 @@ const handleEventClick = (payload) => { diff --git a/src/components/EventDialog.vue b/src/components/EventDialog.vue index d0539e4..55a579a 100644 --- a/src/components/EventDialog.vue +++ b/src/components/EventDialog.vue @@ -696,7 +696,7 @@ const recurrenceSummary = computed(() => { outline-offset: 0.125em; cursor: pointer; appearance: none; - width: 3em; + width: 80%; height: 1em; } @@ -711,8 +711,8 @@ const recurrenceSummary = computed(() => { } .ec-btn { - border: 0.0625em solid var(--muted); - background: transparent; + background: none; + border: none; color: var(--ink); padding: 0.5em 0.8em; border-radius: 0.4em; @@ -883,63 +883,6 @@ const recurrenceSummary = computed(() => { 0 0 0 1px var(--input-focus), 0 0 0 4px rgba(37, 99, 235, 0.15); } -.mini-stepper { - display: inline-flex; - align-items: center; - background: var(--panel-alt); - border: 1px solid var(--input-border); - border-radius: 0.5rem; - overflow: hidden; - font-size: 0.7rem; - height: 1.9rem; -} -.mini-stepper .step { - background: transparent; - border: none; - color: var(--ink); - padding: 0 0.55rem; - cursor: pointer; - font-size: 0.9rem; - line-height: 1; - font-weight: 600; - display: flex; - align-items: center; - justify-content: center; - height: 100%; - transition: - background-color 0.15s ease, - color 0.15s ease; -} -.mini-stepper .step:hover:not(:disabled) { - background: var(--pill-hover-bg); -} -.mini-stepper .step:disabled { - opacity: 0.35; - cursor: default; -} -.mini-stepper .value { - min-width: 1.6rem; - text-align: center; - font-variant-numeric: tabular-nums; - font-weight: 600; - letter-spacing: 0.02em; -} -.mini-stepper:focus-within { - border-color: var(--input-focus); - box-shadow: - 0 0 0 1px var(--input-focus), - 0 0 0 4px rgba(37, 99, 235, 0.15); -} -.mini-stepper.occ .value { - min-width: 2rem; -} -.occ-stepper.mini-stepper.occ .value { - min-width: 2rem; -} -.mini-stepper .step:focus-visible { - outline: 2px solid var(--input-focus); - outline-offset: -2px; -} .hint { font-size: 0.65rem; opacity: 0.65; diff --git a/src/components/Numeric.vue b/src/components/Numeric.vue index 3837c9e..723476c 100644 --- a/src/components/Numeric.vue +++ b/src/components/Numeric.vue @@ -289,17 +289,12 @@ function onWheel(e) { display: inline-flex; align-items: center; justify-content: center; - padding: 0 0.4rem; gap: 0.25rem; - border: 1px solid transparent; - background: transparent; - border-radius: 0.4rem; - min-height: 1.8rem; + background: none; font-variant-numeric: tabular-nums; touch-action: none; } .mini-stepper.drag-mode:focus-visible { - border-color: var(--input-border, var(--muted)); box-shadow: 0 0 0 2px var(--input-focus, #2563eb); outline: none; }