diff options
Diffstat (limited to 'comm/calendar/base/themes/common/calendar-views.css')
| -rw-r--r-- | comm/calendar/base/themes/common/calendar-views.css | 1232 |
1 files changed, 1232 insertions, 0 deletions
diff --git a/comm/calendar/base/themes/common/calendar-views.css b/comm/calendar/base/themes/common/calendar-views.css new file mode 100644 index 0000000000..572207bffb --- /dev/null +++ b/comm/calendar/base/themes/common/calendar-views.css @@ -0,0 +1,1232 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + --viewColor: var(--layout-color-1); + --viewBackground: var(--layout-background-0); + --viewBorderColor: var(--layout-border-0); + --viewCalendarHeaderBackground: rgba(0, 0, 0, 0.03); + --viewHighlightBorderColor: var(--color-blue-50); + --viewTodayColor: inherit; + --viewTodayBackground: var(--layout-background-1); + --viewTodayLabelColor: var(--color-white); + --viewTodayLabelBackground: var(--color-blue-50); + --viewTodayOffBackground: color-mix(in srgb, var(--viewTodayBackground) 95%, black); + --viewTodayDayLabelBackground: var(--color-blue-10); + --viewTodayWeekendBackground: color-mix(in srgb, var(--color-blue-10) 20%, var(--viewWeekendBackground)); + --viewWeekendBackground: var(--color-ink-10); + --viewHeaderSelectedBackground: color-mix(in srgb, var(--color-blue-10) 20%, var(--viewBackground)); + --viewDayBoxSelectedBackground: color-mix(in srgb, var(--color-blue-10) 20%, var(--viewBackground)); + --viewDayBoxOffSelectedBackground: color-mix(in srgb, var(--color-blue-20) 20%, var(--viewTodayOffBackground)); + --viewDayBoxOtherSelectedBackground: color-mix(in srgb, var(--color-blue-10) 20%, var(--viewMonthOtherBackground)); + --viewMonthOtherBackground: var(--layout-background-2); + --viewMonthDayBoxSelectedColor: var(--layout-color-1); + --viewMonthDayBoxLabelColor: var(--layout-color-1); + --viewMonthWeekLabelBackground: var(--color-ink-20); + --viewMonthDayOtherBackground: color-mix(in srgb, var(--layout-background-2) 50%, var(--viewWeekendBackground)); + --viewMonthDayOffLabelBackground: color-mix(in srgb, var(--viewWeekendBackground) 95%, black); + --viewOffTimeBackground: color-mix(in srgb, var(--viewBackground) 95%, black); + --viewTimeBoxColor: var(--layout-color-2); + --viewDayLabelSelectedColor: currentColor; + --viewDayLabelSelectedBackground: var(--color-blue-50); + --viewDragboxColor: currentColor; + --viewDragboxBackground: var(--color-blue-50); + --viewDropshadowBackground: var(--color-blue-50); + --calendar-nav-control-bg-color: var(--color-white); + --calendar-nav-control-bg-color-hover: rgba(0, 0, 0, 0.1); + --calendar-view-nav-btn-padding: 4px; + --calendar-nav-control-padding: 6px; + --calendar-view-toggle-label-padding: 3px 15px; + --calendar-view-toolbar-gap: 9px; + --button-border-radius: 3px; + --calendar-view-toggle-background: var(--layout-background-3); + --calendar-view-toggle-hover-background: var(--layout-background-2); + --calendar-view-toggle-active-background: var(--layout-background-4); + --calendar-view-toggle-selected-background: var(--layout-background-1); + --calendar-view-toggle-selected-hover-background: var(--layout-background-0); + --calendar-view-toggle-border-color: transparent; + --calendar-view-toggle-shadow-color: color-mix(in srgb, var(--color-black) 30%, transparent); + --calendar-month-day-box-padding: 2px; + --today-week-pill-padding-block: 3px; + --today-week-pill-padding-inline: 6px; + --calendar-nav-gap: 3px; +} + +:root[uidensity="compact"] { + --calendar-view-toggle-margin: 3px; + --calendar-view-toggle-label-padding: 2px 12px; + --calendar-view-toolbar-gap: 6px; + --calendar-month-day-box-padding: 1px; + --today-week-pill-padding-block: 1px; + --today-week-pill-padding-inline: 3px; + --calendar-nav-gap: 3px; +} + +:root[uidensity="touch"] { + --calendar-view-toggle-margin: 6px 3px; + --calendar-view-toggle-label-padding: 6px 15px; + --calendar-view-toolbar-gap: 12px; + --calendar-month-day-box-padding: 3px; + --today-week-pill-padding-block: 3px; + --today-week-pill-padding-inline: 9px; + --calendar-nav-gap: 6px; +} + +@media (prefers-color-scheme: dark) { + :root { + --viewTodayDayLabelBackground: color-mix(in srgb, var(--color-blue-90) 30%, var(--viewBackground)); + --viewHeaderSelectedBackground: color-mix(in srgb, var(--color-blue-90) 20%, var(--viewBackground)); + --viewDayBoxSelectedBackground: color-mix(in srgb, var(--color-blue-90) 20%, var(--viewBackground)); + --viewDayBoxOffSelectedBackground: color-mix(in srgb, var(--color-blue-80) 20%, var(--viewTodayOffBackground)); + --viewDayBoxOtherSelectedBackground: color-mix(in srgb, var(--color-blue-90) 20%, var(--viewMonthOtherBackground)); + --viewMonthDayOffLabelBackground: color-mix(in srgb, var(--viewWeekendBackground) 95%, var(--color-ink-30)); + --viewOffTimeBackground: color-mix(in srgb, var(--viewBackground) 95%, var(--color-ink-30)); + --viewWeekendBackground: color-mix(in srgb, var(--viewBackground) 80%, var(--color-ink-40)); + --viewMonthOtherBackground: var(--layout-background-1); + --viewMonthWeekLabelBackground: var(--color-ink-60); + --viewMonthDayOtherBackground: color-mix(in srgb, var(--layout-background-1) 50%, var(--viewWeekendBackground)); + --calendar-nav-control-bg-color: var(--color-black); + --calendar-nav-control-bg-color-hover: rgba(0, 0, 0, 0.3); + --calendar-view-toggle-hover-background: var(--layout-background-4); + --calendar-view-toggle-active-background: var(--layout-background-2); + --calendar-view-toggle-shadow-color: color-mix(in srgb, var(--color-black) 50%, transparent); + } +} + +@media (prefers-contrast) { + :root:not(:-moz-lwtheme) { + --calendar-view-toggle-background: transparent; + --calendar-view-toggle-hover-background: SelectedItem; + --calendar-view-toggle-active-background: SelectedItem; + --calendar-view-toggle-selected-background: SelectedItem; + --calendar-view-toggle-selected-hover-background: SelectedItem; + --calendar-view-toggle-border-color: WindowText; + --calendar-view-toggle-shadow-color: transparent; + --viewColor: WindowText; + --viewBackground: Field; + --viewBorderColor: ThreeDShadow; + --viewHighlightBorderColor: var(--selected-item-color); + --viewTodayColor: inherit; + --viewTodayBackground: Field; + --viewTodayLabelColor: var(--selected-item-text-color); + --viewTodayLabelBackground: var(--selected-item-color); + --viewTodayOffBackground: ButtonFace; + --viewTodayDayLabelBackground: ButtonFace; + --viewTodayWeekendBackground: ButtonFace; + --viewWeekendBackground: hsla(0, 0%, 60%, 0.1); + --viewHeaderSelectedBackground: ButtonFace; + --viewDayBoxSelectedBackground: Field; + --viewDayBoxOffSelectedBackground: hsla(0, 0%, 60%, 0.05); + --viewDayBoxOtherSelectedBackground: hsla(0, 0%, 60%, 0.05); + --viewMonthOtherBackground: ButtonFace; + --viewMonthWeekLabelBackground: ButtonFace; + --viewMonthDayBoxSelectedColor: var(--selected-item-color); + --viewMonthDayBoxLabelColor: WindowText; + --viewMonthDayOtherBackground: hsla(0, 0%, 60%, 0.1); + --viewMonthDayOffLabelBackground: hsla(0, 0%, 60%, 0.1); + --viewOffTimeBackground: hsla(0, 0%, 60%, 0.1); + --viewTimeBoxColor: GrayText; + --viewDayLabelSelectedColor: var(--selected-item-text-color); + --viewDayLabelSelectedBackground: var(--selected-item-color); + --viewDragboxColor: GrayText; + --viewDragboxBackground: var(--selected-item-color); + --viewDropshadowBackground: var(--selected-item-color) !important; + } + + button.calview-toggle-item:not(:-moz-lwtheme):hover, + button.calview-toggle-item[role="tab"][aria-selected="true"]:not(:-moz-lwtheme) { + --button-border-color: SelectedItem; + --calendar-view-toggle-border-color: SelectedItem; + color: SelectedItemText; + } +} + +/* Calendar Items */ + +.calendar-item-container { + display: flow-root; + overflow: hidden; + min-height: 100%; + width: 100%; +} + +.calendar-item-container > .location-desc { + /* Margin matches the padding of .calendar-item-flex. */ + margin: 2px; +} + +.calendar-item-flex { + display: flex; + align-items: baseline; + gap: 4px; + padding: 4px 5px; + overflow-x: hidden; +} + +.calendar-item-flex > .alarm-icons-box { + display: contents; +} + +.item-time-label { + flex: 0 0 auto; + font-weight: 600; +} + +.calendar-item-flex img { + flex: 0 0 auto; + width: 12px; + height: 12px; +} + +.item-type-icon { + -moz-context-properties: fill; + fill: currentColor; +} + +.item-type-icon:not([src]) { + display: none; +} + +.item-type-icon.rotated-to-read-direction:-moz-locale-dir(ltr) { + transform: rotate(-90deg); +} + +.item-type-icon.rotated-to-read-direction:-moz-locale-dir(rtl) { + transform: rotate(90deg); +} + +.event-name-input, +.event-name-label, +.location-desc { + font-weight: normal; + overflow-x: hidden; +} + +.event-name-label, +.location-desc { + text-overflow: ellipsis; +} + +.event-name-label { + white-space: nowrap; +} + +:is(calendar-day-view, calendar-week-view) .event-name-label { + white-space: normal; +} + +.event-name-input, +.event-name-label { + flex: 1 1 auto; +} + +.event-name-input { + padding: 0; + margin: 0; + background: transparent; + color: inherit; +} + +.location-desc { + opacity: 0.5; + white-space: pre; +} + +.item-classification-icon, +.item-recurrence-icon { + -moz-context-properties: stroke; + stroke: currentColor; + pointer-events: none; +} + +.item-classification-icon:not([src]), +.item-recurrence-icon:not([src]) { + display: none; +} + +.calendar-category-box { + display: block; + width: 4px; + position: absolute; + inset-block: 2px; + inset-inline-end: 2px; + border-radius: 2px; + z-index: -1; +} + +/* Multiday view */ + +:is(calendar-day-view, calendar-week-view):not([hidden]) { + flex: 1 auto; + display: grid; + height: 0; +} + +.multiday-grid { + overflow: auto; + display: grid; + grid-auto-flow: column; + /* Columns: timebar, days, multiday-end-border. + * --multiday-num-days is set in javascript on the grid. */ + grid-template-columns: min-content repeat(var(--multiday-num-days), 1fr) min-content; + /* Rows: heading, all-day header, event column. + * NOTE: We use "min-content" instead of "auto" because otherwise the grid + * will grow "auto" rows if it has extra vertical space, and this can effect + * calculating the pixelsPerMinute for the view. */ + grid-template-rows: min-content min-content min-content; +} + +.multiday-grid.multiday-grid-rotated { + grid-auto-flow: row; + grid-template-columns: min-content min-content min-content; + grid-template-rows: min-content repeat(var(--multiday-num-days), 1fr) min-content; +} + +.multiday-header-corner { + position: sticky; + z-index: 3; + inset-block-start: 0; + inset-inline-start: 0; + grid-row: 1 / 3; + grid-column: 1 / 2; +} + +.multiday-grid-rotated .multiday-header-corner { + grid-row: 1 / 2; + grid-column: 1 / 3; +} + +.multiday-timebar { + /* NOTE: This also helps position multiday-timebar-now-indicator. */ + position: sticky; + z-index: 2; +} + +.multiday-grid:not(.multiday-grid-rotated) .multiday-timebar { + min-width: 10ex; + inset-inline-start: 0; +} + +.multiday-grid.multiday-grid-rotated .multiday-timebar { + min-height: 40px; + inset-block-start: 0; +} + +.multiday-timebar-time { + color: var(--viewTimeBoxColor); + padding: 1px 5px; + white-space: nowrap; +} + +.multiday-grid:not(.multiday-grid-rotated) .multiday-timebar-time { + text-align: end; +} + +.day-column-container { + /* Container children become grid items. */ + display: contents; +} + +.day-column-heading { + color: var(--viewColor); + font-size: inherit; + box-sizing: border-box; + white-space: nowrap; + padding-inline: 5px; + padding-block: 1px 2px; + display: flex; + align-items: center; + justify-content: center; + margin: 0; +} + +.day-column-heading > * { + flex: 0 0 auto; +} + +.day-column-heading { + position: sticky; + z-index: 2; + inset-block-start: 0; + inset-inline-start: auto; +} + +.multiday-grid-rotated .day-column-heading { + inset-block-start: auto; + inset-inline-start: 0; +} + +calendar-header-container { + position: sticky; + z-index: 2; + /* NOTE: calendar-header-container must have its inset-*-start set in + * javascript, when we know the height/width of the .day-column-heading. */ + /* Give child all available space. */ + display: grid; +} + +.allday-events-list { + display: block; + min-height: 30px; + max-height: 120px; + min-width: 100px; + overflow-y: auto; + overflow-x: hidden; + margin: 0; + padding-block: 0; + padding-inline: 1px 6px; + /* Prevent overscrolling from moving into the parent view. + * NOTE: This only works if the list is overflowing. For cases where it does + * not overflow, we must prevent scrolling the parent in javascript. */ + overscroll-behavior: none; +} + +.multiday-grid-rotated .allday-events-list:not(:empty) { + min-width: 150px; +} + +.allday-event-listitem { + display: block; + margin: 2px; +} + +.multiday-events-list { + padding: 0; + position: relative; +} + +.multiday-event-listitem { + /* This acts as sized wrapper to an calendar-event-box, so we use the grid + * display to give it the same dimensions. */ + display: grid; + position: absolute; + padding: 1px; + box-sizing: border-box; +} + +/* Margin that allows event creation by click and drag when the time slot is + full of events. On the right side in normal view ... */ +calendar-event-column .multiday-events-list { + margin-inline: 0 5px; + margin-block: 0; +} +/* ... and on bottom in rotate view. */ +.multiday-grid-rotated calendar-event-column .multiday-events-list { + margin-block: 0 5px; + margin-inline: 0; +} + +.multiday-end-border { + grid-row: 1 / 4; + grid-column: auto; +} + +.multiday-grid-rotated .multiday-end-border { + grid-row: auto; + grid-column: 1 / 4; +} + +.multiday-hour-box-container { + display: flex; + flex-direction: column; +} + +.multiday-grid-rotated .multiday-hour-box-container { + flex-direction: row; +} + +.multiday-hour-box { + flex: 1 1 0; +} + +/* Borders. */ + +.multiday-header-corner { + border-inline-start: none; + border-inline-end: 2px solid var(--viewBorderColor); + border-block-start: none; + border-block-end: 2px solid var(--viewBorderColor); +} + +.multiday-timebar { + border-inline-start: none; + border-inline-end: 2px solid var(--viewBorderColor); + border-block: none; +} + +.multiday-grid-rotated .multiday-timebar { + border-block-start: 1px solid var(--viewBorderColor); + border-block-end: 2px solid var(--viewBorderColor); + border-inline: none; +} + +.day-column-heading { + border-block: 1px solid var(--viewBorderColor); + border-inline-start: 1px solid var(--viewBorderColor); + border-inline-end: none; +} + +.multiday-grid-rotated .day-column-heading { + border-inline: 1px solid var(--viewBorderColor); + border-block-start: 1px solid var(--viewBorderColor); + border-block-end: none; +} + +calendar-header-container { + /* Block start border is given by .day-column-heading. */ + border-block-start: none; + border-block-end: 2px solid var(--viewBorderColor); + border-inline-start: 1px solid var(--viewBorderColor); + /* Inline end border is given by the next header. */ + border-inline-end: none; +} + +.multiday-grid-rotated calendar-header-container { + border-inline-start: none; + border-inline-end: 2px solid var(--viewBorderColor); + border-block-start: 1px solid var(--viewBorderColor); + border-block-end: none; +} + +calendar-event-column, +.multiday-end-border { + /* NOTE: For calendar-event-column, the calendar-header-container and last + * .multiday-hour-box elements provide the starting end ending block borders, + * respectively. */ + border-inline-start: 1px solid var(--viewBorderColor); + border-inline-end: none; + border-block: none; +} + +.multiday-grid-rotated :is( + calendar-event-column, + .multiday-end-border +) { + border-block-start: 1px solid var(--viewBorderColor); + border-block-end: none; + border-inline: none; +} + +.multiday-hour-box { + border-block-start: none; + border-block-end: 1px solid var(--viewBorderColor); + border-inline: none; +} + +.multiday-grid:not(.multiday-grid-rotated) .multiday-timebar .multiday-hour-box { + /* Timebar has same border as in the calendar-event-column, so that they + * align, but we make it transparent to hide it. */ + border-color: transparent; +} + +.multiday-grid-rotated .multiday-hour-box { + border-inline-start: none; + border-inline-end: 1px solid var(--viewBorderColor); + border-block: none; +} + +/* Background. + * Styling priority, from lowest to highest: + * + .day-column-weekend + * + .day-column-today + * + .day-column-selected + */ + +.multiday-header-corner, +.day-column-heading, +calendar-header-container, +calendar-event-column, +.multiday-hour-box { + background-color: var(--viewBackground); +} + +.day-column-weekend :is( + calendar-header-container, + .multiday-hour-box +) { + background-color: var(--viewWeekendBackground); +} + +.day-column-today :is( + calendar-header-container, + .multiday-hour-box +) { + background-color: var(--viewTodayBackground); +} + +.day-column-today .day-column-heading { + color: var(--viewTodayLabelBackground); +} + +.day-column-today.day-column-weekend:not(.day-column-selected) :is( + calendar-header-container, + .multiday-hour-box +) { + background-color: var(--viewTodayWeekendBackground); +} + +.day-column-selected :is( + calendar-header-container, + .multiday-hour-box, + .day-column-heading +) { + background-color: var(--viewHeaderSelectedBackground); + border-inline: 1px solid var(--viewHighlightBorderColor); +} + +.multiday-hour-box.multiday-hour-box-off-time { + background-color: var(--viewOffTimeBackground); +} + +.day-column-weekend .multiday-hour-box.multiday-hour-box-off-time { + background-color: var(--viewMonthDayOffLabelBackground); +} + +.day-column-today .multiday-hour-box.multiday-hour-box-off-time { + background-color: var(--viewTodayOffBackground); +} + +.day-column-selected .multiday-hour-box.multiday-hour-box-off-time { + background-color: var(--viewDayBoxOffSelectedBackground); +} + +.fgdragbox { + -moz-box-orient: inherit; + display: none; +} + +.fgdragbox[dragging="true"] { + display: flex; + background: var(--viewDragboxBackground); + border: 5px var(--viewBackground); + opacity: 0.5; + min-height: 2px; + min-width: 2px; +} + +.fgdragcontainer { + -moz-box-orient: inherit; + display: none; +} + +.fgdragcontainer[dragging="true"] { + display: flex; + /* This is a workaround for a stack bug and display: hidden in underlying + * elements -- the display: hidden bits get misrendered as being on top. + * Setting an opacity here forces a view to be created for this element, too. + */ + opacity: 0.9999; +} + +.fgdragbox-label { + font-weight: bold; + text-align: center; + overflow: hidden; + color: var(--viewDragboxColor); +} + +.timeIndicator { + opacity: 0.7; +} + +.multiday-grid:not(.multiday-grid-rotated) .timeIndicator { + min-width: 1px; + margin-inline: -1px; + border-block-start: 2px solid var(--color-red-50); +} + +.multiday-grid.multiday-grid-rotated .timeIndicator { + min-height: 1px; + margin-block: -1px; + border-inline-start: 2px solid var(--color-red-50); +} + +.multiday-timebar-now-indicator { + background-color: var(--viewBackground); + position: absolute; + display: block; + border: 2px solid var(--color-red-50); + border-radius: 50%; +} + +.multiday-grid:not(.multiday-grid-rotated) .multiday-timebar-now-indicator { + margin-block-start: -4px; + margin-inline-end: -6px; + height: 6px; + width: 6px; + inset-inline-end: 0; +} + +.multiday-grid.multiday-grid-rotated .multiday-timebar-now-indicator { + margin-inline-start: -1px; + height: 8px; + width: 4px; + inset-block-end: 0px; +} + +/* Take care to ensure the dummy event box in a calendar-event-column remains hidden. */ +calendar-event-box:not([hidden]) { + /* Be the containing block for the gripbar-start/gripbar-end elements. */ + display: block; + position: relative; +} + +calendar-month-day-box-item[selected="true"].calendar-color-box, +calendar-event-box[selected="true"].calendar-color-box, +calendar-editable-item[selected="true"].calendar-color-box { + color: var(--color-white) !important; + background-color: var(--color-blue-50) !important; + box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.3); +} + +calendar-day-label { + color: var(--viewColor); + background-color: var(--viewBackground); +} + +calendar-day-label[relation="today"] { + background-color: var(--viewTodayDayLabelBackground); + color: var(--viewTodayColor); +} + +.calendar-day-label-name { + text-align: center; +} + +/* Multiweek/Month View */ +calendar-month-view, +calendar-multiweek-view { + padding: 0px 2px 2px; + /* Only have a single child. Grid display will automatically stretch to fill + * the given space. */ + display: grid; +} + +calendar-month-view[hidden], +calendar-multiweek-view[hidden] { + display: none; +} + +.monthtable { + display: grid; + /* Equal-width columns. To ensure they remain equal width when spacing + * becomes small, we must make sure each variable width element has + * overflow-x set to ensure they can shrink. + * NOTE: we don't set the number of columns to a fixed 7 days of the week + * since some days of the week can be hidden. This requires the grid-row + * to be set for each child to ensure they end up on the correct row. */ + grid-auto-columns: 1fr; + /* The first row is headers, and should not be stretched. */ + grid-template-rows: auto; + /* All other rows share equal height. Again, variable height elements should + * have overflow-y set so they can shrink. */ + grid-auto-rows: 1fr; + border-spacing: 0; + margin: 0; + padding: 0; + /* Complete the end borders. */ + border-inline-end: 1px solid var(--viewBorderColor); + border-block-end: 1px solid var(--viewBorderColor); +} + +.monthtable :is(tbody, thead, tr, td, th) { + /* Allow the calendar-month-day-box and calendar-day-label elements be the + * children of the grid. */ + display: contents; +} + +.monthtable :is(tr, th, td)[hidden] { + /* NOTE: Need this CSS rule because the hidden attribute behaviour is + * overridden by the "display: contents" rule above. */ + display: none; +} + +.monthtable :is(td, th) > * { + /* Hidden overflow ensures each cell has the same width/height, even when the + * space becomes limited, because this allows the cells to shrink. */ + overflow: hidden; +} + +.monthtable :is(td, th) > * { + /* Every cell in the body gets a starting border, which acts as the end border + * for the previous cell. */ + border: 1px solid transparent; + border-inline-start: 1px solid var(--viewBorderColor); + border-block-start: 1px solid var(--viewBorderColor); +} + +.monthtable calendar-day-label { + display: block; +} + +calendar-month-day-box { + display: flex; + flex-direction: column; +} + +.calendar-month-day-box-dates { + flex: 0 0 auto; + overflow-x: hidden; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 1rem; + padding: var(--calendar-month-day-box-padding); + margin: 0; +} + +.calendar-month-day-box-date-label[data-label="day"] { + margin-inline-start: auto; +} + +.calendar-month-day-box-list { + display: block; + margin: 0; + overflow-y: auto; + overflow-x: hidden; + padding: 0; + flex: 1 1 0; +} + +.calendar-month-day-box-list-item { + display: block; + margin: 2px; +} + +.calendar-month-day-box-current-month { + background-color: var(--viewBackground); +} + +.calendar-month-day-box-day-off { + background-color: var(--viewWeekendBackground); +} + +.calendar-month-day-box-other-month { + background-color: var(--viewMonthDayOtherBackground); +} + +.calendar-month-day-box-other-month.calendar-month-day-box-day-off { + background-color: var(--viewMonthDayOtherBackground); +} + +.calendar-month-day-box-current-month[relation="today"], +.calendar-month-day-box-day-off[relation="today"], +.calendar-month-day-box-other-month[relation="today"] { + background-color: var(--viewTodayBackground); +} + +.calendar-month-day-box-date-label[relation="today"] { + color: var(--color-white); + position: relative; + font-weight: bold; + background-color: var(--viewTodayLabelBackground); + border-radius: 1000px; + text-align: center; + padding-block: var(--today-week-pill-padding-block); + padding-inline: var(--today-week-pill-padding-inline); +} + +.calendar-month-day-box-current-month[selected="true"], +.calendar-month-day-box-day-off[selected="true"], +.calendar-month-day-box-other-month[selected="true"] { + border: 1px solid var(--viewHighlightBorderColor); +} + +.calendar-month-day-box-current-month[selected="true"] { + background-color: var(--viewDayBoxSelectedBackground); +} + +.calendar-month-day-box-day-off[selected="true"] { + background-color: var(--viewDayBoxSelectedBackground); +} + +.calendar-month-day-box-other-month[selected="true"] { + background-color: var(--viewDayBoxOtherSelectedBackground); +} + +.calendar-month-day-box-date-label[selected="true"] { + color: var(--viewMonthDayBoxSelectedColor); +} + +.calendar-month-day-box-date-label[relation="today"][selected="true"] { + color: var(--viewTodayLabelColor); +} + +.calendar-month-day-box-date-label { + color: var(--viewMonthDayBoxLabelColor); + font-size: 0.9rem; + font-weight: normal; + text-align: right; + margin: 0; + padding: 2px; +} + +.calendar-month-day-box-week-label { + color: color-mix(in srgb, var(--viewMonthDayBoxLabelColor) 70%, transparent); + font-size: 0.75rem; + font-weight: bold; + margin: 0; + background-color: var(--viewMonthWeekLabelBackground); + border-radius: 1000px; + text-align: center; + padding-block: var(--today-week-pill-padding-block); + padding-inline: var(--today-week-pill-padding-inline); +} + +.calendar-color-box { + /* FIXME: Is min-height needed? */ + min-height: 13px; + border-radius: 2px; + background-color: var(--item-backcolor); + color: var(--item-forecolor); + position: relative; + overflow: hidden; +} + +calendar-month-day-box calendar-month-day-box-item[allday="true"].calendar-color-box { + box-shadow: inset 0 0 0 1px color-mix(in srgb, black 35%, var(--item-backcolor)), + inset 0 0 0 2px color-mix(in srgb, white 50%, var(--item-backcolor)); +} + +.dropshadow { + height: 1.2em; + background-color: color-mix(in srgb, var(--viewDropshadowBackground) 30%, transparent); + border: 2px dashed var(--viewDropshadowBackground); + border-radius: 3px; +} + +:is(.gripbar-start, .gripbar-end) { + /* Invisible by default. */ + visibility: hidden; + pointer-events: auto; + position: absolute; + /* Center the image. */ + display: grid; + align-content: center; + justify-content: center; + overflow: clip; +} + +.event-readonly :is(.gripbar-start, .gripbar-end), +:is(.gripbar-start, .gripbar-end)[hidden] { + display: none; +} + +calendar-event-box:hover :is(.gripbar-start, .gripbar-end) { + visibility: visible; +} + +.gripbar-start { + cursor: n-resize; + inset-block: 0 auto; + inset-inline: 0; + padding-block: 1px 0; + padding-inline: 0; +} + +.gripbar-end { + cursor: s-resize; + inset-block: auto 0; + inset-inline: 0; + padding-block: 0 1px; + padding-inline: 0; +} + +/* Rotate the event-grippy.png image in rotated view. */ +.multiday-grid-rotated :is(.gripbar-start, .gripbar-end) img:-moz-locale-dir(ltr) { + transform: rotate(-90deg); +} + +.multiday-grid-rotated :is(.gripbar-start, .gripbar-end) img:-moz-locale-dir(rtl) { + transform: rotate(90deg); +} + +.multiday-grid-rotated :is(.gripbar-start, .gripbar-end) { + /* Explicitly set the content width to 3px (the height of the event-grippy.png + * img src) since we rotated the image. Otherwise the auto-width uses the + * width of the src. */ + width: 3px; +} + +.multiday-grid-rotated .gripbar-start { + inset-inline: 0 auto; + inset-block: 0; + padding-inline: 1px 0; + padding-block: 0; +} + +.multiday-grid-rotated .gripbar-end { + inset-inline: auto 0; + inset-block: 0; + padding-inline: 0 1px; + padding-block: 0; +} + +.multiday-grid-rotated :is( + .gripbar-start:-moz-locale-dir(ltr), + .gripbar-end:-moz-locale-dir(rtl), +) { + cursor: w-resize; +} + +.multiday-grid-rotated :is( + .gripbar-end:-moz-locale-dir(ltr), + .gripbar-start:-moz-locale-dir(rtl), +) { + cursor: e-resize; +} + +/* tooltips */ +.tooltipBox { + max-width: 40em; +} + +.tooltipValueColumn { + max-width: 35em; /* tooltipBox max-width minus space for label */ +} + +.tooltipHeaderTable { + border-spacing: 0; +} + +.tooltipHeaderLabel { + text-align: end; + padding-inline-end: 0.5em; +} + +.tooltipBodySeparator { + height: 1ex; /* 1ex space above body text, below last header. */ +} + +.tooltipBody { + font-weight: normal; + white-space: normal; + overflow-wrap: anywhere; + margin: 0pt; +} + +#conflicts-vbox .tooltipBody { + overflow: auto; + min-height: 250px; +} + +#calendar-view-context-menu[type="event"] .todo-only, +#calendar-view-context-menu[type="todo"] .event-only, +#calendar-view-context-menu[type="mixed"] .event-only, +#calendar-view-context-menu[type="mixed"] .todo-only, +#calendar-item-context-menu[type="event"] .todo-only, +#calendar-item-context-menu[type="todo"] .event-only, +#calendar-item-context-menu[type="mixed"] .event-only, +#calendar-item-context-menu[type="mixed"] .todo-only { + display: none; +} + +.attendance-menu[itemType="single"] > menupopup > *[scope="all-occurrences"] { + display: none; +} + +.calendar-context-heading-label { + font-weight: bold; + color: menutext; +} + +calendar-event-box, +calendar-editable-item, +calendar-month-day-box-item { + opacity: 0.99; + /* Do not change next line, since it would break item selection */ + -moz-user-focus: normal; + overflow: hidden; +} + +calendar-event-box[invitation-status="NEEDS-ACTION"], +calendar-editable-item[invitation-status="NEEDS-ACTION"], +calendar-month-day-box-item[invitation-status="NEEDS-ACTION"], +.agenda-listitem[status="NEEDS-ACTION"] .agenda-listitem-details { + outline: 2px dotted black; + outline-offset: -2px; + opacity: 0.6; +} + +calendar-event-box[invitation-status="TENTATIVE"], +calendar-editable-item[invitation-status="TENTATIVE"], +calendar-month-day-box-item[invitation-status="TENTATIVE"], +calendar-event-box[status="TENTATIVE"], +calendar-editable-item[status="TENTATIVE"], +calendar-month-day-box-item[status="TENTATIVE"], +.agenda-listitem[status="TENTATIVE"] .agenda-listitem-details { + opacity: 0.6; +} + +calendar-event-box[invitation-status="DECLINED"], +calendar-editable-item[invitation-status="DECLINED"], +calendar-month-day-box-item[invitation-status="DECLINED"], +.agenda-listitem[status="DECLINED"] .agenda-listitem-details, +calendar-event-box[status="CANCELLED"], +calendar-editable-item[status="CANCELLED"], +calendar-month-day-box-item[status="CANCELLED"], +.agenda-listitem[status="CANCELLED"] .agenda-listitem-details { + opacity: 0.5; +} + +calendar-month-day-box-item[status="CANCELLED"], +calendar-event-box[status="CANCELLED"], +calendar-editable-item[status="CANCELLED"], +.agenda-listitem[status="CANCELLED"] .agenda-event-start .agenda-listitem-details { + text-decoration: line-through; +} + +/* Calendar body */ +#view-box { + background-color: var(--layout-background-1); +} + +:root[lwt-tree] #view-box { + background-color: var(--sidebar-background-color); +} + +/* Calendar control bar: Cal navigation, Date interval, Week# and View toggle*/ + +#calendarViewHeader { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--calendar-nav-control-padding); + gap: 6px; +} + + #calendarViewHeader > div > span { + -webkit-line-clamp: 2; + display: -webkit-box; + -webkit-box-orient: vertical; + flex: 1; + text-overflow: ellipsis; + overflow: hidden; + min-width: 0; +} + +.navigation-inner-box { + display: flex; + align-items: center; + gap: var(--calendar-view-toolbar-gap); +} + +#calendarControls { + --button-margin: 0; + display: flex; + align-items: center; + gap: var(--calendar-nav-gap); +} + +.view-header { + font-weight: bold; + font-size: 1rem; + color: inherit; +} + +#previousViewButton { + background-image: var(--icon-nav-left); +} + +#nextViewButton { + background-image: var(--icon-nav-right); +} + +#todayViewButton { + background-image: var(--icon-calendar-today); +} + +.calview-toggle { + border-radius: 1000px; + background-color: var(--calendar-view-toggle-background); + border: 1px solid var(--calendar-view-toggle-border-color); + box-shadow: inset 0 0 6px -3px var(--calendar-view-toggle-shadow-color); + display: flex; + font-weight: 500; +} + +button.calview-toggle-item { + appearance: none; + min-width: unset; + min-height: unset; + border: 1px solid transparent; + border-radius: 1000px; + background-color: var(--calendar-view-toggle-background); + color: inherit; + padding: var(--calendar-view-toggle-label-padding); + margin: 3px; +} + +button.calview-toggle-item:focus-visible { + outline: var(--focus-outline); + outline-offset: 1px; +} + +button.calview-toggle-item[role="tab"][aria-selected="true"] { + background-color: var(--calendar-view-toggle-selected-background); + border: 1px solid var(--calendar-view-toggle-border-color); + box-shadow: 0 0 3px var(--calendar-view-toggle-shadow-color); +} + +button.calview-toggle-item[role="tab"][aria-selected="true"]:hover { + background-color: var(--calendar-view-toggle-selected-hover-background); +} + +button.calview-toggle-item:hover, +button.calview-toggle-item[role="tab"][aria-selected="false"]:hover { + background-color: var(--calendar-view-toggle-hover-background); +} + +button.calview-toggle-item:hover:active, +button.calview-toggle-item[role="tab"][aria-selected="false"]:hover:active { + background-color: var(--calendar-view-toggle-active-background); +} + +.today-navigation-button:not([disabled="true"]):hover { + background: var(--toolbarbutton-hover-background); + border-color: var(--toolbarbutton-hover-bordercolor); + box-shadow: var(--toolbarbutton-hover-boxshadow); + color: inherit; + outline: none; +} + +:root[lwt-tree-brighttext] .today-navigation-button:not([disabled="true"]):hover { + background: rgba(255, 255, 255, .25); + border-color: rgba(255, 255, 255, .5); +} + +.today-navigation-button:not([disabled="true"]):hover:active { + background: var(--toolbarbutton-active-background); + border-color: var(--toolbarbutton-active-bordercolor); + box-shadow: var(--toolbarbutton-active-boxshadow); + transition-duration: 10ms; +} + + :root[lwt-tree-brighttext] .today-navigation-button:not([disabled="true"]):hover:active { + background: rgba(255, 255, 255, .4); + border-color: rgba(255, 255, 255, .7); + box-shadow: inset 0 0 rgba(255, 255, 255, .4); +} + +#calendarControlBarMenu { + background-image: var(--icon-display-options); +} + +.fgdragspacer { + display: inherit; + overflow: hidden; +} + +.fgdragcontainer { + min-width: 1px; + min-height: 1px; + overflow:hidden; +} + +.multiday-events-list, +.timeIndicator { + pointer-events: none; +} |