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
calendar-minimonth {
--mmMainColor: -moz-DialogText;
--mmMainBackground: var(--color-gray-05);
--mmMainBorderColor: var(--color-gray-20);
--mmMainBorderRadius: 6px;
--mmHighlightColor: var(--selected-item-text-color);
--mmHighlightBackground: var(--selected-item-color);
--mmHighlightBorderColor: var(--selected-item-color);
--mmBoxBackground: var(--color-gray-20);
--mmBoxBorderColor: var(--color-gray-20);
--mmBoxPadding: 0;
--mmBoxItemColor: var(--color-gray-30);
--mmBoxItemBorderColor: transparent;
--mmBoxItemPadding: 2px;
--mmDayColor: var(--color-gray-70);
--mmDayBackground: transparent;
--mmDayBorderColor: transparent;
--mmDayOtherColor: var(--color-gray-40);
--mmDayWeekColor: var(--color-ink-40);
--mmDayOtherBackground: transparent;
--mmDayOtherBorderColor: transparent;
--mmDayTodayColor: var(--color-gray-90);
--mmDayTodayBackground: color-mix(in srgb, var(--color-ink-40) 20%, transparent);
--mmDayTodayBorderColor: transparent;
--mmDaySelectedColor: var(--selected-item-color);
--mmDaySelectedBackground: color-mix(in srgb, var(--selected-item-color) 40%, transparent);
--mmDaySelectedBorderColor: color-mix(in srgb, var(--selected-item-color) 70%, transparent);
--mmDaySelectedTodayBackground: color-mix(in srgb, var(--selected-item-color) 20%, transparent);
--mmDaySelectedTodayBorderColor: color-mix(in srgb, var(--selected-item-color) 70%, transparent);
--mmDayBorderRadius: 3px;
--mmDayPadding: 4px;
--mmDayBusyColor: var(--selected-item-color);
--mmDayBusyIndicatorSize: 4px;
}
/* This includes the light theme not inherited by the system */
:root[lwt-tree]:not([lwt-tree-brighttext]) calendar-minimonth {
--mmMainColor: var(--sidebar-text-color, FieldText);
--mmMainBackground: transparent;
--mmHighlightColor: var(--sidebar-highlight-text-color, var(--selected-item-text-color));
--mmHighlightBackground: var(--sidebar-highlight-background-color, var(--selected-item-color));
--mmHighlightBorderColor: var(--sidebar-highlight-background-color, var(--selected-item-color));
--mmBoxBackground: var(--color-gray-20);
--mmBoxBorderColor: var(--color-gray-30);
--mmBoxItemColor: var(--color-gray-30);
--mmBoxItemBorderColor: transparent;
--mmDayTodayColor: var(--color-gray-90);
--mmDayTodayBorderColor: transparent;
--mmDayColor: var(--color-gray-70);
--mmDayBorderColor: transparent;
--mmDayOtherColor: var(--color-gray-40);
--mmDayOtherBackground: transparent;
--mmDayOtherBorderColor: transparent;
}
@media (prefers-color-scheme: dark) {
calendar-minimonth {
--mmMainColor: var(--sidebar-text-color, FieldText);
--mmMainBackground: var(--color-gray-70);
--mmMainBorderColor: var(--color-gray-50);
--mmHighlightColor: var(--sidebar-highlight-text-color, var(--selected-item-text-color));
--mmHighlightBackground: var(--sidebar-highlight-background-color, var(--selected-item-color));
--mmHighlightBorderColor: var(--sidebar-highlight-background-color, var(--selected-item-color));
--mmBoxBackground: var(--color-gray-50);
--mmBoxBorderColor: var(--color-gray-40);
--mmBoxItemColor: var(--color-gray-40);
--mmBoxItemBorderColor: transparent;
--mmDayTodayColor: var(--color-ink-10);
--mmDayTodayBorderColor: transparent;
--mmDayColor: var(--color-gray-10);
--mmDayBackground: transparent;
--mmDayBorderColor: transparent;
--mmDayOtherColor: var(--color-gray-50);
--mmDayOtherBackground: transparent;
--mmDayOtherBorderColor: transparent;
--mmDayWeekColor: var(--color-ink-40);
}
}
@media (prefers-contrast) {
:root:not([lwtheme]) calendar-minimonth {
--mmMainBackground: transparent;
--mmBoxBackground: ButtonFace;
--mmBoxBorderColor: var(--color-gray-30);
--mmBoxItemColor: var(--color-gray-40);
--mmBoxItemBorderColor: var(--mmBoxBorderColor);
--mmDayColor: WindowText;
--mmDayOtherColor: GrayText;
--mmDayWeekColor: var(--selected-item-color);
--mmDayOtherBackground: transparent;
--mmDayTodayColor: -moz-DialogText;
--mmDayTodayBackground: Field;
--mmDayTodayBorderColor: var(--selected-item-color);
--mmDaySelectedColor: var(--selected-item-text-color);
--mmDaySelectedBackground: var(--selected-item-color);
--mmDaySelectedBorderColor: ButtonFace;
--mmDaySelectedTodayBackground: var(--selected-item-color);
--mmDaySelectedTodayBorderColor: ButtonFace;
}
}
:root[uidensity="compact"] calendar-minimonth {
--mmDayPadding: 2px;
}
:root[uidensity="touch"] calendar-minimonth {
--mmDayPadding: 8px;
--mmBoxPadding: 1px;
--mmBoxItemPadding: 4px;
}
.datepicker-menulist > menupopup::part(content) {
--panel-padding: 3px;
}
calendar-minimonth {
background-color: var(--mmMainBackground);
border-width: 0;
color: var(--mmMainColor);
padding: 1px;
min-width: 175px;
}
calendar-minimonth:not([readonly="true"]) .minimonth-readonly-header,
calendar-minimonth[readonly="true"] .minimonth-header {
display: none;
}
calendar-minimonth[readonly="true"] .minimonth-readonly-header {
display: flex;
justify-content: center;
align-items: center;
padding: 2px;
border-bottom: 1px solid var(--mmBoxBackground);
font-size: 1.1rem;
}
.minimonth-month-box {
font-weight: bold;
margin-bottom: var(--mmBoxPadding);
padding: 0;
text-align: center;
white-space: nowrap;
}
.minimonth-month-name {
display: inline-block;
font-weight: bold;
padding: var(--mmBoxPadding);
width: 7ch;
min-width: unset;
text-align: center;
}
.minimonth-year-name {
display: inline-block;
font-weight: bold;
width: 6ch;
min-width: unset;
padding: var(--mmBoxPadding);
text-align: center;
}
.minimonth-year-name[type="number"] {
text-align: center;
}
.minimonth-nav-section {
display: inline-flex;
align-items: center;
color: inherit;
background-color: var(--mmBoxBackground);
border: 1px solid var(--mmBoxItemBorderColor);
border-radius: var(--button-border-radius);
margin: var(--mmBoxItemPadding);
}
.minimonth-header button,
.minimonth-header-btn {
background: inherit;
border-color: transparent;
border-radius: 2px;
stroke: var(--mmMainColor);
width: auto;
min-width: unset;
height: 100%;
min-height: 0;
margin: var(--mmBoxPadding);
padding: var(--mmBoxPadding);
vertical-align: middle;
}
.button.minimonth-nav-btn.today-button {
background-image: var(--icon-calendar-today);
}
.button.minimonth-nav-btn[dir="1"] {
background-image: var(--icon-nav-right);
}
.button.minimonth-nav-btn[dir="-1"] {
background-image: var(--icon-nav-left);
}
@media (prefers-color-scheme: dark) {
.button.minimonth-nav-btn:is(:hover, :focus, :active),
.button.minimonth-nav-btn:enabled:is(:hover, :focus-visible, :active) {
background-color: var(--color-gray-60);
}
}
@media (prefers-contrast) {
:root:not([lwtheme]) .button.minimonth-nav-btn:is(:hover, :focus, :active),
:root:not([lwtheme]) .button.minimonth-nav-btn:enabled:is(:hover, :focus-visible, :active) {
background-color: var(--mmDaySelectedBackground);
color: var(--mmDaySelectedColor);
stroke: var(--mmDaySelectedColor);
border-color: transparent;
}
}
.minimonth-nav-btn:dir(rtl)[dir="-1"] ,
.minimonth-nav-btn:dir(rtl)[dir="1"] {
transform: scaleX(-1);
}
.minimonth-nav-item {
display: inline-block;
border-inline: 1px solid var(--mmBoxItemColor);
margin: 0;
}
.minimonth-nav-item input {
color: inherit;
background: inherit;
border: none;
margin: 0;
}
.minimonth-cal-box {
border-spacing: 0;
padding: 4px;
}
.minimonth-cal-box th, .minimonth-cal-box td {
width: 12.5%; /* 100% / 8 columns */
}
.minimonth-row-header {
text-align: center;
}
.minimonth-day {
color: var(--mmDayColor);
text-align: center;
border: 1px solid var(--mmDayBorderColor);
border-radius: var(--mmDayBorderRadius);
background-color: var(--mmDayBackground);
min-height: 16px;
padding: var(--mmDayPadding);
}
.minimonth-row-header-week {
color: var(--mmDayOtherColor);
text-align: center;
}
.minimonth-week {
color: var(--mmDayWeekColor);
text-align: center;
border: 1px solid var(--mmDayBorderColor);
background-color: var(--mmMainBackground);
min-height: 16px;
}
.minimonth-day[othermonth="true"] {
color: var(--mmDayOtherColor);
background-color: var(--mmDayOtherBackground);
border: 1px solid var(--mmDayOtherBorderColor);
}
.minimonth-day[today="true"] {
background-color: var(--mmDayTodayBackground);
border: 1px solid var(--mmDayTodayBorderColor);
color: var(--mmDayTodayColor);
font-weight: 800;
}
.minimonth-day[selected="true"] {
background-color: var(--mmDaySelectedBackground);
color: var(--mmDaySelectedColor);
border: 1px solid var(--mmDaySelectedBorderColor);
}
#repeat-until-datepicker .minimonth-day[extra="true"],
#repeat-until-date .minimonth-day[extra="true"] {
border: 1px solid var(--mmDayOtherColor);
}
#repeat-until-datepicker .minimonth-day:hover[extra="true"],
#repeat-until-date .minimonth-day:hover[extra="true"] {
border: 1px solid var(--mmHighlightBorderColor);
}
.minimonth-day[selected="true"][today="true"] {
background-color: var(--mmDaySelectedTodayBackground);
border: 1px solid var(--mmDaySelectedTodayBorderColor);
}
.minimonth-day,
.minimonth-week {
vertical-align: top;
padding: var(--mmDayPadding);
}
.minimonth-day::after {
content: "";
display: block;
height: var(--mmDayBusyIndicatorSize);
width: var(--mmDayBusyIndicatorSize);
margin-block-start: 2px;
margin-inline: auto;
border-radius: 50%;
background-color: transparent;
}
.minimonth-day[busy]::after {
background-color: var(--mmDayBusyColor);
}
.minimonth-day:hover[interactive] {
cursor: pointer;
border: 1px solid var(--mmDaySelectedTodayBorderColor);
outline: none;
}
.minimonth-day:hover[interactive][selected="true"] {
border-color: var(--mmHighlightBorderColor);
}
.minimonth-day:active[interactive] {
background-color: var(--mmHighlightBackground);
color: var(--mmHighlightColor);
}
.minimonth-list {
padding-inline-start: 1em;
padding-inline-end: 1em;
}
.minimonth-list[current="true"] {
font-weight: bold;
}
.minimonth-list:hover {
background-color: var(--mmHighlightBackground);
color: var(--mmHighlightColor);
cursor: pointer;
}
calendar-minimonth :focus-visible:not(:hover) {
outline: 2px solid var(--focus-outline-color);
outline-offset: -2px;
}
/* Minimonth border */
#minimonth-pane calendar-minimonth,
#recurrencePreview calendar-minimonth {
border: 1px solid var(--mmMainBorderColor);
border-radius: var(--mmMainBorderRadius);
}