From 30c683d986ffec16096c39f473feec23aed7b18d Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Wed, 14 Feb 2018 08:26:47 +0100 Subject: Bug 1317600: [DateTimePicker] Spinner arrow buttons shouldn't depend on find bar resources --- toolkit/themes/shared/icons/spinner-arrows.svg | 13 +++++++++++++ toolkit/themes/shared/jar.inc.mn | 1 + toolkit/themes/shared/timepicker.css | 4 ++-- 3 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 toolkit/themes/shared/icons/spinner-arrows.svg (limited to 'toolkit/themes') diff --git a/toolkit/themes/shared/icons/spinner-arrows.svg b/toolkit/themes/shared/icons/spinner-arrows.svg new file mode 100644 index 000000000..a8ba72d6b --- /dev/null +++ b/toolkit/themes/shared/icons/spinner-arrows.svg @@ -0,0 +1,13 @@ + + + + + + + diff --git a/toolkit/themes/shared/jar.inc.mn b/toolkit/themes/shared/jar.inc.mn index 9c3d86a40..cfb4e99af 100644 --- a/toolkit/themes/shared/jar.inc.mn +++ b/toolkit/themes/shared/jar.inc.mn @@ -27,6 +27,7 @@ toolkit.jar: skin/classic/global/icons/input-clear.svg (../../shared/icons/input-clear.svg) skin/classic/global/icons/loading.png (../../shared/icons/loading.png) skin/classic/global/icons/loading@2x.png (../../shared/icons/loading@2x.png) + skin/classic/global/icons/spinner-arrows.svg (../../shared/icons/spinner-arrows.svg) skin/classic/global/icons/warning.svg (../../shared/incontent-icons/warning.svg) skin/classic/global/icons/blocked.svg (../../shared/incontent-icons/blocked.svg) skin/classic/global/alerts/alert-common.css (../../shared/alert-common.css) diff --git a/toolkit/themes/shared/timepicker.css b/toolkit/themes/shared/timepicker.css index e8d081b30..ca4955748 100644 --- a/toolkit/themes/shared/timepicker.css +++ b/toolkit/themes/shared/timepicker.css @@ -68,11 +68,11 @@ body { } .spinner-container > button.up { - mask: url("chrome://global/skin/icons/find-arrows.svg#glyph-find-previous") no-repeat 50% 50%; + background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%; } .spinner-container > button.down { - mask: url("chrome://global/skin/icons/find-arrows.svg#glyph-find-next") no-repeat 50% 50%; + background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%; } .spinner-container.hide-buttons > button { -- cgit v1.2.3 From 8fd370c9f39b4bc1d78cc0f763bf4e99dfd0c382 Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Wed, 14 Feb 2018 12:32:46 +0100 Subject: Bug 1283385: Implement UI for --- toolkit/themes/shared/datetimeinputpickers.css | 291 +++++++++++++++++++++++++ toolkit/themes/shared/jar.inc.mn | 2 +- toolkit/themes/shared/timepicker.css | 153 ------------- 3 files changed, 292 insertions(+), 154 deletions(-) create mode 100644 toolkit/themes/shared/datetimeinputpickers.css delete mode 100644 toolkit/themes/shared/timepicker.css (limited to 'toolkit/themes') diff --git a/toolkit/themes/shared/datetimeinputpickers.css b/toolkit/themes/shared/datetimeinputpickers.css new file mode 100644 index 000000000..df93bc3a1 --- /dev/null +++ b/toolkit/themes/shared/datetimeinputpickers.css @@ -0,0 +1,291 @@ +/* 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 { + --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.4rem; + + --border: 0.1rem solid #D6D6D6; + --border-radius: 0.3rem; + + --font-color: #191919; + --fill-color: #EBEBEB; + + --selected-font-color: #FFFFFF; + --selected-fill-color: #0996F8; + + --button-font-color: #858585; + --button-font-color-hover: #4D4D4D; + --button-font-color-active: #191919; + + --weekday-font-color: #6C6C6C; + --weekday-outside-font-color: #6C6C6C; + --weekend-font-color: #DA4E44; + --weekend-outside-font-color: #FF988F; + + --disabled-opacity: 0.2; +} + +html { + font-size: 10px; +} + +body { + margin: 0; + color: var(--font-color); + font: message-box; + font-size: var(--font-size-default); +} + +.nav { + display: flex; + width: var(--calendar-width); + height: 2.4rem; + margin-bottom: 0.8rem; + justify-content: space-between; +} + +.nav button { + -moz-appearance: none; + background: none; + border: none; + width: 3rem; + height: var(--date-picker-item-height); +} + +.month-year { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + top: 0; + left: 3rem; + width: 17.1rem; + height: var(--date-picker-item-height); + z-index: 10; +} + +.month-year-view { + position: absolute; + z-index: 5; + padding-top: 3.2rem; + top: 0; + left: 0; + bottom: 0; + width: var(--calendar-width); + background: window; + 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; +} + +.calendar-container { + cursor: default; + display: flex; + flex-direction: column; + width: var(--calendar-width); +} + +.week-header { + display: flex; +} + +.week-header > div { + color: var(--weekday-font-color); +} + +.week-header > div.weekend { + color: var(--weekend-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); + margin: 0.05rem 0.15rem; + position: relative; + justify-content: center; + width: 3rem; +} + +.days-view > div.outside { + color: var(--weekday-outside-font-color); +} + +.days-view > div.weekend { + color: var(--weekend-font-color); +} + +.days-view > div.weekend.outside { + color: var(--weekend-outside-font-color); +} + +#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 { + -moz-appearance: none; + border: none; + background: none; + background-color: var(--button-font-color); + height: var(--spinner-button-height); +} + +.spinner-container > button:hover { + background-color: var(--button-font-color-hover); +} + +.spinner-container > button.active { + background-color: var(--button-font-color-active); +} + +.spinner-container > button.up { + background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%; +} + +.spinner-container > button.down { + background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 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:hover::before, +.calendar-container .days-view > div:hover::before { + background: var(--fill-color); + border: var(--border); + border-radius: var(--border-radius); + content: ""; + position: absolute; + top: 0%; + bottom: 0%; + left: 0%; + right: 0%; + z-index: -10; +} + +.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; + border-radius: var(--border-radius); + content: ""; + position: absolute; + top: 0%; + bottom: 0%; + left: 0%; + right: 0%; + z-index: -10; +} + +.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); +} \ No newline at end of file diff --git a/toolkit/themes/shared/jar.inc.mn b/toolkit/themes/shared/jar.inc.mn index cfb4e99af..e7f1f7c67 100644 --- a/toolkit/themes/shared/jar.inc.mn +++ b/toolkit/themes/shared/jar.inc.mn @@ -21,7 +21,7 @@ toolkit.jar: skin/classic/global/aboutSupport.css (../../shared/aboutSupport.css) skin/classic/global/appPicker.css (../../shared/appPicker.css) skin/classic/global/config.css (../../shared/config.css) - skin/classic/global/timepicker.css (../../shared/timepicker.css) + skin/classic/global/datetimeinputpickers.css (../../shared/datetimeinputpickers.css) skin/classic/global/icons/find-arrows.svg (../../shared/icons/find-arrows.svg) skin/classic/global/icons/info.svg (../../shared/incontent-icons/info.svg) skin/classic/global/icons/input-clear.svg (../../shared/icons/input-clear.svg) diff --git a/toolkit/themes/shared/timepicker.css b/toolkit/themes/shared/timepicker.css deleted file mode 100644 index ca4955748..000000000 --- a/toolkit/themes/shared/timepicker.css +++ /dev/null @@ -1,153 +0,0 @@ -/* 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 { - --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; - - --border: 0.1rem solid #D6D6D6; - --border-radius: 0.3rem; - - --font-color: #191919; - --fill-color: #EBEBEB; - - --selected-font-color: #FFFFFF; - --selected-fill-color: #0996F8; - - --button-font-color: #858585; - --button-font-color-hover: #4D4D4D; - --button-font-color-active: #191919; - - --disabled-opacity: 0.2; -} - -html { - font-size: 10px; -} - -body { - margin: 0; - color: var(--font-color); - font-size: var(--font-size-default); -} - -#time-picker { - display: flex; - flex-direction: row; - justify-content: space-around; -} - -.spinner-container { - font-family: sans-serif; - display: flex; - flex-direction: column; - width: var(--spinner-width); -} - -.spinner-container > button { - -moz-appearance: none; - border: none; - background: none; - background-color: var(--button-font-color); - height: var(--spinner-button-height); -} - -.spinner-container > button:hover { - background-color: var(--button-font-color-hover); -} - -.spinner-container > button.active { - background-color: var(--button-font-color-active); -} - -.spinner-container > button.up { - background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%; -} - -.spinner-container > button.down { - background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 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:hover::before { - background: var(--fill-color); - border: var(--border); - border-radius: var(--border-radius); - content: ""; - position: absolute; - top: 0%; - bottom: 0%; - left: 0%; - right: 0%; - z-index: -10; -} - -.spinner-container > .spinner:not(.scrolling) > div.selection { - color: var(--selected-font-color); -} - -.spinner-container > .spinner > div.selection::before { - background: var(--selected-fill-color); - border: none; - border-radius: var(--border-radius); - content: ""; - position: absolute; - top: 0%; - bottom: 0%; - left: 0%; - right: 0%; - z-index: -10; -} - -.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); -} \ No newline at end of file -- cgit v1.2.3 From 260e399a1ff7756cda9b6320a801f1198b27604a Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Wed, 14 Feb 2018 13:24:40 +0100 Subject: Bug 1323109: [DateTimePicker] Date time picker popup does not open near input box --- toolkit/themes/shared/datetimepopup.css | 11 +++++++++++ toolkit/themes/shared/jar.inc.mn | 1 + 2 files changed, 12 insertions(+) create mode 100644 toolkit/themes/shared/datetimepopup.css (limited to 'toolkit/themes') diff --git a/toolkit/themes/shared/datetimepopup.css b/toolkit/themes/shared/datetimepopup.css new file mode 100644 index 000000000..52f6fc7a2 --- /dev/null +++ b/toolkit/themes/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/toolkit/themes/shared/jar.inc.mn b/toolkit/themes/shared/jar.inc.mn index e7f1f7c67..39acff1c6 100644 --- a/toolkit/themes/shared/jar.inc.mn +++ b/toolkit/themes/shared/jar.inc.mn @@ -22,6 +22,7 @@ toolkit.jar: skin/classic/global/appPicker.css (../../shared/appPicker.css) skin/classic/global/config.css (../../shared/config.css) skin/classic/global/datetimeinputpickers.css (../../shared/datetimeinputpickers.css) + skin/classic/global/datetimepopup.css (../../shared/datetimepopup.css) skin/classic/global/icons/find-arrows.svg (../../shared/icons/find-arrows.svg) skin/classic/global/icons/info.svg (../../shared/incontent-icons/info.svg) skin/classic/global/icons/input-clear.svg (../../shared/icons/input-clear.svg) -- cgit v1.2.3 From c87dbe6922ec79f988744f5aab0cde1a166292e6 Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Wed, 14 Feb 2018 13:38:47 +0100 Subject: Bug 1325922: [DateTimePicker] Add arrows svg file and style month-year button for date picker --- toolkit/themes/shared/datetimeinputpickers.css | 64 +++++++++++++++++++++---- toolkit/themes/shared/icons/calendar-arrows.svg | 13 +++++ toolkit/themes/shared/jar.inc.mn | 1 + 3 files changed, 70 insertions(+), 8 deletions(-) create mode 100644 toolkit/themes/shared/icons/calendar-arrows.svg (limited to 'toolkit/themes') diff --git a/toolkit/themes/shared/datetimeinputpickers.css b/toolkit/themes/shared/datetimeinputpickers.css index df93bc3a1..741f15281 100644 --- a/toolkit/themes/shared/datetimeinputpickers.css +++ b/toolkit/themes/shared/datetimeinputpickers.css @@ -16,6 +16,7 @@ --border: 0.1rem solid #D6D6D6; --border-radius: 0.3rem; + --border-active-color: #B1B1B1; --font-color: #191919; --fill-color: #EBEBEB; @@ -26,6 +27,7 @@ --button-font-color: #858585; --button-font-color-hover: #4D4D4D; --button-font-color-active: #191919; + --button-fill-color-active: #D4D4D4; --weekday-font-color: #6C6C6C; --weekday-outside-font-color: #6C6C6C; @@ -46,6 +48,12 @@ body { font-size: var(--font-size-default); } +button { + -moz-appearance: none; + background: none; + border: none; +} + .nav { display: flex; width: var(--calendar-width); @@ -54,15 +62,29 @@ body { justify-content: space-between; } -.nav button { - -moz-appearance: none; - background: none; - border: none; +.nav > button { width: 3rem; height: var(--date-picker-item-height); + background-color: var(--button-font-color); +} + +.nav > button:hover { + background-color: var(--button-font-color-hover); +} + +.nav > button.active { + background-color: var(--button-font-color-active); } -.month-year { +.nav > button.left { + background: url("chrome://global/skin/icons/calendar-arrows.svg#left") no-repeat 50% 50%; +} + +.nav > button.right { + background: url("chrome://global/skin/icons/calendar-arrows.svg#right") no-repeat 50% 50%; +} + +.month-year-container { position: absolute; display: flex; justify-content: center; @@ -74,6 +96,35 @@ body { z-index: 10; } +button.month-year { + font-size: 1.3rem; + border: var(--border); + border-radius: 0.3rem; + padding: 0.2rem 2.6rem 0.2rem 1.2rem; +} + +button.month-year:hover { + background: var(--fill-color); +} + +button.month-year.active { + border-color: var(--border-active-color); + background: var(--button-fill-color-active); +} + +button.month-year::after { + position: absolute; + content: ""; + width: 2.6rem; + height: 1.6rem; + background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%; + background-color: var(--button-font-color); +} + +button.month-year.active::after { + background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%; +} + .month-year-view { position: absolute; z-index: 5; @@ -187,9 +238,6 @@ body { } .spinner-container > button { - -moz-appearance: none; - border: none; - background: none; background-color: var(--button-font-color); height: var(--spinner-button-height); } diff --git a/toolkit/themes/shared/icons/calendar-arrows.svg b/toolkit/themes/shared/icons/calendar-arrows.svg new file mode 100644 index 000000000..858676f55 --- /dev/null +++ b/toolkit/themes/shared/icons/calendar-arrows.svg @@ -0,0 +1,13 @@ + + + + + + + diff --git a/toolkit/themes/shared/jar.inc.mn b/toolkit/themes/shared/jar.inc.mn index 39acff1c6..bdfca2a05 100644 --- a/toolkit/themes/shared/jar.inc.mn +++ b/toolkit/themes/shared/jar.inc.mn @@ -23,6 +23,7 @@ toolkit.jar: skin/classic/global/config.css (../../shared/config.css) skin/classic/global/datetimeinputpickers.css (../../shared/datetimeinputpickers.css) skin/classic/global/datetimepopup.css (../../shared/datetimepopup.css) + skin/classic/global/icons/calendar-arrows.svg (../../shared/icons/calendar-arrows.svg) skin/classic/global/icons/find-arrows.svg (../../shared/icons/find-arrows.svg) skin/classic/global/icons/info.svg (../../shared/incontent-icons/info.svg) skin/classic/global/icons/input-clear.svg (../../shared/icons/input-clear.svg) -- cgit v1.2.3 From e25430117a67f5c898e5e9388ebd44b185d469ab Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Fri, 30 Mar 2018 12:17:17 +0200 Subject: moebius#92: HTML - input - datetime + native in moebius: Bug 1317600: https://bugzilla.mozilla.org/show_bug.cgi?id=1317600 A note - not implemented: Bug 1282768: https://bugzilla.mozilla.org/show_bug.cgi?id=1282768 *.css: filter: url("chrome://global/skin/filters.svg#fill");, fill: Bug 1283385: https://bugzilla.mozilla.org/show_bug.cgi?id=1283385 Bug 1323109: https://bugzilla.mozilla.org/show_bug.cgi?id=1323109 Bug 1314544: https://bugzilla.mozilla.org/show_bug.cgi?id=1314544 Bug 1286182: https://bugzilla.mozilla.org/show_bug.cgi?id=1286182 Bug 1325922: https://bugzilla.mozilla.org/show_bug.cgi?id=1325922 A note - not implemented: Bug 1282768: https://bugzilla.mozilla.org/show_bug.cgi?id=1282768 *.css: filter: url("chrome://global/skin/filters.svg#fill");, fill: Bug 1320225: https://bugzilla.mozilla.org/show_bug.cgi?id=1320225 Bug 1341190: https://bugzilla.mozilla.org/show_bug.cgi?id=1341190 --- toolkit/themes/shared/datetimeinputpickers.css | 90 ++++++++++++++++++-------- 1 file changed, 63 insertions(+), 27 deletions(-) (limited to 'toolkit/themes') diff --git a/toolkit/themes/shared/datetimeinputpickers.css b/toolkit/themes/shared/datetimeinputpickers.css index 741f15281..a0c046f6f 100644 --- a/toolkit/themes/shared/datetimeinputpickers.css +++ b/toolkit/themes/shared/datetimeinputpickers.css @@ -12,7 +12,8 @@ --colon-width: 2rem; --day-period-spacing-width: 1rem; --calendar-width: 23.1rem; - --date-picker-item-height: 2.4rem; + --date-picker-item-height: 2.5rem; + --date-picker-item-width: 3.3rem; --border: 0.1rem solid #D6D6D6; --border-radius: 0.3rem; @@ -21,6 +22,8 @@ --font-color: #191919; --fill-color: #EBEBEB; + --today-fill-color: rgb(212, 212, 212); + --selected-font-color: #FFFFFF; --selected-fill-color: #0996F8; @@ -29,10 +32,16 @@ --button-font-color-active: #191919; --button-fill-color-active: #D4D4D4; - --weekday-font-color: #6C6C6C; - --weekday-outside-font-color: #6C6C6C; - --weekend-font-color: #DA4E44; - --weekend-outside-font-color: #FF988F; + --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; } @@ -181,11 +190,11 @@ button.month-year.active::after { } .week-header > div { - color: var(--weekday-font-color); + color: var(--weekday-header-font-color); } .week-header > div.weekend { - color: var(--weekend-font-color); + color: var(--weekend-header-font-color); } .days-viewport { @@ -206,24 +215,49 @@ button.month-year.active::after { align-items: center; display: flex; height: var(--date-picker-item-height); - margin: 0.05rem 0.15rem; position: relative; justify-content: center; - width: 3rem; + width: var(--date-picker-item-width); } -.days-view > div.outside { +.days-view > .outside { color: var(--weekday-outside-font-color); } -.days-view > div.weekend { +.days-view > .weekend { color: var(--weekend-font-color); } -.days-view > div.weekend.outside { +.days-view > .weekend.outside { color: var(--weekend-outside-font-color); } +.days-view > .out-of-range { + color: var(--weekday-disabled-font-color); + background: var(--disabled-fill-color); +} + +.days-view > .out-of-range.weekend { + color: var(--weekend-disabled-font-color); +} + +.days-view > .today { + font-weight: bold; +} + +.days-view > .out-of-range::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; @@ -283,22 +317,31 @@ button.month-year.active::after { 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); +} + .spinner-container > .spinner > div:hover::before, .calendar-container .days-view > div:hover::before { background: var(--fill-color); border: var(--border); - border-radius: var(--border-radius); content: ""; - position: absolute; - top: 0%; - bottom: 0%; - left: 0%; - right: 0%; - z-index: -10; +} + +.calendar-container .days-view > div.today::before { + background: var(--today-fill-color); + content: ""; } .spinner-container > .spinner:not(.scrolling) > div.selection, -.calendar-container .days-view > div.selection { +.calendar-container .days-view > div.selection:not(.out-of-range) { color: var(--selected-font-color); } @@ -306,14 +349,7 @@ button.month-year.active::after { .calendar-container .days-view > div.selection::before { background: var(--selected-fill-color); border: none; - border-radius: var(--border-radius); content: ""; - position: absolute; - top: 0%; - bottom: 0%; - left: 0%; - right: 0%; - z-index: -10; } .spinner-container > .spinner > div.disabled::before, -- cgit v1.2.3 From 6f1fcab2d81caedd96d9404386bc92f9884c30ce Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Fri, 30 Mar 2018 20:56:33 +0200 Subject: Bug 1363672 - Add step support to date picker --- toolkit/themes/shared/datetimeinputpickers.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'toolkit/themes') diff --git a/toolkit/themes/shared/datetimeinputpickers.css b/toolkit/themes/shared/datetimeinputpickers.css index a0c046f6f..42f2bc517 100644 --- a/toolkit/themes/shared/datetimeinputpickers.css +++ b/toolkit/themes/shared/datetimeinputpickers.css @@ -232,12 +232,14 @@ button.month-year.active::after { color: var(--weekend-outside-font-color); } -.days-view > .out-of-range { +.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 > .out-of-range.weekend, +.days-view > .off-step.weekend { color: var(--weekend-disabled-font-color); } @@ -245,7 +247,8 @@ button.month-year.active::after { font-weight: bold; } -.days-view > .out-of-range::before { +.days-view > .out-of-range::before, +.days-view > .off-step::before { display: none; } @@ -341,7 +344,7 @@ button.month-year.active::after { } .spinner-container > .spinner:not(.scrolling) > div.selection, -.calendar-container .days-view > div.selection:not(.out-of-range) { +.calendar-container .days-view > div.selection { color: var(--selected-font-color); } -- cgit v1.2.3 From bbfe249fd06ffa7b7084755578c06f43fe0fe474 Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Sat, 31 Mar 2018 07:14:59 +0200 Subject: A nicer button for class="month-year::after" A small replacement for: Bug 1282768: https://bugzilla.mozilla.org/show_bug.cgi?id=1282768 --- toolkit/themes/shared/datetimeinputpickers.css | 1 - 1 file changed, 1 deletion(-) (limited to 'toolkit/themes') diff --git a/toolkit/themes/shared/datetimeinputpickers.css b/toolkit/themes/shared/datetimeinputpickers.css index 42f2bc517..f0c4315e5 100644 --- a/toolkit/themes/shared/datetimeinputpickers.css +++ b/toolkit/themes/shared/datetimeinputpickers.css @@ -127,7 +127,6 @@ button.month-year::after { width: 2.6rem; height: 1.6rem; background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%; - background-color: var(--button-font-color); } button.month-year.active::after { -- cgit v1.2.3 From 05085ceebe2adb13ee9b54650338f0a14bce8fc9 Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Thu, 26 Apr 2018 23:30:48 +0200 Subject: [PALEMOON] [frontend vs backend] Fix of non-existent CSS files Issue #121 --- toolkit/themes/linux/global/inContentUI.css | 41 +++++++ toolkit/themes/linux/global/jar.mn | 1 + toolkit/themes/osx/global/inContentUI.css | 144 +++++++++++++++++++++++ toolkit/themes/osx/global/jar.mn | 1 + toolkit/themes/windows/global/inContentUI.css | 159 ++++++++++++++++++++++++++ toolkit/themes/windows/global/jar.mn | 1 + 6 files changed, 347 insertions(+) create mode 100644 toolkit/themes/linux/global/inContentUI.css create mode 100644 toolkit/themes/osx/global/inContentUI.css create mode 100644 toolkit/themes/windows/global/inContentUI.css (limited to 'toolkit/themes') diff --git a/toolkit/themes/linux/global/inContentUI.css b/toolkit/themes/linux/global/inContentUI.css new file mode 100644 index 000000000..afcef9274 --- /dev/null +++ b/toolkit/themes/linux/global/inContentUI.css @@ -0,0 +1,41 @@ +/* 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/. */ + +/* + * The default namespace for this file is XUL. Be sure to prefix rules that + * are applicable to both XUL and HTML with '*|'. + */ +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* Page background */ +*|*:root { + -moz-appearance: none; + padding: 18px; + background-color: Window; + background-image: /* Texture */ + url("chrome://global/skin/inContentUI/background-texture.png"); + color: WindowText; +} + +/* Use the new in-content colors for #contentAreaDownloadsView. After landing + of bug 989469 the colors can be moved to *|*:root */ +*|*#contentAreaDownloadsView { + background: #f1f1f1; + color: #424e5a; +} + +html|html { + font: message-box; +} + +/* Content */ +*|*.main-content { + /* Needed to allow the radius to clip the inner content, see bug 595656 */ + overflow: hidden; + background-color: -moz-Field; + color: -moz-FieldText; + border: 1px solid ThreeDShadow; + border-radius: 5px; +} diff --git a/toolkit/themes/linux/global/jar.mn b/toolkit/themes/linux/global/jar.mn index b0d0b9ddb..0efc8c5cf 100644 --- a/toolkit/themes/linux/global/jar.mn +++ b/toolkit/themes/linux/global/jar.mn @@ -16,6 +16,7 @@ toolkit.jar: skin/classic/global/findBar.css skin/classic/global/global.css skin/classic/global/groupbox.css + skin/classic/global/inContentUI.css skin/classic/global/listbox.css skin/classic/global/menu.css skin/classic/global/menulist.css diff --git a/toolkit/themes/osx/global/inContentUI.css b/toolkit/themes/osx/global/inContentUI.css new file mode 100644 index 000000000..17e2e6ae3 --- /dev/null +++ b/toolkit/themes/osx/global/inContentUI.css @@ -0,0 +1,144 @@ +/* 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/. */ + +%include shared.inc + +/* + * The default namespace for this file is XUL. Be sure to prefix rules that + * are applicable to both XUL and HTML with '*|'. + */ +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* Page background */ +*|*:root { + -moz-appearance: none; + padding: 18px; + background-image: /* Texture */ + url("chrome://global/skin/inContentUI/background-texture.png"), + /* Gradient */ + linear-gradient(#ADB5C2, #BFC6D1); +} + +/* Use the new in-content colors for #contentAreaDownloadsView. After landing + of bug 989469 the colors can be moved to *|*:root */ +*|*#contentAreaDownloadsView { + background: #f1f1f1; + color: #424e5a; +} + +html|html { + font: message-box; +} + +/* Content */ +*|*.main-content { + /* Needed to allow the radius to clip the inner content, see bug 595656 */ + overflow: hidden; + background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.05)); + border: 1px solid rgba(50, 65, 92, 0.4); + border-radius: 5px; +} + +/* Buttons */ +*|button, +menulist, +colorpicker[type="button"] { + -moz-appearance: none; + padding: 1px 4px; + min-width: 60px; + border-radius: 3px; + border: 1px solid rgba(60,73,97,0.5); + box-shadow: inset 0 1px rgba(255,255,255,0.25), 0 1px rgba(255,255,255,0.25); + background-color: transparent; + background-image: linear-gradient(rgba(255,255,255,0.45), rgba(255,255,255,0.2)); + background-clip: padding-box; + color: #252F3B; + text-shadow: @loweredShadow@; +} + +button:-moz-focusring > .button-box, +menulist:-moz-focusring:not([open="true"]) > .menulist-label-box, +colorpicker[type="button"]:-moz-focusring:not([open="true"]) > .colorpicker-button-colorbox { + outline: 1px dotted #252F3B; +} + +html|button[disabled], +button[disabled="true"], +menulist[disabled="true"], +colorpicker[type="button"][disabled="true"] { + opacity: 0.8; + color: #505050; +} + +html|button:not([disabled]):active:hover, +button:not([disabled="true"]):active:hover, +menulist[open="true"]:not([disabled="true"]), +colorpicker[type="button"][open="true"]:not([disabled="true"]) { + box-shadow: inset 0 1px 3px rgba(0,0,0,.2), 0 1px rgba(255,255,255,0.25); + background-image: linear-gradient(rgba(45,54,71,0.3), rgba(45,54,71,0.1)); + border-color: rgba(60,73,97,0.7); +} + +menulist { + -moz-padding-end: 0; + margin-left: 5px; + margin-right: 5px; +} + +/* Tweak margins so the focus ring is in the right place. */ +menulist > .menulist-label-box { + -moz-margin-end: 3px; + margin-top: 1px; +} + +menulist > .menulist-label-box > .menulist-label { + margin-top: 0px !important; + margin-bottom: 0px !important; +} + +menulist > .menulist-dropmarker { + -moz-appearance: none; + display: -moz-box; + background: transparent; + border: none; + -moz-border-start: 1px solid rgba(60,73,97,0.5); + margin-top: -1px; + margin-bottom: -1px; +} + +colorpicker[type="button"] { + margin: 1px 5px 2px 5px; + padding: 3px; + height: 25px; +} + +spinbuttons { + -moz-appearance: none; +} + +spinbuttons > .spinbuttons-box > .spinbuttons-button { + min-width: 12px; +} + +.spinbuttons-button > .button-box > .button-text { + display: none; +} + +.spinbuttons-button[disabled="true"] > .button-box > .button-icon { + opacity: 0.5; +} + +spinbuttons > .spinbuttons-box > .spinbuttons-up { + list-style-image: url("chrome://global/skin/arrow/arrow-up.gif"); + border-bottom-width: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +spinbuttons > .spinbuttons-box > .spinbuttons-down { + list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif"); + border-top-left-radius: 0; + border-top-right-radius: 0; +} diff --git a/toolkit/themes/osx/global/jar.mn b/toolkit/themes/osx/global/jar.mn index 79bb062ab..88ecb997d 100644 --- a/toolkit/themes/osx/global/jar.mn +++ b/toolkit/themes/osx/global/jar.mn @@ -21,6 +21,7 @@ toolkit.jar: * skin/classic/global/findBar.css * skin/classic/global/global.css skin/classic/global/groupbox.css + skin/classic/global/inContentUI.css skin/classic/global/linkTree.css skin/classic/global/listbox.css skin/classic/global/menu.css diff --git a/toolkit/themes/windows/global/inContentUI.css b/toolkit/themes/windows/global/inContentUI.css new file mode 100644 index 000000000..a3bca7b06 --- /dev/null +++ b/toolkit/themes/windows/global/inContentUI.css @@ -0,0 +1,159 @@ +/* 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/. */ + +/* + * The default namespace for this file is XUL. Be sure to prefix rules that + * are applicable to both XUL and HTML with '*|'. + */ +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* Page background */ +*|*:root { + -moz-appearance: none; + padding: 18px; + background-repeat: repeat; + color: -moz-dialogText; + background-color: -moz-dialog; + background-image: /* Texture */ + url("chrome://global/skin/inContentUI/background-texture.png"); +} + +html|html { + font: message-box; +} + +@media (-moz-windows-default-theme) and (-moz-os-version: windows-vista), + (-moz-windows-default-theme) and (-moz-os-version: windows-win7) { + *|*:root { + color: #000; + background-color: #CCD9EA; + } +} + +@media (-moz-windows-glass) { + *|*:root { + /* Blame shorlander for this monstrosity. */ + background-image: /* Side gradients */ + linear-gradient(to right, + rgba(255,255,255,0.2), transparent 40%, + transparent 60%, rgba(255,255,255,0.2)), + /* Aero-style light beams */ + -moz-linear-gradient(left 32deg, + /* First light beam */ + transparent 19.5%, rgba(255,255,255,0.1) 20%, + rgba(255,255,255,0.1) 21.5%, rgba(255,255,255,0.2) 22%, + rgba(255,255,255,0.2) 25.5%, rgba(255,255,255,0.1) 26%, + rgba(255,255,255,0.1) 27.5%, transparent 28%, + /* Second light beam */ + transparent 49.5%, rgba(255,255,255,0.1) 50%, + rgba(255,255,255,0.1) 52.5%, rgba(255,255,255,0.2) 53%, + rgba(255,255,255,0.2) 54.5%, rgba(255,255,255,0.1) 55%, + rgba(255,255,255,0.1) 57.5%, transparent 58%, + /* Third light beam */ + transparent 87%, rgba(255,255,255,0.2) 90%), + /* Texture */ + url("chrome://global/skin/inContentUI/background-texture.png"); + } +} + +/* Use the new in-content colors for #contentAreaDownloadsView. After landing + of bug 989469 the colors can be moved to *|*:root */ +*|*#contentAreaDownloadsView { + background: #f1f1f1; + color: #424e5a; +} + +/* Content */ +*|*.main-content { + /* Needed to allow the radius to clip the inner content, see bug 595656 */ + overflow: hidden; + background-color: rgba(255, 255, 255, 0.35); + background-image: linear-gradient(rgba(255, 255, 255, 0), + rgba(255, 255, 255, 0.75)); + border: 1px solid #C3CEDF; +} + +%ifdef XP_WIN +@media (-moz-os-version: windows-vista), + (-moz-os-version: windows-win7) { +%endif + *|*.main-content { + border-radius: 5px; + } +%ifdef XP_WIN +} +%endif + +@media (-moz-windows-glass) { + /* Buttons */ + *|button, + menulist, + colorpicker[type="button"] { + -moz-appearance: none; + color: black; + padding: 0 5px; + background: linear-gradient(rgba(251, 252, 253, 0.95), transparent 49%, + rgba(211, 212, 213, 0.45) 51%, rgba(225, 226, 229, 0.3)); + background-clip: padding-box; + border-radius: 3px; + border: 1px solid rgba(31, 64, 100, 0.4); + border-top-color: rgba(31, 64, 100, 0.3); + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset, + 0 0 2px 1px rgba(255, 255, 255, 0.25) inset; + } + + menulist { + -moz-padding-end: 0; + } + + colorpicker[type="button"]:-moz-focusring:not([open="true"]) > .colorpicker-button-colorbox { + outline: 1px dotted ThreeDDarkShadow; + } + + html|button[disabled], + button[disabled="true"], + menulist[disabled="true"], + colorpicker[type="button"][disabled="true"] { + -moz-border-top-colors: rgba(31, 64, 100, 0.3) !important; + -moz-border-right-colors: rgba(31, 64, 100, 0.4) !important; + -moz-border-bottom-colors: rgba(31, 64, 100, 0.4) !important; + -moz-border-left-colors: rgba(31, 64, 100, 0.4) !important; + opacity: 0.8; + color: #505050; + } + + html|button:not([disabled]):active:hover, + button:not([disabled="true"]):active:hover, + menulist[open="true"]:not([disabled="true"]), + colorpicker[type="button"][open="true"]:not([disabled="true"]) { + background-color: rgba(61, 76, 92, 0.2); + border-color: rgba(39, 53, 68, 0.5); + box-shadow: 0 0 3px 1px rgba(39, 53, 68, 0.2) inset; + } + + button > .button-box { + padding: 1px !important; + } + + spinbuttons > .spinbuttons-box > .spinbuttons-button { + border-radius: 0; + padding: 0 4px; + } + + spinbuttons > .spinbuttons-box > .spinbuttons-up { + list-style-image: url("chrome://global/skin/arrow/arrow-up.gif"); + border-bottom-width: 0; + } + + spinbuttons > .spinbuttons-box > .spinbuttons-down { + list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif"); + } +} + +colorpicker[type="button"] { + margin: 1px 5px 2px 5px; + padding: 3px; + height: 25px; +} diff --git a/toolkit/themes/windows/global/jar.mn b/toolkit/themes/windows/global/jar.mn index a6ccbd71d..7ed2ca27c 100644 --- a/toolkit/themes/windows/global/jar.mn +++ b/toolkit/themes/windows/global/jar.mn @@ -27,6 +27,7 @@ toolkit.jar: skin/classic/global/console/itemSelected.png (console/itemSelected.png) skin/classic/global/findBar.css * skin/classic/global/global.css + skin/classic/global/inContentUI.css skin/classic/global/listbox.css skin/classic/global/netError.css skin/classic/global/numberbox.css -- cgit v1.2.3 From c5e5dfd06be1a890cfe18016bd9739523c08e516 Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Fri, 27 Apr 2018 05:42:32 +0200 Subject: [PALEMOON] [frontend vs backend] Fix of non-existent CSS files (follow up - use preprocessing for OSX and windows) Issue #121 --- toolkit/themes/osx/global/jar.mn | 2 +- toolkit/themes/windows/global/jar.mn | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'toolkit/themes') diff --git a/toolkit/themes/osx/global/jar.mn b/toolkit/themes/osx/global/jar.mn index 88ecb997d..9407ccee5 100644 --- a/toolkit/themes/osx/global/jar.mn +++ b/toolkit/themes/osx/global/jar.mn @@ -21,7 +21,7 @@ toolkit.jar: * skin/classic/global/findBar.css * skin/classic/global/global.css skin/classic/global/groupbox.css - skin/classic/global/inContentUI.css +* skin/classic/global/inContentUI.css skin/classic/global/linkTree.css skin/classic/global/listbox.css skin/classic/global/menu.css diff --git a/toolkit/themes/windows/global/jar.mn b/toolkit/themes/windows/global/jar.mn index 7ed2ca27c..8c5d5de5a 100644 --- a/toolkit/themes/windows/global/jar.mn +++ b/toolkit/themes/windows/global/jar.mn @@ -27,7 +27,7 @@ toolkit.jar: skin/classic/global/console/itemSelected.png (console/itemSelected.png) skin/classic/global/findBar.css * skin/classic/global/global.css - skin/classic/global/inContentUI.css +* skin/classic/global/inContentUI.css skin/classic/global/listbox.css skin/classic/global/netError.css skin/classic/global/numberbox.css -- cgit v1.2.3 From 4f82391dfe524e526a0940717a98dd4d0e420d07 Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Sat, 5 May 2018 10:46:33 +0200 Subject: [follow up] moebius#154: Notifications - user settings - the immediate duration of the alert https://github.com/MoonchildProductions/moebius/pull/154 https://github.com/MoonchildProductions/UXP/pull/132 --- toolkit/themes/shared/alert-common.css | 2 -- 1 file changed, 2 deletions(-) (limited to 'toolkit/themes') diff --git a/toolkit/themes/shared/alert-common.css b/toolkit/themes/shared/alert-common.css index 010e89393..17510c0db 100644 --- a/toolkit/themes/shared/alert-common.css +++ b/toolkit/themes/shared/alert-common.css @@ -15,14 +15,12 @@ } #alertBox[animate][clicked] { - animation-duration: .6s; animation-name: alert-clicked-animation; } /* This is used if the close button is clicked before the animation has finished. */ #alertBox[animate][closing] { - animation-duration: .6s; animation-name: alert-closing-animation; } -- cgit v1.2.3 From 3ac23df787f21eb51e39aaa3c34756b8c32a75cb Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Tue, 15 May 2018 21:04:46 +0200 Subject: [PALEMOON] Fix: The settings icon in the notification is missing (copy some files from webextensions) Issue #121 Pull #273 --- .../themes/shared/extensions/alerticon-error.svg | 6 ++++++ .../shared/extensions/alerticon-info-negative.svg | 6 ++++++ .../shared/extensions/alerticon-info-positive.svg | 6 ++++++ .../themes/shared/extensions/alerticon-warning.svg | 6 ++++++ .../themes/shared/extensions/extensionGeneric.svg | 12 ++++++++++++ toolkit/themes/shared/extensions/utilities.svg | 21 +++++++++++++-------- 6 files changed, 49 insertions(+), 8 deletions(-) create mode 100644 toolkit/themes/shared/extensions/alerticon-error.svg create mode 100644 toolkit/themes/shared/extensions/alerticon-info-negative.svg create mode 100644 toolkit/themes/shared/extensions/alerticon-info-positive.svg create mode 100644 toolkit/themes/shared/extensions/alerticon-warning.svg create mode 100644 toolkit/themes/shared/extensions/extensionGeneric.svg (limited to 'toolkit/themes') diff --git a/toolkit/themes/shared/extensions/alerticon-error.svg b/toolkit/themes/shared/extensions/alerticon-error.svg new file mode 100644 index 000000000..cb883e16e --- /dev/null +++ b/toolkit/themes/shared/extensions/alerticon-error.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/extensions/alerticon-info-negative.svg b/toolkit/themes/shared/extensions/alerticon-info-negative.svg new file mode 100644 index 000000000..733f8571a --- /dev/null +++ b/toolkit/themes/shared/extensions/alerticon-info-negative.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/extensions/alerticon-info-positive.svg b/toolkit/themes/shared/extensions/alerticon-info-positive.svg new file mode 100644 index 000000000..031190bce --- /dev/null +++ b/toolkit/themes/shared/extensions/alerticon-info-positive.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/extensions/alerticon-warning.svg b/toolkit/themes/shared/extensions/alerticon-warning.svg new file mode 100644 index 000000000..2b403220e --- /dev/null +++ b/toolkit/themes/shared/extensions/alerticon-warning.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/extensions/extensionGeneric.svg b/toolkit/themes/shared/extensions/extensionGeneric.svg new file mode 100644 index 000000000..28c2f7ba3 --- /dev/null +++ b/toolkit/themes/shared/extensions/extensionGeneric.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/toolkit/themes/shared/extensions/utilities.svg b/toolkit/themes/shared/extensions/utilities.svg index fd911001b..8bf24458c 100644 --- a/toolkit/themes/shared/extensions/utilities.svg +++ b/toolkit/themes/shared/extensions/utilities.svg @@ -1,11 +1,8 @@ - + + - + + + -- cgit v1.2.3 From b70d884598e1e14b99190e1e5c349553ff59849b Mon Sep 17 00:00:00 2001 From: Ascrod <32915892+Ascrod@users.noreply.github.com> Date: Mon, 7 May 2018 19:45:46 -0400 Subject: Initial updates for Reader View. --- toolkit/themes/shared/aboutReader.css | 626 +++++++++++++++++++-- toolkit/themes/shared/aboutReaderContent.css | 177 ------ toolkit/themes/shared/aboutReaderControls.css | 388 ------------- toolkit/themes/shared/jar.inc.mn | 5 +- toolkit/themes/shared/narrate.css | 195 ++++++- toolkit/themes/shared/narrateControls.css | 185 ------ .../shared/reader/RM-Content-Width-Minus-42x16.svg | 5 +- .../shared/reader/RM-Content-Width-Plus-44x16.svg | 5 +- .../shared/reader/RM-Line-Height-Minus-38x14.svg | 5 +- .../shared/reader/RM-Line-Height-Plus-38x24.svg | 5 +- .../shared/reader/RM-Type-Controls-Arrow.svg | 16 +- 11 files changed, 801 insertions(+), 811 deletions(-) delete mode 100644 toolkit/themes/shared/aboutReaderContent.css delete mode 100644 toolkit/themes/shared/aboutReaderControls.css delete mode 100644 toolkit/themes/shared/narrateControls.css (limited to 'toolkit/themes') diff --git a/toolkit/themes/shared/aboutReader.css b/toolkit/themes/shared/aboutReader.css index 49436de84..4dbf11f6d 100644 --- a/toolkit/themes/shared/aboutReader.css +++ b/toolkit/themes/shared/aboutReader.css @@ -2,23 +2,13 @@ * 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/. */ +/* Avoid adding ID selector rules in this style sheet, since they could + * inadvertently match elements in the article content. */ + body { padding: 64px 51px; } -@media print { - #container { - max-width: 100% !important; - font-size: 14px !important; - font-family: Georgia, "Times New Roman", serif !important; - } - - body { - padding-top: 0px; - padding-bottom: 0px; - } -} - body.loaded { transition: color 0.4s, background-color 0.4s; } @@ -56,80 +46,80 @@ body.serif .remove-button { font-family: Georgia, "Times New Roman", serif; } -#container { +.container { max-width: 30em; margin: 0 auto; } -#container.font-size1 { +.container.font-size1 { font-size: 12px; } -#container.font-size2 { +.container.font-size2 { font-size: 14px; } -#container.font-size3 { +.container.font-size3 { font-size: 16px; } -#container.font-size4 { +.container.font-size4 { font-size: 18px; } -#container.font-size5 { +.container.font-size5 { font-size: 20px; } -#container.font-size6 { +.container.font-size6 { font-size: 22px; } -#container.font-size7 { +.container.font-size7 { font-size: 24px; } -#container.font-size8 { +.container.font-size8 { font-size: 26px; } -#container.font-size9 { +.container.font-size9 { font-size: 28px; } -#container.content-width1 { +.container.content-width1 { max-width: 20em; } -#container.content-width2 { +.container.content-width2 { max-width: 25em; } -#container.content-width3 { +.container.content-width3 { max-width: 30em; } -#container.content-width4 { +.container.content-width4 { max-width: 35em; } -#container.content-width5 { +.container.content-width5 { max-width: 40em; } -#container.content-width6 { +.container.content-width6 { max-width: 45em; } -#container.content-width7 { +.container.content-width7 { max-width: 50em; } -#container.content-width8 { +.container.content-width8 { max-width: 55em; } -#container.content-width9 { +.container.content-width9 { max-width: 60em; } @@ -176,3 +166,575 @@ body:not(.loaded) .toolbar:-moz-locale-dir(ltr) { body:not(.loaded) .toolbar:-moz-locale-dir(rtl) { transform: translateX(100%); } + +.light-button { + color: #333333; + background-color: #ffffff; +} + +.dark-button { + color: #eeeeee; + background-color: #333333; +} + +.sepia-button { + color: #5b4636; + background-color: #f4ecd8; +} + +.sans-serif-button { + font-family: Helvetica, Arial, sans-serif; +} + +.serif-button { + font-family: Georgia, "Times New Roman", serif; +} + +/* Loading/error message */ + +.reader-message { + margin-top: 40px; + display: none; + text-align: center; + width: 100%; + font-size: 0.9em; +} + +/* Header */ + +.header { + text-align: start; + display: none; +} + +.domain { + font-size: 0.9em; + line-height: 1.48em; + padding-bottom: 4px; + font-family: Helvetica, Arial, sans-serif; + text-decoration: none; + border-bottom: 1px solid; + color: #0095dd; +} + +.header > h1 { + font-size: 1.6em; + line-height: 1.25em; + width: 100%; + margin: 30px 0; + padding: 0; +} + +.header > .credits { + font-size: 0.9em; + line-height: 1.48em; + margin: 0 0 10px 0; + padding: 0; + font-style: italic; +} + +.header > .meta-data { + font-size: 0.65em; + margin: 0 0 15px 0; +} + +/*======= Controls toolbar =======*/ + +.toolbar { + font-family: Helvetica, Arial, sans-serif; + position: fixed; + height: 100%; + top: 0; + left: 0; + margin: 0; + padding: 0; + list-style: none; + background-color: #fbfbfb; + -moz-user-select: none; + border-right: 1px solid #b5b5b5; + z-index: 1; +} + +.button { + display: block; + background-size: 24px 24px; + background-repeat: no-repeat; + color: #333; + background-color: #fbfbfb; + height: 40px; + padding: 0; +} + +.toolbar .button { + width: 40px; + background-position: center; + margin-right: -1px; + border-top: 0; + border-left: 0; + border-right: 1px solid #b5b5b5; + border-bottom: 1px solid #c1c1c1; +} + +.button[hidden] { + display: none; +} + +.dropdown { + text-align: center; + list-style: none; + margin: 0; + padding: 0; +} + +.dropdown li { + margin: 0; + padding: 0; +} + +/*======= Popup =======*/ + +.dropdown-popup { + min-width: 300px; + text-align: start; + position: absolute; + left: 48px; /* offset to account for toolbar width */ + z-index: 1000; + background-color: #fbfbfb; + visibility: hidden; + border-radius: 4px; + border: 1px solid #b5b5b5; + border-bottom-width: 0; + box-shadow: 0 1px 3px #c1c1c1; +} + +.keep-open .dropdown-popup { + z-index: initial; +} + +.dropdown-popup > hr { + display: none; +} + +.open > .dropdown-popup { + visibility: visible; +} + +.dropdown-arrow { + position: absolute; + top: 30px; /* offset arrow from top of popup */ + left: -16px; + width: 16px; + height: 24px; + background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg"); + display: block; +} + +/*======= Font style popup =======*/ + +.font-type-buttons, +.font-size-buttons, +.color-scheme-buttons, +.content-width-buttons, +.line-height-buttons { + display: flex; + flex-direction: row; +} + +.font-type-buttons > button:first-child { + border-top-left-radius: 3px; +} +.font-type-buttons > button:last-child { + border-top-right-radius: 3px; +} +.color-scheme-buttons > button:first-child { + border-bottom-left-radius: 3px; +} +.color-scheme-buttons > button:last-child { + border-bottom-right-radius: 3px; +} + +.font-type-buttons > button, +.font-size-buttons > button, +.color-scheme-buttons > button, +.content-width-buttons > button, +.line-height-buttons > button { + text-align: center; + border: 0; +} + +.font-type-buttons > button, +.font-size-buttons > button, +.content-width-buttons > button, +.line-height-buttons > button { + width: 50%; + background-color: transparent; + border-left: 1px solid #B5B5B5; + border-bottom: 1px solid #B5B5B5; +} + +.color-scheme-buttons > button { + width: 33.33%; + font-size: 14px; +} + +.color-scheme-buttons > .dark-button { + margin-top: -1px; + height: 61px; +} + +.font-type-buttons > button:first-child, +.font-size-buttons > button:first-child, +.content-width-buttons > button:first-child, +.line-height-buttons > button:first-child { + border-left: 0; +} + +.font-type-buttons > button { + display: inline-block; + font-size: 62px; + height: 100px; +} + +.font-size-buttons > button, +.color-scheme-buttons > button, +.content-width-buttons > button, +.line-height-buttons > button { + height: 60px; +} + +.font-type-buttons > button:active:hover, +.font-type-buttons > button.selected, +.color-scheme-buttons > button:active:hover, +.color-scheme-buttons > button.selected { + box-shadow: inset 0 -3px 0 0 #fc6420; +} + +.font-type-buttons > button:active:hover, +.font-type-buttons > button.selected { + border-bottom: 1px solid #FC6420; +} + +/* Make the serif button content the same size as the sans-serif button content. */ +.font-type-buttons > button > .description { + color: #666; + font-size: 12px; + margin-top: -5px; +} + +/* Font sizes are different per-platform, so we need custom CSS to line them up. */ +%ifdef XP_MACOSX +.font-type-buttons > .sans-serif-button > .name { + margin-top: 10px; +} + +.font-type-buttons > .sans-serif-button > .description { + margin-top: -4px; +} + +.font-type-buttons > .serif-button > .name { + font-size: 63px; +} +%elifdef XP_WIN +.font-type-buttons > .sans-serif-button > .name { + margin-top: 2px; +} + +.font-type-buttons > .sans-serif-button > .description { + margin-top: -4px; +} + +.font-type-buttons > .serif-button > .name { + font-size: 63px; +} +%else +.font-type-buttons > .sans-serif-button > .name { + margin-top: 5px; +} + +.font-type-buttons > .sans-serif-button > .description { + margin-top: -8px; +} + +.font-type-buttons > .serif-button > .name { + font-size: 70px; +} +%endif + +.button:hover, +.font-size-buttons > button:hover, +.font-type-buttons > button:hover, +.content-width-buttons > button:hover, +.line-height-buttons > button:hover { + background-color: #ebebeb; +} + +.dropdown.open, +.button:active, +.font-size-buttons > button:active, +.font-size-buttons > button.selected, +.content-width-buttons > button:active, +.content-width-buttons > button.selected, +.line-height-buttons > button:active, +.line-height-buttons > button.selected { + background-color: #dadada; +} + +/* Only used on Android */ +.font-size-sample { + display: none; +} + +.minus-button, +.plus-button, +.content-width-minus-button, +.content-width-plus-button, +.line-height-minus-button, +.line-height-plus-button { + background-color: transparent; + border: 0; + background-size: 18px 18px; + background-repeat: no-repeat; + background-position: center; +} + +/*======= Toolbar icons =======*/ + +.close-button { + background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close"); + height: 68px; + background-position: center 8px; +} + +.close-button:hover { + background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); + background-color: #d94141; + border-bottom: 1px solid #d94141; + border-right: 1px solid #d94141; +} + +.close-button:hover:active { + background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); + background-color: #AE2325; + border-bottom: 1px solid #AE2325; + border-right: 1px solid #AE2325; +} + +.style-button { + background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg"); +} + +.minus-button { + background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg"); +} + +.plus-button { + background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg"); +} + +.content-width-minus-button { + background-size: 42px 16px; + background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg"); +} + +.content-width-plus-button { + background-size: 44px 16px; + background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg"); +} + +.line-height-minus-button { + background-size: 34px 14px; + background-image: url("chrome://global/skin/reader/RM-Line-Height-Minus-38x14.svg"); +} + +.line-height-plus-button { + background-size: 34px 24px; + background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg"); +} + +@media print { + .toolbar { + display: none !important; + } +} + +/*======= Article content =======*/ + +/* Note that any class names from the original article that we want to match on + * must be added to CLASSES_TO_PRESERVE in ReaderMode.jsm, so that + * Readability.js doesn't strip them out */ + +.moz-reader-content { + display: none; + font-size: 1em; + line-height: 1.6em; +} + +.moz-reader-content.line-height1 { + line-height: 1em; +} + +.moz-reader-content.line-height2 { + line-height: 1.2em; +} + +.moz-reader-content.line-height3 { + line-height: 1.4em; +} + +.moz-reader-content.line-height4 { + line-height: 1.6em; +} + +.moz-reader-content.line-height5 { + line-height: 1.8em; +} + +.moz-reader-content.line-height6 { + line-height: 2.0em; +} + +.moz-reader-content.line-height7 { + line-height: 2.2em; +} + +.moz-reader-content.line-height8 { + line-height: 2.4em; +} + +.moz-reader-content.line-height9 { + line-height: 2.6em; +} + +@media print { + .moz-reader-content p, + .moz-reader-content code, + .moz-reader-content pre, + .moz-reader-content blockquote, + .moz-reader-content ul, + .moz-reader-content ol, + .moz-reader-content li, + .moz-reader-content figure, + .moz-reader-content .wp-caption { + margin: 0 0 10px 0 !important; + padding: 0 !important; + } +} + +.moz-reader-content h1, +.moz-reader-content h2, +.moz-reader-content h3 { + font-weight: bold; +} + +.moz-reader-content h1 { + font-size: 1.6em; + line-height: 1.25em; +} + +.moz-reader-content h2 { + font-size: 1.2em; + line-height: 1.51em; +} + +.moz-reader-content h3 { + font-size: 1em; + line-height: 1.66em; +} + +.moz-reader-content a:link { + text-decoration: underline; + font-weight: normal; +} + +.moz-reader-content a:link, +.moz-reader-content a:link:hover, +.moz-reader-content a:link:active { + color: #0095dd; +} + +.moz-reader-content a:visited { + color: #c2e; +} + +.moz-reader-content * { + max-width: 100%; + height: auto; +} + +.moz-reader-content p, +.moz-reader-content p, +.moz-reader-content code, +.moz-reader-content pre, +.moz-reader-content blockquote, +.moz-reader-content ul, +.moz-reader-content ol, +.moz-reader-content li, +.moz-reader-content figure, +.moz-reader-content .wp-caption { + margin: -10px -10px 20px -10px; + padding: 10px; + border-radius: 5px; +} + +.moz-reader-content li { + margin-bottom: 0; +} + +.moz-reader-content li > ul, +.moz-reader-content li > ol { + margin-bottom: -10px; +} + +.moz-reader-content p > img:only-child, +.moz-reader-content p > a:only-child > img:only-child, +.moz-reader-content .wp-caption img, +.moz-reader-content figure img { + display: block; +} + +.moz-reader-content img[moz-reader-center] { + margin-left: auto; + margin-right: auto; +} + +.moz-reader-content .caption, +.moz-reader-content .wp-caption-text +.moz-reader-content figcaption { + font-size: 0.9em; + line-height: 1.48em; + font-style: italic; +} + +.moz-reader-content code, +.moz-reader-content pre { + white-space: pre-wrap; +} + +.moz-reader-content blockquote { + padding: 0; + padding-inline-start: 16px; +} + +.moz-reader-content ul, +.moz-reader-content ol { + padding: 0; +} + +.moz-reader-content ul { + padding-inline-start: 30px; + list-style: disc; +} + +.moz-reader-content ol { + padding-inline-start: 30px; + list-style: decimal; +} + +/* Hide elements with common "hidden" class names */ +.moz-reader-content .visually-hidden, +.moz-reader-content .visuallyhidden, +.moz-reader-content .hidden, +.moz-reader-content .invisible, +.moz-reader-content .sr-only { + display: none; +} diff --git a/toolkit/themes/shared/aboutReaderContent.css b/toolkit/themes/shared/aboutReaderContent.css deleted file mode 100644 index 633391d37..000000000 --- a/toolkit/themes/shared/aboutReaderContent.css +++ /dev/null @@ -1,177 +0,0 @@ -/* 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/. */ - -#moz-reader-content { - display: none; - font-size: 1em; - line-height: 1.6em; -} - -#moz-reader-content.line-height1 { - line-height: 1em; -} - -#moz-reader-content.line-height2 { - line-height: 1.2em; -} - -#moz-reader-content.line-height3 { - line-height: 1.4em; -} - -#moz-reader-content.line-height4 { - line-height: 1.6em; -} - -#moz-reader-content.line-height5 { - line-height: 1.8em; -} - -#moz-reader-content.line-height6 { - line-height: 2.0em; -} - -#moz-reader-content.line-height7 { - line-height: 2.2em; -} - -#moz-reader-content.line-height8 { - line-height: 2.4em; -} - -#moz-reader-content.line-height9 { - line-height: 2.6em; -} - -@media print { - p, - code, - pre, - blockquote, - ul, - ol, - li, - figure, - .wp-caption { - margin: 0 0 10px 0 !important; - } -} - -h1, -h2, -h3 { - font-weight: bold; -} - -h1 { - font-size: 1.6em; - line-height: 1.25em; -} - -h2 { - font-size: 1.2em; - line-height: 1.51em; -} - -h3 { - font-size: 1em; - line-height: 1.66em; -} - -a:link { - text-decoration: underline; - font-weight: normal; -} - -a:link, -a:link:hover, -a:link:active { - color: #0095dd; -} - -a:visited { - color: #c2e; -} - -* { - max-width: 100%; - height: auto; -} - -p, -code, -pre, -blockquote, -ul, -ol, -li, -figure, -.wp-caption { - margin: -10px -10px 20px -10px; - padding: 10px; - border-radius: 5px; -} - -li { - margin-bottom: 0; -} - -li > ul, -li > ol { - margin-bottom: -10px; -} - -p > img:only-child, -p > a:only-child > img:only-child, -.wp-caption img, -figure img { - display: block; -} - -img[moz-reader-center] { - margin-left: auto; - margin-right: auto; -} - -.caption, -.wp-caption-text, -figcaption { - font-size: 0.9em; - line-height: 1.48em; - font-style: italic; -} - -code, -pre { - white-space: pre-wrap; -} - -blockquote { - padding: 0; - padding-inline-start: 16px; -} - -ul, -ol { - padding: 0; -} - -ul { - padding-inline-start: 30px; - list-style: disc; -} - -ol { - padding-inline-start: 30px; - list-style: decimal; -} - -/* Hide elements with common "hidden" class names */ -.visually-hidden, -.visuallyhidden, -.hidden, -.invisible, -.sr-only { - display: none; -} diff --git a/toolkit/themes/shared/aboutReaderControls.css b/toolkit/themes/shared/aboutReaderControls.css deleted file mode 100644 index afd65f458..000000000 --- a/toolkit/themes/shared/aboutReaderControls.css +++ /dev/null @@ -1,388 +0,0 @@ -/* 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/. */ - -.light-button { - color: #333333; - background-color: #ffffff; -} - -.dark-button { - color: #eeeeee; - background-color: #333333; -} - -.sepia-button { - color: #5b4636; - background-color: #f4ecd8; -} - -.sans-serif-button { - font-family: Helvetica, Arial, sans-serif; -} - -.serif-button { - font-family: Georgia, "Times New Roman", serif; -} - -/* Loading/error message */ - -#reader-message { - margin-top: 40px; - display: none; - text-align: center; - width: 100%; - font-size: 0.9em; -} - -/* Header */ - -.header { - text-align: start; - display: none; -} - -.domain { - font-size: 0.9em; - line-height: 1.48em; - padding-bottom: 4px; - font-family: Helvetica, Arial, sans-serif; - text-decoration: none; - border-bottom: 1px solid; - color: #0095dd; -} - -.header > h1 { - font-size: 1.6em; - line-height: 1.25em; - width: 100%; - margin: 30px 0; - padding: 0; -} - -.header > .credits { - font-size: 0.9em; - line-height: 1.48em; - margin: 0 0 30px 0; - padding: 0; - font-style: italic; -} - -/*======= Controls toolbar =======*/ - -.toolbar { - font-family: Helvetica, Arial, sans-serif; - position: fixed; - height: 100%; - top: 0; - left: 0; - margin: 0; - padding: 0; - list-style: none; - background-color: #fbfbfb; - -moz-user-select: none; - border-right: 1px solid #b5b5b5; - z-index: 1; -} - -.button { - display: block; - background-size: 24px 24px; - background-repeat: no-repeat; - color: #333; - background-color: #fbfbfb; - height: 40px; - padding: 0; -} - -.toolbar .button { - width: 40px; - background-position: center; - margin-right: -1px; - border-top: 0; - border-left: 0; - border-right: 1px solid #b5b5b5; - border-bottom: 1px solid #c1c1c1; -} - -.button[hidden] { - display: none; -} - -.dropdown { - text-align: center; - list-style: none; - margin: 0; - padding: 0; -} - -.dropdown li { - margin: 0; - padding: 0; -} - -/*======= Popup =======*/ - -.dropdown-popup { - min-width: 300px; - text-align: start; - position: absolute; - left: 48px; /* offset to account for toolbar width */ - z-index: 1000; - background-color: #fbfbfb; - visibility: hidden; - border-radius: 4px; - border: 1px solid #b5b5b5; - border-bottom-width: 0; - box-shadow: 0 1px 12px #666; -} - -.keep-open .dropdown-popup { - z-index: initial; -} - -.dropdown-popup > hr { - display: none; -} - -.open > .dropdown-popup { - visibility: visible; -} - -.dropdown-arrow { - position: absolute; - top: 30px; /* offset arrow from top of popup */ - left: -16px; - width: 24px; - height: 24px; - background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg"); - display: block; -} - -/*======= Font style popup =======*/ - -#font-type-buttons, -#font-size-buttons, -#color-scheme-buttons, -#content-width-buttons, -#line-height-buttons { - display: flex; - flex-direction: row; -} - -#font-type-buttons > button:first-child { - border-top-left-radius: 3px; -} -#font-type-buttons > button:last-child { - border-top-right-radius: 3px; -} -#color-scheme-buttons > button:first-child { - border-bottom-left-radius: 3px; -} -#color-scheme-buttons > button:last-child { - border-bottom-right-radius: 3px; -} - -#font-type-buttons > button, -#font-size-buttons > button, -#color-scheme-buttons > button, -#content-width-buttons > button, -#line-height-buttons > button { - text-align: center; - border: 0; -} - -#font-type-buttons > button, -#font-size-buttons > button, -#content-width-buttons > button, -#line-height-buttons > button { - width: 50%; - background-color: transparent; - border-left: 1px solid #B5B5B5; - border-bottom: 1px solid #B5B5B5; -} - -#color-scheme-buttons > button { - width: 33.33%; - font-size: 14px; -} - -#color-scheme-buttons > .dark-button { - margin-top: -1px; - height: 61px; -} - -#font-type-buttons > button:first-child, -#font-size-buttons > button:first-child, -#content-width-buttons > button:first-child, -#line-height-buttons > button:first-child { - border-left: 0; -} - -#font-type-buttons > button { - display: inline-block; - font-size: 62px; - height: 100px; -} - -#font-size-buttons > button, -#color-scheme-buttons > button, -#content-width-buttons > button, -#line-height-buttons > button { - height: 60px; -} - -#font-type-buttons > button:active:hover, -#font-type-buttons > button.selected, -#color-scheme-buttons > button:active:hover, -#color-scheme-buttons > button.selected { - box-shadow: inset 0 -3px 0 0 #fc6420; -} - -#font-type-buttons > button:active:hover, -#font-type-buttons > button.selected { - border-bottom: 1px solid #FC6420; -} - -/* Make the serif button content the same size as the sans-serif button content. */ -#font-type-buttons > button > .description { - color: #666; - font-size: 12px; - margin-top: -5px; -} - -/* Font sizes are different per-platform, so we need custom CSS to line them up. */ -%ifdef XP_MACOSX -#font-type-buttons > .sans-serif-button > .name { - margin-top: 10px; -} - -#font-type-buttons > .sans-serif-button > .description { - margin-top: -4px; -} - -#font-type-buttons > .serif-button > .name { - font-size: 63px; -} -%elifdef XP_WIN -#font-type-buttons > .sans-serif-button > .name { - margin-top: 2px; -} - -#font-type-buttons > .sans-serif-button > .description { - margin-top: -4px; -} - -#font-type-buttons > .serif-button > .name { - font-size: 63px; -} -%else -#font-type-buttons > .sans-serif-button > .name { - margin-top: 5px; -} - -#font-type-buttons > .sans-serif-button > .description { - margin-top: -8px; -} - -#font-type-buttons > .serif-button > .name { - font-size: 70px; -} -%endif - -.button:hover, -#font-size-buttons > button:hover, -#font-type-buttons > button:hover, -#content-width-buttons > button:hover, -#line-height-buttons > button:hover { - background-color: #ebebeb; -} - -.dropdown.open, -.button:active, -#font-size-buttons > button:active, -#font-size-buttons > button.selected, -#content-width-buttons > button:active, -#content-width-buttons > button.selected, -#line-height-buttons > button:active, -#line-height-buttons > button.selected { - background-color: #dadada; -} - -/* Only used on Android */ -#font-size-sample { - display: none; -} - -.minus-button, -.plus-button, -.content-width-minus-button, -.content-width-plus-button, -.line-height-minus-button, -.line-height-plus-button { - background-color: transparent; - border: 0; - background-size: 18px 18px; - background-repeat: no-repeat; - background-position: center; -} - -/*======= Toolbar icons =======*/ - -.close-button { - background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close"); - height: 68px; - background-position: center 8px; -} - -.close-button:hover { - background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); - background-color: #d94141; - border-bottom: 1px solid #d94141; - border-right: 1px solid #d94141; -} - -.close-button:hover:active { - background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); - background-color: #AE2325; - border-bottom: 1px solid #AE2325; - border-right: 1px solid #AE2325; -} - -.style-button { - background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg"); -} - -.minus-button { - background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg"); -} - -.plus-button { - background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg"); -} - -.content-width-minus-button { - background-size: 42px 16px; - background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg"); -} - -.content-width-plus-button { - background-size: 44px 16px; - background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg"); -} - -.line-height-minus-button { - background-size: 34px 14px; - background-image: url("chrome://global/skin/reader/RM-Line-Height-Minus-38x14.svg"); -} - -.line-height-plus-button { - background-size: 34px 24px; - background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg"); -} - -@media print { - .toolbar { - display: none !important; - } -} diff --git a/toolkit/themes/shared/jar.inc.mn b/toolkit/themes/shared/jar.inc.mn index bdfca2a05..675353409 100644 --- a/toolkit/themes/shared/jar.inc.mn +++ b/toolkit/themes/shared/jar.inc.mn @@ -15,9 +15,7 @@ toolkit.jar: skin/classic/global/aboutCache.css (../../shared/aboutCache.css) skin/classic/global/aboutCacheEntry.css (../../shared/aboutCacheEntry.css) skin/classic/global/aboutMemory.css (../../shared/aboutMemory.css) - skin/classic/global/aboutReader.css (../../shared/aboutReader.css) - skin/classic/global/aboutReaderContent.css (../../shared/aboutReaderContent.css) -* skin/classic/global/aboutReaderControls.css (../../shared/aboutReaderControls.css) +* skin/classic/global/aboutReader.css (../../shared/aboutReader.css) skin/classic/global/aboutSupport.css (../../shared/aboutSupport.css) skin/classic/global/appPicker.css (../../shared/appPicker.css) skin/classic/global/config.css (../../shared/config.css) @@ -34,7 +32,6 @@ toolkit.jar: skin/classic/global/icons/blocked.svg (../../shared/incontent-icons/blocked.svg) skin/classic/global/alerts/alert-common.css (../../shared/alert-common.css) skin/classic/global/narrate.css (../../shared/narrate.css) - skin/classic/global/narrateControls.css (../../shared/narrateControls.css) skin/classic/global/narrate/arrow.svg (../../shared/narrate/arrow.svg) skin/classic/global/narrate/back.svg (../../shared/narrate/back.svg) skin/classic/global/narrate/fast.svg (../../shared/narrate/fast.svg) diff --git a/toolkit/themes/shared/narrate.css b/toolkit/themes/shared/narrate.css index 8a44e78e2..836b5d686 100644 --- a/toolkit/themes/shared/narrate.css +++ b/toolkit/themes/shared/narrate.css @@ -1,3 +1,6 @@ +/* Avoid adding ID selector rules in this style sheet, since they could + * inadvertently match elements in the article content. */ + .narrating { position: relative; z-index: 1; @@ -22,7 +25,7 @@ body.dark .narrating { z-index: -1; border-bottom-style: solid; border-bottom-width: 7px; - transition: left 0.1s ease; + transition: left 0.1s ease, width 0.1s ease; } .narrating > .narrate-word-highlight { @@ -44,3 +47,193 @@ body.sepia .narrate-word-highlight { body.dark .narrate-word-highlight { border-bottom-color: #6f6f6f; } + +.narrate-dropdown { + --border-color: #e5e5e5; +} + +.narrate-toggle > svg { + display: block; + margin: 0 8px; +} + +.narrate-dropdown > .dropdown-popup button { + background-color: transparent; +} + +.narrate-dropdown > .dropdown-popup button:hover:not(:disabled) { + background-color: #eaeaea; +} + +.narrate-row { + display: flex; + align-items: center; + min-height: 40px; + box-sizing: border-box; +} + +.narrate-row:not(:first-child) { + border-top: 1px solid var(--border-color); +} + +/* Control buttons */ + +.narrate-control > button { + background-size: 24px 24px; + background-repeat: no-repeat; + background-position: center center; + height: 64px; + width: 100px; + border: none; + color: #666; + box-sizing: border-box; +} + +.narrate-control > button:not(:first-child) { + border-left: 1px solid var(--border-color); +} + +.narrate-skip-previous { + border-top-left-radius: 3px; + background-image: url("chrome://global/skin/narrate/back.svg#enabled"); + -moz-context-properties: fill; + fill: rgb(128 128 128); +} + +.narrate-skip-next { + border-top-right-radius: 3px; + background-image: url("chrome://global/skin/narrate/forward.svg#enabled"); + -moz-context-properties: fill; + fill: rgb(128 128 128); +} + +.narrate-skip-previous:disabled { + background-image: url("chrome://global/skin/narrate/back.svg#disabled"); +} + +.narrate-skip-next:disabled { + background-image: url("chrome://global/skin/narrate/forward.svg#disabled"); +} + +.narrate-start-stop { + background-image: url("chrome://global/skin/narrate/start.svg"); +} + +.narrate-dropdown.speaking .narrate-start-stop { + background-image: url("chrome://global/skin/narrate/stop.svg"); +} + +/* Rate control */ + +.narrate-rate::before, .narrate-rate::after { + content: ''; + width: 48px; + height: 40px; + background-position: center; + background-repeat: no-repeat; + background-size: 24px auto; +} + +.narrate-rate::before { + background-image: url("chrome://global/skin/narrate/slow.svg"); +} + +.narrate-rate::after { + background-image: url("chrome://global/skin/narrate/fast.svg"); +} + +.narrate-rate-input { + margin: 0 1px; + flex-grow: 1; +} + +.narrate-rate-input::-moz-range-track { + background-color: #979797; + height: 2px; +} + +.narrate-rate-input::-moz-range-progress { + background-color: #2EA3FF; + height: 2px; +} + +.narrate-rate-input::-moz-range-thumb { + background-color: #808080; + height: 16px; + width: 16px; + border-radius: 8px; + border-width: 0; +} + +.narrate-rate-input:active::-moz-range-thumb { + background-color: #2EA3FF; +} + +/* Voice selection */ + +.voiceselect { + width: 100%; +} + +.voiceselect > button.select-toggle, +.voiceselect > .options > button.option { + -moz-appearance: none; + border: none; + width: 100%; + min-height: 40px; +} + +.voiceselect.open > button.select-toggle { + border-bottom: 1px solid var(--border-color); +} + +.voiceselect > button.select-toggle::after { + content: ''; + background-image: url("chrome://global/skin/narrate/arrow.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: 12px 12px; + display: inline-block; + width: 1.5em; + height: 1em; + vertical-align: middle; +} + +.voiceselect > .options > button.option:not(:first-child) { + border-top: 1px solid var(--border-color); +} + +.voiceselect > .options > button.option { + box-sizing: border-box; +} + +.voiceselect > .options:not(.hovering) > button.option:focus { + background-color: #eaeaea; +} + +.voiceselect > .options:not(.hovering) > button.option:hover:not(:focus) { + background-color: transparent; +} + +.voiceselect > .options > button.option::-moz-focus-inner { + outline: none; + border: 0; +} + +.voiceselect > .options { + display: none; + overflow-y: auto; +} + +.voiceselect.open > .options { + display: block; +} + +.current-voice { + color: #7f7f7f; +} + +.voiceselect:not(.open) > button, +.voiceselect .option:last-child { + border-radius: 0 0 3px 3px; +} diff --git a/toolkit/themes/shared/narrateControls.css b/toolkit/themes/shared/narrateControls.css deleted file mode 100644 index 91d02d85a..000000000 --- a/toolkit/themes/shared/narrateControls.css +++ /dev/null @@ -1,185 +0,0 @@ -:scope { - --border-color: #e5e5e5; -} - -#narrate-toggle > svg { - display: block; - margin: 0 8px; -} - -.dropdown-popup button { - background-color: transparent; -} - -.dropdown-popup button:hover:not(:disabled) { - background-color: #eaeaea; -} - -.narrate-row { - display: flex; - align-items: center; - min-height: 40px; - box-sizing: border-box; -} - -.narrate-row:not(:first-child) { - border-top: 1px solid var(--border-color); -} - -/* Control buttons */ - -#narrate-control > button { - background-size: 24px 24px; - background-repeat: no-repeat; - background-position: center center; - height: 64px; - width: 100px; - border: none; - color: #666; - box-sizing: border-box; -} - -#narrate-control > button:not(:first-child) { - border-left: 1px solid var(--border-color); -} - -#narrate-skip-previous { - border-top-left-radius: 3px; - background-image: url("chrome://global/skin/narrate/back.svg#enabled"); -} - -#narrate-skip-next { - border-top-right-radius: 3px; - background-image: url("chrome://global/skin/narrate/forward.svg#enabled"); -} - -#narrate-skip-previous:disabled { - background-image: url("chrome://global/skin/narrate/back.svg#disabled"); -} - -#narrate-skip-next:disabled { - background-image: url("chrome://global/skin/narrate/forward.svg#disabled"); -} - -#narrate-start-stop { - background-image: url("chrome://global/skin/narrate/start.svg"); -} - -#narrate-dropdown.speaking #narrate-start-stop { - background-image: url("chrome://global/skin/narrate/stop.svg"); -} - -/* Rate control */ - -#narrate-rate::before, #narrate-rate::after { - content: ''; - width: 48px; - height: 40px; - background-position: center; - background-repeat: no-repeat; - background-size: 24px auto; -} - -#narrate-rate::before { - background-image: url("chrome://global/skin/narrate/slow.svg"); -} - -#narrate-rate::after { - background-image: url("chrome://global/skin/narrate/fast.svg"); -} - -#narrate-rate-input { - margin: 0 1px; - flex-grow: 1; -} - -#narrate-rate-input::-moz-range-track { - background-color: #979797; - height: 2px; -} - -#narrate-rate-input::-moz-range-progress { - background-color: #2EA3FF; - height: 2px; -} - -#narrate-rate-input::-moz-range-thumb { - background-color: #808080; - height: 16px; - width: 16px; - border-radius: 8px; - border-width: 0; -} - -#narrate-rate-input:active::-moz-range-thumb { - background-color: #2EA3FF; -} - -/* Voice selection */ - -.voiceselect { - width: 100%; -} - -.voiceselect > button.select-toggle, -.voiceselect > .options > button.option { - -moz-appearance: none; - border: none; - width: 100%; - min-height: 40px; -} - -.voiceselect.open > button.select-toggle { - border-bottom: 1px solid var(--border-color); -} - -.voiceselect > button.select-toggle::after { - content: ''; - background-image: url("chrome://global/skin/narrate/arrow.svg"); - background-position: center; - background-repeat: no-repeat; - background-size: 12px 12px; - display: inline-block; - width: 1.5em; - height: 1em; - vertical-align: middle; -} - -.voiceselect > .options > button.option:not(:first-child) { - border-top: 1px solid var(--border-color); -} - -.voiceselect > .options > button.option { - box-sizing: border-box; -} - -.voiceselect > .options:not(.hovering) > button.option:focus { - background-color: #eaeaea; -} - -.voiceselect > .options:not(.hovering) > button.option:hover:not(:focus) { - background-color: transparent; -} - -.voiceselect > .options > button.option::-moz-focus-inner { - outline: none; - border: 0; -} - -.voiceselect > .options { - display: none; - overflow-y: auto; -} - -.voiceselect.open > .options { - display: block; -} - -.current-voice { - color: #7f7f7f; -} - -.voiceselect:not(.open) > button, -.option:last-child { - border-radius: 0 0 3px 3px; -} diff --git a/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg b/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg index 48bbb9e89..482a392fb 100644 --- a/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg +++ b/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg @@ -1,13 +1,10 @@ - - - - - - - - - - - - - + + + + + + -- cgit v1.2.3 From eef027d44a009debe37e28a2999fca4a4403261c Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Tue, 29 May 2018 07:33:30 +0200 Subject: [PALEMOON] [frontend vs backend] Added icons Issue #121 --- toolkit/themes/linux/global/icons/loading_16.png | Bin 0 -> 16126 bytes toolkit/themes/linux/global/icons/notloading_16.png | Bin 0 -> 233 bytes toolkit/themes/linux/global/icons/webapps-16.png | Bin 0 -> 475 bytes toolkit/themes/linux/global/icons/webapps-64.png | Bin 0 -> 2942 bytes toolkit/themes/linux/global/jar.mn | 4 ++++ toolkit/themes/osx/global/jar.mn | 5 +++++ toolkit/themes/osx/global/loading_16.png | Bin 0 -> 9025 bytes toolkit/themes/osx/global/notloading_16.png | Bin 0 -> 686 bytes toolkit/themes/osx/global/webapps-16.png | Bin 0 -> 348 bytes toolkit/themes/osx/global/webapps-16@2x.png | Bin 0 -> 481 bytes toolkit/themes/osx/global/webapps-64.png | Bin 0 -> 2942 bytes toolkit/themes/windows/global/icons/loading_16.png | Bin 0 -> 12351 bytes toolkit/themes/windows/global/icons/notloading_16.png | Bin 0 -> 294 bytes toolkit/themes/windows/global/icons/webapps-16.png | Bin 0 -> 355 bytes toolkit/themes/windows/global/icons/webapps-64.png | Bin 0 -> 2942 bytes toolkit/themes/windows/global/jar.mn | 4 ++++ 16 files changed, 13 insertions(+) create mode 100644 toolkit/themes/linux/global/icons/loading_16.png create mode 100644 toolkit/themes/linux/global/icons/notloading_16.png create mode 100644 toolkit/themes/linux/global/icons/webapps-16.png create mode 100644 toolkit/themes/linux/global/icons/webapps-64.png create mode 100644 toolkit/themes/osx/global/loading_16.png create mode 100644 toolkit/themes/osx/global/notloading_16.png create mode 100644 toolkit/themes/osx/global/webapps-16.png create mode 100644 toolkit/themes/osx/global/webapps-16@2x.png create mode 100644 toolkit/themes/osx/global/webapps-64.png create mode 100644 toolkit/themes/windows/global/icons/loading_16.png create mode 100644 toolkit/themes/windows/global/icons/notloading_16.png create mode 100644 toolkit/themes/windows/global/icons/webapps-16.png create mode 100644 toolkit/themes/windows/global/icons/webapps-64.png (limited to 'toolkit/themes') diff --git a/toolkit/themes/linux/global/icons/loading_16.png b/toolkit/themes/linux/global/icons/loading_16.png new file mode 100644 index 000000000..7108ea341 Binary files /dev/null and b/toolkit/themes/linux/global/icons/loading_16.png differ diff --git a/toolkit/themes/linux/global/icons/notloading_16.png b/toolkit/themes/linux/global/icons/notloading_16.png new file mode 100644 index 000000000..04dab30ed Binary files /dev/null and b/toolkit/themes/linux/global/icons/notloading_16.png differ diff --git a/toolkit/themes/linux/global/icons/webapps-16.png b/toolkit/themes/linux/global/icons/webapps-16.png new file mode 100644 index 000000000..df3978c4c Binary files /dev/null and b/toolkit/themes/linux/global/icons/webapps-16.png differ diff --git a/toolkit/themes/linux/global/icons/webapps-64.png b/toolkit/themes/linux/global/icons/webapps-64.png new file mode 100644 index 000000000..7c5e48cb8 Binary files /dev/null and b/toolkit/themes/linux/global/icons/webapps-64.png differ diff --git a/toolkit/themes/linux/global/jar.mn b/toolkit/themes/linux/global/jar.mn index 0efc8c5cf..0c3fe40ee 100644 --- a/toolkit/themes/linux/global/jar.mn +++ b/toolkit/themes/linux/global/jar.mn @@ -45,8 +45,12 @@ toolkit.jar: skin/classic/global/icons/blacklist_large.png (icons/blacklist_large.png) skin/classic/global/icons/close.svg (icons/close.svg) skin/classic/global/icons/find.png (icons/find.png) + skin/classic/global/icons/loading_16.png (icons/loading_16.png) + skin/classic/global/icons/notloading_16.png (icons/notloading_16.png) skin/classic/global/icons/resizer.png (icons/resizer.png) skin/classic/global/icons/sslWarning.png (icons/sslWarning.png) + skin/classic/global/icons/webapps-16.png (icons/webapps-16.png) + skin/classic/global/icons/webapps-64.png (icons/webapps-64.png) * skin/classic/global/in-content/common.css (in-content/common.css) * skin/classic/global/in-content/info-pages.css (in-content/info-pages.css) diff --git a/toolkit/themes/osx/global/jar.mn b/toolkit/themes/osx/global/jar.mn index 9407ccee5..0d9f3bd48 100644 --- a/toolkit/themes/osx/global/jar.mn +++ b/toolkit/themes/osx/global/jar.mn @@ -101,8 +101,10 @@ toolkit.jar: skin/classic/global/icons/information-32.png (icons/information-32.png) skin/classic/global/icons/information-64.png (icons/information-64.png) skin/classic/global/icons/information-large.png (icons/information-large.png) + skin/classic/global/icons/loading_16.png (icons/loading_16.png) skin/classic/global/icons/menulist-dropmarker.png (icons/menulist-dropmarker.png) skin/classic/global/icons/notfound.png (icons/notfound.png) + skin/classic/global/icons/notloading_16.png (icons/notloading_16.png) skin/classic/global/icons/panebutton-active.png (icons/panebutton-active.png) skin/classic/global/icons/panebutton-inactive.png (icons/panebutton-inactive.png) skin/classic/global/icons/panel-dropmarker.png (icons/panel-dropmarker.png) @@ -126,6 +128,9 @@ toolkit.jar: skin/classic/global/icons/question-64.png (icons/question-64.png) skin/classic/global/icons/question-large.png (icons/question-large.png) skin/classic/global/icons/sslWarning.png (icons/sslWarning.png) + skin/classic/global/icons/webapps-16.png (icons/webapps-16.png) + skin/classic/global/icons/webapps-16@2x.png (icons/webapps-16@2x.png) + skin/classic/global/icons/webapps-64.png (icons/webapps-64.png) skin/classic/global/notification/close.png (notification/close.png) skin/classic/global/notification/error-icon.png (notification/error-icon.png) skin/classic/global/notification/info-icon.png (notification/info-icon.png) diff --git a/toolkit/themes/osx/global/loading_16.png b/toolkit/themes/osx/global/loading_16.png new file mode 100644 index 000000000..1b2df8093 Binary files /dev/null and b/toolkit/themes/osx/global/loading_16.png differ diff --git a/toolkit/themes/osx/global/notloading_16.png b/toolkit/themes/osx/global/notloading_16.png new file mode 100644 index 000000000..ece0ee18a Binary files /dev/null and b/toolkit/themes/osx/global/notloading_16.png differ diff --git a/toolkit/themes/osx/global/webapps-16.png b/toolkit/themes/osx/global/webapps-16.png new file mode 100644 index 000000000..40c73f707 Binary files /dev/null and b/toolkit/themes/osx/global/webapps-16.png differ diff --git a/toolkit/themes/osx/global/webapps-16@2x.png b/toolkit/themes/osx/global/webapps-16@2x.png new file mode 100644 index 000000000..95dd0c90e Binary files /dev/null and b/toolkit/themes/osx/global/webapps-16@2x.png differ diff --git a/toolkit/themes/osx/global/webapps-64.png b/toolkit/themes/osx/global/webapps-64.png new file mode 100644 index 000000000..7c5e48cb8 Binary files /dev/null and b/toolkit/themes/osx/global/webapps-64.png differ diff --git a/toolkit/themes/windows/global/icons/loading_16.png b/toolkit/themes/windows/global/icons/loading_16.png new file mode 100644 index 000000000..0315d470b Binary files /dev/null and b/toolkit/themes/windows/global/icons/loading_16.png differ diff --git a/toolkit/themes/windows/global/icons/notloading_16.png b/toolkit/themes/windows/global/icons/notloading_16.png new file mode 100644 index 000000000..f8366ded5 Binary files /dev/null and b/toolkit/themes/windows/global/icons/notloading_16.png differ diff --git a/toolkit/themes/windows/global/icons/webapps-16.png b/toolkit/themes/windows/global/icons/webapps-16.png new file mode 100644 index 000000000..7112ab4e4 Binary files /dev/null and b/toolkit/themes/windows/global/icons/webapps-16.png differ diff --git a/toolkit/themes/windows/global/icons/webapps-64.png b/toolkit/themes/windows/global/icons/webapps-64.png new file mode 100644 index 000000000..7c5e48cb8 Binary files /dev/null and b/toolkit/themes/windows/global/icons/webapps-64.png differ diff --git a/toolkit/themes/windows/global/jar.mn b/toolkit/themes/windows/global/jar.mn index 8c5d5de5a..ce493ec79 100644 --- a/toolkit/themes/windows/global/jar.mn +++ b/toolkit/themes/windows/global/jar.mn @@ -50,8 +50,12 @@ toolkit.jar: skin/classic/global/icons/close-inverted-win7.png (icons/close-inverted-win7.png) skin/classic/global/icons/close-inverted-win7@2x.png (icons/close-inverted-win7@2x.png) skin/classic/global/icons/find.png (icons/find.png) + skin/classic/global/icons/loading_16.png (icons/loading_16.png) + skin/classic/global/icons/notloading_16.png (icons/notloading_16.png) skin/classic/global/icons/resizer.png (icons/resizer.png) skin/classic/global/icons/sslWarning.png (icons/sslWarning.png) + skin/classic/global/icons/webapps-16.png (icons/webapps-16.png) + skin/classic/global/icons/webapps-64.png (icons/webapps-64.png) * skin/classic/global/in-content/common.css (in-content/common.css) * skin/classic/global/in-content/info-pages.css (in-content/info-pages.css) skin/classic/global/toolbar/spring.png (toolbar/spring.png) -- cgit v1.2.3 From 72c97ede05cf3e5d95b8bbecb0e4a1e2c55d5147 Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Tue, 29 May 2018 12:24:41 +0200 Subject: [PALEMOON] [frontend vs backend] Added icons (fix typo in a path: osx/global/icons) Issue #121 --- toolkit/themes/osx/global/icons/webapps-16.png | Bin 0 -> 348 bytes toolkit/themes/osx/global/icons/webapps-16@2x.png | Bin 0 -> 481 bytes toolkit/themes/osx/global/icons/webapps-64.png | Bin 0 -> 2942 bytes toolkit/themes/osx/global/webapps-16.png | Bin 348 -> 0 bytes toolkit/themes/osx/global/webapps-16@2x.png | Bin 481 -> 0 bytes toolkit/themes/osx/global/webapps-64.png | Bin 2942 -> 0 bytes 6 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 toolkit/themes/osx/global/icons/webapps-16.png create mode 100644 toolkit/themes/osx/global/icons/webapps-16@2x.png create mode 100644 toolkit/themes/osx/global/icons/webapps-64.png delete mode 100644 toolkit/themes/osx/global/webapps-16.png delete mode 100644 toolkit/themes/osx/global/webapps-16@2x.png delete mode 100644 toolkit/themes/osx/global/webapps-64.png (limited to 'toolkit/themes') diff --git a/toolkit/themes/osx/global/icons/webapps-16.png b/toolkit/themes/osx/global/icons/webapps-16.png new file mode 100644 index 000000000..40c73f707 Binary files /dev/null and b/toolkit/themes/osx/global/icons/webapps-16.png differ diff --git a/toolkit/themes/osx/global/icons/webapps-16@2x.png b/toolkit/themes/osx/global/icons/webapps-16@2x.png new file mode 100644 index 000000000..95dd0c90e Binary files /dev/null and b/toolkit/themes/osx/global/icons/webapps-16@2x.png differ diff --git a/toolkit/themes/osx/global/icons/webapps-64.png b/toolkit/themes/osx/global/icons/webapps-64.png new file mode 100644 index 000000000..7c5e48cb8 Binary files /dev/null and b/toolkit/themes/osx/global/icons/webapps-64.png differ diff --git a/toolkit/themes/osx/global/webapps-16.png b/toolkit/themes/osx/global/webapps-16.png deleted file mode 100644 index 40c73f707..000000000 Binary files a/toolkit/themes/osx/global/webapps-16.png and /dev/null differ diff --git a/toolkit/themes/osx/global/webapps-16@2x.png b/toolkit/themes/osx/global/webapps-16@2x.png deleted file mode 100644 index 95dd0c90e..000000000 Binary files a/toolkit/themes/osx/global/webapps-16@2x.png and /dev/null differ diff --git a/toolkit/themes/osx/global/webapps-64.png b/toolkit/themes/osx/global/webapps-64.png deleted file mode 100644 index 7c5e48cb8..000000000 Binary files a/toolkit/themes/osx/global/webapps-64.png and /dev/null differ -- cgit v1.2.3 From fad230e40239ae19069c0fd42547cc15545fe71a Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Tue, 29 May 2018 12:27:33 +0200 Subject: [PALEMOON] [frontend vs backend] Added icons (fix typo in a path: osx/global/icons) Issue #121 --- toolkit/themes/osx/global/icons/loading_16.png | Bin 0 -> 9025 bytes toolkit/themes/osx/global/icons/notloading_16.png | Bin 0 -> 686 bytes toolkit/themes/osx/global/loading_16.png | Bin 9025 -> 0 bytes toolkit/themes/osx/global/notloading_16.png | Bin 686 -> 0 bytes 4 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 toolkit/themes/osx/global/icons/loading_16.png create mode 100644 toolkit/themes/osx/global/icons/notloading_16.png delete mode 100644 toolkit/themes/osx/global/loading_16.png delete mode 100644 toolkit/themes/osx/global/notloading_16.png (limited to 'toolkit/themes') diff --git a/toolkit/themes/osx/global/icons/loading_16.png b/toolkit/themes/osx/global/icons/loading_16.png new file mode 100644 index 000000000..1b2df8093 Binary files /dev/null and b/toolkit/themes/osx/global/icons/loading_16.png differ diff --git a/toolkit/themes/osx/global/icons/notloading_16.png b/toolkit/themes/osx/global/icons/notloading_16.png new file mode 100644 index 000000000..ece0ee18a Binary files /dev/null and b/toolkit/themes/osx/global/icons/notloading_16.png differ diff --git a/toolkit/themes/osx/global/loading_16.png b/toolkit/themes/osx/global/loading_16.png deleted file mode 100644 index 1b2df8093..000000000 Binary files a/toolkit/themes/osx/global/loading_16.png and /dev/null differ diff --git a/toolkit/themes/osx/global/notloading_16.png b/toolkit/themes/osx/global/notloading_16.png deleted file mode 100644 index ece0ee18a..000000000 Binary files a/toolkit/themes/osx/global/notloading_16.png and /dev/null differ -- cgit v1.2.3 From ff72a8ae463e74a7b64f227173834583b3b4c739 Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Tue, 29 May 2018 12:30:26 +0200 Subject: [PALEMOON] [frontend vs backend] Remove unused webapps-*.png (chrome://global/skin/icons/webapps-*.png) Issue #121 --- toolkit/themes/linux/global/icons/webapps-16.png | Bin 475 -> 0 bytes toolkit/themes/linux/global/icons/webapps-64.png | Bin 2942 -> 0 bytes toolkit/themes/linux/global/jar.mn | 2 -- toolkit/themes/osx/global/icons/webapps-16.png | Bin 348 -> 0 bytes toolkit/themes/osx/global/icons/webapps-16@2x.png | Bin 481 -> 0 bytes toolkit/themes/osx/global/icons/webapps-64.png | Bin 2942 -> 0 bytes toolkit/themes/osx/global/jar.mn | 3 --- toolkit/themes/windows/global/icons/webapps-16.png | Bin 355 -> 0 bytes toolkit/themes/windows/global/icons/webapps-64.png | Bin 2942 -> 0 bytes toolkit/themes/windows/global/jar.mn | 2 -- 10 files changed, 7 deletions(-) delete mode 100644 toolkit/themes/linux/global/icons/webapps-16.png delete mode 100644 toolkit/themes/linux/global/icons/webapps-64.png delete mode 100644 toolkit/themes/osx/global/icons/webapps-16.png delete mode 100644 toolkit/themes/osx/global/icons/webapps-16@2x.png delete mode 100644 toolkit/themes/osx/global/icons/webapps-64.png delete mode 100644 toolkit/themes/windows/global/icons/webapps-16.png delete mode 100644 toolkit/themes/windows/global/icons/webapps-64.png (limited to 'toolkit/themes') diff --git a/toolkit/themes/linux/global/icons/webapps-16.png b/toolkit/themes/linux/global/icons/webapps-16.png deleted file mode 100644 index df3978c4c..000000000 Binary files a/toolkit/themes/linux/global/icons/webapps-16.png and /dev/null differ diff --git a/toolkit/themes/linux/global/icons/webapps-64.png b/toolkit/themes/linux/global/icons/webapps-64.png deleted file mode 100644 index 7c5e48cb8..000000000 Binary files a/toolkit/themes/linux/global/icons/webapps-64.png and /dev/null differ diff --git a/toolkit/themes/linux/global/jar.mn b/toolkit/themes/linux/global/jar.mn index 0c3fe40ee..6a053dec6 100644 --- a/toolkit/themes/linux/global/jar.mn +++ b/toolkit/themes/linux/global/jar.mn @@ -49,8 +49,6 @@ toolkit.jar: skin/classic/global/icons/notloading_16.png (icons/notloading_16.png) skin/classic/global/icons/resizer.png (icons/resizer.png) skin/classic/global/icons/sslWarning.png (icons/sslWarning.png) - skin/classic/global/icons/webapps-16.png (icons/webapps-16.png) - skin/classic/global/icons/webapps-64.png (icons/webapps-64.png) * skin/classic/global/in-content/common.css (in-content/common.css) * skin/classic/global/in-content/info-pages.css (in-content/info-pages.css) diff --git a/toolkit/themes/osx/global/icons/webapps-16.png b/toolkit/themes/osx/global/icons/webapps-16.png deleted file mode 100644 index 40c73f707..000000000 Binary files a/toolkit/themes/osx/global/icons/webapps-16.png and /dev/null differ diff --git a/toolkit/themes/osx/global/icons/webapps-16@2x.png b/toolkit/themes/osx/global/icons/webapps-16@2x.png deleted file mode 100644 index 95dd0c90e..000000000 Binary files a/toolkit/themes/osx/global/icons/webapps-16@2x.png and /dev/null differ diff --git a/toolkit/themes/osx/global/icons/webapps-64.png b/toolkit/themes/osx/global/icons/webapps-64.png deleted file mode 100644 index 7c5e48cb8..000000000 Binary files a/toolkit/themes/osx/global/icons/webapps-64.png and /dev/null differ diff --git a/toolkit/themes/osx/global/jar.mn b/toolkit/themes/osx/global/jar.mn index 0d9f3bd48..2b7d19641 100644 --- a/toolkit/themes/osx/global/jar.mn +++ b/toolkit/themes/osx/global/jar.mn @@ -128,9 +128,6 @@ toolkit.jar: skin/classic/global/icons/question-64.png (icons/question-64.png) skin/classic/global/icons/question-large.png (icons/question-large.png) skin/classic/global/icons/sslWarning.png (icons/sslWarning.png) - skin/classic/global/icons/webapps-16.png (icons/webapps-16.png) - skin/classic/global/icons/webapps-16@2x.png (icons/webapps-16@2x.png) - skin/classic/global/icons/webapps-64.png (icons/webapps-64.png) skin/classic/global/notification/close.png (notification/close.png) skin/classic/global/notification/error-icon.png (notification/error-icon.png) skin/classic/global/notification/info-icon.png (notification/info-icon.png) diff --git a/toolkit/themes/windows/global/icons/webapps-16.png b/toolkit/themes/windows/global/icons/webapps-16.png deleted file mode 100644 index 7112ab4e4..000000000 Binary files a/toolkit/themes/windows/global/icons/webapps-16.png and /dev/null differ diff --git a/toolkit/themes/windows/global/icons/webapps-64.png b/toolkit/themes/windows/global/icons/webapps-64.png deleted file mode 100644 index 7c5e48cb8..000000000 Binary files a/toolkit/themes/windows/global/icons/webapps-64.png and /dev/null differ diff --git a/toolkit/themes/windows/global/jar.mn b/toolkit/themes/windows/global/jar.mn index ce493ec79..75f4cc650 100644 --- a/toolkit/themes/windows/global/jar.mn +++ b/toolkit/themes/windows/global/jar.mn @@ -54,8 +54,6 @@ toolkit.jar: skin/classic/global/icons/notloading_16.png (icons/notloading_16.png) skin/classic/global/icons/resizer.png (icons/resizer.png) skin/classic/global/icons/sslWarning.png (icons/sslWarning.png) - skin/classic/global/icons/webapps-16.png (icons/webapps-16.png) - skin/classic/global/icons/webapps-64.png (icons/webapps-64.png) * skin/classic/global/in-content/common.css (in-content/common.css) * skin/classic/global/in-content/info-pages.css (in-content/info-pages.css) skin/classic/global/toolbar/spring.png (toolbar/spring.png) -- cgit v1.2.3 From daffc27c5710cf449a632e493179f96647b79a8a Mon Sep 17 00:00:00 2001 From: JustOff Date: Wed, 30 May 2018 15:02:53 +0300 Subject: [PALEMOON] Fix missed `notifyPluginCrashed.png` on windows and linux --- toolkit/themes/shared/non-mac.jar.inc.mn | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'toolkit/themes') diff --git a/toolkit/themes/shared/non-mac.jar.inc.mn b/toolkit/themes/shared/non-mac.jar.inc.mn index 637537d9d..23f9da519 100644 --- a/toolkit/themes/shared/non-mac.jar.inc.mn +++ b/toolkit/themes/shared/non-mac.jar.inc.mn @@ -142,7 +142,7 @@ % override chrome://mozapps/skin/extensions/category-extensions.svg chrome://mozapps/skin/extensions/extensionGeneric.svg % override chrome://mozapps/skin/extensions/category-languages.png chrome://mozapps/skin/extensions/localeGeneric.png % override chrome://mozapps/skin/extensions/category-themes.png chrome://mozapps/skin/extensions/themeGeneric.png -% override chrome://mozapps/skin/plugins/notifyPluginCrashed.png chrome://mozapps/skin/plugins/pluginGeneric-16.png % override chrome://mozapps/skin/plugins/notifyPluginGeneric.png chrome://mozapps/skin/plugins/pluginGeneric-16.png % override chrome://mozapps/skin/xpinstall/xpinstallItemGeneric.png chrome://mozapps/skin/extensions/extensionGeneric.png #endif +% override chrome://mozapps/skin/plugins/notifyPluginCrashed.png chrome://mozapps/skin/plugins/pluginGeneric-16.png -- cgit v1.2.3 From 87eaf4410455694b3337fd145d9b157c289babd5 Mon Sep 17 00:00:00 2001 From: Lootyhoof Date: Fri, 22 Jun 2018 22:30:54 +0100 Subject: Add new close icons and make current icons Basilisk-specific --- toolkit/themes/linux/global/global.css | 6 ++++++ toolkit/themes/linux/global/jar.mn | 2 +- toolkit/themes/windows/global/global.css | 15 +++++++++++++++ .../themes/windows/global/icons/close-inverted.svg | 19 +++++++++++++++++++ toolkit/themes/windows/global/icons/close.svg | 19 +++++++++++++++++++ toolkit/themes/windows/global/jar.mn | 2 ++ 6 files changed, 62 insertions(+), 1 deletion(-) create mode 100644 toolkit/themes/windows/global/icons/close-inverted.svg create mode 100644 toolkit/themes/windows/global/icons/close.svg (limited to 'toolkit/themes') diff --git a/toolkit/themes/linux/global/global.css b/toolkit/themes/linux/global/global.css index 1f9e7e458..9553725d6 100644 --- a/toolkit/themes/linux/global/global.css +++ b/toolkit/themes/linux/global/global.css @@ -316,6 +316,7 @@ popupnotificationcontent { /* :::::: Close button icons ::::: */ +%ifdef MC_BASILISK .close-icon { -moz-appearance: none; height: 16px; @@ -332,3 +333,8 @@ popupnotificationcontent { .close-icon:hover:active { background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 48, 16, 32); } +%else +.close-icon { + list-style-image: url("moz-icon://stock/gtk-close?size=menu"); +} +%endif diff --git a/toolkit/themes/linux/global/jar.mn b/toolkit/themes/linux/global/jar.mn index 6a053dec6..b161f8cae 100644 --- a/toolkit/themes/linux/global/jar.mn +++ b/toolkit/themes/linux/global/jar.mn @@ -14,7 +14,7 @@ toolkit.jar: skin/classic/global/filepicker.css skin/classic/global/Filepicker.png (filepicker/Filepicker.png) skin/classic/global/findBar.css - skin/classic/global/global.css +* skin/classic/global/global.css skin/classic/global/groupbox.css skin/classic/global/inContentUI.css skin/classic/global/listbox.css diff --git a/toolkit/themes/windows/global/global.css b/toolkit/themes/windows/global/global.css index aaddef882..416321041 100644 --- a/toolkit/themes/windows/global/global.css +++ b/toolkit/themes/windows/global/global.css @@ -331,6 +331,7 @@ popupnotificationcontent { /* :::::: Close button icons ::::: */ +%ifdef MC_BASILISK .close-icon { list-style-image: url("chrome://global/skin/icons/close.png"); -moz-image-region: rect(0, 20px, 20px, 0); @@ -398,3 +399,17 @@ popupnotificationcontent { } } } +%else +.close-icon { + list-style-image: url("chrome://global/skin/icons/close.svg"); + -moz-image-region: rect(0, 16px, 16px, 0); +} + +.close-icon:hover { + -moz-image-region: rect(0, 32px, 16px, 16px); +} + +.close-icon:hover:active { + -moz-image-region: rect(0, 48px, 16px, 32px); +} +%endif diff --git a/toolkit/themes/windows/global/icons/close-inverted.svg b/toolkit/themes/windows/global/icons/close-inverted.svg new file mode 100644 index 000000000..ac2bd887d --- /dev/null +++ b/toolkit/themes/windows/global/icons/close-inverted.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/toolkit/themes/windows/global/icons/close.svg b/toolkit/themes/windows/global/icons/close.svg new file mode 100644 index 000000000..4093c880d --- /dev/null +++ b/toolkit/themes/windows/global/icons/close.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/toolkit/themes/windows/global/jar.mn b/toolkit/themes/windows/global/jar.mn index 75f4cc650..a2cc9e2ea 100644 --- a/toolkit/themes/windows/global/jar.mn +++ b/toolkit/themes/windows/global/jar.mn @@ -45,6 +45,8 @@ toolkit.jar: skin/classic/global/icons/autocomplete-search.svg (icons/autocomplete-search.svg) skin/classic/global/icons/blacklist_favicon.png (icons/blacklist_favicon.png) skin/classic/global/icons/blacklist_large.png (icons/blacklist_large.png) + skin/classic/global/icons/close.svg (icons/close.svg) + skin/classic/global/icons/close-inverted.svg (icons/close-inverted.svg) skin/classic/global/icons/close-win7.png (icons/close-win7.png) skin/classic/global/icons/close-win7@2x.png (icons/close-win7@2x.png) skin/classic/global/icons/close-inverted-win7.png (icons/close-inverted-win7.png) -- cgit v1.2.3 From e240469e7241fece5c00b398007b6c529301de6d Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Tue, 26 Jun 2018 20:20:43 +0200 Subject: "about:support" - added support for "Restart normally" https://github.com/MoonchildProductions/Pale-Moon/pull/1093 (partially) --- toolkit/themes/shared/aboutSupport.css | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'toolkit/themes') diff --git a/toolkit/themes/shared/aboutSupport.css b/toolkit/themes/shared/aboutSupport.css index d26cd3cbd..69e6a95b4 100644 --- a/toolkit/themes/shared/aboutSupport.css +++ b/toolkit/themes/shared/aboutSupport.css @@ -99,6 +99,10 @@ td { width: 30%; } +#contents { + clear: right; +} + #action-box, #reset-box, #safe-mode-box { -- cgit v1.2.3 From ddea4710991d889a1c049835442a15fed026de9e Mon Sep 17 00:00:00 2001 From: "Matt A. Tobin" Date: Thu, 28 Jun 2018 13:20:53 -0400 Subject: Use MOZ_AUSTRALIS to define common shared Australis features --- toolkit/themes/linux/global/global.css | 2 +- toolkit/themes/windows/global/global.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'toolkit/themes') diff --git a/toolkit/themes/linux/global/global.css b/toolkit/themes/linux/global/global.css index 9553725d6..9328f7a66 100644 --- a/toolkit/themes/linux/global/global.css +++ b/toolkit/themes/linux/global/global.css @@ -316,7 +316,7 @@ popupnotificationcontent { /* :::::: Close button icons ::::: */ -%ifdef MC_BASILISK +%ifdef MOZ_AUSTRALIS .close-icon { -moz-appearance: none; height: 16px; diff --git a/toolkit/themes/windows/global/global.css b/toolkit/themes/windows/global/global.css index 416321041..6b6a21ca3 100644 --- a/toolkit/themes/windows/global/global.css +++ b/toolkit/themes/windows/global/global.css @@ -331,7 +331,7 @@ popupnotificationcontent { /* :::::: Close button icons ::::: */ -%ifdef MC_BASILISK +%ifdef MOZ_AUSTRALIS .close-icon { list-style-image: url("chrome://global/skin/icons/close.png"); -moz-image-region: rect(0, 20px, 20px, 0); -- cgit v1.2.3 From 65b4a8ac5e784fbc0ba9a45784c910890730da4f Mon Sep 17 00:00:00 2001 From: wolfbeast Date: Fri, 29 Jun 2018 17:40:32 +0200 Subject: Restore Pale Moon's standalone image viewing style. --- toolkit/themes/shared/jar.inc.mn | 2 +- toolkit/themes/shared/media/TopLevelImageDocument.css | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) (limited to 'toolkit/themes') diff --git a/toolkit/themes/shared/jar.inc.mn b/toolkit/themes/shared/jar.inc.mn index 675353409..e361e744f 100644 --- a/toolkit/themes/shared/jar.inc.mn +++ b/toolkit/themes/shared/jar.inc.mn @@ -59,7 +59,7 @@ toolkit.jar: skin/classic/global/reader/RM-Content-Width-Plus-44x16.svg (../../shared/reader/RM-Content-Width-Plus-44x16.svg) skin/classic/global/reader/RM-Line-Height-Minus-38x14.svg (../../shared/reader/RM-Line-Height-Minus-38x14.svg) skin/classic/global/reader/RM-Line-Height-Plus-38x24.svg (../../shared/reader/RM-Line-Height-Plus-38x24.svg) - skin/classic/global/media/TopLevelImageDocument.css (../../shared/media/TopLevelImageDocument.css) +* skin/classic/global/media/TopLevelImageDocument.css (../../shared/media/TopLevelImageDocument.css) skin/classic/global/media/TopLevelVideoDocument.css (../../shared/media/TopLevelVideoDocument.css) skin/classic/global/media/imagedoc-lightnoise.png (../../shared/media/imagedoc-lightnoise.png) skin/classic/global/media/imagedoc-darknoise.png (../../shared/media/imagedoc-darknoise.png) diff --git a/toolkit/themes/shared/media/TopLevelImageDocument.css b/toolkit/themes/shared/media/TopLevelImageDocument.css index 524217516..de970512c 100644 --- a/toolkit/themes/shared/media/TopLevelImageDocument.css +++ b/toolkit/themes/shared/media/TopLevelImageDocument.css @@ -5,6 +5,12 @@ @media not print { /* N.B.: Remember to update ImageDocument.css in the tree or reftests may fail! */ +%ifdef MC_PALEMOON + body { + color: #eee; + background: #2E3B41; + } +%else body { color: #eee; background-image: url("chrome://global/skin/media/imagedoc-darknoise.png"); @@ -14,4 +20,5 @@ background: hsl(0,0%,90%) url("chrome://global/skin/media/imagedoc-lightnoise.png"); color: #222; } +%endif } -- cgit v1.2.3