diff options
Diffstat (limited to 'comm/calendar/base/themes/common')
93 files changed, 6542 insertions, 0 deletions
diff --git a/comm/calendar/base/themes/common/calendar-alarms.css b/comm/calendar/base/themes/common/calendar-alarms.css new file mode 100644 index 0000000000..c45660c496 --- /dev/null +++ b/comm/calendar/base/themes/common/calendar-alarms.css @@ -0,0 +1,83 @@ +/* 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/. */ + +.reminder-details > .alarm-icons-box { + width: 15px; +} + +/** + * Reminder icons (used from the event dialog, reminder dialog, views, ...) + */ +.reminder-icon, +.reminder-list-icon .menu-iconic-left, +.reminder-list-icon::part(icon) { + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; +} + +.reminder-list-icon[value="DISPLAY"] { + list-style-image: var(--icon-bell) +} + +.reminder-list-icon[value="EMAIL"] { + list-style-image: var(--icon-mail-sm); +} + +.reminder-list-icon[value="AUDIO"] { + list-style-image: var(--icon-bell-ring); +} + +.alarm-icons-box[flashing="true"] > .reminder-icon[value="DISPLAY"] { + background: red; + fill: white; +} + +.reminder-details > .alarm-icons-box > .reminder-icon { + width: 12px; + height: 12px; + margin-inline-start: 3px; +} + +/** + * Reminder dialog (i.e "custom" alarm in the event dialog) + * Please make sure rules added here are very specific and won't hurt other + * dialogs. + */ +#reminder-listbox { + min-height: 100px; +} + +#reminder-relative-radio > .radio-label-center-box > .radio-label-box, +#reminder-absolute-radio > .radio-label-center-box > .radio-label-box { + display: none; +} + +#reminder-actions-menulist > menupopup > menuitem > .menu-iconic-left { + display: flex; +} + +#reminder-notifications > notification[type="warning"] > hbox > .messageImage { + width: 32px; + height: 32px; + fill: #ffbf00; +} + +#reminder-notifications { + padding: 0 4px 4px; +} + +#reminder-actions-caption, +#reminder-details-caption { + padding-top: 20px; +} + +#reminder-actions-menulist { + margin-bottom: 20px; +} + +.reminder-icon > .menu-iconic-left > .menu-iconic-icon { + width: auto; + height: auto; +} diff --git a/comm/calendar/base/themes/common/calendar-attendees.css b/comm/calendar/base/themes/common/calendar-attendees.css new file mode 100644 index 0000000000..15ad0d9691 --- /dev/null +++ b/comm/calendar/base/themes/common/calendar-attendees.css @@ -0,0 +1,216 @@ +/* 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"); + +/* this is for attendee and organizer decoration in summary and event dialog */ +html|input.textbox-addressingWidget { + width: 100%; + background-color: transparent !important; + flex: 1; +} +html|input.textbox-addressingWidget:disabled { + color: inherit; + opacity: 0.5; +} + +#outer { + max-height: calc(100vh - 210px); +} + +.attendee-list-container { + width: 350px; +} + +.item-attendees-list-container { + flex: 1 1 100px; + appearance: auto; + -moz-default-appearance: listbox; + margin: 2px 4px 0; + overflow-y: auto; +} + +:root[lwt-tree] .item-attendees-list-container { + appearance: none; + background-color: var(--field-background-color); + color: var(--field-text-color); + border: 1px solid var(--field-border-color); +} + +.attendee-list { + display: block; + padding: 0; + margin: 0; +} + +.attendee-list-item { + display: contents; +} + +.attendee-label { + padding: 2px; + display: flex; + align-items: baseline; + user-select: text; +} + +.attendee-list .attendee-label:focus { + background-color: var(--selected-item-color); + color: var(--selected-item-text-color); +} + +.itip-icon { + flex: 0 0 auto; +} + +.attendee-name { + margin: 0 3px; + flex: 0 1 auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* this is for the itip icon setup in calendar */ + +.itip-icon { + --itip-icon-partstat: -16px -16px; /* default: NEEDS-ACTION */ + --itip-icon-role: 0px; /* default: REQ-PARTICIPANT */ + --itip-icon-usertype: -32px; /* default: INDIVIDUAL */ + width: 16px; + height: 16px; + background-image: url(chrome://calendar/skin/shared/calendar-itip-icons.svg), + url(chrome://calendar/skin/shared/calendar-itip-icons.svg); + background-position: var(--itip-icon-partstat), var(--itip-icon-usertype) var(--itip-icon-role); +} +.itip-icon[partstat="ACCEPTED"] { + --itip-icon-partstat: 0px 0px; +} +.itip-icon[partstat="DECLINED"] { + --itip-icon-partstat: 0px -16px; +} +.itip-icon[partstat="DELEGATED"] { + --itip-icon-partstat: 0px -32px; +} +.itip-icon[partstat="TENTATIVE"] { + --itip-icon-partstat: -16px 0px; +} +.itip-icon[usertype="INDIVIDUAL"] { + --itip-icon-usertype: -32px; +} +.itip-icon[usertype="GROUP"] { + --itip-icon-usertype: -48px; +} +.itip-icon[usertype="RESOURCE"] { + --itip-icon-usertype: -64px; +} +.itip-icon[usertype="ROOM"] { + --itip-icon-usertype: -80px; +} +.itip-icon[usertype="UNKNOWN"] { + --itip-icon-usertype: -96px; +} +.itip-icon[attendeerole="REQ-PARTICIPANT"] { + --itip-icon-role: 0px; +} +.itip-icon[attendeerole="OPT-PARTICIPANT"] { + --itip-icon-role: -16px; +} +.itip-icon[attendeerole="NON-PARTICIPANT"] { + --itip-icon-role: -32px; +} +.itip-icon[attendeerole="CHAIR"] { + --itip-icon-role: -32px; + --itip-icon-usertype: -16px; +} + +/* Autocomplete popup label formatting */ + +html|span.ac-emphasize-text { + font-weight: bold; +} + +/* the following will get obsolete once porting to new itip icons is complete */ + +.role-icon > .menu-iconic-left, +.usertype-icon > .menu-iconic-left { + visibility: inherit; +} + +.role-icon { + margin: 0 3px; + width: 21px; + height: 16px; + object-fit: none; + object-position: top 0 left -138px; +} + +.role-icon[disabled="true"] { + object-position: top 0 left -138px; +} + +.role-icon[attendeerole="REQ-PARTICIPANT"] { + object-position: top 0 left -138px; +} +.role-icon[attendeerole="REQ-PARTICIPANT"][disabled="true"] { + object-position: top 0 left -138px; +} + +.role-icon[attendeerole="OPT-PARTICIPANT"] { + object-position: top 0 left -159px; +} +.role-icon[attendeerole="OPT-PARTICIPANT"][disabled="true"] { + object-position: top 0 left -159px; +} + +.role-icon[attendeerole="CHAIR"] { + object-position: top 0 left -180px; +} +.role-icon[attendeerole="CHAIR"][disabled="true"] { + object-position: top 0 left -180px; +} + +.role-icon[attendeerole="NON-PARTICIPANT"] { + object-position: top 0 left -201px; +} +.role-icon[attendeerole="NON-PARTICIPANT"][disabled="true"] { + object-position: top 0 left -201px; +} + +.usertype-icon { + margin: 0 3px; + width: 16px; + height: 16px; + object-fit: none; + object-position: top 0 left 0; +} + +.usertype-icon[usertype="INDIVIDUAL"] { + object-position: top 0 left 0; +} +.usertype-icon[disabled="true"], +.usertype-icon[usertype="INDIVIDUAL"][disabled="true"] { + object-position: top -16px left 0; +} + +.usertype-icon[usertype="GROUP"] { + object-position: top 0 left -16px; +} +.usertype-icon[usertype="GROUP"][disabled="true"] { + object-position: top -16px left -16px; +} + +.usertype-icon[usertype="RESOURCE"] { + object-position: top 0 left -32px; +} +.usertype-icon[usertype="RESOURCE"][disabled="true"] { + object-position: top -16px left -32px; +} + +.usertype-icon[usertype="ROOM"] { + object-position: top 0 left -48px; +} +.usertype-icon[usertype="ROOM"][disabled="true"] { + object-position: top -16px left -48px; +} diff --git a/comm/calendar/base/themes/common/calendar-creation.css b/comm/calendar/base/themes/common/calendar-creation.css new file mode 100644 index 0000000000..e09678a4ec --- /dev/null +++ b/comm/calendar/base/themes/common/calendar-creation.css @@ -0,0 +1,99 @@ +/* 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"); + +td { + width: 100%; +} + +th { + font-weight: normal; + text-align: end; +} + +/* Match row spacing of calendar properties dialog. */ +th, +td { + min-height: 26px; +} + +.calendar-creation-text-input { + width: -moz-available; +} + +/* Network status messages and images. */ + +.network-status-image { + width: 16px; + height: 16px; +} + +.network-status-row { + margin-top: 1ex; +} + +.network-status-row .status-label { + display: none; +} +.network-status-row[status="loading"] .network-loading-label { + display: flex; +} +.network-status-row[status="notfound"] .network-notfound-label { + display: flex; +} +.network-status-row[status="authfail"] .network-authfail-label { + display: flex; +} + +.network-status-row:not([status="loading"]) .network-status-image { + display: none; +} + +/* Network Calendar List */ + +#network-calendar-list { + flex: 1 1 0; + appearance: none; + margin: 0; + border-style: none; + background-color: transparent; + color: inherit; + padding: 0 10px; +} + +#network-calendar-list > richlistitem { + align-items: center; + background-color: transparent; + border: 1px transparent solid; +} + +#network-calendar-list > richlistitem > checkbox > .checkbox-label-box { + display: none; +} + +#network-calendar-list > richlistitem .calendar-color { + width: 10px; + height: 10px; + border-radius: 5px; +} + +#network-calendar-list > richlistitem .calendar-name { + flex: 1; +} + +#network-calendar-list > richlistitem .calendar-edit-button { + min-width: 0px; + font-size: 0.82em; +} + +#network-calendar-list > richlistitem[calendar-disabled] > .calendar-color { + filter: grayscale(1); +} + +#network-calendar-list + > richlistitem[calendar-disabled]:not([selected="true"]) + > .calendar-name { + color: #808080; +} diff --git a/comm/calendar/base/themes/common/calendar-daypicker.css b/comm/calendar/base/themes/common/calendar-daypicker.css new file mode 100644 index 0000000000..f2e7962144 --- /dev/null +++ b/comm/calendar/base/themes/common/calendar-daypicker.css @@ -0,0 +1,28 @@ +/* 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/. */ + +button.calendar-daypicker { + cursor: pointer; + margin: 0; +} + +button.calendar-daypicker[mode="monthly-days"] { + min-width: 35px; + height: 15px; +} + +button.calendar-daypicker[mode="daypicker-weekday"] { + min-width: 36px; + height: 32px; +} + +hbox:last-child > button.calendar-daypicker:last-child[mode="monthly-days"] { + width: 140px; + height: 15px; +} + +button.calendar-daypicker[checked="true"] { + background-color: var(--selected-item-color) !important; + color: var(--selected-item-text-color) !important; +} diff --git a/comm/calendar/base/themes/common/calendar-invitation-display.css b/comm/calendar/base/themes/common/calendar-invitation-display.css new file mode 100644 index 0000000000..0bcae6acc2 --- /dev/null +++ b/comm/calendar/base/themes/common/calendar-invitation-display.css @@ -0,0 +1,13 @@ +/* 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/. */ + +#calendarInvitationDisplayContainer { + overflow-y: auto; +} + +#calendarInvitationDisplay:not([hidden]) { + padding: 25px 0px; + display: flex; + justify-content: center; +} diff --git a/comm/calendar/base/themes/common/calendar-item-summary.css b/comm/calendar/base/themes/common/calendar-item-summary.css new file mode 100644 index 0000000000..deabbdf2d9 --- /dev/null +++ b/comm/calendar/base/themes/common/calendar-item-summary.css @@ -0,0 +1,77 @@ +/* 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/. */ + +#calendar-item-summary { + max-width: 100vw; +} + +.calendar-summary-table { + width: 100%; +} + +.calendar-summary-table th { + user-select: text; + font-weight: normal; + padding-inline-end: 5px; + text-align: right; + vertical-align: baseline; + white-space: nowrap; +} + +.calendar-summary-table td { + user-select: text; + padding-top: 0; + vertical-align: baseline; + width: 100%; + max-width: 0; +} + +.calendar-summary-table td.item-location { + vertical-align: top; +} + +.calendar-summary-table .item-location-link > label { + margin-inline: 0; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: 100%; +} + +.calendar-summary-table .item-organizer-cell { + margin-inline: 0px; +} + +.calendar-summary-table .attachments-label { + vertical-align: top; +} + +.item-summary-splitter { + appearance: none; + border-style: none; + border-bottom: 1px solid var(--field-border-color); + min-height: 0; + height: 10px; + background-color: transparent; + margin: 10px; + position: relative; + z-index: 10; + transition: border-width .3s ease-in; +} + +.item-summary-splitter[state="collapsed"] { + transition: border-color .3s; +} + +.item-summary-splitter[state="collapsed"]:hover { + border-bottom: 4px solid var(--selected-item-color); +} + +.item-description-box { + flex: 1 1 10em; +} + +.item-description { + flex: 1 1 0; +} diff --git a/comm/calendar/base/themes/common/calendar-itip-icons.svg b/comm/calendar/base/themes/common/calendar-itip-icons.svg new file mode 100644 index 0000000000..ba482e47b3 --- /dev/null +++ b/comm/calendar/base/themes/common/calendar-itip-icons.svg @@ -0,0 +1,122 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 112 48" width="112" height="48"> + + <!-- definitions --> + <style> + .req { + fill: #ffcc00; + stroke: #000000; + stroke-width: 0.5; + } + .opt { + fill: #cccccc; + stroke: #000000; + stroke-width: 0.5; + } + .non { + fill: #ffffff; + stroke: #000000; + stroke-width: 0.5; + } + .status { + fill:#ffffff; + stroke:#ffffff; + stroke-width:0.5; + } + </style> + <clipPath id="cut-off-bottom"> + <rect x="0" y="0" width="16" height="16" /> + </clipPath> + <symbol id="chairsymbol" clip-path="url(#cut-off-bottom)"> + <ellipse cx="6" cy="16" rx="5.5" ry="8" fill="#000000" /> + <circle cx="6" cy="6.25" r="4" fill="#ffffff"/> + <ellipse cx="10" cy="16" rx="5.5" ry="8" fill="#000000" /> + <circle cx="10" cy="6.25" r="4" fill="#ffffff"/> + <ellipse cx="8" cy="16" rx="6.5" ry="9" fill="#ffcc00" /> + <circle cx="8" cy="4.5" r="4" fill="#ffcc00"/> + <line x1="0.5" y1="15.75" x2="15.5" y2="15.75" /> + </symbol> + <symbol id="individual" clip-path="url(#cut-off-bottom)"> + <ellipse cx="8" cy="16" rx="7.5" ry="8.5" /> + <circle cx="8" cy="5" r="4.5"/> + <line x1="0.5" y1="15.75" x2="15.5" y2="15.75" /> + </symbol> + <symbol id="group" clip-path="url(#cut-off-bottom)"> + <ellipse cx="5.75" cy="16" rx="5.5" ry="8" /> + <circle cx="5.75" cy="6.5" r="4"/> + <ellipse cx="7.5" cy="16" rx="6.0" ry="8.5" /> + <circle cx="7.5" cy="5.5" r="4"/> + <ellipse cx="9.25" cy="16" rx="6.25" ry="9" /> + <circle cx="9.25" cy="4.5" r="4"/> + <line x1="0.25" y1="15.75" x2="15.55" y2="15.75" /> + </symbol> + <symbol id="resource"> + <rect x="5.25" y="0.5" rx="1" ry="1" width="10.25" height="12" /> + <rect x="0.25" y="7" rx="1" ry="1" width="13" height="8" /> + <circle cx="4.25" cy="11" r="2.5" style="fill:#ffffff" /> + <line x1="8.25" y1="9" x2="12" y2="9" /> + <line x1="8.25" y1="11" x2="12" y2="11" /> + <line x1="8.25" y1="13" x2="12" y2="13" /> + <rect x="1.25" y="15" width="4" height="1" style="fill:#000000; stroke-width:0" /> + <rect x="8" y="15" width="4" height="1" style="fill:#000000; stroke-width:0" /> + </symbol> + <symbol id="room"> + <rect x="4" y="0.5" rx="0.25" ry="0.25" width="3" height="2" /> + <rect x="8.5" y="0.5" rx="0.25" ry="0.25" width="3" height="2" /> + <rect x="0.25" y="4.5" rx="0.25" ry="0.25" width="2" height="3" /> + <rect x="0.25" y="8.5" rx="0.25" ry="0.25" width="2" height="3" /> + <rect x="3.5" y="4" rx="1" ry="1" width="8.75" height="8" /> + <rect x="13.5" y="4.5" rx="0.25" ry="0.25" width="2" height="3" /> + <rect x="13.5" y="8.5" rx="0.25" ry="0.25" width="2" height="3" /> + <rect x="4" y="13.5" rx="0.25" ry="0.25" width="3" height="2" /> + <rect x="8.5" y="13.5" rx="0.25" ry="0.25" width="3" height="2" /> + </symbol> + <symbol id="unknown"> + <path d="m 7.8339844,11.558594 -2.4902344,0 q -0.00977,-0.53711 -0.00977,-0.654297 0,-1.2109376 0.4003906,-1.9921876 Q 6.1347656,8.1308594 7.3359375,7.1542969 8.5371094,6.1777344 8.7714844,5.875 9.1328125,5.3964844 9.1328125,4.8203125 q 0,-0.8007813 -0.6445312,-1.3671875 -0.6347657,-0.5761719 -1.7187501,-0.5761719 -1.0449218,0 -1.7480468,0.5957032 -0.703125,0.5957031 -0.9667969,1.8164062 l -2.5195313,-0.3125 Q 1.6425781,3.2285156 3.0195313,2.0078125 4.40625,0.78710937 6.6523437,0.78710937 q 2.3632813,0 3.7597653,1.24023443 1.396485,1.2304687 1.396485,2.8710937 0,0.9082031 -0.517578,1.71875 Q 10.783203,7.4277344 9.1035156,8.8242188 8.234375,9.546875 8.0195313,9.9863281 7.8144531,10.425781 7.8339844,11.558594 Z M 5.34375,15.25 l 0,-2.744141 2.7441406,0 0,2.744141 -2.7441406,0 z" /> + </symbol> + <symbol id="status" style="stroke-width:0.25;"> + <circle cx="11.5" cy="11.5" r="4.5" style="fill:#000000; stroke:#ffffff" /> + <circle cx="11.5" cy="11.5" r="4.25" style="stroke:#000000" /> + </symbol> + + <!-- status icons --> + <g id="accepted" class="status"> + <use style="fill:#00a000;" xlink:href="#status" x="0" y="0" /> + <rect x="9" y="11" width="5" height="1" /> + <rect x="11" y="9" width="1" height="5" /> + </g> + <g id="tentative" class="status"> + <use style="fill:#0000ff;" xlink:href="#status" x="16" y="0" /> + <path d="m 27.933594,13 -0.996094,0 q -0.0039,-0.214844 -0.0039,-0.261719 0,-0.484375 0.160156,-0.796875 0.160156,-0.3125 0.640625,-0.703125 0.480469,-0.390625 0.574219,-0.511719 0.144531,-0.191406 0.144531,-0.421875 0,-0.3203125 -0.257813,-0.546875 -0.253906,-0.2304687 -0.6875,-0.2304687 -0.417968,0 -0.699218,0.2382812 -0.28125,0.2382813 -0.386719,0.7265625 l -1.007813,-0.125 q 0.04297,-0.6992187 0.59375,-1.1875 0.554688,-0.4882812 1.453125,-0.4882812 0.945313,0 1.503907,0.4960937 0.558593,0.4921875 0.558593,1.1484375 0,0.363281 -0.207031,0.6875 -0.203125,0.324219 -0.875,0.882813 -0.347656,0.289062 -0.433594,0.464843 -0.08203,0.175782 -0.07422,0.628907 z M 26.9375,14.25 l 0,-1.097656 1.097656,0 0,1.097656 -1.097656,0 z" /> + </g> + <g id="declined" class="status"> + <use style="fill:#ee0000;" xlink:href="#status" x="0" y="16" /> + <rect x="9.5" y="26.75" width="4.25" height="1.5" /> + </g> + <use id="needs-action" style="stroke-width:0.5; fill:#f4f444;" xlink:href="#status" x="16" y="16" /> + <g id="delegated" class="status"> + <use style="fill:#444444;" xlink:href="#status" x="0" y="32" /> + <rect x="9" y="43" width="2.5" height="1" /> + <polygon points="11.5,41, 11.5,46, 14.5,43.5" /> + </g> + + <!-- role/partstat icons --> + <use id="chair" class="req" xlink:href="#chairsymbol" x="16" y="32" /> + <use id="individual-reqparticipant" class="req" xlink:href="#individual" x="32" y="0" /> + <use id="group-reqparticipant" class="req" xlink:href="#group" x="48" y="0" /> + <use id="resource-reqparticipant" class="req" xlink:href="#resource" x="64" y="0" /> + <use id="room-reqparticipant" class="req" xlink:href="#room" x="80" y="0" /> + <use id="unknown-reqparticipant" class="req" xlink:href="#unknown" x="96" y="0" /> + <use id="individual-optparticipant" class="opt" xlink:href="#individual" x="32" y="16" /> + <use id="group-optparticipant" class="opt" xlink:href="#group" x="48" y="16" /> + <use id="resource-optparticipant" class="opt" xlink:href="#resource" x="64" y="16" /> + <use id="room-optparticipant" class="opt" xlink:href="#room" x="80" y="16" /> + <use id="unknown-optparticipant" class="opt" xlink:href="#unknown" x="96" y="16" /> + <use id="individual-nonparticipant" class="non" xlink:href="#individual" x="32" y="32" /> + <use id="group-nonparticipant" class="non" xlink:href="#group" x="48" y="32" /> + <use id="resource-nonparticipant" class="non" xlink:href="#resource" x="64" y="32" /> + <use id="room-nonparticipant" class="non" xlink:href="#room" x="80" y="32" /> + <use id="unknown-nonparticipant" class="non" xlink:href="#unknown" x="96" y="32" /> +</svg> diff --git a/comm/calendar/base/themes/common/calendar-occurrence-prompt.css b/comm/calendar/base/themes/common/calendar-occurrence-prompt.css new file mode 100644 index 0000000000..90e96b55ae --- /dev/null +++ b/comm/calendar/base/themes/common/calendar-occurrence-prompt.css @@ -0,0 +1,67 @@ +/* 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/. */ + +#calendar-occurrence-prompt { + padding: 0; + width: 25em; + height: 34ex; + min-width: 25em; + min-height: 34ex; + -moz-user-focus: ignore; +} + +#occurrence-prompt-header { + height: 50px; + padding: 0 15px; + border: 1px solid var(--field-border-color); + background-color: var(--field-background-color); + color: var(--field-text-color); +} + +#title-label { + font-weight: bold; +} + +#accept-buttons-box { + padding: 0 18px; +} + +.occurrence-accept-buttons { + margin: 10px 0; +} + +.occurrence-accept-buttons > .button-box > .button-icon { + width: 18px; + height: 18px; +} + +.occurrence-accept-buttons > .button-box > .button-text { + margin: 0 3px !important; +} + +#accept-buttons-box { + -moz-context-properties: fill; + fill: currentColor; +} + +#accept-buttons-box[type="mixed"] > #accept-occurrence-button, +#accept-buttons-box[type="event"] > #accept-occurrence-button { + list-style-image: url(chrome://calendar/skin/shared/calendar-occurrence.svg#event-single); +} + +#accept-buttons-box[type="mixed"] > #accept-parent-button, +#accept-buttons-box[type="mixed"] > #accept-allfollowing-button, +#accept-buttons-box[type="event"] > #accept-parent-button, +#accept-buttons-box[type="event"] > #accept-allfollowing-button { + list-style-image: url(chrome://calendar/skin/shared/calendar-occurrence.svg#event-all); +} + +#accept-buttons-box[type="task"] > .occurrence-accept-buttons { + list-style-image: url(chrome://calendar/skin/shared/calendar-occurrence.svg#task-single); +} + +#accept-buttons-box[type="task"] > #accept-parent-button, +#accept-buttons-box[type="task"] > #accept-allfollowing-button { + list-style-image: url(chrome://calendar/skin/shared/calendar-occurrence.svg#task-all); +} diff --git a/comm/calendar/base/themes/common/calendar-occurrence.svg b/comm/calendar/base/themes/common/calendar-occurrence.svg new file mode 100644 index 0000000000..6a1de2d527 --- /dev/null +++ b/comm/calendar/base/themes/common/calendar-occurrence.svg @@ -0,0 +1,20 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18"> + <style> + path { + display: none; + fill: context-fill; + stroke: context-fill; + } + path:target { + display: block; + stroke-width: 1; + } + </style> + <path id="event-single" d="m 10.5,7.5 h 3 v 7 h -2 v -5 h -1 z m -9,-5 v 14 h 15 v -14 h -2 v 2 h -2 V 1 4.5 h -2 v -2 h -3 v 2 h -2 V 1 4.5 h -2 v -2 z m 0,3 h 15 v 11 h -15 z m 3,2 h 3 v 7 h -2 v -5 h -1 z"/> + <path id="event-all" style="fill-opacity:0;" d="m 8.5,10.5 h 2 v 4 h -1 v -3 h -1 z m -7,-3 v 9 h 11 v -9 h -1 v 1 h -2 V 7 8.5 h -2 v -1 h -1 v 1 h -2 V 7 8.5 h -2 v -1 z m 2,3 h 2 v 4 h -1 v -3 h -1 z m 9,3 h 2 v -9 h -1 v 1 h -2 V 4 5.5 h -2 v -1 h -1 v 1 h -2 V 4 5.5 h -2 v -1 h -1 V 7 m 11,3.5 h 2 V 1.5 h -1 v 1 h -2 v -1.5 1.5 h -2 v -1 h -1 v 1 h -2 v -1.5 1.5 h -2 v -1 h -1 V 4"/> + <path id="task-single" d="m 4.5,2.5 h -2 v 14 h 13 v -14 h -2 v 2 h 2 l 0,12 h -13 l 0,-12 h 2 z m 2,-1 h 5 v 3 h -5 z M 5.1,10.8 6.7,9.2 8.5,10.7 12,7 l 1.5,1.5 -5,5 z"/> + <path id="task-all" style="fill-opacity:0;" d="M 9,2.5 7,2.5 m 6.5,8 h 3 V 2.5 H 15 m -4.5,-1 h 3 v 1 h -3 z m -4.5,4 H 4 M 10.5,13.5 h 3 V 5.5 H 12 m -4.5,-1 h 3 v 1 h -3 z M 3,8.5 H 1.5 v 8 h 9 v -8 H 9 m -4.5,-1 h 3 v 1 h -3 z m -1,6 0.7,-0.6 1.1,0.9 2.6,-2.6 0.7,0.6 L 5.5,15 Z"/> +</svg> diff --git a/comm/calendar/base/themes/common/calendar-preferences.css b/comm/calendar/base/themes/common/calendar-preferences.css new file mode 100644 index 0000000000..f60303e3ae --- /dev/null +++ b/comm/calendar/base/themes/common/calendar-preferences.css @@ -0,0 +1,76 @@ +/* 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"); + +#defaults-task-table, +#alarm-defaults-table, +#dayAndWeekViewsTable { + border-spacing: 0; +} + +#defaults-task-table html|td, +#alarm-defaults-table html|td, +#dayAndWeekViewsTable html|td { + padding: 0; +} + +#default_task_start, +#default_task_due { + width: calc(100% - 16px); /* 16px is the sum of the element margins. */ +} + +#defaultsnoozelength { + margin-right: 10px; + margin-left: 10px; +} + +#alarm-sound-table { + display: inline-table; +} + +#eventdefalarm, +#tododefalarm { + margin-inline-start: 12px; +} + +#eventdefalarm, +#tododefalarm, +#alarmSoundFileField { + width: calc(100% - 8px); /* 8px is the sum of the element margins. */ +} + +#alarm-sound-buttons-box, +#calendar\.prefs\.alarm\.sound\.useDefault { + width: 100%; +} + +.defaultTimeBox { + width: 100%; + margin-inline-start: 8px; +} + +#eventdefalarmunit, +#tododefalarmunit { + margin-inline-end: 4px; +} + +.dayOffCheckbox { + flex-direction: row-reverse; + margin-top: -5px; + margin-inline-end: -5px; + padding-inline-start: 6px; +} + +.dayOffCheckbox > .checkbox-check { + margin-inline-start: 10px; +} + +#daystarthour { + margin-inline-end: 18px; +} + +#categorieslist { + height: 210px; +} diff --git a/comm/calendar/base/themes/common/calendar-print.css b/comm/calendar/base/themes/common/calendar-print.css new file mode 100644 index 0000000000..1c7ec8b801 --- /dev/null +++ b/comm/calendar/base/themes/common/calendar-print.css @@ -0,0 +1,66 @@ +/* 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/. */ + +@import url("chrome://calendar/skin/shared/widgets/minimonth.css"); + +#calendar-print { + flex: 1; + display: flex; + flex-direction: column; + font: menu; + overflow: auto; +} + +#calendar-print fieldset.section-block { + border: none; + padding: 0; + display: flex; +} + +#calendar-print select#from-month, +#calendar-print select#to-month { + flex: 1; +} + +#calendar-print input#from-year, +#calendar-print input#to-year { + flex: 1; + margin-block: 0; + margin-inline: 3px 0; +} + +#calendar-print select { + width: 100%; +} + +#calendar-print label.indent { + padding-inline-start: 1.5em; + box-sizing: border-box; +} + +calendar-minimonth { + padding: 0; + width: 100%; +} + +#next-button-container, +#back-button-container { + display: flex; + justify-content: center; + gap: 8px; +} + +#next-button-container > button, +#back-button-container > button { + flex: 1 1 auto; + margin: 0; +} + +#back-button-container { + margin-bottom: 8px; +} + +#button-container { + margin-top: 8px; +} diff --git a/comm/calendar/base/themes/common/calendar-providerUninstall-dialog.css b/comm/calendar/base/themes/common/calendar-providerUninstall-dialog.css new file mode 100644 index 0000000000..a5d00adbc9 --- /dev/null +++ b/comm/calendar/base/themes/common/calendar-providerUninstall-dialog.css @@ -0,0 +1,13 @@ +/* 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/. */ + +#provider-name-label { + font-weight: bold; + margin-inline-start: 3em; +} + +#calendar-list richlistitem[selected] { + color: unset; + background-color: unset; +} diff --git a/comm/calendar/base/themes/common/calendar-task-tree.css b/comm/calendar/base/themes/common/calendar-task-tree.css new file mode 100644 index 0000000000..1f44446dcf --- /dev/null +++ b/comm/calendar/base/themes/common/calendar-task-tree.css @@ -0,0 +1,132 @@ +/* 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/. */ + +.calendar-task-tree { + appearance: none; + margin: 0; +} + +/* align the treechildren text */ +.calendar-task-tree > treechildren::-moz-tree-cell-text { + margin-top: 1px; + margin-bottom: 1px; +} + +.calendar-task-tree > treechildren::-moz-tree-cell-text(inprogress) { + color: green !important; +} + +:root[lwt-tree-brighttext] .calendar-task-tree > treechildren::-moz-tree-cell-text(inprogress) { + color: var(--color-green-50) !important; +} + +.calendar-task-tree > treechildren::-moz-tree-row(inprogress, selected, focus) { + background-color: green !important; +} + +:root[lwt-tree-brighttext] .calendar-task-tree > treechildren::-moz-tree-row(inprogress, selected, focus) { + background-color: var(--color-green-50) !important; +} + +.calendar-task-tree > treechildren::-moz-tree-cell-text(overdue) { + color: var(--color-red-50) !important; +} + +:root[lwt-tree-brighttext] .calendar-task-tree > treechildren::-moz-tree-cell-text(overdue) { + color: var(--color-red-40) !important; +} + +.calendar-task-tree > treechildren::-moz-tree-row(overdue, selected, focus) { + background-color: var(--color-red-50) !important; +} + +:root[lwt-tree-brighttext] .calendar-task-tree > treechildren::-moz-tree-row(overdue, selected, focus) { + background-color: var(--color-red-40) !important; +} + +.calendar-task-tree > treechildren::-moz-tree-image(inprogress, selected, focus), +.calendar-task-tree > treechildren::-moz-tree-image(overdue, selected, focus), +.calendar-task-tree > treechildren::-moz-tree-cell-text(inprogress, selected, focus), +:root[lwt-tree-brighttext] .calendar-task-tree > + treechildren::-moz-tree-cell-text(inprogress, selected, focus), +.calendar-task-tree > treechildren::-moz-tree-cell-text(overdue, selected, focus), +:root[lwt-tree-brighttext] .calendar-task-tree > + treechildren::-moz-tree-cell-text(overdue, selected, focus) { + color: var(--selected-item-text-color) !important; +} + +.calendar-task-tree > treechildren::-moz-tree-cell-text(completed) { + text-decoration: line-through; + font-style: italic; +} + +.calendar-task-tree > treechildren::-moz-tree-cell-text(duetoday) { + font-weight: bold; +} + +.calendar-task-tree-col-priority { + -moz-context-properties: stroke; + stroke: currentColor; +} + +.calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority) { + margin-inline-start: -2px; + -moz-context-properties: stroke; + stroke: transparent; +} + +.calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority, highpriority) { + list-style-image: var(--icon-priority); + stroke: red; +} + +:root[lwt-tree-brighttext] .calendar-task-tree > + treechildren::-moz-tree-image(calendar-task-tree-col-priority, highpriority) { + stroke: var(--color-red-40); +} + +.calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority, lowpriority) { + list-style-image: var(--icon-priority-low); + stroke: blue; +} + +:root[lwt-tree-brighttext] .calendar-task-tree > + treechildren::-moz-tree-image(calendar-task-tree-col-priority, lowpriority) { + stroke: var(--color-white); +} + +.calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority, selected) { + stroke: currentColor !important; +} + +treecol.calendar-task-tree-col-percentcomplete { + text-align: end; +} + +.calendar-task-tree-col-completed >.treecol-icon, +.calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-completed) { + width: 14px; + height: 14px; + -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity; + fill: currentColor; + stroke: currentColor; + stroke-opacity: 0; +} + +.calendar-task-tree-col-completed >.treecol-icon { + fill-opacity: 1; +} + +.calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-completed) { + list-style-image: var(--icon-checkbox); + fill-opacity: 0; +} + +.calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-completed, completed) { + fill-opacity: 1; +} + +.calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-completed, repeating) { + fill-opacity: 0.6; +} diff --git a/comm/calendar/base/themes/common/calendar-task-view.css b/comm/calendar/base/themes/common/calendar-task-view.css new file mode 100644 index 0000000000..02e21bd3de --- /dev/null +++ b/comm/calendar/base/themes/common/calendar-task-view.css @@ -0,0 +1,236 @@ +/* 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[lwt-tree-brighttext] #calendar-task-details-container { + --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25)); + --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5)); + --toolbarbutton-header-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25)); + --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)); + --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .7)); + --toolbarbutton-active-boxshadow: 0 0 0 1px var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)) inset; + --toolbarbutton-checked-background: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .3)); +} + +#calendar-task-details-container { + overflow: hidden; +} + +#calendar-task-details { + background-color: var(--layout-background-2); + display: flex; + flex-direction: column; + min-height: 6ex; +} + +#calendar-task-details-attachment-row > hbox { + padding-inline-start: 0.1em; +} + +#calendar-task-details-grid { + padding: 1px 2px 0.2em; + width: 100%; +} + +#calendar-task-details-title { + font-weight: bold; +} + +#calendar-task-details-grid > tr > th { + display: flex; + justify-content: end; + font-weight: normal; + white-space: nowrap; +} + +#calendar-task-details-grid > tr > td { + padding-inline-start: 6px; + text-align: left; + width: 100%; +} + +#calendar-task-details-grid > tr > td > label { + margin-inline-start: 0; +} + +#other-actions-box { + display: flex; + justify-content: end; + padding-block: 2px 0.3em; +} + +#task-addition-box { + border-bottom: 1px solid ThreeDShadow; +} + +:root[lwt-tree] #task-addition-box { + background-color: var(--toolbar-bgcolor); + background-image: none; + color: var(--toolbar-color); +} + +#task-addition-box:-moz-lwtheme { + border-color: var(--splitter-color); +} + +:root[lwt-tree] #calendar-task-details-container { + background-color: var(--toolbar-bgcolor); + background-image: none; + color: var(--toolbar-color); + border-color: var(--sidebar-border-color, hsla(0,0%,60%,.4)); +} + +:root[lwt-tree-brighttext] #task-addition-box, +:root[lwt-tree-brighttext] #calendar-task-details-container { + border-color: var(--sidebar-border-color, rgba(249,249,250,.2)); +} + +#calendar-task-details-box { + display: block; +} + +#calendar-task-details-description-wrapper { + display: flex; +} + +#calendar-task-details-description { + width: 100%; + box-sizing: border-box; + background-color: var(--layout-background-1); + border-width: 0; + border-top: 1px solid var(--splitter-color); + margin-block: 0; + padding-inline: 4px; + outline: none; + resize: none; +} + +.task-details-name { + text-align: right; + color: windowtext; + opacity: 0.5; /* lower contrast */ +} + +#calendar-task-details-grid > .item-date-row > .headline { + font-weight: normal; + color: windowtext; + opacity: 0.5; /* lower contrast */ +} + +#calendar-task-details-attachment-row { + border-top: 1px solid var(--splitter-color); + padding-block: 2px; +} + +#calendar-task-details-attachment-rows { + max-height: 60px; +} + +.task-details-value { + text-align: left; + color: WindowText; +} + +:root[lwt-tree] .task-details-name, +:root[lwt-tree] .task-details-value, +:root[lwt-tree] #calendar-task-details-grid > .item-date-row > .headline { + color: inherit; +} + +#calendar-task-tree { + background-color: var(--layout-background-0); + color: var(--layout-color-1); + min-height: 98px; +} + +#calendar-task-tree-detail { + border-top: 1px solid ThreeDShadow; + margin: 3px 0; +} + +#calendar-task-tree-detail:-moz-lwtheme { + border-top-color: var(--splitter-color); +} + +#view-task-edit-field { + margin: 5px; + padding-block: 0; +} + +.task-edit-field[readonly="true"] { + color: GrayText; +} + +#unifinder-task-edit-field { + margin: 3px; +} + +#unifinder-todo-tree > .calendar-task-tree { + margin-bottom: 3px; +} + +/* ::::: task actions toolbar ::::: */ + +#calendar-add-task-button { + appearance: none; + -moz-user-focus: normal; + border: 1px solid transparent; + border-radius: var(--button-border-radius); + margin-inline-start: 5px; + list-style-image: var(--icon-new-task); + -moz-context-properties: fill, fill-opacity, stroke; + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; + fill-opacity: var(--toolbarbutton-icon-fill-opacity); +} + +#calendar-add-task-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; +} + +#calendar-add-task-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; +} + +#calendar-add-task-button:focus-visible:not(:hover) { + outline: 2px solid var(--focus-outline-color); + outline-offset: var(--focus-outline-offset); +} + +#calendar-add-task-button > .toolbarbutton-text { + padding-inline-start: 5px; +} + +#task-actions-category { + list-style-image: var(--icon-tag); +} + +#task-actions-markcompleted { + list-style-image: var(--icon-check); +} + +#task-actions-priority { + list-style-image: var(--icon-priority); +} + +#calendar-delete-task-button { + list-style-image: var(--icon-trash); +} + +.input-container { + display: flex; + align-items: stretch; +} + +.input-container html|input { + flex-grow: 1; +} diff --git a/comm/calendar/base/themes/common/calendar-toolbar.css b/comm/calendar/base/themes/common/calendar-toolbar.css new file mode 100644 index 0000000000..1ff326015c --- /dev/null +++ b/comm/calendar/base/themes/common/calendar-toolbar.css @@ -0,0 +1,21 @@ +/* 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/. */ + +/* Calendar tool bar button */ +#lightning-button-calendar { + list-style-image: var(--icon-calendar); +} + +/* Tasks tool bar button */ +#lightning-button-tasks { + list-style-image: var(--icon-tasks); +} + +#extractEventButton { + list-style-image: var(--icon-new-event); +} + +#extractTaskButton { + list-style-image:var(--icon-new-task); +} diff --git a/comm/calendar/base/themes/common/calendar-unifinder.css b/comm/calendar/base/themes/common/calendar-unifinder.css new file mode 100644 index 0000000000..50d1d0152c --- /dev/null +++ b/comm/calendar/base/themes/common/calendar-unifinder.css @@ -0,0 +1,40 @@ +/* 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/. */ + +:root[lwt-tree-brighttext] #unifinder-searchBox { + --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25)); + --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5)); + --toolbarbutton-header-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25)); + --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)); + --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .7)); + --toolbarbutton-active-boxshadow: 0 0 0 1px var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)) inset; + --toolbarbutton-checked-background: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .3)); +} + +/* only format Unifinder lists */ +#unifinder-search-results-tree > treechildren::-moz-tree-cell-text(highpriority) { + font-weight: bold; +} + +#unifinder-search-results-tree > treechildren::-moz-tree-cell-text(lowpriority) { + font-style: italic; + opacity: 0.6; +} + +/* workaround to avoid Window Flick */ +#unifinder-search-results-tree { + appearance: none; + min-height: 92px; + margin: 0; +} + +:root[lwt-tree] #unifinder-searchBox { + background-color: var(--toolbar-bgcolor); + background-image: none; + color: var(--toolbar-color); +} + +#unifinder-searchBox:-moz-lwtheme { + border-bottom-color: var(--splitter-color); +} 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; +} diff --git a/comm/calendar/base/themes/common/calendar.css b/comm/calendar/base/themes/common/calendar.css new file mode 100644 index 0000000000..4914623d85 --- /dev/null +++ b/comm/calendar/base/themes/common/calendar.css @@ -0,0 +1,255 @@ +/* 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/. */ + +/* For deactivating calendar, see calCalendarDeactivator.jsm. */ +:root[calendar-deactivated] .hide-when-calendar-deactivated { + display: none; +} + +/* ::: new tab buttons ::: */ +#calendar-tab-button, +#newMsgButton-calendar-menuitem { + list-style-image: var(--icon-calander); +} + +#task-tab-button, +#newMsgButton-task-menuitem { + list-style-image: var(--icon-tasks); +} + +:root[lwt-tree] #calSidebar { + background-color: var(--sidebar-background-color); + color: var(--sidebar-text-color); +} + +#calSidebar { + background-color: var(--layout-background-2); + overflow: hidden; + flex-shrink: 0; + min-width: 175px; +} + +#calendarContent { + background-color: var(--layout-background-0); +} + +/* Avoids contributing to the min width when Calendar is not selected. */ +#calendarTabPanel:not([selected]) { + visibility: collapse; +} + +#calendarDisplayBox { + overflow: auto; +} + +/* Invitations link in status bar */ +#calendar-invitations-label { + margin-block: 3px; +} + +/* Today pane button in status bar */ +#calendar-status-todaypane-button, +#calendar-status-todaypane-button[checked="true"] { + min-width: 0; + min-height: 0; + margin: 1px 0 0; + appearance: none; + border-radius: var(--button-border-radius); + border: 1px solid transparent; +} + +#calendar-status-todaypane-button:hover { + background: var(--toolbarbutton-hover-background); + border-color: var(--toolbarbutton-hover-bordercolor); + box-shadow: var(--toolbarbutton-hover-boxshadow); +} + +#calendar-status-todaypane-button:hover:active { + background: var(--toolbarbutton-active-background); + border-color: var(--toolbarbutton-active-bordercolor); + box-shadow: var(--toolbarbutton-active-boxshadow); + transition-duration: 10ms; +} + +#calendar-status-todaypane-button > stack > .toolbarbutton-icon-begin { + width: 16px; + height: 16px; + -moz-context-properties: fill, stroke, fill-opacity; + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; + fill-opacity: var(--toolbarbutton-icon-fill-opacity); +} + +#calendar-status-todaypane-button > stack > .toolbarbutton-day-text { + text-align: center; + margin-inline-start: 0; + margin-bottom: 0; + font-size: 7pt; + font-family: Arial, Helvetica, sans-serif; + font-weight: bold; + text-shadow: none; + background-color: transparent; +} + +#calendar-status-todaypane-button[hideLabel] > .toolbarbutton-text, +#calendar-status-todaypane-button[hideLabel] > .toolbarbutton-icon-end { + display: none; +} + +#calendar-status-todaypane-button > .toolbarbutton-icon-end { + -moz-context-properties: stroke; + stroke: currentColor; +} + +#calendar-status-todaypane-button[checked="true"] > .toolbarbutton-icon-end { + transform: scaleY(-1); +} + +/* iMIP notification bar */ +.calendar-notification-bar { + background-color: var(--color-blue-10); + padding: 3px; +} + +@media (prefers-color-scheme: dark) { + .calendar-notification-bar { + background-color: var(--color-purple-40); + } +} + +@media (prefers-contrast) { + .calendar-notification-bar:not(:-moz-lwtheme) { + background-color: var(--selected-item-color); + } + + .calendar-notification-bar:not(:-moz-lwtheme) > *:not(#imip-view-toolbox) { + color: var(--selected-item-text-color); + } +} + +.calendar-notification-bar { + margin: 0 4px 4px; + border-radius: 4px; + box-shadow: 0 1px 2px rgba(58, 57, 68, 0.3); +} + +#imip-view-toolbar { + --imip-button-background: var(--layout-background-1); +} + +#imip-bar > img { + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; + width: 20px; +} + +#imip-view-toolbar > .toolbarbutton-1[is="toolbarbutton-menu-button"] { + border-radius: var(--button-border-radius); +} + +#imip-view-toolbar > .toolbarbutton-1.message-header-view-button { + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; + margin-inline-start: 6px; +} + +#imip-view-toolbar > .toolbarbutton-1.message-header-view-button, +#imip-view-toolbar > .toolbarbutton-1.message-header-view-button > .toolbarbutton-menubutton-button, +#imip-view-toolbar > .toolbarbutton-1.message-header-view-button > .toolbarbutton-menubutton-dropmarker { + border-color: var(--toolbarbutton-header-bordercolor); + background-image: linear-gradient(var(--imip-button-background), var(--imip-button-background)); +} + +#imip-view-toolbar > .toolbarbutton-1.message-header-view-button:not(:active):hover, +#imip-view-toolbar > .toolbarbutton-1.message-header-view-button:is(:hover,[open="true"]) > + .toolbarbutton-menubutton-button, +#imip-view-toolbar > .toolbarbutton-1.message-header-view-button:hover > + .toolbarbutton-menubutton-dropmarker { + background-image: linear-gradient(var(--toolbarbutton-hover-background), + var(--toolbarbutton-hover-background)), + linear-gradient(var(--imip-button-background), var(--imip-button-background)); +} + +#imip-view-toolbar > .toolbarbutton-1.message-header-view-button:not([is="toolbarbutton-menu-button"]):hover:active, +#imip-view-toolbar > .toolbarbutton-1.message-header-view-button[is="toolbarbutton-menu-button"] > + .toolbarbutton-menubutton-button:hover:active, +#imip-view-toolbar > .toolbarbutton-1.message-header-view-button[open="true"] > + .toolbarbutton-menubutton-dropmarker { + background-image: linear-gradient(var(--toolbarbutton-active-background), + var(--toolbarbutton-active-background)), + linear-gradient(var(--imip-button-background), var(--imip-button-background)); +} + +.imipMoreButton > .toolbarbutton-icon { + display: none; +} + +.imipAcceptRecurrencesButton, +.imipAcceptButton { + list-style-image: var(--icon-check); +} + +.imipDeclineCounterButton, +.imipDeclineRecurrencesButton, +.imipDeclineButton { + list-style-image: var(--icon-close); +} + +.imipTentativeRecurrencesButton, +.imipTentativeButton { + list-style-image: var(--icon-tentative); +} + +.imipDetailsButton { + list-style-image: var(--icon-search); +} + +.imipAddButton { + list-style-image: var(--icon-new-event); +} + +.imipRescheduleButton, +.imipUpdateButton { + list-style-image: var(--icon-sync); +} + +.imipDeleteButton { + list-style-image: var(--icon-trash); +} + +.imipReconfirmButton { + list-style-image: var(--icon-priority); +} + +.imipGoToCalendarButton { + list-style-image: var(--icon-calendar-imip); +} + +.imipAcceptLabel { + font-weight: bold; + font-style: italic; +} + +#calsidebar_splitter, +#today-splitter { + /* splitter grip area */ + width: 5px; + border-width: 0; + min-width: 0; + margin-top: 0; + /* because of the negative margin needed to make the splitter visible */ + position: relative; + z-index: 10; + transition: border-width .3s ease-in; +} + +#calsidebar_splitter[state="collapsed"] { + border-inline-start: 1px solid transparent; +} + +#calsidebar_splitter[state="collapsed"]:hover { + border-inline-start: 4px solid var(--selected-item-color); +} diff --git a/comm/calendar/base/themes/common/datetimepickers.css b/comm/calendar/base/themes/common/datetimepickers.css new file mode 100644 index 0000000000..94c184b8eb --- /dev/null +++ b/comm/calendar/base/themes/common/datetimepickers.css @@ -0,0 +1,260 @@ +/* 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/. */ + +/*-------------------------------------------------------------------- + * Datepicker (text field with minimonth popup) + *-------------------------------------------------------------------*/ + +@import url("chrome://messenger/skin/menulist.css"); + +timepicker-grids { + --tpMainColor: -moz-DialogText; + --tpMainBackground: -moz-Dialog; + --tpBorderColor: ThreeDShadow; + --tpSubColor: -moz-DialogText; + --tpSubBackground: -moz-Dialog; + --tpFiveminColor: WindowText; + --tpFiveminBackground: Window; + --tpItemHoverColor: InactiveCaptionText; + --tpItemHoverBackground: InactiveCaption; + --tbHighlightColor: var(--selected-item-text-color); + --tbHighlightBackground: var(--selected-item-color); +} + +:root[lwt-tree] timepicker-grids { + --tpMainColor: var(--sidebar-text-color); + --tpMainBackground: var(--sidebar-background-color); + --tpBorderColor: rgba(0, 0, 0, 0.5); + --tpSubColor: var(--tpMainColor); + --tpSubBackground: rgba(0, 0, 0, 0.1); + --tpFiveminColor: var(--tpMainColor); + --tpFiveminBackground: transparent; + --tpItemHoverColor: var(--tpMainColor); + --tpItemHoverBackground: rgba(0, 0, 0, 0.3); +} + +:root[lwt-tree-brighttext] timepicker-grids { + --tpBorderColor: rgba(255, 255, 255, 0.5); + --tpSubBackground: rgba(255, 255, 255, 0.15); + --tpItemHoverBackground: rgba(255, 255, 255, 0.3); + --tbHighlightColor: #fff; + --tbHighlightBackground: #0a84ff; +} + +/* menulist */ +datepicker > menulist::part(text-input) { + width: 9em; +} + +/*------------------------------------------------------------------- + * Timepicker (text menulist with popup) + *-------------------------------------------------------------------*/ + +timepicker > menulist::part(text-input) { + width: 6em; +} + +/*------------------------------------------------------------------- + * popup (from timepicker/timepicker.css) + *-------------------------------------------------------------------*/ + +.timepicker-menulist > menupopup::part(content) { + --panel-padding: 3px; +} + +/* Box that occupies whole window */ + +.time-picker-grids { + background-color: var(--tpMainBackground); + font-size: 8pt; + margin: 1px 1px 2px; +} + +/* Grid for hours */ + +.time-picker-hour-grid { + border-block: 1px solid var(--tpBorderColor); + border-inline-end: 1px solid var(--tpBorderColor); + margin: 1px; +} + +/* Boxes with AM/PM labels */ + +.timepicker-amLabelBox-class, +.timepicker-pmLabelBox-class { + border-inline-start: 3px double var(--tpBorderColor); + background-color: var(--tpFiveminBackground); + color: var(--tpFiveminColor); +} + +/* Box in each cell of the grid for hours */ + +.time-picker-hour-box-class { + background-color: var(--tpSubBackground); + color: var(--tpMainColor); +} + +.time-picker-hour-grid[format12hours="false"] .time-picker-hour-box-class { + min-width: 28px; + align-items: center; + border-inline-start: 1px solid var(--tpBorderColor); +} + +.time-picker-hour-grid[format12hours="true"] .time-picker-hour-box-class { + min-width: 24px; + align-items: center; + border-inline-start: 1px solid var(--tpBorderColor); +} + +.timepicker-topRow-hour-class { + border-bottom: 1px solid var(--tpBorderColor); +} + +.time-picker-hour-grid[format12hours="true"] .timepicker-topRow-hour-class { + border-bottom: 3px double var(--tpBorderColor); +} + +.time-picker-hour-box-class:hover { + background-color: var(--tpItemHoverBackground); + color: var(--tpItemHoverColor); + cursor: pointer; +} + +/* selected hour box */ + +.time-picker-hour-box-class[selected="true"], +.time-picker-hour-box-class[selected="true"]:hover { + background-color: var(--tbHighlightBackground); + color: var(--tbHighlightColor); +} + +/* label inside each minute/hour */ + +.time-picker-minute-label, +.time-picker-hour-label { + text-align: center; +} + +.time-picker-minute-label:hover, +.time-picker-hour-label:hover { + cursor: pointer !important; +} + + +.time-picker-minute-box-class { + align-items: center; + border-inline-end: 1px solid var(--tpBorderColor); + border-bottom: 1px solid var(--tpBorderColor); +} + +.time-picker-minute-box-class:hover { + cursor: pointer; + background-color: var(--tpSubBackground); + color: var(--tpSubColor); +} + +/* box around five minute grid */ + +.time-picker-five-minute-grid-box { + min-width: 195px; + margin-inline-start: 1px; +} + +/* five minute grid */ + +.time-picker-five-minute-grid { + margin-top: 2px; + margin-inline-end: 1px; + border-top: 1px solid var(--tpBorderColor); + border-inline: 1px solid var(--tpBorderColor); + background-color: var(--tpFiveminBackground); + color: var(--tpFiveminColor); +} + + +/* box in five-minute grid elements */ + +.time-picker-five-minute-class:hover { + background-color: var(--tpItemHoverBackground); + color: var(--tpItemHoverColor); + cursor: pointer; +} + +.time-picker-minute-label[selected="true"]:hover { + background-color: var(--tbHighlightBackground); + color: var(--tbHighlightColor); + cursor: pointer; +} + + +/* selected five-minute grid element box */ + +.time-picker-five-minute-class[selected="true"] { + background-color: var(--tbHighlightBackground); + color: var(--tbHighlightColor); +} + +/* box around one minute grid */ +.time-picker-one-minute-grid-box { + min-width: 195px; + margin-inline-start: 1px; +} + +/* one minute grid */ + +.time-picker-one-minute-grid { + margin-top: 2px; + margin-inline-end: 1px; + border-top: 1px solid var(--tpBorderColor); + border-inline: 1px solid var(--tpBorderColor); + background-color: var(--tpFiveminBackground); + color: var(--tpFiveminColor); +} + +/* box in one-minute grid elements */ + +.time-picker-one-minute-class { + align-items: center; +} + +.time-picker-one-minute-class:hover { + background-color: var(--tpItemHoverBackground); + color: var(--tpItemHoverColor); + cursor: pointer; +} + +.time-picker-one-minute-class[selected="true"]>label:hover { + background-color: var(--tbHighlightBackground) !important; + color: var(--tbHighlightColor) !important; + cursor: pointer; +} + +/* selected one-minute grid element box */ + +.time-picker-one-minute-class[selected="true"]{ + background-color: var(--tbHighlightBackground); + color: var(--tbHighlightColor); +} + +.time-picker-more-control-label { + background-color: var(--tbHighlightBackground); + color: var(--tbHighlightColor); + margin: 0; + border: 1px solid var(--tpSubBackground); + padding-inline: 8px; + font-size: 1rem; +} + +.time-picker-more-control-label:hover { + border-color: var(--tpBorderColor); +} + +/* line across the bottom of the minute boxes, made to line up with more & less tabs */ + +.time-picker-minutes-bottom { + background-color: var(--tpSubBackground); + color: var(--tpSubColor); + border: 1px solid var(--tpBorderColor); + margin-inline-end: 1px; +} diff --git a/comm/calendar/base/themes/common/dialogs/calendar-alarm-dialog.css b/comm/calendar/base/themes/common/dialogs/calendar-alarm-dialog.css new file mode 100644 index 0000000000..cfcf1615fc --- /dev/null +++ b/comm/calendar/base/themes/common/dialogs/calendar-alarm-dialog.css @@ -0,0 +1,112 @@ +/* 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/. */ + +#calendar-alarm-dialog[lwt-tree] { + background-color: var(--lwt-accent-color); + color: var(--lwt-text-color); +} + +/* Alarm dialog styles */ +#alarm-richlist { + margin: 10px; + text-shadow: none; +} + +#alarm-actionbar { + min-width: 1px; + margin: 0 5px 10px; +} + +/* Alarm widget specific styles */ +richlistitem[is="calendar-alarm-widget-richlistitem"] { + border-bottom: 1px dotted ThreeDShadow; + padding: 6px 7px; +} + +richlistitem[is="calendar-alarm-widget-richlistitem"][selected="true"] { + padding: 0 5px; +} + +richlistitem[is="calendar-alarm-widget-richlistitem"][selected="true"] .alarm-title-label { + font-weight: bold; +} + +richlistitem[is="calendar-alarm-widget-richlistitem"][selected="true"] .alarm-action-buttons { + display: flex; + color: var(--field-text-color); +} + +richlistitem[is="calendar-alarm-widget-richlistitem"][selected="true"] > hbox { + margin: 5px; +} + +richlistitem[is="calendar-alarm-widget-richlistitem"][selected="true"] .alarm-relative-date-label, +.additional-information-box, +.alarm-action-buttons { + display: none; +} + +richlistitem[is="calendar-alarm-widget-richlistitem"][selected="true"] .additional-information-box, +richlistitem[is="calendar-alarm-widget-richlistitem"][selected="true"] .action-buttons-box { + display: flex; +} + +.alarm-calendar-event { + overflow: hidden; +} + +.alarm-location-description { + display: flex; +} + +.alarm-details-label { + color: inherit !important; + text-decoration: underline; +} + +.alarm-calendar-image { + -moz-context-properties: fill; + fill: currentColor; + margin-top: 2px; +} + +richlistitem[is="calendar-alarm-widget-richlistitem"]:not([selected="true"]) .alarm-calendar-image { + display: none; +} + +.snooze-popup-button { + min-width: 0; + appearance: none; + margin-inline-end: 2px; + -moz-context-properties: fill; + fill: currentColor; +} + +.snooze-popup-button:hover { + background-color: var(--button-hover-background-color); +} + +.snooze-popup-ok-button { + list-style-image: url(chrome://calendar/skin/shared/icons/complete.svg); +} + +.snooze-popup-cancel-button { + list-style-image: url(chrome://calendar/skin/shared/icons/decline.svg); +} + +.snooze-popup-button > .button-box > .button-icon { + margin: 0; +} + +.snooze-popup-button > .button-box { + border: 0; + padding: 0; + justify-content: center; + align-items: center; +} + +.snooze-popup-button:focus > .button-box { + border: 1px dotted ThreeDDarkShadow; + padding: 0; +} diff --git a/comm/calendar/base/themes/common/dialogs/calendar-event-dialog-attendees.css b/comm/calendar/base/themes/common/dialogs/calendar-event-dialog-attendees.css new file mode 100644 index 0000000000..ede57761dd --- /dev/null +++ b/comm/calendar/base/themes/common/dialogs/calendar-event-dialog-attendees.css @@ -0,0 +1,264 @@ +/* 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/. */ + +#spacer { + border: 1px solid transparent; +} + +#attendee-list { + margin: 0; + border: 1px solid var(--field-border-color); + overflow-x: scroll; + background-attachment: local; + background-color: var(--field-background-color); + background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2250%22%20height%3D%2221%22%3E%3Cpath%20d%3D%22M49.5%2020.5H0%22%20fill%3D%22none%22%20stroke%3D%22threedshadow%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E%0A); + color: var(--field-text-color); +} + +.attendees-grid-container { + width: 540px; + overflow-y: auto; +} + +event-attendee { + height: 21px; + padding: 0 4px 1px; + display: flex; + align-items: center; +} + +event-attendee > .role-icon { + margin: 0; +} + +event-attendee > input { + flex: 1 1 auto; + outline: none !important; +} + +/* Autocomplete labels + * These styles match those in chrome://messenger/skin/shared/messenger.css. */ + +span.ac-emphasize-text { + font-weight: bold; +} + +.autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) > .ac-url, +.autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) > .ac-separator { + display: flex; +} + +.autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) > .ac-url { + order: 1; +} + +.autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) > .ac-separator { + order: 2; +} + +.autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) > .ac-title { + order: 3; +} + +.ac-url-text { + max-width: unset !important; +} + +#outer > splitter { + background-color: transparent; + border: none; +} + +#day-header-outer { + border: 1px solid var(--field-border-color); + border-bottom: none; + overflow: hidden; + background-color: var(--field-background-color); + color: var(--field-text-color); + text-align: center; +} + +#day-header-inner { + padding-bottom: 6px; + background-position: left bottom; + background-repeat: repeat-x; +} + +#day-header-inner.twoMinorColumns { + background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2260%22%20height%3D%226%22%20fill%3D%22none%22%20stroke%3D%22threedshadow%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M59.5%200V6%22%2F%3E%3C%2Fsvg%3E); +} + +#day-header-inner.threeMinorColumns { + background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2290%22%20height%3D%226%22%20fill%3D%22none%22%20stroke%3D%22threedshadow%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M89.5%200V6%22%2F%3E%3C%2Fsvg%3E); +} + +calendar-day { + border-inline-end: 1px solid var(--field-border-color); + flex-direction: column; + justify-content: flex-end; +} + +.day-label { + margin: 2px 0; + text-align: center; + font-weight: 600; +} + +.hour-label { + margin: 0 0 2px; +} + +#freebusy-grid { + margin: 0; + border: 1px solid var(--field-border-color); + overflow: scroll auto; + background-color: var(--field-background-color); + color: var(--field-text-color); +} + +.day-column { + position: absolute; + top: 0; + bottom: 0; +} + +.day-off { + background-color: var(--viewWeekendBackground); +} + +.time-off { + position: absolute; + top: 0; + bottom: 0; + background-color: var(--viewOffTimeBackground); +} + +.day-off > .time-off { + background-color: var(--viewMonthDayOffLabelBackground); +} + +#freebusy-grid-inner { + overflow: hidden; +} + +#freebusy-grid-inner.twoMinorColumns { + background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2260%22%20height%3D%2221%22%20fill%3D%22none%22%20stroke%3D%22threedshadow%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M59.5%200V20.5H0%22%2F%3E%3Cpath%20d%3D%22M29.5%200V20.5%22%20stroke-opacity%3D%220.33%22%20stroke-dasharray%3D%2215%25%22%2F%3E%3C%2Fsvg%3E); +} + +#freebusy-grid-inner.threeMinorColumns { + background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2290%22%20height%3D%2221%22%20fill%3D%22none%22%20stroke%3D%22threedshadow%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M89.5%200V20.5H0%22%2F%3E%3Cpath%20d%3D%22M29.5%200V20.5%22%20stroke-opacity%3D%220.44%22%2F%3E%3Cpath%20d%3D%22M59.5%200V20.5%22%20stroke-opacity%3D%220.44%22%2F%3E%3C%2Fsvg%3E); +} + +.freebusy-row { + position: relative; + height: 21px; + box-sizing: border-box; + padding: 2px 0 3px; +} + +.freebusy-row > .pending { + position: absolute; + top: 0; + bottom: 1px; + background-color: #999; +} + +.freebusy-row > .busy, +.freebusy-row > .tentative, +.freebusy-row > .unavailable, +.freebusy-row > .unknown { + position: absolute; + top: 2px; + bottom: 3px; +} +.freebusy-row > .busy { + background-color: #153e7e; +} +.freebusy-row > .tentative { + background-color: #1589ff; +} +.freebusy-row > .unavailable { + background-color: #4e387e; +} +.freebusy-row > .unknown { + background-color: #e09ebd; +} + +#event-bar-top { + position: absolute; + top: 0; + bottom: 0; + box-sizing: border-box; + border: 1px #f045a5 solid; + border-bottom: none; + cursor: move; + background-color: rgba(240, 69, 165, 0.44); +} + +#event-bar-bottom { + position: absolute; + top: 0; + bottom: 0; + box-sizing: border-box; + border: 1px #f045a5 solid; + border-top: none; + background-color: rgba(240, 69, 165, 0.44); +} + +.zoom-in-icon, +.zoom-out-icon { + margin: 3px; + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; +} + +.zoom-in-icon[disabled="true"], +.zoom-out-icon[disabled="true"] { + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb, currentColor 10%, transparent); + stroke: color-mix(in srgb, currentColor 40%, transparent); +} + +.zoom-in-icon { + list-style-image: var(--font-size-increase); +} + +.zoom-out-icon { + list-style-image: var(--font-size-decrease); +} + +.legend { + display: flex; + width: 3em; + height: 1em; + border-top: 1px solid #a1a1a1; + border-bottom: 1px solid #dddddd; + border-inline: 1px solid #c3c3c3; +} + +.legend[status="FREE"] { + background-color: #ebebe4; + color: #ebebe4; +} + +.legend[status="BUSY"] { + background-color: #153e7e; + color: #153e7e; +} + +.legend[status="BUSY_TENTATIVE"] { + background-color: #1589ff; + color: #1589ff; +} + +.legend[status="BUSY_UNAVAILABLE"] { + background-color: #4e387e; + color: #4e387e; +} + +.legend[status="UNKNOWN"] { + background-color: #e09ebd; + color: #e09ebd; +} diff --git a/comm/calendar/base/themes/common/dialogs/calendar-event-dialog.css b/comm/calendar/base/themes/common/dialogs/calendar-event-dialog.css new file mode 100644 index 0000000000..e2fa244a2c --- /dev/null +++ b/comm/calendar/base/themes/common/dialogs/calendar-event-dialog.css @@ -0,0 +1,677 @@ +/* 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"); + +#calendar-event-window, +#calendar-task-window { + min-width: 43em; + min-height: 51em; +} + +#calendar-event-dialog:-moz-lwtheme, +#calendar-task-dialog:-moz-lwtheme { + background-color: transparent; +} + +:root:not([lwt-tree]):-moz-lwtheme #calendar-item-panel-iframe { + background-color: -moz-Dialog; +} +#calendar-event-dialog-inner:-moz-lwtheme, +#calendar-task-dialog-inner:-moz-lwtheme { + background-image: none !important; +} + +#calendar-event-dialog, +#calendar-task-dialog, +#calendar-event-dialog-inner, +#calendar-event-summary-dialog, +#calendar-task-dialog-inner { + padding: 0; +} + +#calendar-event-dialog .todo-only, +#calendar-task-dialog .event-only, +#calendar-event-dialog-inner .todo-only, +#calendar-task-dialog-inner .event-only { + display: none; +} + +/*-------------------------------------------------------------------- + * Event dialog toolbar buttons + *-------------------------------------------------------------------*/ + +.cal-event-toolbarbutton { + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; +} + +#button-save { + list-style-image: var(--icon-download); +} + +#button-save[mode="send"] { + list-style-image: var(--icon-sent); +} + +#saveandcloseButton, +#button-saveandclose { + list-style-image: var(--icon-download); +} + +#button-saveandclose[mode="send"] { + list-style-image: var(--icon-sent); +} + +#button-attendees { + list-style-image: var(--icon-address-book); +} + +#button-privacy { + list-style-image: var(--icon-lock); +} + +#button-url { + list-style-image: var(--icon-attachment); +} + +#deleteButton, +#button-delete.cal-event-toolbarbutton { + /* !important to override the SM #button-delete states */ + list-style-image: var(--icon-trash) !important; +} + +#button-priority { + list-style-image: var(--icon-priority); +} + +#button-status { + list-style-image: var(--icon-event-status); +} + +#button-freebusy { + list-style-image: var(--icon-clock); +} + +#button-timezones { + list-style-image: var(--icon-globe); +} + +#acceptButton { + list-style-image: var(--icon-check); +} + +#tentativeButton { + list-style-image: var(--icon-tentative); +} + +#declineButton { + list-style-image: var(--icon-close); +} + +/*-------------------------------------------------------------------- + * Event dialog counter box section + *-------------------------------------------------------------------*/ + +#counter-proposal-box { + background-color: rgb(186, 238, 255); + border-bottom: 1px solid #444444; +} + +#counter-proposal-box > vbox:not(#counter-buttons) { + color: #000; +} + +#counter-proposal-property-values > description { + margin-bottom: 2px; +} + +#counter-proposal-summary { + font-weight: bold; +} + +.counter-buttons { + max-height: 25px; +} + +#yearly-period-of-label, +label.label { + text-align: right; +} + +#item-calendar, +.item-calendar, +#item-categories, +#item-repeat, +.item-alarm, +.datepicker-text-class { + min-width: 12em; +} + +.cal-event-toolbarbutton .toolbarbutton-icon { + width: 18px; + height: 18px; +} + +#event-grid { + padding-top: 8px; + padding-inline-start: 8px; + padding-inline-end: 10px; + border-spacing: 0; +} + +#event-grid > tr > th { + text-align: left; + font-weight: normal; +} + +#event-grid > tr > td { + width: 100%; +} + +#event-grid-tab-box-row, +#event-grid-tabbox, +.event-grid-tabpanels { + flex: 1; +} + +.event-input-td > input { + flex: 1; +} + +#item-calendar, +.item-calendar, +#item-categories { + flex: 1; + width: 100%; +} + +#item-calendar::part(icon) { + margin-inline: 7px 3px; +} + +#item-calendar::part(icon), +#item-calendar > menupopup > menuitem .menu-iconic-icon, +#item-categories::part(color) { + width: 10px; + height: 10px; + border-radius: 5px; + background-color: var(--item-color); +} + +#item-categories > menupopup > menuitem .menu-iconic-left { + margin-inline-end: 3px; +} + +#item-categories > menupopup > menuitem .menu-iconic-text { + padding-inline-start: 15px; + background-image: var(--icon-circle-small); + background-position: left center; + background-repeat: no-repeat; + -moz-context-properties: fill; + fill: var(--item-color); +} + +#item-categories > menupopup > menuitem .menu-iconic-text:dir(rtl) { + background-position-x: right; +} + +#item-categories::part(color) { + margin-inline-end: 1px; +} + +#item-categories::part(color first) { + margin-inline-start: 7px; +} + +#item-categories::part(color last) { + margin-inline-end: 3px !important; +} + +#item-categories-textbox { + margin: 1px 8px; +} + +#event-grid-item-calendar-td, +#event-grid-category-color-td, +.event-input-td { + display: flex; +} + +#event-grid > tr > td > menulist, +#event-grid checkbox, +#event-grid td, +#event-grid th { + margin: 0; + padding: 0; + margin-inline-end: 0; + margin-inline-start: 0; +} + +.item-location-link, +#item-location, +.item-location, +#item-title, +.item-title { + margin: 0; + margin-inline-end: 0; + margin-inline-start: 0; + padding-inline-start: 4px; +} + +.item-location-link { + padding-inline-start: 0; +} + +.item-location-link > label { + cursor: pointer; +} + +#todo-status, +#item-repeat, +.item-alarm { + margin: 0; +} + +#event-grid td, +#event-grid th { + padding: 4px 0; +} + +#event-grid-startdate-row td, +#event-grid-startdate-row th, +#event-grid-enddate-row td, +#event-grid-enddate-row th { + padding: 0; +} + +.datepicker-menulist { + margin-left: 0 !important; +} + +#event-grid-tab-vbox { + display: flex; + flex-direction: column; + padding-bottom: 10px; + padding-inline: 8px 10px; +} + +.separator td { + border-bottom: 1px solid var(--field-border-color); + padding: 0 !important; +} + +#completed-date-picker { + margin-inline-start: 4px; +} + +/*-------------------------------------------------------------------- + * Event dialog tabbox section + *-------------------------------------------------------------------*/ + +#event-grid-tabbox { + margin: 5px 0; +} + +#event-grid-tabbox #notify-options { + padding: 0px 9px; +} + +#FormatToolbox { + appearance: none; + padding-inline: 4px; +} + +#FormatToolbar { + -moz-context-properties: fill; + fill: currentColor; +} + +#boldButton { + list-style-image: url("chrome://messenger/skin/icons/bold.svg"); +} + +#italicButton { + list-style-image: url("chrome://messenger/skin/icons/italics.svg"); +} + +#underlineButton { + list-style-image: url("chrome://messenger/skin/icons/underline.svg"); +} + +#linkButton { + list-style-image: url("chrome://global/skin/icons/link.svg"); +} + +#ulButton { + list-style-image: url("chrome://messenger/skin/icons/bullet-list.svg"); +} + +#olButton { + list-style-image: url("chrome://messenger/skin/icons/number-list.svg"); +} + +#outdentButton { + list-style-image: url("chrome://messenger/skin/icons/outdent.svg"); +} + +#indentButton { + list-style-image: url("chrome://messenger/skin/icons/indent.svg"); +} + +#AlignPopupButton { + list-style-image: url("chrome://messenger/skin/icons/left-align.svg"); +} + +#AlignPopup > menuitem { + -moz-context-properties: fill; + fill: currentColor; +} + +#AlignLeftItem, #AlignPopupButton[state="left"] { + list-style-image: url("chrome://messenger/skin/icons/left-align.svg"); +} + +#AlignCenterItem, #AlignPopupButton[state="center"] { + list-style-image: url("chrome://messenger/skin/icons/center-align.svg"); +} + +#AlignRightItem, #AlignPopupButton[state="right"] { + list-style-image: url("chrome://messenger/skin/icons/right-align.svg"); +} + +#AlignJustifyItem, #AlignPopupButton[state="justify"] { + list-style-image: url("chrome://messenger/skin/icons/justify.svg"); +} + +#paragraphButton { + list-style-image: url("chrome://messenger/skin/icons/paragraph.svg"); +} + +#smileButtonMenu { + list-style-image: url("chrome://messenger/skin/icons/smiley.svg"); +} + +.formatting-button { + appearance: none; + border: 1px solid transparent; + border-radius: var(--button-border-radius); + color: inherit; + -moz-context-properties: fill; + fill: currentColor; + transition-property: background-color, border-color, box-shadow; + transition-duration: 150ms; +} + +.formatting-button:not([disabled="true"]):hover { + background: var(--toolbarbutton-hover-background); + border-color: var(--toolbarbutton-hover-bordercolor); + box-shadow: var(--toolbarbutton-hover-boxshadow); +} + +.formatting-button:not([disabled="true"]):is([open="true"],[checked="true"],:hover:active) { + background: var(--toolbarbutton-checked-background); + border-color: var(--toolbarbutton-active-bordercolor); + box-shadow: var(--toolbarbutton-active-boxshadow); +} + +.formatting-button:not([disabled="true"]):is([open="true"],:hover:active) { + background: var(--toolbarbutton-active-background) !important; +} + +.formatting-button > .toolbarbutton-menu-dropmarker { + list-style-image: url("chrome://messenger/skin/messengercompose/format-dropmarker.svg"); + -moz-context-properties: fill; + fill: currentColor; + display: inline-block; +} + +.formatting-button[disabled="true"] > .toolbarbutton-icon, +.formatting-button[disabled="true"] > .toolbarbutton-menu-dropmarker { + opacity: 0.4; +} + +#item-description { + border: 1px solid var(--field-border-color); + border-radius: 2px; + margin: 2px 4px; +} + +/*-------------------------------------------------------------------- + * Event dialog keep duration button + *-------------------------------------------------------------------*/ + +#keepduration-button { + appearance: none; + list-style-image: url(chrome://calendar/skin/shared/chain-unlock.svg); + margin-bottom: -15px; + border-radius: var(--button-border-radius); + position: relative; + -moz-user-focus: normal; + -moz-context-properties: fill; + fill: CurrentColor; +} + +#keepduration-button:hover { + background-color: var(--button-hover-background-color); +} + +#keepduration-button:hover:active { + background-color: var(--button-active-background-color); +} + +#keepduration-button[keep="true"] { + list-style-image: url(chrome://calendar/skin/shared/chain-lock.svg); + fill: var(--selected-item-color); +} + +#keepduration-button[disabled="true"] { + fill: GrayText; +} + +#keepduration-button > label { + display: none; +} + +.keepduration-link-image { + margin-inline-start: -1px; + -moz-context-properties: fill, stroke-opacity; + fill: CurrentColor; + stroke-opacity: 0; +} + +#link-image-top { + margin-top: 0.6em; + margin-bottom: -0.6em; +} + +#link-image-top[keep="true"] { + stroke-opacity: 1; +} + +#link-image-bottom { + margin-top: -0.6em; + margin-bottom: 0.6em; +} + +/*-------------------------------------------------------------------- + * Event dialog statusbar images + *-------------------------------------------------------------------*/ + +.cal-statusbar-1 { + flex-direction: column; + -moz-context-properties: fill; + fill: currentColor; +} + +/*-------------------------------------------------------------------- + * Event dialog statusbarpanels + *-------------------------------------------------------------------*/ + +#status-privacy, +#status-priority, +#status-status, +#status-freebusy { + overflow: hidden; +} + +/*-------------------------------------------------------------------- + * Recurrence dialog + *-------------------------------------------------------------------*/ + +#calendar-event-dialog-recurrence dialog { + overflow: scroll; +} + +.recurrence-pattern-hbox-label { + margin-top: 6px; +} + +#recurrencePreviewCalendars { + display: block; + margin: 2px; +} + +#recurrencePreview { + display: flex; +} + +#recurrencePreview calendar-minimonth { + display: inline-block; + margin: 2px; +} + +#recurrencePreview calendar-minimonth[hidden="true"] { + display: none; +} + +#recurrencePreviewNavigation { + display: block; +} + +#daypicker-weekday { + margin-top: 2px; + -moz-user-focus: normal; +} + +.daypicker-monthday { + margin-top: 2px; + -moz-user-focus: normal; +} + +.headline { + font-weight: bold; +} + +.headline[align="end"], +.headline[align="right"] { + text-align: right; +} + +.default-spacer { + width: 1em; + height: 1em; +} + +.default-indent { + margin-inline-start: 1.5em; +} + +#dialog-box { + padding-block: 8px 10px; + padding-inline: 8px 10px; +} + +.checkbox-no-label > .checkbox-label-box { + display: none; +} + +/* Thunderbird Light Theme (not system theme) */ +@media (prefers-color-scheme: light) { + :root[lwt-tree]:not([lwt-tree-brighttext]) #recurrencePreview calendar-minimonth { + background-color: var(--color-gray-05); + border-color: var(--color-gray-30); + } +} + +/*-------------------------------------------------------------------- + * Event summary dialog + *-------------------------------------------------------------------*/ +#summary-toolbox { + margin-bottom: 5px; +} + +#status-notifications > .notificationbox-stack { + background-color: transparent; + margin-inline: 6px; +} + +#calendar-item-summary { + margin-block: 3px 10px; + margin-inline: 8px 10px; +} + +#calendar-summary-dialog, +#calendar-ics-file-dialog { + min-width: 35em; +} + +#calendar-summary-dialog .item-location, +#calendar-summary-dialog .item-title, +#calendar-event-summary-dialog .item-location, +#calendar-event-summary-dialog .item-title, +#calendar-task-summary-dialog .item-location, +#calendar-task-summary-dialog .item-title, +#calendar-ics-file-dialog .item-location, +#calendar-ics-file-dialog .item-title { + padding-inline-start: 1px; +} + +#calendar-summary-dialog .item-attachment-cell, +#calendar-event-summary-dialog .item-attachment-cell, +#calendar-task-summary-dialog .item-attachment-cell, +#calendar-ics-file-dialog .item-attachment-cell { + margin-left: 0px; +} + +#calendar-summary-dialog .item-attachment-cell-label, +#calendar-event-summary-dialog .item-attachment-cell-label, +#calendar-task-summary-dialog .item-attachment-cell-label, +#calendar-ics-file-dialog .item-attachment-cell-label { + margin-left: 0; +} + +#calendar-summary-dialog .item-description, +#calendar-event-summary-dialog .item-description, +#calendar-task-summary-dialog .item-description, +#calendar-ics-file-dialog .item-description { + border: 1px solid var(--field-border-color); + margin: 2px 4px 0; +} + +#calendar-summary-dialog .item-description a, +#calendar-event-summary-dialog .item-description a, +#calendar-task-summary-dialog .item-description a, +#calendar-ics-file-dialog .item-description a { + color: -moz-nativehyperlinktext; +} + +:root[lwt-tree-brighttext] #calendar-summary-dialog .item-description a, +:root[lwt-tree-brighttext] #calendar-event-summary-dialog .item-description a, +:root[lwt-tree-brighttext] #calendar-task-summary-dialog .item-description a, +:root[lwt-tree-brighttext] #calendar-ics-file-dialog .item-description a { + color: #0aa5ff; +} + +#calendar-summary-dialog #item-start-row .headline, +#calendar-event-summary-dialog #item-start-row .headline, +#calendar-task-summary-dialog #item-start-row .headline, +#calendar-ics-file-dialog #item-start-row .headline, +#calendar-summary-dialog #item-end-row .headline, +#calendar-event-summary-dialog #item-end-row .headline, +#calendar-task-summary-dialog #item-end-row .headline, +#calendar-ics-file-dialog #item-end-row .headline { + font-weight: normal; +} diff --git a/comm/calendar/base/themes/common/dialogs/calendar-ics-file-dialog.css b/comm/calendar/base/themes/common/dialogs/calendar-ics-file-dialog.css new file mode 100644 index 0000000000..4675e09351 --- /dev/null +++ b/comm/calendar/base/themes/common/dialogs/calendar-ics-file-dialog.css @@ -0,0 +1,107 @@ +/* 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/. */ + +/* We want the calendar items container to span the full width of the dialog + window, so there's no space between its scrollbar and the right side of the + window. Set the dialog element's padding to 0 and then set the equivalent + padding on its children. The dialog buttons area is in the shadow dom, so we + add padding to it via JS in the window load handler function. */ +#calendar-ics-file-dialog { + padding-inline: 0; +} + +#calendar-ics-file-dialog-header, +#calendar-ics-file-dialog-items-container, +#calendar-ics-file-dialog-progress-pane, +#calendar-ics-file-dialog-result-pane { + /* This padding needs to change elsewhere if it changes here. + See the note above the styles for #calendar-ics-file-dialog */ + padding-inline: 10px; +} + +#calendar-ics-file-dialog-items-container, +#calendar-ics-file-dialog-progress-pane, +#calendar-ics-file-dialog-result-pane { + flex: 1 1 0; +} + +#calendar-ics-file-dialog-calendar-menu-label { + margin-top: 1em; +} + +#calendar-ics-file-dialog-calendar-menu > menupopup > menuitem .menu-iconic-left { + display: flex; +} + +#calendar-ics-file-dialog-calendar-menu::part(icon) { + margin-inline-start: 4px; + margin-inline-end: 3px; +} + +#calendar-ics-file-dialog-calendar-menu::part(icon), +#calendar-ics-file-dialog-calendar-menu > menupopup > menuitem .menu-iconic-icon { + width: 10px; + height: 10px; + border-radius: 5px; + background-color: var(--item-color); +} + +#calendar-ics-file-dialog-sort-button { + list-style-image: var(--icon-sort); + min-width: 0; + margin-block: 2px; + -moz-context-properties: stroke; + stroke: currentColor; +} + +#calendar-ics-file-dialog-sort-button > .button-box > dropmarker { + display: none; +} + +#calendar-ics-file-dialog-items-container { + border-block: 1px solid var(--field-border-color); + margin-block: 0.7em; + margin-inline: -8px -10px; + padding-block: 0 1.5em; + padding-inline: 18px 20px; + min-height: 200px; + overflow-x: hidden; + overflow-y: auto; +} + +#calendar-ics-file-dialog-items-loading-message { + text-align: center; + margin-top: 3em; +} + +.calendar-ics-file-dialog-item-frame { + background-color: var(--field-background-color); + border: 1px solid var(--field-border-color); + margin-block: 1.5em 0; + margin-inline: 6px 5px; + padding: 0.7em; +} + +.calendar-ics-file-dialog-item-import-button { + margin-block: 0.7em 0; +} + +.calendar-caption { + display: none; +} + +.item-description { + padding: 2px; +} + +#calendar-ics-file-dialog-progress-pane, +#calendar-ics-file-dialog-result-pane { + align-items: center; + justify-content: center; + text-align: center; +} + +#calendar-ics-file-dialog-progress { + width: 400px; +} diff --git a/comm/calendar/base/themes/common/dialogs/calendar-invitations-dialog.css b/comm/calendar/base/themes/common/dialogs/calendar-invitations-dialog.css new file mode 100644 index 0000000000..e43e08cb4e --- /dev/null +++ b/comm/calendar/base/themes/common/dialogs/calendar-invitations-dialog.css @@ -0,0 +1,80 @@ +/* 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/. */ + +#dialog-box { + overflow: auto; + height: 290px; +} + +.calendar-invitations-updating-icon { + opacity: 0.5; +} + +#updating-box { + background-color: var(--field-background-color); + color: var(--field-text-color); + border: 1px solid var(--field-border-color); +} + +#invitationContainer { + display: flex; + flex-direction: column; + min-height: 0; +} + +richlistitem[is="calendar-invitations-richlistitem"] { + padding: 6px 7px; + min-height: 25px; + border-bottom: 1px dotted #808080; +} + +.calendar-invitations-richlistitem-title { + font-weight: bold; + white-space: break-spaces; +} + +.calendar-invitations-richlistitem-icon { + /* Crops the src of the image. */ + object-fit: none; + width: 32px; + height: 32px; +} + +.calendar-invitations-richlistitem-icon[status="NEEDS-ACTION"] { + object-position: top 0 left 0; +} + +.calendar-invitations-richlistitem-icon[status="ACCEPTED"] { + object-position: top 0 left -32px; +} + +.calendar-invitations-richlistitem-icon[status="DECLINED"] { + object-position: top 0 left -64px; +} + +.calendar-invitations-richlistitem-button { + margin-bottom: 10px; + visibility: hidden; +} + +richlistitem[is="calendar-invitations-richlistitem"][selected="true"] .calendar-invitations-richlistitem-button { + visibility: visible; +} + +.calendar-invitations-richlistitem-button .button-icon { + margin-block: 0; + margin-inline: 0 5px; + border-radius: 3px; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: var(--toolbarbutton-icon-fill-opacity); +} + +.calendar-invitations-richlistitem-accept-button { + list-style-image: url(chrome://calendar/skin/shared/icons/complete.svg); +} + +.calendar-invitations-richlistitem-decline-button { + list-style-image: url(chrome://calendar/skin/shared/icons/decline.svg); +} diff --git a/comm/calendar/base/themes/common/dialogs/calendar-itip-identity-dialog.css b/comm/calendar/base/themes/common/dialogs/calendar-itip-identity-dialog.css new file mode 100644 index 0000000000..3721503818 --- /dev/null +++ b/comm/calendar/base/themes/common/dialogs/calendar-itip-identity-dialog.css @@ -0,0 +1,11 @@ +/* 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/. */ + +#calendar-itip-identity-warning { + margin-bottom: 1em; +} + +#identity-menu-label { + height: 1.3em; +} diff --git a/comm/calendar/base/themes/common/dialogs/calendar-properties-dialog.css b/comm/calendar/base/themes/common/dialogs/calendar-properties-dialog.css new file mode 100644 index 0000000000..2da1a5c49a --- /dev/null +++ b/comm/calendar/base/themes/common/dialogs/calendar-properties-dialog.css @@ -0,0 +1,89 @@ +/* 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:-moz-lwtheme { + background-color: var(--lwt-accent-color); + color: var(--lwt-text-color); +} + +:root[canDisable] #calendar-properties-table { + margin-inline-start: 20px; +} + +body { + overflow: auto; +} + +#calendar-properties-table th, +#calendar-properties-table td { + min-height: 26px; +} + +#calendar-properties-table th { + text-align: start; + font-weight: normal; +} + +#calendar-properties-table td { + width: 100%; +} + +#calendar-properties-table html|input[type="number"].size3 { + width: calc(3ch + 55px); +} + +#calendar-email-identity-row > td, +#calendar-refreshInterval-row > td { + display: flex; +} + +#calendar-refreshInterval-menulist, +#email-identity-menulist { + flex: 1; +} + +#calendar-notifications { + margin-inline-start: 24px; +} + +#calendar-notifications-title { + font-size: 1.1em; + font-weight: 600; +} + +calendar-notifications-setting { + display: block; +} + +calendar-notifications-setting .add-button { + list-style-image: var(--icon-add); + -moz-context-properties: stroke; + stroke: currentColor; +} + +calendar-notifications-setting .add-button .button-icon { + margin-inline-end: 6px; +} + +calendar-notifications-setting .remove-button { + width: 26px; + min-width: 0; + padding: 0 4px; + list-style-image: var(--icon-trash); + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb, currentColor 20%,transparent); + stroke: currentColor; + background: none; + border: none; +} + +calendar-notifications-setting .calendar-notifications-row:last-child { + margin-bottom: 20px; +} + +#global-notifications-row { + width: 100%; +} diff --git a/comm/calendar/base/themes/common/dialogs/calendar-summary-dialog.css b/comm/calendar/base/themes/common/dialogs/calendar-summary-dialog.css new file mode 100644 index 0000000000..6ba129a24a --- /dev/null +++ b/comm/calendar/base/themes/common/dialogs/calendar-summary-dialog.css @@ -0,0 +1,47 @@ +/* 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/. */ + +notification { + border-inline-width: 1px; +} + +:root:not([lwt-tree]):-moz-lwtheme #summary-toolbox { + background-image: var(--lwt-header-image) !important; + background-repeat: no-repeat; + background-position: right top !important; +} + +:root:not([lwt-tree]):-moz-lwtheme #summary-toolbar { + background-color: var(--toolbar-bgcolor); +} + +.item-attendees-description { + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.item-attendees, +.item-attendees-list-container { + height: 90px; + min-height: 50px; +} + +.item-description-box { + height: 100%; +} + +#calendar-summary-dialog { + min-height: 20em; +} + +#calendar-event-summary-dialog { + height: 100vh; + overflow-y: scroll; +} + +#calendar-summary-dialog-custom-button-footer { + margin-block: 10px; + margin-inline: 8px 10px; +} diff --git a/comm/calendar/base/themes/common/dialogs/calendar-timezone-highlighter.css b/comm/calendar/base/themes/common/dialogs/calendar-timezone-highlighter.css new file mode 100644 index 0000000000..5a0932d2fb --- /dev/null +++ b/comm/calendar/base/themes/common/dialogs/calendar-timezone-highlighter.css @@ -0,0 +1,142 @@ +/* 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/. */ + +#timezone-stack { + margin: 4px 4px 0; +} + +.timezone-highlight { + object-fit: none; + width: 460px; + height: 287px; +} +.timezone-highlight[tzid="none"] { + display: none; +} +.timezone-highlight[tzid="+0000"] { + object-position: top 0 left -6900px; +} +.timezone-highlight[tzid="+0100"] { + object-position: top 0 left -7360px; +} +.timezone-highlight[tzid="+0200"] { + object-position: top 0 left -7820px; +} +.timezone-highlight[tzid="+0300"] { + object-position: top 0 left -8280px; +} +.timezone-highlight[tzid="+0330"] { + object-position: top 0 left -8740px; +} +.timezone-highlight[tzid="+0400"] { + object-position: top 0 left -9200px; +} +.timezone-highlight[tzid="+0430"] { + object-position: top 0 left -9660px; +} +.timezone-highlight[tzid="+0500"] { + object-position: top 0 left -10120px; +} +.timezone-highlight[tzid="+0530"] { + object-position: top 0 left -10580px; +} +.timezone-highlight[tzid="+0545"] { + object-position: top 0 left -11040px; +} +.timezone-highlight[tzid="+0600"] { + object-position: top 0 left -11500px; +} +.timezone-highlight[tzid="+0630"] { + object-position: top 0 left -11960px; +} +.timezone-highlight[tzid="+0700"] { + object-position: top 0 left -12420px; +} +.timezone-highlight[tzid="+0800"] { + object-position: top 0 left -12880px; +} +.timezone-highlight[tzid="+0845"] { + display: none; +} +.timezone-highlight[tzid="+0900"] { + object-position: top 0 left -13340px; +} +.timezone-highlight[tzid="+0930"] { + object-position: top 0 left -13800px; +} +.timezone-highlight[tzid="+1000"] { + object-position: top 0 left -14260px; +} +.timezone-highlight[tzid="+1030"] { + object-position: top 0 left -14720px; +} +.timezone-highlight[tzid="+1100"] { + object-position: top 0 left -15180px; +} +.timezone-highlight[tzid="+1130"] { + object-position: top 0 left -15180px; +} +.timezone-highlight[tzid="+1200"] { + object-position: top 0 left -16100px; +} +.timezone-highlight[tzid="+1245"] { + object-position: top 0 left -16560px; +} +.timezone-highlight[tzid="+1300"] { + object-position: top 0 left -17020px; +} +.timezone-highlight[tzid="+1400"] { + object-position: top 0 left -17480px; +} +.timezone-highlight[tzid="-0100"] { + object-position: top 0 left -6440px; +} +.timezone-highlight[tzid="-0200"] { + object-position: top 0 left -5980px; +} +.timezone-highlight[tzid="-0300"] { + object-position: top 0 left -5520px; +} +.timezone-highlight[tzid="-0330"] { + object-position: top 0 left -5060px; +} +.timezone-highlight[tzid="-0400"] { + object-position: top 0 left -4600px; +} +.timezone-highlight[tzid="-0430"] { + display: none; +} +.timezone-highlight[tzid="-0500"] { + object-position: top 0 left -4140px; +} +.timezone-highlight[tzid="-0600"] { + object-position: top 0 left -3680px; +} +.timezone-highlight[tzid="-0700"] { + object-position: top 0 left -3220px; +} +.timezone-highlight[tzid="-0800"] { + object-position: top 0 left -17940px; +} +.timezone-highlight[tzid="-0830"] { + object-position: top 0 left -2760px; +} +.timezone-highlight[tzid="-0900"] { + object-position: top 0 left -2300px; +} +.timezone-highlight[tzid="-0930"] { + object-position: top 0 left -1840px; +} +.timezone-highlight[tzid="-1000"] { + object-position: top 0 left -1380px; +} +.timezone-highlight[tzid="-1100"] { + object-position: top 0 left -920px; +} +.timezone-highlight[tzid="-1245"] { + object-position: top 0 left -460px; +} +.timezone-highlight[tzid="-1200"] { + object-position: top 0 left 0; +} diff --git a/comm/calendar/base/themes/common/dialogs/calendar-uri-redirect-dialog.css b/comm/calendar/base/themes/common/dialogs/calendar-uri-redirect-dialog.css new file mode 100644 index 0000000000..8d1f0a6708 --- /dev/null +++ b/comm/calendar/base/themes/common/dialogs/calendar-uri-redirect-dialog.css @@ -0,0 +1,13 @@ +/* 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/. */ + +#calendar-uri-redirect-dialog { + min-width: 600px; + min-height: 220px; + height: 100vh; +} + +p { + padding-block: 5px; +} diff --git a/comm/calendar/base/themes/common/dialogs/chooseCalendarDialog.css b/comm/calendar/base/themes/common/dialogs/chooseCalendarDialog.css new file mode 100644 index 0000000000..a675464983 --- /dev/null +++ b/comm/calendar/base/themes/common/dialogs/chooseCalendarDialog.css @@ -0,0 +1,19 @@ +/* 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/. */ + +:root { + min-width: 300px; + min-height: 200px; +} + +richlistitem { + padding: 4px 8px; + align-items: center; +} + +richlistitem > box:first-child { + width: 10px; + height: 10px; + border-radius: 5px; +} diff --git a/comm/calendar/base/themes/common/dialogs/images/calendar-event-dialog-attendees.png b/comm/calendar/base/themes/common/dialogs/images/calendar-event-dialog-attendees.png Binary files differnew file mode 100644 index 0000000000..ea52cbc19d --- /dev/null +++ b/comm/calendar/base/themes/common/dialogs/images/calendar-event-dialog-attendees.png diff --git a/comm/calendar/base/themes/common/dialogs/images/calendar-invitations-dialog-list-images.png b/comm/calendar/base/themes/common/dialogs/images/calendar-invitations-dialog-list-images.png Binary files differnew file mode 100644 index 0000000000..db33ad817c --- /dev/null +++ b/comm/calendar/base/themes/common/dialogs/images/calendar-invitations-dialog-list-images.png diff --git a/comm/calendar/base/themes/common/dialogs/images/chain-lock.svg b/comm/calendar/base/themes/common/dialogs/images/chain-lock.svg new file mode 100644 index 0000000000..ed42599db3 --- /dev/null +++ b/comm/calendar/base/themes/common/dialogs/images/chain-lock.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="8" height="24" xmlns="http://www.w3.org/2000/svg" fill="context-fill" viewBox="0 0 8 24"> + <path d="M 3,2 C 1.35,2 0,3.34 0,5 v 3 c 0,1.907 0.76,3 2,3 V 5 C 2,4.45 2.45,4 3,4 h 2 c 0.55,0 1.05,0.45 1,1 v 6 C 7.24,11 8,9.986 8,8 V 5 C 8,3.35 6.66,2 5,2 Z M 4,8 C 3.04,8 3,9 3,9 v 6 c 0,0 0,1 1,1 1,0 1,-1 1,-1 V 9 C 5,9 4.956,8 4,8 Z m -2,5 c -1.2397,0 -2,0.93 -2,3 v 3 c 0,1.66 1.35,3 3,3 h 2 c 1.66,0 3,-1.35 3,-3 V 16 C 8,13.99 7.24,13 6,13 v 6 c 0.05,0.55 -0.45,1 -1,1 H 3 C 2.45,20 2,19.55 2,19 Z"/> +</svg> diff --git a/comm/calendar/base/themes/common/dialogs/images/chain-unlock.svg b/comm/calendar/base/themes/common/dialogs/images/chain-unlock.svg new file mode 100644 index 0000000000..7a7c0fa9c1 --- /dev/null +++ b/comm/calendar/base/themes/common/dialogs/images/chain-unlock.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="8" height="24" xmlns="http://www.w3.org/2000/svg" fill="context-fill" viewBox="0 0 8 24"> + <path d="M 3,0 C 1.35,0 0,1.34 0,3 V 6 C 0,7.91 0.76,9 2,9 V 3 C 2,2.45 2.45,2 3,2 H 5 C 5.55,2 6.05,2.45 6,3 V 9 C 7.24,9 8,7.99 8,6 V 3 C 8,1.35 6.66,0 5,0 Z m 0,14 v 3 c 0,0 0,1 1,1 1,0 1,-1 1,-1 V 14 Z M 5,10 V 7 C 5,7 4.96,6 4,6 3.04,6 3,7 3,7 v 3 z m -3,5 c -1.2397,0 -2,0.93 -2,3 v 3 c 0,1.66 1.35,3 3,3 h 2 c 1.66,0 3,-1.35 3,-3 V 18 C 8,15.99 7.24,15 6,15 v 6 c 0.05,0.55 -0.45,1 -1,1 H 3 C 2.45,22 2,21.55 2,21 Z"/> +</svg> diff --git a/comm/calendar/base/themes/common/dialogs/images/link-image-bottom.svg b/comm/calendar/base/themes/common/dialogs/images/link-image-bottom.svg new file mode 100644 index 0000000000..99925c77f0 --- /dev/null +++ b/comm/calendar/base/themes/common/dialogs/images/link-image-bottom.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="9" height="7"> + <path fill="context-fill" d="M 2,7 0,5 V 4 L 2,2 H 3 V 4 H 8 V 0 H 9 V 5 H 3 v 2 z"/> +</svg> diff --git a/comm/calendar/base/themes/common/dialogs/images/link-image-top.svg b/comm/calendar/base/themes/common/dialogs/images/link-image-top.svg new file mode 100644 index 0000000000..60b4574146 --- /dev/null +++ b/comm/calendar/base/themes/common/dialogs/images/link-image-top.svg @@ -0,0 +1,7 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="9" height="7"> + <path fill="context-fill" d="M 9,7 V 2 H 0 v 1 h 8 v 4 z"/> + <path fill="context-fill" fill-opacity="context-stroke-opacity" d="M 0,2 2,0 H 3 V 5 H 2 L 0,3 Z"/> +</svg> diff --git a/comm/calendar/base/themes/common/dialogs/images/statusbar-priority-high.svg b/comm/calendar/base/themes/common/dialogs/images/statusbar-priority-high.svg new file mode 100644 index 0000000000..36dab0b7bc --- /dev/null +++ b/comm/calendar/base/themes/common/dialogs/images/statusbar-priority-high.svg @@ -0,0 +1,8 @@ +<!-- 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/. --> +<svg width="48" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" viewBox="0 0 48 16"> + <rect width="15" height="15" x="32" y="0"/> + <rect width="11" height="11" x="18" y="4"/> + <rect width="8" height="8" x="7" y="7"/> +</svg> diff --git a/comm/calendar/base/themes/common/dialogs/images/statusbar-priority-low.svg b/comm/calendar/base/themes/common/dialogs/images/statusbar-priority-low.svg new file mode 100644 index 0000000000..d676ea5dad --- /dev/null +++ b/comm/calendar/base/themes/common/dialogs/images/statusbar-priority-low.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" viewBox="0 0 16 16"> + <rect width="8" height="8" x="7" y="7"/> +</svg> diff --git a/comm/calendar/base/themes/common/dialogs/images/statusbar-priority-normal.svg b/comm/calendar/base/themes/common/dialogs/images/statusbar-priority-normal.svg new file mode 100644 index 0000000000..9ddc40cbcd --- /dev/null +++ b/comm/calendar/base/themes/common/dialogs/images/statusbar-priority-normal.svg @@ -0,0 +1,7 @@ +<!-- 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/. --> +<svg width="32" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" viewBox="0 0 32 16"> + <rect width="11" height="11" x="18" y="4"/> + <rect width="8" height="8" x="7" y="7"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/alarm-no.svg b/comm/calendar/base/themes/common/icons/alarm-no.svg new file mode 100644 index 0000000000..82245b1a58 --- /dev/null +++ b/comm/calendar/base/themes/common/icons/alarm-no.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M8 0C5.135 0 3.072 2.45 3 5.359c-.019 2.422-.129 4.453-1.752 6.101-.526.81-.184 1.52.756 1.54L1 14l1 1L15 2l-1-1-1.61 1.607C11.94 1.15 10.12 0 8 0zm0 2c1.503.02 2.49.853 2.85 2.154L4 11c1.011-1.025.955-3.748 1-5.596C5.05 3.436 6.064 2.046 8 2zm5 4l-2 2c0 .8.44 2.42 1 3H8l-2 2h7.97c.97 0 1.31-.71.77-1.52C13.49 10.23 13 7.719 13 6zm-7 8c0 .98 1.048 2 2.014 2C8.984 16 10 14.98 10 14z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/alarm.svg b/comm/calendar/base/themes/common/icons/alarm.svg new file mode 100644 index 0000000000..12eed1320c --- /dev/null +++ b/comm/calendar/base/themes/common/icons/alarm.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16"> + <path d="M6 14c0 .98 1.047 2 2.013 2C8.983 16 10 14.98 10 14zm8.74-2.52C13.07 9.673 13 7.644 13 5.291 13 2.094 10.89 0 8 0 5.135 0 3.072 2.451 3 5.36c-.019 2.422-.128 4.451-1.751 6.1-.533.82-.178 1.54.791 1.54h11.93c.97 0 1.31-.71.77-1.52zM4 11c1.011-1.025.955-3.748 1-5.596C5.05 3.436 6.064 2.046 8 2c1.907.02 3 1.351 3 3.291-.1 2.715.2 4.889 1 5.709z"/> +</svg>
\ No newline at end of file diff --git a/comm/calendar/base/themes/common/icons/complete.svg b/comm/calendar/base/themes/common/icons/complete.svg new file mode 100644 index 0000000000..8f01223a8b --- /dev/null +++ b/comm/calendar/base/themes/common/icons/complete.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> + <path fill="context-fill" d="M6 14a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.639 1.146l-7 10a1 1 0 0 1-.732.427A.863.863 0 0 1 6 14z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/confidential.svg b/comm/calendar/base/themes/common/icons/confidential.svg new file mode 100644 index 0000000000..22317ad501 --- /dev/null +++ b/comm/calendar/base/themes/common/icons/confidential.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> + <path fill="context-fill" d="M8 1a7 7 0 1 0 7 7 7 7 0 0 0-7-7zm0 13a6 6 0 1 1 6-6 6 6 0 0 1-6 6zm0-7a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0V8a1 1 0 0 0-1-1zm0-3.2A1.2 1.2 0 1 0 9.2 5 1.2 1.2 0 0 0 8 3.812z"></path> +</svg> diff --git a/comm/calendar/base/themes/common/icons/decline.svg b/comm/calendar/base/themes/common/icons/decline.svg new file mode 100644 index 0000000000..027afeb111 --- /dev/null +++ b/comm/calendar/base/themes/common/icons/decline.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16"> + <path d="M9.41 8l4.3-4.3c.9-.94-.47-2.32-1.42-1.4L8 6.58l-4.3-4.3c-.93-.9-2.32.47-1.4 1.42L6.58 8l-4.3 4.3c-.97.94.47 2.38 1.42 1.4L8 9.42l4.3 4.3c.94.9 2.32-.47 1.4-1.42z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/edit.svg b/comm/calendar/base/themes/common/icons/edit.svg new file mode 100644 index 0000000000..5be5ab638e --- /dev/null +++ b/comm/calendar/base/themes/common/icons/edit.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16"> + <path d="M14.35 2.35l-.7-.7a2 2 0 00-2.83 0l-.38.38a.5.5 0 000 .7l2.83 2.83a.5.5 0 00.7 0l.38-.38a2 2 0 000-2.83zM9.73 3.44a.5.5 0 00-.7 0L3.24 9.22a1.99 1.99 0 00-.46.71l-1.75 4.39a.5.5 0 00.46.68.5.5 0 00.19-.04l4.38-1.75a1.97 1.97 0 00.72-.45l5.77-5.78a.5.5 0 000-.7zM5.16 12.5l-2.55 1.02a.1.1 0 01-.13-.13l1.02-2.56a.1.1 0 01.16-.03l1.54 1.53a.1.1 0 01-.04.17z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/email.svg b/comm/calendar/base/themes/common/icons/email.svg new file mode 100644 index 0000000000..5c56028d6c --- /dev/null +++ b/comm/calendar/base/themes/common/icons/email.svg @@ -0,0 +1,7 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M13 2H3a3.013 3.013 0 0 0-3 3v6a3.013 3.013 0 0 0 3 3h10a3.013 3.013 0 0 0 3-3V5a3.013 3.013 0 0 0-3-3zm1 9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1z"/> + <path d="M8 9a.5.5 0 0 1-.294-.1l-5.5-4a.5.5 0 1 1 .588-.8L8 7.88 13.2 4.1a.5.5 0 0 1 .588.81-5.5 4A.5.5 0 0 1 8 9z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/event.svg b/comm/calendar/base/themes/common/icons/event.svg new file mode 100644 index 0000000000..0eba7b20be --- /dev/null +++ b/comm/calendar/base/themes/common/icons/event.svg @@ -0,0 +1,10 @@ +<!-- 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/. --> +<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16"> + <path d="M6 2h4v2H6zM3 15c-.199.05-2-.59-2-3V5c0-1.305.835-2.417 2-2.83m12 8.33V12c0 1.81-1.32 3-3 3h-1.5z"/> + <path d="M3 5v1h7.5l1-1zm1 2v3h2V7zm6.99.89l2.08 2.16-5.51 5.51c-.12.12-.307.27-.56.44H5v-2c.172-.25.319-.44.44-.56zm1.51-1.51l.94-.94c1.41-1.366 3.49.71 2.12 2.12l-.94.94z"/> + <path d="M10.99 7.89l2.08 2.16-5.51 5.51c-.12.12-.307.27-.56.44H5v-2c.172-.25.319-.44.44-.56zm1.51-1.51l.94-.94c1.41-1.366 3.49.71 2.12 2.12l-.94.94z"/> + <rect x="4" width="1" height="4" rx=".5"/> + <rect x="11" width="1" height="4" rx=".5"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/find.svg b/comm/calendar/base/themes/common/icons/find.svg new file mode 100644 index 0000000000..5c239013cc --- /dev/null +++ b/comm/calendar/base/themes/common/icons/find.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> + <path fill="context-fill" d="M15.707 14.293l-4.822-4.822a6.019 6.019 0 1 0-1.414 1.414l4.822 4.822a1 1 0 0 0 1.414-1.414zM6 10a4 4 0 1 1 4-4 4 4 0 0 1-4 4z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/freebusy.svg b/comm/calendar/base/themes/common/icons/freebusy.svg new file mode 100644 index 0000000000..928f9d9167 --- /dev/null +++ b/comm/calendar/base/themes/common/icons/freebusy.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16"> + <path d="M8 0a8 8 0 1 0 8 8 8 8 0 0 0-8-8zm0 14a6 6 0 1 1 6-6 6 6 0 0 1-6 6zm3.5-6H8V4.5a.5.5 0 0 0-1 0v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 0-1z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/icon32.svg b/comm/calendar/base/themes/common/icons/icon32.svg new file mode 100644 index 0000000000..9f29f18fc5 --- /dev/null +++ b/comm/calendar/base/themes/common/icons/icon32.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 32 32"> + <path d="M3 1c-1.668.06-3 1.35-3 3v24c0 1.66 1.343 3 3 3h25c1.66 0 3-1.34 3-3V4c0-1.65-1.33-3.056-3-3zm1 3h23c.55 0 1 .45 1 1v1H3V5c0-.55.451-1 1-1zM3 9h25v18c0 .55-.45 1-1 1H4c-.552 0-1.029-.45-1-1zm7 1v5h5v-5zm6 0v5h5v-5zm6 0v5h5v-5zM4 16v5h5v-5zm6 0v5h5v-5zm6 0v5h5v-5zm6 0v5h5v-5zM4 22v5h5v-5zm6 0v5h5v-5zm6 0v5h5v-5z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/imip-bar.svg b/comm/calendar/base/themes/common/icons/imip-bar.svg new file mode 100644 index 0000000000..c5c37def72 --- /dev/null +++ b/comm/calendar/base/themes/common/icons/imip-bar.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 24 24"> + <path d="M4 1c-1.668.056-3 1.354-3 3v16c0 1.66 1.343 3 3 3h17c1.66 0 3-1.34 3-3V4c0-1.646-1.33-3.056-3-3H4zm0 2h17c.55 0 1 .448 1 1H3c0-.546.451-1 1-1zM3 6h19v14c0 .55-.45 1-1 1H4c-.552 0-1-.45-1-1V6zm6 2v3h3V8H9zm4 0v3h3V8h-3zm4 0v3h3V8h-3zM5 12v3h3v-3H5zm4 0v3h3v-3H9zm4 0v3h3v-3h-3zm4 0v3h3v-3h-3zM5 16v3h3v-3H5zm4 0v3h3v-3H9zm4 0v3h3v-3h-3z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/locked.svg b/comm/calendar/base/themes/common/icons/locked.svg new file mode 100644 index 0000000000..c237394a8c --- /dev/null +++ b/comm/calendar/base/themes/common/icons/locked.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> + <path fill="context-fill" d="M8 1a4 4 0 00-4 4v2H3a1 1 0 00-1 1v6a1 1 0 001 1h10a1 1 0 001-1V8a1 1 0 00-1-1h-1V5a4 4 0 00-4-4zm0 2a2 2 0 012 2v2H6V5c0-1.1.9-2 2-2z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/low-priority.svg b/comm/calendar/base/themes/common/icons/low-priority.svg new file mode 100644 index 0000000000..849282a79a --- /dev/null +++ b/comm/calendar/base/themes/common/icons/low-priority.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M8 2a1 1 0 00-1 1v8.1L5.86 9.97c-.94-.8-2.21.47-1.41 1.41l2.82 2.82h.01c.4.39 1.1.38 1.48 0l2.78-2.79a.98.98 0 000-1.41 1 1 0 00-1.41 0L9 11.07V3a1 1 0 00-1-1z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/newevent.svg b/comm/calendar/base/themes/common/icons/newevent.svg new file mode 100644 index 0000000000..87a1e56434 --- /dev/null +++ b/comm/calendar/base/themes/common/icons/newevent.svg @@ -0,0 +1,10 @@ +<!-- 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/. --> +<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M15 8.758a4.474 4.474 0 0 0-2-.73V2.17c1.165.412 2 1.523 2 2.829v3.758zM8.758 15H4a3 3 0 0 1-3-3V5c0-1.306.835-2.417 2-2.83V12a1 1 0 0 0 1 1h4.027c.082.734.34 1.416.73 2zM6 2h4v2H6V2z"/> + <rect x="4" width="1" height="4" rx=".5"/> + <rect x="11" width="1" height="4" rx=".5"/> + <path d="M4 7h3v3H4zM3 5h10v1H3z"/> + <path d="M12.5 16a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm.5-4v-1.5a.5.5 0 1 0-1 0V12h-1.5a.5.5 0 1 0 0 1H12v1.5a.5.5 0 1 0 1 0V13h1.5a.5.5 0 1 0 0-1H13z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/newtask.svg b/comm/calendar/base/themes/common/icons/newtask.svg new file mode 100644 index 0000000000..7baa6aa6ff --- /dev/null +++ b/comm/calendar/base/themes/common/icons/newtask.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M15 8.758a4.474 4.474 0 0 0-2-.73V2H2v11h6.027c.082.734.34 1.416.73 2H2c-1.105 0-2-.84-2-1.875V1.875C0 .839.895 0 2 0h11c1.105 0 2 .84 2 1.875v6.883zM8.758 10c-.196.293-.36.61-.483.947A.5.5 0 0 1 8.5 10h.258zM8.5 4h3a.5.5 0 1 1 0 1h-3a.5.5 0 0 1 0-1zm0 3h3a.5.5 0 1 1 0 1h-3a.5.5 0 0 1 0-1zM6.146 3.146a.5.5 0 1 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-1-1a.5.5 0 1 1 .708-.708l.646.647 1.646-1.647zm0 3a.5.5 0 1 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-1-1a.5.5 0 1 1 .708-.708l.646.647 1.646-1.647zM12.5 16a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm.5-4v-1.5a.5.5 0 1 0-1 0V12h-1.5a.5.5 0 1 0 0 1H12v1.5a.5.5 0 1 0 1 0V13h1.5a.5.5 0 1 0 0-1H13z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/pane.svg b/comm/calendar/base/themes/common/icons/pane.svg new file mode 100644 index 0000000000..1e281bf57e --- /dev/null +++ b/comm/calendar/base/themes/common/icons/pane.svg @@ -0,0 +1,8 @@ +<!-- 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/. --> +<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16"> + <path d="M6 2h4v2H6zm7 0c1.65 0 3 1.5 3 3v8c0 1.65-1.34 3-3 3H3c-1.65 0-3-1.34-3-3V5c0-1.65 1.35-3 3-3v2c-.55 0-1 .55-1 1v8c0 .55.45 1 1 1h10c.55 0 1.05-.45 1-1V5c0-.55-.45-1-1-1z"/> + <rect x="4" width="1" height="4" rx=".5"/> + <rect x="11" width="1" height="4" rx=".5"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/priority.svg b/comm/calendar/base/themes/common/icons/priority.svg new file mode 100644 index 0000000000..22d6809bc6 --- /dev/null +++ b/comm/calendar/base/themes/common/icons/priority.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M8 2a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1zm0 11.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/private.svg b/comm/calendar/base/themes/common/icons/private.svg new file mode 100644 index 0000000000..6647f48120 --- /dev/null +++ b/comm/calendar/base/themes/common/icons/private.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> + <path fill="context-fill" fill-opacity="context-fill-opacity" d="M1.433 3.2l2.434 2.436a1.243 1.243 0 1 0 1.757-1.757L3.188 1.445A3.956 3.956 0 0 1 4.988 1a3.976 3.976 0 0 1 3.434 6l6.268 6.27a1 1 0 1 1-1.41 1.42L7 8.434A3.96 3.96 0 0 1 4.99 9a4 4 0 0 1-4-4 3.95 3.95 0 0 1 .445-1.8z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/recurrence-exception.svg b/comm/calendar/base/themes/common/icons/recurrence-exception.svg new file mode 100644 index 0000000000..e374baaf9e --- /dev/null +++ b/comm/calendar/base/themes/common/icons/recurrence-exception.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg fill="context-fill" fill-opacity="context-fill-opacity" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> + <path d="m13 0-1 1H2.5A2.5 2.5 0 0 0 0 3.5v7c0 .7.28 1.32.73 1.77L0 13l1 1L14 1l-1-1zm2.7 2.3L14 4v6.5a.5.5 0 0 1-.5.5h-3.3l.8-1c.91-.93-.47-2.32-1.41-1.4l-2.3 2.7a1 1 0 0 0 0 1.41l2.3 2.71c.94.91 2.32-.47 1.41-1.41l-.8-1h3.3a2.5 2.5 0 0 0 2.5-2.5v-7c0-.43-.1-.85-.3-1.21zM2.5 3H10l-7.86 7.86A.5.5 0 0 1 2 10.5v-7c0-.28.23-.5.5-.5z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/recurrence.svg b/comm/calendar/base/themes/common/icons/recurrence.svg new file mode 100644 index 0000000000..dffdfec186 --- /dev/null +++ b/comm/calendar/base/themes/common/icons/recurrence.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg fill="context-fill" fill-opacity="context-fill-opacity" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> + <path d="M2.5 1A2.5 2.5 0 0 0 0 3.5v7A2.5 2.5 0 0 0 2.5 13H4c1.33 0 1.33-2 0-2H2.5a.5.5 0 0 1-.5-.5v-7c0-.28.23-.5.5-.5h11c.28 0 .5.22.5.5v7a.5.5 0 0 1-.5.5h-3.3l.8-1c.91-.94-.47-2.32-1.41-1.41l-2.3 2.7a1 1 0 0 0 0 1.42l2.3 2.7c.94.91 2.32-.47 1.41-1.41l-.8-1h3.3a2.5 2.5 0 0 0 2.5-2.5v-7C16 2.12 14.87.87 13.5 1h-11z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/save-close.svg b/comm/calendar/base/themes/common/icons/save-close.svg new file mode 100644 index 0000000000..1b51faf67a --- /dev/null +++ b/comm/calendar/base/themes/common/icons/save-close.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M15 8.758a4.474 4.474 0 0 0-2-.73v-2.2L10.172 3H3v3h5a1 1 0 0 0 1-1V3H3v10h5.027c.082.734.34 1.416.73 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h7.172a2 2 0 0 1 1.414.586l2.828 2.828A2 2 0 0 1 15 5.828v2.93zm-5.287.209A4.494 4.494 0 0 0 8.027 12H8a2 2 0 1 1 1.713-3.033zM9 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0zm5.116-1.32l-2.212 2.655-1.127-.751a.5.5 0 1 0-.554.832l1.5 1a.5.5 0 0 0 .661-.096l2.5-3a.5.5 0 1 0-.768-.64z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/sort.svg b/comm/calendar/base/themes/common/icons/sort.svg new file mode 100644 index 0000000000..a3d32a20bf --- /dev/null +++ b/comm/calendar/base/themes/common/icons/sort.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M11 7H5a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2zm-3 4H5a1 1 0 0 0 0 2h3a1 1 0 0 0 0-2zm6-8H5a1 1 0 0 0 0 2h9a1 1 0 0 0 0-2zM2 3a1 1 0 1 0 1 1 1 1 0 0 0-1-1zm0 4a1 1 0 1 0 1 1 1 1 0 0 0-1-1zm0 4a1 1 0 1 0 1 1 1 1 0 0 0-1-1z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/status.svg b/comm/calendar/base/themes/common/icons/status.svg new file mode 100644 index 0000000000..14d3289f3e --- /dev/null +++ b/comm/calendar/base/themes/common/icons/status.svg @@ -0,0 +1,10 @@ +<!-- 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/. --> +<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M6 2h4v2H6V2zm7 .17c1.165.413 2 1.524 2 2.83v7a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V5c0-1.306.835-2.417 2-2.83V12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2.17z"/> + <rect x="4" width="1" height="4" rx=".5"/> + <rect x="11" width="1" height="4" rx=".5"/> + <path d="M3 5h10v1H3z"/> + <path d="M10.1 7.2a.5.5 0 0 1 .8.6l-3 4a.5.5 0 0 1-.754.054l-2-2a.5.5 0 1 1 .708-.708l1.592 1.593L10.1 7.2z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/synchronize.svg b/comm/calendar/base/themes/common/icons/synchronize.svg new file mode 100644 index 0000000000..5c6e0eb688 --- /dev/null +++ b/comm/calendar/base/themes/common/icons/synchronize.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M14 1a1 1 0 0 0-1 1v1.146A6.948 6.948 0 0 0 1.227 6.307a1 1 0 1 0 1.94.484A4.983 4.983 0 0 1 8 3a4.919 4.919 0 0 1 3.967 2H10a1 1 0 0 0 0 2h4a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm.046 7.481a1 1 0 0 0-1.213.728A4.983 4.983 0 0 1 8 13a4.919 4.919 0 0 1-3.967-2H6a1 1 0 0 0 0-2H2a1 1 0 0 0-1 1v4a1 1 0 0 0 2 0v-1.146a6.948 6.948 0 0 0 11.773-3.161 1 1 0 0 0-.727-1.212z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/task-tab.svg b/comm/calendar/base/themes/common/icons/task-tab.svg new file mode 100644 index 0000000000..8874ff05c3 --- /dev/null +++ b/comm/calendar/base/themes/common/icons/task-tab.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M2 0h11a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 2v12h11V2H2zm6.5 3h3a.5.5 0 1 1 0 1h-3a.5.5 0 0 1 0-1zm0 3h3a.5.5 0 1 1 0 1h-3a.5.5 0 0 1 0-1zm0 3h3a.5.5 0 1 1 0 1h-3a.5.5 0 1 1 0-1zM6.146 4.146a.5.5 0 1 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-1-1a.5.5 0 1 1 .708-.708l.646.647 1.646-1.647zm0 3a.5.5 0 1 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-1-1a.5.5 0 1 1 .708-.708l.646.647 1.646-1.647z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/task.svg b/comm/calendar/base/themes/common/icons/task.svg new file mode 100644 index 0000000000..05472c3563 --- /dev/null +++ b/comm/calendar/base/themes/common/icons/task.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M3 1c-1.105 0-2 .839-2 1.875V13.13C1 14.16 1.895 15 3 15V3h12c0-1.035-.89-2-2-2H3zm4.521 2.99a.485.485 0 0 0-.375.156L5.5 5.793l-.646-.647c-.472-.472-1.18.236-.708.708l1 1a.5.5 0 0 0 .708 0l2-2c.354-.354.044-.842-.333-.864zm7.039 1.002c-.37-.024-.77.103-1.12.444l-.94.939 2.12 2.121.94-.939c1.03-1.06.11-2.491-1-2.565zM9.5 5c-.667 0-.667 1 0 1h1c.67 0 .67-1 0-1h-1zM7.521 6.99a.485.485 0 0 0-.375.156L5.5 8.793l-.646-.647c-.472-.472-1.18.236-.708.708l1 1a.5.5 0 0 0 .708 0l2-2c.354-.354.044-.842-.333-.864zm3.469.899L5.439 13.44c-.121.12-.267.31-.439.56v2h1.996c.26-.17.441-.32.561-.44l5.513-5.51-2.08-2.161zM15 10.5L10.5 15H13c.94 0 2-1.06 2-2v-2.5z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/tentative.svg b/comm/calendar/base/themes/common/icons/tentative.svg new file mode 100644 index 0000000000..d7f55f7ffe --- /dev/null +++ b/comm/calendar/base/themes/common/icons/tentative.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"> + <path fill="context-fill" fill-opacity="context-fill-opacity" d="M 7,6 H 5 C 5,4.6 5,2 8,2 c 2,0 4,0 4,3.5 0,3 -3,3 -3,5.5 H 7 C 7,7.5 10.1,7.5 10,5.5 10,4 9,4 8,4 7,4 7,5 7,6 Z m 0,6 h 2 v 2 H 7 Z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/timezones.svg b/comm/calendar/base/themes/common/icons/timezones.svg new file mode 100644 index 0000000000..bd02529163 --- /dev/null +++ b/comm/calendar/base/themes/common/icons/timezones.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16"> + <path d="M8 0a8 8 0 1 0 8 8 8 8 0 0 0-8-8zm5.163 4.958h-1.552a7.7 7.7 0 0 0-1.051-2.376 6.03 6.03 0 0 1 2.603 2.376zM14 8a5.963 5.963 0 0 1-.335 1.958h-1.821A12.327 12.327 0 0 0 12 8a12.327 12.327 0 0 0-.156-1.958h1.821A5.963 5.963 0 0 1 14 8zm-6 6c-1.075 0-2.037-1.2-2.567-2.958h5.135C10.037 12.8 9.075 14 8 14zM5.174 9.958a11.084 11.084 0 0 1 0-3.916h5.651A11.114 11.114 0 0 1 11 8a11.114 11.114 0 0 1-.174 1.958zM2 8a5.963 5.963 0 0 1 .335-1.958h1.821a12.361 12.361 0 0 0 0 3.916H2.335A5.963 5.963 0 0 1 2 8zm6-6c1.075 0 2.037 1.2 2.567 2.958H5.433C5.963 3.2 6.925 2 8 2zm-2.56.582a7.7 7.7 0 0 0-1.051 2.376H2.837A6.03 6.03 0 0 1 5.44 2.582zm-2.6 8.46h1.549a7.7 7.7 0 0 0 1.051 2.376 6.03 6.03 0 0 1-2.603-2.376zm7.723 2.376a7.7 7.7 0 0 0 1.051-2.376h1.552a6.03 6.03 0 0 1-2.606 2.376z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/today.svg b/comm/calendar/base/themes/common/icons/today.svg new file mode 100644 index 0000000000..ed891c7473 --- /dev/null +++ b/comm/calendar/base/themes/common/icons/today.svg @@ -0,0 +1,9 @@ +<!-- 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/. --> +<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16"> + <path d="M6 2h4v2H6V2zm7 .17c1.165.413 2 1.524 2 2.83v7a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V5c0-1.305.835-2.417 2-2.83V12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2.17z"/> + <rect x="4" width="1" height="4" rx=".5"/> + <rect x="11" width="1" height="4" rx=".5"/> + <path d="M4 7h3v3H4zM3 5h10v1H3z"/> +</svg> diff --git a/comm/calendar/base/themes/common/icons/warn.svg b/comm/calendar/base/themes/common/icons/warn.svg new file mode 100644 index 0000000000..a96f74a4aa --- /dev/null +++ b/comm/calendar/base/themes/common/icons/warn.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> + <path fill="context-fill" d="M14.74 12.11L9.79 2.2a2 2 0 0 0-3.58 0l-4.95 9.91A2 2 0 0 0 3.05 15h9.9a2 2 0 0 0 1.79-2.89zM7 5a1 1 0 0 1 2 0v4a1 1 0 0 1-2 0zm1 8.25A1.25 1.25 0 1 1 9.25 12 1.25 1.25 0 0 1 8 13.25z"/> +</svg> diff --git a/comm/calendar/base/themes/common/images/attendee-icons.png b/comm/calendar/base/themes/common/images/attendee-icons.png Binary files differnew file mode 100644 index 0000000000..c425552e76 --- /dev/null +++ b/comm/calendar/base/themes/common/images/attendee-icons.png diff --git a/comm/calendar/base/themes/common/images/event-continue.svg b/comm/calendar/base/themes/common/images/event-continue.svg new file mode 100644 index 0000000000..5347ef480a --- /dev/null +++ b/comm/calendar/base/themes/common/images/event-continue.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 11 11"> + <path d="M 6,4 H 9 L 5.5,1 2,4 H 5 V 7 H 2 L 5.5,10 9,7 H 6 Z"/> +</svg> diff --git a/comm/calendar/base/themes/common/images/event-end.svg b/comm/calendar/base/themes/common/images/event-end.svg new file mode 100644 index 0000000000..ebe1568724 --- /dev/null +++ b/comm/calendar/base/themes/common/images/event-end.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 11 11"> + <path d="M 2,10 H 9 V 9 H 5.5 L 9,6 H 6 V 1 H 5 V 6 H 2 L 5.5,9 H 2 Z"/> +</svg> diff --git a/comm/calendar/base/themes/common/images/event-grippy.png b/comm/calendar/base/themes/common/images/event-grippy.png Binary files differnew file mode 100644 index 0000000000..3bb8eba113 --- /dev/null +++ b/comm/calendar/base/themes/common/images/event-grippy.png diff --git a/comm/calendar/base/themes/common/images/event-start.svg b/comm/calendar/base/themes/common/images/event-start.svg new file mode 100644 index 0000000000..89fde1f69e --- /dev/null +++ b/comm/calendar/base/themes/common/images/event-start.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 11 11"> + <path d="M 2,1 H 9 V 2 H 6 V 7 H 9 L 5.5,10 2,7 H 5 V 2 H 2 Z"/> +</svg> diff --git a/comm/calendar/base/themes/common/images/timezone_map.png b/comm/calendar/base/themes/common/images/timezone_map.png Binary files differnew file mode 100644 index 0000000000..1d3f84445f --- /dev/null +++ b/comm/calendar/base/themes/common/images/timezone_map.png diff --git a/comm/calendar/base/themes/common/images/timezones.png b/comm/calendar/base/themes/common/images/timezones.png Binary files differnew file mode 100644 index 0000000000..9170d9d79c --- /dev/null +++ b/comm/calendar/base/themes/common/images/timezones.png diff --git a/comm/calendar/base/themes/common/images/todayButton-arrow.svg b/comm/calendar/base/themes/common/images/todayButton-arrow.svg new file mode 100644 index 0000000000..54ec731c10 --- /dev/null +++ b/comm/calendar/base/themes/common/images/todayButton-arrow.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 7" width="9" height="7"> + <path fill="context-fill" d="M4.5.74a.9.9 0 0 0-.7.2L.2 4.64a.92.92 0 0 0 1.3 1.3l3-3 3 3a.9.9 0 0 0 1.2-1.3L5.1.94a.9.9 0 0 0-.6-.2z"/> +</svg> diff --git a/comm/calendar/base/themes/common/images/todo-complete.svg b/comm/calendar/base/themes/common/images/todo-complete.svg new file mode 100644 index 0000000000..ef60bcd5a4 --- /dev/null +++ b/comm/calendar/base/themes/common/images/todo-complete.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 11 11"> + <path d="M1 0C.5 0 0 .5 0 1v9c0 .5.5 1 1 1h9c.5 0 1-.5 1-1V1c0-.5-.5-1-1-1zm0 1h9v9H1zm6.82 2.99a.52.52 0 0 0-.37.16L4.8 6.79 3.65 5.65c-.46-.48-1.17.23-.7.7l1.5 1.5c.2.2.5.2.7 0l3-3c.36-.35.05-.84-.33-.86z"/> +</svg> diff --git a/comm/calendar/base/themes/common/images/todo.svg b/comm/calendar/base/themes/common/images/todo.svg new file mode 100644 index 0000000000..194d5fce37 --- /dev/null +++ b/comm/calendar/base/themes/common/images/todo.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 11 11"> + <path d="M1 0C.5 0 0 .5 0 1v9c0 .5.5 1 1 1h9c.5 0 1-.5 1-1V1c0-.5-.5-1-1-1zm0 1h9v9H1zm1.49 2c-.65 0-.66 1 0 1h.11c.65 0 .65-1 0-1zM5.3 3c-.65 0-.66 1 0 1h3c.65 0 .65-1 0-1zM2.5 5c-.65 0-.65 1 0 1h.11c.65 0 .65-1 0-1zM5.3 5c-.65 0-.65 1 0 1h3c.65 0 .65-1 0-1zM2.5 7c-.65 0-.66 1 0 1h.11c.65 0 .65-1 0-1zM5.3 7c-.65 0-.66 1 0 1h3c.65 0 .65-1 0-1z"/> +</svg> diff --git a/comm/calendar/base/themes/common/imip.css b/comm/calendar/base/themes/common/imip.css new file mode 100644 index 0000000000..893e633706 --- /dev/null +++ b/comm/calendar/base/themes/common/imip.css @@ -0,0 +1,76 @@ +/* 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/. */ + +.invitation-details { + text-align: center; + margin: 1em 0; + padding: 1em; +} + +.invitation-details[open] > summary { + margin-bottom: 0.5em; +} + +.invitation-border { + border: 3px solid -moz-default-color; + margin-inline-start: auto; + margin-inline-end: auto; + width: -moz-fit-content; + height: -moz-fit-content; +} + +.invitation-table { + border-collapse: collapse; + width: 40em; +} + +.invitation-table :is(td, th) { + padding: 3px; + vertical-align: baseline; +} + +.invitation-table td { + overflow-wrap: anywhere; +} + +.invitation-table .description { + width: 9em; + text-align: end; + font-weight: normal; + border-inline-end: 1px solid hsla(0, 0%, 50%, .2); + background-color: hsla(0, 0%, 50%, .2); +} + +.invitation-table .content { + width: 29em; +} + +.invitation-table .added { + color: rgb(255, 0, 0); + text-decoration-line: none; +} + +.invitation-table .modified { + color: rgb(255, 0, 0); + font-style: italic; +} + +.invitation-table .removed { + color: rgb(125, 125, 125); +} + +@media (prefers-contrast) { + .invitation-table .added { + color: currentColor; + font-weight: bold; + } + + .invitation-table .modified { + color: currentColor; + } + + .invitation-table .removed { + color: currentColor; + } +} diff --git a/comm/calendar/base/themes/common/jar.inc.mn b/comm/calendar/base/themes/common/jar.inc.mn new file mode 100644 index 0000000000..201f8d9a91 --- /dev/null +++ b/comm/calendar/base/themes/common/jar.inc.mn @@ -0,0 +1,99 @@ +# 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/. + +# This is not a complete / proper jar manifest. It is included by the +# actual theme-specific manifests, so that shared resources need only +# be specified once. As a result, the source file paths are relative +# to the location of the actual manifest. + skin/classic/calendar/dialogs/calendar-uri-redirect-dialog.css (../common/dialogs/calendar-uri-redirect-dialog.css) + skin/classic/calendar/shared/calendar.css (../common/calendar.css) + skin/classic/calendar/shared/calendar-alarms.css (../common/calendar-alarms.css) + skin/classic/calendar/shared/calendar-attendees.css (../common/calendar-attendees.css) + skin/classic/calendar/shared/calendar-creation.css (../common/calendar-creation.css) + skin/classic/calendar/shared/calendar-daypicker.css (../common/calendar-daypicker.css) + skin/classic/calendar/shared/calendar-item-summary.css (../common/calendar-item-summary.css) + skin/classic/calendar/shared/calendar-itip-icons.svg (../common/calendar-itip-icons.svg) + skin/classic/calendar/shared/calendar-invitation-display.css (../common/calendar-invitation-display.css) + skin/classic/calendar/shared/calendar-occurrence-prompt.css (../common/calendar-occurrence-prompt.css) + skin/classic/calendar/shared/calendar-occurrence.svg (../common/calendar-occurrence.svg) + skin/classic/calendar/shared/calendar-print.css (../common/calendar-print.css) + skin/classic/calendar/shared/calendar-preferences.css (../common/calendar-preferences.css) + skin/classic/calendar/shared/calendar-providerUninstall-dialog.css (../common/calendar-providerUninstall-dialog.css) + skin/classic/calendar/shared/calendar-task-tree.css (../common/calendar-task-tree.css) + skin/classic/calendar/shared/calendar-task-view.css (../common/calendar-task-view.css) + skin/classic/calendar/shared/calendar-toolbar.css (../common/calendar-toolbar.css) + skin/classic/calendar/shared/calendar-unifinder.css (../common/calendar-unifinder.css) + skin/classic/calendar/shared/calendar-views.css (../common/calendar-views.css) + skin/classic/calendar/shared/datetimepickers.css (../common/datetimepickers.css) + skin/classic/calendar/shared/dialogs/calendar-alarm-dialog.css (../common/dialogs/calendar-alarm-dialog.css) + skin/classic/calendar/shared/dialogs/calendar-event-dialog.css (../common/dialogs/calendar-event-dialog.css) + skin/classic/calendar/shared/dialogs/calendar-event-dialog-attendees.css (../common/dialogs/calendar-event-dialog-attendees.css) + skin/classic/calendar/shared/dialogs/calendar-ics-file-dialog.css (../common/dialogs/calendar-ics-file-dialog.css) + skin/classic/calendar/shared/dialogs/calendar-invitations-dialog.css (../common/dialogs/calendar-invitations-dialog.css) + skin/classic/calendar/shared/dialogs/calendar-itip-identity-dialog.css (../common/dialogs/calendar-itip-identity-dialog.css) + skin/classic/calendar/shared/dialogs/chooseCalendarDialog.css (../common/dialogs/chooseCalendarDialog.css) + skin/classic/calendar/shared/calendar-properties-dialog.css (../common/dialogs/calendar-properties-dialog.css) + skin/classic/calendar/shared/dialogs/calendar-summary-dialog.css (../common/dialogs/calendar-summary-dialog.css) + skin/classic/calendar/shared/calendar-timezone-highlighter.css (../common/dialogs/calendar-timezone-highlighter.css) + skin/classic/calendar/shared/calendar-event-dialog-attendees.png (../common/dialogs/images/calendar-event-dialog-attendees.png) + skin/classic/calendar/shared/calendar-invitations-dialog-list-images.png (../common/dialogs/images/calendar-invitations-dialog-list-images.png) + skin/classic/calendar/shared/chain-lock.svg (../common/dialogs/images/chain-lock.svg) + skin/classic/calendar/shared/chain-unlock.svg (../common/dialogs/images/chain-unlock.svg) + skin/classic/calendar/shared/link-image-bottom.svg (../common/dialogs/images/link-image-bottom.svg) + skin/classic/calendar/shared/link-image-top.svg (../common/dialogs/images/link-image-top.svg) + skin/classic/calendar/shared/statusbar-priority-low.svg (../common/dialogs/images/statusbar-priority-low.svg) + skin/classic/calendar/shared/statusbar-priority-normal.svg (../common/dialogs/images/statusbar-priority-normal.svg) + skin/classic/calendar/shared/statusbar-priority-high.svg (../common/dialogs/images/statusbar-priority-high.svg) + skin/classic/calendar/shared/icons/alarm-no.svg (../common/icons/alarm-no.svg) + skin/classic/calendar/shared/icons/alarm.svg (../common/icons/alarm.svg) + skin/classic/calendar/shared/icons/complete.svg (../common/icons/complete.svg) + skin/classic/calendar/shared/icons/confidential.svg (../common/icons/confidential.svg) + skin/classic/calendar/shared/icons/decline.svg (../common/icons/decline.svg) + skin/classic/calendar/shared/icons/edit.svg (../common/icons/edit.svg) + skin/classic/calendar/shared/icons/email.svg (../common/icons/email.svg) + skin/classic/calendar/shared/icons/event.svg (../common/icons/event.svg) + skin/classic/calendar/shared/icons/find.svg (../common/icons/find.svg) + skin/classic/calendar/shared/icons/freebusy.svg (../common/icons/freebusy.svg) + skin/classic/calendar/shared/icons/icon32.svg (../common/icons/icon32.svg) + skin/classic/calendar/shared/icons/imip-bar.svg (../common/icons/imip-bar.svg) + skin/classic/calendar/shared/icons/locked.svg (../common/icons/locked.svg) + skin/classic/calendar/shared/icons/low-priority.svg (../common/icons/low-priority.svg) + skin/classic/calendar/shared/icons/newevent.svg (../common/icons/newevent.svg) + skin/classic/calendar/shared/icons/newtask.svg (../common/icons/newtask.svg) + skin/classic/calendar/shared/icons/pane.svg (../common/icons/pane.svg) + skin/classic/calendar/shared/icons/priority.svg (../common/icons/priority.svg) + skin/classic/calendar/shared/icons/private.svg (../common/icons/private.svg) + skin/classic/calendar/shared/icons/recurrence-exception.svg (../common/icons/recurrence-exception.svg) + skin/classic/calendar/shared/icons/recurrence.svg (../common/icons/recurrence.svg) + skin/classic/calendar/shared/icons/save-close.svg (../common/icons/save-close.svg) + skin/classic/calendar/shared/icons/sort.svg (../common/icons/sort.svg) + skin/classic/calendar/shared/icons/status.svg (../common/icons/status.svg) + skin/classic/calendar/shared/icons/synchronize.svg (../common/icons/synchronize.svg) + skin/classic/calendar/shared/icons/task-tab.svg (../common/icons/task-tab.svg) + skin/classic/calendar/shared/icons/task.svg (../common/icons/task.svg) + skin/classic/calendar/shared/icons/tentative.svg (../common/icons/tentative.svg) + skin/classic/calendar/shared/icons/timezones.svg (../common/icons/timezones.svg) + skin/classic/calendar/shared/icons/today.svg (../common/icons/today.svg) + skin/classic/calendar/shared/icons/warn.svg (../common/icons/warn.svg) + skin/classic/calendar/shared/imip.css (../common/imip.css) + skin/classic/calendar/shared/attendee-icons.png (../common/images/attendee-icons.png) + skin/classic/calendar/shared/event-continue.svg (../common/images/event-continue.svg) + skin/classic/calendar/shared/event-end.svg (../common/images/event-end.svg) + skin/classic/calendar/shared/event-grippy.png (../common/images/event-grippy.png) + skin/classic/calendar/shared/event-start.svg (../common/images/event-start.svg) + skin/classic/calendar/shared/publishDialog.css (../common/publishDialog.css) + skin/classic/calendar/shared/timezone_map.png (../common/images/timezone_map.png) + skin/classic/calendar/shared/timezones.png (../common/images/timezones.png) + skin/classic/calendar/shared/todayButton-arrow.svg (../common/images/todayButton-arrow.svg) + skin/classic/calendar/shared/todo-complete.svg (../common/images/todo-complete.svg) + skin/classic/calendar/shared/todo.svg (../common/images/todo.svg) + skin/classic/calendar/shared/today-pane.css (../common/today-pane.css) + skin/classic/calendar/shared/view-cycler.svg (../common/view-cycler.svg) + skin/classic/calendar/shared/widgets/calendar-widgets.css (../common/widgets/calendar-widgets.css) + skin/classic/calendar/shared/widgets/calendar-invitation-panel.css (../common/widgets/calendar-invitation-panel.css) + skin/classic/calendar/shared/widgets/calendar-minidate.css (../common/widgets/calendar-minidate.css) + skin/classic/calendar/shared/widgets/drag-center.svg (../common/widgets/images/drag-center.svg) + skin/classic/calendar/shared/widgets/nav-arrow.svg (../common/widgets/images/nav-arrow.svg) + skin/classic/calendar/shared/widgets/nav-today.svg (../common/widgets/images/nav-today.svg) + skin/classic/calendar/shared/widgets/minimonth.css (../common/widgets/minimonth.css) diff --git a/comm/calendar/base/themes/common/publishDialog.css b/comm/calendar/base/themes/common/publishDialog.css new file mode 100644 index 0000000000..cf59fe22e3 --- /dev/null +++ b/comm/calendar/base/themes/common/publishDialog.css @@ -0,0 +1,53 @@ +/* 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"); + +html|label { + white-space: nowrap; + margin-right: 0.5em; +} + +#publish-progressmeter { + width: -moz-available; + appearance: none; + height: 4px; + margin: 10px 4px; + background-color: hsla(0, 0%, 60%, 0.2); + border-style: none; + border-radius: 2px; +} + +#publish-progressmeter::-moz-progress-bar { + appearance: none; + background-color: var(--primary); + border-radius: 2px; +} + +#publish-progressmeter:indeterminate::-moz-progress-bar { + /* Make a white reflecting animation. + Create a gradient with 2 identical pattern, and enlarge the size to 200%. + This allows us to animate background-position with percentage. */ + background-image: linear-gradient(90deg, transparent 0%, + rgba(255, 255, 255, 0.5) 25%, + transparent 50%, + rgba(255, 255, 255, 0.5) 75%, + transparent 100%); + background-size: 200% 100%; +} + +@media (prefers-reduced-motion: no-preference) { + #publish-progressmeter:indeterminate::-moz-progress-bar { + animation: progressSlideX 1.5s linear infinite; + } + + @keyframes progressSlideX { + 0% { + background-position: 0 0; + } + 100% { + background-position: -100% 0; + } + } +} diff --git a/comm/calendar/base/themes/common/today-pane.css b/comm/calendar/base/themes/common/today-pane.css new file mode 100644 index 0000000000..16509e6d5a --- /dev/null +++ b/comm/calendar/base/themes/common/today-pane.css @@ -0,0 +1,433 @@ +/* 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/. */ + +:root[lwt-tree-brighttext] #today-pane-panel { + --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25)); + --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5)); + --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)); + --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .7)); + --toolbarbutton-active-boxshadow: 0 0 0 1px var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)) inset; +} + +.today-subpane { + border-bottom-color: var(--splitter-color); + border-bottom-style: solid; + border-bottom-width: 1px; + padding: 0; +} + +#buttonspacer { + width: 5px; +} + +#today-pane-panel { + background-color: var(--layout-background-0); +} + +#today-pane-panel:-moz-lwtheme { + background-color: var(--toolbar-bgcolor); + color: var(--toolbar-color); +} + +#today-pane-panel > * { + color: var(--layout-color-0); +} + +#today-pane-panel > .sidebar-header { + appearance: none; + background-color: var(--layout-background-0); + border-bottom: 1px solid var(--splitter-color); +} + +:root[lwt-tree] #today-pane-panel > .sidebar-header { + background-color: transparent; +} + +#mini-day-image { + background-color: hsla(0, 0%, 50%, 0.1); +} + +:root[lwt-tree] #mini-day-image { + background-color: transparent; +} + +.today-pane-cycler { + appearance: none; + border-radius: var(--button-border-radius); + padding-left: 5px; + padding-right: 5px; + -moz-context-properties: stroke; + stroke: currentColor; + list-style-image: var(--icon-nav-right); +} + +.today-pane-cycler:hover { + background-color: hsla(0, 0%, 0%, 0.1); + color: inherit; +} + +.today-pane-cycler:hover:active { + background-color: hsla(0, 0%, 0%, 0.2); + color: inherit; +} + +@media (prefers-color-scheme: dark) { + .today-pane-cycler:hover { + background-color: hsla(0, 0%, 100%, 0.1); + } + + .today-pane-cycler:hover:active { + background-color: hsla(0, 0%, 100%, 0.2); + } +} + +.today-pane-cycler[dir="prev"]:-moz-locale-dir(ltr) > .toolbarbutton-icon, +.today-pane-cycler[dir="next"]:-moz-locale-dir(rtl) > .toolbarbutton-icon { + transform: scaleX(-1); +} + +#today-closer { + margin-inline-end: 3px; +} + +#today-pane-panel:-moz-lwtheme > vbox { + text-shadow: none; + background-color: var(--layout-background-0); +} + +:root[lwt-tree] #today-pane-panel > vbox { + background-color: var(--lwt-accent-color); + color: inherit; +} + +:root[lwt-tree-brighttext] #today-pane-panel > vbox { + background-image: linear-gradient(rgba(255, 255, 255, 0.05), + rgba(255, 255, 255, 0.05)); +} + +:root[lwt-tree] #agenda-panel > modebox { + background-color: var(--sidebar-background-color); +} + +#today-minimonth-box { + background-color: var(--layout-background-1); +} + +:root[lwt-tree] #today-minimonth-box { + background-color: var(--sidebar-background-color); +} + +#weekdayNameLabel { + font-family: Trebuchet MS, Lucida Grande, Arial, Helvetica, sans-serif; + padding-top: 4px; + font-weight: bold; + font-size: 18px; +} + +.monthlabel { + margin-inline-end: 0; +} + +.dateValue { + font-family: Arial, Helvetica, Trebuchet MS, Lucida Grande, sans-serif; + margin-top: initial; + margin-bottom: initial; + font-size: 36px; + font-weight: bold; + width: 1em; + text-align: center; +} + +#dragCenter-image-container { + pointer-events: none; +} + +.miniday-nav-buttons { + margin-top: 2px; + min-width: 19px; + -moz-user-focus: normal; + -moz-context-properties: stroke, fill-opacity; + list-style-image: var(--icon-nav-right-sm); + stroke: currentColor; + fill-opacity: var(--toolbarbutton-icon-fill-opacity); +} + +.miniday-nav-buttons, +#miniday-dropdown-button { + appearance: none; + -moz-user-focus: normal; + border: 1px solid transparent; + border-radius: var(--button-border-radius); +} + +.miniday-nav-buttons:not([disabled="true"]):hover, +#miniday-dropdown-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; +} + +.miniday-nav-buttons:not([disabled="true"]):hover:active, +#miniday-dropdown-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; +} + +#previous-day-button:-moz-locale-dir(ltr), +#next-day-button:-moz-locale-dir(rtl) { + list-style-image: var(--icon-nav-left-sm); +} + +.miniday-nav-buttons:focus-visible:not(:hover), +#miniday-dropdown-button:focus-visible:not(:hover) { + outline: 2px solid var(--focus-outline-color); + outline-offset: -2px; +} + +#today-button { + list-style-image: var(--icon-nav-today); +} + +.miniday-nav-buttons[disabled] { + opacity: .3; +} + +.miniday-nav-buttons > .toolbarbutton-icon { + margin: 1px; +} + +#miniday-dropdown-button { + max-width: 18px; + margin: 2px; + -moz-user-focus: normal; +} + +#miniday-dropdown-button > .toolbarbutton-icon, +#miniday-dropdown-button > .toolbarbutton-text, +.miniday-nav-buttons > .toolbarbutton-text { + display: none; +} + +#miniday-dropdown-button > .toolbarbutton-menu-dropmarker { + padding-inline-start: 0; + list-style-image: var(--icon-nav-down-sm); + -moz-context-properties: stroke; + stroke: currentColor; +} + +#miniday-dropdown-button > .toolbarbutton-menu-dropmarker::part(icon) { + width: 12px; + height: 12px; +} + +#agenda-toolbar { + border: none; + padding: 4px 1px; +} + +#todaypane-new-event-button { + appearance: none; + -moz-user-focus: normal; + border: 1px solid transparent; + border-radius: var(--button-border-radius); + margin: 2px 3px 1px; + list-style-image: var(--icon-new-event); + -moz-context-properties: fill, stroke, fill-opacity; + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; + fill-opacity: var(--toolbarbutton-icon-fill-opacity); +} + +#todaypane-new-event-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; +} + +#todaypane-new-event-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; +} + +#todaypane-new-event-button:focus-visible:not(:hover) { + outline: 2px solid var(--focus-outline-color); + outline-offset: var(--focus-outline-offset); +} + +#todaypane-new-event-button > .toolbarbutton-text { + padding-inline-start: 5px; +} + +#today-pane-splitter { + border-bottom: 1px solid var(--splitter-color); + /* splitter grip area */ + height: 5px; + /* make only the splitter border visible */ + margin-top: -5px; + /* because of the negative margin needed to make the splitter visible */ + position: relative; + z-index: 10; +} + +#todo-tab-panel { + height: 40%; + min-height: 160px; +} + +#today-pane-splitter[hidden="true"] + #todo-tab-panel { + height: 100%; +} + +#show-completed-checkbox-box { + padding-top: 3px; + padding-inline-start: 5px; +} + +#agenda-container { + flex: 1 auto; + display: flex; + flex-direction: column; + min-height: 7em; /* Show at least the #agenda-toolbar and a part of the events. */ + height: 0; /* Allow shrinking with flexbox emulation. */ +} + +#agenda { + flex: 1; + overflow: auto; + height: 0; + margin: 0; + padding: 3px 6px; + list-style: none; + background-color: var(--layout-background-1); + border-top: 1px solid var(--splitter-color); + --selected-background: var(--selected-item-color); + --selected-foreground: var(--selected-item-text-color); +} + +:root[lwt-tree] #agenda { + --selected-background: var(--sidebar-highlight-background-color, hsla(0, 0%, 80%, .3)); + --selected-foreground: var(--sidebar-highlight-text-color, var(--sidebar-text-color)); +} + +:root[lwt-tree-brighttext] #agenda { + --selected-background: var(--sidebar-highlight-background-color, rgba(249, 249, 250, .1)); +} + +.agenda-date-header, +.agenda-listitem-details { + padding: 6px; +} + +:root[uidensity="compact"] :is(.agenda-date-header, .agenda-listitem-details) { + padding: 3px; +} + +:root[uidensity="touch"] :is(.agenda-date-header, .agenda-listitem-details) { + padding: 12px; +} + +.agenda-date-header { + margin-block-start: 9px; + margin-inline: -6px; + padding-inline: 6px !important; + background-color: var(--button-background-color); + font-weight: bold; +} + +.agenda-listitem:first-child .agenda-date-header { + margin-block-start: -3px; +} + +.agenda-listitem-details { + display: flex; + align-items: baseline; + border-radius: 3px; +} + +.agenda-listitem-all-day .agenda-listitem-details { + margin-block: 1px; + padding-inline: 8px; + background-color: var(--item-backcolor); + color: var(--item-forecolor); +} + +.agenda-listitem-past .agenda-listitem-details { + opacity: 0.5; +} + +#agenda:focus .agenda-listitem.selected .agenda-listitem-details { + background-color: var(--selected-background); + color: var(--selected-foreground); + opacity: unset; /* Overrides .agenda-listitem-past */ +} + +.agenda-listitem-all-day :is(.agenda-listitem-calendar, .agenda-listitem-time) { + display: none; +} + +.agenda-listitem-calendar { + width: 10px; + height: 10px; + margin-inline-end: 6px; + display: inline-block; + border-radius: 5px; + background-color: var(--item-backcolor); +} + +.agenda-listitem-details-inner { + flex: 1; +} + +.agenda-listitem-time { + margin-inline-end: 3px; + font-weight: 600; +} + +.agenda-listitem-time:empty { + display: none; +} + +.agenda-listitem-relative { + font-size: 0.85em; + white-space: nowrap; +} + +.agenda-listitem:not(.selected, .agenda-listitem-now) .agenda-listitem-relative { + opacity: 0.75; +} + +.agenda-listitem-relative:empty { + display: none; +} + +.agenda-listitem-now .agenda-listitem-relative { + padding: 1px 4px; + border-radius: 12px; + background-color: var(--viewTodayLabelBackground); + color: var(--viewTodayLabelColor); + font-weight: bold; +} + +#agenda:focus .agenda-listitem-now.selected .agenda-listitem-relative { + background-color: var(--selected-foreground); + color: var(--selected-background); +} + +.agenda-listitem-overlap { + margin-inline-start: 6px; + -moz-context-properties: stroke; + stroke: currentColor; +} + +.agenda-listitem-overlap:not([src]) { + display: none; +} diff --git a/comm/calendar/base/themes/common/view-cycler.svg b/comm/calendar/base/themes/common/view-cycler.svg new file mode 100644 index 0000000000..847378327c --- /dev/null +++ b/comm/calendar/base/themes/common/view-cycler.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> + <path fill="context-fill" d="M6 14a1 1 0 0 1-.707-1.707L9.586 8 5.293 3.707a1 1 0 0 1 1.414-1.414l5 5a1 1 0 0 1 0 1.414l-5 5A1 1 0 0 1 6 14z"/> +</svg> diff --git a/comm/calendar/base/themes/common/widgets/calendar-invitation-panel.css b/comm/calendar/base/themes/common/widgets/calendar-invitation-panel.css new file mode 100644 index 0000000000..dde91c2061 --- /dev/null +++ b/comm/calendar/base/themes/common/widgets/calendar-invitation-panel.css @@ -0,0 +1,135 @@ +/* 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/. */ +@import url("chrome://global/skin/in-content/common.css"); + +:host(calendar-invitation-panel) { + background-color: Field; + width: auto; + border: 1px solid var(--splitter-color); +} + +:host(calendar-invitation-panel) .notificationbox-stack { + width: 100%; + padding: 10px 20px; +} + +:host(calendar-invitation-panel) .notificationbox-stack > notification-message { + margin: 0; +} + +.calendar-invitation-panel-wrapper { + display: flex; + padding: 10px 20px; +} + +.calendar-invitation-panel-details { + padding: 10px 20px; + display: flex; + flex-direction: column; +} + +.calendar-invitation-panel-title { + margin-bottom: 5px; + display: flex; + justify-content: center; +} + +.calendar-invitation-panel-title > h1 { + font-size: 1.4rem; + font-weight: 800; + margin: 0; +} + +.calendar-invitation-panel-response-buttons { + margin-inline-start: auto; +} + +.calendar-invitation-panel-response-buttons button { + min-height: 2.5em; + font-size: .8em; +} + +.calendar-invitation-panel-details-footer:not([hidden]) { + flex-grow: 2; + display: flex; + align-items: baseline; + padding: 10px 20px; +} + +.calendar-invitation-panel-props { + margin: 1.5em 0px; +} + +.calendar-invitation-panel-props > dt, +.calendar-invitation-panel-props > dd { + display: inline-block; +} + +.calendar-invitation-panel-props th, .calendar-invitation-panel-props td { + vertical-align: top; + padding: 3px 0; +} + +.calendar-invitation-panel-props th { + text-align: end; + padding-inline-end: 1em; +} + +.calendar-invitation-panel-props td.content { + overflow-y: auto; + max-width: 28em; + word-break: break-word; +} + +calendar-invitation-interval { + display: inline-block; +} + +.calendar-invitation-panel-partstat-breakdown:before { + content: "(" +} + +.calendar-invitation-panel-partstat-breakdown:after { + content: ")" +} + +.calendar-invitation-panel-partstat-summary + +.calendar-invitation-panel-partstat-summary { + margin-inline-start: 0.5em; +} + +.calendar-invitation-panel-partstat-summary-total { + margin-inline-end: 0.5em; +} + +.calendar-invitation-panel-list { + list-style: none; + padding: 0; + margin: 0; +} + +.calendar-invitation-panel-list li { + display: flex; + align-items: center; + gap: 3px; +} + +.calendar-invitation-panel-list li img { + width: 16px; + height: 16px; +} + +.calendar-invitation-panel-list li span.removed { + text-decoration: line-through; +} + +calendar-invitation-change-indicator:not([hidden]) { + border-radius: var(--button-border-radius); + margin-inline-end: 3px; + margin-block: 2px; + padding-inline: 7px; + background-color: rgba(0, 0, 0, 0.1); + box-shadow: inset 0 0 0 1px transparent; + display: inline-block; +} diff --git a/comm/calendar/base/themes/common/widgets/calendar-minidate.css b/comm/calendar/base/themes/common/widgets/calendar-minidate.css new file mode 100644 index 0000000000..50a9eac4cd --- /dev/null +++ b/comm/calendar/base/themes/common/widgets/calendar-minidate.css @@ -0,0 +1,36 @@ +/* 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/. */ +@import url("chrome://global/skin/in-content/common.css"); + +:host(calendar-minidate) { + display: block; + border: 1px solid var(--splitter-color); + align-self: center; +} + +.calendar-minidate-header { + padding: 1px 30px; + text-align: center; + font-weight: 500; + font-size: 1.5rem; + background-color: var(--viewTodayLabelBackground); + color: var(--viewTodayLabelColor); +} + +.calendar-minidate-body { + padding: 1px 30px; + text-align: center; + background-color: Field; +} + +.calendar-minidate-day { + font-weight: 700; + font-size: 2rem; + display: block; + color: var(--viewMonthDayBoxLabelColor); +} + +.calendar-minidate-year { + font-size: 1.2rem; +} diff --git a/comm/calendar/base/themes/common/widgets/calendar-widgets.css b/comm/calendar/base/themes/common/widgets/calendar-widgets.css new file mode 100644 index 0000000000..4f9c85bdc0 --- /dev/null +++ b/comm/calendar/base/themes/common/widgets/calendar-widgets.css @@ -0,0 +1,388 @@ +/* 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 { + --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; +} + +.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); +} diff --git a/comm/calendar/base/themes/common/widgets/images/drag-center.svg b/comm/calendar/base/themes/common/widgets/images/drag-center.svg new file mode 100644 index 0000000000..acb6deb807 --- /dev/null +++ b/comm/calendar/base/themes/common/widgets/images/drag-center.svg @@ -0,0 +1,9 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="36" height="15" stroke="#fff" fill="none"> + <path stroke-width="3" stroke-opacity=".8" d="M31.5 3v9M27 7.5h9M0 7.5h8"/> + <path stroke="#aaa" d="M1 7.5h6M28 7.5h7M31.5 4v7"/> + <circle r="6.5" cy="7.5" cx="18" stroke-width="2" stroke-opacity=".8"/> + <circle r="5.5" cy="7.5" cx="18" stroke="#4c4c4c" stroke-width="1.5" stroke-opacity=".5"/> +</svg> diff --git a/comm/calendar/base/themes/common/widgets/images/nav-arrow.svg b/comm/calendar/base/themes/common/widgets/images/nav-arrow.svg new file mode 100644 index 0000000000..db02016c56 --- /dev/null +++ b/comm/calendar/base/themes/common/widgets/images/nav-arrow.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"> + <path fill="context-fill" d="M9 6a1 1 0 0 0-.293-.707l-3-3a1 1 0 0 0-1.414 1.414L6.586 6 4.293 8.293a1 1 0 0 0 1.414 1.414l3-3A1 1 0 0 0 9 6z"/> +</svg> diff --git a/comm/calendar/base/themes/common/widgets/images/nav-today.svg b/comm/calendar/base/themes/common/widgets/images/nav-today.svg new file mode 100644 index 0000000000..d9b2fb6083 --- /dev/null +++ b/comm/calendar/base/themes/common/widgets/images/nav-today.svg @@ -0,0 +1,7 @@ +<!-- 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/. --> + +<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"> + <circle cx="6" cy="6" r="4" style="fill:none;stroke:context-fill;stroke-width:2.25;" /> +</svg> diff --git a/comm/calendar/base/themes/common/widgets/images/view-navigation.svg b/comm/calendar/base/themes/common/widgets/images/view-navigation.svg new file mode 100644 index 0000000000..847378327c --- /dev/null +++ b/comm/calendar/base/themes/common/widgets/images/view-navigation.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> + <path fill="context-fill" d="M6 14a1 1 0 0 1-.707-1.707L9.586 8 5.293 3.707a1 1 0 0 1 1.414-1.414l5 5a1 1 0 0 1 0 1.414l-5 5A1 1 0 0 1 6 14z"/> +</svg> diff --git a/comm/calendar/base/themes/common/widgets/minimonth.css b/comm/calendar/base/themes/common/widgets/minimonth.css new file mode 100644 index 0000000000..28c26e4b6f --- /dev/null +++ b/comm/calendar/base/themes/common/widgets/minimonth.css @@ -0,0 +1,385 @@ +/* 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/. */ + +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(--color-blue-60); + --mmDaySelectedBackground: var(--color-blue-10); + --mmDaySelectedBorderColor: var(--color-blue-50); + --mmDaySelectedTodayBackground: var(--color-blue-10); + --mmDaySelectedTodayBorderColor: var(--color-blue-50); + --mmDayBorderRadius: 3px; + --mmDayPadding: 4px; + --mmDayBusyColor: var(--color-blue-50); + --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; + --mmDaySelectedColor: var(--color-ink-10); + --mmDaySelectedBackground: color-mix(in srgb, var(--color-blue-40) 20%, transparent); + --mmDaySelectedBorderColor: var(--color-blue-50); + --mmDaySelectedTodayBackground: color-mix(in srgb, var(--color-blue-40) 30%, transparent); + --mmDaySelectedTodayBorderColor: var(--color-blue-50); + --mmDayWeekColor: var(--color-ink-40); + } +} + +@media (prefers-contrast) { + calendar-minimonth:not(:-moz-lwtheme) { + --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:active, + .button.minimonth-nav-btn:hover, + .button.minimonth-nav-btn:focus, + .button.minimonth-nav-btn:enabled:is(:hover, :focus-visible, :active) { + background-color: var(--color-gray-60); + } +} + +@media (prefers-contrast) { + .button.minimonth-nav-btn:not(:-moz-lwtheme):active, + .button.minimonth-nav-btn:not(:-moz-lwtheme):hover, + .button.minimonth-nav-btn:not(:-moz-lwtheme):focus, + .button.minimonth-nav-btn:not(:-moz-lwtheme):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); +} |
