From 6bf0a5cb5034a7e684dcc3500e841785237ce2dd Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 7 Apr 2024 19:32:43 +0200 Subject: Adding upstream version 1:115.7.0. Signed-off-by: Daniel Baumann --- toolkit/themes/shared/aboutCache.css | 67 + toolkit/themes/shared/aboutCacheEntry.css | 28 + toolkit/themes/shared/aboutHttpsOnlyError.css | 88 ++ toolkit/themes/shared/aboutLicense.css | 15 + toolkit/themes/shared/aboutLogging.css | 82 ++ toolkit/themes/shared/aboutMemory.css | 5 + toolkit/themes/shared/aboutNetError.css | 221 +++ toolkit/themes/shared/aboutNetworking.css | 80 ++ toolkit/themes/shared/aboutProfiles.css | 17 + toolkit/themes/shared/aboutReader.css | 910 ++++++++++++ toolkit/themes/shared/aboutReaderPocket.css | 246 ++++ toolkit/themes/shared/aboutRights.css | 19 + toolkit/themes/shared/aboutServiceWorkers.css | 33 + toolkit/themes/shared/aboutSupport.css | 91 ++ toolkit/themes/shared/alert.css | 211 +++ toolkit/themes/shared/appPicker.css | 33 + toolkit/themes/shared/arrowscrollbox.css | 55 + toolkit/themes/shared/checkbox.css | 211 +++ toolkit/themes/shared/close-icon.css | 42 + toolkit/themes/shared/commonDialog.css | 70 + toolkit/themes/shared/datetimeinputpickers.css | 382 +++++ toolkit/themes/shared/design-tokens-brand.css | 53 + toolkit/themes/shared/design-tokens-shared.css | 102 ++ toolkit/themes/shared/design-tokens-system.css | 26 + toolkit/themes/shared/desktop-jar.inc.mn | 152 ++ toolkit/themes/shared/desktop-non-mac.jar.inc.mn | 24 + toolkit/themes/shared/dirListing/dirListing.css | 107 ++ toolkit/themes/shared/dirListing/folder-osx.png | Bin 0 -> 2037 bytes toolkit/themes/shared/dirListing/folder.png | Bin 0 -> 1620 bytes toolkit/themes/shared/dirListing/up-osx.png | Bin 0 -> 2292 bytes toolkit/themes/shared/dirListing/up.png | Bin 0 -> 1147 bytes toolkit/themes/shared/error-pages.css | 86 ++ .../shared/extensions/category-available.svg | 6 + .../shared/extensions/category-dictionaries.svg | 7 + .../themes/shared/extensions/category-discover.svg | 8 + .../shared/extensions/category-extensions.svg | 6 + .../themes/shared/extensions/category-plugins.svg | 6 + .../themes/shared/extensions/category-recent.svg | 7 + .../shared/extensions/category-sitepermission.svg | 6 + .../themes/shared/extensions/category-themes.svg | 6 + toolkit/themes/shared/extensions/extension.svg | 6 + .../themes/shared/extensions/extensionGeneric.svg | 6 + toolkit/themes/shared/extensions/line.svg | 99 ++ toolkit/themes/shared/extensions/rating-star.svg | 43 + toolkit/themes/shared/extensions/recommended.svg | 8 + toolkit/themes/shared/findbar.css | 178 +++ toolkit/themes/shared/global-shared.css | 306 ++++ toolkit/themes/shared/icons/arrow-down-12.svg | 6 + toolkit/themes/shared/icons/arrow-down.svg | 6 + toolkit/themes/shared/icons/arrow-left-12.svg | 6 + toolkit/themes/shared/icons/arrow-left.svg | 6 + toolkit/themes/shared/icons/arrow-right-12.svg | 6 + toolkit/themes/shared/icons/arrow-right.svg | 6 + toolkit/themes/shared/icons/arrow-up-12.svg | 6 + toolkit/themes/shared/icons/arrow-up.svg | 6 + .../themes/shared/icons/autoscroll-horizontal.svg | 7 + .../themes/shared/icons/autoscroll-vertical.svg | 7 + toolkit/themes/shared/icons/autoscroll.svg | 7 + toolkit/themes/shared/icons/badge-blue.svg | 4 + toolkit/themes/shared/icons/blocked.svg | 6 + toolkit/themes/shared/icons/check-partial.svg | 6 + toolkit/themes/shared/icons/check.svg | 6 + toolkit/themes/shared/icons/chevron.svg | 7 + toolkit/themes/shared/icons/close-12.svg | 6 + toolkit/themes/shared/icons/close-fill.svg | 6 + toolkit/themes/shared/icons/close.svg | 6 + toolkit/themes/shared/icons/columnpicker.svg | 6 + toolkit/themes/shared/icons/defaultFavicon.svg | 6 + toolkit/themes/shared/icons/delete.svg | 8 + toolkit/themes/shared/icons/developer.svg | 6 + toolkit/themes/shared/icons/edit-copy.svg | 6 + toolkit/themes/shared/icons/edit.svg | 6 + toolkit/themes/shared/icons/error.svg | 6 + toolkit/themes/shared/icons/experiments.svg | 9 + toolkit/themes/shared/icons/folder.svg | 6 + toolkit/themes/shared/icons/heart.svg | 7 + toolkit/themes/shared/icons/help.svg | 8 + toolkit/themes/shared/icons/highlights.svg | 8 + .../shared/icons/indicator-private-browsing.svg | 9 + toolkit/themes/shared/icons/info-filled.svg | 6 + toolkit/themes/shared/icons/info.svg | 8 + toolkit/themes/shared/icons/lightbulb.svg | 7 + toolkit/themes/shared/icons/link.svg | 8 + toolkit/themes/shared/icons/loading.png | Bin 0 -> 12585 bytes toolkit/themes/shared/icons/loading@2x.png | Bin 0 -> 40165 bytes toolkit/themes/shared/icons/more.svg | 8 + toolkit/themes/shared/icons/open-in-new.svg | 7 + toolkit/themes/shared/icons/page-landscape.svg | 6 + toolkit/themes/shared/icons/page-portrait.svg | 6 + toolkit/themes/shared/icons/performance.svg | 7 + toolkit/themes/shared/icons/plugin-blocked.svg | 7 + toolkit/themes/shared/icons/plugin.svg | 6 + toolkit/themes/shared/icons/plus.svg | 6 + toolkit/themes/shared/icons/pocket-outline.svg | 7 + toolkit/themes/shared/icons/pocket.svg | 6 + toolkit/themes/shared/icons/print.svg | 6 + toolkit/themes/shared/icons/radio.svg | 7 + toolkit/themes/shared/icons/reload.svg | 6 + toolkit/themes/shared/icons/resizer.svg | 13 + toolkit/themes/shared/icons/search-glass.svg | 6 + toolkit/themes/shared/icons/security-broken.svg | 8 + toolkit/themes/shared/icons/security-warning.svg | 7 + toolkit/themes/shared/icons/security.svg | 6 + toolkit/themes/shared/icons/settings.svg | 7 + toolkit/themes/shared/icons/shortcut.svg | 4 + toolkit/themes/shared/icons/sort-arrow.svg | 7 + toolkit/themes/shared/icons/trackers.svg | 9 + toolkit/themes/shared/icons/trending.svg | 6 + toolkit/themes/shared/icons/undo.svg | 6 + toolkit/themes/shared/icons/update-icon.svg | 6 + toolkit/themes/shared/icons/warning-fill-12.svg | 7 + toolkit/themes/shared/icons/warning.svg | 6 + toolkit/themes/shared/icons/whatsnew.svg | 10 + .../themes/shared/illustrations/about-license.svg | 52 + .../themes/shared/illustrations/about-rights.svg | 82 ++ .../shared/illustrations/error-malformed-url.svg | 61 + toolkit/themes/shared/in-content/common-shared.css | 1474 ++++++++++++++++++++ toolkit/themes/shared/in-content/info-pages.css | 182 +++ toolkit/themes/shared/in-content/wifi.svg | 30 + toolkit/themes/shared/media/audio-muted.svg | 9 + toolkit/themes/shared/media/audio.svg | 8 + toolkit/themes/shared/media/audioNoAudioButton.svg | 11 + .../themes/shared/media/castingButton-active.svg | 9 + .../themes/shared/media/castingButton-ready.svg | 9 + .../media/closed-caption-settings-button.svg | 6 + .../shared/media/closedCaptionButton-cc-off.svg | 16 + .../shared/media/closedCaptionButton-cc-on.svg | 17 + toolkit/themes/shared/media/error.png | Bin 0 -> 2043 bytes .../themes/shared/media/fullscreenEnterButton.svg | 13 + .../themes/shared/media/fullscreenExitButton.svg | 12 + toolkit/themes/shared/media/imagedoc-darknoise.png | Bin 0 -> 3050 bytes .../themes/shared/media/imagedoc-lightnoise.png | Bin 0 -> 3987 bytes toolkit/themes/shared/media/pause-fill.svg | 7 + .../shared/media/picture-in-picture-closed.svg | 8 + .../picture-in-picture-enter-fullscreen-button.svg | 6 + .../picture-in-picture-exit-fullscreen-button.svg | 6 + .../shared/media/picture-in-picture-open.svg | 8 + .../picture-in-picture-seekBackward-button.svg | 7 + .../picture-in-picture-seekForward-button.svg | 14 + toolkit/themes/shared/media/pipToggle.css | 393 ++++++ toolkit/themes/shared/media/play-fill.svg | 6 + toolkit/themes/shared/media/stalled.png | Bin 0 -> 20763 bytes toolkit/themes/shared/media/textrecognition.css | 27 + toolkit/themes/shared/media/throbber.png | Bin 0 -> 30718 bytes toolkit/themes/shared/media/videocontrols.css | 586 ++++++++ toolkit/themes/shared/menu-scrolling.css | 36 + toolkit/themes/shared/menulist-shared.css | 71 + toolkit/themes/shared/minimal-toolkit.jar.inc.mn | 47 + toolkit/themes/shared/mozapps.inc.mn | 35 + toolkit/themes/shared/narrate.css | 277 ++++ toolkit/themes/shared/narrate/arrow.svg | 6 + toolkit/themes/shared/narrate/back.svg | 6 + toolkit/themes/shared/narrate/fast.svg | 6 + toolkit/themes/shared/narrate/forward.svg | 6 + toolkit/themes/shared/narrate/headphone-active.svg | 22 + toolkit/themes/shared/narrate/headphone.svg | 6 + toolkit/themes/shared/narrate/slow.svg | 9 + toolkit/themes/shared/narrate/start.svg | 6 + toolkit/themes/shared/narrate/stop.svg | 6 + toolkit/themes/shared/notification.css | 188 +++ toolkit/themes/shared/numberinput.css | 17 + toolkit/themes/shared/offlineSupportPages.css | 20 + toolkit/themes/shared/pictureinpicture/player.css | 648 +++++++++ .../themes/shared/pictureinpicture/texttracks.css | 74 + toolkit/themes/shared/popupnotification.css | 158 +++ toolkit/themes/shared/profileDowngrade.css | 13 + toolkit/themes/shared/profileSelection.css | 18 + .../shared/reader/RM-Content-Width-Minus-42x16.svg | 16 + .../shared/reader/RM-Content-Width-Plus-44x16.svg | 16 + .../shared/reader/RM-Line-Height-Minus-38x14.svg | 18 + .../shared/reader/RM-Line-Height-Plus-38x24.svg | 17 + toolkit/themes/shared/reader/RM-Minus-24x24.svg | 6 + toolkit/themes/shared/reader/RM-Plus-24x24.svg | 6 + .../themes/shared/reader/RM-Pocket-Glyph-Dark.svg | 4 + .../themes/shared/reader/RM-Pocket-Glyph-Sepia.svg | 4 + toolkit/themes/shared/reader/RM-Pocket-Glyph.svg | 22 + toolkit/themes/shared/reader/RM-Sans-Serif.svg | 13 + toolkit/themes/shared/reader/RM-Serif.svg | 11 + .../shared/reader/RM-Type-Controls-24x24.svg | 7 + .../shared/reader/RM-Type-Controls-Arrow.svg | 7 + toolkit/themes/shared/search-textbox.css | 110 ++ toolkit/themes/shared/tree.css | 316 +++++ 182 files changed, 9890 insertions(+) create mode 100644 toolkit/themes/shared/aboutCache.css create mode 100644 toolkit/themes/shared/aboutCacheEntry.css create mode 100644 toolkit/themes/shared/aboutHttpsOnlyError.css create mode 100644 toolkit/themes/shared/aboutLicense.css create mode 100644 toolkit/themes/shared/aboutLogging.css create mode 100644 toolkit/themes/shared/aboutMemory.css create mode 100644 toolkit/themes/shared/aboutNetError.css create mode 100644 toolkit/themes/shared/aboutNetworking.css create mode 100644 toolkit/themes/shared/aboutProfiles.css create mode 100644 toolkit/themes/shared/aboutReader.css create mode 100644 toolkit/themes/shared/aboutReaderPocket.css create mode 100644 toolkit/themes/shared/aboutRights.css create mode 100644 toolkit/themes/shared/aboutServiceWorkers.css create mode 100644 toolkit/themes/shared/aboutSupport.css create mode 100644 toolkit/themes/shared/alert.css create mode 100644 toolkit/themes/shared/appPicker.css create mode 100644 toolkit/themes/shared/arrowscrollbox.css create mode 100644 toolkit/themes/shared/checkbox.css create mode 100644 toolkit/themes/shared/close-icon.css create mode 100644 toolkit/themes/shared/commonDialog.css create mode 100644 toolkit/themes/shared/datetimeinputpickers.css create mode 100644 toolkit/themes/shared/design-tokens-brand.css create mode 100644 toolkit/themes/shared/design-tokens-shared.css create mode 100644 toolkit/themes/shared/design-tokens-system.css create mode 100644 toolkit/themes/shared/desktop-jar.inc.mn create mode 100644 toolkit/themes/shared/desktop-non-mac.jar.inc.mn create mode 100644 toolkit/themes/shared/dirListing/dirListing.css create mode 100644 toolkit/themes/shared/dirListing/folder-osx.png create mode 100644 toolkit/themes/shared/dirListing/folder.png create mode 100644 toolkit/themes/shared/dirListing/up-osx.png create mode 100644 toolkit/themes/shared/dirListing/up.png create mode 100644 toolkit/themes/shared/error-pages.css create mode 100644 toolkit/themes/shared/extensions/category-available.svg create mode 100644 toolkit/themes/shared/extensions/category-dictionaries.svg create mode 100644 toolkit/themes/shared/extensions/category-discover.svg create mode 100644 toolkit/themes/shared/extensions/category-extensions.svg create mode 100644 toolkit/themes/shared/extensions/category-plugins.svg create mode 100644 toolkit/themes/shared/extensions/category-recent.svg create mode 100644 toolkit/themes/shared/extensions/category-sitepermission.svg create mode 100644 toolkit/themes/shared/extensions/category-themes.svg create mode 100644 toolkit/themes/shared/extensions/extension.svg create mode 100644 toolkit/themes/shared/extensions/extensionGeneric.svg create mode 100644 toolkit/themes/shared/extensions/line.svg create mode 100644 toolkit/themes/shared/extensions/rating-star.svg create mode 100644 toolkit/themes/shared/extensions/recommended.svg create mode 100644 toolkit/themes/shared/findbar.css create mode 100644 toolkit/themes/shared/global-shared.css create mode 100644 toolkit/themes/shared/icons/arrow-down-12.svg create mode 100644 toolkit/themes/shared/icons/arrow-down.svg create mode 100644 toolkit/themes/shared/icons/arrow-left-12.svg create mode 100644 toolkit/themes/shared/icons/arrow-left.svg create mode 100644 toolkit/themes/shared/icons/arrow-right-12.svg create mode 100644 toolkit/themes/shared/icons/arrow-right.svg create mode 100644 toolkit/themes/shared/icons/arrow-up-12.svg create mode 100644 toolkit/themes/shared/icons/arrow-up.svg create mode 100644 toolkit/themes/shared/icons/autoscroll-horizontal.svg create mode 100644 toolkit/themes/shared/icons/autoscroll-vertical.svg create mode 100644 toolkit/themes/shared/icons/autoscroll.svg create mode 100644 toolkit/themes/shared/icons/badge-blue.svg create mode 100644 toolkit/themes/shared/icons/blocked.svg create mode 100644 toolkit/themes/shared/icons/check-partial.svg create mode 100644 toolkit/themes/shared/icons/check.svg create mode 100644 toolkit/themes/shared/icons/chevron.svg create mode 100644 toolkit/themes/shared/icons/close-12.svg create mode 100644 toolkit/themes/shared/icons/close-fill.svg create mode 100644 toolkit/themes/shared/icons/close.svg create mode 100644 toolkit/themes/shared/icons/columnpicker.svg create mode 100644 toolkit/themes/shared/icons/defaultFavicon.svg create mode 100644 toolkit/themes/shared/icons/delete.svg create mode 100644 toolkit/themes/shared/icons/developer.svg create mode 100644 toolkit/themes/shared/icons/edit-copy.svg create mode 100644 toolkit/themes/shared/icons/edit.svg create mode 100644 toolkit/themes/shared/icons/error.svg create mode 100644 toolkit/themes/shared/icons/experiments.svg create mode 100644 toolkit/themes/shared/icons/folder.svg create mode 100644 toolkit/themes/shared/icons/heart.svg create mode 100644 toolkit/themes/shared/icons/help.svg create mode 100644 toolkit/themes/shared/icons/highlights.svg create mode 100644 toolkit/themes/shared/icons/indicator-private-browsing.svg create mode 100644 toolkit/themes/shared/icons/info-filled.svg create mode 100644 toolkit/themes/shared/icons/info.svg create mode 100644 toolkit/themes/shared/icons/lightbulb.svg create mode 100644 toolkit/themes/shared/icons/link.svg create mode 100644 toolkit/themes/shared/icons/loading.png create mode 100644 toolkit/themes/shared/icons/loading@2x.png create mode 100644 toolkit/themes/shared/icons/more.svg create mode 100644 toolkit/themes/shared/icons/open-in-new.svg create mode 100644 toolkit/themes/shared/icons/page-landscape.svg create mode 100644 toolkit/themes/shared/icons/page-portrait.svg create mode 100644 toolkit/themes/shared/icons/performance.svg create mode 100644 toolkit/themes/shared/icons/plugin-blocked.svg create mode 100644 toolkit/themes/shared/icons/plugin.svg create mode 100644 toolkit/themes/shared/icons/plus.svg create mode 100644 toolkit/themes/shared/icons/pocket-outline.svg create mode 100644 toolkit/themes/shared/icons/pocket.svg create mode 100644 toolkit/themes/shared/icons/print.svg create mode 100644 toolkit/themes/shared/icons/radio.svg create mode 100644 toolkit/themes/shared/icons/reload.svg create mode 100644 toolkit/themes/shared/icons/resizer.svg create mode 100644 toolkit/themes/shared/icons/search-glass.svg create mode 100644 toolkit/themes/shared/icons/security-broken.svg create mode 100644 toolkit/themes/shared/icons/security-warning.svg create mode 100644 toolkit/themes/shared/icons/security.svg create mode 100644 toolkit/themes/shared/icons/settings.svg create mode 100644 toolkit/themes/shared/icons/shortcut.svg create mode 100644 toolkit/themes/shared/icons/sort-arrow.svg create mode 100644 toolkit/themes/shared/icons/trackers.svg create mode 100644 toolkit/themes/shared/icons/trending.svg create mode 100644 toolkit/themes/shared/icons/undo.svg create mode 100644 toolkit/themes/shared/icons/update-icon.svg create mode 100644 toolkit/themes/shared/icons/warning-fill-12.svg create mode 100644 toolkit/themes/shared/icons/warning.svg create mode 100644 toolkit/themes/shared/icons/whatsnew.svg create mode 100644 toolkit/themes/shared/illustrations/about-license.svg create mode 100644 toolkit/themes/shared/illustrations/about-rights.svg create mode 100644 toolkit/themes/shared/illustrations/error-malformed-url.svg create mode 100644 toolkit/themes/shared/in-content/common-shared.css create mode 100644 toolkit/themes/shared/in-content/info-pages.css create mode 100644 toolkit/themes/shared/in-content/wifi.svg create mode 100644 toolkit/themes/shared/media/audio-muted.svg create mode 100644 toolkit/themes/shared/media/audio.svg create mode 100644 toolkit/themes/shared/media/audioNoAudioButton.svg create mode 100644 toolkit/themes/shared/media/castingButton-active.svg create mode 100644 toolkit/themes/shared/media/castingButton-ready.svg create mode 100644 toolkit/themes/shared/media/closed-caption-settings-button.svg create mode 100644 toolkit/themes/shared/media/closedCaptionButton-cc-off.svg create mode 100644 toolkit/themes/shared/media/closedCaptionButton-cc-on.svg create mode 100644 toolkit/themes/shared/media/error.png create mode 100644 toolkit/themes/shared/media/fullscreenEnterButton.svg create mode 100644 toolkit/themes/shared/media/fullscreenExitButton.svg create mode 100644 toolkit/themes/shared/media/imagedoc-darknoise.png create mode 100644 toolkit/themes/shared/media/imagedoc-lightnoise.png create mode 100644 toolkit/themes/shared/media/pause-fill.svg create mode 100644 toolkit/themes/shared/media/picture-in-picture-closed.svg create mode 100644 toolkit/themes/shared/media/picture-in-picture-enter-fullscreen-button.svg create mode 100644 toolkit/themes/shared/media/picture-in-picture-exit-fullscreen-button.svg create mode 100644 toolkit/themes/shared/media/picture-in-picture-open.svg create mode 100644 toolkit/themes/shared/media/picture-in-picture-seekBackward-button.svg create mode 100644 toolkit/themes/shared/media/picture-in-picture-seekForward-button.svg create mode 100644 toolkit/themes/shared/media/pipToggle.css create mode 100644 toolkit/themes/shared/media/play-fill.svg create mode 100644 toolkit/themes/shared/media/stalled.png create mode 100644 toolkit/themes/shared/media/textrecognition.css create mode 100644 toolkit/themes/shared/media/throbber.png create mode 100644 toolkit/themes/shared/media/videocontrols.css create mode 100644 toolkit/themes/shared/menu-scrolling.css create mode 100644 toolkit/themes/shared/menulist-shared.css create mode 100644 toolkit/themes/shared/minimal-toolkit.jar.inc.mn create mode 100644 toolkit/themes/shared/mozapps.inc.mn create mode 100644 toolkit/themes/shared/narrate.css create mode 100644 toolkit/themes/shared/narrate/arrow.svg create mode 100644 toolkit/themes/shared/narrate/back.svg create mode 100644 toolkit/themes/shared/narrate/fast.svg create mode 100644 toolkit/themes/shared/narrate/forward.svg create mode 100644 toolkit/themes/shared/narrate/headphone-active.svg create mode 100644 toolkit/themes/shared/narrate/headphone.svg create mode 100644 toolkit/themes/shared/narrate/slow.svg create mode 100644 toolkit/themes/shared/narrate/start.svg create mode 100644 toolkit/themes/shared/narrate/stop.svg create mode 100644 toolkit/themes/shared/notification.css create mode 100644 toolkit/themes/shared/numberinput.css create mode 100644 toolkit/themes/shared/offlineSupportPages.css create mode 100644 toolkit/themes/shared/pictureinpicture/player.css create mode 100644 toolkit/themes/shared/pictureinpicture/texttracks.css create mode 100644 toolkit/themes/shared/popupnotification.css create mode 100644 toolkit/themes/shared/profileDowngrade.css create mode 100644 toolkit/themes/shared/profileSelection.css create mode 100644 toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg create mode 100644 toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg create mode 100644 toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg create mode 100644 toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg create mode 100644 toolkit/themes/shared/reader/RM-Minus-24x24.svg create mode 100644 toolkit/themes/shared/reader/RM-Plus-24x24.svg create mode 100644 toolkit/themes/shared/reader/RM-Pocket-Glyph-Dark.svg create mode 100644 toolkit/themes/shared/reader/RM-Pocket-Glyph-Sepia.svg create mode 100644 toolkit/themes/shared/reader/RM-Pocket-Glyph.svg create mode 100644 toolkit/themes/shared/reader/RM-Sans-Serif.svg create mode 100644 toolkit/themes/shared/reader/RM-Serif.svg create mode 100644 toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg create mode 100644 toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg create mode 100644 toolkit/themes/shared/search-textbox.css create mode 100644 toolkit/themes/shared/tree.css (limited to 'toolkit/themes/shared') diff --git a/toolkit/themes/shared/aboutCache.css b/toolkit/themes/shared/aboutCache.css new file mode 100644 index 0000000000..5b1b991146 --- /dev/null +++ b/toolkit/themes/shared/aboutCache.css @@ -0,0 +1,67 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +h2 { + margin-top: 2em; +} + +table { + table-layout: fixed; + width: 100%; + margin-bottom: 1em; +} + +#disk, +#memory { + background-color: rgba(0, 0, 0, .1); +} + +th { + width: 14em; + white-space: nowrap; + text-align: end; +} + +td { + font-family: monospace; + word-wrap: break-word; +} + +#col-key { + width: 60%; +} + +#col-dataSize, +#col-fetchCount, +#col-lastModified, +#col-expires { + width: 13%; +} + +#col-pinned { + width: 5em; +} + +#entries > tbody > tr:nth-child(odd) { + background-color: rgba(0, 0, 0, .03); +} + +#entries > tbody > tr:nth-child(even) { + background-color: rgba(0, 0, 0, .06); +} + +#entries > tbody > tr > td { + padding: .5em 0; + text-align: center; +} + +#entries > thead > tr > th { + text-align: center; + white-space: normal; +} + +#entries > thead > tr > th:first-child, +#entries > tbody > tr > td:first-child { + text-align: start; +} diff --git a/toolkit/themes/shared/aboutCacheEntry.css b/toolkit/themes/shared/aboutCacheEntry.css new file mode 100644 index 0000000000..433707d4d8 --- /dev/null +++ b/toolkit/themes/shared/aboutCacheEntry.css @@ -0,0 +1,28 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +body { + display: table; +} + +table { + table-layout: fixed; +} + +th { + width: 12em; + word-wrap: break-word; + vertical-align: top; + text-align: end; +} + +td { + display: block; + font-family: monospace; + white-space: pre-wrap; +} + +#td-key { + word-wrap: break-word; +} diff --git a/toolkit/themes/shared/aboutHttpsOnlyError.css b/toolkit/themes/shared/aboutHttpsOnlyError.css new file mode 100644 index 0000000000..04937d8f45 --- /dev/null +++ b/toolkit/themes/shared/aboutHttpsOnlyError.css @@ -0,0 +1,88 @@ +/* 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/. */ + +.title > h2 { + padding: 0; + margin: 0; + font-size: 17px; + font-weight: 500; +} + +.title { + background-image: url("chrome://global/content/httpsonlyerror/secure-broken.svg"); +} + +em { + font-style: normal; + font-weight: 600; +} + +#insecure-explanation-unavailable { + margin-bottom: 0.5em; +} +#learn-more-container { + margin-block: 0 2em; +} +#explanation-continue { + margin-block: 2em; +} + +.button-container { + display: flex; + flex-flow: row wrap; + justify-content: end; +} + +@media only screen and (max-width: 480px) { + .button-container button { + width: 100%; + margin: 0.66em 0 0; + } +} + +ul > li { + line-height: 1.5em; +} + +.container { + position: relative; +} + +.suggestion-box { + position: absolute; + margin-top: 3em; + background-image: url("chrome://global/skin/icons/lightbulb.svg"); + background-size: 64px; + background-repeat: no-repeat; + -moz-context-properties: fill; + fill: currentColor; + margin-inline-start: -5.5em; + padding-inline-start: 5.5em; + padding-bottom: 3em; + animation: fade-in 300ms ease-out; +} + +.suggestion-box > h2 { + padding: 0; + margin: 0; + font-size: 17px; + font-weight: 500; +} + +@media (max-width: 970px) { + .suggestion-box { + background-image: none; + padding-inline-start: 0; + margin-inline-start: 0; + } +} + +@keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} diff --git a/toolkit/themes/shared/aboutLicense.css b/toolkit/themes/shared/aboutLicense.css new file mode 100644 index 0000000000..9fc7055393 --- /dev/null +++ b/toolkit/themes/shared/aboutLicense.css @@ -0,0 +1,15 @@ +/* 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/. */ + +/* License Illustration */ + +.license-header { + background-image: url("chrome://global/skin/illustrations/about-license.svg"); + background-repeat: no-repeat; + background-position: right center; + min-height: 300px; + display: flex; + align-items: center; + padding-inline-end: 320px; +} diff --git a/toolkit/themes/shared/aboutLogging.css b/toolkit/themes/shared/aboutLogging.css new file mode 100644 index 0000000000..83a172b60c --- /dev/null +++ b/toolkit/themes/shared/aboutLogging.css @@ -0,0 +1,82 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/in-content/common.css"); + +/** Content area **/ +.main-content { + width: min(90%, 1024px); + margin: auto; +} + +.page-subsection { + margin-bottom: 2em; +} + +.form-entry { + /* Center the labels with their checkboxes */ + display: flex; + align-items: center; + margin: 0.3em 0; +} + +:disabled + label { + opacity: 0.5; +} + +#current-log-modules, +#no-log-modules { + font-family: monospace; + margin-bottom: 1em; + word-break: break-word; +} + +#current-log-file, +#no-log-file { + font-family: monospace; +} + +#profiler-configuration, +#log-file-configuration { + /* 16px is the size of the radio button, 6px is its margin + * Then it's properly aligned with the text above. */ + padding-inline-start: calc(16px + 6px); +} + +label { + line-height: 1.8em; +} + +input[type=text] { + box-sizing: border-box; + width: 100%; + font-family: monospace; + + /* This cancels the default margin applied to all inputs in common-shared.css. */ + margin-inline: 0 !important; +} + +.button-row > button:first-of-type { + /* This cancels the default margin applied to all buttons in common-shared.css. */ + margin-inline-start: 0; +} + +.info-box { + padding: 1em; + border-radius: 4px; +} + +.info-box-label { + font-weight: 600; +} + +#error { + background-color: rgba(240, 40, 40, 0.5); + border: 1px solid rgba(240, 40, 40, 0.6); +} + +#some-elements-unavailable { + background-color: var(--in-content-box-info-background); + border-color: var(--in-content-box-border-color); +} diff --git a/toolkit/themes/shared/aboutMemory.css b/toolkit/themes/shared/aboutMemory.css new file mode 100644 index 0000000000..88fa27d501 --- /dev/null +++ b/toolkit/themes/shared/aboutMemory.css @@ -0,0 +1,5 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/content/aboutMemory.css"); diff --git a/toolkit/themes/shared/aboutNetError.css b/toolkit/themes/shared/aboutNetError.css new file mode 100644 index 0000000000..c84a72fce4 --- /dev/null +++ b/toolkit/themes/shared/aboutNetError.css @@ -0,0 +1,221 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/error-pages.css"); + +body { + --warning-color: #ffa436; +} + +@media (prefers-color-scheme: dark) { + body { + --warning-color: #ffbd4f; + } +} + +@media (prefers-contrast) { + body { + --warning-color: var(--in-content-page-color); + } +} + +body.certerror { + width: 100%; +} + +/* Normally, setting e.g. `display: flex` overrides the hidden attribute. + * This allows for element hiding to be controlled entirely in HTML & JS. */ +[hidden] { + display: none !important; +} + +.title { + font-size: 1.75em; +} + +body.captiveportal .title { + background-image: url("chrome://global/skin/in-content/wifi.svg"); +} + +body.certerror .title { + background-image: url("chrome://global/skin/icons/warning.svg"); + color: var(--warning-color); +} + +body.blocked .title { + background-image: url("chrome://global/skin/icons/blocked.svg"); +} + +body.clockSkewError .title { + background-image: none; + background-repeat: no-repeat; +} + +.title-text { + font-weight: 300; + line-height: 1.2; +} + +/* Pressing the retry button will cause the cursor to flicker from a pointer to + * not-allowed. Override the disabled cursor behaviour since we will never show + * the button disabled as the initial state. */ +button:disabled { + cursor: pointer; +} + +#errorWhatToDoTitle { + font-weight: bold; + margin-top: 2em; +} + +#openInNewWindowContainer { + margin-bottom: 0; +} + +#advancedPanelButtonContainer { + background-color: rgba(128, 128, 147, 0.1); + display: flex; + justify-content: end; + padding: 5px; + margin-top: 2em; +} + +#certErrorAndCaptivePortalButtonContainer { + display: flex; +} + +#netErrorButtonContainer > button { + margin-top: 1.2em; +} + +#openPortalLoginPageButton { + margin-inline-start: 0; +} + +#blockingErrorReporting { + padding-bottom: 10px; + /* Pull a bit closer to the top than the other .advanced-panel containers + * as this is just a checkbox. */ + margin-top: 1.2em; +} + +.advanced-panel-container { + width: 100%; + position: absolute; + left: 0; +} + +.trr-message-container { + background-color: var(--in-content-box-background); + border: 1px solid var(--in-content-box-border-color); + border-radius: 4px; + padding: 10px; +} + +#badCertAdvancedPanel { + background-color: var(--in-content-box-background); + border: 1px solid var(--in-content-box-border-color); +} + +.advanced-panel { + margin: 48px auto; + min-width: var(--in-content-container-min-width); + max-width: var(--in-content-container-max-width); +} + +#errorCode { + white-space: nowrap; +} + +#viewCertificate { + margin: 0 3em; +} + +#badCertTechnicalInfo { + margin: 3em 3em 1em; + overflow: auto; + white-space: pre-wrap; +} + +#certificateErrorDebugInformation { + background-color: var(--in-content-box-info-background) !important; + border-top: 1px solid var(--in-content-border-color); + width: 100%; + padding: 1em 3%; + box-sizing: border-box; +} + +#certificateErrorText { + font-family: monospace; + white-space: pre-wrap; + padding: 1em 0; + display: flex; + flex-wrap: wrap; +} + +#cert_domain_link:not([href]) { + color: var(--in-content-page-color); + text-decoration: none; +} + +.clockSkewError .try-again { + margin-top: 0.3em; +} + +#errorLongDesc strong { + font-weight: 600; +} + +#errorShortDesc { + font-size: 1.15em; + line-height: 1.3; + font-weight: 400; + margin-top: 10px; +} + +@media only screen and (max-width: 959px) { + #certificateErrorText { + /* The encoded certificate chain looks better when we're not + * wrapping words on big screens, but at some point we need + * to wrap to avoid overflowing */ + word-wrap: anywhere; + } +} + +@media only screen and (max-width: 480px) { + #badCertTechnicalInfo { + margin: 10px 10px 5px; + } + + #viewCertificate { + margin: 0 10px; + } + + #errorCode { + /* Break the error code to avoid long codes overflowing the screen */ + white-space: normal; + word-wrap: anywhere; + } +} + +@media (max-width: 970px) { + body.certerror .title { + /* !important is necessary here until Bug 1723718 is resolved */ + background-image: url("chrome://global/skin/icons/warning.svg") !important; + background-position: top left; + padding-top: 60px; + margin-top: -60px; + } + /* Reduce the negative margin on small viewport sizes to avoid exceeding the + * 38px body vertical padding error-pages.css sets, leaving 8px space: */ + @media (max-height: 480px) { + body.certerror .title { + margin-top: -30px; + } + } + + body.certerror .title:dir(rtl) { + background-position-x: right; + } +} diff --git a/toolkit/themes/shared/aboutNetworking.css b/toolkit/themes/shared/aboutNetworking.css new file mode 100644 index 0000000000..ce36ed1b66 --- /dev/null +++ b/toolkit/themes/shared/aboutNetworking.css @@ -0,0 +1,80 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/in-content/common.css"); + +html { + height: 100%; +} + +body { + display: flex; + align-items: stretch; + height: 100%; +} + +#sectionTitle { + float: inline-start; +} + +#refreshDiv { + display: flex; + align-items: center; + justify-content: flex-end; + margin-bottom: 0.5em; +} + +#refreshButton { + margin-top: 0; +} + +/** Categories **/ + +.category { + cursor: pointer; + /* Center category names */ + display: flex; + align-items: center; +} + +.category .category-name { + pointer-events: none; +} + +@media (max-width: 830px){ + #categories > .category { + padding-inline-start: 5px; + margin-inline-start: 0; + } +} + +/** Content area **/ + +.main-content { + flex: 1; +} + +.tab { + padding: 0.5em 0; +} + +.tab table { + width: 100%; +} + +th, td, table { + border-collapse: collapse; + border: none; + text-align: start; +} + +th { + padding-bottom: 0.5em; + font-size: larger; +} + +td { + padding-bottom: 0.25em; + border-bottom: 1px solid var(--in-content-border-color); +} diff --git a/toolkit/themes/shared/aboutProfiles.css b/toolkit/themes/shared/aboutProfiles.css new file mode 100644 index 0000000000..ed8bc729fc --- /dev/null +++ b/toolkit/themes/shared/aboutProfiles.css @@ -0,0 +1,17 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/in-content/info-pages.css"); + +#profiles { + clear: both; +} + +button { + margin-inline: 0 8px; +} + +.opendir { + margin-inline-start: 3px; +} diff --git a/toolkit/themes/shared/aboutReader.css b/toolkit/themes/shared/aboutReader.css new file mode 100644 index 0000000000..966bad06a4 --- /dev/null +++ b/toolkit/themes/shared/aboutReader.css @@ -0,0 +1,910 @@ +/* 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/. */ + +/* Avoid adding ID selector rules in this style sheet, since they could + * inadvertently match elements in the article content. */ + +:root { + --grey-90-a10: rgba(12, 12, 13, 0.1); + --grey-90-a20: rgba(12, 12, 13, 0.2); + --grey-30: #d7d7db; + --light-theme-background: #fff; + --light-theme-foreground: rgb(21, 20, 26); + --dark-theme-background: rgb(28, 27, 34); + --dark-theme-foreground: rgb(251, 251, 254); + --body-padding: 64px; + --font-size: 12; + --content-width: 22em; + --line-height: 1.6em; +} + +body { + --main-background: var(--light-theme-background); + --main-foreground: var(--light-theme-foreground); + --primary-color: rgb(0, 97, 224); + --toolbar-border: var(--grey-90-a20); + --toolbar-transparent-border: transparent; + --toolbar-box-shadow: var(--grey-90-a10); + --toolbar-button-background: transparent; + --toolbar-button-background-hover: rgba(207, 207, 216, 0.66); + --toolbar-button-foreground-hover: var(--icon-fill); + --toolbar-button-background-active: rgb(207, 207, 216); + --toolbar-button-foreground-active: var(--primary-color); + --toolbar-button-border: transparent; + --toolbar-button-border-hover: var(--toolbar-button-border); + --toolbar-button-border-active: var(--toolbar-button-border); + --tooltip-background: var(--toolbar-button-background-active); + --tooltip-foreground: var(--icon-fill); + --tooltip-border: transparent; + --popup-background: #fff; + --popup-border: rgba(0, 0, 0, 0.12); + --opaque-popup-border: rgb(224, 224, 224); + --popup-line: var(--grey-30); + --popup-shadow: rgba(49, 49, 49, 0.3); + --popup-button-background: rgba(207, 207, 216, 0.33); + --popup-button-foreground: var(--main-foreground); + --popup-button-background-hover: var(--toolbar-button-background-hover); + --popup-button-foreground-hover: var(--main-foreground); + --popup-button-background-active: var(--toolbar-button-background-active); + --popup-button-border: var(--popup-border); + --selected-background: rgba(0, 97, 224, 0.3); + --selected-border: var(--primary-color); + --outline-focus-color: var(--primary-color); + --font-value-background: rgb(240, 240, 244); + --font-value-border: var(--grey-30); + --icon-fill: rgb(91, 91, 102); + --icon-disabled-fill: rgba(91, 91, 102, 0.4); + --text-selected-background: var(--selected-background); + --text-selected-foreground: inherit; + --link-foreground: var(--primary-color); + --link-selected-background: var(--selected-background); + --link-selected-foreground: #333; + --visited-link-foreground: #b5007f; + /* light colours */ +} + +body.sepia { + --main-background: rgb(244, 236, 216); + --main-foreground: rgb(91, 70, 54); + --toolbar-border: var(--main-foreground); + --icon-fill: var(--main-foreground); + --icon-disabled-fill: rgba(91, 70, 54, 0.4); +} + +body.dark { + --main-background: var(--dark-theme-background); + --main-foreground: var(--dark-theme-foreground); + --primary-color: rgb(0, 221, 255); + --toolbar-border: rgba(249, 249, 250, 0.2); + --toolbar-box-shadow: black; + --toolbar-button-background-hover: rgb(82, 82, 94); + --toolbar-button-background-active: rgb(91, 91, 102); + --popup-background: rgb(66, 65, 77); + --opaque-popup-border: #434146; + --popup-line: rgba(249, 249, 250, 0.1); + --popup-button-background: rgb(43, 42, 51); + --selected-background: rgba(0, 221, 255, 0.3); + --font-value-background: rgba(249, 249, 250, 0.15); + --font-value-border: #656468; + --icon-fill: rgb(251, 251, 254); + --icon-disabled-fill: rgba(251, 251, 254, 0.4); + --link-selected-foreground: #fff; + --visited-link-foreground: #e675fd; + /* dark colours */ +} + +body.hcm { + --main-background: Canvas; + --main-foreground: CanvasText; + --primary-color: SelectedItem; + --toolbar-border: CanvasText; + /* We need a true transparent but in HCM this would compute to an actual color, + so select the page's background color instead: */ + --toolbar-transparent-border: Canvas; + --toolbar-box-shadow: Canvas; + --toolbar-button-background: ButtonFace; + --toolbar-button-background-hover: SelectedItem; + --toolbar-button-foreground-hover: SelectedItemText; + --toolbar-button-background-active: SelectedItemText; + --toolbar-button-foreground-active: SelectedItem; + --toolbar-button-border: ButtonText; + --toolbar-button-border-hover: SelectedItemText; + --toolbar-button-border-active: SelectedItem; + --tooltip-background: Canvas; + --tooltip-foreground: CanvasText; + --tooltip-border: CanvasText; + --popup-background: Canvas; + --popup-border: CanvasText; + --opaque-popup-border: CanvasText; + --popup-line: CanvasText; + --popup-button-background: ButtonFace; + --popup-button-foreground: ButtonText; + --popup-button-background-hover: ButtonText; + --popup-button-foreground-hover: ButtonFace; + --popup-button-background-active: ButtonText; + --popup-button-border: ButtonText; + --selected-background: Canvas; + --outline-focus-color: CanvasText; + --font-value-background: Canvas; + --font-value-border: CanvasText; + --icon-fill: ButtonText; + --icon-disabled-fill: GrayText; + --text-selected-background: SelectedItem; + --text-selected-foreground: SelectedItemText; + --link-foreground: LinkText; + --link-selected-background: SelectedItem; + --link-selected-foreground: SelectedItemText; + --visited-link-foreground: VisitedText; +} + +body { + margin: 0; + padding: var(--body-padding); + background-color: var(--main-background); + color: var(--main-foreground); +} + +body.loaded { + transition: color 0.4s, background-color 0.4s; +} + +*::selection { + background-color: var(--text-selected-background); + color: var(--text-selected-foreground); +} + +a { + border-radius: 2px; +} + +a::selection { + background-color: var(--link-selected-background); + color: var(--link-selected-foreground); +} + +a:focus-visible { + outline: 2px solid var(--outline-focus-color); + outline-offset: 1px; +} + +body.sans-serif { + font-family: Helvetica, Arial, sans-serif; +} + +body.serif { + font-family: Georgia, "Times New Roman", serif; +} + +/* Override some controls and content styles based on color scheme */ + +blockquote { + border-inline-start: 2px solid var(--main-foreground) !important; +} + +.light-button, +.auto-button { + color: var(--light-theme-foreground); + background-color: var(--light-theme-background); +} + +@media (prefers-color-scheme: dark) { + .auto-button { + color: var(--dark-theme-foreground); + background-color: var(--dark-theme-background); + } +} + +.dark-button { + color: var(--dark-theme-foreground); + background-color: var(--dark-theme-background); +} + +.sepia-button { + color: #5b4636; + background-color: #f4ecd8; +} + +/* Loading/error message */ + +.reader-message { + margin-top: 40px; + display: none; + text-align: center; + width: 100%; + font-size: 0.9em; +} + +/* Detector element to see if we're at the top of the doc or not. */ +.top-anchor { + position: absolute; + top: 0; + width: 0; + height: 5px; + pointer-events: none; +} + +/* 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: underline var(--main-foreground) !important; + color: var(--link-foreground); +} + +.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; + padding: 0; + font-style: italic; +} + +.header > .meta-data { + font-size: 0.65em; + margin: 0 0 15px; +} + +.reader-estimated-time { + text-align: match-parent; +} + +/* Controls toolbar */ + +.toolbar-container { + position: sticky; + z-index: 2; + top: 32px; + height: 0; /* take up no space, so body is at the top. */ + + /* As a stick container, we're positioned relative to the body. Move us to + * the edge of the viewport using margins, and take the width of + * the body padding into account for calculating our width. + */ + margin-inline-start: calc(-1 * var(--body-padding)); + width: max(var(--body-padding), calc((100% - var(--content-width)) / 2 + var(--body-padding))); + font-size: var(--font-size); /* Needed to ensure `em` units match, is reset for .reader-controls */ +} + +.toolbar { + padding-block: 16px; + border: 1px solid var(--toolbar-border); + border-radius: 6px; + box-shadow: 0 2px 8px var(--toolbar-box-shadow); + + width: 32px; /* basic width, without padding/border */ + + /* padding should be 16px, except if there's not enough space for that, in + * which case use half the available space for padding (=25% on each side). + * The 34px here is the width + borders. We use a variable because we need + * to know this size for the margin calculation. + */ + --inline-padding: min(16px, calc(25% - 0.25 * 34px)); + padding-inline: var(--inline-padding); + + /* Keep a maximum of 96px distance to the body, but center once the margin + * gets too small. We need to set the start margin, however... + * To center, we'd want 50% of the container, but we'd subtract half our + * own width (16px) and half the border (1px) and the inline padding. + * When the other margin would be 96px, we want 100% - 96px - the complete + * width of the actual toolbar (34px + 2 * padding) + */ + margin-inline-start: max(calc(50% - 17px - var(--inline-padding)), calc(100% - 96px - 34px - 2 * var(--inline-padding))); + + font-family: Helvetica, Arial, sans-serif; + list-style: none; + user-select: none; + + /* Set focus outlines to the primary color without having to specify it + * per each element. */ + accent-color: var(--primary-color); +} + +@media (prefers-reduced-motion: no-preference) { + .toolbar { + transition-property: border-color, box-shadow; + transition-duration: 250ms; + } + + .toolbar .toolbar-button { + transition-property: opacity; + transition-duration: 250ms; + } + + .toolbar-container.scrolled > .toolbar:not(:hover, :focus-within) { + border-color: var(--toolbar-transparent-border); + box-shadow: 0 2px 8px transparent; + } + + .toolbar-container.scrolled > .toolbar:not(:hover, :focus-within) > .reader-controls:not(.dropdown-open) .toolbar-button { + opacity: 0.6; + } + + .toolbar-container.transition-location { + transition-duration: 250ms; + transition-property: width; + } +} + +.toolbar-container.overlaps .toolbar-button { + opacity: 0.1; +} + +.dropdown-open .toolbar { + border-color: var(--toolbar-transparent-border); + box-shadow: 0 2px 8px transparent; +} + +.reader-controls { + /* We use `em`s above this node to get it to the right size. However, + * the UI inside the toolbar should use a fixed, smaller size. */ + font-size: 11px; +} + +button { + -moz-context-properties: fill; + color: var(--main-foreground); + fill: var(--icon-fill); +} + +button:disabled { + /* !important to override other uses of `fill` where the specificity there is greater. */ + fill: var(--icon-disabled-fill) !important; +} + +.toolbar button::-moz-focus-inner { + border: 0; +} + +.toolbar-button { + position: relative; + width: 32px; + height: 32px; + padding: 0; + border: 1px solid var(--toolbar-button-border); + border-radius: 4px; + margin: 4px 0; + background-color: var(--toolbar-button-background); + background-size: 16px 16px; + background-position: center; + background-repeat: no-repeat; +} + +.toolbar-button:hover { + background-color: var(--toolbar-button-background-hover); + border-color: var(--toolbar-button-border-hover); + fill: var(--toolbar-button-foreground-hover); +} + +.open .toolbar-button, +.toolbar-button:hover:active { + background-color: var(--toolbar-button-background-active); + color: var(--toolbar-button-foreground-active); + border-color: var(--toolbar-button-border-active); + fill: var(--toolbar-button-foreground-active); +} + +.toolbar-button:focus-visible { + outline: 2px solid var(--outline-focus-color); + outline-offset: 2px; +} + +.hover-label { + position: relative; + inset-inline-start: 36px; + line-height: 16px; + white-space: pre; /* make sure we don't wrap */ + background-color: var(--tooltip-background); + color: var(--tooltip-foreground); + padding: 4px 8px; + border: 1px solid var(--tooltip-border); + border-radius: 2px; + visibility: hidden; + pointer-events: none; + /* Put above .dropdown .dropdown-popup, which has z-index: 1000. */ + z-index: 1001; +} + +/* Show the hover tooltip on non-dropdown buttons. */ +.toolbar-button:not(.dropdown-toggle):hover > .hover-label, +.toolbar-button:not(.dropdown-toggle):focus-visible > .hover-label, +/* Show the hover tooltip for dropdown buttons unless its dropdown is open. */ +:not(.open) > li > .dropdown-toggle:hover > .hover-label, +:not(.open) > li > .dropdown-toggle:focus-visible > .hover-label { + visibility: visible; +} + +.dropdown { + text-align: center; + list-style: none; + margin: 0; + padding: 0; + position: relative; +} + +.dropdown li { + margin: 0; + padding: 0; +} + +/* Popup */ + +.dropdown .dropdown-popup { + text-align: start; + position: absolute; + inset-inline-start: 40px; + z-index: 1000; + background-color: var(--popup-background); + visibility: hidden; + border-radius: 4px; + border: 1px solid var(--popup-border); + box-shadow: 0 0 10px 0 var(--popup-shadow); + top: 0; +} + +.open > .dropdown-popup { + visibility: visible; +} + +.dropdown-arrow { + position: absolute; + height: 24px; + width: 16px; + inset-inline-start: -16px; + background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg"); + display: block; + -moz-context-properties: fill, stroke; + fill: var(--popup-background); + stroke: var(--opaque-popup-border); + pointer-events: none; +} + +.dropdown-arrow:dir(rtl) { + transform: scaleX(-1); +} + +/* Align the style dropdown arrow (narrate does its own) */ +.style-dropdown .dropdown-arrow { + top: 7px; +} + +/* Font style popup */ + +.radio-button { + /* We visually hide these, but we keep them around so they can be focused + * and changed by interacting with them via the label, or the keyboard, or + * assistive technology. + */ + opacity: 0; + pointer-events: none; + position: absolute; +} + +.radiorow, +.buttonrow { + display: flex; + align-content: center; + justify-content: center; +} + +.content-width-value, +.font-size-value, +.line-height-value { + box-sizing: border-box; + width: 36px; + height: 20px; + line-height: 20px; + display: flex; + justify-content: center; + align-content: center; + margin: auto; + border-radius: 10px; + border: 1px solid var(--font-value-border); + background-color: var(--font-value-background); +} + +.buttonrow > button { + border: 0; + height: 60px; + width: 90px; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + fill: var(--popup-button-foreground); +} + +.buttonrow > button:enabled:hover { + background-color: var(--popup-button-background-hover); + fill: var(--popup-button-foreground-hover); +} + +.buttonrow > button:enabled:hover:active { + background-color: var(--popup-button-background-active); +} + +.buttonrow > button:enabled:focus-visible { + outline: 2px solid var(--outline-focus-color); + outline-offset: -2px; +} + +.radiorow:not(:last-child), +.buttonrow:not(:last-child) { + border-bottom: 1px solid var(--popup-line); +} + +body.hcm .buttonrow.line-height-buttons { + /* On HCM the .color-scheme-buttons row is hidden, so remove the border from the row above it */ + border-bottom: none; +} + +.radiorow > label { + position: relative; + box-sizing: border-box; + border-radius: 2px; + border: 2px solid var(--popup-button-border); +} + +.radiorow > label[checked] { + border-color: var(--selected-border); +} + +/* For the hover style, we draw a line under the item by means of a + * pseudo-element. Because these items are variable height, and + * because their contents are variable height, position it absolutely, + * and give it a width of 100% (the content width) + 4px for the 2 * 2px + * border width. + */ +.radiorow > input[type=radio]:focus-visible + label::after, +.radiorow > label:hover::after { + content: ""; + display: block; + border-bottom: 2px solid var(--selected-border); + border-radius: 4px; + width: calc(100% + 4px); + position: absolute; + /* to skip the 2 * 2px border + 2px spacing. */ + bottom: -6px; + /* Match the start of the 2px border of the element: */ + inset-inline-start: -2px; +} + +.font-type-buttons > label { + height: 64px; + width: 105px; + /* Slightly more space between these items. */ + margin: 10px; + /* Center the Sans-serif / Serif labels */ + text-align: center; + background-size: 63px 39px; + background-repeat: no-repeat; + background-position: center 18px; + background-color: var(--popup-button-background); + color: var(--popup-button-foreground); + fill: currentColor; + -moz-context-properties: fill; + /* This mostly matches baselines, but because of differences in font + * baselines between serif and sans-serif, this isn't always enough. */ + line-height: 1; + padding-top: 2px; +} + +.font-type-buttons > label[checked] { + background-color: var(--selected-background); +} + +.sans-serif-button { + font-family: Helvetica, Arial, sans-serif; + background-image: url("chrome://global/skin/reader/RM-Sans-Serif.svg"); +} + +/* Tweak padding to match the baseline on mac */ +:root[platform=macosx] .sans-serif-button { + padding-top: 3px; +} + +.serif-button { + font-family: Georgia, "Times New Roman", serif; + background-image: url("chrome://global/skin/reader/RM-Serif.svg"); +} + +body.hcm .color-scheme-buttons { + /* Disallow selecting themes when HCM is on. */ + display: none; +} + +.color-scheme-buttons > label { + padding: 12px; + height: 34px; + font-size: 12px; + /* Center the labels horizontally as well as vertically */ + display: inline-flex; + align-items: center; + justify-content: center; + /* We want 10px between items, but there's no margin collapsing in flexbox. */ + margin: 10px 5px; +} + +.color-scheme-buttons > input:first-child + label { + margin-inline-start: 10px; +} + +.color-scheme-buttons > label:last-child { + margin-inline-end: 10px; +} + +/* Toolbar icons */ + +.close-button { + background-image: url("chrome://global/skin/icons/close.svg"); +} + +.style-button { + background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg"); +} + +.minus-button { + background-size: 18px 18px; + background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg"); +} + +.plus-button { + background-size: 18px 18px; + 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"); +} + +/* Mirror the line height buttons if the article is RTL. */ +.reader-controls[articledir="rtl"] .line-height-minus-button, +.reader-controls[articledir="rtl"] .line-height-plus-button { + transform: scaleX(-1); +} + +@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.sys.mjs, so that + * Readability.js doesn't strip them out */ + +.container { + margin: 0 auto; + font-size: var(--font-size); + max-width: var(--content-width); + line-height: var(--line-height); +} + +pre { + font-family: inherit; +} + +.moz-reader-content { + display: none; + font-size: 1em; +} + +@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 !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: var(--link-foreground); +} + +.moz-reader-content a:visited { + color: var(--visited-link-foreground); +} + +.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; + 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-inline: 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 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; +} + +table, +th, +td { + border: 1px solid currentColor; + border-collapse: collapse; + padding: 6px; + vertical-align: top; +} + +table { + margin: 5px; +} + +/* Visually hide (but don't display: none) screen reader elements */ +.moz-reader-content .visually-hidden, +.moz-reader-content .visuallyhidden, +.moz-reader-content .sr-only { + display: inline-block; + width: 1px; + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + border-width: 0; +} + +/* Hide elements with common "hidden" class names */ +.moz-reader-content .hidden, +.moz-reader-content .invisible { + display: none; +} + +/* Enforce wordpress and similar emoji/smileys aren't sized to be full-width, + * see bug 1399616 for context. */ +.moz-reader-content img.wp-smiley, +.moz-reader-content img.emoji { + display: inline-block; + border-width: 0; + /* height: auto is implied from `.moz-reader-content *` rule. */ + width: 1em; + margin: 0 .07em; + padding: 0; +} + +.reader-show-element { + display: initial; +} + +/* Provide extra spacing for images that may be aided with accompanying element such as
*/ +.moz-reader-block-img:not(:last-child) { + margin-block-end: 12px; +} + +.moz-reader-wide-table { + overflow-x: auto; + display: block; +} + +pre code { + background-color: var(--main-background); + border: 1px solid var(--main-foreground); + display: block; + overflow: auto; +} diff --git a/toolkit/themes/shared/aboutReaderPocket.css b/toolkit/themes/shared/aboutReaderPocket.css new file mode 100644 index 0000000000..ff163d7798 --- /dev/null +++ b/toolkit/themes/shared/aboutReaderPocket.css @@ -0,0 +1,246 @@ +/* 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/. */ + +#pocket-cta-container { + box-shadow: 0 2px 8px var(--toolbar-box-shadow); + margin: calc(var(--body-padding) * -1); + margin-top: 20px; + padding: 32px 0; + position: relative; +} + +.pocket-cta-container-cta-only #pocket-cta-only, +.pocket-cta-container-cta-and-recs #pocket-cta-and-recs { + display: block; +} + +.pocket-cta { + padding-inline-start: 90px; + background: url("chrome://global/skin/reader/RM-Pocket-Glyph.svg") no-repeat 16px 4px; + line-height: 1.5; +} + +body.dark .pocket-cta { + background-image: url("chrome://global/skin/reader/RM-Pocket-Glyph-Dark.svg"); +} + +body.sepia .pocket-cta { + background-image: url("chrome://global/skin/reader/RM-Pocket-Glyph-Sepia.svg"); +} + +.pocket-cta-inner { + width: 936px; + margin: auto; + display: none; +} + +.pocket-cta-header { + font-weight: 900; + font-size: 20px; + line-height: 1.2; +} + +.pocket-cta-subhead { + margin: 4px 0 24px; + line-height: 1.5; +} + +.pocket-btn { + background: #008078; + border-radius: 4px; + border: 0; + color: #FBFBFE; + font-size: 16px; + padding: 12px 24px; + text-decoration: none; + text-align: center; +} + +.pocket-btn:hover, +.pocket-btn:focus, +.pocket-btn:active { + background: #004d48; +} + +.pocket-dismiss-cta { + cursor: pointer; + display: inline-block; + position: absolute; + inset-inline-end: 80px; + top: calc(50% - 9px); + border: 0; + width: 18px; + height: 18px; + background: no-repeat center/contain url("chrome://global/skin/icons/close.svg"); +} + +.pocket-btn-add { + background: no-repeat left center url("chrome://global/skin/icons/pocket-outline.svg"); + fill: #5B5B66; + background-size: 16px; + border: 0; + padding-inline-start: 20px; + font-size: 16px; + color: #5B5B66; + cursor: pointer; +} + +body.dark .pocket-btn-add { + fill: #eee; + color: #eee; +} + +.pocket-btn-add:hover, +body.dark .pocket-btn-add:hover { + fill: #EF4056; +} + +.pocket-btn-add.saved, +body.dark .pocket-btn-add.saved { + background-image: url("chrome://global/skin/icons/pocket.svg"); +} + +.pocket-collapse-recs { + cursor: pointer; + background: no-repeat center/contain url("chrome://global/skin/icons/arrow-down.svg"); + padding: 0; + margin: 0; + border: 0; + width: 18px; + height: 30px; +} + +.pocket-collapse-recs.closed { + transform: rotate(-90deg); +} + +.pocket-recs-top { + display: flex; +} + +.pocket-recs-top .col:nth-child(2) { + padding-inline-start: 8px; +} + +.pocket-recs { + display: flex; + justify-content: space-between; + margin-bottom: 14px; +} + +.pocket-recs.closed { + display: none; +} + +.pocket-recs p { + text-align: start; +} + +.pocket-rec { + padding: 16px 0; + width: 31%; +} + +.pocket-rec-top { + display: flex; + text-decoration: none; +} + +.pocket-sign-up-wrapper { + text-align: center; +} + +.pocket-rec .pocket-rec-title { + font-style: normal; + font-weight: bold; + font-size: 16px; + line-height: 24px; + color: var(--main-foreground); +} + +.pocket-rec .pocket-rec-thumb { + width: 66px; + height: 66px; + filter: drop-shadow(0px 2px 6px rgba(58, 57, 68, 0.2)); + border-radius: 4px; + margin-inline-start: 16px; + visibility: hidden; +} + +.pocket-rec .pocket-rec-thumb.pocket-rec-thumb-loaded { + visibility: visible; +} + +.pocket-rec .pocket-rec-meta { + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 20px; + color: #5B5B66; +} + +body.dark .pocket-rec .pocket-rec-meta { + color: #eee; +} + +.pocket-cta-container-logged-in #pocket-cta-only .pocket-sign-up, +.pocket-cta-container-logged-out #pocket-cta-only .pocket-discover-more { + display: none; +} + +/* Medium breakpoint */ +@media (max-width: 1128px) { + .pocket-cta-inner { + width: 600px; + } + + .pocket-dismiss-cta { + inset-inline-end: 40px; + } + + .pocket-rec { + width: 48%; + } + + .pocket-rec:nth-child(3) { + display: none; + } +} + +/* Small breakpoint */ +@media (max-width: 767px) { + .pocket-cta-inner { + width: 330px; + text-align: center; + } + + .pocket-cta-header, + .pocket-cta-subhead, + .pocket-rec-bottom, + .pocket-rec-title { + text-align: start; + } + + .pocket-cta { + padding: 66px 0 0; + background: url("chrome://global/skin/reader/RM-Pocket-Glyph.svg") no-repeat center 0; + } + + .pocket-dismiss-cta { + inset-inline-end: 20px; + top: 20px; + } + + .pocket-recs { + display: block; + } + + .pocket-rec { + width: 100%; + } + + .pocket-rec:nth-child(2) { + display: block; + } +} diff --git a/toolkit/themes/shared/aboutRights.css b/toolkit/themes/shared/aboutRights.css new file mode 100644 index 0000000000..c988defaf7 --- /dev/null +++ b/toolkit/themes/shared/aboutRights.css @@ -0,0 +1,19 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* Rights Illustration */ + +.rights-header { + background-image: url("chrome://global/skin/illustrations/about-rights.svg"); + background-repeat: no-repeat; + background-position: right center; + min-height: 300px; + display: flex; + align-items: center; + padding-inline-end: 320px; +} + +.rights-header:dir(rtl) { + background-position: left center; +} diff --git a/toolkit/themes/shared/aboutServiceWorkers.css b/toolkit/themes/shared/aboutServiceWorkers.css new file mode 100644 index 0000000000..857050460f --- /dev/null +++ b/toolkit/themes/shared/aboutServiceWorkers.css @@ -0,0 +1,33 @@ +/* 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/. */ + +.warningBackground { + display: none; + background-color: var(--in-content-page-background); + width: 100%; + height: 100%; + z-index: 10; + top: 0; + inset-inline-start: 0; + position: fixed; +} + +.warningMessage { + min-width: 330px; + max-width: 50em; + margin: 4em auto; + border: 1px solid var(--in-content-box-border-color); + border-radius: 10px; + padding: 3em; + background-color: var(--in-content-box-background); + text-align: center; +} + +.active { + display: block; +} + +.inactive { + display: none; +} diff --git a/toolkit/themes/shared/aboutSupport.css b/toolkit/themes/shared/aboutSupport.css new file mode 100644 index 0000000000..cfec5cdb21 --- /dev/null +++ b/toolkit/themes/shared/aboutSupport.css @@ -0,0 +1,91 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/in-content/info-pages.css"); + +#contents { + clear: both; +} + +.major-section { + margin-block: 2em 1em; + font-size: large; + text-align: start; + font-weight: bold; +} + +button { + margin-inline: 0 8px; +} + +th.title-column { + white-space: nowrap; + width: 0; + font-size: medium; +} + +td.integer { + text-align: end; + font-family: monospace; +} + +#update-dir-row > td:dir(rtl), +#profile-row > td:dir(rtl) { + /* Overrides info-pages.css to display the buttons in the right order compared to the text */ + unicode-bidi: normal; +} + +.prefs-table { + table-layout: fixed; +} + +.pref-name { + width: 70%; + white-space: nowrap; + overflow: hidden; +} + +.pref-value { + width: 30%; + white-space: nowrap; + overflow: hidden; +} + +#crashes-table th:first-child { + width: 50%; +} + +#features-table th:first-child, +#remote-processes-table th:first-child { + width: 30%; +} + +#features-table th:nth-child(2) { + width: 20%; +} + +#reset-box, +#safe-mode-box { + display: none; +} + +#reset-box > h3 { + margin-top: 0; +} + +.action-box button { + display: block; +} + +#enumerate-database-result, +#verify-place-result { + max-height: 200px; + overflow: auto; + text-align: left; + direction: ltr; +} + +.hidden { + display: none; +} diff --git a/toolkit/themes/shared/alert.css b/toolkit/themes/shared/alert.css new file mode 100644 index 0000000000..e4c86fe15a --- /dev/null +++ b/toolkit/themes/shared/alert.css @@ -0,0 +1,211 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/global.css"); + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +#alertBox { + border: 1px solid threedshadow; + background-color: -moz-Dialog; + color: -moz-DialogText; +} + +@media (-moz-platform: windows) { + #alertNotification { + appearance: none; + background: transparent; + } + + #alertBox { + margin: 10px; + border-radius: 1px; + box-shadow: 0 2px 10px rgba(0,0,0,0.59); + } + + @media (-moz-windows-default-theme) and (prefers-color-scheme: light) { + #alertBox { + border-color: rgba(107,107,107,.3); + background-color: rgba(255,255,255,.9); + color: rgba(0,0,0,.9); + } + } +} + +@media (-moz-platform: macos) { + #alertNotification { + appearance: none; + background: transparent; + } + + #alertBox { + border-radius: 1px; + } +} + +#alertBox[animate] { + animation-timing-function: cubic-bezier(.12,1.23,.48,1.09); +} + +#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; +} + +#alertBox[animate]:not([clicked], [closing]):hover { + /* !important is necessary because CSS animations have highest + importance in the cascade with exception to !important rules. */ + opacity: 1 !important; +} + +@keyframes alert-animation { + from { + opacity: 0; + } + 5% { + opacity: 1; + } + 95% { + opacity: 1; + } + to { + opacity: 0; + } +} + +@keyframes alert-clicked-animation { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +@keyframes alert-closing-animation { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +#alertIcon { + margin-top: 6px; + margin-inline-start: 8px; + margin-inline-end: 0; + margin-bottom: 0; + width: 16px; + min-height: 16px; + max-height: 16px; +} + +@media (resolution: 2dppx) { + #alertIcon { + image-rendering: -moz-crisp-edges; + } +} + +#alertImage { + width: 80px; + height: 80px; + max-width: 80px; + max-height: 80px; + object-fit: scale-down; + margin: 0 7px 7px; +} + +.alertTextBox { + padding-top: 4px; + /* The text box width is increased to make up for the lack of image when one + is not provided. 349px is the text box width when a picture is present, + 255px, plus the width of the image, 80px, and the margins, 7px each. */ + width: 349px; +} + +#alertBox[hasImage] > box > #alertTextBox { + width: 255px; +} + +#alertBox:not([hasImage]) > box > #alertTextBox { + padding-inline-start: 8px; +} + +#alertTextLabel { + padding-inline-end: 8px; +} + +.alertTitle { + flex: 1; + font-weight: bold; + padding: 6px 8px 0; + width: 255px; +} + +#alertFooter { + align-items: flex-start; +} + +#alertBox:not([hasOrigin]) > box > #alertTextBox, +#alertFooter { + padding-bottom: 5px; +} + +#alertSourceLabel { + flex: 1; + font-size: 83.334%; + color: GrayText; +} + +#alertSettings { + appearance: none; + background-color: transparent; + border-width: 0; + border-radius: 20px; + min-width: 0; + list-style-image: url("chrome://global/skin/icons/settings.svg"); + -moz-context-properties: fill; + fill: currentColor; + margin-inline-end: 4px; + margin-bottom: 0; +} + +#alertSettings > .button-box { + padding: 0; +} + +#alertSettings .button-icon { + margin: 0; +} + +#alertSettings:hover, +#alertSettings[open] { + fill: #ddd; +} + +#alertSettings:hover { + background-color: rgb(128,128,128); +} + +#alertSettings[open], +#alertSettings:hover:active { + background-color: rgb(102,102,102); +} + +#alertSettings[focusedViaMouse]:-moz-focusring { + outline: none; +} + +#alertSettings > .button-box > .button-menu-dropmarker, +#alertSettings > .button-box > .box-inherit > .button-text { + display: none; +} diff --git a/toolkit/themes/shared/appPicker.css b/toolkit/themes/shared/appPicker.css new file mode 100644 index 0000000000..aa4b905797 --- /dev/null +++ b/toolkit/themes/shared/appPicker.css @@ -0,0 +1,33 @@ +/* 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/. */ + + +#app-picker { + min-width: 320px; +} + +#content-description { + font-weight: bold; +} + +#app-picker-listbox { + height: 212px; +} + +#app-picker-listbox > richlistitem { + align-items: center; +} + +#content-icon, +#app-picker-listbox > richlistitem > image { + margin: 5px; + width: 32px; + height: 32px; +} + +#app-picker-listbox > richlistitem > label { + margin: 0px; + padding: 5px; + white-space: nowrap; +} diff --git a/toolkit/themes/shared/arrowscrollbox.css b/toolkit/themes/shared/arrowscrollbox.css new file mode 100644 index 0000000000..ff8cbec3cc --- /dev/null +++ b/toolkit/themes/shared/arrowscrollbox.css @@ -0,0 +1,55 @@ +/* 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"); + +:host([scrolledtostart=true])::part(overflow-start-indicator), +:host([scrolledtoend=true])::part(overflow-end-indicator), +:host(:not([overflowing=true])) > toolbarbutton { + visibility: collapse; +} + +/* Scroll arrows */ + +toolbarbutton { + color: inherit; + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 1; + padding: 2px; +} + +toolbarbutton[disabled="true"] { + fill-opacity: var(--toolbarbutton-disabled-opacity); +} + +:host([orient="horizontal"]) > toolbarbutton { + list-style-image: url("chrome://global/skin/icons/arrow-left.svg"); +} + +#scrollbutton-up > .toolbarbutton-icon { + transform: scaleY(-1); +} + +:host([orient="horizontal"]) > #scrollbutton-down:-moz-locale-dir(ltr) > .toolbarbutton-icon, +:host([orient="horizontal"]) > #scrollbutton-up:-moz-locale-dir(rtl) > .toolbarbutton-icon { + transform: scaleX(-1); +} + +toolbarbutton > .toolbarbutton-text { + display: none; +} + +@media not (-moz-platform: macos) { + :host(:not([clicktoscroll="true"])) > toolbarbutton { + appearance: none; + } +} + +scrollbox, +.scrollbox-clip { + min-width: 0; + min-height: 0; +} diff --git a/toolkit/themes/shared/checkbox.css b/toolkit/themes/shared/checkbox.css new file mode 100644 index 0000000000..725c995a4d --- /dev/null +++ b/toolkit/themes/shared/checkbox.css @@ -0,0 +1,211 @@ +/* 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"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +checkbox { + appearance: none; + align-items: center; + margin: 4px 2px; +} + +.checkbox-icon[src] { + margin-inline-end: 2px; +} + +.checkbox-label { + margin: 1px 0; +} + +/* ..... disabled state ..... */ + +checkbox[disabled="true"] { + opacity: 0.4; +} + +/* ::::: checkmark image ::::: */ + +.checkbox-check { + appearance: none; + color: var(--checkbox-border-color, ThreeDShadow); + background-color: var(--checkbox-unchecked-bgcolor, Field); + border: 1px solid currentColor; + border-radius: 2px; + margin-inline-end: 6px; +} + +.checkbox-check:not([native]) { + height: 16px; + width: 16px; +} + +checkbox:not([disabled="true"]):hover > .checkbox-check { + background-color: var(--checkbox-unchecked-hover-bgcolor, color-mix(in srgb, AccentColor 4%, Field)); +} + +checkbox:not([disabled="true"]):hover:active > .checkbox-check { + background-color: var(--checkbox-unchecked-active-bgcolor, color-mix(in srgb, AccentColor 8%, Field)); +} + +.checkbox-check[checked] { + border-color: var(--checkbox-checked-border-color, transparent); + background-color: var(--checkbox-checked-bgcolor, AccentColor); + background-image: url("chrome://global/skin/icons/check.svg"); + background-position: center; + background-repeat: no-repeat; + -moz-context-properties: fill; + fill: currentColor; + color: var(--checkbox-checked-color, AccentColorText); + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact; +} + +checkbox:not([disabled="true"]):hover > .checkbox-check[checked] { + background-color: var(--checkbox-checked-hover-bgcolor, color-mix(in srgb, currentColor 12.5%, AccentColor)); +} + +checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] { + background-color: var(--checkbox-checked-active-bgcolor, color-mix(in srgb, currentColor 25%, AccentColor)); +} + +checkbox:not([native]):focus-visible > .checkbox-check { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +@media (prefers-contrast) { + checkbox:not([disabled="true"]):hover > .checkbox-check { + /* color will set the border-color on the check due to how HCM works for in-content pages. */ + color: var(--checkbox-checked-border-color, color-mix(in srgb, AccentColor 4%, Field)); + } + + checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked], + checkbox:not([disabled="true"]):hover > .checkbox-check[checked] { + color: var(--checkbox-checked-border-color, AccentColorText); + fill: var(--checkbox-checked-color, AccentColorText); + background-color: var(--checkbox-checked-bgcolor, AccentColor); + } +} + +/* ..... Platform overrides ..... */ + +@media (-moz-platform: windows) { + checkbox:where([native]) { + appearance: auto; + -moz-default-appearance: checkbox-container; + align-items: center; + margin: 2px 4px; + padding-top: 1px; + padding-bottom: 1px; + padding-inline-start: 4px; + padding-inline-end: 2px; + } + + .checkbox-label[native] { + margin: 0; + } + + /* ..... focused state ..... */ + + checkbox[native]:focus-visible > .checkbox-label-box { + outline: var(--focus-outline); + } + + /* ..... disabled state ..... */ + + checkbox[native][disabled="true"] { + color: GrayText; + } + + @media (-moz-windows-classic) { + checkbox[native][disabled="true"] { + color: ThreeDShadow; + text-shadow: 1px 1px ThreeDHighlight; + } + } + + /* ::::: checkmark image ::::: */ + + .checkbox-check[native] { + appearance: auto; + -moz-default-appearance: checkbox; + align-items: center; + margin-inline-end: 5px; + } +} + +@media (-moz-platform: macos) { + checkbox:where([native]) { + appearance: auto; + -moz-default-appearance: checkbox-container; + align-items: center; + margin: 4px 2px; + } + + .checkbox-label[native] { + margin: 1px 0; + } + + /* ..... disabled state ..... */ + + checkbox[native][disabled="true"] { + color: GrayText; + } + + /* ::::: checkmark image ::::: */ + + .checkbox-check[native] { + appearance: auto; + -moz-default-appearance: checkbox; + margin-block: 1px 0; + margin-inline: 1px 3px; + /* vertical-align tells native theming where to snap to. However, this doesn't + * always work reliably because of bug 503833. */ + vertical-align: top; + width: 1.3em; + height: 1.3em; + } +} + +@media (-moz-platform: linux) { + checkbox:where([native]) { + appearance: auto; + -moz-default-appearance: checkbox-container; + align-items: center; + margin: 2px 4px; + } + + .checkbox-label-box[native] { + appearance: auto; + -moz-default-appearance: checkbox-label; + } + + .checkbox-label[native] { + margin: 0; + } + + /* ..... focused state ..... */ + + checkbox[native]:focus-visible > .checkbox-label-box { + /* Native theming should take care of this but it appears to be broken with + some Gtk themes. Bug 1312169. */ + outline: var(--focus-outline); + } + + /* ..... disabled state ..... */ + + checkbox[native][disabled="true"] { + color: GrayText; + } + + /* ::::: checkmark image ::::: */ + + .checkbox-check[native] { + appearance: auto; + -moz-default-appearance: checkbox; + margin: 2px; + margin-inline-end: 4px; + } +} diff --git a/toolkit/themes/shared/close-icon.css b/toolkit/themes/shared/close-icon.css new file mode 100644 index 0000000000..35d7463276 --- /dev/null +++ b/toolkit/themes/shared/close-icon.css @@ -0,0 +1,42 @@ +/* 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/. */ + +.close-icon { + appearance: none; + -moz-context-properties: fill, fill-opacity; + list-style-image: url(chrome://global/skin/icons/close.svg); + border-radius: 4px; + color: inherit; + fill: currentColor; + padding: 2px; + width: 20px; + height: auto; +} + +@media not (prefers-contrast) { + .close-icon:hover { + background-color: color-mix(in srgb, currentColor 10%, transparent); + } +} + +@media (prefers-contrast) { + .close-icon:hover { + outline: 1px solid currentColor; + } +} + +.close-icon:hover:active { + background-color: color-mix(in srgb, currentColor 20%, transparent); +} + +.close-icon > .button-icon, +.close-icon > .button-box > .button-icon, +.close-icon > .toolbarbutton-icon { + margin: 0; +} + +.close-icon > .button-box > .button-text, +.close-icon > .toolbarbutton-text { + display: none; +} diff --git a/toolkit/themes/shared/commonDialog.css b/toolkit/themes/shared/commonDialog.css new file mode 100644 index 0000000000..1670241103 --- /dev/null +++ b/toolkit/themes/shared/commonDialog.css @@ -0,0 +1,70 @@ +/* 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/. */ + +#commonDialog[subdialog] .checkbox-label { + color: var(--text-color-deemphasized); +} + +@media (-moz-platform: windows) { + #infoContainer { + display: flex; + flex-direction: column; + justify-content: center; + } + + #infoIcon { + margin: 3px 5px 4px; + } +} + +@media (-moz-platform: macos) { + #commonDialog:not([subdialog]) { + line-height: 13px; + } + + #commonDialog:not([subdialog]) #infoTitle, + #commonDialog:not([subdialog]) #infoBody { + font: menu; + line-height: 16px; + margin-bottom: 6px; + } + + #infoContainer { + max-width: 33em; + } + + #infoIcon { + margin: 3px 5px 4px; + margin-inline-end: 14px; + } + + #commonDialog:not([subdialog]) #infoTitle { + font-weight: bold; + } +} + +@media (-moz-platform: linux) { + #infoContainer { + display: flex; + flex-direction: column; + justify-content: center; + } + + /* + * Since we size the window to content, and the icon load is asynchronous, we + * make sure that we take the whole space we could possibly take, regardless of + * whether the icon is loaded. + */ + #iconContainer { + height: 55px; /* maximum icon height + some margin */ + width: 58px; /* maximum icon width + some margin */ + } + + #infoIcon { + display: block; + max-width: 48px; + max-height: 48px; + margin: 3px auto 0; + } +} diff --git a/toolkit/themes/shared/datetimeinputpickers.css b/toolkit/themes/shared/datetimeinputpickers.css new file mode 100644 index 0000000000..4a663b792b --- /dev/null +++ b/toolkit/themes/shared/datetimeinputpickers.css @@ -0,0 +1,382 @@ +/* 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 { + --border-style: 0.1rem solid; + --border-radius: 0.3rem; + --border-color: ButtonBorder; + --button-color: ButtonText; + --button-color-hover: SelectedItemText; + --button-color-active: SelectedItem; + --button-background: ButtonFace; + --button-background-hover: SelectedItem; + --button-background-active: SelectedItemText; + --button-border-hover: SelectedItem; + --button-border-active: SelectedItem; + --today-background: Mark; + --today-color: MarkText; + --navigation-arrow-color-hover: SelectedItemText; + --navigation-arrow-color-active: SelectedItem; + --navigation-arrow-background-hover: SelectedItem; + --navigation-arrow-background-active: SelectedItemText; + --navigation-arrow-border-hover: SelectedItem; + --navigation-arrow-border-active: SelectedItem; + --navigation-arrow-fill-opacity: 1; + --navigation-arrow-fill-opacity-hover: 1; + --navigation-arrow-fill-opacity-active: 1; + --calendar-item-background-hover: color-mix(in srgb, FieldText 20%, transparent); + + /* Use -moz-activehyperlinktext to get a system color that + by default will be closest to Red */ + --weekend-font-color: -moz-activehyperlinktext; + + --disabled-background-color: ButtonShadow; + + /* TODO: these need to be in sync (ish) with DateTimePickerPanel.sys.mjs */ + font-size: 10px; + --font-size-default: 1.1rem; + --spinner-width: 3rem; + --spinner-margin-block: 0.4rem; + --spinner-item-height: 2.4rem; + --spinner-item-margin-bottom: 0.1rem; + --spinner-button-height: 1.8rem; + --colon-width: 2rem; + --day-period-spacing-width: 1rem; + --date-picker-item-height: 2.4rem; + --date-picker-item-width: 3.3rem; + + /* We need to hide the scroll bar but maintain its scrolling + capability, so using |overflow: hidden| is not an option. */ + scrollbar-width: none; +} + +@media not (prefers-contrast) { + :root { + --border-color: color-mix(in srgb, FieldText 65%, transparent); + --button-color: inherit; + --button-color-hover: inherit; + --button-color-active: inherit; + --button-background: color-mix(in srgb, FieldText 10%, transparent); + --button-background-hover: color-mix(in srgb, FieldText 20%, transparent); + --button-background-active: color-mix(in srgb, FieldText 30%, transparent); + --button-border-hover: var(--border-color); + --button-border-active: var(--border-color); + --today-background: color-mix(in srgb, FieldText 30%, transparent); + --today-color: inherit; + --navigation-arrow-color-hover: inherit; + --navigation-arrow-color-active: inherit; + --navigation-arrow-background-hover: transparent; + --navigation-arrow-background-active: transparent; + --navigation-arrow-border-hover: transparent; + --navigation-arrow-border-active: transparent; + --navigation-arrow-fill-opacity: 0.5; + --navigation-arrow-fill-opacity-hover: 0.8; + --navigation-arrow-fill-opacity-active: 1; + } +} + +body { + margin: 0; + font: message-box; + font-size: var(--font-size-default); + background-color: Field; + color: FieldText; +} + +button { + appearance: none; + padding: 0; + color: var(--button-color); + background: none; + background-color: var(--button-background); + background-repeat: no-repeat; + background-position: center; + border: var(--border-style) var(--border-color); + border-radius: var(--border-radius); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; +} + +button:where(:hover) { + color: var(--button-color-hover); + background-color: var(--button-background-hover); + border-color: var(--button-border-hover); +} + +button:where(:hover.active) { + color: var(--button-color-active); + background-color: var(--button-background-active); + border-color: var(--button-border-active); +} + +button:focus-visible { + outline: 0.2rem solid SelectedItem; + outline-offset: 0.2rem; +} + +#date-picker { + /* Add some padding so outlines would not overflow our viewport. */ + padding: 0.4rem; +} + +.month-year-nav { + display: flex; + justify-content: space-between; + margin-bottom: 0.8rem; +} + +.month-year-nav[monthPickerVisible] { + flex-direction: column; + justify-content: center; + align-items: center; +} + +.month-year-nav > button, +.spinner-container > button { + background-color: transparent; + border-color: transparent; + fill-opacity: var(--navigation-arrow-fill-opacity); +} + +.month-year-nav > button { + height: 2.4rem; + width: 2.4rem; +} + +.month-year-nav > button:hover, +.spinner-container > button:hover { + color: var(--navigation-arrow-color-hover); + background-color: var(--navigation-arrow-background-hover); + border-color: var(--navigation-arrow-border-hover); + fill-opacity: var(--navigation-arrow-fill-opacity-hover); +} + +.month-year-nav > button:hover.active, +.spinner-container > button:hover.active { + color: var(--navigation-arrow-color-active); + background-color: var(--navigation-arrow-background-active); + border-color: var(--navigation-arrow-border-active); + fill-opacity: var(--navigation-arrow-fill-opacity-active); +} + +.month-year-nav > button.prev:dir(ltr), +.month-year-nav > button.next:dir(rtl) { + background-image: url("chrome://global/skin/icons/arrow-left.svg"); +} + +.month-year-nav > button.prev:dir(rtl), +.month-year-nav > button.next:dir(ltr) { + background-image: url("chrome://global/skin/icons/arrow-right.svg"); +} + +button.month-year { + font-size: 1.3rem; + height: var(--date-picker-item-height); + padding-block: 0.2rem 0.3rem; + padding-inline: 1.2rem 2.6rem; + background-image: url("chrome://global/skin/icons/arrow-down.svg"); + background-position-x: right 0.5rem; +} + +@media not (prefers-contrast) { + button.month-year { + fill-opacity: .5; + } +} + +button.month-year:dir(rtl) { + background-position-x: left 0.5rem; +} + +button.month-year:hover { + color: var(--button-color-hover); + background-color: var(--button-background-hover); + border-color: var(--button-border-hover); +} + +button.month-year.active { + color: var(--button-color-active); + background-color: var(--button-background-active); + border-color: var(--button-border-active); + background-image: url("chrome://global/skin/icons/arrow-up.svg"); +} + +.month-year-view > .spinner-container { + width: 5.5rem; + margin: 2rem 0.5rem; +} + +.order-month-year > #spinner-month, +.order-year-month > #spinner-year { + order: 1; +} + +.order-month-year > #spinner-year, +.order-year-month > #spinner-month { + order: 2; +} + +.calendar-container > table:not([hidden]) { + display: flex; + flex-direction: column; + border-spacing: inherit; +} + +.week-header > tr, +.days-view > tr { + display: flex; +} + +.week-header > tr > th { + opacity: .5; +} + +.days-view { + min-height: 15rem; +} + +.week-header > tr > th, +.days-view > tr > td { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + font-weight: inherit; + height: var(--date-picker-item-height); + width: var(--date-picker-item-width); + margin: 0.2rem; + padding: 0; + border: var(--border-style) transparent; + border-radius: var(--border-radius); +} + +.days-view > tr > td:hover, +.spinner-container > .spinner > div:hover { + background-color: var(--calendar-item-background-hover); + border-color: var(--border-color); +} + +.days-view > tr > td:focus-visible { + outline: 0.2rem solid SelectedItem; + outline-offset: 0.2rem; +} + +.days-view > tr > td.today { + background-color: var(--today-background); + color: var(--today-color); + border-color: transparent; + font-weight: bold; +} + +.days-view > tr > td.today:hover { + border-color: var(--border-color); +} + +.days-view > tr > td.selection, +.spinner-container > .spinner:not(.scrolling) > div.selection { + background-color: SelectedItem; + color: SelectedItemText; + border-color: transparent; +} + +.days-view > tr > td.outside { + opacity: .5; +} + +.days-view > tr > td.out-of-range, +.days-view > tr > td.off-step { + background-color: var(--disabled-background-color); + border-color: transparent; +} + +.weekend { + color: var(--weekend-font-color); +} + +#clear-button { + height: var(--date-picker-item-height); + font-size: 1.3rem; + margin-top: 0.8rem; + padding-inline: 1.2rem; +} + +#time-picker, +.month-year-view:not([hidden]) { + display: flex; + justify-content: center; +} + +.spinner-container { + display: flex; + flex-direction: column; + width: var(--spinner-width); +} + +.spinner-container > button { + height: var(--spinner-button-height); +} + +.spinner-container > button.up { + background-image: url("chrome://global/skin/icons/arrow-up.svg"); +} + +.spinner-container > button.down { + background-image: url("chrome://global/skin/icons/arrow-down.svg"); +} + +.spinner-container.hide-buttons > button { + visibility: hidden; +} + +.spinner-container > .spinner { + position: relative; + margin-block: var(--spinner-margin-block); + border-radius: var(--border-radius); + overflow-y: scroll; + scrollbar-width: none; + scroll-snap-type: both mandatory; +} + +@media not (prefers-reduced-motion) { + .spinner-container > .spinner { + scroll-behavior: smooth; + } +} + +.spinner-container > .spinner:focus-visible { + outline: 0.2rem solid SelectedItem; + outline-offset: 0.2rem; +} + +.spinner-container > .spinner > div { + display: flex; + place-content: center; + align-items: center; + box-sizing: border-box; + margin-bottom: var(--spinner-item-margin-bottom); + height: var(--spinner-item-height); + border: var(--border-style) transparent; + border-radius: var(--border-radius); + user-select: none; + scroll-snap-align: start; +} + +.spinner-container > .spinner > div.disabled { + visibility: hidden; +} + +/* Used only in */ + +.colon { + display: flex; + justify-content: center; + align-items: center; + width: var(--colon-width); + margin-bottom: 0.3rem; + cursor: default; +} + +.spacer { + width: var(--day-period-spacing-width); +} diff --git a/toolkit/themes/shared/design-tokens-brand.css b/toolkit/themes/shared/design-tokens-brand.css new file mode 100644 index 0000000000..801348fe81 --- /dev/null +++ b/toolkit/themes/shared/design-tokens-brand.css @@ -0,0 +1,53 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/design-tokens-shared.css"); + +:root { + /* Typography */ + /** Font size **/ + --in-content-font-body-size-base: 15px; + --in-content-font-body-size-small: 0.867rem; +} + +@media not (prefers-contrast) { + :root { + /* Border */ + --border-interactive-color: var(--color-gray-60); + + /* Button */ + /* TODO Bug 1821203 - Gray use needs to be consolidated */ + --button-background-color: color-mix(in srgb, currentColor 7%, transparent); + --button-background-color-hover: color-mix(in srgb, currentColor 14%, transparent); + --button-background-color-active: color-mix(in srgb, currentColor 21%, transparent); + + /* Color */ + --color-accent-primary: var(--brand-color-accent); + --color-accent-primary-hover: var(--brand-color-accent-hover); + --color-accent-primary-active: var(--brand-color-accent-active); + --brand-color-accent: var(--color-blue-50); + --brand-color-accent-hover: var(--color-blue-60); + --brand-color-accent-active: var(--color-blue-70); + --color-canvas: var(--color-white); + + /* Text */ + --text-color-deemphasized: color-mix(in srgb, currentColor 69%, transparent); + } +} + +@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) { + :root { + /* Border */ + --border-interactive-color: var(--color-gray-50); + + /* Color */ + --brand-color-accent: var(--color-blue-20); + --brand-color-accent-hover: var(--color-blue-10); + --brand-color-accent-active: var(--color-blue-05); + --color-canvas: var(--color-gray-90); + + /* Text */ + --text-color-deemphasized: color-mix(in srgb, currentColor 75%, transparent); + } +} diff --git a/toolkit/themes/shared/design-tokens-shared.css b/toolkit/themes/shared/design-tokens-shared.css new file mode 100644 index 0000000000..7915ed308b --- /dev/null +++ b/toolkit/themes/shared/design-tokens-shared.css @@ -0,0 +1,102 @@ +/* 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 { + /* Base tokens */ + /* Do not use base tokens directly as they don't carry any meaning. Refer to application tokens below. */ + /** Color **/ + --color-white: #ffffff; + --color-blue-05: #aaf2ff; + --color-blue-10: #80ebff; + --color-blue-20: #00ddff; + --color-blue-50: #0060df; + --color-blue-60: #0250bb; + --color-blue-70: #054096; + --color-gray-50: #bfbfc9; + --color-gray-60: #8f8f9d; + --color-gray-90: #1c1b22; + + /* Application tokens */ + /** Border **/ + --border-radius-circle: 9999px; + --border-width: 1px; + --border-interactive-color: unset; + + /** Button **/ + --button-background-color: unset; + --button-background-color-hover: unset; + --button-background-color-active: unset; + + /** Color **/ + --color-accent-primary: unset; + --color-accent-primary-hover: unset; + --color-accent-primary-active: unset; + --color-canvas: unset; + + /** Focus Outline **/ + --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); + --focus-outline-color: var(--color-accent-primary); + --focus-outline-inset: calc(-1 * var(--focus-outline-width)); + --focus-outline-offset: 2px; + --focus-outline-width: 2px; + + /** Text **/ + --text-color-deemphasized: color-mix(in srgb, currentColor 60%, transparent); + + /** Size **/ + --size-item-small: 16px; + --size-item-large: 32px; +} + + +@media (prefers-contrast) { + :root, + :host { + /* Button */ + --button-background-color: ButtonFace; + --button-background-color-hover: ButtonFace; + --button-background-color-active: ButtonFace; + --button-background-color-disabled: GrayText; + + /* Color */ + --color-canvas: Canvas; + + /* Text */ + --text-color-deemphasized: inherit; + } +} + +@media (forced-colors) { + /* Applies to Windows HCM only */ + :root, + :host { + /* Border */ + --border-interactive-color: ButtonText; + --border-interactive-color-hover: SelectedItem; + --border-interactive-color-active: ButtonText; + --border-interactive-color-disabled: GrayText; + + /* Color */ + --color-accent-primary: ButtonText; + --color-accent-primary-hover: SelectedItem; + --color-accent-primary-active: SelectedItem; + } +} + +@media (forced-colors: none) and (prefers-contrast) { + /* Applies to macOS "increase contrast" only */ + :root, + :host { + /* Border */ + --border-interactive-color: AccentColor; + --border-interactive-color-hover: ButtonText; + --border-interactive-color-active: AccentColor; + --border-interactive-color-disabled: GrayText; + + /* Color */ + --color-accent-primary: AccentColor; + --color-accent-primary-hover: ButtonText; + --color-accent-primary-active: ButtonText; + } +} diff --git a/toolkit/themes/shared/design-tokens-system.css b/toolkit/themes/shared/design-tokens-system.css new file mode 100644 index 0000000000..40b362b0fb --- /dev/null +++ b/toolkit/themes/shared/design-tokens-system.css @@ -0,0 +1,26 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/design-tokens-shared.css"); + +@media not (prefers-contrast) { + :root { + /* Border */ + --border-interactive-color: color-mix(in srgb, currentColor 15%, var(--color-gray-60)); + + /* Button */ + --button-background-color: var(--button-bgcolor); + --button-background-color-hover: var(--button-hover-bgcolor); + --button-background-color-active: var(--button-active-bgcolor); + + /* Color */ + --color-accent-primary: var(--system-color-accent); + --color-accent-primary-hover: var(--system-color-accent-hover); + --color-accent-primary-active: var(--system-color-accent-active); + --system-color-accent: var(--button-primary-bgcolor, AccentColor); + --system-color-accent-hover: var(--button-primary-hover-bgcolor); + --system-color-accent-active: var(--button-primary-active-bgcolor); + --color-canvas: Canvas; + } +} diff --git a/toolkit/themes/shared/desktop-jar.inc.mn b/toolkit/themes/shared/desktop-jar.inc.mn new file mode 100644 index 0000000000..4fd57ec8ec --- /dev/null +++ b/toolkit/themes/shared/desktop-jar.inc.mn @@ -0,0 +1,152 @@ +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +# This is not a complete / proper jar manifest. It is included by the +# actual theme-specific manifests, so that shared resources need only +# be specified once. As a result, the source file paths are relative +# to the location of the actual manifest. + +#include minimal-toolkit.jar.inc.mn +% skin help classic/1.0 %skin/classic/help/ +% skin mozapps classic/1.0 %skin/classic/mozapps/ + skin/classic/global/aboutCache.css (../../shared/aboutCache.css) + skin/classic/global/aboutCacheEntry.css (../../shared/aboutCacheEntry.css) + skin/classic/global/aboutHttpsOnlyError.css (../../shared/aboutHttpsOnlyError.css) + skin/classic/global/aboutMemory.css (../../shared/aboutMemory.css) + skin/classic/global/aboutNetError.css (../../shared/aboutNetError.css) + skin/classic/global/aboutNetworking.css (../../shared/aboutNetworking.css) + skin/classic/global/aboutLogging.css (../../shared/aboutLogging.css) + skin/classic/global/aboutReader.css (../../shared/aboutReader.css) + skin/classic/global/aboutReaderPocket.css (../../shared/aboutReaderPocket.css) + skin/classic/global/aboutRights.css (../../shared/aboutRights.css) + skin/classic/global/aboutLicense.css (../../shared/aboutLicense.css) + skin/classic/global/aboutSupport.css (../../shared/aboutSupport.css) + skin/classic/global/alert.css (../../shared/alert.css) + skin/classic/global/search-textbox.css (../../shared/search-textbox.css) + skin/classic/global/appPicker.css (../../shared/appPicker.css) + skin/classic/global/arrowscrollbox.css (../../shared/arrowscrollbox.css) + skin/classic/global/checkbox.css (../../shared/checkbox.css) + skin/classic/global/close-icon.css (../../shared/close-icon.css) + skin/classic/global/commonDialog.css (../../shared/commonDialog.css) + skin/classic/global/datetimeinputpickers.css (../../shared/datetimeinputpickers.css) + skin/classic/global/design-tokens-brand.css (../../shared/design-tokens-brand.css) + skin/classic/global/design-tokens-shared.css (../../shared/design-tokens-shared.css) + skin/classic/global/design-tokens-system.css (../../shared/design-tokens-system.css) + skin/classic/global/error-pages.css (../../shared/error-pages.css) + skin/classic/global/findbar.css (../../shared/findbar.css) + skin/classic/global/global-shared.css (../../shared/global-shared.css) + skin/classic/global/menu-scrolling.css (../../shared/menu-scrolling.css) + skin/classic/global/menulist-shared.css (../../shared/menulist-shared.css) + skin/classic/global/notification.css (../../shared/notification.css) + skin/classic/global/numberinput.css (../../shared/numberinput.css) + skin/classic/global/offlineSupportPages.css (../../shared/offlineSupportPages.css) + skin/classic/global/popupnotification.css (../../shared/popupnotification.css) + skin/classic/global/tree.css (../../shared/tree.css) + skin/classic/global/dirListing/dirListing.css (../../shared/dirListing/dirListing.css) +#ifdef XP_MACOSX + skin/classic/global/dirListing/folder.png (../../shared/dirListing/folder-osx.png) + skin/classic/global/dirListing/up.png (../../shared/dirListing/up-osx.png) +#else + skin/classic/global/dirListing/folder.png (../../shared/dirListing/folder.png) + skin/classic/global/dirListing/up.png (../../shared/dirListing/up.png) +#endif + skin/classic/global/in-content/common-shared.css (../../shared/in-content/common-shared.css) + skin/classic/global/in-content/info-pages.css (../../shared/in-content/info-pages.css) + skin/classic/global/in-content/wifi.svg (../../shared/in-content/wifi.svg) + skin/classic/global/icons/arrow-left.svg (../../shared/icons/arrow-left.svg) + skin/classic/global/icons/arrow-right.svg (../../shared/icons/arrow-right.svg) + skin/classic/global/icons/autoscroll.svg (../../shared/icons/autoscroll.svg) + skin/classic/global/icons/autoscroll-horizontal.svg (../../shared/icons/autoscroll-horizontal.svg) + skin/classic/global/icons/autoscroll-vertical.svg (../../shared/icons/autoscroll-vertical.svg) + skin/classic/global/icons/badge-blue.svg (../../shared/icons/badge-blue.svg) + skin/classic/global/icons/blocked.svg (../../shared/icons/blocked.svg) + skin/classic/global/icons/check.svg (../../shared/icons/check.svg) + skin/classic/global/icons/check-partial.svg (../../shared/icons/check-partial.svg) + skin/classic/global/icons/chevron.svg (../../shared/icons/chevron.svg) + skin/classic/global/icons/close.svg (../../shared/icons/close.svg) + skin/classic/global/icons/close-12.svg (../../shared/icons/close-12.svg) + skin/classic/global/icons/close-fill.svg (../../shared/icons/close-fill.svg) + skin/classic/global/icons/columnpicker.svg (../../shared/icons/columnpicker.svg) + skin/classic/global/icons/defaultFavicon.svg (../../shared/icons/defaultFavicon.svg) + skin/classic/global/icons/delete.svg (../../shared/icons/delete.svg) + skin/classic/global/icons/developer.svg (../../shared/icons/developer.svg) + skin/classic/global/icons/edit.svg (../../shared/icons/edit.svg) + skin/classic/global/icons/edit-copy.svg (../../shared/icons/edit-copy.svg) + skin/classic/global/icons/error.svg (../../shared/icons/error.svg) + skin/classic/global/icons/experiments.svg (../../shared/icons/experiments.svg) + skin/classic/global/icons/folder.svg (../../shared/icons/folder.svg) + skin/classic/global/icons/heart.svg (../../shared/icons/heart.svg) + skin/classic/global/icons/help.svg (../../shared/icons/help.svg) + skin/classic/global/icons/highlights.svg (../../shared/icons/highlights.svg) + skin/classic/global/icons/indicator-private-browsing.svg (../../shared/icons/indicator-private-browsing.svg) + skin/classic/global/icons/info.svg (../../shared/icons/info.svg) + skin/classic/global/icons/info-filled.svg (../../shared/icons/info-filled.svg) + skin/classic/global/icons/lightbulb.svg (../../shared/icons/lightbulb.svg) + skin/classic/global/icons/link.svg (../../shared/icons/link.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/more.svg (../../shared/icons/more.svg) + skin/classic/global/icons/open-in-new.svg (../../shared/icons/open-in-new.svg) + skin/classic/global/icons/page-portrait.svg (../../shared/icons/page-portrait.svg) + skin/classic/global/icons/page-landscape.svg (../../shared/icons/page-landscape.svg) + skin/classic/global/icons/performance.svg (../../shared/icons/performance.svg) + skin/classic/global/icons/plugin.svg (../../shared/icons/plugin.svg) + skin/classic/global/icons/plugin-blocked.svg (../../shared/icons/plugin-blocked.svg) + skin/classic/global/icons/plus.svg (../../shared/icons/plus.svg) + skin/classic/global/icons/pocket.svg (../../shared/icons/pocket.svg) + skin/classic/global/icons/pocket-outline.svg (../../shared/icons/pocket-outline.svg) + skin/classic/global/icons/print.svg (../../shared/icons/print.svg) + skin/classic/global/icons/undo.svg (../../shared/icons/undo.svg) + skin/classic/global/icons/radio.svg (../../shared/icons/radio.svg) + skin/classic/global/icons/reload.svg (../../shared/icons/reload.svg) + skin/classic/global/icons/search-glass.svg (../../shared/icons/search-glass.svg) + skin/classic/global/icons/security.svg (../../shared/icons/security.svg) + skin/classic/global/icons/security-broken.svg (../../shared/icons/security-broken.svg) + skin/classic/global/icons/security-warning.svg (../../shared/icons/security-warning.svg) + skin/classic/global/icons/settings.svg (../../shared/icons/settings.svg) + skin/classic/global/icons/shortcut.svg (../../shared/icons/shortcut.svg) + skin/classic/global/icons/sort-arrow.svg (../../shared/icons/sort-arrow.svg) + skin/classic/global/icons/trackers.svg (../../shared/icons/trackers.svg) + skin/classic/global/icons/trending.svg (../../shared/icons/trending.svg) + skin/classic/global/icons/update-icon.svg (../../shared/icons/update-icon.svg) + skin/classic/global/icons/arrow-down-12.svg (../../shared/icons/arrow-down-12.svg) + skin/classic/global/icons/arrow-down.svg (../../shared/icons/arrow-down.svg) + skin/classic/global/icons/arrow-left-12.svg (../../shared/icons/arrow-left-12.svg) + skin/classic/global/icons/arrow-right-12.svg (../../shared/icons/arrow-right-12.svg) + skin/classic/global/icons/arrow-up-12.svg (../../shared/icons/arrow-up-12.svg) + skin/classic/global/icons/arrow-up.svg (../../shared/icons/arrow-up.svg) + skin/classic/global/icons/warning.svg (../../shared/icons/warning.svg) + skin/classic/global/icons/warning-fill-12.svg (../../shared/icons/warning-fill-12.svg) + skin/classic/global/icons/whatsnew.svg (../../shared/icons/whatsnew.svg) + skin/classic/global/illustrations/about-rights.svg (../../shared/illustrations/about-rights.svg) + skin/classic/global/illustrations/about-license.svg (../../shared/illustrations/about-license.svg) + skin/classic/global/illustrations/error-malformed-url.svg (../../shared/illustrations/error-malformed-url.svg) + skin/classic/global/media/picture-in-picture-open.svg (../../shared/media/picture-in-picture-open.svg) + skin/classic/global/media/picture-in-picture-closed.svg (../../shared/media/picture-in-picture-closed.svg) + skin/classic/global/narrate.css (../../shared/narrate.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) + skin/classic/global/narrate/forward.svg (../../shared/narrate/forward.svg) + skin/classic/global/narrate/slow.svg (../../shared/narrate/slow.svg) + skin/classic/global/narrate/start.svg (../../shared/narrate/start.svg) + skin/classic/global/narrate/stop.svg (../../shared/narrate/stop.svg) + skin/classic/global/narrate/headphone.svg (../../shared/narrate/headphone.svg) + skin/classic/global/narrate/headphone-active.svg (../../shared/narrate/headphone-active.svg) + skin/classic/global/pictureinpicture/player.css (../../shared/pictureinpicture/player.css) + skin/classic/global/pictureinpicture/texttracks.css (../../shared/pictureinpicture/texttracks.css) + skin/classic/global/reader/RM-Sans-Serif.svg (../../shared/reader/RM-Sans-Serif.svg) + skin/classic/global/reader/RM-Serif.svg (../../shared/reader/RM-Serif.svg) + skin/classic/global/reader/RM-Minus-24x24.svg (../../shared/reader/RM-Minus-24x24.svg) + skin/classic/global/reader/RM-Plus-24x24.svg (../../shared/reader/RM-Plus-24x24.svg) + skin/classic/global/reader/RM-Pocket-Glyph.svg (../../shared/reader/RM-Pocket-Glyph.svg) + skin/classic/global/reader/RM-Pocket-Glyph-Dark.svg (../../shared/reader/RM-Pocket-Glyph-Dark.svg) + skin/classic/global/reader/RM-Pocket-Glyph-Sepia.svg (../../shared/reader/RM-Pocket-Glyph-Sepia.svg) + skin/classic/global/reader/RM-Type-Controls-24x24.svg (../../shared/reader/RM-Type-Controls-24x24.svg) + skin/classic/global/reader/RM-Type-Controls-Arrow.svg (../../shared/reader/RM-Type-Controls-Arrow.svg) + skin/classic/global/reader/RM-Content-Width-Minus-42x16.svg (../../shared/reader/RM-Content-Width-Minus-42x16.svg) + 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) + diff --git a/toolkit/themes/shared/desktop-non-mac.jar.inc.mn b/toolkit/themes/shared/desktop-non-mac.jar.inc.mn new file mode 100644 index 0000000000..5a59840191 --- /dev/null +++ b/toolkit/themes/shared/desktop-non-mac.jar.inc.mn @@ -0,0 +1,24 @@ +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +# This is not a complete / proper jar manifest. It is conditionally included +# by the shared jar manifest, which in turn is included by the os-specific +# manifests. +# As a result, the source file paths are relative to the location of the +# actual manifests. + +#include desktop-jar.inc.mn + + skin/classic/global/dialog.css (../../windows/global/dialog.css) + skin/classic/global/tabprompts.css (../../windows/global/tabprompts.css) + skin/classic/global/wizard.css (../../windows/global/wizard.css) + + skin/classic/global/arrow/panelarrow-vertical.svg (../../windows/global/arrow/panelarrow-vertical.svg) + + skin/classic/global/icons/search-textbox.svg (../../windows/global/icons/search-textbox.svg) + + skin/classic/mozapps/downloads/unknownContentType.css (../../windows/mozapps/downloads/unknownContentType.css) + skin/classic/mozapps/handling/handling.css (../../windows/mozapps/handling/handling.css) + +% override chrome://mozapps/skin/xpinstall/xpinstallItemGeneric.png chrome://mozapps/skin/extensions/extensionGeneric.svg diff --git a/toolkit/themes/shared/dirListing/dirListing.css b/toolkit/themes/shared/dirListing/dirListing.css new file mode 100644 index 0000000000..ebf756c23f --- /dev/null +++ b/toolkit/themes/shared/dirListing/dirListing.css @@ -0,0 +1,107 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +:root { + background-color: -moz-dialog; + color: -moz-dialogtext; + font: message-box; + padding-inline: 2em; + color-scheme: light dark; +} + +body { + border: 1px solid ThreeDShadow; + border-radius: 10px; + padding: 3em; + min-width: 30em; + max-width: 65em; + margin: 4em auto; + background-color: Field; + color: FieldText; +} + +h1 { + font-size: 160%; + margin: 0 0 .6em; + border-bottom: 1px solid ThreeDLightShadow; + font-weight: normal; +} + +a { + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +/* ensure multiple spaces are shown correctly. */ +td:first-child > a { + white-space: pre; +} + +p { + font-size: 110%; +} + +#UI_goUp { + margin-top: 0; + float: inline-start; +} + +#UI_showHidden { + margin-top: 0; + float: inline-end; +} + +table { + clear: both; + width: 90%; + margin: 0 auto; +} + +thead { + font-size: 130%; +} + +/* last modified */ +th:last-child { + text-align: center; +} + +th:hover > a { + text-decoration: underline; +} + +body > table > tbody > tr:hover { + outline: 1px solid ThreeDLightShadow; +} + +/* let 'Size' and 'Last Modified' take only as much space as they need and 'Name' all the rest */ +td:not(:first-child) { + width: 0; +} + +.up { + padding: 0 .5em; + margin-inline-start: 20px; +} + +.up::before { + content: ""; + display: inline-block; + width: 16px; + height: 16px; + margin-inline: -20px 4px; + vertical-align: middle; + background: url(chrome://global/skin/dirListing/up.png) center/16px no-repeat; +} + +.dir::before { + content: ""; + display: inline-block; + width: 16px; + height: 16px; + background: url(chrome://global/skin/dirListing/folder.png) center/16px no-repeat; +} diff --git a/toolkit/themes/shared/dirListing/folder-osx.png b/toolkit/themes/shared/dirListing/folder-osx.png new file mode 100644 index 0000000000..361d38bf4b Binary files /dev/null and b/toolkit/themes/shared/dirListing/folder-osx.png differ diff --git a/toolkit/themes/shared/dirListing/folder.png b/toolkit/themes/shared/dirListing/folder.png new file mode 100644 index 0000000000..31a7c5650e Binary files /dev/null and b/toolkit/themes/shared/dirListing/folder.png differ diff --git a/toolkit/themes/shared/dirListing/up-osx.png b/toolkit/themes/shared/dirListing/up-osx.png new file mode 100644 index 0000000000..47827040a0 Binary files /dev/null and b/toolkit/themes/shared/dirListing/up-osx.png differ diff --git a/toolkit/themes/shared/dirListing/up.png b/toolkit/themes/shared/dirListing/up.png new file mode 100644 index 0000000000..49d8568cd0 Binary files /dev/null and b/toolkit/themes/shared/dirListing/up.png differ diff --git a/toolkit/themes/shared/error-pages.css b/toolkit/themes/shared/error-pages.css new file mode 100644 index 0000000000..6fb65d5829 --- /dev/null +++ b/toolkit/themes/shared/error-pages.css @@ -0,0 +1,86 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/in-content/info-pages.css"); + +body { + background-size: 64px 32px; + background-repeat: repeat-x; + padding: 0; + /* info-pages.css sets a minimum width of 13em to the content + * container. If we don't set a min-width here, the content + * gets clipped in iframes with small width. We don't accomodate + * any padding to prioritize real estate in the small viewport. */ + min-width: 13em; +} + +.button-container { + display: flex; + flex-flow: row wrap; + justify-content: end; +} + +.button-spacer { + flex: 1; +} + +@media only screen and (max-width: 959px) { + body { + padding: 0 75px; + } + + .title { + background-image: none !important; + padding-inline-start: 0; + margin-inline-start: 0; + } + + .title-text { + padding-top: 0; + } +} + +@media only screen and (max-width: 640px) { + .title-text { + padding-bottom: 0; + border-bottom: none; + } +} + +@media only screen and (max-width: 480px) { + body { + padding: 0 38px; + } + + .container { + min-width: 0; + } + + .button-container button { + width: 100%; + margin: 0.66em 0 0; + } + + .title-text { + font-size: 26px; + } +} + +@media only screen and (max-width: 320px) { + body { + padding: 0 12px; + } +} + +@media only screen and (max-height: 480px) { + body { + /* Note: if you change the top padding, also update the image positioning + * media query in aboutNetError.css for the certificate error case. */ + padding-top: 38px; + /* We get rid of bottom padding for width < 640px, but + * for height < 480px a bit of space between the content + * and the viewport edge is nice. */ + padding-bottom: 38px; + } +} diff --git a/toolkit/themes/shared/extensions/category-available.svg b/toolkit/themes/shared/extensions/category-available.svg new file mode 100644 index 0000000000..6867fba54b --- /dev/null +++ b/toolkit/themes/shared/extensions/category-available.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/extensions/category-dictionaries.svg b/toolkit/themes/shared/extensions/category-dictionaries.svg new file mode 100644 index 0000000000..850988625c --- /dev/null +++ b/toolkit/themes/shared/extensions/category-dictionaries.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/extensions/category-discover.svg b/toolkit/themes/shared/extensions/category-discover.svg new file mode 100644 index 0000000000..16d90ecbd7 --- /dev/null +++ b/toolkit/themes/shared/extensions/category-discover.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/toolkit/themes/shared/extensions/category-extensions.svg b/toolkit/themes/shared/extensions/category-extensions.svg new file mode 100644 index 0000000000..41b203ab62 --- /dev/null +++ b/toolkit/themes/shared/extensions/category-extensions.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/extensions/category-plugins.svg b/toolkit/themes/shared/extensions/category-plugins.svg new file mode 100644 index 0000000000..44f8ed1ea9 --- /dev/null +++ b/toolkit/themes/shared/extensions/category-plugins.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/extensions/category-recent.svg b/toolkit/themes/shared/extensions/category-recent.svg new file mode 100644 index 0000000000..68bfc50d55 --- /dev/null +++ b/toolkit/themes/shared/extensions/category-recent.svg @@ -0,0 +1,7 @@ + + + + diff --git a/toolkit/themes/shared/extensions/category-sitepermission.svg b/toolkit/themes/shared/extensions/category-sitepermission.svg new file mode 100644 index 0000000000..2cc3fc359a --- /dev/null +++ b/toolkit/themes/shared/extensions/category-sitepermission.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/extensions/category-themes.svg b/toolkit/themes/shared/extensions/category-themes.svg new file mode 100644 index 0000000000..45e271639e --- /dev/null +++ b/toolkit/themes/shared/extensions/category-themes.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/extensions/extension.svg b/toolkit/themes/shared/extensions/extension.svg new file mode 100644 index 0000000000..4bf376bbae --- /dev/null +++ b/toolkit/themes/shared/extensions/extension.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 0000000000..f837912812 --- /dev/null +++ b/toolkit/themes/shared/extensions/extensionGeneric.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/extensions/line.svg b/toolkit/themes/shared/extensions/line.svg new file mode 100644 index 0000000000..2e5cf6e74c --- /dev/null +++ b/toolkit/themes/shared/extensions/line.svg @@ -0,0 +1,99 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/toolkit/themes/shared/extensions/rating-star.svg b/toolkit/themes/shared/extensions/rating-star.svg new file mode 100644 index 0000000000..c23bef36e8 --- /dev/null +++ b/toolkit/themes/shared/extensions/rating-star.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/toolkit/themes/shared/extensions/recommended.svg b/toolkit/themes/shared/extensions/recommended.svg new file mode 100644 index 0000000000..50e76612df --- /dev/null +++ b/toolkit/themes/shared/extensions/recommended.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/toolkit/themes/shared/findbar.css b/toolkit/themes/shared/findbar.css new file mode 100644 index 0000000000..8dec03fd8e --- /dev/null +++ b/toolkit/themes/shared/findbar.css @@ -0,0 +1,178 @@ +/* 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"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +findbar { + border-top: 1px solid ThreeDShadow; + min-width: 1px; + transition-property: margin-bottom, visibility; + transition-duration: 150ms, 0s; + transition-timing-function: ease-in-out, linear; + padding-block: 6px; + background-color: -moz-dialog; + color: -moz-dialogtext; +} + +findbar[hidden] { + /* Override display:none to make the transition work. */ + display: flex; + margin-bottom: calc(-1 * (28px + 12px + 1px)); /* findbar-container's height + padding-block + top border */ + visibility: collapse; + transition-delay: 0s, 150ms; +} + +findbar[noanim], +findbar[noanim] > .findbar-container, +findbar[noanim] > .findbar-closebutton { + transition-duration: 0s !important; + transition-delay: 0s !important; +} + +.findbar-container { + margin-inline-start: 8px; + height: 28px; + overflow-inline: hidden; /* Ensures the close button stays visible. */ + transition: opacity 150ms ease-in-out; +} + +findbar[hidden] > .findbar-container { + opacity: 0; +} + +/* Remove start margin when close button is on the left side (on macOS) */ +.findbar-closebutton + .findbar-container { + margin-inline-start: 0; +} + +/* Search field */ + +html|input.findbar-textbox { + appearance: none; + background-color: var(--input-bgcolor, var(--toolbar-field-background-color)); + color: var(--input-color, var(--toolbar-field-color)); + border: 1px solid var(--input-border-color, var(--toolbar-field-border-color)); + border-radius: 4px; + outline: none; + margin: 0; + padding: 2px 5px; + padding-inline-start: 8px; + width: 18em; + box-sizing: border-box; +} + +html|input.findbar-textbox::placeholder { + opacity: 0.69; +} + +html|input.findbar-textbox:focus { + background-color: var(--toolbar-field-focus-background-color); + color: var(--toolbar-field-focus-color); + border-color: transparent; + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); + outline-color: var(--toolbar-field-focus-border-color); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23); +} + +html|input.findbar-textbox:-moz-lwtheme::selection { + background-color: var(--lwt-toolbar-field-highlight, Highlight); + color: var(--lwt-toolbar-field-highlight-text, HighlightText); +} + +html|input.findbar-textbox:not(:focus):-moz-lwtheme::selection { + background-color: var(--lwt-toolbar-field-highlight, text-select-background-disabled); +} + +html|input.findbar-textbox[status="notfound"] { + background-color: rgba(226,40,80,.3); + color: inherit; +} + +html|input.findbar-textbox[flash="true"] { + background-color: rgba(255,233,0,.3); + color: inherit; +} + +/* Previous/next buttons */ + +.findbar-find-previous, +.findbar-find-next { + appearance: none; + padding: 4px 7px; + -moz-context-properties: fill; + fill: var(--toolbarbutton-icon-fill); + color: inherit; + border-radius: 4px; +} + +.findbar-find-previous:not([disabled]):hover, +.findbar-find-next:not([disabled]):hover { + background-color: var(--toolbarbutton-hover-background, rgba(190,190,190,.2)); +} + +.findbar-find-previous:not([disabled]):hover:active, +.findbar-find-next:not([disabled]):hover:active { + background-color: var(--toolbarbutton-active-background, rgba(190,190,190,.4)); +} + +.findbar-find-previous { + list-style-image: url(chrome://global/skin/icons/arrow-up.svg); + margin-inline: 8px 0; +} + +.findbar-find-next { + list-style-image: url(chrome://global/skin/icons/arrow-down.svg); + margin-inline: 0 8px; +} + +.findbar-find-previous[disabled="true"] > .toolbarbutton-icon, +.findbar-find-next[disabled="true"] > .toolbarbutton-icon { + opacity: var(--toolbarbutton-disabled-opacity); +} + +/* Checkboxes & Labels */ + +.findbar-container > checkbox, +.findbar-label { + margin: 0 8px; + flex-shrink: 0; +} + +.findbar-find-status, +.found-matches { + margin-inline-start: 12px; +} + +.findbar-find-status[status="notfound"] { + font-weight: bold; +} + +.find-status-icon { + display: none; +} + +/* Close button */ + +/* Increase specificity to override close-icon.css */ +.close-icon.findbar-closebutton { + margin: 2px 8px; + width: 24px; + fill: var(--toolbarbutton-icon-fill); + transition: opacity 150ms ease-in-out; +} + +findbar[hidden] > .findbar-closebutton { + opacity: 0; +} + +.close-icon.findbar-closebutton:hover { + background-color: var(--toolbarbutton-hover-background, rgba(190,190,190,.2)); + outline: none; +} + +.close-icon.findbar-closebutton:hover:active { + background-color: var(--toolbarbutton-active-background, rgba(190,190,190,.4)); +} diff --git a/toolkit/themes/shared/global-shared.css b/toolkit/themes/shared/global-shared.css new file mode 100644 index 0000000000..255a92e1d3 --- /dev/null +++ b/toolkit/themes/shared/global-shared.css @@ -0,0 +1,306 @@ +/* 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/. */ + +/* all localizable skin settings shall live here */ +@import url("chrome://global/skin/design-tokens-system.css"); + +@import url("chrome://global/locale/intl.css"); +@import url("chrome://global/content/widgets.css"); + +@import url("close-icon.css"); + +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + --default-focusring-width: 2px; + --default-focusring: var(--default-focusring-width) dotted; + + --arrowpanel-background: Field; + --arrowpanel-color: FieldText; + --arrowpanel-border-color: ThreeDShadow; + --arrowpanel-border-radius: 8px; + --arrowpanel-padding: 16px; + + --arrowpanel-dimmed: color-mix(in srgb, currentColor 17%, transparent); + --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 30%, transparent); + + --panel-disabled-color: color-mix(in srgb, currentColor 40%, transparent); + + --popup-notification-body-width: calc(31em - calc(2 * var(--arrowpanel-padding))); + + --toolbarbutton-icon-fill: currentColor; + --toolbarbutton-disabled-opacity: 0.4; + + --toolbar-field-background-color: Field; + --toolbar-field-color: FieldText; + --toolbar-field-border-color: ThreeDShadow; + --toolbar-field-focus-background-color: Field; + --toolbar-field-focus-color: FieldText; +} + +:root:-moz-lwtheme { + --toolbar-field-background-color: rgba(255, 255, 255, 0.8); + --toolbar-field-focus-background-color: white; + --toolbar-field-color: black; + --toolbar-field-focus-color: black; + --toolbar-field-border-color: transparent; +} + +@media (prefers-contrast) { + :root:not(:-moz-lwtheme) { + --toolbarbutton-disabled-opacity: 0.3; + + --panel-disabled-color: GrayText; + } +} + +:is(menupopup, panel)[type=arrow] { + --panel-background: var(--arrowpanel-background); + --panel-color: var(--arrowpanel-color); + --panel-border-color: var(--arrowpanel-border-color); + --panel-border-radius: var(--arrowpanel-border-radius); + --panel-padding: var(--arrowpanel-padding); +} + +/* Lightweight theme roots */ + +:root[lwtheme-image] { + text-shadow: 0 -0.5px 1.5px white; +} + +:root[lwtheme-image][lwtheme-brighttext] { + text-shadow: 1px 1px 1.5px black; +} + +/* General styles */ + +.plain { + appearance: none; + margin: 0 !important; + border: none; + padding: 0; +} + +moz-input-box, +html|input { + min-width: 0; +} + +html|button, +html|input, +html|textarea { + font: inherit; +} + +.header { + font-weight: bold; +} + +.indent { + margin-inline-start: 23px; +} + +.box-padded { + padding: 5px; +} + +/* XUL iframe */ + +xul|iframe { + border: none; + min-width: 10px; + min-height: 10px; +} + +/* Label/description formatting */ + +xul|description, +xul|label { + cursor: default; + margin-block: 1px 2px; + margin-inline: 6px 5px; +} + +xul|description { + margin-bottom: 4px; +} + +xul|label[disabled="true"] { + color: GrayText; +} + +.tooltip-label { + margin: 0; + word-wrap: break-word; + /* We must specify a min-width, otherwise word-wrap:break-word doesn't work. + See Bug 630864. */ + min-width: 1px; +} + +/* Links */ + +.text-link, +a { + color: -moz-nativehyperlinktext; + cursor: pointer; + text-decoration: underline; +} + +:is(a, .text-link):-moz-lwtheme { + color: inherit; +} + +:is(a, .text-link):focus-visible { + outline: var(--focus-outline); + /* Not using --focus-outline-offset here because that's intended for elements + with a background, and we only want a slight offset here while not + overlapping adjacent text. */ + outline-offset: 1px; + border-radius: 1px; +} + +/* Override properties set on buttons, to display the links without unwanted styling */ +button.text-link { + appearance: none; + background-color: transparent; + border: none; + min-width: 0; + margin: 0; + padding: 0; + font: inherit; +} + +button.text-link .button-text { + /* Cancel out the default internal margin */ + margin: 0; +} + +/* Textbox context menu */ + +.textbox-contextmenu:-moz-locale-dir(rtl) { + direction: rtl; +} + +/* Panel footer buttons */ + +.panel-footer { + display: flex; + justify-content: flex-end; + margin: 8px 16px 16px; +} + +.panel-footer > button { + appearance: none; + border: 0; + border-radius: 4px; + color: var(--button-color, inherit); + background-color: var(--button-bgcolor, color-mix(in srgb, currentColor 13%, transparent)); + padding: 8px 16px; + font-weight: 600; + min-width: 0; + margin-inline: 8px 0; + margin-bottom: 0; +} + +.panel-footer > button[disabled] { + opacity: 0.4; +} + +.panel-footer > button:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +.panel-footer > button:not([disabled]):hover { + background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent)); +} + +.panel-footer > button:not([disabled]):hover:active { + background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)); +} + +.panel-footer > button:not([disabled])[default] { + color: var(--button-primary-color); + background-color: var(--button-primary-bgcolor); +} + +.panel-footer > button:not([disabled])[default]:hover { + background-color: var(--button-primary-hover-bgcolor); +} + +.panel-footer > button:not([disabled])[default]:hover:active { + background-color: var(--button-primary-active-bgcolor); +} + +@media (-moz-platform: windows) { + /* Swap the primary and secondary action, because Windows + * platform conventions put the primary action on the left. */ + .panel-footer:not(moz-button-group) > button[default] { + order: -1; + } +} + +/* Autoscroll popup */ + +.autoscroller { + appearance: none; + + /* Resets the native styles in windows and macOS */ + border: none; + background-color: transparent; + -moz-window-shadow: none; + + --autoscroll-background-image: url("chrome://global/skin/icons/autoscroll.svg"); + --panel-border-color: rgba(0,0,0,.4); + --panel-padding: 0; + --panel-background: rgba(249,249,250,.8) no-repeat center var(--autoscroll-background-image); + --panel-shadow-margin: 4px; + /* Set pointer-events: none; so that mousemove events can be handled by AutoScrollChild.jsm. */ + pointer-events: none; +} + +.autoscroller::part(content) { + border-radius: 100%; + background-clip: padding-box; + box-shadow: 0 0 var(--panel-shadow-margin) rgba(0,0,0,.2); + width: 100%; + height: 100%; +} + +.autoscroller[scrolldir="NS"] { + --autoscroll-background-image: url("chrome://global/skin/icons/autoscroll-vertical.svg"); +} + +.autoscroller[scrolldir="EW"] { + --autoscroll-background-image: url("chrome://global/skin/icons/autoscroll-horizontal.svg"); +} + +/* Combobox dropdown renderer */ +#ContentSelectDropdown > menupopup { + /* The menupopup itself should always be rendered LTR to ensure the scrollbar aligns with + * the dropdown arrow on the dropdown widget. If a menuitem is RTL, its style will be set accordingly */ + direction: ltr; +} + +#ContentSelectDropdown > menupopup::part(arrowscrollbox-scrollbox) { + scrollbar-width: var(--content-select-scrollbar-width, auto); +} + +#ContentSelectDropdown > menupopup[customoptionstyling="true"]::part(arrowscrollbox) { + /* When authors specify a custom background, we use background-image to specify the author-supplied color. + * In that case, we don't want stuff like custom appearance or custom + * backgrounds, so we make sure to apply it on top of the default background. */ + background-image: var(--content-select-background-image, none); + background-color: -moz-Combobox; +} + +/* Indent options in optgroups */ +.contentSelectDropdown-ingroup .menu-iconic-text { + padding-inline-start: 2em; +} + +.deemphasized { + color: var(--text-color-deemphasized); +} diff --git a/toolkit/themes/shared/icons/arrow-down-12.svg b/toolkit/themes/shared/icons/arrow-down-12.svg new file mode 100644 index 0000000000..6b9d465bc1 --- /dev/null +++ b/toolkit/themes/shared/icons/arrow-down-12.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/arrow-down.svg b/toolkit/themes/shared/icons/arrow-down.svg new file mode 100644 index 0000000000..2a9c63322d --- /dev/null +++ b/toolkit/themes/shared/icons/arrow-down.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/arrow-left-12.svg b/toolkit/themes/shared/icons/arrow-left-12.svg new file mode 100644 index 0000000000..fcb778c185 --- /dev/null +++ b/toolkit/themes/shared/icons/arrow-left-12.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/arrow-left.svg b/toolkit/themes/shared/icons/arrow-left.svg new file mode 100644 index 0000000000..84029f99ef --- /dev/null +++ b/toolkit/themes/shared/icons/arrow-left.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/arrow-right-12.svg b/toolkit/themes/shared/icons/arrow-right-12.svg new file mode 100644 index 0000000000..ee70aca638 --- /dev/null +++ b/toolkit/themes/shared/icons/arrow-right-12.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/arrow-right.svg b/toolkit/themes/shared/icons/arrow-right.svg new file mode 100644 index 0000000000..4da8e2e90b --- /dev/null +++ b/toolkit/themes/shared/icons/arrow-right.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/arrow-up-12.svg b/toolkit/themes/shared/icons/arrow-up-12.svg new file mode 100644 index 0000000000..0663e18caa --- /dev/null +++ b/toolkit/themes/shared/icons/arrow-up-12.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/arrow-up.svg b/toolkit/themes/shared/icons/arrow-up.svg new file mode 100644 index 0000000000..7de1573bbd --- /dev/null +++ b/toolkit/themes/shared/icons/arrow-up.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/autoscroll-horizontal.svg b/toolkit/themes/shared/icons/autoscroll-horizontal.svg new file mode 100644 index 0000000000..8ec0ee320d --- /dev/null +++ b/toolkit/themes/shared/icons/autoscroll-horizontal.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/icons/autoscroll-vertical.svg b/toolkit/themes/shared/icons/autoscroll-vertical.svg new file mode 100644 index 0000000000..ec41f7f4d1 --- /dev/null +++ b/toolkit/themes/shared/icons/autoscroll-vertical.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/icons/autoscroll.svg b/toolkit/themes/shared/icons/autoscroll.svg new file mode 100644 index 0000000000..88325d89dd --- /dev/null +++ b/toolkit/themes/shared/icons/autoscroll.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/icons/badge-blue.svg b/toolkit/themes/shared/icons/badge-blue.svg new file mode 100644 index 0000000000..265e27e66c --- /dev/null +++ b/toolkit/themes/shared/icons/badge-blue.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/toolkit/themes/shared/icons/blocked.svg b/toolkit/themes/shared/icons/blocked.svg new file mode 100644 index 0000000000..ccd1308e18 --- /dev/null +++ b/toolkit/themes/shared/icons/blocked.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/check-partial.svg b/toolkit/themes/shared/icons/check-partial.svg new file mode 100644 index 0000000000..420377ab8f --- /dev/null +++ b/toolkit/themes/shared/icons/check-partial.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/check.svg b/toolkit/themes/shared/icons/check.svg new file mode 100644 index 0000000000..3c356385c6 --- /dev/null +++ b/toolkit/themes/shared/icons/check.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/chevron.svg b/toolkit/themes/shared/icons/chevron.svg new file mode 100644 index 0000000000..bd0efccc68 --- /dev/null +++ b/toolkit/themes/shared/icons/chevron.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/icons/close-12.svg b/toolkit/themes/shared/icons/close-12.svg new file mode 100644 index 0000000000..9df6bee3b6 --- /dev/null +++ b/toolkit/themes/shared/icons/close-12.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/close-fill.svg b/toolkit/themes/shared/icons/close-fill.svg new file mode 100644 index 0000000000..bc29b68be5 --- /dev/null +++ b/toolkit/themes/shared/icons/close-fill.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/close.svg b/toolkit/themes/shared/icons/close.svg new file mode 100644 index 0000000000..85659eeeea --- /dev/null +++ b/toolkit/themes/shared/icons/close.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/columnpicker.svg b/toolkit/themes/shared/icons/columnpicker.svg new file mode 100644 index 0000000000..3a41c51d84 --- /dev/null +++ b/toolkit/themes/shared/icons/columnpicker.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/defaultFavicon.svg b/toolkit/themes/shared/icons/defaultFavicon.svg new file mode 100644 index 0000000000..e1689b5e6d --- /dev/null +++ b/toolkit/themes/shared/icons/defaultFavicon.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/delete.svg b/toolkit/themes/shared/icons/delete.svg new file mode 100644 index 0000000000..b03c08e139 --- /dev/null +++ b/toolkit/themes/shared/icons/delete.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/toolkit/themes/shared/icons/developer.svg b/toolkit/themes/shared/icons/developer.svg new file mode 100644 index 0000000000..d02257d4d1 --- /dev/null +++ b/toolkit/themes/shared/icons/developer.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/edit-copy.svg b/toolkit/themes/shared/icons/edit-copy.svg new file mode 100644 index 0000000000..9be786fb30 --- /dev/null +++ b/toolkit/themes/shared/icons/edit-copy.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/edit.svg b/toolkit/themes/shared/icons/edit.svg new file mode 100644 index 0000000000..54efa522c0 --- /dev/null +++ b/toolkit/themes/shared/icons/edit.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/error.svg b/toolkit/themes/shared/icons/error.svg new file mode 100644 index 0000000000..2552a35be9 --- /dev/null +++ b/toolkit/themes/shared/icons/error.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/experiments.svg b/toolkit/themes/shared/icons/experiments.svg new file mode 100644 index 0000000000..b9d9899b90 --- /dev/null +++ b/toolkit/themes/shared/icons/experiments.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/toolkit/themes/shared/icons/folder.svg b/toolkit/themes/shared/icons/folder.svg new file mode 100644 index 0000000000..eef51c2d78 --- /dev/null +++ b/toolkit/themes/shared/icons/folder.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/heart.svg b/toolkit/themes/shared/icons/heart.svg new file mode 100644 index 0000000000..bc2e160814 --- /dev/null +++ b/toolkit/themes/shared/icons/heart.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/icons/help.svg b/toolkit/themes/shared/icons/help.svg new file mode 100644 index 0000000000..61eda9fa5c --- /dev/null +++ b/toolkit/themes/shared/icons/help.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/toolkit/themes/shared/icons/highlights.svg b/toolkit/themes/shared/icons/highlights.svg new file mode 100644 index 0000000000..c7131d2114 --- /dev/null +++ b/toolkit/themes/shared/icons/highlights.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/toolkit/themes/shared/icons/indicator-private-browsing.svg b/toolkit/themes/shared/icons/indicator-private-browsing.svg new file mode 100644 index 0000000000..4cdc760e3c --- /dev/null +++ b/toolkit/themes/shared/icons/indicator-private-browsing.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/toolkit/themes/shared/icons/info-filled.svg b/toolkit/themes/shared/icons/info-filled.svg new file mode 100644 index 0000000000..62ed3def93 --- /dev/null +++ b/toolkit/themes/shared/icons/info-filled.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/info.svg b/toolkit/themes/shared/icons/info.svg new file mode 100644 index 0000000000..f85c206417 --- /dev/null +++ b/toolkit/themes/shared/icons/info.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/toolkit/themes/shared/icons/lightbulb.svg b/toolkit/themes/shared/icons/lightbulb.svg new file mode 100644 index 0000000000..04088549c3 --- /dev/null +++ b/toolkit/themes/shared/icons/lightbulb.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/icons/link.svg b/toolkit/themes/shared/icons/link.svg new file mode 100644 index 0000000000..4846d7253a --- /dev/null +++ b/toolkit/themes/shared/icons/link.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/toolkit/themes/shared/icons/loading.png b/toolkit/themes/shared/icons/loading.png new file mode 100644 index 0000000000..b886c73eff Binary files /dev/null and b/toolkit/themes/shared/icons/loading.png differ diff --git a/toolkit/themes/shared/icons/loading@2x.png b/toolkit/themes/shared/icons/loading@2x.png new file mode 100644 index 0000000000..ac928c5853 Binary files /dev/null and b/toolkit/themes/shared/icons/loading@2x.png differ diff --git a/toolkit/themes/shared/icons/more.svg b/toolkit/themes/shared/icons/more.svg new file mode 100644 index 0000000000..9fd6e47ec2 --- /dev/null +++ b/toolkit/themes/shared/icons/more.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/toolkit/themes/shared/icons/open-in-new.svg b/toolkit/themes/shared/icons/open-in-new.svg new file mode 100644 index 0000000000..ee2cbfd41b --- /dev/null +++ b/toolkit/themes/shared/icons/open-in-new.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/icons/page-landscape.svg b/toolkit/themes/shared/icons/page-landscape.svg new file mode 100644 index 0000000000..978275b63b --- /dev/null +++ b/toolkit/themes/shared/icons/page-landscape.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/page-portrait.svg b/toolkit/themes/shared/icons/page-portrait.svg new file mode 100644 index 0000000000..cb1a41d93d --- /dev/null +++ b/toolkit/themes/shared/icons/page-portrait.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/performance.svg b/toolkit/themes/shared/icons/performance.svg new file mode 100644 index 0000000000..00e4cb1d17 --- /dev/null +++ b/toolkit/themes/shared/icons/performance.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/icons/plugin-blocked.svg b/toolkit/themes/shared/icons/plugin-blocked.svg new file mode 100644 index 0000000000..9859878c86 --- /dev/null +++ b/toolkit/themes/shared/icons/plugin-blocked.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/icons/plugin.svg b/toolkit/themes/shared/icons/plugin.svg new file mode 100644 index 0000000000..994b8f7a00 --- /dev/null +++ b/toolkit/themes/shared/icons/plugin.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/plus.svg b/toolkit/themes/shared/icons/plus.svg new file mode 100644 index 0000000000..2cdd074173 --- /dev/null +++ b/toolkit/themes/shared/icons/plus.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/pocket-outline.svg b/toolkit/themes/shared/icons/pocket-outline.svg new file mode 100644 index 0000000000..8cb42204cd --- /dev/null +++ b/toolkit/themes/shared/icons/pocket-outline.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/icons/pocket.svg b/toolkit/themes/shared/icons/pocket.svg new file mode 100644 index 0000000000..e086af6990 --- /dev/null +++ b/toolkit/themes/shared/icons/pocket.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/print.svg b/toolkit/themes/shared/icons/print.svg new file mode 100644 index 0000000000..468d629aba --- /dev/null +++ b/toolkit/themes/shared/icons/print.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/radio.svg b/toolkit/themes/shared/icons/radio.svg new file mode 100644 index 0000000000..d23d5c4537 --- /dev/null +++ b/toolkit/themes/shared/icons/radio.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/icons/reload.svg b/toolkit/themes/shared/icons/reload.svg new file mode 100644 index 0000000000..efe90f99a8 --- /dev/null +++ b/toolkit/themes/shared/icons/reload.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/resizer.svg b/toolkit/themes/shared/icons/resizer.svg new file mode 100644 index 0000000000..116b144bef --- /dev/null +++ b/toolkit/themes/shared/icons/resizer.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + diff --git a/toolkit/themes/shared/icons/search-glass.svg b/toolkit/themes/shared/icons/search-glass.svg new file mode 100644 index 0000000000..3208646996 --- /dev/null +++ b/toolkit/themes/shared/icons/search-glass.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/security-broken.svg b/toolkit/themes/shared/icons/security-broken.svg new file mode 100644 index 0000000000..1e7f3eec96 --- /dev/null +++ b/toolkit/themes/shared/icons/security-broken.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/toolkit/themes/shared/icons/security-warning.svg b/toolkit/themes/shared/icons/security-warning.svg new file mode 100644 index 0000000000..804befad29 --- /dev/null +++ b/toolkit/themes/shared/icons/security-warning.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/icons/security.svg b/toolkit/themes/shared/icons/security.svg new file mode 100644 index 0000000000..62cd23abfc --- /dev/null +++ b/toolkit/themes/shared/icons/security.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/settings.svg b/toolkit/themes/shared/icons/settings.svg new file mode 100644 index 0000000000..8d8f791abe --- /dev/null +++ b/toolkit/themes/shared/icons/settings.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/icons/shortcut.svg b/toolkit/themes/shared/icons/shortcut.svg new file mode 100644 index 0000000000..124dba578d --- /dev/null +++ b/toolkit/themes/shared/icons/shortcut.svg @@ -0,0 +1,4 @@ + + diff --git a/toolkit/themes/shared/icons/sort-arrow.svg b/toolkit/themes/shared/icons/sort-arrow.svg new file mode 100644 index 0000000000..8602fead13 --- /dev/null +++ b/toolkit/themes/shared/icons/sort-arrow.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/icons/trackers.svg b/toolkit/themes/shared/icons/trackers.svg new file mode 100644 index 0000000000..d548719348 --- /dev/null +++ b/toolkit/themes/shared/icons/trackers.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/toolkit/themes/shared/icons/trending.svg b/toolkit/themes/shared/icons/trending.svg new file mode 100644 index 0000000000..e7803199f1 --- /dev/null +++ b/toolkit/themes/shared/icons/trending.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/undo.svg b/toolkit/themes/shared/icons/undo.svg new file mode 100644 index 0000000000..b9d599e3e6 --- /dev/null +++ b/toolkit/themes/shared/icons/undo.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/update-icon.svg b/toolkit/themes/shared/icons/update-icon.svg new file mode 100644 index 0000000000..f263964b8c --- /dev/null +++ b/toolkit/themes/shared/icons/update-icon.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/warning-fill-12.svg b/toolkit/themes/shared/icons/warning-fill-12.svg new file mode 100644 index 0000000000..b9e67f3e1d --- /dev/null +++ b/toolkit/themes/shared/icons/warning-fill-12.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/icons/warning.svg b/toolkit/themes/shared/icons/warning.svg new file mode 100644 index 0000000000..8ffcbb20fe --- /dev/null +++ b/toolkit/themes/shared/icons/warning.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/icons/whatsnew.svg b/toolkit/themes/shared/icons/whatsnew.svg new file mode 100644 index 0000000000..b77d0165a6 --- /dev/null +++ b/toolkit/themes/shared/icons/whatsnew.svg @@ -0,0 +1,10 @@ + + + + + + + + diff --git a/toolkit/themes/shared/illustrations/about-license.svg b/toolkit/themes/shared/illustrations/about-license.svg new file mode 100644 index 0000000000..79498ec594 --- /dev/null +++ b/toolkit/themes/shared/illustrations/about-license.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/toolkit/themes/shared/illustrations/about-rights.svg b/toolkit/themes/shared/illustrations/about-rights.svg new file mode 100644 index 0000000000..8a25c087c9 --- /dev/null +++ b/toolkit/themes/shared/illustrations/about-rights.svg @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/toolkit/themes/shared/illustrations/error-malformed-url.svg b/toolkit/themes/shared/illustrations/error-malformed-url.svg new file mode 100644 index 0000000000..36974c3b8c --- /dev/null +++ b/toolkit/themes/shared/illustrations/error-malformed-url.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css new file mode 100644 index 0000000000..a25cfda112 --- /dev/null +++ b/toolkit/themes/shared/in-content/common-shared.css @@ -0,0 +1,1474 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/design-tokens-brand.css"); + +@namespace html "http://www.w3.org/1999/xhtml"; +@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; + +:host, +:root { + --in-content-page-color: rgb(21, 20, 26); + --in-content-page-background: #fff; + --in-content-text-color: var(--in-content-page-color); + --in-content-box-background: #fff; + --in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */ + --in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent); + --in-content-box-info-background: #f0f0f4; + --in-content-item-hover: color-mix(in srgb, var(--in-content-primary-button-background) 20%, transparent); + --in-content-item-hover-text: var(--in-content-page-color); + --in-content-item-selected: var(--in-content-primary-button-background); + --in-content-item-selected-text: var(--in-content-primary-button-text-color); + --in-content-icon-color: rgb(91,91,102); + --in-content-accent-color: var(--in-content-primary-button-background); + --in-content-accent-color-active: var(--in-content-primary-button-background-hover); + --in-content-border-hover: var(--grey-90-a50); + --in-content-border-invalid: var(--red-50); + --in-content-border-color: #d7d7db; + --in-content-error-text-color: #c50042; + --in-content-success-icon-color: #2ac3a2; + --in-content-link-color: var(--in-content-primary-button-background); + --in-content-link-color-hover: var(--in-content-primary-button-background-hover); + --in-content-link-color-active: var(--in-content-primary-button-background-active); + --in-content-link-color-visited: var(--in-content-link-color); + --in-content-button-text-color: var(--in-content-text-color); + --in-content-button-text-color-hover: var(--in-content-text-color); + --in-content-button-text-color-active: var(--in-content-button-text-color-hover); + /* button background states are also used for checkboxes and radiobuttons */ + --in-content-button-background: color-mix(in srgb, currentColor 7%, transparent); + --in-content-button-background-hover: color-mix(in srgb, currentColor 14%, transparent); + --in-content-button-background-active: color-mix(in srgb, currentColor 21%, transparent); + --in-content-button-border-color: transparent; + --in-content-button-border-color-hover: transparent; + --in-content-button-border-color-active: var(--in-content-button-border-color-hover); + --in-content-primary-button-text-color: rgb(251,251,254); + --in-content-primary-button-text-color-hover: var(--in-content-primary-button-text-color); + --in-content-primary-button-text-color-active: var(--in-content-primary-button-text-color); + --in-content-primary-button-background: #0061e0; + --in-content-primary-button-background-hover: #0250bb; + --in-content-primary-button-background-active: #053e94; + --in-content-primary-button-border-color: transparent; + --in-content-primary-button-border-hover: transparent; + --in-content-primary-button-border-active: transparent; + --in-content-danger-button-background: #e22850; + --in-content-danger-button-background-hover: #c50042; + --in-content-danger-button-background-active: #810220; + --in-content-focus-outline-color: var(--focus-outline-color); + --in-content-focus-outline-width: var(--focus-outline-width); + --in-content-focus-outline-offset: var(--focus-outline-offset); + --in-content-focus-outline-inset: var(--focus-outline-inset); + --in-content-focus-outline: var(--focus-outline); + + --in-content-table-background: #f8f8fa; + --in-content-table-border-color: var(--in-content-box-border-color); + --in-content-table-header-background: var(--in-content-primary-button-background); + --in-content-table-header-color: var(--in-content-primary-button-text-color); + --in-content-sidebar-width: 240px; + + --dialog-warning-text-color: var(--red-60); + + --checkbox-border-color: var(--in-content-box-border-color); + --checkbox-unchecked-bgcolor: var(--in-content-button-background); + --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover); + --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active); + --checkbox-checked-bgcolor: var(--in-content-primary-button-background); + --checkbox-checked-color: var(--in-content-primary-button-text-color); + --checkbox-checked-border-color: transparent; + --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover); + --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active); + + --blue-40: #45a1ff; + --blue-50: #0a84ff; + --blue-60: #0060df; + --grey-30: #d7d7db; + --grey-60: #4a4a4f; + --grey-90-a10: rgba(12, 12, 13, 0.1); + --grey-90-a20: rgba(12, 12, 13, 0.2); + --grey-90-a30: rgba(12, 12, 13, 0.3); + --grey-90-a50: rgba(12, 12, 13, 0.5); + --grey-90-a60: rgba(12, 12, 13, 0.6); + --green-50: #30e60b; + --green-60: #12bc00; + --green-70: #058b00; + --green-80: #006504; + --green-90: #003706; + --orange-50: #ff9400; + --red-40: #ff4f5e; + --red-50: #ff0039; + --red-60: #d70022; + --red-70: #a4000f; + --red-80: #5a0002; + --red-90: #3e0200; + --yellow-50: #ffe900; + --yellow-60: #d7b600; + --yellow-60-a30: rgba(215, 182, 0, 0.3); + --yellow-70: #a47f00; + --yellow-80: #715100; + --yellow-90: #3e2800; + + --shadow-10: 0 1px 4px var(--grey-90-a10); + --shadow-30: 0 4px 16px var(--grey-90-a10); + + --card-padding: 16px; + --card-shadow: var(--shadow-10); + --card-outline-color: var(--grey-30); + --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); + + accent-color: var(--in-content-accent-color); + color-scheme: light dark; +} + +@media (prefers-color-scheme: dark) { + :host, + :root { + /* Keep these in sync with: + * + * * nsXPLookAndFeel::GenericDarkColor + * * The default value of browser.display.foreground_color.dark and + * browser.display.background_color.dark + * + * TODO (emilio): Once color-scheme support is complete, perhaps we can + * just replace most of these for system colors and remove all this + * duplication (assuming we honor the preferred color scheme for + * in-content privileged pages and plain-text documents). */ + --in-content-page-background: rgb(28,27,34); + --in-content-page-color: rgb(251,251,254); + + --in-content-box-background: rgb(35, 34, 43); + --in-content-box-background-odd: rgba(249,249,250,0.05); + --in-content-box-info-background: rgba(249,249,250,0.15); + + --in-content-border-color: rgba(249,249,250,0.2); + --in-content-border-hover: rgba(249,249,250,0.3); + --in-content-border-invalid: rgb(255,132,139); + + --in-content-error-text-color: #FF9AA2; + --in-content-success-icon-color: #54FFBD; + + --in-content-icon-color: rgb(251,251,254); + + --in-content-primary-button-text-color: rgb(43,42,51); + --in-content-primary-button-background: rgb(0,221,255); + --in-content-primary-button-background-hover: rgb(128,235,255); + --in-content-primary-button-background-active: rgb(170,242,255); + + --in-content-danger-button-background: #ff848b; + --in-content-danger-button-background-hover: #ffbdc5; + --in-content-danger-button-background-active: #ffdfe7; + + --in-content-table-background: rgb(35, 34, 43); + + --card-outline-color: var(--grey-60); + + --dialog-warning-text-color: var(--red-40); + + scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3); + } + + /* For dialogs, use a different background colour. We don't do + * this in High Contrast mode, as we should be using system colours then. + */ + @media not (prefers-contrast) { + :root[dialogroot], + /* Also need this on dialog :hosts, or the rule above will override the + * value for this custom property again in the shadow DOM. */ + :host(dialog) { + --in-content-page-background: #42414d; + } + } +} + +@media (prefers-contrast) { + :host, + :root { + --in-content-page-color: CanvasText; + --in-content-page-background: Canvas; + + --in-content-box-background: -moz-Dialog; + --in-content-box-background-odd: -moz-Dialog; + --in-content-box-border-color: -moz-DialogText; + --in-content-box-info-background: -moz-Dialog; + + --in-content-item-hover: SelectedItem; + --in-content-item-hover-text: SelectedItemText; + --in-content-item-selected: SelectedItem; + --in-content-item-selected-text: SelectedItemText; + --in-content-icon-color: -moz-DialogText; + + --in-content-accent-color: SelectedItem; + --in-content-accent-color-active: SelectedItem; + + --in-content-border-hover: ThreeDShadow; + /* This is not great, but there is no suitable keyword for this. + * In theory, we shouldn't be conveying invalid state just with a colour + * change... */ + --in-content-border-invalid: ThreeDShadow; + --in-content-border-color: ThreeDShadow; + + --in-content-link-color: -moz-nativehyperlinktext; + --in-content-link-color-hover: -moz-nativehyperlinktext; + --in-content-link-color-active: -moz-nativehyperlinktext; + --in-content-link-color-visited: -moz-nativehyperlinktext; + + --in-content-button-text-color: ButtonText; + --in-content-button-text-color-hover: SelectedItemText; + --in-content-button-text-color-active: SelectedItem; + --in-content-button-background: ButtonFace; + --in-content-button-background-hover: SelectedItem; + --in-content-button-background-active: SelectedItemText; + --in-content-button-border-color: ButtonText; + --in-content-button-border-color-hover: SelectedItemText; + --in-content-button-border-color-active: SelectedItem; + + --in-content-primary-button-text-color: ButtonFace; + --in-content-primary-button-text-color-hover: SelectedItemText; + --in-content-primary-button-text-color-active: SelectedItem; + --in-content-primary-button-background: ButtonText; + --in-content-primary-button-background-hover: SelectedItem; + --in-content-primary-button-background-active: SelectedItemText; + --in-content-primary-button-border-color: ButtonFace; + --in-content-primary-button-border-hover: SelectedItemText; + --in-content-primary-button-border-active: SelectedItem; + + --in-content-danger-button-background: var(--in-content-primary-button-background); + --in-content-danger-button-background-hover: var(--in-content-primary-button-background-hover); + --in-content-danger-button-background-active: var(--in-content-primary-button-background-active); + + --in-content-focus-outline-color: -moz-DialogText; + + --in-content-table-border-color: ThreeDDarkShadow; + --in-content-table-background: -moz-Dialog; + --in-content-table-header-background: -moz-Dialog; + --in-content-table-header-color: -moz-DialogText; + + --dialog-warning-text-color: -moz-FieldText; + + --checkbox-border-color: ThreeDShadow; + --checkbox-unchecked-bgcolor: -moz-Field; + --checkbox-unchecked-hover-bgcolor: -moz-Field; + --checkbox-unchecked-active-bgcolor: -moz-Field; + --checkbox-checked-bgcolor: SelectedItem; + --checkbox-checked-color: SelectedItemText; + --checkbox-checked-border-color: SelectedItem; + --checkbox-checked-hover-bgcolor: -moz-Field; + --checkbox-checked-active-bgcolor: -moz-Field; + } +} + +:root { + font: message-box; + appearance: none; + background-color: var(--in-content-page-background); + color: var(--in-content-page-color); +} + +:root:not(.system-font-size) { + font-size: var(--in-content-font-body-size-base); +} + +html|body { + margin: 0; +} + +html|h1 { + font-size: 2.5em; + font-weight: lighter; + line-height: 1.2; + color: var(--in-content-text-color); + margin: 0; + margin-bottom: .5em; +} + +html|hr { + border-style: solid none none none; + border-color: var(--in-content-border-color); +} + +html|h2 { + font-weight: 600; + line-height: 1.4em; +} + +.main-content { + padding: 40px 28px; + overflow: auto; +} + +/* tabpanels and tabs */ + +xul|tabpanels { + appearance: none; + border: none; + padding: 0; + background-color: transparent; + color: inherit; + color-scheme: unset; +} + +xul|tabs { + margin-bottom: 10px; + border-bottom: 1px solid var(--in-content-border-color); + background-color: transparent; + color: inherit; +} + +xul|tab { + appearance: none; + margin: 0; + padding: 2px 20px 0; + min-height: 44px; + color: inherit; + background-color: transparent; + border-bottom: 2px solid transparent; + transition: background-color 50ms ease 0s; + color-scheme: unset; +} + +xul|tab:where(:hover) { + border-bottom-color: var(--in-content-border-color); + background-color: var(--in-content-button-background-hover); + color: var(--in-content-button-text-color-hover); +} + +xul|tab:where(:hover:active) { + background-color: var(--in-content-button-background-active); + color: var(--in-content-button-text-color-active); +} + +xul|tab[selected] { + color: var(--in-content-accent-color); + border-bottom-color: currentColor; +} + +xul|tab[selected]:hover { + background-color: var(--in-content-button-background-hover); +} + +xul|tab[selected]:hover:active { + background-color: var(--in-content-button-background-active); +} + +@media (prefers-contrast) { + xul|tab:hover, + xul|tab:hover:active { + border-bottom-color: currentColor; + } + + xul|tab[selected]:hover { + color: var(--in-content-button-text-color-hover); + } + + xul|tab[selected]:hover:active { + color: var(--in-content-button-text-color-active); + } +} + +/* html buttons */ + +html|button { + font: inherit; +} + +/* xul buttons and menulists */ + +button, +html|select, +html|input[type="color"], +xul|menulist { + appearance: none; + min-height: 32px; + color: var(--in-content-button-text-color); + border: 1px solid var(--in-content-button-border-color); + border-radius: 4px; + background-color: var(--in-content-button-background); + font-weight: 400; + padding: 7px 15px; + text-decoration: none; + margin: 4px 8px; + /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */ + font-size: 1em; +} + +button { + font-weight: 600; +} + +/* Small buttons get sized to 6/12px padding (when adding the 1px border) */ +button.small-button { + padding: 5px 11px; + min-height: 24px; + font-size: 0.9em; +} + +/* Remove margin added by button.css */ +xul|button > .button-box > .button-text { + margin: 0; +} + +xul|button, +html|button { + /* Use the same margin of other elements for the alignment */ + margin-inline: 4px; +} + +::-moz-focus-inner { + border: none; +} + +button:focus-visible, +html|select:focus-visible, +html|input:is([type="checkbox"], [type="color"], [type="radio"]):focus-visible, +xul|menulist:focus-visible, +xul|checkbox:not([native]):focus-visible > .checkbox-check, /* :not([native]) to win specificity over checkbox.css */ +xul|radio[focused="true"] > .radio-check, +xul|tab:focus-visible > .tab-middle > .tab-text { + box-shadow: none; + /* Don't set `var(--in-content-focus-outline)` here to allow more complicated UIs + to use a different color when needed */ + outline: var(--in-content-focus-outline-width) solid var(--in-content-focus-outline-color); + outline-offset: var(--in-content-focus-outline-offset); +} + +html|select:not([size], [multiple]) { + background-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + background-position: right 19px center; + background-repeat: no-repeat; + background-size: auto 12px; + -moz-context-properties: fill; + fill: currentColor; + font: inherit; + font-weight: 600; + + /* The following padding matches how a menulist is internally spaced. + * 15px is the menulist's standard padding-inline, 3px is for + * the internal label margin, 12px is the dropmarker's width + * and 4px is the dropmarker's margin-inline-end. */ + padding-inline-start: calc(15px + 3px); + padding-inline-end: calc(15px + 12px + 4px); + text-overflow: ellipsis; +} + +html|select:not([size], [multiple]):dir(rtl) { + background-position-x: left 19px; +} + +html|select:not([size], [multiple]) > html|option { + background-color: var(--in-content-box-background); + color: var(--in-content-text-color); +} + +html|button:enabled:hover, +html|select:not([size], [multiple]):enabled:hover, +html|input[type="color"]:hover, +xul|button:not([disabled="true"]):hover, +xul|menulist:not([disabled="true"]):hover { + background-color: var(--in-content-button-background-hover); + color: var(--in-content-button-text-color-hover); + border-color: var(--in-content-button-border-color-hover); +} + +html|button:enabled:hover:active, +html|select:not([size], [multiple]):enabled:hover:active, +html|input[type="color"]:enabled:hover:active, +xul|button:not([disabled="true"]):hover:active, +xul|button[open], +xul|button[open]:hover, +xul|menulist[open="true"]:not([disabled="true"]) { + background-color: var(--in-content-button-background-active); + color: var(--in-content-button-text-color-active); + border-color: var(--in-content-button-border-color-active); +} + +html|button:disabled, +html|select:disabled, +html|input[type="color"]:disabled, +xul|button[disabled="true"], +xul|menulist[disabled="true"] { + opacity: 0.4; +} + +html|button[autofocus], +html|button[type="submit"], +xul|button[default], +button.primary { + background-color: var(--in-content-primary-button-background); + color: var(--in-content-primary-button-text-color); + border-color: var(--in-content-primary-button-border-color); +} + +html|button[autofocus]:enabled:hover, +html|button[type="submit"]:enabled:hover, +html|button.primary:enabled:hover, +xul|button[default]:not([disabled="true"]):hover, +xul|button.primary:not([disabled="true"]):hover { + background-color: var(--in-content-primary-button-background-hover); + color: var(--in-content-primary-button-text-color-hover); + border-color: var(--in-content-primary-button-border-hover); +} + +html|button[autofocus]:enabled:hover:active, +html|button[type="submit"]:enabled:hover:active, +html|button.primary:enabled:hover:active, +xul|button[default]:not([disabled="true"]):hover:active, +xul|button.primary:not([disabled="true"]):hover:active { + background-color: var(--in-content-primary-button-background-active); + color: var(--in-content-primary-button-text-color-active); + border-color: var(--in-content-primary-button-border-active); +} + +@media not (prefers-contrast) { + html|button.semi-transparent:not(.ghost-button, .primary):enabled { + background-color: color-mix(in srgb, currentColor 10%, transparent); + } + + html|button.semi-transparent:not(.primary):enabled:hover { + background-color: color-mix(in srgb, currentColor 20%, transparent); + } + + html|button.semi-transparent:not(.primary):enabled:hover:active { + background-color: color-mix(in srgb, currentColor 30%, transparent); + } +} + +.danger-button { + --in-content-primary-button-background: var(--in-content-danger-button-background); + --in-content-primary-button-background-hover: var(--in-content-danger-button-background-hover); + --in-content-primary-button-background-active: var(--in-content-danger-button-background-active); + --in-content-focus-outline-color: var(--in-content-danger-button-background); +} + +@media not (prefers-contrast) { + html|button.ghost-button { + background-color: transparent; + } +} + +html|button.ghost-button:not(.semi-transparent):enabled:hover { + background-color: var(--in-content-button-background-hover); + color: var(--in-content-button-text-color-hover); +} + +html|button.ghost-button:not(.semi-transparent):enabled:hover:active { + background-color: var(--in-content-button-background-active); + color: var(--in-content-button-text-color-active); +} + +html|button.ghost-button.icon-button { + height: 16px; + width: 16px; + min-width: auto; + background-repeat: no-repeat; + background-size: 16px; + background-position: center; + fill: currentColor; + -moz-context-properties: fill; +} + +html|input[type="color"] { + padding: 6px; + width: 50px; +} + +xul|menulist[image]::part(icon) { + margin-inline-end: 5px; +} + +xul|menulist::part(dropmarker) { + appearance: none; + margin-inline-end: 4px; + padding: 0; + border: none; + background-color: transparent; + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + align-items: center; + -moz-context-properties: fill; + fill: currentColor; +} + +xul|menulist > xul|menupopup { + appearance: none; + + /* Reset native styles on Windows and macOS */ + border: none; + background-color: transparent; + + --panel-border-color: var(--in-content-box-border-color); + --panel-border-radius: 2px; + --panel-background: var(--in-content-box-background); + --panel-color: var(--in-content-text-color); + --panel-padding: 0; +} + +xul|menulist > xul|menupopup xul|menu, +xul|menulist > xul|menupopup xul|menuitem { + appearance: none; + font-size: 1em; + padding-block: 0.2em; + padding-inline: 10px 30px; +} + +xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"], +xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] { + color: var(--in-content-item-hover-text); + background-color: var(--in-content-item-hover); +} + +xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"], +xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] { + color: var(--in-content-item-selected-text); + background-color: var(--in-content-item-selected); +} + +xul|menulist > xul|menupopup > xul|menu[disabled="true"], +xul|menulist > xul|menupopup > xul|menuitem[disabled="true"] { + color: #999; + /* override the [_moz-menuactive="true"] background color from + global/menu.css */ + background-color: transparent; +} + +xul|menulist > xul|menupopup xul|menuseparator { + appearance: none; + margin: 0; + padding: 0; + border-top: 1px solid var(--in-content-box-border-color); + border-bottom: none; +} + +/* textboxes */ + +html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), +html|textarea, +xul|search-textbox { + appearance: none; + border: 1px solid var(--in-content-box-border-color); + border-radius: 4px; + color: inherit; + background-color: var(--in-content-box-background); +} + +xul|search-textbox { + min-height: 32px; + padding-inline: 8px; +} + +html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), +html|textarea { + font-family: inherit; + font-size: inherit; + padding: 8px; + margin: 2px 4px; +} + +html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus, +html|textarea:focus, +xul|search-textbox[focused], +xul|tree:focus-visible, +xul|richlistbox:focus-visible { + border-color: transparent; + outline: var(--in-content-focus-outline); + outline-offset: -1px; /* Prevents antialising around the corners */ +} + +html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):-moz-ui-invalid, +html|textarea:-moz-ui-invalid { + border-color: transparent; + outline: 2px solid var(--in-content-border-invalid); + outline-offset: -1px; /* Prevents antialising around the corners */ +} + +html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):disabled, +html|textarea:disabled, +xul|search-textbox[disabled="true"] { + opacity: 0.4; +} + +/* Links */ + +html|a, +.text-link { + color: var(--in-content-link-color); +} + +html|a:hover, +.text-link:hover, +button.text-link:is(:not([disabled="true"]), :enabled):hover { + color: var(--in-content-link-color-hover); +} + +html|a:visited { + color: var(--in-content-link-color-visited); +} + +html|a:hover:active, +.text-link:hover:active, +button.text-link:is(:not([disabled="true"]), :enabled):hover:active { + color: var(--in-content-link-color-active); + text-decoration: none; +} + +html|a:focus-visible, +.text-link:focus-visible { + outline: var(--in-content-focus-outline); + outline-offset: 1px; + border-radius: 4px; +} + +button.text-link { + background-color: transparent !important; /* override hover related background changes */ + padding: 0; + border: 0; + font-weight: normal; + min-height: 0; + min-width: 0; +} + +/* Checkboxes and radio buttons */ + +/* Add invisible vertical click-target */ +xul|*.checkbox-check, +html|input[type="checkbox"] { + margin-block: 2px; +} + +html|input[type="checkbox"] { + appearance: none; + height: 16px; + width: 16px; + border: 1px solid var(--checkbox-border-color); + background-color: var(--checkbox-unchecked-bgcolor); + border-radius: 2px; + margin-inline: 0 6px; + flex-shrink: 0; /* avoid shrinking inside flex container */ +} + +html|input[type="checkbox"]:enabled:hover { + background-color: var(--checkbox-unchecked-hover-bgcolor); +} + +html|input[type="checkbox"]:enabled:hover:active { + background-color: var(--checkbox-unchecked-active-bgcolor); +} + +html|input[type="checkbox"]:checked { + border-color: var(--checkbox-checked-border-color); + background-color: var(--checkbox-checked-bgcolor); + background-image: url("chrome://global/skin/icons/check.svg"); + background-position: center; + background-repeat: no-repeat; + -moz-context-properties: fill; + fill: currentColor; + color: var(--checkbox-checked-color); + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact; +} + +html|input[type="checkbox"]:enabled:checked:hover { + background-color: var(--checkbox-checked-hover-bgcolor); +} + +html|input[type="checkbox"]:enabled:checked:hover:active { + background-color: var(--checkbox-checked-active-bgcolor); +} + +@media (prefers-contrast) { + html|input[type="checkbox"] { + /* Normalize the border-color to the in-content version following color */ + border-color: currentColor; + color: var(--checkbox-border-color); + } + + html|input[type="checkbox"]:not(:checked):enabled:hover { + /* color sets the border color in HCM in-content */ + color: var(--checkbox-checked-border-color); + } + + html|input[type="checkbox"]:checked:enabled { + /* color sets the border color in HCM in-content */ + color: var(--checkbox-checked-bgcolor); + fill: var(--checkbox-checked-color); + } + + html|input[type="checkbox"]:checked:enabled:hover { + fill: var(--checkbox-checked-bgcolor); + } +} + +xul|richlistitem > xul|*.checkbox-check { + margin: 3px 6px; +} + +html|*.radio-container-with-text, +html|*.toggle-container-with-text { + display: flex; + align-items: center; +} + +xul|radio { + margin-inline-start: 0; + appearance: none; +} + +html|input[type="radio"], +xul|*.radio-check { + appearance: none; + width: 16px; + height: 16px; + padding: 0; + border: 1px solid var(--in-content-box-border-color); + border-radius: 100%; + margin-block: 2px; /* extend the vertical clicktarget */ + margin-inline: 0 6px; + background-color: var(--in-content-button-background); + background-position: center; + flex-shrink: 0; /* avoid shrinking inside flex container */ +} + +@media (prefers-contrast) { + html|input[type="radio"], + xul|*.radio-check { + border-color: var(--in-content-button-border-color); + } + + html|input[type="radio"]:enabled:hover, + xul|radio:not([disabled="true"]):hover > xul|*.radio-check { + border-color: var(--in-content-button-border-color-hover); + } + + html|input[type="radio"]:enabled:hover:active, + xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check { + border-color: var(--in-content-button-border-color-active); + } +} + +html|input[type="radio"]:enabled:hover, +xul|radio:not([disabled="true"]):hover > xul|*.radio-check { + background-color: var(--in-content-button-background-hover); + color: var(--in-content-button-text-color-hover); +} + +html|input[type="radio"]:enabled:hover:active, +xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check { + background-color: var(--in-content-button-background-active); + color: var(--in-content-button-text-color-active); +} + +html|input[type="radio"]:checked, +xul|*.radio-check[selected] { + -moz-context-properties: fill; + fill: currentColor; + color: var(--in-content-primary-button-text-color); + background-color: var(--in-content-primary-button-background); + background-image: url("chrome://global/skin/icons/radio.svg"); + border-color: var(--in-content-primary-button-border-color); + + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact; +} + +html|input[type="radio"]:enabled:checked:hover, +xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check { + background-color: var(--in-content-primary-button-background-hover); + color: var(--in-content-primary-button-text-color-hover); + border-color: var(--in-content-primary-button-border-hover); +} + +html|input[type="radio"]:enabled:checked:hover:active, +xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check { + background-color: var(--in-content-primary-button-background-active); + color: var(--in-content-primary-button-text-color-active); + border-color: var(--in-content-primary-button-border-active); +} + +xul|*.radio-label-box { + margin-inline: 0 8px; + padding-inline-start: 0; +} + +/* Disabled checkboxes, radios and labels */ + +xul|checkbox[disabled="true"], +xul|radio[disabled="true"], +xul|label[disabled="true"] { + color: inherit; +} + +html|input[type="checkbox"]:disabled, +html|input[type="radio"]:disabled, +xul|checkbox[disabled="true"], +xul|radio[disabled="true"], +xul|label[disabled="true"] { + opacity: 0.5; +} + +/* Category List */ + +#categories { + appearance: none; + background-color: initial; /* override the background-color set on all richlistboxes in common.inc.css */ + margin: 70px 0 0; + border-width: 0; + width: var(--in-content-sidebar-width); + outline: none; +} + +@media print { + #categories { + display: none; + } +} + +html|*#categories { + box-sizing: border-box; + padding: 1px; +} + +#categories > .category { + border: 1px solid var(--in-content-primary-button-border-color); + border-radius: 4px; + min-height: 48px; + appearance: none; + color: inherit; + margin-inline-start: 34px; + padding-inline: 10px; + transition: background-color 150ms; +} + +html|*#categories > html|*.category { + border: 1px solid var(--in-content-primary-button-border-color); + background-color: initial; + background-size: 24px; + background-repeat: no-repeat; + background-position-x: 10px; + background-position-y: 12px; + margin-inline-end: 0; + min-width: auto; + padding-inline-start: 34px; + text-align: start; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; +} + +html|*#categories > html|*.category:dir(rtl) { + background-position-x: right 10px; +} + +#categories > .category:hover { + background-color: var(--in-content-button-background-hover); + color: var(--in-content-button-text-color-hover); + border-color: var(--in-content-button-border-color-hover); +} + +#categories > .category:hover:active { + background-color: var(--in-content-button-background-active); + color: var(--in-content-button-text-color-active); + border-color: var(--in-content-button-border-color-active); +} + +@media not (prefers-contrast) { + #categories > .category[selected], + #categories > .category.selected { + color: var(--in-content-accent-color); + } + + #categories > .category[selected]:not(:hover) { + /* override richlistitem selected style while letting hover style above apply */ + background-color: transparent; + } + + #categories > .category[selected]:hover:active, + #categories > .category.selected:hover:active { + color: var(--in-content-accent-color-active); + } +} + +@media (prefers-contrast) { + #categories > .category { + /* The transition causes issues with the text getting a background while + * transitioning and it looks weird. */ + transition: none; + /* We need a true transparent but in HCM this would compute to an actual color, + * so select the page's background color instead: */ + border-color: var(--in-content-page-background); + } + + #categories > .category[selected], + #categories > .category.selected { + background-color: var(--in-content-button-background-hover); + color: var(--in-content-button-text-color-hover); + border-color: var(--in-content-button-border-color-hover); + } +} + +#categories[keyboard-navigation="true"]:focus-visible > .category[current], +#categories > .category:focus-visible { + outline: var(--in-content-focus-outline); + outline-offset: var(--in-content-focus-outline-inset); +} + +html|*#categories[last-input-type="mouse"] > html|button.category:focus-visible { + outline: none; +} + +.category-name { + font-size: 1.07em; + line-height: 1.4em; + padding-inline-start: 9px; + margin: 0; + user-select: none; +} + +.category-icon { + width: 24px; + height: 24px; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; +} + +.category[selected] > .category-icon, +.category.selected > .category-icon { + fill-opacity: 1; +} + +@media (max-width: 830px) { + :root { + --in-content-sidebar-width: 118px; + } + + html|*.category:not(.category-no-icon) > html|*.category-name, + .category-icon + .category-name { + display: none; + } + + #categories > .category { + padding-inline-start: 12px; /* make category icons align center */ + margin-inline-end: 33px; + } + + html|*#categories > html|*.category { + width: 48px; + min-width: auto; + box-sizing: border-box; + } + + html|*#categories > html|*.category, + /* We need to override the full-width RTL rule, so explicitly specify RTL. */ + html|*#categories > html|*.category:dir(rtl) { + background-position: center; + } + + .main-content { + padding-inline: 0; + } + + .pane-container { + margin-inline-end: 10px; + } +} + +/* header */ + +.header { + margin-inline-end: 4px; /* add the 4px end-margin of other elements */ + margin-bottom: 15px; + padding-bottom: 15px; + align-items: baseline; +} + +.header-name { + font-size: 1.46em; + font-weight: 300; + line-height: 1.3em; + margin: 0; +} + +/* List boxes */ + +html|select[size][multiple], +xul|listheader, +xul|richlistbox { + appearance: none; + margin-inline: 0; + background-color: var(--in-content-box-background); + border: 1px solid var(--in-content-box-border-color); + border-radius: 4px; + color: var(--in-content-text-color); +} + +xul|listheader { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + overflow: clip; /* Clip border-radius */ +} + +xul|listheader + xul|richlistbox { + margin-top: 0; + border-top: none; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +html|select[size][multiple] > html|option, +xul|treechildren::-moz-tree-row { + padding: 0.3em; + margin: 0; + border: none; + border-radius: 0; + background-image: none; +} + +xul|treechildren::-moz-tree-row(multicol, odd) { + background-color: var(--in-content-box-background-odd); +} + +html|select[size][multiple] > html|option:hover, +xul|treechildren::-moz-tree-row(hover) { + background-color: var(--in-content-item-hover); + color: var(--in-content-item-hover-text); +} + +xul|richlistbox > xul|richlistitem[selected], +xul|treechildren::-moz-tree-row(selected) { + background-color: var(--in-content-item-selected); + color: var(--in-content-item-selected-text); +} + +@media not (prefers-contrast) { + xul|richlistbox:not(#categories) > xul|richlistitem[selected] { + /* Ensure buttons/menulists inside richlistitems (containers, applications) look OK */ + --in-content-button-background: color-mix(in srgb, currentColor 15%, transparent); + --in-content-button-background-hover: color-mix(in srgb, currentColor 30%, transparent); + --in-content-button-background-active: color-mix(in srgb, currentColor 45%, transparent); + --in-content-button-text-color: var(--in-content-item-selected-text); + --in-content-button-text-color-hover: var(--in-content-item-selected-text); + --in-content-button-text-color-active: var(--in-content-button-text-color-hover); + --in-content-focus-outline-color: var(--in-content-item-selected-text); + } +} + +xul|richlistitem[selected] xul|menulist:focus-visible { + outline-offset: var(--in-content-focus-outline-inset); +} + +/* Use a 2px border so that selected row highlight is still visible behind + an existing high-contrast border that uses the background color */ +@media (prefers-contrast) { + xul|treechildren::-moz-tree-row(selected) { + border: 2px solid currentColor; + border-radius: 4px; + } +} + +xul|panel[type="autocomplete-richlistbox"] { + background-color: var(--in-content-box-background); + border: 1px solid var(--in-content-box-border-color); + color: var(--in-content-text-color); +} + +/* Trees */ + +xul|tree { + appearance: none; + font-size: 1em; + border: 1px solid var(--in-content-box-border-color); + border-radius: 4px; + background-color: var(--in-content-box-background); + color: inherit; + margin: 0; +} + +xul|treecols { + appearance: none; + border: none; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border-bottom: 1px solid var(--in-content-border-color); + overflow: clip; /* Clip border-radius */ + padding: 0; +} + +xul|treecol:not([hideheader="true"]), +.tree-columnpicker-button { + appearance: none; + border: none; + border-radius: unset; + background-color: var(--in-content-button-background); + color: var(--in-content-button-text-color, inherit); + padding: 5px 10px; +} + +xul|treecol:not([hideheader="true"], [sortable="false"]):hover, +.tree-columnpicker-button:hover { + background-color: var(--in-content-button-background-hover); + color: var(--in-content-button-text-color-hover); +} + +xul|treecol:not([hideheader="true"], [sortable="false"]):hover:active, +.tree-columnpicker-button:hover:active { + background-color: var(--in-content-button-background-active); + color: var(--in-content-button-text-color-active); +} + +xul|treecol:not([hideheader="true"], :first-child), +.tree-columnpicker-button { + border-inline-start-width: 1px; + border-inline-start-style: solid; + border-image: linear-gradient(transparent 0%, transparent 20%, var(--in-content-box-border-color) 20%, var(--in-content-box-border-color) 80%, transparent 80%, transparent 100%) 1 1; +} + +@media (prefers-contrast) { + xul|treecol:not([hideheader="true"], :first-child), + xul|treecolpicker { + --in-content-box-border-color: var(--in-content-button-border-color); + } +} + +xul|treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection { + list-style-image: url("chrome://global/skin/icons/sort-arrow.svg"); + -moz-context-properties: fill; + fill: currentColor; + width: 18px; + height: 18px; +} + +xul|treecol[sortDirection="ascending"]:not([hideheader="true"]) > xul|*.treecol-sortdirection { + transform: scaleY(-1); +} + +/* This is the only way to increase the height of a tree row unfortunately */ +xul|treechildren::-moz-tree-row { + min-height: 2em; +} + +xul|treechildren::-moz-tree-cell-text(hover), +xul|treechildren::-moz-tree-twisty(hover), +xul|treechildren::-moz-tree-image(hover) { + color: var(--in-content-item-hover-text); +} + +xul|treechildren::-moz-tree-cell-text(selected), +xul|treechildren::-moz-tree-twisty(selected), +xul|treechildren::-moz-tree-image(selected) { + color: var(--in-content-item-selected-text); +} + +/* Message bars */ +.message-bar { + background-color: var(--in-content-box-info-background); + border-radius: 4px; + min-height: 32px; + align-items: center; + padding: 4px; +} + +.message-bar-description { + margin: 2px 0; + line-height: 1.25; +} + +.message-bar-description.rtl-locale { + direction: rtl; + text-align: match-parent; +} + +/* The message-bar-button styles have extra specificity to override + * the defaults for buttons. */ +.message-bar-content > .message-bar-button { + background-color: var(--grey-90-a10); + border: none; + border-radius: 2px; + height: 24px; + margin-inline-start: 8px; + padding: 0 8px; +} + +.message-bar-content > .message-bar-button:hover { + background-color: var(--grey-90-a20); +} + +.message-bar-content > .message-bar-button:hover:active { + background-color: var(--grey-90-a30); +} + +.message-bar-icon { + list-style-image: url("chrome://global/skin/icons/info.svg"); + width: 24px; + height: 24px; + padding: 4px; + margin-inline-end: 4px; + -moz-context-properties: fill; + fill: currentColor; +} + +/* Warning styles */ +.message-bar-warning { + background-color: var(--yellow-50); + color: var(--yellow-90); +} + +.message-bar-warning > .message-bar-icon { + list-style-image: url("chrome://global/skin/icons/warning.svg"); +} + +input[type="text"][warning]:enabled:not(:focus) { + border-color: var(--yellow-60); + box-shadow: 0 0 0 1px var(--yellow-60), 0 0 0 4px var(--yellow-60-a30); +} + +/* Cards */ + +.card { + background: var(--in-content-box-background); + /* Needed for high-contrast where the border will appear. */ + border: 1px solid transparent; + border-radius: 4px; + box-shadow: var(--card-shadow); + margin: 0 0 8px; + /* Remove the border from the overall padding. */ + padding: calc(var(--card-padding) - 1px); + transition: box-shadow 150ms; +} + +.card:not(.card-no-hover):hover { + box-shadow: var(--card-shadow-hover); +} + +.card-heading-image { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + margin: -16px -16px 16px; +} + +.card-heading-image:dir(rtl) { + transform: scaleX(-1); +} + +/* Sidebar footer links */ + +.sidebar-footer-list { + list-style-type: none; + margin-block: 0 36px; + margin-inline: 34px 0; + padding: 0; +} + +.sidebar-footer-link { + height: 36px; + cursor: default; + border: 1px solid var(--in-content-button-border-color); + border-radius: 4px; + display: flex; + align-items: center; +} + +@media (prefers-contrast) { + .sidebar-footer-link { + /* We need a true transparent but in HCM this would compute to an actual color, + * so select the page's background color instead: */ + border-color: var(--in-content-page-background); + } +} + +.sidebar-footer-link, +.sidebar-footer-link:visited { + /* Override link style for :hover and :hover:active states */ + text-decoration: none !important; + color: inherit; +} + +xul|*.sidebar-footer-link { + display: flex; + align-items: center; +} + +.sidebar-footer-link:hover { + background-color: var(--in-content-button-background-hover); + color: var(--in-content-button-text-color-hover); + border-color: var(--in-content-button-border-color-hover); +} + +.sidebar-footer-link:hover:active:not([disabled]) { + background-color: var(--in-content-button-background-active); + color: var(--in-content-button-text-color-active); + border-color: var(--in-content-button-border-color-active); +} + +.sidebar-footer-link:focus-visible { + outline: var(--in-content-focus-outline); + outline-offset: var(--in-content-focus-outline-inset); +} + +.sidebar-footer-icon { + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + width: 16px; + height: 16px; + margin: 10px; + margin-inline-start: 13px; +} + +.sidebar-footer-label { + font-size: .9em; + margin: 0 4px; + user-select: none; +} + +@media (max-width: 830px) { + .sidebar-footer-list { + margin-inline-start: 40px; + align-items: flex-start; + } + + .sidebar-footer-link { + width: 36px; + height: 36px; + padding-inline-start: 0; + margin-inline-start: 1px; + } + + .sidebar-footer-icon { + margin-inline-start: 10px; + } + + .sidebar-footer-label { + display: none; + } +} + +/* Icon helper classes */ + +xul|*.help-icon { + list-style-image: url("chrome://global/skin/icons/help.svg"); +} + +xul|*.addons-icon { + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} + +/* Back button */ + +.back-button { + -moz-context-properties: fill; + fill: currentColor; + background-image: url("chrome://global/skin/icons/arrow-left.svg"); + background-repeat: no-repeat; + background-position: center; + min-width: auto; + width: 32px; + margin-block: 0; + margin-inline-start: 0; +} + +.back-button:-moz-locale-dir(rtl), +.back-button:dir(rtl) { + transform: scaleX(-1); +} + +/* Adjust vertical margins for buttons in dialogs. We do this here because + * this sheet gets inserted into the Shadow DOM for the button box in the dialog, + * so can actually affect the button styling that way. */ +:host(dialog[subdialog]) .dialog-button-box > button { + margin: 0 4px; + min-width: auto; +} diff --git a/toolkit/themes/shared/in-content/info-pages.css b/toolkit/themes/shared/in-content/info-pages.css new file mode 100644 index 0000000000..a0307960b8 --- /dev/null +++ b/toolkit/themes/shared/in-content/info-pages.css @@ -0,0 +1,182 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/in-content/common.css"); + +:root { + --in-content-container-min-width: 13em; + --in-content-container-max-width: 52em; +} + +/* Body and container */ +body { + display: flex; + flex-direction: column; + box-sizing: border-box; + min-height: 100vh; + padding: 40px 48px; + align-items: center; + justify-content: center; +} + +body.wide-container { + display: block; +} + +.container { + min-width: var(--in-content-container-min-width); + max-width: var(--in-content-container-max-width); +} + +/* Typography */ +.title { + background-position: left 0; + background-repeat: no-repeat; + background-size: 1.6em; + margin-inline-start: -2.3em; + padding-inline-start: 2.3em; + font-size: 2.2em; + -moz-context-properties: fill; + fill: currentColor; +} + +.title:-moz-locale-dir(rtl), +.title:dir(rtl) { + background-position: right 0; +} + +.title-text { + font-size: inherit; + padding-bottom: 0.4em; +} + +@media (max-width: 970px) { + .title { + padding-inline-start: 0; + margin-inline-start: 0; + padding-top: 2.3em; + } + + .title-text { + padding-top: 0; + } +} + +.page-subtitle { + margin-bottom: 2em; +} + +ul, ol { + margin: 1em 0; + padding: 0; + margin-inline-start: 2em; +} + +ul > li, ol > li { + margin-bottom: .5em; +} + +ul { + list-style: disc; +} + +dt { + font-weight: bold; +} + +ul.columns { + column-count: 2; + column-gap: 5em; +} + +@media (max-width: 35em) { + ul.columns { + column-count: 1; + } +} + +/* Buttons */ +.button-container { + margin-top: 1.2em; +} + +button { + padding: 0 1.5em; +} + +.button-container > button:first-child { + margin-inline-start: 0; +} + +.button-container > button:last-child { + margin-inline-end: 0; +} + +/* Trees */ + +tree { + width: 100%; +} + +/* Tables */ + +table { + background-color: var(--in-content-table-background); + color: var(--in-content-text-color); + font: message-box; + text-align: start; + width: 100%; + border: 1px solid var(--in-content-table-border-color); + border-radius: 4px; + border-spacing: 0; + overflow: hidden; +} + +table button { + padding-inline: 3px; +} + +th, td { + padding: 4px; + text-align: match-parent; +} + +thead th { + text-align: center; +} + +th { + background-color: var(--in-content-table-header-background); + color: var(--in-content-table-header-color); + border: 1px solid var(--in-content-table-border-color); +} + +th.column { + white-space: nowrap; + width: 0; +} + +td { + border: 1px solid var(--in-content-border-color); + unicode-bidi: plaintext; /* Make sure file paths will be LTR */ +} + +.action-box { + background-color: var(--in-content-table-background); + border: 1px solid var(--in-content-box-border-color); + border-radius: 4px; + padding: 16px; + flex: 1 1 25%; +} + +.header-flex { + display: flex; + gap: 1.5rem; + margin-bottom: 1rem; + flex-wrap: wrap; +} + +.content-flex { + flex: 1 1 65%; +} diff --git a/toolkit/themes/shared/in-content/wifi.svg b/toolkit/themes/shared/in-content/wifi.svg new file mode 100644 index 0000000000..39fd936231 --- /dev/null +++ b/toolkit/themes/shared/in-content/wifi.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/toolkit/themes/shared/media/audio-muted.svg b/toolkit/themes/shared/media/audio-muted.svg new file mode 100644 index 0000000000..bf26fc3877 --- /dev/null +++ b/toolkit/themes/shared/media/audio-muted.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/toolkit/themes/shared/media/audio.svg b/toolkit/themes/shared/media/audio.svg new file mode 100644 index 0000000000..0736786ba6 --- /dev/null +++ b/toolkit/themes/shared/media/audio.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/toolkit/themes/shared/media/audioNoAudioButton.svg b/toolkit/themes/shared/media/audioNoAudioButton.svg new file mode 100644 index 0000000000..7d5c60a09c --- /dev/null +++ b/toolkit/themes/shared/media/audioNoAudioButton.svg @@ -0,0 +1,11 @@ + + + + + diff --git a/toolkit/themes/shared/media/castingButton-active.svg b/toolkit/themes/shared/media/castingButton-active.svg new file mode 100644 index 0000000000..f57d30b2c1 --- /dev/null +++ b/toolkit/themes/shared/media/castingButton-active.svg @@ -0,0 +1,9 @@ + + + + diff --git a/toolkit/themes/shared/media/castingButton-ready.svg b/toolkit/themes/shared/media/castingButton-ready.svg new file mode 100644 index 0000000000..7622e7349d --- /dev/null +++ b/toolkit/themes/shared/media/castingButton-ready.svg @@ -0,0 +1,9 @@ + + + + diff --git a/toolkit/themes/shared/media/closed-caption-settings-button.svg b/toolkit/themes/shared/media/closed-caption-settings-button.svg new file mode 100644 index 0000000000..1ef12e7902 --- /dev/null +++ b/toolkit/themes/shared/media/closed-caption-settings-button.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/media/closedCaptionButton-cc-off.svg b/toolkit/themes/shared/media/closedCaptionButton-cc-off.svg new file mode 100644 index 0000000000..481c5c9cab --- /dev/null +++ b/toolkit/themes/shared/media/closedCaptionButton-cc-off.svg @@ -0,0 +1,16 @@ + + + + + diff --git a/toolkit/themes/shared/media/closedCaptionButton-cc-on.svg b/toolkit/themes/shared/media/closedCaptionButton-cc-on.svg new file mode 100644 index 0000000000..7f62144b93 --- /dev/null +++ b/toolkit/themes/shared/media/closedCaptionButton-cc-on.svg @@ -0,0 +1,17 @@ + + + + + diff --git a/toolkit/themes/shared/media/error.png b/toolkit/themes/shared/media/error.png new file mode 100644 index 0000000000..51a73696c8 Binary files /dev/null and b/toolkit/themes/shared/media/error.png differ diff --git a/toolkit/themes/shared/media/fullscreenEnterButton.svg b/toolkit/themes/shared/media/fullscreenEnterButton.svg new file mode 100644 index 0000000000..5ed0edb640 --- /dev/null +++ b/toolkit/themes/shared/media/fullscreenEnterButton.svg @@ -0,0 +1,13 @@ + + + + + diff --git a/toolkit/themes/shared/media/fullscreenExitButton.svg b/toolkit/themes/shared/media/fullscreenExitButton.svg new file mode 100644 index 0000000000..1a770da285 --- /dev/null +++ b/toolkit/themes/shared/media/fullscreenExitButton.svg @@ -0,0 +1,12 @@ + + + + + diff --git a/toolkit/themes/shared/media/imagedoc-darknoise.png b/toolkit/themes/shared/media/imagedoc-darknoise.png new file mode 100644 index 0000000000..5c33e24d4c Binary files /dev/null and b/toolkit/themes/shared/media/imagedoc-darknoise.png differ diff --git a/toolkit/themes/shared/media/imagedoc-lightnoise.png b/toolkit/themes/shared/media/imagedoc-lightnoise.png new file mode 100644 index 0000000000..1fe5b3a586 Binary files /dev/null and b/toolkit/themes/shared/media/imagedoc-lightnoise.png differ diff --git a/toolkit/themes/shared/media/pause-fill.svg b/toolkit/themes/shared/media/pause-fill.svg new file mode 100644 index 0000000000..8dc2dea140 --- /dev/null +++ b/toolkit/themes/shared/media/pause-fill.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/media/picture-in-picture-closed.svg b/toolkit/themes/shared/media/picture-in-picture-closed.svg new file mode 100644 index 0000000000..efa4028c00 --- /dev/null +++ b/toolkit/themes/shared/media/picture-in-picture-closed.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/toolkit/themes/shared/media/picture-in-picture-enter-fullscreen-button.svg b/toolkit/themes/shared/media/picture-in-picture-enter-fullscreen-button.svg new file mode 100644 index 0000000000..3f7908a578 --- /dev/null +++ b/toolkit/themes/shared/media/picture-in-picture-enter-fullscreen-button.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/media/picture-in-picture-exit-fullscreen-button.svg b/toolkit/themes/shared/media/picture-in-picture-exit-fullscreen-button.svg new file mode 100644 index 0000000000..2d95224454 --- /dev/null +++ b/toolkit/themes/shared/media/picture-in-picture-exit-fullscreen-button.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/media/picture-in-picture-open.svg b/toolkit/themes/shared/media/picture-in-picture-open.svg new file mode 100644 index 0000000000..afc8910a2c --- /dev/null +++ b/toolkit/themes/shared/media/picture-in-picture-open.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/toolkit/themes/shared/media/picture-in-picture-seekBackward-button.svg b/toolkit/themes/shared/media/picture-in-picture-seekBackward-button.svg new file mode 100644 index 0000000000..07428daa52 --- /dev/null +++ b/toolkit/themes/shared/media/picture-in-picture-seekBackward-button.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/media/picture-in-picture-seekForward-button.svg b/toolkit/themes/shared/media/picture-in-picture-seekForward-button.svg new file mode 100644 index 0000000000..0968164dd4 --- /dev/null +++ b/toolkit/themes/shared/media/picture-in-picture-seekForward-button.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/toolkit/themes/shared/media/pipToggle.css b/toolkit/themes/shared/media/pipToggle.css new file mode 100644 index 0000000000..2a2ddeac58 --- /dev/null +++ b/toolkit/themes/shared/media/pipToggle.css @@ -0,0 +1,393 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* This CSS file is for the Picture-in-Picture toggle. + * + * The "experiment" class is used to enable styling for the VARIANT version + * of the toggle for upcoming PiP Nimbus experiments. + * @see Bug 1811314. + * + * To see each section of style changes, search "PIP STYLING" in this file. + */ + +/* SHARED PIP STYLING */ + +.controlsOverlay[hidetoggle="true"].hovering > .pip-wrapper:not(.hovering) { + /* If this isn't !important, it will fail to override the other opacity + * rules, which are currently defined below this point in this file. */ + opacity: 0 !important; +} + +.pip-wrapper { + position: absolute; + cursor: pointer; + -moz-appearance: none; + background: none; + color: inherit; + border: none; + text-align: unset; + top: calc(70% - 40px); + opacity: 0; + padding-inline: 0; + transition: opacity 200ms; + --pip-icon-size: 24px; + --pip-icon-width-with-margins: calc(2 * var(--pip-toggle-margin) + var(--pip-icon-size)); + --pip-highlight-style: solid rgba(0, 254, 255, 1); + --pip-highlight-width: 2px; + --pip-toggle-distanceFromVideoEdge: 18px; + --pip-toggle-focus-outline-offset: 1px; + --pip-toggle-margin: 8px; + --pip-border-radius-toggle: 4px; + --pip-box-shadow-default: 0 0 4px rgba(255, 255, 255, 0.9); + --pip-box-shadow-hover: 0 0 10px rgba(255, 255, 255, 0.7); + --pip-expanded-height: 40px; + --pip-expanded-min-width: 200px; + --pip-expanded-max-width: max-content; +} + +/* Adjust sizing of the regular toggle wrapper to correctly show the + * focus outline when navigating via keyboard. */ +.pip-wrapper[has-used], +.pip-wrapper[small-video] { + height: var(--pip-icon-width-with-margins); + width: var(--pip-icon-width-with-margins); + border-radius: var(--pip-border-radius-toggle); + margin-right: calc(var(--pip-icon-width-with-margins) * -1); +} + +.pip-wrapper[policy="hidden"] { + display: none; +} + +.pip-wrapper[policy="top"] { + top: 0%; + translate: var(--pip-toggle-translate-x); +} + +.pip-wrapper[policy="one-quarter"] { + top: 25%; +} + +.pip-wrapper[policy="middle"] { + top: 50%; +} + +.pip-wrapper[policy="three-quarters"] { + top: 75%; +} + +.pip-wrapper[policy="bottom"] { + top: 100%; + translate: var(--pip-toggle-translate-x) -100%; +} + +.pip-wrapper[medium-video] > .pip-expanded > .pip-icon-label > .pip-label { + font-size: 13px; +} + +.pip-wrapper[medium-video] > .pip-expanded { + font-size: 11px; +} + +.pip-wrapper[position="right"] { + /* move from the right by total width of pip toggle so that it is at least visible in the video element */ + right: calc(var(--pip-icon-width-with-margins) + var(--pip-toggle-distanceFromVideoEdge)); +} + +/* Re-position the first-time toggle such that it will always be the same distance away from the right edge + * of the video, even if the label and/or message string(s) are long. */ +.pip-wrapper[position="right"] > .pip-expanded { + translate: calc(-100% + var(--pip-icon-width-with-margins)); + transform-origin: right; +} + +.pip-wrapper[position="left"] { + left: var(--pip-toggle-distanceFromVideoEdge); +} + +.pip-expanded, +.pip-small, +.pip-icon, +.pip-explainer { + position: absolute; + left: 0; + top: 0; +} + +.pip-wrapper > .pip-expanded { + display: flex; + opacity: 0; + align-items: center; + scale: 0.33 1; + font-size: 14px; +} + +.pip-wrapper:not([small-video], [has-used]) > .pip-small { + opacity: 0; + transition: opacity 200ms; +} + +.pip-wrapper:not([small-video], [has-used]) > .pip-expanded { + opacity: 1; + scale: 1; + pointer-events: none; +} + +.pip-wrapper:not([small-video], [has-used]).hovering > .pip-expanded { + pointer-events: auto; +} + +.pip-icon { + top: 8px; + left: 8px; + pointer-events: none; + background-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); + background-position: center, center; + background-repeat: no-repeat; + background-size: var(--pip-icon-size) var(--pip-icon-size); + -moz-context-properties: fill; + fill: currentColor; + height: var(--pip-icon-size); + width: var(--pip-icon-size); +} + +.videocontrols[localedir="rtl"] .pip-icon { + transform: scaleX(-1); +} + +.pip-wrapper[position="left"] > .pip-expanded > .pip-icon-label > .pip-label { + margin-left: var(--pip-icon-width-with-margins); + margin-right: var(--pip-toggle-margin); +} + +.pip-small { + width: 40px; + height: 40px; +} + +.pip-wrapper[position="left"] > .pip-expanded > .pip-icon-label > .pip-icon { + display: none; +} + +.pip-wrapper:is([small-video], [has-used]) > .pip-expanded, +.pip-wrapper[position="right"]:not([small-video], [has-used]) > .pip-icon { + display: none; +} + +.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-icon { + position: relative; + top: 0; + left: 0; + display: inline-block; +} + +.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label { + display: flex; + flex-direction: row; + align-content: center; +} + +.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-icon, +.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-label { + margin-block: auto; +} + +.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-icon { + margin-inline: var(--pip-toggle-margin); +} + +.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-label { + margin-right: var(--pip-toggle-margin); +} + +@media (prefers-reduced-motion) { + .pip-wrapper, + .pip-expanded, + .pip-small, + .pip-explainer { + /* Transition changes in other rules may override this one if reduced motion is preferred. + * Make sure this one always takes priority. */ + transition: none !important; + } +} + + +/* NO EXPERIMENT - PIP STYLING */ + +.controlsOverlay:not(.experiment).hovering > .pip-wrapper:not(:focus-visible) { + opacity: 0.8; +} + +.controlsOverlay:not(.experiment).hovering > .pip-wrapper.hovering { + opacity: 1; +} + +/* If the PiP toggle is keyboard focused, always show it at 100% opacity */ +.pip-wrapper:not([policy="hidden"], .experiment):focus-visible { + opacity: 1; +} + +/* If showing the expanded PiP toggle, don't outline the + * parent wrapper element - the expanded toggle handles its + * own outline. This also affects the regular toggle for small-videos. */ +.pip-wrapper:not([policy="hidden"], [has-used], .experiment):focus-visible { + outline: none; +} + +/* Override outline set by ua.css for the regular toggle. */ +.pip-wrapper[has-used]:not([policy="hidden"], .experiment):focus-visible { + outline: var(--control-focus-outline); +} + +.pip-wrapper:not(.experiment) > .pip-small { + background-color: rgba(12, 12, 13, 0.65); + box-shadow: 0 4px 4px rgba(12, 12, 13, 0.25); + border-radius: var(--pip-border-radius-toggle); +} + +.pip-wrapper:not(.experiment) > .pip-expanded, +.pip-wrapper:not(.experiment) > .pip-small { + border: 1px solid rgba(255, 255, 255, 0.1); + box-sizing: border-box; +} + +/* If first-time toggle is visible and then switched to the regular toggle for smaller videos, + * maintain the border shown on the first-time toggle. */ +.pip-wrapper:not([has-used], .experiment) > .pip-small { + border: var(--pip-highlight-width) var(--pip-highlight-style); +} + +.pip-wrapper:not(.experiment) > .pip-expanded { + border: var(--pip-highlight-width) var(--pip-highlight-style); + transition: opacity 250ms, scale 200ms; + height: var(--pip-expanded-height); + background-color: rgba(12, 12, 13, 0.9); + box-shadow: 0 4px 4px rgba(12, 12, 13, 0.25); + width: var(--pip-expanded-max-width); + min-width: var(--pip-expanded-min-width); + border-radius: 8px; +} + +.pip-wrapper:not(.experiment).hovering > .pip-expanded { + box-shadow: none; + border: var(--pip-highlight-width) var(--pip-highlight-style); + /* Remove bottom border but keep text centred with padding. */ + border-bottom: none; + padding-bottom: var(--pip-highlight-width); +} + +.pip-wrapper:not([small-video], [has-used], .experiment).hovering > .pip-expanded { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +/* Toggle message only appears for CONTROL variant. */ +.pip-wrapper:not(.experiment) > .pip-expanded > .pip-explainer { + padding: 6px 16px 8px 8px; + translate: 0; + transition: opacity 250ms, translate 190ms; + transition-timing-function: cubic-bezier(.07, .95, 0, 1); + background: rgba(12, 12, 13, 0.65); + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; + border: var(--pip-highlight-width) var(--pip-highlight-style); + border-top: 0; + box-shadow: 0 4px 4px rgba(12, 12, 13, 0.25); + opacity: 0; + margin-inline: calc(-1 * var(--pip-highlight-width)); + width: calc(100% - 24px); + word-break: break-word; + pointer-events: none; + user-select: none; +} + +.videocontrols[localedir="rtl"] .pip-wrapper:not(.experiment) > .pip-explainer { + text-align: right; + direction: rtl; +} + +.pip-wrapper:not(.experiment).hovering > .pip-expanded > .pip-explainer { + pointer-events: auto; + opacity: 1; + translate: 0 calc(40px - var(--pip-highlight-width)); +} + + +/* EXPERIMENT ONLY - PIP STYLING */ + +/* Since we change the outline for the first-time PiP toggle VARIANT, + * override the focus outline in videocontrols.css as well so that + * there is design consistency. */ +.controlsContainer.experiment { + --control-focus-outline: 2px solid #0060DF; +} + +.pip-wrapper.experiment > .pip-expanded > .pip-icon-label > .pip-label { + font-size: min(16px, 1.4em); +} + +/* Only the background will be set at 70% opacity. The icons and labels will remain at 100%. */ +.controlsOverlay.experiment.hovering > .pip-wrapper { + opacity: 1; +} + +/* If the PiP toggle is keyboard focused, always show it and override outline set by ua.css. + * Opacity only affects the toggle icon and label, not the background, which is handled separately. */ +.pip-wrapper.experiment:not([policy="hidden"]):focus-visible { + opacity: 1; + /* Wrapper size won't always match pip-small or pip-expanded, so don't apply outline on wrapper. */ + outline: none; +} + +/* For the regular PiP toggle, take into consideration small videos and has-used=true. */ +.pip-wrapper.experiment:is([has-used], [small-video]):not([policy="hidden"]):focus-visible > .pip-small, +.pip-wrapper.experiment:not([policy="hidden"], [has-used]):focus-visible > .pip-expanded { + outline: var(--control-focus-outline); + outline-offset: var(--pip-toggle-focus-outline-offset); +} + +.pip-wrapper.experiment > .pip-expanded > .pip-explainer { + display: none; +} + +.pip-wrapper.experiment > .pip-small { + border-radius: var(--pip-border-radius-toggle); + transition: background-color 200ms; +} + +.pip-wrapper.experiment > .pip-expanded { + transition: opacity 250ms, scale 200ms, translate 190ms, background-color 200ms; + height: var(--pip-expanded-height); + width: var(--pip-expanded-max-width); + min-width: var(--pip-expanded-min-width); + border-radius: var(--pip-border-radius-toggle); +} + +.pip-wrapper.experiment > .pip-small, +.pip-wrapper.experiment > .pip-expanded { + background-color: rgba(0, 0, 0, 0.7); + box-sizing: border-box; +} + +.pip-wrapper.experiment.hovering > .pip-small, +.pip-wrapper.experiment.hovering > .pip-expanded { + background-color: rgba(0, 0, 0, 1); +} + +.pip-wrapper.experiment:not([policy="hidden"], :focus-visible) > .pip-small, +.pip-wrapper.experiment:not([policy="hidden"], :focus-visible) > .pip-expanded { + box-shadow: var(--pip-box-shadow-default); +} + +.pip-wrapper.experiment:not([policy="hidden"], :focus-visible).hovering > .pip-small, +.pip-wrapper.experiment:not([policy="hidden"], :focus-visible).hovering > .pip-expanded { + box-shadow: var(--pip-box-shadow-hover); +} + +/* Remove white box shadow if there is keyboard focus on the toggle and + * replace it with blue box shadow instead. */ +.pip-wrapper.experiment:not([policy="hidden"]):focus-visible > .pip-small, +.pip-wrapper.experiment:not([policy="hidden"]):focus-visible > .pip-expanded { + box-shadow: 0 0 10px rgba(0, 96, 223, 0.9); +} diff --git a/toolkit/themes/shared/media/play-fill.svg b/toolkit/themes/shared/media/play-fill.svg new file mode 100644 index 0000000000..1558868ecb --- /dev/null +++ b/toolkit/themes/shared/media/play-fill.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/media/stalled.png b/toolkit/themes/shared/media/stalled.png new file mode 100644 index 0000000000..525375889b Binary files /dev/null and b/toolkit/themes/shared/media/stalled.png differ diff --git a/toolkit/themes/shared/media/textrecognition.css b/toolkit/themes/shared/media/textrecognition.css new file mode 100644 index 0000000000..b10bc21329 --- /dev/null +++ b/toolkit/themes/shared/media/textrecognition.css @@ -0,0 +1,27 @@ +/* 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.w3.org/1999/xhtml"); + +.textrecognition { + position: absolute; + overflow: clip; + + /* Prevent unwanted style inheritance. */ + font: normal normal normal 100%/normal sans-serif; + text-align: left; + white-space: normal; +} + +canvas { + position: absolute; + user-select: none; + inset: 0; +} + +span { + position: absolute; + transform-origin: 0 0; + color: transparent; +} diff --git a/toolkit/themes/shared/media/throbber.png b/toolkit/themes/shared/media/throbber.png new file mode 100644 index 0000000000..8e49fe5b2a Binary files /dev/null and b/toolkit/themes/shared/media/throbber.png differ diff --git a/toolkit/themes/shared/media/videocontrols.css b/toolkit/themes/shared/media/videocontrols.css new file mode 100644 index 0000000000..a0e1f91d5b --- /dev/null +++ b/toolkit/themes/shared/media/videocontrols.css @@ -0,0 +1,586 @@ +/* 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.w3.org/1999/xhtml"); + +.videocontrols { + writing-mode: horizontal-tb; + width: 100%; + height: 100%; + display: inline-block; + overflow: hidden; + + direction: ltr; + /* Prevent selection from interacting weirdly with the page, + * see bug 1766093. Our text selection story with shadow dom should be + * better, see bug 1590379 */ + user-select: none; + /* Prevent unwanted style inheritance. See bug 554717. */ + text-align: left; + list-style-image: none !important; + font: normal normal normal 100%/normal sans-serif !important; + text-decoration: none !important; + white-space: normal !important; +} + +.videocontrols[flipped="true"] { + transform: scaleX(-1); +} + +.controlsContainer { + --clickToPlay-size: 48px; + --button-size: 30px; + --timer-size: 40px; + --timer-long-size: 60px; + --track-size: 5px; + --thumb-size: 13px; + --label-font-size: 13px; + --pip-toggle-padding: 5px; + --control-focus-outline: 2px solid #00DDFF; + --control-focus-outline-offset: -2px; + --pip-toggle-icon-width-height: 16px; + --pip-toggle-translate-x: calc(100% - var(--pip-toggle-icon-width-height) - 2 * var(--pip-toggle-padding)); + + color: #fff; +} +.controlsContainer.touch { + --clickToPlay-size: 64px; + --button-size: 40px; + --timer-size: 52px; + --timer-long-size: 78px; + --track-size: 7px; + --thumb-size: 16px; + --label-font-size: 16px; +} + +/* Some CSS custom properties defined here are referenced by videocontrols.js */ +.controlBar { + /* Do not delete: these variables are accessed by JavaScript directly. + see videocontrols.js and search for |-width|. */ + --clickToPlay-width: var(--clickToPlay-size); + --playButton-width: var(--button-size); + --scrubberStack-width: 64px; + --muteButton-width: var(--button-size); + --volumeStack-width: 48px; + --castingButton-width: var(--button-size); + --closedCaptionButton-width: var(--button-size); + --fullscreenButton-width: var(--button-size); + --positionDurationBox-width: var(--timer-size); + --durationSpan-width: var(--timer-size); + --positionDurationBox-width-long: var(--timer-long-size); + --durationSpan-width-long: var(--timer-long-size); +} + +.touch .controlBar { + /* Do not delete: these variables are accessed by JavaScript directly. + see videocontrols.js and search for |-width|. */ + --scrubberStack-width: 84px; + --volumeStack-width: 64px; +} + +.controlsContainer [hidden], +.controlBar[hidden] .progressBar, +.controlBar[hidden] .bufferBar, +.videocontrols[inDOMFullscreen] > .controlsContainer > .controlsOverlay > #pictureInPictureToggle { + display: none; +} + +/* We hide the controlBar visually so it doesn't obscure the video. However, + * we still want to expose it to a11y so users who don't use a mouse can access + * it. + */ +.controlBar[hidden] { + display: flex; + opacity: 0; + pointer-events: none; +} + +.controlBar[size="hidden"] { + display: none; +} + +.controlsSpacer[hideCursor] { + cursor: none; +} + +.controlsContainer, +.progressContainer { + position: relative; + height: 100%; +} + +.stackItem { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 100%; +} + +.statusOverlay { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: rgb(80,80,80, .85); +} + +.controlsOverlay { + display: flex; + flex-direction: column; + justify-content: center; + position: relative; +} + +.controlsSpacerStack { + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: center; + align-items: center; +} + +.controlBar { + display: flex; + box-sizing: border-box; + justify-content: center; + align-items: center; + overflow: hidden; + height: 40px; + padding: 0 9px; + background-color: rgba(26,26,26,.8); +} + +.touch .controlBar { + height: 52px; +} + +.controlBar > .button { + /* Prevent #textTrackListContainer from blocking clicks on controls */ + z-index: 1; + height: 100%; + min-width: var(--button-size); + min-height: var(--button-size); + padding: 6px; + border: 0; + margin: 0; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + background-origin: content-box; + background-clip: content-box; + -moz-context-properties: fill; + fill: currentColor; + color: inherit; + /* We don't suppress ::-moz-focus-inner, so that does for a focus indicator */ + outline: none; +} + +/* Keyboard focus styling for interactive control elements (includes control + bar, click to play and track list) */ +.controlBar > .button:focus-visible, +.volumeControl:focus-visible, +.scrubber:focus-visible, +.clickToPlay:focus-visible, +.textTrackList > .textTrackItem:focus-visible { + outline: var(--control-focus-outline); + outline-offset: var(--control-focus-outline-offset); +} + +.touch .controlBar > .button { + background-size: 24px 24px; +} + +.controlBar > .button:enabled:hover { + fill: #48a0f7; +} + +.controlBar > .button:enabled:hover:active { + fill: #2d89e6; +} + +.playButton { + background-image: url(chrome://global/skin/media/pause-fill.svg); +} +.playButton[paused] { + background-image: url(chrome://global/skin/media/play-fill.svg); +} + +.muteButton { + background-image: url(chrome://global/skin/media/audio.svg); +} +.muteButton[muted] { + background-image: url(chrome://global/skin/media/audio-muted.svg); +} +.muteButton[noAudio] { + background-image: url(chrome://global/skin/media/audioNoAudioButton.svg); +} +.muteButton[noAudio] + .volumeStack { + display: none; +} + +.castingButton { + background-image: url(chrome://global/skin/media/castingButton-ready.svg); +} + +.castingButton[enabled] { + background-image: url(chrome://global/skin/media/castingButton-active.svg); +} + +.closedCaptionButton { + background-image: url(chrome://global/skin/media/closedCaptionButton-cc-off.svg); +} +.closedCaptionButton[enabled] { + background-image: url(chrome://global/skin/media/closedCaptionButton-cc-on.svg); +} + +.fullscreenButton { + background-image: url(chrome://global/skin/media/fullscreenEnterButton.svg); +} +.fullscreenButton[fullscreened] { + background-image: url(chrome://global/skin/media/fullscreenExitButton.svg); +} + +.controlBarSpacer { + flex-grow: 1; +} + +.volumeControl::-moz-range-thumb, +.scrubber::-moz-range-thumb { + height: var(--thumb-size); + width: var(--thumb-size); + border: none; + border-radius: 50%; + /* this is a foreground element even though it is implemented as a background */ + background-color: currentColor; + filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.65)); +} + +.volumeControl, +.scrubber { + outline: none; +} + +.progressBackgroundBar { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.progressStack { + position: relative; + width: 100%; + height: var(--track-size); +} + +.scrubberStack { + /* minus margin to get basis of required width */ + min-width: calc(var(--scrubberStack-width) - 18px); + flex-basis: calc(var(--scrubberStack-width) - 18px); + flex-grow: 2; + flex-shrink: 0; + margin: 0 9px; +} + +.volumeStack { + max-width: 60px; + min-width: var(--volumeStack-width); + flex-grow: 1; + flex-shrink: 0; + margin-right: 6px; + margin-left: 4px; +} + +.bufferBar, +.progressBar, +.scrubber, +.volumeControl { + bottom: 0; + color: inherit; + left: 0; + position: absolute; + width: 100%; + height: 100%; + padding: 0; + border: 0; + border-radius: calc(var(--track-size) / 2); + margin: 0; + background: none; + outline: none; +} + +.bufferBar { + background-color: rgba(0,0,0,0.7); +} + +.bufferBar::-moz-progress-bar, +.progressBar::-moz-progress-bar { + height: 100%; + padding: 0; + margin: 0; + border: 0; + border-radius: calc(var(--track-size) / 2); + background: none; +} + +.bufferBar::-moz-progress-bar { + background-color: rgba(255,255,255,0.3); + border-radius: calc(var(--track-size) / 2); +} + +.progressBar::-moz-progress-bar { + background-color: #00b6f0; +} + +.scrubber:hover::-moz-range-thumb, +.volumeControl:hover::-moz-range-thumb { + background-color: #48a0f7; +} + +.scrubber:active::-moz-range-thumb, +.volumeControl:active::-moz-range-thumb { + background-color: #2d89e6; +} + +.scrubber::-moz-range-track, +.scrubber::-moz-range-progress { + background-color: transparent; +} + +.volumeControl::-moz-range-progress, +.volumeControl::-moz-range-track { + height: var(--track-size); + border-radius: calc(var(--track-size) / 2); +} + +.volumeControl::-moz-range-progress { + /* this is a foreground element even though it is implemented as a background */ + background-color: currentColor; +} + +.volumeControl::-moz-range-track { + background-color: rgba(0,0,0,0.7); +} + +@media (prefers-contrast) { + /* Show a border in high contrast mode since background-colors + are not shown. */ + .scrubber::-moz-range-track, + .volumeControl::-moz-range-track { + border: 1px solid; + } + + .scrubber::-moz-range-progress, + .volumeControl::-moz-range-progress { + border: 2px solid; + } +} + +.textTrackListContainer { + position: absolute; + right: 5px; + bottom: 45px; + top: 5px; + max-width: 80%; + display: flex; + flex-direction: column; + justify-content: end; +} + +.textTrackList { + flex: 0 1 auto; + border: 1px solid #000; + border-radius: 2.5px; + padding: 5px 0; + vertical-align: middle; + background-color: #000; + opacity: 0.7; + overflow-y: auto; +} + +.touch .textTrackList { + bottom: 58px; +} + +.textTrackList > .textTrackItem { + display: block; + width: 100%; + height: var(--button-size); + font-size: var(--label-font-size); + padding: 2px 10px; + border: none; + margin: 0; + white-space: nowrap; + overflow: hidden; + text-align: left; + text-overflow: ellipsis; + background-color: transparent; + color: inherit; +} + +.textTrackList > .textTrackItem:hover { + background-color: #444; +} + +.textTrackList > .textTrackItem[aria-checked="true"] { + color: #48a0f7; +} + +.positionLabel, +.durationLabel { + display: none; +} + +.positionDurationBox { + text-align: center; + padding-inline-start: 1px; + padding-inline-end: 9px; + white-space: nowrap; + font: message-box; + font-size: var(--label-font-size); + font-size-adjust: 0.55; + font-variant-numeric: tabular-nums; +} + +@media (-moz-platform: macos) { + .positionDurationBox { + font-size-adjust: unset; + font-family: "Helvetica Neue", "Helvetica", sans-serif; + } +} + +.duration { + display: inline-block; + white-space: pre; + color: #929292; +} + +.statusIcon { + width: 36px; + height: 36px; + margin-bottom: 20px; +} + +/* Not showing the throbber on mobile because of conflict with m.youtube.com (see bug 1289412) */ +.controlsContainer:not(.mobile) .statusIcon[type="throbber"] { + background: url(chrome://global/skin/media/throbber.png) no-repeat center; +} + +.controlsContainer:not(.mobile) .statusIcon[type="throbber"][stalled] { + background: url(chrome://global/skin/media/stalled.png) no-repeat center; +} + +.statusIcon[type="error"], +.statusIcon[type="pictureInPicture"] { + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +.statusIcon[type="error"] { + min-width: 70px; + min-height: 60px; + background-image: url(chrome://global/skin/media/error.png); +} + +.statusIcon[type="pictureInPicture"] { + min-width: 84px; + min-height: 84px; + background-image: url(chrome://global/skin/media/picture-in-picture-open.svg); + -moz-context-properties: fill; + fill: currentColor; +} + +.videocontrols[localedir="rtl"] .statusIcon[type="pictureInPicture"] { + transform: scaleX(-1); +} + +.pictureInPictureToggleLabel { + margin-inline-start: var(--pip-toggle-padding); +} + +/* Overlay Play button */ +.clickToPlay { + appearance: none; + border: none; + min-width: var(--clickToPlay-size); + min-height: var(--clickToPlay-size); + border-radius: 50%; + background-image: url(chrome://global/skin/media/play-fill.svg); + background-repeat: no-repeat; + background-position: 54% 50%; + background-size: 40% 40%; + background-color: #1a1a1a; + -moz-context-properties: fill; + fill: currentColor; + color: inherit; + opacity: 0.8; + position: relative; + top: 20px; +} + +.controlsSpacerStack:hover > .clickToPlay, +.clickToPlay:hover { + opacity: 0.55; +} + +.controlsSpacerStack:hover > .clickToPlay[fadeout] { + opacity: 0; +} + +.controlBar[fullscreen-unavailable] .fullscreenButton { + display: none; +} + +.statusOverlay[fadeout], +.statusOverlay[error] + .controlsOverlay > .controlsSpacerStack { + opacity: 0; +} + +.pictureInPictureOverlay { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + opacity: 1; + background-color: rgb(12, 12, 13); +} + +/* Status description formatting */ +.statusLabel { + display: none; + padding: 0 10px; + text-align: center; + font: message-box; + font-size: 14px; +} + +.videocontrols[localedir="rtl"] .statusLabel { + direction: rtl; +} + +[status="errorAborted"] > #errorAborted, +[status="errorNetwork"] > #errorNetwork, +[status="errorDecode"] > #errorDecode, +[status="errorSrcNotSupported"] > #errorSrcNotSupported, +[status="errorNoSource"] > #errorNoSource, +[status="errorGeneric"] > #errorGeneric, +[status="pictureInPicture"] > #pictureInPicture { + display: inline; +} + +@media (-moz-platform: windows) and (-moz-windows-default-theme: 0) { + .controlsSpacer, + .clickToPlay { + background-color: transparent; + } +} + +.a11y-only { + position: absolute; + left: -10000px; + width: 100px; + height: 100px; +} diff --git a/toolkit/themes/shared/menu-scrolling.css b/toolkit/themes/shared/menu-scrolling.css new file mode 100644 index 0000000000..d0a62d130d --- /dev/null +++ b/toolkit/themes/shared/menu-scrolling.css @@ -0,0 +1,36 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* Scroll buttons */ + +/* Hide arrow buttons when there's nothing to scroll in that direction */ +.menupopup-arrowscrollbox[scrolledtostart="true"]::part(scrollbutton-up), +.menupopup-arrowscrollbox[scrolledtoend="true"]::part(scrollbutton-down) { + display: none; +} + +/* Prevent the scrolled contents of the menupopup from jumping vertically when + * the arrow buttons appear / disappear, by positioning ::part(scrollbox) in + * such a way that its edges are at the same position as the edges of + * arrowscrollbox regardless of scroll button visibility. + */ +.menupopup-arrowscrollbox:not([scrolledtostart="true"])::part(scrollbox) { + /* scrollbutton-up is visible; shift our top edge up by its height. */ + margin-top: -16px; +} + +.menupopup-arrowscrollbox:not([scrolledtoend="true"])::part(scrollbox) { + /* scrollbutton-down is visible; shift our bottom edge down by its height. */ + margin-bottom: -16px; +} + +.menupopup-arrowscrollbox::part(scrollbox-clip) { + /* In the space where the arrow buttons overlap the scrollbox, clip away the + * scrollbox so that nothing is shown behind the arrow button even if the + * button is transparent. + */ + overflow: clip; +} diff --git a/toolkit/themes/shared/menulist-shared.css b/toolkit/themes/shared/menulist-shared.css new file mode 100644 index 0000000000..b775b66cbf --- /dev/null +++ b/toolkit/themes/shared/menulist-shared.css @@ -0,0 +1,71 @@ +/* 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"); + +:host(:not([native])) { + appearance: none; + background-color: var(--button-bgcolor, ButtonFace); + color: var(--button-color, ButtonText); + border-radius: 4px; + padding-block: 4px; + padding-inline: 12px 8px; + margin: 5px 2px 3px; +} + +:host(:not([native])[size="medium"]) { + padding-block: 6px; + padding-inline: 16px 10px; +} + +:host(:not([native])[size="large"]) { + padding-block: 8px; + padding-inline: 16px 12px; +} + +:host(:not([native]):hover) { + background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace)); +} + +:host(:not([native]):hover:active) { + background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)); +} + +:host(:not([native]):focus-visible) { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +#label-box { + min-width: 0; + pointer-events: none; +} + +#label-box:not([native]) { + align-items: center; + justify-content: center; + font-weight: 600; +} + +dropmarker { + pointer-events: none; +} + +dropmarker:not([native]) { + display: flex; + appearance: none; + width: 12px; + height: unset; +} + +dropmarker:not([native])::part(icon) { + list-style-image: url(chrome://global/skin/icons/arrow-down.svg); + -moz-context-properties: fill; + fill: currentColor; +} + +#highlightable-label:not([highlightable="true"]), +#label[highlightable="true"] { + display: none; +} diff --git a/toolkit/themes/shared/minimal-toolkit.jar.inc.mn b/toolkit/themes/shared/minimal-toolkit.jar.inc.mn new file mode 100644 index 0000000000..a30a507f52 --- /dev/null +++ b/toolkit/themes/shared/minimal-toolkit.jar.inc.mn @@ -0,0 +1,47 @@ +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +# This is not a complete / proper jar manifest. It is included by ALL +# theme-specific manifests, so that shared resources need only be +# specified once. As a result, the source file paths are relative +# to the location of the actual manifest. +# +# Note that items included here get shipped on mobile. If mobile +# doesn't need them, please use shared/desktop-jar.inc.mn instead, to keep +# mobile package size down. + +toolkit.jar: +% skin global classic/1.0 %skin/classic/global/ + +# images and CSS we need for widgets like video controls + skin/classic/global/icons/resizer.svg (../../shared/icons/resizer.svg) + + skin/classic/global/media/imagedoc-lightnoise.png (../../shared/media/imagedoc-lightnoise.png) + skin/classic/global/media/imagedoc-darknoise.png (../../shared/media/imagedoc-darknoise.png) + + skin/classic/global/media/videocontrols.css (../../shared/media/videocontrols.css) + skin/classic/global/media/pipToggle.css (../../shared/media/pipToggle.css) + + skin/classic/global/media/pause-fill.svg (../../shared/media/pause-fill.svg) + skin/classic/global/media/play-fill.svg (../../shared/media/play-fill.svg) + skin/classic/global/media/error.png (../../shared/media/error.png) + skin/classic/global/media/throbber.png (../../shared/media/throbber.png) + skin/classic/global/media/stalled.png (../../shared/media/stalled.png) + skin/classic/global/media/audio-muted.svg (../../shared/media/audio-muted.svg) + skin/classic/global/media/audioNoAudioButton.svg (../../shared/media/audioNoAudioButton.svg) + skin/classic/global/media/audio.svg (../../shared/media/audio.svg) + skin/classic/global/media/castingButton-ready.svg (../../shared/media/castingButton-ready.svg) + skin/classic/global/media/castingButton-active.svg (../../shared/media/castingButton-active.svg) + skin/classic/global/media/closedCaptionButton-cc-off.svg (../../shared/media/closedCaptionButton-cc-off.svg) + skin/classic/global/media/closedCaptionButton-cc-on.svg (../../shared/media/closedCaptionButton-cc-on.svg) + skin/classic/global/media/fullscreenEnterButton.svg (../../shared/media/fullscreenEnterButton.svg) + skin/classic/global/media/fullscreenExitButton.svg (../../shared/media/fullscreenExitButton.svg) + skin/classic/global/media/closed-caption-settings-button.svg (../../shared/media/closed-caption-settings-button.svg) + skin/classic/global/media/picture-in-picture-enter-fullscreen-button.svg (../../shared/media/picture-in-picture-enter-fullscreen-button.svg) + skin/classic/global/media/picture-in-picture-exit-fullscreen-button.svg (../../shared/media/picture-in-picture-exit-fullscreen-button.svg) + skin/classic/global/media/picture-in-picture-seekForward-button.svg (../../shared/media/picture-in-picture-seekForward-button.svg) + skin/classic/global/media/picture-in-picture-seekBackward-button.svg (../../shared/media/picture-in-picture-seekBackward-button.svg) +# Text recognition widget + + skin/classic/global/media/textrecognition.css (../../shared/media/textrecognition.css) diff --git a/toolkit/themes/shared/mozapps.inc.mn b/toolkit/themes/shared/mozapps.inc.mn new file mode 100644 index 0000000000..d2beca0bda --- /dev/null +++ b/toolkit/themes/shared/mozapps.inc.mn @@ -0,0 +1,35 @@ +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +# This is not a complete / proper jar manifest. It is included by the +# actual theme-specific manifests, so that shared resources need only +# be specified once. As a result, the source file paths are relative +# to the location of the actual manifest. + + skin/classic/mozapps/extensions/dictionaryGeneric.svg (../../shared/extensions/category-dictionaries.svg) + skin/classic/mozapps/extensions/extensionGeneric.svg (../../shared/extensions/extensionGeneric.svg) + skin/classic/mozapps/extensions/themeGeneric.svg (../../shared/extensions/category-themes.svg) + skin/classic/mozapps/extensions/category-available.svg (../../shared/extensions/category-available.svg) + skin/classic/mozapps/extensions/category-discover.svg (../../shared/extensions/category-discover.svg) + skin/classic/mozapps/extensions/category-extensions.svg (../../shared/extensions/category-extensions.svg) + skin/classic/mozapps/extensions/category-plugins.svg (../../shared/extensions/category-plugins.svg) + skin/classic/mozapps/extensions/category-recent.svg (../../shared/extensions/category-recent.svg) + skin/classic/mozapps/extensions/category-sitepermission.svg (../../shared/extensions/category-sitepermission.svg) + skin/classic/mozapps/extensions/extension.svg (../../shared/extensions/extension.svg) + skin/classic/mozapps/extensions/recommended.svg (../../shared/extensions/recommended.svg) + skin/classic/mozapps/extensions/line.svg (../../shared/extensions/line.svg) +#ifndef ANDROID + skin/classic/mozapps/extensions/rating-star.svg (../../shared/extensions/rating-star.svg) +#endif +#ifndef ANDROID + skin/classic/mozapps/aboutProfiles.css (../../shared/aboutProfiles.css) +#endif + skin/classic/mozapps/aboutServiceWorkers.css (../../shared/aboutServiceWorkers.css) + skin/classic/mozapps/profileDowngrade.css (../../shared/profileDowngrade.css) + skin/classic/mozapps/profileSelection.css (../../shared/profileSelection.css) + +% override chrome://mozapps/skin/extensions/category-languages.svg chrome://mozapps/skin/extensions/localeGeneric.svg +% override chrome://mozapps/skin/extensions/category-themes.svg chrome://mozapps/skin/extensions/themeGeneric.svg +% override chrome://mozapps/skin/extensions/category-dictionaries.svg chrome://mozapps/skin/extensions/dictionaryGeneric.svg +% override chrome://mozapps/skin/extensions/localeGeneric.svg chrome://mozapps/skin/extensions/dictionaryGeneric.svg diff --git a/toolkit/themes/shared/narrate.css b/toolkit/themes/shared/narrate.css new file mode 100644 index 0000000000..fbda43841e --- /dev/null +++ b/toolkit/themes/shared/narrate.css @@ -0,0 +1,277 @@ +/* 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/. */ + +/* Avoid adding ID selector rules in this style sheet, since they could + * inadvertently match elements in the article content. */ + +body { + --current-voice: #7f7f7f; + --narrate-word-highlight-color: #ffe087; + --narrating-paragraph-background-color: #ffc; +} + +body.sepia { + --narrate-word-highlight-color: #bdb5a5; + --narrating-paragraph-background-color: #e0d7c5; +} + +body.dark { + --current-voice: #a09eac; + --narrate-word-highlight-color: #6f6f6f; + --narrating-paragraph-background-color: #242424; +} + +body.hcm { + --current-voice: inherit; + --narrate-word-highlight-color: SelectedItem; + --narrating-paragraph-background-color: Canvas; +} + +.narrating { + position: relative; + z-index: 1; + background-color: var(--narrating-paragraph-background-color); +} + +.narrate-word-highlight { + position: absolute; + display: none; + transform: translate(-50%, calc(-50% - 2px)); + z-index: -1; + border-bottom: 7px solid var(--narrate-word-highlight-color); + transition: left 0.1s ease, width 0.1s ease; +} + +body.hcm .narrate-word-highlight { + /* Shift the word highlight a bit downwards to not cover the bottom part of characters. + * The z-index above is meant to have the highlight appear below the text, + * but that's not best practice in HCM so we do this instead. */ + transform: translate(-50%, calc(-50% + 2px)); + border-bottom-width: 3px; +} + +.narrating > .narrate-word-highlight { + display: inline-block; +} + +.narrate-word-highlight.newline { + transition: none; +} + +.narrate-toggle { + background-image: url("chrome://global/skin/narrate/headphone.svg"); +} + +.speaking .narrate-toggle { + /* This shows with an animation. */ + background-image: url("chrome://global/skin/narrate/headphone-active.svg"); + fill: var(--toolbar-button-foreground-active); +} + +body.hcm .speaking .narrate-toggle { + background-color: var(--toolbar-button-background-active); + border-color: var(--toolbar-button-border-active); +} + +body.hcm .speaking:not(.open) .narrate-toggle:hover { + background-color: var(--toolbar-button-background-hover); + border-color: var(--toolbar-button-border-hover); + fill: var(--toolbar-button-foreground-hover); +} + +.narrate-dropdown > .dropdown-popup button { + background-color: transparent; + fill: var(--popup-button-foreground); +} + +.narrate-dropdown > .dropdown-popup button:enabled:hover { + background-color: var(--popup-button-background-hover); + color: var(--popup-button-foreground-hover); + fill: var(--popup-button-foreground-hover); +} + +.narrate-dropdown > .dropdown-popup button:enabled:hover:active { + background-color: var(--popup-button-background-active); +} + +.narrate-dropdown > .dropdown-popup button:enabled:focus-visible { + outline: 2px solid var(--outline-focus-color); + outline-offset: -2px; +} + +.narrate-dropdown > .dropdown-popup { + top: -34px; +} + +.narrate-dropdown .dropdown-arrow { + top: 40px; +} + +.narrate-row { + display: flex; + align-items: center; + min-height: 40px; + box-sizing: border-box; +} + +.narrate-row:not(.narrate-voices) { + direction: ltr; +} + +.narrate-row:not(:first-child) { + border-top: 1px solid var(--popup-line); +} + +/* Control buttons */ + +.narrate-control > button { + background-size: 24px 24px; + background-repeat: no-repeat; + background-position: center center; + height: 64px; + width: 82px; + border: none; + box-sizing: border-box; +} + +.narrate-control > button:not(:first-child) { + border-inline-start: 1px solid var(--popup-line); +} + +.narrate-skip-previous { + border-top-left-radius: 3px; + background-image: url("chrome://global/skin/narrate/back.svg"); +} + +.narrate-skip-next { + border-top-right-radius: 3px; + background-image: url("chrome://global/skin/narrate/forward.svg"); +} + +.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; + -moz-context-properties: fill; + fill: var(--icon-fill); +} + +.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; + background-color: var(--popup-background); + border-radius: 2px; + width: 148px; +} + +.narrate-rate-input:focus-visible { + outline: 2px solid var(--outline-focus-color); + outline-offset: 2px; +} + +.narrate-rate-input::-moz-range-track { + background-color: var(--icon-fill); + height: 2px; +} + +.narrate-rate-input::-moz-range-progress { + background-color: var(--primary-color); + height: 2px; +} + +.narrate-rate-input::-moz-range-thumb { + background-color: var(--icon-fill); + height: 16px; + width: 16px; + border-radius: 8px; + border-width: 0; +} + +.narrate-rate-input:active::-moz-range-thumb { + background-color: var(--primary-color); +} + +/* Voice selection */ + +.voiceselect { + width: 246px; +} + +.voiceselect > button.select-toggle, +.voiceselect > .options > button.option { + appearance: none; + border: none; + width: 100%; + min-height: 40px; +} + +.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; +} + +.current-voice { + color: var(--current-voice); +} + +.voiceselect > .options { + display: none; + overflow-y: auto; +} + +.voiceselect.open > .options { + display: block; + border-top: 1px solid var(--popup-line); +} + +.voiceselect > .options > button.option { + box-sizing: border-box; +} + +.voiceselect > .options > button.option:not(:first-child) { + border-top: 1px solid var(--popup-line); +} + +.voiceselect > .options > button.option::-moz-focus-inner { + outline: none; + border: 0; +} + +.voiceselect > .options:not(.hovering) > button.option:hover:not(:focus) { + background-color: transparent; +} + +.voiceselect:not(.open) > button, +.voiceselect .option:last-child { + border-radius: 0 0 3px 3px; +} diff --git a/toolkit/themes/shared/narrate/arrow.svg b/toolkit/themes/shared/narrate/arrow.svg new file mode 100644 index 0000000000..5ccf8c6e9d --- /dev/null +++ b/toolkit/themes/shared/narrate/arrow.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/narrate/back.svg b/toolkit/themes/shared/narrate/back.svg new file mode 100644 index 0000000000..7b5b1ebea9 --- /dev/null +++ b/toolkit/themes/shared/narrate/back.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/narrate/fast.svg b/toolkit/themes/shared/narrate/fast.svg new file mode 100644 index 0000000000..61a45a7c9b --- /dev/null +++ b/toolkit/themes/shared/narrate/fast.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/narrate/forward.svg b/toolkit/themes/shared/narrate/forward.svg new file mode 100644 index 0000000000..2a90ddd9c6 --- /dev/null +++ b/toolkit/themes/shared/narrate/forward.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/narrate/headphone-active.svg b/toolkit/themes/shared/narrate/headphone-active.svg new file mode 100644 index 0000000000..ecfcc4f133 --- /dev/null +++ b/toolkit/themes/shared/narrate/headphone-active.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + diff --git a/toolkit/themes/shared/narrate/headphone.svg b/toolkit/themes/shared/narrate/headphone.svg new file mode 100644 index 0000000000..d065061ab3 --- /dev/null +++ b/toolkit/themes/shared/narrate/headphone.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/narrate/slow.svg b/toolkit/themes/shared/narrate/slow.svg new file mode 100644 index 0000000000..1ef3c7b6b1 --- /dev/null +++ b/toolkit/themes/shared/narrate/slow.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/toolkit/themes/shared/narrate/start.svg b/toolkit/themes/shared/narrate/start.svg new file mode 100644 index 0000000000..0f6680e639 --- /dev/null +++ b/toolkit/themes/shared/narrate/start.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/narrate/stop.svg b/toolkit/themes/shared/narrate/stop.svg new file mode 100644 index 0000000000..9a57603e84 --- /dev/null +++ b/toolkit/themes/shared/narrate/stop.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/notification.css b/toolkit/themes/shared/notification.css new file mode 100644 index 0000000000..b94918cce8 --- /dev/null +++ b/toolkit/themes/shared/notification.css @@ -0,0 +1,188 @@ +/* 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"); +@namespace html "http://www.w3.org/1999/xhtml"; + +.notificationbox-stack { + /* Prevent the animation from overlapping the navigation toolbar */ + overflow: clip; +} + +.notificationbox-stack[notificationside="top"] { + /* Create a stacking context for the box-shadow */ + position: relative; + z-index: 1; +} + +notification { + min-height: 40px; + padding-inline-start: 16px; + background: var(--notification-background); + color: var(--notification-text); + border-color: var(--notification-border); + border-style: solid; + border-width: 1px 0; + text-shadow: none; + font-size: 1.15em; + + --notification-background: Window; + --notification-text: WindowText; + --notification-border: rgba(12, 12, 13, 0.2); + --notification-button-background: rgba(12,12,13,.1); + --notification-button-background-hover: rgba(12,12,13,0.2); + --notification-button-background-active: rgba(12,12,13,0.3); + --notification-button-text: inherit; + --notification-primary-button-background: #0060df; + --notification-primary-button-background-hover: #003eaa; + --notification-primary-button-background-active: #002275; + --notification-primary-button-text: rgb(249, 249, 250); +} + +@media (prefers-color-scheme: dark) { + notification[type="info"]:-moz-lwtheme { + --notification-background: #38383d; + --notification-text: rgb(249, 249, 250); + } + + notification[type="info"] { + --notification-button-background: rgba(249,249,250,.1); + --notification-button-background-hover: rgba(249,249,250,.2); + --notification-button-background-active: rgba(249,249,250,.3); + } +} + +html|notification-message.animated, +notification.animated { + transition: margin-top 300ms var(--animation-easing-function), opacity 300ms var(--animation-easing-function); +} + +.notificationbox-stack[notificationside="top"] > notification { + border-top-style: none; +} + +.notificationbox-stack[notificationside="bottom"] > notification { + border-bottom-style: none; +} + +notification[type="warning"] { + --notification-background: #ffe900; + --notification-text: #0c0c0d; +} + +notification[type="critical"] { + --notification-background: #d70022; + --notification-text: #fff; +} + +notification[type="critical"] > .close-icon:hover { + background-color: color-mix(in srgb, currentColor 20%, transparent); +} + +notification[type="critical"] > .close-icon:hover:active { + background-color: color-mix(in srgb, currentColor 30%, transparent); +} + +.messageText { + margin-inline-start: 12px !important; + margin-block: 0; +} + +.messageText > .text-link { + text-decoration: underline; + margin-block: 0; +} + +.messageText > .text-link:not(.notification-link) { + color: inherit !important; + margin-inline: 0; +} + +.messageImage { + width: 24px; + margin: 4px 0; + -moz-context-properties: fill; + fill: currentColor; +} + +notification[type="info"] > hbox > .messageImage { + list-style-image: url("chrome://global/skin/icons/help.svg"); +} + +notification[type="warning"] > hbox > .messageImage { + list-style-image: url("chrome://global/skin/icons/warning.svg"); +} + +notification[type="critical"] > hbox > .messageImage { + list-style-image: url("chrome://global/skin/icons/error.svg"); +} + +.messageCloseButton { + margin: 0; + padding: 0; +} + +.messageCloseButton > .toolbarbutton-icon { + padding: 6px; + width: 32px; + /* Close button needs to be clickable from the edge of the window */ + margin-inline-end: 8px; +} + +.messageCloseButton:focus-visible { + /* Override the dotted outline from button.css */ + outline: none; +} + +.messageCloseButton:focus-visible > .toolbarbutton-icon { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); + border-radius: var(--toolbarbutton-border-radius, 4px); +} + +.notification-button { + appearance: none; + border: 1px solid transparent; + border-radius: 4px; + background-color: var(--notification-button-background); + color: var(--notification-button-text); + padding: 0 6px; + margin: 4px 8px; + height: 24px; +} + +.notification-button[disabled] { + opacity: 0.5; +} + +.notification-button:not([disabled]):hover { + background-color: var(--notification-button-background-hover); +} + +.notification-button:not([disabled]):hover:active { + background-color: var(--notification-button-background-active); +} + +.notification-button:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +.notification-button.primary { + background-color: var(--notification-primary-button-background); + color: var(--notification-primary-button-text); +} + +.notification-button.primary:not([disabled]):hover { + background-color: var(--notification-primary-button-background-hover); +} + +.notification-button.primary:not([disabled]):hover:active { + background-color: var(--notification-primary-button-background-active); +} + +.notificationbox-stack { + background-color: var(--toolbar-bgcolor); + width: 100%; +} diff --git a/toolkit/themes/shared/numberinput.css b/toolkit/themes/shared/numberinput.css new file mode 100644 index 0000000000..f152d79c3b --- /dev/null +++ b/toolkit/themes/shared/numberinput.css @@ -0,0 +1,17 @@ +/* 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/. */ + +/* ===== numberinput.css ================================================ + == Styles used by the input[type="number"] element. + ======================================================================= */ + +@namespace url("http://www.w3.org/1999/xhtml"); + +input[type="number"] { + text-align: right; +} + +input[type="number"][hidespinbuttons="true"] { + appearance: textfield !important; +} diff --git a/toolkit/themes/shared/offlineSupportPages.css b/toolkit/themes/shared/offlineSupportPages.css new file mode 100644 index 0000000000..4e2c653c28 --- /dev/null +++ b/toolkit/themes/shared/offlineSupportPages.css @@ -0,0 +1,20 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/in-content/info-pages.css"); + +#offlineSupportContainer { + width: 100%; + max-width: 700px; + font-size: 1.14em; + line-height: 1.6; +} + +#offlineSupportContainer h1 { + margin-top: 1.4em; +} + +#toc .tocnumber { + display: none; +} diff --git a/toolkit/themes/shared/pictureinpicture/player.css b/toolkit/themes/shared/pictureinpicture/player.css new file mode 100644 index 0000000000..a2687f3771 --- /dev/null +++ b/toolkit/themes/shared/pictureinpicture/player.css @@ -0,0 +1,648 @@ +/* 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 { + --player-bg-color: #000; + --player-control-icon-fill: #fff; + --player-control-item-half-width: clamp(calc(16px / 2), calc(10vmax / 2), calc(32px / 2)); + --player-control-item-height: clamp(16px, 10vmax, 32px); + --close-btn-fill-color: #000; + --controls-bottom-distance: 15px; + --controls-bottom-upper-height: 30px; + --scrubber-vertical-margin: 7px; + --resize-margin: 5px; + + background-color: var(--player-bg-color); + overflow: hidden; +} + +button::-moz-focus-inner { + border: 0; +} + +body { + margin: 0; +} + +body:fullscreen { + -moz-window-dragging: no-drag; +} + +.player-holder { + display: flex; + flex-direction: column; + height: 100vh; + overflow: hidden; +} + +browser { + flex: 1; +} + +#controls { + height: calc(100% - 2 * var(--resize-margin)); + left: 0; + position: absolute; + top: 0; + width: calc(100% - 2 * var(--resize-margin)); + margin: var(--resize-margin); + -moz-window-dragging: drag; +} + +#controls button { + appearance: none; + border: 0; + z-index: 1; +} + +#controls button:focus-visible, +#controls input:focus-visible, +.switch > input:focus-visible + .slider { + outline: 3px solid #0060DF; + box-shadow: 1px 2px 5px #000; +} + +/* Styling for background gradient. + * Opacity changes are handled separately under .control-item. + */ +#controls-bottom-gradient { + background: linear-gradient(0deg, #000000 -13.24%, rgba(0, 0, 0, 0) 90.44%); + position: absolute; + height: calc(var(--controls-bottom-distance) + 2 * var(--resize-margin) + var(--player-control-item-height) + var(--controls-bottom-upper-height) + var(--scrubber-vertical-margin)); + bottom: 0; + width: 100vw; + margin: 0 calc(-1 * var(--resize-margin)) calc(-1 * var(--resize-margin)) calc(-1 * var(--resize-margin)); + pointer-events: none; + -moz-window-dragging: drag; +} + +#controls-bottom { + position: absolute; + bottom: var(--controls-bottom-distance); + width: 100%; +} + +.controls-bottom-lower { + display: grid; + grid-template-columns: repeat(3, 1fr); + margin: 0 24px; +} + +.start-controls { + display: grid; + justify-self: start; +} + +.center-controls { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-areas: "seekbackward playpause seekforward"; + justify-self: center; + gap: 8px; +} + +.end-controls { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-areas: "audio closedcaption fullscreen"; + justify-self: end; + gap: 8px; +} + +.control-item { + -moz-window-dragging: no-drag; + transition: opacity 160ms linear, fill-opacity 160ms linear; + opacity: 0; + cursor: pointer; +} + +.control-button { + background-color: transparent; + border-radius: 4px; + /** + * Make the button dimensions a square proportional to one + * dimension of the window - in this case, the width dimension, + * since we suspect most videos are wider than they are tall. + */ + height: var(--player-control-item-height); + width: 10vmax; + max-width: 32px; + min-width: 16px; + -moz-context-properties: fill, fill-opacity; + fill: var(--player-control-icon-fill); + background-position: center; + background-size: 60%; + background-repeat: no-repeat; +} + +.control-button:hover:enabled { + background-color: rgba(255, 255, 255, .25); +} + +#controls:is([keying], [showing]) .control-button:disabled, +/* Only change opacity on hover events for non-fullscreen mode. + * Fullscreen mode uses the `showing` attribute instead. */ +body:not(:fullscreen) #controls:hover .control-button:disabled { + /* Set `fill-opacity` to the desired opacity in addition to full `opacity` + * to allow having the button's tooltip in full opacity even if the button is disabled. */ + fill-opacity: 0.4; + opacity: 1 !important; +} + +.control-item:focus-visible::after, +.control-item:hover::after { + content: attr(tooltip); + display: inline-block; + width: max-content; + position: relative; + padding: .4em .5em; + background: #000000; + color: #ffffff; + border-radius: 4px; + pointer-events: none; +} + +/* Since #controls is set to LTR, button tooltips would normally appear + * as LTR also for RTL locales. To fix this, set the .control-item's ::after + * to RTL based on the root directionality. + * Because of that, don't set logical properties for the next set of rules. */ +:root:dir(rtl) .control-item::after { + direction: rtl; +} + +/* Set the tooltip position for different playback controls */ + +.tooltip-under-controls:focus-visible::after, +.tooltip-under-controls:hover::after { + bottom: -3em; +} + +#close:focus-visible::after, +#close:hover::after, +#unpip[mac="true"]:focus-visible::after, +#unpip[mac="true"]:hover::after { + float: right; + transform: translateX(1em); +} + +#unpip:focus-visible::after, +#unpip:hover::after, +#close[mac="true"]:focus-visible::after, +#close[mac="true"]:hover::after { + float: left; + transform: translateX(-1em); +} + +.tooltip-over-controls:focus-visible::after, +.tooltip-over-controls:hover::after { + bottom: 3em; +} + +.inline-end-tooltip:focus-visible::after, +.inline-end-tooltip:hover::after { + float: right; + right: -1em; +} + +.inline-start-tooltip:focus-visible::after, +.inline-start-tooltip:hover::after { + float: left; + left: -1em; +} + +.center-tooltip:focus-visible::after, +.center-tooltip:hover::after { + right: 0.8em; + translate: calc(-50% + var(--player-control-item-half-width)); +} + +/* Since the unpip button icon is reversed for RTL locales, + * re-position the tooltip so that the tooltip remains in the original placement */ +:root:dir(rtl) #unpip:focus-visible::after, +:root:dir(rtl) #unpip:hover::after { + float: right; +} + +:root:dir(rtl) #unpip[mac="true"]:focus-visible::after, +:root:dir(rtl) #unpip[mac="true"]:hover::after { + float: left; +} + +/* Since the unpip icon is reversed for RTL locales, + * flip its tooltip back */ +:root:dir(rtl) #unpip:focus-visible::after, +:root:dir(rtl) #unpip:hover::after { + scale: -1 1; +} + +/* Set opacity for buttons and scrubber when controls are visible on the pip window and are not hovered over. + * For fullscreen mode, only apply opacity if there is a showing attribute. */ +body:not(:fullscreen) #controls:hover .control-item:not(:hover), +body:fullscreen #controls[showing]:hover .control-item:not(:hover), +#controls[donthide] .control-item { + opacity: 0.8; +} + +#controls[keying] .control-item, +#controls[showing] .control-item, +#controls:hover .control-item:hover { + opacity: 1; +} + +/* Background gradient is the only control item with a fixed opacity value. */ +#controls[keying] .control-item#controls-bottom-gradient, +#controls[showing] .control-item#controls-bottom-gradient, +#controls:hover .control-item#controls-bottom-gradient:hover +#controls[donthide] .control-item#controls-bottom-gradient { + opacity: 0.8; +} + +/* For readability, timestamp should maintain full opacity when visible */ +body:not(:fullscreen) #controls:hover #timestamp, +body:fullscreen #controls[showing]:hover { + opacity: 1; +} + +#close, +#unpip { + background-color: rgba(255, 255, 255, .8); + position: absolute; + fill: var(--close-btn-fill-color); +} + +#close:is(:hover, :focus-visible), +#unpip:is(:hover, :focus-visible) { + background-color: rgba(255, 255, 255, .9); +} + +#close { + background-image: url("chrome://global/skin/icons/close.svg"); + right: 10px; + top: 10px; +} + +#close[mac="true"] { + right: auto; + left: 10px; +} + +#unpip { + background-image: url("chrome://global/skin/media/picture-in-picture-closed.svg"); + left: 10px; + top: 10px; +} + +#unpip[mac="true"] { + right: 10px; + left: auto; +} + +#playpause { + grid-area: playpause; +} + +#audio { + grid-area: audio; +} + +#fullscreen { + grid-area: fullscreen; +} + +#controls.playing #playpause { + background-image: url("chrome://global/skin/media/pause-fill.svg"); +} + +#controls:not(.playing) #playpause { + background-image: url("chrome://global/skin/media/play-fill.svg"); +} + +#controls.muted #audio { + background-image: url("chrome://global/skin/media/audio-muted.svg"); +} + +#controls:not(.muted) #audio { + background-image: url("chrome://global/skin/media/audio.svg"); +} + +body:fullscreen #fullscreen { + background-image: url("chrome://global/skin/media/picture-in-picture-exit-fullscreen-button.svg"); + background-size: auto; +} + +body:not(:fullscreen) #fullscreen { + background-image: url("chrome://global/skin/media/picture-in-picture-enter-fullscreen-button.svg"); + background-size: auto; +} + +#seekBackward { + background-image: url("chrome://global/skin/media/picture-in-picture-seekBackward-button.svg"); + background-size: auto; + grid-area: seekbackward; +} + +#seekForward { + background-image: url("chrome://global/skin/media/picture-in-picture-seekForward-button.svg"); + background-size: auto; + grid-area: seekforward; +} + +:root:dir(rtl) #unpip { + transform: scaleX(-1); +} + +#closed-caption { + background-image: url("chrome://global/skin/media/closed-caption-settings-button.svg"); + color: white; + grid-area: closedcaption; +} + +.box { + -moz-window-dragging: no-drag; + background-color: #2B2A33; + text-align: start; + font-size: 1em; + width: 186px; + padding: 0 8px; + margin: 0; + border-radius: 8px; +} + +:root:dir(rtl) .box { + direction: rtl; +} + +.a11y-only { + visibility: hidden; + position: absolute; +} + +.hide { + display: none; +} + +.bold { + font-weight: 590; +} + +.box > input[type="radio"]{ + background-color: red; + fill: currentColor; +} + +.box label:not(.switch) { + color: white; + font-family: sans-serif; +} + +#subtitles-toggle-label { + width: fit-content; + padding: 8px; +} + +.panel { + position: absolute; + bottom: 40px; + user-select: none; + right: 24px; +} + +.panel-fieldset { + border: none; + margin-top: 8px; + padding-inline-start: 0; +} + +.panel-legend { + font-family: sans-serif; + color: white; + margin-top: 8px; + padding-inline-start: 0; +} + +.arrow { + border: 10px solid transparent; + border-top-color: #2B2A33; + width: 0; + height: 0; + inset-inline-start: 136px; + position: relative; +} + +.grey-line { + width: 100%; + height: 1px; + background: #8F8F9D; +} + +.font-size-selection { + margin-inline-start: 8px; + padding-inline-start: 8px; +} + +.font-size-selection-radio { + display: flex; + width: fit-content; + cursor: pointer; + padding-block: 8px; +} + +.font-size-selection-radio label { + cursor: pointer; +} + +.font-size-selection-radio > input[type="radio"] { + appearance: none; + width: 16px; + height: 16px; + border: 1px solid #8f8f9d; + border-radius: 50%; + margin: 0; + margin-inline-end: 6px; +} + +.font-size-selection-radio > input[type="radio"]:checked { + border: 4px solid #00ddff; +} + +.subtitle-grid { + display: grid; + grid-template-rows: auto; + grid-template-columns: auto 46px; + padding: 8px; +} + +.switch { + position: relative; + display: inline-block; + width: 32px; + height: 16px; + grid-column: 2; + margin: 8px; + cursor: pointer; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + inset: 0; + transition: transform 250ms; + border-radius: 13px; + background-color: #55545f; +} + +.slider::before { + position: absolute; + content: ''; + height: 12px; + width: 12px; + inset-inline-start: 2px; + bottom: 2px; + background-color: #2B2A33; + transition: transform 250ms; + border-radius: 50%; +} + +input:checked + .slider { + background-color: #00ddff; +} + +input:checked + .slider::before { + transform: translateX(16px); +} + +:root:dir(rtl) input:checked + .slider::before { + transform: translateX(-16px); +} + +.font-size-overlay { + opacity: 0.4; + pointer-events: none; +} + +.controls-bottom-upper { + width: calc(100% - 38px); + height: var(--controls-bottom-upper-height); + margin: 0 19px; + display: grid; +} + +.scrubber-no-drag { + -moz-window-dragging: no-drag; + height: 16px; + margin: var(--scrubber-vertical-margin) 0; + display: grid; + justify-items: center; + align-items: center; + width: 100%; +} + +#scrubber { + width: 100%; + background-color: transparent; + padding: 6px; +} + +#scrubber::-moz-range-thumb { + border-radius: 14px; + background-color: #BFBFC9; + position: relative; + width: 8px; + height: 8px; + border: 3px solid #FFFFFF; + bottom: 24px; + padding: 0; +} + +#scrubber::-moz-range-track { + background-color: #969696; +} + +#scrubber::-moz-range-progress { + background-color: #FFFFFF; +} + +#scrubber, +#scrubber::-moz-range-track, +#scrubber::-moz-range-progress { + height: 4px; + border-radius: 10px; +} + +#timestamp { + align-self: center; + color: #FFFFFF; + cursor: default; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Ubuntu", "Helvetica Neue", sans-serif; + font-size: 0.9em; + user-select: none; + width: 16ch; + grid-area: timestamp; +} + +#timestamp::after { + background: unset; + content: unset; +} + +@media (height <= 325px), (width <= 475px) { + #closed-caption { + display: none; + } + + .end-controls { + grid-template-columns: repeat(2, 1fr); + grid-template-areas: "audio fullscreen"; + } +} + +@media (width <= 440px) { + #timestamp { + display: none; + } +} + +@media (width <= 350px) { + #fullscreen { + display: none; + } + + .end-controls { + grid-template-columns: repeat(1, 1fr); + grid-template-areas: "audio"; + } +} + +@media (height <= 200px) { + .scrubber-no-drag { + display: none; + } +} + +@media (width <= 300px) { + .scrubber-no-drag, + #seekForward, + #seekBackward, + .start-controls { + display: none; + } + + .controls-bottom-lower { + grid-template-columns: repeat(2, 1fr); + } + + .center-controls { + grid-template-columns: repeat(1, 1fr); + grid-template-areas: "playpause"; + } + + .end-controls { + justify-self: center; + } +} diff --git a/toolkit/themes/shared/pictureinpicture/texttracks.css b/toolkit/themes/shared/pictureinpicture/texttracks.css new file mode 100644 index 0000000000..ec7af4a7b4 --- /dev/null +++ b/toolkit/themes/shared/pictureinpicture/texttracks.css @@ -0,0 +1,74 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +:root { + --min-font-size: 14px; + --max-font-size: 40px; + --font-scale: 0.06; + --texttracks-bottom: calc(var(--font-scale) * 100vh); + + /* + * Move text tracks if they visually overlap with pip player controls + * New text tracks position is determined by adding together: + * 1) bottom distance of #controls + * 2) height of #controls-bottom, + * 3) border size of player controls buttons + * 4) hardcoded px value (to ensure consistent distance, regardless of pip window size) + * NOTE: if changing player.css values, change values here too. + */ + --resize-margin: 5px; + --player-controls-height: calc(100vh - 2 * var(--resize-margin)); + --player-controls-bottom-distance: calc(100vh - var(--player-controls-height)); + --player-controls-button-height: 10vmax; + --player-controls-button-max-height: 32px; + --player-controls-button-min-height: 16px; + --player-controls-button-outline-width: 2px; + --player-controls-scrubber-height: 0px; + --player-bottom-controls-height: calc(var(--player-controls-scrubber-height) + clamp(var(--player-controls-button-min-height), var(--player-controls-button-height), var(--player-controls-button-max-height))); + --distance-from-player-controls: 20px; + --texttracks-bottom-overlapped: calc(var(--player-controls-button-outline-width) + var(--player-controls-bottom-distance) + var(--player-bottom-controls-height) + var(--distance-from-player-controls)); +} + +#texttracks { + background-color: black; + opacity: 80%; + position: absolute; + text-align: center; + box-sizing: border-box; + color: white; + margin: 0; + display: block; + left: 50%; + transform: translateX(-50%); + padding: 8px; + max-width: calc(0.88 * 100vw); + bottom: var(--texttracks-bottom); + font-size: clamp(var(--min-font-size), calc(var(--font-scale) * 100vh), var(--max-font-size)); + line-height: clamp(14.4px, calc(var(--font-scale) * 1.2 * 100vh), 48px); + white-space: pre-line; + width: max-content; + font-family: sans-serif; + transition: bottom 0.3s; + transition-delay: 0.1s; +} + +#texttracks[overlap-video-controls] { + bottom: var(--texttracks-bottom-overlapped) +} + +#texttracks:empty { + visibility: hidden; +} + +@media (prefers-reduced-motion) { + #texttracks { + transition: none; + } +} + +@media screen and (max-width: 319px) { + #texttracks { + display: none; + } +} diff --git a/toolkit/themes/shared/popupnotification.css b/toolkit/themes/shared/popupnotification.css new file mode 100644 index 0000000000..8b90efeace --- /dev/null +++ b/toolkit/themes/shared/popupnotification.css @@ -0,0 +1,158 @@ +/* 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"); + +.popup-notification-panel::part(content) { + /* To keep the rounded borders of the panel, we use overflow: hidden; from the + * panel-no-padding class to ensure the contents are clipped to the border box. + * That causes us to override the "display" property so that the height of the + * contents is computed correctly. */ + display: flex; + /* Make multiple popupnotifications stack vertically. */ + flex-direction: column; +} + +.popup-notification-panel > popupnotification:not([hidden]) { + /* Since the anonymous parent (::part(content)) has display: flex, sizing + * computations work better with display: block; than with the XUL default + * display: flex; + * TODO(emilio): we can probably remove this. */ + display: block; +} + +popupnotification { + font: caption; +} + +popupnotificationcontent { + margin-top: .5em; +} + +.popup-notification-header-container, +.popup-notification-footer-container { + display: flex; + /** Padding + Icon width + border-radius + popup-notification-body-width **/ + max-width: calc(2 * var(--arrowpanel-padding) + 32px + 4px + var(--popup-notification-body-width)); +} + +.popup-notification-body-container { + padding: var(--arrowpanel-padding); +} + +.popup-notification-icon { + width: 32px; + height: 32px; + margin-inline-end: var(--arrowpanel-padding); +} + +.popup-notification-body { + width: var(--popup-notification-body-width); + flex: 1 auto; +} + +.popup-notification-closebutton { + margin-inline-end: -8px; + margin-top: -8px; +} + +.popup-notification-origin:not([value]), +.popup-notification-learnmore-link:not([href]) { + display: none; +} + +.popup-notification-origin { + margin-bottom: .3em !important; +} + +.popup-notification-hint-text { + margin-top: .5em !important; +} + +.popup-notification-hint-text:empty { + display: none; +} + +@media (-moz-platform: windows) { + /* Swap the primary and secondary action, because Windows + * platform conventions put the primary action on the left. */ + .panel-footer > .popup-notification-primary-button:not([default]) { + order: -1; + } +} + +.popup-notification-secondary-button:not([dropmarkerhidden="true"]) { + border-start-end-radius: 0; + border-end-end-radius: 0; +} + +/** + * The focus ring is an outline thicker than 1px, meaning that for split buttons, + * if the main button part of the split button has :focus-visible, the ring will + * be partially hidden behind the dropmarker button. We work around this by + * temporarily boosting the z-index of the main button while showing its focus + * ring. + */ +.popup-notification-secondary-button:not([dropmarkerhidden="true"]):focus-visible { + z-index: 2; +} + +.popup-notification-dropmarker { + border-start-start-radius: 0 !important; + border-end-start-radius: 0 !important; + margin-inline-start: 1px !important; + padding: 8px !important; + max-width: 32px; +} + +.popup-notification-dropmarker > .button-box > hbox { + display: none; +} + +.popup-notification-dropmarker > .button-box > .button-menu-dropmarker { + /* This is to override the linux !important */ + appearance: none !important; + display: flex; + padding: 0; + margin: 0; +} + +@media (-moz-platform: windows) { + /* Override default icon size which is too small for this dropdown */ + .popup-notification-dropmarker > .button-box > .button-menu-dropmarker { + width: 16px; + height: 16px; + } +} + +.popup-notification-dropmarker > .button-box > .button-menu-dropmarker::part(icon) { + width: 16px; + height: 16px; + list-style-image: url(chrome://global/skin/icons/arrow-down.svg); + -moz-context-properties: fill; + fill: currentColor; +} + +.popup-notification-warning { + color: #d74345; +} + +.popup-notification-icon:not([hasicon]) { + display: none; +} + +.popup-notification-icon { + height: 16px; + width: 16px; + margin-inline-end: 6px; +} + +.popup-notification-checkbox > .checkbox-label-box > .checkbox-label { + opacity: 0.7; +} + +.popup-notification-learnmore-link { + text-decoration: underline; + margin-block: 4px 0; +} diff --git a/toolkit/themes/shared/profileDowngrade.css b/toolkit/themes/shared/profileDowngrade.css new file mode 100644 index 0000000000..4cf641e417 --- /dev/null +++ b/toolkit/themes/shared/profileDowngrade.css @@ -0,0 +1,13 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +dialog::part(button-spacer) { + display: none; +} + +#info { + list-style-image: url("chrome://global/skin/icons/info.svg"); + width: 32px; + height: 32px; +} diff --git a/toolkit/themes/shared/profileSelection.css b/toolkit/themes/shared/profileSelection.css new file mode 100644 index 0000000000..375896afda --- /dev/null +++ b/toolkit/themes/shared/profileSelection.css @@ -0,0 +1,18 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/global.css"); + +#managebuttons { + padding-top: 1em; +} + +#profilesContainer { + flex: 1; + min-width: 0; +} + +#profiles { + height: 12em; +} diff --git a/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg b/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg new file mode 100644 index 0000000000..6bd81a95e4 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg b/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg new file mode 100644 index 0000000000..eb82e386b7 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg b/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg new file mode 100644 index 0000000000..0f9e4d90e4 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg b/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg new file mode 100644 index 0000000000..17fb534ced --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + diff --git a/toolkit/themes/shared/reader/RM-Minus-24x24.svg b/toolkit/themes/shared/reader/RM-Minus-24x24.svg new file mode 100644 index 0000000000..27f0367223 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Minus-24x24.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/reader/RM-Plus-24x24.svg b/toolkit/themes/shared/reader/RM-Plus-24x24.svg new file mode 100644 index 0000000000..a8517b5e8d --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Plus-24x24.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/reader/RM-Pocket-Glyph-Dark.svg b/toolkit/themes/shared/reader/RM-Pocket-Glyph-Dark.svg new file mode 100644 index 0000000000..1315b3eddc --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Pocket-Glyph-Dark.svg @@ -0,0 +1,4 @@ + + diff --git a/toolkit/themes/shared/reader/RM-Pocket-Glyph-Sepia.svg b/toolkit/themes/shared/reader/RM-Pocket-Glyph-Sepia.svg new file mode 100644 index 0000000000..869b2d77b1 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Pocket-Glyph-Sepia.svg @@ -0,0 +1,4 @@ + + diff --git a/toolkit/themes/shared/reader/RM-Pocket-Glyph.svg b/toolkit/themes/shared/reader/RM-Pocket-Glyph.svg new file mode 100644 index 0000000000..79bffb2f60 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Pocket-Glyph.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/toolkit/themes/shared/reader/RM-Sans-Serif.svg b/toolkit/themes/shared/reader/RM-Sans-Serif.svg new file mode 100644 index 0000000000..051855d14a --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Sans-Serif.svg @@ -0,0 +1,13 @@ + + + + + diff --git a/toolkit/themes/shared/reader/RM-Serif.svg b/toolkit/themes/shared/reader/RM-Serif.svg new file mode 100644 index 0000000000..8cb7fcc715 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Serif.svg @@ -0,0 +1,11 @@ + + + + + diff --git a/toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg b/toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg new file mode 100644 index 0000000000..26807e8468 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg b/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg new file mode 100644 index 0000000000..235f186376 --- /dev/null +++ b/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/search-textbox.css b/toolkit/themes/shared/search-textbox.css new file mode 100644 index 0000000000..7b23d9b338 --- /dev/null +++ b/toolkit/themes/shared/search-textbox.css @@ -0,0 +1,110 @@ +/* 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/. */ + +:host { + appearance: auto; + -moz-default-appearance: textfield; + cursor: text; + margin: 2px 4px; /* matches global.css margin */ + padding: 2px 2px 3px; + padding-inline-start: 4px; + background-color: Field; + color: FieldText; + min-width: 0; +} + +@media (-moz-platform: macos) { + :host { + -moz-default-appearance: searchfield; + /* TODO: These are a bit dubious, see bug 1815264 */ + font-size: 12px; + margin: 4px; /* matches global.css margin */ + padding: 1px; + } +} + +input { + border: none; + padding: 0 1px; + background-color: transparent; + outline: none; + color: inherit; + font: inherit; + text-shadow: inherit; + box-sizing: border-box; + flex: 1; + text-align: inherit; + min-width: 0; +} + +:host([readonly="true"]) { + background-color: -moz-Dialog; + color: -moz-DialogText; +} + +:host([disabled="true"]) { + cursor: default; + background-color: -moz-Dialog; + color: GrayText; +} + +.textbox-search-icons { + align-items: center; + justify-items: center; +} + +.textbox-search-icon, +.textbox-search-sign, +.textbox-search-clear { + /* Search icon is 12px, but we expand to the clear button size so they + * overlap. That doesn't make the icon noticeably less crisp */ + width: 14px; +} + +.textbox-search-sign, +.textbox-search-icon { + list-style-image: url(chrome://global/skin/icons/search-textbox.svg); +} + +.textbox-search-sign:-moz-locale-dir(rtl), +.textbox-search-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.textbox-search-sign { + margin-inline-end: 5px; +} + +.textbox-search-clear { + list-style-image: url(resource://content-accessible/searchfield-cancel.svg); +} + +.textbox-search-icon:not([disabled]) { + cursor: pointer; +} + +.textbox-search-clear:not([disabled]) { + cursor: default; +} + +/* searchbutton disables the icon to the left. + * Otherwise we don't show the search icon, only the clear icon, see + * bug 1385902 */ +:host([searchbutton]) .textbox-search-sign, +:host(:not([searchbutton])) .textbox-search-icons:not([selectedIndex="1"]) { + display: none; +} + +/* On macOS -moz-default-appearance: searchbox provides the search icon too, so + * disable those there unconditionally */ +@media (-moz-platform: macos) { + .textbox-search-sign, + .textbox-search-icons:not([selectedIndex="1"]) { + display: none; + } + + .textbox-search-clear { + margin-bottom: 1px; + } +} diff --git a/toolkit/themes/shared/tree.css b/toolkit/themes/shared/tree.css new file mode 100644 index 0000000000..33a52cacae --- /dev/null +++ b/toolkit/themes/shared/tree.css @@ -0,0 +1,316 @@ +/* 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/. */ + +/* ===== tree.css =================================================== + == Styles used by the XUL tree element. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* ::::: tree ::::: */ + +tree { + margin: 0 4px; + background-color: Field; + color: FieldText; + appearance: auto; + -moz-default-appearance: listbox; +} + +/* ::::: tree rows ::::: */ + +treechildren::-moz-tree-row { + border: 1px solid transparent; +} + +treechildren::-moz-tree-row, +treecol:not([hideheader="true"]), +.tree-columnpicker-button { + min-height: max(24px, 1.3em); +} + +treechildren::-moz-tree-row(multicol, odd) { + background-color: -moz-oddtreerow; +} + +@media (-moz-windows-default-theme) { + treechildren::-moz-tree-row(hover) { + background-color: hsla(0,0%,50%,.15); + } +} + +treechildren::-moz-tree-row(selected) { + background-color: -moz-cellhighlight; +} + +treechildren::-moz-tree-row(selected, focus) { + background-color: SelectedItem; +} + +treechildren::-moz-tree-row(current, focus) { + outline: var(--default-focusring); + outline-color: SelectedItem; + outline-offset: calc(-1 * var(--default-focusring-width)); +} + +treechildren::-moz-tree-row(selected, current, focus) { + outline-color: #F3D982; +} + +/* ::::: tree cells ::::: */ + +treechildren::-moz-tree-cell { + padding: 0 2px; +} + +treechildren::-moz-tree-cell-text { + color: inherit; +} + +treechildren::-moz-tree-image(selected), +treechildren::-moz-tree-twisty(selected), +treechildren::-moz-tree-cell-text(selected) { + color: -moz-cellhighlighttext; +} + +treechildren::-moz-tree-image(selected, focus), +treechildren::-moz-tree-twisty(selected, focus), +treechildren::-moz-tree-cell-text(selected, focus) { + color: SelectedItemText; +} + + +/* ::::: lines connecting cells ::::: */ + +treechildren::-moz-tree-line { + border: 1px dotted ThreeDShadow; +} + +treechildren::-moz-tree-line(selected, focus) { + border: 1px dotted SelectedItemText; +} + + +/* ::::: tree separator ::::: */ + +treechildren::-moz-tree-separator { + border-top: 1px solid ThreeDShadow; + border-bottom: 1px solid ThreeDHighlight; +} + + +/* ::::: drop feedback ::::: */ + +treechildren::-moz-tree-cell-text(primary, dropOn) { + background-color: SelectedItem; + color: SelectedItemText; +} + +treechildren::-moz-tree-drop-feedback { + background-color: SelectedItem; + width: 50px; + height: 2px; + margin-inline-start: 5px; +} + +/* ::::: tree columns ::::: */ + +treecol, +.tree-columnpicker-button { + appearance: auto; + -moz-default-appearance: treeheadercell; + align-items: center; + justify-content: center; + color: -moz-ColHeaderText; + padding: 0 4px; + margin: 0; +} + +treecol:where(:hover), +.tree-columnpicker-button:where(:hover) { + color: -moz-ColHeaderHoverText; +} + +.treecol-text { + margin: 0 !important; +} + +treecol[hideheader="true"] { + appearance: none; +} + +/* ::::: column drag and drop styles ::::: */ + +treecol[dragging="true"] { + color: Graytext; +} + +treechildren::-moz-tree-column(insertbefore) { + border-inline-start: 1px solid ThreeDShadow; +} + +treechildren::-moz-tree-column(insertafter) { + border-inline-end: 1px solid ThreeDShadow; +} + +/* ::::: column picker ::::: */ + +.tree-columnpicker-button { + list-style-image: url("chrome://global/skin/icons/columnpicker.svg"); + -moz-context-properties: fill; + fill: currentColor; + min-width: 0; + padding: 1px 0; +} + +.tree-columnpicker-button .button-text { + display: none; +} + +/* ::::: tree icons ::::: */ + +treechildren::-moz-tree-image { + -moz-context-properties: fill; + fill: currentColor; +} + +/* ::::: twisty ::::: */ + +treechildren::-moz-tree-twisty { + padding-top: 1px; + padding-inline: 4px; + width: 12px; /* The image's width is 12 pixels */ + list-style-image: url("chrome://global/skin/icons/arrow-right-12.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed) { + list-style-image: url("chrome://global/skin/icons/arrow-left-12.svg"); +} + +treechildren::-moz-tree-twisty(open) { + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); +} + +treechildren::-moz-tree-indentation { + width: 16px; +} + +/* ::::: editable tree ::::: */ + +treechildren::-moz-tree-row(selected, editing) { + background-color: transparent; + border: none; +} + +treechildren::-moz-tree-cell-text(selected, editing), +treechildren::-moz-tree-image(selected, editing) { + color: inherit; +} + +html|input.tree-input { + position: absolute; + top: 0; + left: 0; + appearance: none; + flex: 1; + border: 0; + border-radius: 2px; + outline: var(--focus-outline); + margin-block: -1px 0; + margin-inline: -2px 0; + padding: 1px; + font: inherit; +} + +.scrollbar-topmost { + position: relative; + z-index: 2147483647; +} + +@media (-moz-platform: windows) { + /* ::::: sort direction indicator ::::: */ + + .treecol-sortdirection { + list-style-image: none; + -moz-context-properties: fill; + fill: currentColor; + } + + treecol[sortDirection="ascending"]:not([hideheader="true"]) > .treecol-sortdirection { + list-style-image: url("chrome://global/skin/tree/sort-asc.svg"); + } + + treecol[sortDirection="descending"]:not([hideheader="true"]) > .treecol-sortdirection { + list-style-image: url("chrome://global/skin/tree/sort-dsc.svg"); + } + + @media (prefers-color-scheme: dark) { + treecol, + .tree-columnpicker-button { + appearance: none; + background-color: ButtonFace; + color: ButtonText; + border-inline-start: 1px solid ThreeDLightShadow; + box-shadow: inset 0 -1px ThreeDLightShadow; + } + treecol:where([ordinal="1"]) { + border-inline-start: none; + } + treecol:where(:hover), + .tree-columnpicker-button:where(:hover) { + background-color: -moz-ButtonHoverFace; + color: -moz-ButtonHoverText; + } + treecol:where(:hover:active), + .tree-columnpicker-button:where(:hover:active) { + background-color: -moz-ButtonActiveFace; + color: -moz-ButtonActiveText; + } + } + + @media (-moz-windows-classic) { + treecol, + .tree-columnpicker-button { + border: 1px solid; + border-top-color: ThreeDHighlight; + border-inline-end-color: ThreeDShadow; + border-bottom-color: ThreeDShadow; + border-inline-start-color: ThreeDHighlight; + box-shadow: none; + background-color: -moz-Dialog; + } + + treecol:where(:hover:active), + .tree-columnpicker-button:where(:hover:active) { + border-top-color: ThreeDShadow; + border-inline-end-color: ThreeDHighlight; + border-bottom-color: ThreeDHighlight; + border-inline-start-color: ThreeDShadow; + } + } +} + +/* Stylelint doesn't cope with the Level 4 media query here. + * Filed as https://github.com/stylelint/stylelint/issues/6834 */ +/* stylelint-disable-next-line media-feature-name-no-unknown */ +@media (-moz-platform: macos) and (not (prefers-contrast)) { + /* We show a `SelectedItem` background on selected rows, so we do not need the + dotted outline in that case. For users who have Full Keyboard Access + enabled, macOS draws a blue highlight above the row highlight, so keyboard- + only users can still discern the currently-selected row when multiple rows + are selected. */ + treechildren::-moz-tree-row(selected, current, focus) { + outline: none; + } +} + +@media (-moz-platform: linux) { + .treecol-sortdirection { + appearance: auto; + -moz-default-appearance: treeheadersortarrow; + } +} -- cgit v1.2.3