diff options
Diffstat (limited to '')
7 files changed, 493 insertions, 0 deletions
diff --git a/comm/suite/themes/modern/shared/datetimeinputpickers.css b/comm/suite/themes/modern/shared/datetimeinputpickers.css new file mode 100644 index 0000000000..510a19d98b --- /dev/null +++ b/comm/suite/themes/modern/shared/datetimeinputpickers.css @@ -0,0 +1,438 @@ +/* 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/. */ + +/* + * - Arrows and the month+year toggle at the top are now styled as + * buttons - properties for buttons were mostly replaced with + * rulesets copied from modern's button.css. + * + * - Other colors changed to match those used in modern. */ + +:root { + --font-size-default: 1.1rem; + --spinner-width: 3rem; + --spinner-margin-top-bottom: 0.4rem; + --spinner-item-height: 2.4rem; + --spinner-item-margin-bottom: 0.1rem; + --spinner-button-height: 1.2rem; + --colon-width: 2rem; + --day-period-spacing-width: 1rem; + --calendar-width: 23.1rem; + --date-picker-item-height: 2.5rem; + --date-picker-item-width: 3.3rem; + --nav-arrow-button-width: 2.8rem; + + /* Used for selected and hovered items */ + --border-radius: 2px; + + --font-color: #000000; + + /* hovered items: colors from menu.css */ + --fill-color: #424f63; + --hover-font-color: #FFFFFF; + + /* --today-fill-color is var(--mmDayTodayBackground) from lightning, + see chrome://calendar-common/skin/widgets/minimonth.css */ + --today-fill-color: #dfeaf4; + --today-border: 0.1rem solid #000000; + + /* currently selected/chosen item */ + --selected-font-color: #FFFFFF; + --selected-fill-color: #0996F8; + + /* from button.css */ + --button-font-color: #000000; + --button-fill-color: #AAB6C4; + --button-font-color-active: #FFFFFF; + --button-fill-color-active: #90A1B3; + + --weekday-header-font-color: #6C6C6C; + --weekend-header-font-color: rgb(218, 78, 68); + + --weekend-font-color: rgb(218, 78, 68); + --weekday-outside-font-color: rgb(153, 153, 153); + --weekend-outside-font-color: rgb(255, 152, 143); + + --weekday-disabled-font-color: rgba(25, 25, 25, 0.2); + --weekend-disabled-font-color: rgba(218, 78, 68, 0.2); + --disabled-fill-color: rgba(235, 235, 235, 0.8); + + --disabled-opacity: 0.2; +} + +html { + font-size: 10px; +} + +body { + margin: 0; + color: var(--font-color); + font: message-box; + font-size: var(--font-size-default); +} +/* The two following rulesets (buttons and active buttons) were copied + from modern's button.css (with modifications). */ +button { + margin: 2px; + border: 3px solid; + -moz-border-top-colors: #000000 #BBC6D1 #B1BBC9; + -moz-border-right-colors: #000000 #A2AEBB #A7B4C1; + -moz-border-bottom-colors: #000000 #97A6B6 #9DAAB9; + -moz-border-left-colors: #000000 #BBC6D1 #B1BBC9; + border-radius: 2px; + background-color: var(--button-fill-color); + background-clip: padding-box; + color: var(--button-font-color); + font: menu; +} + +button:active, +button.active { + -moz-border-top-colors: #000000 #8290A5 #899AAC; + -moz-border-right-colors: #000000 #8290A5 #899AAC; + -moz-border-bottom-colors: #000000 #8290A5 #899AAC; + -moz-border-left-colors: #000000 #8290A5 #899AAC; + background-color: var(--button-fill-color-active); + color: var(--button-font-color-active); +} + + +.nav { + display: flex; + width: var(--calendar-width); + height: 2.4rem; + margin-bottom: 0.8rem; + justify-content: space-between; +} + +.nav > button { + width: var(--nav-arrow-button-width); + height: var(--date-picker-item-height); + -moz-context-properties: fill; + fill: var(--button-font-color); +} + +.nav > button.active { + fill: var(--button-font-color-active); +} + +.nav > button.prev, +.nav > button.next:dir(rtl) { + background-image: url("chrome://global/skin/icons/calendar-arrow-left.svg"); + background-repeat: no-repeat; + background-position: 50% 50%; +} + +.nav > button.next, +.nav > button.prev:dir(rtl) { + background-image: url("chrome://global/skin/icons/calendar-arrow-right.svg"); + background-repeat: no-repeat; + background-position: 50% 50%; +} + +.month-year-container { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + top: 0; + /* .nav arrow buttons have a width of --nav-arrow-button-width as well + as 2px margins. The following three properties take this into + account to avoid overlapping these buttons and to align them + vertically. */ + left: var(--nav-arrow-button-width); + right: var(--nav-arrow-button-width); + margin: 2px 4px; + height: var(--date-picker-item-height); + z-index: 10; +} + +button.month-year { + font-size: 1.3rem; + padding-inline-start: 0.5rem; + padding-inline-end: 1.1rem; + min-height: var(--date-picker-item-height); + width: 100%; +} + + +button.month-year::after { + position: absolute; + content: ""; + width: 2.6rem; + height: 1.6rem; + background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%; + -moz-context-properties: fill; + fill: var(--button-font-color); +} + +button.month-year.active::after { + background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%; + fill: var(--button-font-color-active); +} + +.month-year-view { + position: absolute; + z-index: 5; + padding-top: 3.2rem; + top: 0; + left: 0; + bottom: 0; + width: var(--calendar-width); + background: #DDE3EB; + opacity: 1; +/* transition: opacity 0.15s; */ +} + +.month-year-view.hidden { + visibility: hidden; + opacity: 0; +} + +.month-year-view > .spinner-container { + width: 5.5rem; + margin: 0 0.5rem; +} + +/*.month-year-view .spinner { + transform: scaleY(1); + transform-origin: top; + transition: transform 0.15s; +} + +.month-year-view.hidden .spinner { + transform: scaleY(0); + transition: none; +} + +.month-year-view .spinner > div { + transform: scaleY(1); + transition: transform 0.15s; +} + +.month-year-view.hidden .spinner > div { + transform: scaleY(2.5); + transition: none; +}*/ + +.order-month-year > #spinner-month, +.order-year-month > #spinner-year { + order: 1; +} + +.order-month-year > #spinner-year, +.order-year-month > #spinner-month { + order: 2; +} + +.calendar-container { + cursor: default; + display: flex; + flex-direction: column; + width: var(--calendar-width); +} + +.week-header { + display: flex; +} + +.week-header > div { + color: var(--weekday-header-font-color); +} + +.week-header > div.weekend { + color: var(--weekend-header-font-color); +} + +.days-viewport { + height: 15rem; + overflow: hidden; + position: relative; +} + +.days-view { + position: absolute; + display: flex; + flex-wrap: wrap; + flex-direction: row; +} + +.week-header > div, +.days-view > div { + align-items: center; + display: flex; + height: var(--date-picker-item-height); + position: relative; + justify-content: center; + width: var(--date-picker-item-width); +} + +.days-view > .outside { + color: var(--weekday-outside-font-color); +} + +.days-view > .weekend { + color: var(--weekend-font-color); +} + +.days-view > .weekend.outside { + color: var(--weekend-outside-font-color); +} + +.days-view > .out-of-range, +.days-view > .off-step { + color: var(--weekday-disabled-font-color); + background: var(--disabled-fill-color); +} + +.days-view > .out-of-range.weekend, +.days-view > .off-step.weekend { + color: var(--weekend-disabled-font-color); +} + +.days-view > .today { + font-weight: bold; +} + +.days-view > .out-of-range::before, +.days-view > .off-step::before { + display: none; +} + +.days-view > div:hover::before, +.days-view > .select::before, +.days-view > .today::before { + top: 5%; + bottom: 5%; + left: 5%; + right: 5%; +} + +#time-picker, +.month-year-view { + display: flex; + flex-direction: row; + justify-content: center; +} + +.spinner-container { + display: flex; + flex-direction: column; + width: var(--spinner-width); +} + +.spinner-container > button { + height: var(--spinner-button-height); + -moz-context-properties: fill; + fill: var(--button-font-color); +} + +.spinner-container > button.active { + fill: var(--button-font-color-active); +} + +.spinner-container > button.up { + background-image: url("chrome://global/skin/icons/spinner-arrow-up.svg"); + background-repeat: no-repeat; + background-position: 50% 50%; +} + +.spinner-container > button.down { + background-image: url("chrome://global/skin/icons/spinner-arrow-down.svg"); + background-repeat: no-repeat; + background-position: 50% 50%; +} + +.spinner-container.hide-buttons > button { + visibility: hidden; +} + +.spinner-container > .spinner { + position: relative; + width: 100%; + margin: var(--spinner-margin-top-bottom) 0; + cursor: default; + overflow-y: scroll; + scroll-snap-type: mandatory; + scroll-snap-points-y: repeat(100%); +} + +.spinner-container > .spinner > div { + box-sizing: border-box; + position: relative; + text-align: center; + padding: calc((var(--spinner-item-height) - var(--font-size-default)) / 2) 0; + margin-bottom: var(--spinner-item-margin-bottom); + height: var(--spinner-item-height); + -moz-user-select: none; + scroll-snap-coordinate: 0 0; +} + +.spinner-container > .spinner > div::before, +.calendar-container .days-view > div::before { + position: absolute; + top: 5%; + bottom: 5%; + left: 5%; + right: 5%; + z-index: -10; + border-radius: var(--border-radius); +} + +.calendar-container .days-view > div:hover, +.spinner-container > .spinner > div:hover { + color: var(--hover-font-color); +} +.calendar-container .days-view > div.today:hover::before { + background: var(--fill-color); + color: var(--hover-font-color); +} +.spinner-container > .spinner > div:hover::before, +.calendar-container .days-view > div:hover::before, +.spinner-container > .spinner > div.selection:hover::before, +.calendar-container .days-view > div.selection:hover::before{ + background: var(--fill-color); + color: var(--hover-font-color); + content: ""; +} + +.calendar-container .days-view > div.today::before { + background: var(--today-fill-color); + border: var(--today-border); + content: ""; +} + +.spinner-container > .spinner:not(.scrolling) > div.selection, +.calendar-container .days-view > div.selection { + color: var(--selected-font-color); +} + +.spinner-container > .spinner > div.selection::before, +.calendar-container .days-view > div.selection::before { + background: var(--selected-fill-color); + border: none; + content: ""; +} + +.spinner-container > .spinner > div.disabled::before, +.spinner-container > .spinner.scrolling > div.selection::before, +.spinner-container > .spinner.scrolling > div:hover::before { + display: none; +} + +.spinner-container > .spinner > div.disabled { + opacity: var(--disabled-opacity); +} + +.colon { + display: flex; + justify-content: center; + align-items: center; + width: var(--colon-width); + margin-bottom: 0.3rem; +} + +.spacer { + width: var(--day-period-spacing-width); +} diff --git a/comm/suite/themes/modern/shared/datetimepopup.css b/comm/suite/themes/modern/shared/datetimepopup.css new file mode 100644 index 0000000000..52f6fc7a2d --- /dev/null +++ b/comm/suite/themes/modern/shared/datetimepopup.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/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +panel[type="arrow"][side="top"], +panel[type="arrow"][side="bottom"] { + margin-left: 0; + margin-right: 0; +} diff --git a/comm/suite/themes/modern/shared/icons/calendar-arrow-left.svg b/comm/suite/themes/modern/shared/icons/calendar-arrow-left.svg new file mode 100644 index 0000000000..3ff50f1e85 --- /dev/null +++ b/comm/suite/themes/modern/shared/icons/calendar-arrow-left.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="14" height="14" viewBox="0 0 14 14"> + <path fill="context-fill" d="M9.2 0L11 1.7 5.5 7 11 12.3 9.2 14 2 7"/> +</svg> diff --git a/comm/suite/themes/modern/shared/icons/calendar-arrow-right.svg b/comm/suite/themes/modern/shared/icons/calendar-arrow-right.svg new file mode 100644 index 0000000000..0b4978713f --- /dev/null +++ b/comm/suite/themes/modern/shared/icons/calendar-arrow-right.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="14" height="14" viewBox="0 0 14 14"> + <path fill="context-fill" d="M4.8 14L3 12.3 8.5 7 3 1.7 4.8 0 12 7"/> +</svg> diff --git a/comm/suite/themes/modern/shared/icons/input-clear.svg b/comm/suite/themes/modern/shared/icons/input-clear.svg new file mode 100644 index 0000000000..0abaaf9b1f --- /dev/null +++ b/comm/suite/themes/modern/shared/icons/input-clear.svg @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"> + <style> + .st0 { + fill: #858585; + } + .st1 { + fill: #FFFFFF; + } + </style> + <circle id="Combined-Shape" class="st0" cx="6" cy="6" r="6"/> + <polygon id="Close_Button_-_Normal-path" class="st1" points="9,8.1 8.1,9 6,6.9 3.9,9 3,8.1 5.1,6 3,3.9 3.9,3 6,5.1 8.1,3 9,3.9 6.9,6"/> +</svg> diff --git a/comm/suite/themes/modern/shared/icons/spinner-arrow-down.svg b/comm/suite/themes/modern/shared/icons/spinner-arrow-down.svg new file mode 100644 index 0000000000..420f8a3f2d --- /dev/null +++ b/comm/suite/themes/modern/shared/icons/spinner-arrow-down.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="10" height="6" viewBox="0 0 10 6"> + <path fill="context-fill" d="M0 1l1-1 4 4 4-4 1 1-5 5"/> +</svg> diff --git a/comm/suite/themes/modern/shared/icons/spinner-arrow-up.svg b/comm/suite/themes/modern/shared/icons/spinner-arrow-up.svg new file mode 100644 index 0000000000..6ce9923b48 --- /dev/null +++ b/comm/suite/themes/modern/shared/icons/spinner-arrow-up.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="10" height="6" viewBox="0 0 10 6"> + <path fill="context-fill" d="M0 5l1 1 4-4 4 4 1-1-5-5"/> +</svg> |
