diff --git a/packages/presentation/src/components/Card.svelte b/packages/presentation/src/components/Card.svelte
index 14a16f810d..6bbd3a0aef 100644
--- a/packages/presentation/src/components/Card.svelte
+++ b/packages/presentation/src/components/Card.svelte
@@ -63,7 +63,7 @@
{/if}
</span>
</div>
- <div class="buttons-group small-gap content-dark-color">
+ <div class="ml-4 buttons-group small-gap content-dark-color">
<Button
id="card-close"
focusIndex={10002}
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index cc387b24db..b394a669ce 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -433,6 +433,7 @@ input.search {
.gapV-4 > *:not(:last-child) { margin-bottom: 1rem; }
.gapV-6 > *:not(:last-child) { margin-bottom: 1.5rem; }
.gapV-8 > *:not(:last-child) { margin-bottom: 2rem; }
+.gapV-12 > *:not(:last-child) { margin-bottom: 3rem; }
.gap-around-2 > * { margin: .25rem; }
.gap-around-4 > * { margin: .5rem; }
@@ -570,6 +571,7 @@ input.search {
.step-lr75 + .step-lr75 { margin-left: .75rem; }
.step-tb75 + .step-tb75 { margin-top: .75rem; }
.step-tb-6 + .step-tb-6 { margin-top: 1.5rem; }
+.step-tb-12 + .step-tb-12 { margin-top: 3rem; }
.step-tb-2-accent + .step-tb-2-accent {
position: relative;
@@ -923,13 +925,14 @@ a.no-line {
.border-radius-left-1 { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }
.border-radius-right-1 { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
.border-radius-top-1 { border-top-right-radius: 0.25rem; border-top-left-radius: 0.25rem; }
-.border-divider-color {border: 1px solid var(--divider-color);}
+.border-divider-color {border: 1px solid var(--theme-divider-color);}
.border-primary-button { border-color: var(--accented-button-border); }
-.top-divider { border-top: 1px solid var(--divider-color); }
-.bottom-divider { border-bottom: 1px solid var(--divider-color); }
+.top-divider { border-top: 1px solid var(--theme-divider-color); }
+.bottom-divider { border-bottom: 1px solid var(--theme-divider-color); }
+.left-divider { border-left: 1px solid var(--theme-divider-color); }
+.right-divider { border-right: 1px solid var(--theme-divider-color); }
.bottom-highlight-select { border-bottom: 1px solid var(--highlight-select); }
-.left-divider { border-left: 1px solid var(--divider-color); }
diff --git a/packages/theme/styles/button.scss b/packages/theme/styles/button.scss
index f7dbe1e261..a74a1823e8 100644
--- a/packages/theme/styles/button.scss
+++ b/packages/theme/styles/button.scss
@@ -196,6 +196,10 @@
}
&.regular, &.ghost {
&:hover, &:active, &:focus { color: var(--theme-caption-color); }
+ &.selected {
+ color: var(--theme-button-contrast-color);
+ background-color: var(--theme-accent-color);
+ }
}
&.accented,
&.brand,
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index 867e07e4b7..bef1bd5f41 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -397,6 +397,19 @@
&.x4 { width: 1rem; }
}
+.antiVSpacer {
+ flex-shrink: 0;
+ height: .25rem;
+
+ &:not(.withMargins) { margin: 0 !important; }
+
+ &.x1-5 { height: .375rem; }
+ &.x2 { height: .5rem; }
+ &.x3 { height: .75rem; }
+ &.x4 { height: 1rem; }
+ &.x7 { height: 1.75rem; }
+}
+
.antiSection {
display: flex;
flex-direction: column;
diff --git a/plugins/calendar-resources/src/components/DayCalendar.svelte b/plugins/calendar-resources/src/components/DayCalendar.svelte
index 14afbcd990..92add6af54 100644
--- a/plugins/calendar-resources/src/components/DayCalendar.svelte
+++ b/plugins/calendar-resources/src/components/DayCalendar.svelte
@@ -335,15 +335,15 @@
result.visibility = 0
}
result.top =
- (showHeader ? rem(3.5) + styleAD : 0) +
+ (showHeader ? rem(3.5) : 0) +
+ styleAD +
cellHeight * startTime.hours +
(startTime.mins / 60) * cellHeight +
getGridOffset(startTime.mins)
result.bottom =
cellHeight * (displayedHours - startHour - endTime.hours - 1) +
((60 - endTime.mins) / 60) * cellHeight +
- getGridOffset(endTime.mins, true) +
- (showHeader ? 0 : rem(3.5))
+ getGridOffset(endTime.mins, true)
let cols = 1
let index: number = 0
grid[event.day].columns.forEach((col, i) =>
@@ -450,25 +450,31 @@
: rem((heightAD + 0.125) * (adMaxRow <= maxAD ? adMaxRow : maxAD) + 0.25)
</script>
-<Scroller bind:divScroll={scroller} fade={{ multipler: { top: 3.5 + styleAD / fontSize, bottom: 0 } }}>
+<Scroller
+ bind:divScroll={scroller}
+ fade={{ multipler: { top: (showHeader ? 3.5 : 0) + styleAD / fontSize, bottom: 0 } }}
+>
<div
bind:this={container}
class="calendar-container"
- style:grid={`${showHeader ? '[header] 3.5rem [all-day] ' + styleAD + 'px' : ''} repeat(${
+ style:--calendar-ad-height={styleAD + 'px'}
+ style:grid={`${showHeader ? '[header] 3.5rem ' : ''}[all-day] ${styleAD}px repeat(${
(displayedHours - startHour) * 2
}, [row-start] 2rem) / [time-col] 3.5rem repeat(${displayedDaysCount}, [col-start] 1fr)`}
use:resizeObserver={(element) => checkSizes(element)}
>
- <div class="sticky-header head center"><span class="zone">{getTimeZone()}</span></div>
- {#each [...Array(displayedDaysCount).keys()] as dayOfWeek}
- {@const day = getDay(weekMonday, dayOfWeek)}
- <div class="sticky-header head title" class:center={displayedDaysCount > 1}>
- <span class="day" class:today={areDatesEqual(todayDate, day)}>{day.getDate()}</span>
- <span class="weekday">{getWeekDayName(day, weekFormat)}</span>
- </div>
- {/each}
+ {#if showHeader}
+ <div class="sticky-header head center"><span class="zone">{getTimeZone()}</span></div>
+ {#each [...Array(displayedDaysCount).keys()] as dayOfWeek}
+ {@const day = getDay(weekMonday, dayOfWeek)}
+ <div class="sticky-header head title" class:center={displayedDaysCount > 1}>
+ <span class="day" class:today={areDatesEqual(todayDate, day)}>{day.getDate()}</span>
+ <span class="weekday">{getWeekDayName(day, weekFormat)}</span>
+ </div>
+ {/each}
+ {/if}
- <div class="sticky-header allday-header text-sm content-dark-color">
+ <div class="sticky-header allday-header text-sm content-dark-color" class:top={!showHeader}>
<Label label={calendar.string.AllDay} />
{#if (!minimizedAD && adMaxRow > maxAD) || (minimizedAD && adMaxRow > minAD)}
<ActionIcon
@@ -480,38 +486,38 @@
/>
{/if}
</div>
- <div class="sticky-header allday-container" style:grid-column={`col-start 1 / span ${displayedDaysCount}`}>
+ <div
+ class="sticky-header allday-container"
+ class:top={!showHeader}
+ style:grid-column={`col-start 1 / span ${displayedDaysCount}`}
+ >
{#if shownHeightAD > maxHeightAD && shownAD}
<Scroller noFade={false}>
- {#key styleAD}{#key calendarWidth}{#key displayedDaysCount}
- <div style:min-height={`${shownHeightAD - cellBorder * 2}px`} />
- {#each alldays as event, i}
- {@const rect = getADRect(event._id)}
- {@const ev = events.find((p) => p._id === event._id)}
- {#if ev}
- <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
- <div
- class="calendar-element"
- style:top={`${rect.top}px`}
- style:height={`${rect.height}px`}
- style:left={`${rect.left}px`}
- style:width={`${rect.width}px`}
- style:opacity={rect.visibility === 0 ? 0.4 : 1}
- style:--mask-image={getMask(rect.visibility)}
- tabindex={500 + i}
- >
- <EventElement
- hourHeight={cellHeight}
- event={ev}
- size={{ width: rect.width, height: rect.height }}
- />
- </div>
- {/if}
- {/each}
- {/key}{/key}{/key}
+ {#key [styleAD, calendarWidth, displayedDaysCount, showHeader]}
+ <div style:min-height={`${shownHeightAD - cellBorder * 2}px`} />
+ {#each alldays as event, i}
+ {@const rect = getADRect(event._id)}
+ {@const ev = events.find((p) => p._id === event._id)}
+ {#if ev}
+ <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+ <div
+ class="calendar-element"
+ style:top={`${rect.top}px`}
+ style:height={`${rect.height}px`}
+ style:left={`${rect.left}px`}
+ style:width={`${rect.width}px`}
+ style:opacity={rect.visibility === 0 ? 0.4 : 1}
+ style:--mask-image={getMask(rect.visibility)}
+ tabindex={500 + i}
+ >
+ <EventElement hourHeight={cellHeight} event={ev} size={{ width: rect.width, height: rect.height }} />
+ </div>
+ {/if}
+ {/each}
+ {/key}
</Scroller>
{:else if shownAD}
- {#key [styleAD, calendarWidth, displayedDaysCount]}
+ {#key [styleAD, calendarWidth, displayedDaysCount, showHeader]}
{#each alldays as event, i}
{@const rect = getADRect(event._id)}
{@const ev = events.find((p) => p._id === event._id)}
@@ -533,7 +539,7 @@
{/each}
{/key}
{:else}
- {#key [styleAD, calendarWidth, displayedDaysCount]}
+ {#key [styleAD, calendarWidth, displayedDaysCount, showHeader]}
{#each shortAlldays as event, i}
{@const rect = getADRect(event.id, event.day, event.fixRow)}
{@const ev = events.find((p) => p._id === event.id)}
@@ -580,7 +586,11 @@
{#each [...Array(displayedHours - startHour).keys()] as hourOfDay}
{#if hourOfDay === 0}
- <div class="clear-cell" />
+ {#if showHeader}
+ <div class="clear-cell" />
+ {:else}
+ <div class="sticky-header head center zm"><span class="zone mini">{getTimeZone()}</span></div>
+ {/if}
{:else if hourOfDay < displayedHours - startHour}
<div
class="time-cell"
@@ -621,7 +631,7 @@
{#if hourOfDay === displayedHours - startHour - 1}<div class="clear-cell" />{/if}
{/each}
- {#key [styleAD, calendarWidth, displayedDaysCount]}
+ {#key [styleAD, calendarWidth, displayedDaysCount, showHeader]}
{#each newEvents.filter((ev) => !ev.allDay) as event, i}
{@const rect = getRect(event)}
{@const ev = events.find((p) => p._id === event._id)}
@@ -684,14 +694,18 @@
background-color: var(--theme-comp-header-color);
z-index: 10;
- &.head {
- top: 0;
- }
&:not(.head) {
top: 3.5rem;
border-top: 1px solid var(--theme-divider-color);
border-bottom: 1px solid var(--theme-divider-color);
}
+ &.head,
+ &.top {
+ top: 0;
+ }
+ &.zm {
+ top: var(--calendar-ad-height, 2.25rem);
+ }
&.center {
justify-content: center;
}
@@ -748,6 +762,10 @@
color: var(--theme-dark-color);
background-color: rgba(64, 109, 223, 0.1);
border-radius: 0.25rem;
+
+ &.mini {
+ padding: 0.125rem;
+ }
}
}
.calendar-container {