@nomideusz/svelte-calendar 1.0.1 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/calendar/Calendar.svelte +37 -43
- package/dist/core/index.d.ts +1 -1
- package/dist/core/index.js +1 -1
- package/dist/core/locale.d.ts +5 -0
- package/dist/core/locale.js +9 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/primitives/EmptySlot.svelte +2 -1
- package/dist/primitives/EventBlock.svelte +4 -2
- package/dist/primitives/NowIndicator.svelte +2 -1
- package/dist/primitives/TimeGutter.svelte +4 -2
- package/dist/text-fit.js +6 -1
- package/dist/theme/auto.js +10 -7
- package/dist/theme/presets.d.ts +13 -7
- package/dist/theme/presets.js +27 -18
- package/dist/views/agenda/AgendaDay.svelte +147 -115
- package/dist/views/agenda/AgendaWeek.svelte +106 -90
- package/dist/views/mobile/MobileDay.svelte +83 -63
- package/dist/views/mobile/MobileWeek.svelte +42 -34
- package/dist/views/month/MonthGrid.svelte +21 -17
- package/dist/views/planner/PlannerScroll.svelte +83 -89
- package/dist/views/planner/PlannerWeek.svelte +160 -91
- package/package.json +1 -1
- package/widget/widget.js +387 -380
|
@@ -10,7 +10,7 @@ import { useCalendarContext } from "../shared/context.svelte.js";
|
|
|
10
10
|
import EventContent from "../shared/EventContent.svelte";
|
|
11
11
|
import { createClock } from "../../core/clock.svelte.js";
|
|
12
12
|
import { HOUR_MS, sod, addDaysMs, diffDays, isAllDay, segmentForDay } from "../../core/time.js";
|
|
13
|
-
import {
|
|
13
|
+
import { fmtHParts, fmtTime } from "../../core/locale.js";
|
|
14
14
|
import { createSwipe } from "./swipe.js";
|
|
15
15
|
let { height = null, events = [], style = "", locale, focusDate, oneventclick, oneventcreate, selectedEventId = null, readOnly = false, visibleHours } = $props();
|
|
16
16
|
// ── Context ────────────────────────────────────────
|
|
@@ -535,13 +535,15 @@ $effect(() => {
|
|
|
535
535
|
{#each { length: hourCount } as _, h}
|
|
536
536
|
{@const hour = startHour + h}
|
|
537
537
|
{@const blocked = isBlockedAt(hour)}
|
|
538
|
+
{@const [hNum, hSuf] = fmtHParts(hour, locale)}
|
|
538
539
|
<div
|
|
539
540
|
class="mb-hour"
|
|
540
541
|
class:mb-hour--blocked={blocked}
|
|
541
542
|
style:top="{h * HOUR_HEIGHT}px"
|
|
542
543
|
style:height="{HOUR_HEIGHT}px"
|
|
543
544
|
>
|
|
544
|
-
|
|
545
|
+
<!-- an hour the now plate would half-cover gives way to it -->
|
|
546
|
+
<div class="mb-hour-label" class:mb-hour-label--under={nowOffset >= 0 && Math.abs(h * HOUR_HEIGHT - nowOffset) < 16}>{hNum}<small>{hSuf}</small></div>
|
|
545
547
|
<div class="mb-hour-line"></div>
|
|
546
548
|
{#if blocked && blockedSlots}
|
|
547
549
|
{@const slot = blockedSlots.find(s => (!s.day || s.day === (new Date(dayMs).getDay() === 0 ? 7 : new Date(dayMs).getDay())) && hour >= s.start && hour < s.end)}
|
|
@@ -555,7 +557,7 @@ $effect(() => {
|
|
|
555
557
|
<!-- Now line -->
|
|
556
558
|
{#if nowOffset >= 0}
|
|
557
559
|
<div class="mb-now" style:top="{nowOffset}px">
|
|
558
|
-
<span class="mb-now-label">{clock.hm}</span>
|
|
560
|
+
<span class="mb-now-label"><span>{clock.hm}</span></span>
|
|
559
561
|
<div class="mb-now-line"></div>
|
|
560
562
|
</div>
|
|
561
563
|
{/if}
|
|
@@ -712,12 +714,13 @@ $effect(() => {
|
|
|
712
714
|
gap: 4px;
|
|
713
715
|
padding: 4px 8px;
|
|
714
716
|
min-height: 32px;
|
|
715
|
-
border-radius:
|
|
716
|
-
background:
|
|
717
|
+
border-radius: 0;
|
|
718
|
+
background: var(--ev-color);
|
|
719
|
+
color: var(--dt-btn-text, #fff);
|
|
717
720
|
border: none;
|
|
718
721
|
cursor: pointer;
|
|
719
722
|
flex-shrink: 0;
|
|
720
|
-
transition:
|
|
723
|
+
transition: filter 120ms;
|
|
721
724
|
-webkit-tap-highlight-color: transparent;
|
|
722
725
|
max-width: 160px;
|
|
723
726
|
position: relative;
|
|
@@ -732,28 +735,26 @@ $effect(() => {
|
|
|
732
735
|
transform: translateY(-50%);
|
|
733
736
|
height: 44px;
|
|
734
737
|
}
|
|
738
|
+
.mb-allday-chip:hover,
|
|
735
739
|
.mb-allday-chip:active {
|
|
736
|
-
|
|
740
|
+
filter: brightness(1.08);
|
|
737
741
|
}
|
|
738
742
|
.mb-allday-chip--selected {
|
|
739
|
-
box-shadow: 0 0 0
|
|
743
|
+
box-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff);
|
|
740
744
|
}
|
|
741
745
|
.mb-allday-chip:focus-visible {
|
|
742
746
|
outline: none;
|
|
743
|
-
box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
|
|
747
|
+
box-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #2563eb);
|
|
744
748
|
}
|
|
745
749
|
|
|
750
|
+
/* The band is the colour; no dot. */
|
|
746
751
|
.mb-allday-dot {
|
|
747
|
-
|
|
748
|
-
height: 6px;
|
|
749
|
-
border-radius: 50%;
|
|
750
|
-
background: var(--ev-color);
|
|
751
|
-
flex-shrink: 0;
|
|
752
|
+
display: none;
|
|
752
753
|
}
|
|
753
754
|
|
|
754
755
|
.mb-allday-title {
|
|
755
756
|
font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
|
|
756
|
-
color:
|
|
757
|
+
color: inherit;
|
|
757
758
|
white-space: nowrap;
|
|
758
759
|
max-width: 100px;
|
|
759
760
|
overflow: hidden;
|
|
@@ -762,7 +763,9 @@ $effect(() => {
|
|
|
762
763
|
|
|
763
764
|
.mb-allday-span {
|
|
764
765
|
font: 400 11px/1 var(--dt-sans, system-ui, sans-serif);
|
|
765
|
-
|
|
766
|
+
font-variant-numeric: tabular-nums;
|
|
767
|
+
color: inherit;
|
|
768
|
+
opacity: 0.75;
|
|
766
769
|
}
|
|
767
770
|
|
|
768
771
|
.mb-allday-more {
|
|
@@ -839,14 +842,28 @@ $effect(() => {
|
|
|
839
842
|
align-items: flex-start;
|
|
840
843
|
}
|
|
841
844
|
|
|
845
|
+
.mb-hour-label--under {
|
|
846
|
+
visibility: hidden;
|
|
847
|
+
}
|
|
848
|
+
.mb-hour-label small {
|
|
849
|
+
font-size: 9px;
|
|
850
|
+
font-weight: 600;
|
|
851
|
+
vertical-align: top;
|
|
852
|
+
margin-left: 1px;
|
|
853
|
+
letter-spacing: 0;
|
|
854
|
+
color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
|
|
855
|
+
}
|
|
842
856
|
.mb-hour-label {
|
|
843
857
|
width: 40px;
|
|
844
858
|
/* border-box keeps the label inside the 40px gutter that events
|
|
845
859
|
start at — content-box pushed digits flush under the event edge */
|
|
846
860
|
box-sizing: border-box;
|
|
847
861
|
flex-shrink: 0;
|
|
848
|
-
font:
|
|
849
|
-
|
|
862
|
+
font: 700 15px/1 var(--dt-sans, system-ui, sans-serif);
|
|
863
|
+
font-stretch: 90%;
|
|
864
|
+
font-variant-numeric: tabular-nums;
|
|
865
|
+
letter-spacing: -0.02em;
|
|
866
|
+
color: var(--dt-text, rgba(0, 0, 0, 0.87));
|
|
850
867
|
text-align: right;
|
|
851
868
|
padding-right: 8px;
|
|
852
869
|
padding-top: 0;
|
|
@@ -892,21 +909,29 @@ $effect(() => {
|
|
|
892
909
|
pointer-events: none;
|
|
893
910
|
}
|
|
894
911
|
|
|
912
|
+
/* The clock is a reversed plate on the accent, as in the desktop gutter. */
|
|
895
913
|
.mb-now-label {
|
|
896
914
|
width: 40px;
|
|
897
915
|
box-sizing: border-box;
|
|
898
916
|
flex-shrink: 0;
|
|
917
|
+
padding: 0 4px 0 0;
|
|
899
918
|
text-align: right;
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
919
|
+
}
|
|
920
|
+
.mb-now-label span {
|
|
921
|
+
display: inline-block;
|
|
922
|
+
padding: 2px 3px;
|
|
923
|
+
border-radius: 0;
|
|
924
|
+
background: var(--dt-accent, #2563eb);
|
|
925
|
+
font: 700 10px/1.2 var(--dt-sans, system-ui, sans-serif);
|
|
926
|
+
font-variant-numeric: tabular-nums;
|
|
927
|
+
color: var(--dt-btn-text, #ffffff);
|
|
903
928
|
}
|
|
904
929
|
|
|
905
930
|
.mb-now-line {
|
|
906
931
|
flex: 1;
|
|
907
|
-
height:
|
|
908
|
-
|
|
909
|
-
box-shadow:
|
|
932
|
+
height: 0;
|
|
933
|
+
border-top: 2px solid var(--dt-accent, #2563eb);
|
|
934
|
+
box-shadow: none;
|
|
910
935
|
position: relative;
|
|
911
936
|
}
|
|
912
937
|
|
|
@@ -925,10 +950,12 @@ $effect(() => {
|
|
|
925
950
|
.mb-event {
|
|
926
951
|
position: absolute;
|
|
927
952
|
z-index: 5;
|
|
928
|
-
border-radius:
|
|
953
|
+
border-radius: 0;
|
|
929
954
|
cursor: pointer;
|
|
930
|
-
background:
|
|
955
|
+
background: transparent;
|
|
931
956
|
border: none;
|
|
957
|
+
border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.3));
|
|
958
|
+
box-sizing: border-box;
|
|
932
959
|
display: flex;
|
|
933
960
|
align-items: stretch;
|
|
934
961
|
overflow: hidden;
|
|
@@ -938,8 +965,9 @@ $effect(() => {
|
|
|
938
965
|
-webkit-tap-highlight-color: transparent;
|
|
939
966
|
min-height: 24px;
|
|
940
967
|
}
|
|
968
|
+
.mb-event:hover,
|
|
941
969
|
.mb-event:active {
|
|
942
|
-
background:
|
|
970
|
+
background: var(--dt-hover, rgba(0, 0, 0, 0.04));
|
|
943
971
|
}
|
|
944
972
|
/* Short blocks keep their duration-proportional height, but get a 44px
|
|
945
973
|
transparent hit-slop so taps still land. */
|
|
@@ -960,21 +988,13 @@ $effect(() => {
|
|
|
960
988
|
padding-bottom: 2px;
|
|
961
989
|
}
|
|
962
990
|
.mb-event--selected {
|
|
963
|
-
box-shadow: 0 0 0
|
|
964
|
-
0 2px 12px color-mix(in srgb, var(--ev-color) 25%, transparent);
|
|
991
|
+
box-shadow: inset 0 0 0 1px var(--ev-color);
|
|
965
992
|
}
|
|
966
993
|
.mb-event--current {
|
|
967
|
-
background:
|
|
968
|
-
}
|
|
969
|
-
.mb-event--next {
|
|
970
|
-
background: color-mix(in srgb, var(--ev-color) 8%, var(--dt-surface, #f9fafb));
|
|
971
|
-
border: 1px dashed color-mix(in srgb, var(--ev-color) 35%, transparent);
|
|
972
|
-
}
|
|
973
|
-
/* Status treatments: token-level dims + a non-opacity signal
|
|
974
|
-
(strikethrough / border style) — never a bare opacity on the block. */
|
|
975
|
-
.mb-event--cancelled {
|
|
976
|
-
background: color-mix(in srgb, var(--ev-color) 5%, var(--dt-surface, #f9fafb));
|
|
994
|
+
background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
|
|
977
995
|
}
|
|
996
|
+
/* Printed states: a cancelled class is struck through; a tentative or
|
|
997
|
+
limited one is set in grey with a dashed bar — never a bare opacity. */
|
|
978
998
|
.mb-event--cancelled .mb-ev-title {
|
|
979
999
|
text-decoration: line-through;
|
|
980
1000
|
color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
|
|
@@ -982,24 +1002,24 @@ $effect(() => {
|
|
|
982
1002
|
.mb-event--cancelled .mb-ev-stripe {
|
|
983
1003
|
opacity: 0.45; /* decorative bar only */
|
|
984
1004
|
}
|
|
985
|
-
.mb-event--tentative
|
|
986
|
-
background: color-mix(in srgb, var(--ev-color) 6%, var(--dt-surface, #f9fafb));
|
|
987
|
-
border: 1px dashed color-mix(in srgb, var(--ev-color) 45%, transparent);
|
|
988
|
-
}
|
|
989
|
-
.mb-event--full {
|
|
990
|
-
background: color-mix(in srgb, var(--ev-color) 6%, var(--dt-surface, #f9fafb));
|
|
991
|
-
border: 1px solid color-mix(in srgb, var(--ev-color) 30%, transparent);
|
|
992
|
-
}
|
|
1005
|
+
.mb-event--tentative .mb-ev-title,
|
|
993
1006
|
.mb-event--full .mb-ev-title {
|
|
994
1007
|
color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
|
|
995
1008
|
}
|
|
996
|
-
.mb-event--
|
|
997
|
-
|
|
998
|
-
|
|
1009
|
+
.mb-event--tentative .mb-ev-stripe,
|
|
1010
|
+
.mb-event--limited .mb-ev-stripe {
|
|
1011
|
+
background: repeating-linear-gradient(
|
|
1012
|
+
180deg,
|
|
1013
|
+
var(--ev-color) 0 4px,
|
|
1014
|
+
transparent 4px 7px
|
|
1015
|
+
);
|
|
1016
|
+
}
|
|
1017
|
+
.mb-event--full .mb-ev-stripe {
|
|
1018
|
+
opacity: 0.45;
|
|
999
1019
|
}
|
|
1000
1020
|
.mb-event--resizing {
|
|
1001
1021
|
z-index: 50;
|
|
1002
|
-
box-shadow:
|
|
1022
|
+
box-shadow: inset 0 0 0 1px var(--ev-color);
|
|
1003
1023
|
cursor: ns-resize;
|
|
1004
1024
|
}
|
|
1005
1025
|
|
|
@@ -1039,7 +1059,7 @@ $effect(() => {
|
|
|
1039
1059
|
transform: translateX(-50%);
|
|
1040
1060
|
width: 24px;
|
|
1041
1061
|
height: 3px;
|
|
1042
|
-
border-radius:
|
|
1062
|
+
border-radius: 0;
|
|
1043
1063
|
background: var(--ev-color);
|
|
1044
1064
|
opacity: 0;
|
|
1045
1065
|
transition: opacity 120ms;
|
|
@@ -1063,7 +1083,7 @@ $effect(() => {
|
|
|
1063
1083
|
left: 40px;
|
|
1064
1084
|
right: 4px;
|
|
1065
1085
|
z-index: 40;
|
|
1066
|
-
border-radius:
|
|
1086
|
+
border-radius: 0;
|
|
1067
1087
|
background: color-mix(in srgb, var(--dt-accent, #2563eb) 12%, transparent);
|
|
1068
1088
|
border: 1px dashed color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
|
|
1069
1089
|
display: flex;
|
|
@@ -1072,17 +1092,18 @@ $effect(() => {
|
|
|
1072
1092
|
pointer-events: none;
|
|
1073
1093
|
}
|
|
1074
1094
|
.mb-create-ghost-time {
|
|
1075
|
-
font:
|
|
1095
|
+
font: 700 11px/1 var(--dt-sans, system-ui, sans-serif);
|
|
1096
|
+
font-variant-numeric: tabular-nums;
|
|
1076
1097
|
color: var(--dt-accent, #2563eb);
|
|
1077
1098
|
padding: 4px 8px;
|
|
1078
1099
|
white-space: nowrap;
|
|
1079
1100
|
}
|
|
1080
1101
|
|
|
1081
1102
|
.mb-ev-stripe {
|
|
1082
|
-
width:
|
|
1103
|
+
width: 3px;
|
|
1083
1104
|
background: var(--ev-color);
|
|
1084
1105
|
flex-shrink: 0;
|
|
1085
|
-
border-radius:
|
|
1106
|
+
border-radius: 0;
|
|
1086
1107
|
}
|
|
1087
1108
|
|
|
1088
1109
|
.mb-ev-body {
|
|
@@ -1096,7 +1117,7 @@ $effect(() => {
|
|
|
1096
1117
|
}
|
|
1097
1118
|
|
|
1098
1119
|
.mb-ev-title {
|
|
1099
|
-
font:
|
|
1120
|
+
font: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);
|
|
1100
1121
|
color: var(--dt-text, rgba(0, 0, 0, 0.87));
|
|
1101
1122
|
white-space: nowrap;
|
|
1102
1123
|
overflow: hidden;
|
|
@@ -1104,7 +1125,8 @@ $effect(() => {
|
|
|
1104
1125
|
}
|
|
1105
1126
|
|
|
1106
1127
|
.mb-ev-time {
|
|
1107
|
-
font: 400 12px/1 var(--dt-
|
|
1128
|
+
font: 400 12px/1 var(--dt-sans, system-ui, sans-serif);
|
|
1129
|
+
font-variant-numeric: tabular-nums;
|
|
1108
1130
|
color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
|
|
1109
1131
|
}
|
|
1110
1132
|
|
|
@@ -1135,7 +1157,7 @@ $effect(() => {
|
|
|
1135
1157
|
color: var(--ev-color, var(--dt-accent));
|
|
1136
1158
|
background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, transparent);
|
|
1137
1159
|
padding: 2px 5px;
|
|
1138
|
-
border-radius:
|
|
1160
|
+
border-radius: 0;
|
|
1139
1161
|
white-space: nowrap;
|
|
1140
1162
|
}
|
|
1141
1163
|
|
|
@@ -1156,13 +1178,11 @@ $effect(() => {
|
|
|
1156
1178
|
position: absolute;
|
|
1157
1179
|
top: 4px;
|
|
1158
1180
|
right: 4px;
|
|
1159
|
-
font: 600
|
|
1160
|
-
text-transform: uppercase;
|
|
1161
|
-
letter-spacing: 0.06em;
|
|
1181
|
+
font: 600 11px/1 var(--dt-sans, system-ui, sans-serif);
|
|
1162
1182
|
color: var(--ev-color, var(--dt-accent));
|
|
1163
1183
|
background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, transparent);
|
|
1164
1184
|
padding: 2px 5px;
|
|
1165
|
-
border-radius:
|
|
1185
|
+
border-radius: 0;
|
|
1166
1186
|
white-space: nowrap;
|
|
1167
1187
|
}
|
|
1168
1188
|
|
|
@@ -312,7 +312,7 @@ function handleDayKeydown(e, dayMs) {
|
|
|
312
312
|
border-bottom: none;
|
|
313
313
|
}
|
|
314
314
|
.mw-row:has(.mw-row-target:active) {
|
|
315
|
-
background:
|
|
315
|
+
background: var(--dt-hover, rgba(0, 0, 0, 0.04));
|
|
316
316
|
}
|
|
317
317
|
.mw-row--today {
|
|
318
318
|
background: color-mix(in srgb, var(--dt-accent, #2563eb) 4%, transparent);
|
|
@@ -380,15 +380,8 @@ function handleDayKeydown(e, dayMs) {
|
|
|
380
380
|
color: var(--dt-text, rgba(0, 0, 0, 0.87));
|
|
381
381
|
}
|
|
382
382
|
.mw-day-num--today {
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
width: 30px;
|
|
386
|
-
height: 30px;
|
|
387
|
-
display: inline-flex;
|
|
388
|
-
align-items: center;
|
|
389
|
-
justify-content: center;
|
|
390
|
-
border-radius: 50%;
|
|
391
|
-
font-size: 15px;
|
|
383
|
+
color: var(--dt-accent, #2563eb);
|
|
384
|
+
font-weight: 500;
|
|
392
385
|
}
|
|
393
386
|
|
|
394
387
|
/* ─── Events column ──────────────────────────────── */
|
|
@@ -416,34 +409,48 @@ function handleDayKeydown(e, dayMs) {
|
|
|
416
409
|
align-items: center;
|
|
417
410
|
gap: 0;
|
|
418
411
|
min-height: 44px;
|
|
419
|
-
border-radius:
|
|
420
|
-
background:
|
|
412
|
+
border-radius: 0;
|
|
413
|
+
background: transparent;
|
|
421
414
|
overflow: hidden;
|
|
422
415
|
cursor: pointer;
|
|
423
416
|
transition: background 120ms;
|
|
424
417
|
-webkit-tap-highlight-color: transparent;
|
|
425
418
|
border: none;
|
|
419
|
+
border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.3));
|
|
426
420
|
text-align: left;
|
|
427
421
|
padding: 0;
|
|
428
422
|
pointer-events: auto;
|
|
429
423
|
}
|
|
424
|
+
.mw-ev:hover,
|
|
430
425
|
.mw-ev:active {
|
|
431
|
-
background:
|
|
426
|
+
background: var(--dt-hover, rgba(0, 0, 0, 0.04));
|
|
432
427
|
}
|
|
433
428
|
.mw-ev--selected {
|
|
434
|
-
box-shadow: 0 0 0
|
|
429
|
+
box-shadow: inset 0 0 0 1px var(--ev-color);
|
|
435
430
|
}
|
|
436
431
|
.mw-ev--current {
|
|
437
|
-
background:
|
|
432
|
+
background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
|
|
438
433
|
}
|
|
434
|
+
/* All day: a solid band on the event colour, no tint. */
|
|
439
435
|
.mw-ev--allday {
|
|
440
|
-
background:
|
|
436
|
+
background: var(--dt-paper, none) var(--ev-color);
|
|
437
|
+
background-blend-mode: multiply;
|
|
438
|
+
color: var(--dt-btn-text, #fff);
|
|
439
|
+
}
|
|
440
|
+
.mw-ev--allday:hover,
|
|
441
|
+
.mw-ev--allday:active {
|
|
442
|
+
background: var(--dt-paper, none) var(--ev-color);
|
|
443
|
+
filter: brightness(1.08);
|
|
441
444
|
}
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
background: color-mix(in srgb, var(--ev-color) 5%, var(--dt-surface, #f9fafb));
|
|
445
|
+
.mw-ev--allday .mw-ev-title,
|
|
446
|
+
.mw-ev--allday .mw-ev-time {
|
|
447
|
+
color: inherit;
|
|
446
448
|
}
|
|
449
|
+
.mw-ev--allday.mw-ev--selected {
|
|
450
|
+
box-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff);
|
|
451
|
+
}
|
|
452
|
+
/* Printed states: a cancelled class is struck through; a tentative or
|
|
453
|
+
limited one is set in grey with a dashed bar — never a bare opacity. */
|
|
447
454
|
.mw-ev--cancelled .mw-ev-title {
|
|
448
455
|
text-decoration: line-through;
|
|
449
456
|
color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
|
|
@@ -451,20 +458,20 @@ function handleDayKeydown(e, dayMs) {
|
|
|
451
458
|
.mw-ev--cancelled .mw-ev-stripe {
|
|
452
459
|
opacity: 0.45; /* decorative bar only */
|
|
453
460
|
}
|
|
454
|
-
.mw-ev--tentative
|
|
455
|
-
background: color-mix(in srgb, var(--ev-color) 6%, var(--dt-surface, #f9fafb));
|
|
456
|
-
border: 1px dashed color-mix(in srgb, var(--ev-color) 45%, transparent);
|
|
457
|
-
}
|
|
458
|
-
.mw-ev--full {
|
|
459
|
-
background: color-mix(in srgb, var(--ev-color) 6%, var(--dt-surface, #f9fafb));
|
|
460
|
-
border: 1px solid color-mix(in srgb, var(--ev-color) 30%, transparent);
|
|
461
|
-
}
|
|
461
|
+
.mw-ev--tentative .mw-ev-title,
|
|
462
462
|
.mw-ev--full .mw-ev-title {
|
|
463
463
|
color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
|
|
464
464
|
}
|
|
465
|
-
.mw-ev--
|
|
466
|
-
|
|
467
|
-
|
|
465
|
+
.mw-ev--tentative .mw-ev-stripe,
|
|
466
|
+
.mw-ev--limited .mw-ev-stripe {
|
|
467
|
+
background: repeating-linear-gradient(
|
|
468
|
+
180deg,
|
|
469
|
+
var(--ev-color) 0 4px,
|
|
470
|
+
transparent 4px 7px
|
|
471
|
+
);
|
|
472
|
+
}
|
|
473
|
+
.mw-ev--full .mw-ev-stripe {
|
|
474
|
+
opacity: 0.45;
|
|
468
475
|
}
|
|
469
476
|
|
|
470
477
|
.mw-ev-stripe {
|
|
@@ -472,7 +479,7 @@ function handleDayKeydown(e, dayMs) {
|
|
|
472
479
|
align-self: stretch;
|
|
473
480
|
background: var(--ev-color, var(--dt-accent));
|
|
474
481
|
flex-shrink: 0;
|
|
475
|
-
border-radius:
|
|
482
|
+
border-radius: 0;
|
|
476
483
|
}
|
|
477
484
|
|
|
478
485
|
.mw-ev-body {
|
|
@@ -485,7 +492,7 @@ function handleDayKeydown(e, dayMs) {
|
|
|
485
492
|
}
|
|
486
493
|
|
|
487
494
|
.mw-ev-title {
|
|
488
|
-
font: 500 15px/1.
|
|
495
|
+
font: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);
|
|
489
496
|
color: var(--dt-text, rgba(0, 0, 0, 0.87));
|
|
490
497
|
white-space: nowrap;
|
|
491
498
|
overflow: hidden;
|
|
@@ -495,7 +502,8 @@ function handleDayKeydown(e, dayMs) {
|
|
|
495
502
|
}
|
|
496
503
|
|
|
497
504
|
.mw-ev-time {
|
|
498
|
-
font: 400 12px/1 var(--dt-
|
|
505
|
+
font: 400 12px/1 var(--dt-sans, system-ui, sans-serif);
|
|
506
|
+
font-variant-numeric: tabular-nums;
|
|
499
507
|
color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
|
|
500
508
|
white-space: nowrap;
|
|
501
509
|
flex-shrink: 0;
|
|
@@ -300,7 +300,8 @@ function chipTime(e) {
|
|
|
300
300
|
}
|
|
301
301
|
.mg-head-cell {
|
|
302
302
|
padding: 6px 8px;
|
|
303
|
-
font-family: var(--dt-
|
|
303
|
+
font-family: var(--dt-sans, system-ui, sans-serif);
|
|
304
|
+
font-variant-numeric: tabular-nums;
|
|
304
305
|
font-size: 11px;
|
|
305
306
|
font-weight: 600;
|
|
306
307
|
text-transform: uppercase;
|
|
@@ -371,20 +372,21 @@ function chipTime(e) {
|
|
|
371
372
|
|
|
372
373
|
.mg-daynum {
|
|
373
374
|
flex: none;
|
|
374
|
-
font-family: var(--dt-
|
|
375
|
-
font-size:
|
|
376
|
-
font-weight:
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
375
|
+
font-family: var(--dt-sans, system-ui, sans-serif);
|
|
376
|
+
font-size: 22px;
|
|
377
|
+
font-weight: 400;
|
|
378
|
+
font-variant-numeric: tabular-nums;
|
|
379
|
+
color: var(--dt-text);
|
|
380
|
+
min-width: 26px;
|
|
381
|
+
height: 26px;
|
|
380
382
|
display: inline-flex;
|
|
381
383
|
align-items: center;
|
|
382
384
|
justify-content: center;
|
|
383
|
-
border-radius: 999px;
|
|
384
385
|
}
|
|
386
|
+
/* Today: accent numeral on a 2px rule — the same mark in every view. */
|
|
385
387
|
.mg-daynum--today {
|
|
386
|
-
|
|
387
|
-
|
|
388
|
+
color: var(--dt-accent);
|
|
389
|
+
box-shadow: inset 0 -2px 0 var(--dt-accent);
|
|
388
390
|
}
|
|
389
391
|
|
|
390
392
|
.mg-chips {
|
|
@@ -401,7 +403,7 @@ function chipTime(e) {
|
|
|
401
403
|
border: none;
|
|
402
404
|
background: none;
|
|
403
405
|
padding: 2px 4px;
|
|
404
|
-
border-radius:
|
|
406
|
+
border-radius: 0;
|
|
405
407
|
font-family: var(--dt-sans);
|
|
406
408
|
font-size: 12px;
|
|
407
409
|
line-height: 1.3;
|
|
@@ -431,14 +433,15 @@ function chipTime(e) {
|
|
|
431
433
|
}
|
|
432
434
|
.mg-chip-dot {
|
|
433
435
|
flex: none;
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
border-radius:
|
|
436
|
+
align-self: stretch;
|
|
437
|
+
width: 3px;
|
|
438
|
+
border-radius: 0;
|
|
437
439
|
background: var(--mg-chip-color);
|
|
438
440
|
}
|
|
439
441
|
.mg-chip-time {
|
|
440
442
|
flex: none;
|
|
441
|
-
font-family: var(--dt-
|
|
443
|
+
font-family: var(--dt-sans, system-ui, sans-serif);
|
|
444
|
+
font-variant-numeric: tabular-nums;
|
|
442
445
|
font-size: 11px;
|
|
443
446
|
color: var(--dt-text-2);
|
|
444
447
|
}
|
|
@@ -452,8 +455,9 @@ function chipTime(e) {
|
|
|
452
455
|
border: none;
|
|
453
456
|
background: none;
|
|
454
457
|
padding: 1px 4px;
|
|
455
|
-
border-radius:
|
|
456
|
-
font-family: var(--dt-
|
|
458
|
+
border-radius: 0;
|
|
459
|
+
font-family: var(--dt-sans, system-ui, sans-serif);
|
|
460
|
+
font-variant-numeric: tabular-nums;
|
|
457
461
|
font-size: 11px;
|
|
458
462
|
color: var(--dt-text-2);
|
|
459
463
|
cursor: pointer;
|