Revision control
Copy as Markdown
Other Tools
/* 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,
: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([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:hover,
button.calview-toggle-item[role="tab"][aria-selected="true"] {
--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;
}
.tooltipBody.notTooltip {
flex: 1 1 0;
overflow: auto;
}
#conflicts-vbox {
display: flex;
flex: 1 1 0;
min-height: 250px;
overflow: hidden;
margin: 2px 4px;
}
#conflicts-vbox .tooltipBody {
overflow: auto;
}
#conflicts-description {
max-width: 40em;
margin-top: 1ex;
}
#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;
}