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 {
--calendar-list-header-padding: 9px 12px;
--calendar-list-item-padding: 3px;
--calendar-list-item-margin: 3px;
--calendar-list-item-dot-size: 9px;
--calendar-list-item-dot-gap: 6px;
--calendar-panel-spacer: 3px;
--calendar-side-panel-minimonth-margin: 0 calc(2 * var(--calendar-panel-spacer));
}
:root[uidensity="compact"] {
--calendar-list-header-padding: 6px 9px;
--calendar-list-item-padding: 1px;
--calendar-list-item-margin: 1px;
--calendar-list-item-dot-size: 6px;
--calendar-list-item-dot-gap: 3px;
--calendar-side-panel-minimonth-margin: var(--calendar-panel-spacer);
}
:root[uidensity="touch"] {
--calendar-list-header-padding: 9px 15px;
--calendar-list-item-padding: 6px;
--calendar-list-item-margin: 6px;
--calendar-list-item-dot-size: 9px;
--calendar-list-item-dot-gap: 9px;
--calendar-side-panel-minimonth-margin: 0 calc(3 * var(--calendar-panel-spacer));
}
/* Calendar Items */
.calendar-list-header {
display: flex;
justify-content: space-between;
align-items: center;
-moz-context-properties: stroke;
stroke: currentColor;
min-height: auto;
min-width: auto;
margin: 0;
background-color: transparent;
border-color: transparent;
border-radius: 0;
padding: var(--calendar-list-header-padding);
font-size: 1.1rem;
font-weight: 600;
}
.calendar-list-header > * {
pointer-events: none;
}
.calendar-list-header:hover {
border-color: transparent !important;
}
#calendarListHeader:hover {
background-color: var(--layout-background-3);
}
#calendarListHeader[checked="false"] > img {
transform: rotate(-90deg);
}
.calendar-list-create {
list-style-image: var(--icon-add);
margin-block: 0;
margin-inline: 3px;
padding: 3px !important;
border: none !important;
min-width: auto;
}
.calendar-list-create .toolbarbutton-text:not([value]) {
display: none;
}
checkbox.treenode-checkbox {
margin-inline: 6px;
margin-block: 0;
font-weight: bold;
}
checkbox.treenode-checkbox.agenda-checkbox {
padding-block: 6px;
}
checkbox.treenode-checkbox > .checkbox-check {
appearance: none;
align-items: center;
border: none;
width: 10px;
height: 10px;
color: inherit;
background-image: var(--icon-nav-down-sm);
background-size: contain;
background-color: transparent !important;
-moz-context-properties: stroke;
stroke: currentColor;
}
checkbox.treenode-checkbox:not([checked="true"]) > .checkbox-check {
transform: rotate(-90deg);
}
checkbox.treenode-checkbox:not([checked="true"]):-moz-locale-dir(rtl) > .checkbox-check {
transform: rotate(90deg);
}
@media (prefers-reduced-motion: no-preference) {
checkbox.treenode-checkbox > .checkbox-check {
transition: transform 200ms ease;
}
#calendarListHeader > img {
transition: transform 150ms ease;
}
#calendar-list > li,
#calendar-list > li > :is(.calendar-displayed,.calendar-more-button) {
transition: opacity 250ms ease;
}
#calendar-list > li {
transition: background-color 250ms ease, color 250ms ease;
}
}
.checkbox-label-box {
margin-inline-start: 4px;
}
.checkbox-icon {
margin-inline-end: 2px;
}
.checkbox-label {
margin: 0 !important;
}
checkbox.treenode-checkbox > .checkbox-label-center-box > .checkbox-label-box > .checkbox-label {
font-weight: bold;
border-bottom: 1px solid -moz-Dialog;
}
#task-tree-filtergroup {
accent-color: var(--selected-item-color);
}
.selected-text {
font-weight: bold;
}
.selected-text:not([selected="true"]),
.unselected-text[selected="true"] {
visibility: hidden;
}
.categories-textbox .textbox-search-icon {
list-style-image: none;
cursor:default;
}
.categories-textbox {
appearance: auto;
-moz-default-appearance: textfield;
}
/*
* Note that #calendar-list is used for 2 separate lists that look similar,
* but are otherwise independent:
*
* - calendar-providerUninstall-dialog.xhtml
* - calendar-tab-panels.inc.xhtml
*
* Please be careful when changing the following CSS.
*/
#calendar-list-pane {
display: flex;
flex-direction: column;
flex: 1 1 0;
justify-content: space-between;
}
#calendar-list-inner-pane {
display: flex;
flex-direction: column;
flex: 1 1 0;
overflow-x: hidden;
}
#calendar-list-inner-pane > #calendar-list {
overflow: auto;
list-style: none;
margin: 0;
padding: 0;
flex: 1 1 0;
min-width: 150px;
}
#calendar-list > li {
display: flex;
padding-block: var(--calendar-list-item-padding);
padding-inline: 14px var(--calendar-list-item-dot-gap);
align-items: center;
margin-block: var(--calendar-list-item-margin);
margin-inline: 9px;
border-radius: 3px;
gap: var(--calendar-list-item-dot-gap);
}
#calendar-list > li.selected {
background-color: -moz-cellhighlight;
color: -moz-cellhighlighttext;
}
#calendar-list:focus-within > li.selected {
background-color: var(--selected-item-color);
color: var(--selected-item-text-color);
}
#calendar-list > li:not(.selected):hover {
background-color: color-mix(in srgb, var(--selected-item-color) 10%, transparent);
}
#calendar-list > li.dragging {
opacity: 0.75;
}
:root[lwt-tree] #calendar-list > li.selected {
border-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
background: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
}
:root[lwt-tree] #calendar-list:focus > li.selected {
border-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.6));
color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
}
:root[lwt-tree-brighttext] #calendar-list > li.selected {
border-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
background: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
}
:root[lwt-tree-brighttext] #calendar-list:focus > li.selected {
border-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.3));
color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
}
#calendar-list > li > button.calendar-enable-button {
color: #fff !important;
background: #6b80a4;
padding: 1px 4px;
font-size: 0.75em;
text-transform: uppercase;
font-weight: 700;
border-radius: 12px;
margin: 0;
min-width: auto;
min-height: auto;
}
#calendar-list > li > button.calendar-enable-button:hover,
#calendar-list > li > button.calendar-enable-button:focus,
#calendar-list > li > button.calendar-enable-button:active {
background: #2c4c82;
}
#calendar-list > li > :is(.calendar-displayed,.calendar-more-button) {
appearance: none;
color: inherit;
background-color: transparent !important;
border-style: none;
-moz-context-properties: fill, stroke;
fill: color-mix(in srgb, currentColor 20%, transparent);
stroke: currentColor;
margin: 0px;
min-width: 16px;
min-height: 16px;
width: 16px;
height: 16px;
}
#calendar-list > li > .calendar-displayed {
background-image: var(--icon-hidden);
opacity: 0.7;
}
#calendar-list > li > .calendar-displayed:checked {
background-image: var(--icon-eye);
opacity: 0;
}
#calendar-list > li > .calendar-more-button {
--button-padding: 0;
opacity: 0;
margin-block: 0;
background-image: var(--icon-more);
}
#calendar-list > li > .calendar-displayed:is(:hover, :focus),
#calendar-list > li > .calendar-more-button:is(:hover, :focus) {
opacity: 0.9 !important;
}
#calendar-list > li:hover > .calendar-displayed:checked,
#calendar-list > li:hover > .calendar-more-button {
opacity: 0.7;
}
#calendar-list > :is(li, richlistitem) > .calendar-color {
width: var(--calendar-list-item-dot-size);
height: var(--calendar-list-item-dot-size);
border-radius: 5px;
box-sizing: border-box;
flex-shrink: 0;
}
#calendar-list > li > .calendar-name {
flex: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#calendar-list > li[calendar-disabled]:not(.selected) > .calendar-name {
color: #808080;
}
#calendar-list > li > .calendar-list-icon {
width: 16px;
height: 16px;
-moz-context-properties: fill, stroke;
fill: color-mix(in srgb, currentColor 20%, transparent);
stroke: currentColor;
}
#calendar-list > li > .calendar-list-icon:not([src]) {
visibility: hidden;
}
#calendar-list > li:not([calendar-muted]) > .calendar-mute-status {
display: none;
}
#calendar-list > richlistitem {
align-items: center;
}
#sideButtonsBottom {
display: inline-flex;
justify-content: space-between;
}
#newCalendarSidebarButton {
background-image: var(--icon-calendar);
}
#refreshCalendar {
background-image: var(--icon-sync);
}
#sidePanelNewEvent,
#sidePanelNewTask {
background-image: var(--icon-add);
}
:root[uidensity="touch"] #sidePanelNewEvent,
:root[uidensity="touch"] #sidePanelNewTask {
--icon-size: 20px;
background-image: var(--icon-add-md);
}
/* Calendar Side Panel */
#primaryButtonSidePanel {
display: flex;
justify-content: center;
align-items: center;
}
:root[uidensity="compact"] #primaryButtonSidePanel {
margin-top: var(--calendar-panel-spacer);
}
#calMinimonthBox {
margin: var(--calendar-side-panel-minimonth-margin);
}