From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 02:47:55 +0200 Subject: Adding upstream version 124.0.1. 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 | 212 ++++ toolkit/themes/shared/aboutNetworking.css | 80 ++ toolkit/themes/shared/aboutProfiles.css | 17 + toolkit/themes/shared/aboutReader.css | 914 ++++++++++++++ toolkit/themes/shared/aboutRights.css | 19 + toolkit/themes/shared/aboutServiceWorkers.css | 33 + toolkit/themes/shared/aboutSupport.css | 176 +++ toolkit/themes/shared/alert.css | 211 ++++ toolkit/themes/shared/appPicker.css | 33 + toolkit/themes/shared/arrowscrollbox.css | 55 + toolkit/themes/shared/checkbox.css | 108 ++ toolkit/themes/shared/close-icon.css | 42 + toolkit/themes/shared/commonDialog.css | 70 ++ toolkit/themes/shared/datetimeinputpickers.css | 382 ++++++ .../design-system/README.design-tokens.stories.md | 759 ++++++++++++ .../shared/design-system/text-and-typography.css | 45 + .../themes/shared/design-system/tokens-brand.css | 52 + .../shared/design-system/tokens-platform.css | 43 + .../themes/shared/design-system/tokens-shared.css | 190 +++ toolkit/themes/shared/desktop-jar.inc.mn | 153 +++ toolkit/themes/shared/desktop-non-mac.jar.inc.mn | 27 + 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/recommended.svg | 8 + toolkit/themes/shared/findbar.css | 191 +++ toolkit/themes/shared/global-shared.css | 352 ++++++ 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-filled.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/clipboard.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 | 7 + 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/mdn.svg | 10 + 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.svg | 6 + toolkit/themes/shared/icons/plus.svg | 6 + toolkit/themes/shared/icons/pocket-favicon.ico | Bin 0 -> 4286 bytes 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/rating-star.svg | 43 + 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/sort-arrow.svg | 7 + 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 | 1302 ++++++++++++++++++++ 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 | 591 +++++++++ toolkit/themes/shared/menu-shared.css | 168 +++ toolkit/themes/shared/menulist-shared.css | 79 ++ toolkit/themes/shared/minimal-toolkit.jar.inc.mn | 47 + toolkit/themes/shared/mozapps.inc.mn | 32 + 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 | 729 +++++++++++ .../themes/shared/pictureinpicture/texttracks.css | 74 ++ toolkit/themes/shared/popup.css | 131 ++ toolkit/themes/shared/popupnotification.css | 132 ++ toolkit/themes/shared/profileDowngrade.css | 13 + toolkit/themes/shared/profileSelection.css | 18 + toolkit/themes/shared/radio.css | 86 ++ .../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 + 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/splitter.css | 75 ++ toolkit/themes/shared/toolbarbutton.css | 106 ++ toolkit/themes/shared/tree.css | 281 +++++ 184 files changed, 10947 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/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-system/README.design-tokens.stories.md create mode 100644 toolkit/themes/shared/design-system/text-and-typography.css create mode 100644 toolkit/themes/shared/design-system/tokens-brand.css create mode 100644 toolkit/themes/shared/design-system/tokens-platform.css create mode 100644 toolkit/themes/shared/design-system/tokens-shared.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/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-filled.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/clipboard.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/mdn.svg 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.svg create mode 100644 toolkit/themes/shared/icons/plus.svg create mode 100644 toolkit/themes/shared/icons/pocket-favicon.ico 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/rating-star.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/sort-arrow.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-shared.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/popup.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/radio.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-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/splitter.css create mode 100644 toolkit/themes/shared/toolbarbutton.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..6581b089dc --- /dev/null +++ b/toolkit/themes/shared/aboutNetError.css @@ -0,0 +1,212 @@ +/* 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; +} + +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"); + fill: 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; +} + +/* 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..6e4206e293 --- /dev/null +++ b/toolkit/themes/shared/aboutReader.css @@ -0,0 +1,914 @@ +/* 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); + } + + .moz-reader-block-img { + filter: brightness(0.8) contrast(1.2); + } +} + +.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 calc(8px + var(--line-height) * 0.4); + 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/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..b2fb5ed9b6 --- /dev/null +++ b/toolkit/themes/shared/aboutSupport.css @@ -0,0 +1,176 @@ +/* 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; +} + +/* Codec support table w/ zebra striping */ +:root { + --codec-bg-header: #bfbfc9; + --codec-bg-supported-even: #b3ffe3; + --codec-bg-supported-odd: #54ffbd; + --codec-bg-unsupported-even: #ffdfe7; + --codec-bg-unsupported-odd: #ffbdc5; + --codec-text-name-even: var(--in-content-box-background); + --codec-text-name-odd: var(--in-content-box-background-odd); + --codec-text-other: var(--in-content-text-color); + --codec-text-supported: #15141a; + --codec-text-unsupported: #15141a; +} + +@media (prefers-color-scheme: dark) { + :root { + --codec-bg-header: #42414d; + } +} + +#codec-table { + text-align: center; + white-space: nowrap; + width: auto; +} + +#codec-table tr { + color: var(--codec-text-other); +} + +#codec-table th { + color: var(--codec-text-other); + background-color: var(--codec-bg-header); +} + +#codec-table td:first-child { + text-align: start; + unicode-bidi: normal; + font-weight: 600; +} + +#codec-table tr:nth-child(even) { + background-color: var(--codec-text-name-even); +} + +#codec-table tr:nth-child(odd) { + background-color: var(--codec-text-name-odd); +} + +#codec-table tr > td.unsupported { + color: var(--codec-text-unsupported); +} + +#codec-table tr > td.supported { + color: var(--codec-text-supported); +} + +#codec-table tr > td.lack-of-extension { + font-weight: var(--font-weight-bold); +} + +#codec-table tr:nth-child(even) > td.unsupported { + background-color: var(--codec-bg-unsupported-even); +} + +#codec-table tr:nth-child(odd) > td.unsupported { + background-color: var(--codec-bg-unsupported-odd); +} + +#codec-table tr:nth-child(even) > td.supported { + background-color: var(--codec-bg-supported-even); +} + +#codec-table tr:nth-child(odd) > td.supported { + background-color: var(--codec-bg-supported-odd); +} + +#codec-table tr:nth-child(even) > td.lack-of-extension { + background-color: var(--in-content-box-background-even); +} + +#codec-table tr:nth-child(odd) > td.lack-of-extension { + background-color: var(--in-content-box-background-odd); +} + +#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..0196baac47 --- /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 (not (prefers-contrast)) 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..dc0c88a4a7 --- /dev/null +++ b/toolkit/themes/shared/checkbox.css @@ -0,0 +1,108 @@ +/* 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 { + align-items: center; + margin: 4px 2px; + + &[disabled="true"][native] { + color: GrayText; + } + + &[disabled="true"]:not([native]) > .checkbox-label-box { + opacity: 0.4; + } +} + +.checkbox-icon { + margin-inline-end: 2px; + + &:not([src]) { + display: none; + } +} + +.checkbox-label { + margin: 1px 0; +} + +/* ::::: checkmark image ::::: */ + +.checkbox-check { + appearance: auto; + -moz-default-appearance: checkbox; + margin-inline-end: var(--checkbox-margin-inline); + + &:not([native]) { + -moz-theme: non-native; + width: var(--checkbox-size); + height: var(--checkbox-size); + } + + checkbox:focus-visible > & { + outline-style: auto; + } +} + +.checkbox-label[native] { + margin: 0; +} + +.checkbox-check[native] { + align-items: center; + + @media (-moz-platform: windows) { + width: 13px; + height: 13px; + margin-inline-end: 5px; + } + + @media (-moz-platform: linux) { + margin: 2px; + margin-inline-end: 4px; + } + + @media (-moz-platform: macos) { + width: 1.3em; + height: 1.3em; + 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; + } +} + +@media (-moz-platform: windows) or (-moz-platform: linux) { + checkbox[native]:focus-visible > .checkbox-label-box { + outline: var(--focus-outline); + } +} + +@media (-moz-platform: windows) { + checkbox:where([native]) { + margin: 2px 4px; + padding-block: 1px; + padding-inline: 4px 2px; + } +} + +@media (-moz-platform: macos) { + checkbox:where([native]) { + margin: 4px 2px; + } + + .checkbox-label[native] { + margin: 1px 0; + } +} + +@media (-moz-platform: linux) { + checkbox:where([native]) { + margin: 2px 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-system/README.design-tokens.stories.md b/toolkit/themes/shared/design-system/README.design-tokens.stories.md new file mode 100644 index 0000000000..6afe185d87 --- /dev/null +++ b/toolkit/themes/shared/design-system/README.design-tokens.stories.md @@ -0,0 +1,759 @@ +# Design tokens + +## What are design tokens? + +Design tokens capture raw values that represent user interface design styling decisions, such as color or font size, with variables under a consistent naming structure that conveys purpose and intent. + +Design tokens are language-agnostic, and can be translated to any environment. On Firefox for desktop, variables are represented in CSS. + +For example, [moz-toggle](https://searchfox.org/mozilla-central/source/toolkit/content/widgets/moz-toggle) uses several design tokens. Here are a few: + + + + + + + + + + + + + + + + + + + + + + +
Component tokenAlias of tokenValue
--toggle-width--size-item-large32px
--toggle-background-color-pressed--color-accent-primary--color-blue-50(#0060df)
--toggle-border-radius--border-radius-circle9999px
+ +Although the design tokens methodology is industry-wide, there is no one-size-fits-all approach. Therefore, our design tokens are defined and implemented for the purposes of serving Firefox UI. This document should capture everything you need to know about [our design system's](https://acorn.firefox.com/) design tokens. + +The goal is for all of us who work on Firefox to share a common and maintainable system for how we refer to and consume UI styles, and for Firefox UI to be styled consistently. + +## Taxonomy + +_The following documentation borrows from Nathan Curtis' essay on [Naming Design Tokens](https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676)._ + +Design tokens' variable names follow a taxonomy with distinct classification levels and sublevels, forming a prescriptive vocabulary of descriptive terms which are classified by category. + +
+
+
+ Ecosystem +
Domain
+
+
+ Object +
+
Pattern
+
Component
+
Element
+
+
+
+ Category +
+
Type
+
Concept
+
Property
+
+
+
+ Modifier +
+
Variant
+
State
+
Scale
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
Color
+
+
+
+
+
+
+
Blue
+
+
50
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
Size
+
Item
+
+
+
+
+
+
+
+
Small
+
+
+
+ +
+
+
+
+
+
+
+
Link
+
+
+
+
+
+
+
+
Color
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
Link
+
Focus Outline
+
+
+
+
+
+
+
Color
+
+
+
+
+
+
+
+
+
+
+ +
+
+
Shopping
+
+
+
+
+
Card
+
+
+
+
+
+
+
+
Border Color
+
+
+
+
+
+
+
+
+
+
+
+ +### Ecosystem +The ecosystem level helps describe the context that a token is scoped to. + +#### Domain +A token is only prefixed with a domain when there is a need to specify its context. + +For example, if a token is specific to a certain feature, you can use the domain level to specify the name of the feature that it belongs to. Don't forget to keep domain-specific tokens within the feature's CSS so that they can only be reused within its domain. + +Example from [browser/components/shopping/content/shopping-container.css](https://searchfox.org/mozilla-central/rev/02841791400cf7cf5760c0cfaf31f5d772624253/browser/components/shopping/content/shopping-container.css#7): + +
+
+ shopping +
+
+ header +
+
+ font-size +
+
+ +### Objects +The object level helps define the object (or objects) that the token applies to. + +#### Pattern +A design pattern that is composed of, or represents, multiple related components. + +
+
+ input +
+
+ text +
+
+ min-height +
+
+ +#### Component +The component name. + +
+
+ toggle +
+
+ background-color +
+
+ +#### Nested element +Any element that may be nested within a component (e.g. an icon). + +
+
+ message-bar +
+
+ icon +
+
+ color +
+
+ +### Categories +The category level helps define the visual style that apply to the token. + +#### Type +The type of style category a design token belongs to. + +
+
+ color +
+
+ blue +
+
+ 50 +
+
+ +#### Concept +A concept further describes user interface styles. They are either industry-wide patterns, or they are terms determined by our team based on specific user interface style needs. For example, "accent" is a common design industry term used for deliniating a brand's or product's accent color(s) that we happen to use for our color tokens. + +
+
+ color +
+
+ accent +
+
+ primary +
+
+ +To further illustrate this taxonomy level, here are detailed explanations and definitions of existing concepts: + +##### Accent +We use the "accent" color concept for referring to our brand and the operating system (platform) accent colors. The brand and platform accent colors are used as the primary color for accentuating and characterizing several Firefox UI elements' (e.g. buttons, focus outlines, links, icons, and more). + +##### Interactive +We use the "interactive" concept to describe design tokens that pertain to interactive elements. For example, `--border-interactive-color` is used on [moz-toggle](https://searchfox.org/mozilla-central/rev/956e25260926097a4d54d5aeb0e06347841616bf/toolkit/content/widgets/moz-toggle/moz-toggle.css#40) since interactive elements such as toggles, radios, and checkboxes share the same border color pattern that is different from our default border color. + +```css +/* moz-toggle.css */ +--toggle-border-color: var(--border-interactive-color); +``` + +##### Item +We use the "item" concept as a modifier on top of the "size" type tokens group to refer to different interface items, or elements, that often rely on the same standard width and height dimensions. The word item should imply that this is a small sizing scale dedicated for dimensions that get applied to smaller UI pieces such as icons, logos, and avatars, as opposed to large compositions or areas such as the width set for onboarding illustrations, or the width of a sidebar or main column within a page's template. + +```css +/* tokens-shared.css */ +--size-item-small: 16px; +--size-item-large: 32px; +``` + +#### Property +A property (e.g. size, width, color, fill) further describes a design tokens' style, although this is not to be confused with the categorical type of token mentioned above, albeit they often use similar terms. Note that sometimes properties are double-worded, and that's totally fine (e.g. min-width, background-color) + +
+
+ border-radius +
+
+ circle +
+
+ +### Modifiers +The modifier level helps further classify a design token's characteristic with further specification. + +#### Variant +A variant specifies a token from a group of tokens related by a common meaning but that have varying purpose. + +
+
+
+ icon +
+
+ color +
+
+ success +
+
+ +
+
+ icon +
+
+ color +
+
+ critical +
+
+
+ +#### State +A state defines possible intereactive states of a design token. +(e.g. hover, active, focus, disabled) + +
+
+ button +
+
+ background-color +
+
+ hover +
+
+ +#### Scale +A scale defines a collection of tokens that relate to one another's but vary by their type, such as a collection of size units, or any other relationship that requires differentiating tokens by a determined scale. + +
+
+
+ font-size +
+
+ small +
+
+
+ +Today we have scales based off a sequence of numbers or t-shirt sizing. + +We use a sequence numbers for collections that have attributes that change as the number goes up, such as colors getting darker. + +Number-based scale grows by 10: + * 10 + * 20 + * 30 + * 40 + * 50 + * 60 + * and so on... + +For collections that do have sizing relationships, we use t-shirt sizing names: + + * xsmall + * small + * medium + * large + * xlarge + * xxlarge + * and so on... + +These are some of our font sizes as an example: + +```css +/* tokens-brand.css */ +--font-size-root: 15px; +--font-size-small: 0.867rem; /* 13px */ +--font-size-large: 1.133rem; /* 17px */ +--font-size-xlarge: 1.467rem; /* 22px */ +``` + +You will see that the font size scale is missing what would be a logical "medium" size in between "small" and "large", and that it has a `--font-size-root` within it too; that's because we use more specific words within scales that contain tokens that serve a specific purpose within that scale. + +The `--font-size-root` token was created for specific use under the document's `:root` in order to set the default font size for our relative typography scale. We label our default font size token as `root` in order to be specific **and** intentional. + +
+
+ font-size +
+
+ root +
+
+ +Just like the specific HTML term 'root', we tend to include the term 'default' on scales in order to identify values that are used as a default, or at the global level (`:root` or `body` tag): + +
+
+ font-weight +
+
+ default +
+
+ +It's okay to include intentional terms within scales that better represent the meaning of a value and when to use it. For example, our border radius collection, which uses t-shirt sizing, also mixes the 'circle' option within its scale in order to describe a border radius that will create a circular effect: + +
+
+ border-radius +
+
+ circle +
+
+ + +## Naming guidelines +The goal of design tokens naming is modularity and legibility. + +
+
+ Ecosystem + Domain +
brand
+
+
+
+ Category +
+
+ Type +
color
+
+
+ Concept +
accent
+
+
+
+
+
+ +Meanings and the relationship between meanings can be complex, therefore taxonomy levels are chained to provide clarity. (see example above) + +The example above also helps illustrate that not all levels are required when naming a token. A name just needs enough levels to imply the token's use and define its meaning. Different combinations of different levels helps us arrive at meaningful names. + +Names shouldn't be redundant and should be kept simple. They should only include enough levels to describe and communicate the token's intent and purpose. + +## How it works +The desktop tokens system serves our browser's two different ecosystems, the chrome and in-content (about:) pages, since they don't always share the same styling decisions, and consequently, values. + +The chrome of the browser is styled to look and feel like it belongs to the user's operating system, and to also support theming. Therefore typography and color rules are different from the rest of our application features that load within in-content pages. + +### Token files +Token files are stored in the [design-system](https://searchfox.org/mozilla-central/source/toolkit/themes/shared/design-system) folder within `toolkit/themes/shared`. + +Tokens are split between three stylesheets: brand, platform, and shared. + +```sh +└── toolkit + └── themes + └── shared + └── design-system + ├── tokens-brand.css + ├── tokens-platform.css + └── tokens-shared.css +``` + +A token's context is the key to understanding the relationship between these stylesheets. If a token isn't set at the shared level, that means that it has different values between brand and platform contexts. + +Shared tokens ([tokens-shared.css](https://searchfox.org/mozilla-central/source/toolkit/themes/shared/design-system/tokens-shared.css)) are imported into brand tokens ([tokens-brand.css](https://searchfox.org/mozilla-central/source/toolkit/themes/shared/design-system/tokens-brand.css)) and platform tokens ([tokens-platform.css](https://searchfox.org/mozilla-central/source/toolkit/themes/shared/design-system/tokens-platform.css)). + +[common-shared.css](https://searchfox.org/mozilla-central/source/toolkit/themes/shared/in-content/common-shared.css) imports `tokens-brand.css` so that in-content/about: pages can make use of our brand values, while [global-shared.css](https://searchfox.org/mozilla-central/source/toolkit/themes/shared/global-shared.css), which styles the chrome, imports `tokens-platform.css` so that the chrome can access operating system and themeable values. + +
+
+
+
+ tokens-shared.css +
+
+
+ ↙ ↘ +
+
+
+
+ tokens-brand.css +
+
+ ↓ +
+
+
+
+ tokens-platform.css +
+
+ ↓ +
+
+
+
+
+
+ common-shared.css +
+
+ ↓ +
+
+
+
+ global-shared.css +
+
+ ↓ +
+
+
+
+
+ Styles in-content (about:) pages +
+
+ Styles the chrome +
+
+
+
+ +#### Brand +Tokens specific to the brand, such as colors, and typographical styles. Used within domains that rely on brand values. + +For example, we use the brand's accent color under brand contexts (in-content/about: pages): +```css +/* tokens-brand.css */ +--color-accent-primary: var(--brand-color-accent); +--brand-color-accent: light-dark(var(--color-blue-50), var(--color-cyan-50)); +``` + +#### Platform +Tokens used within the browser chrome that come from the user’s operating system, such as colors and fonts. + +For example, we use the system's accent color under platform contexts (chrome): +```css +/* tokens-platform.css */ +--color-accent-primary: var(--platform-color-accent); +--platform-color-accent: AccentColor; +``` + +#### Shared +Tokens used and shared between brand and platform contexts. + +For example, both the chrome and in-content pages make use of the same border-radius patterns: +```css +/* tokens-shared.css */ +--border-radius-small: 4px; +``` + +### Tiers +#### Base +Base design tokens act as the foundation for the design tokens collection. This tier defines our collection of raw styles that are used to form our semantic design token names. These tokens should not be used directly for styling UI as they don’t carry any meaning and just serve as a base for the design tokens structure. + +```css +/* tokens-shared.css */ +--color-blue-50: #0060df; +--color-blue-60: #0250bb; +--color-blue-70: #054096; +``` + +#### Application +Application design tokens represent the collection of semantic design tokens that actually give proper meaning to style choices. This tier relies on the agreement of the name and meaning behind these styles and their values. + +```css +/* tokens-brand.css */ +--brand-color-accent: var(--color-blue-50); +``` + +#### Component +Component is the final tier. This tier is used in order to give meaning to identified style choices made within user interface components. While the "Application" tier can handle most if not all styling use cases, tier 3 helps encapsulate style decisions at the component level. + +Component-level tokens should live at the component-level file (e.g. [moz-toggle.css](https://searchfox.org/mozilla-central/rev/02841791400cf7cf5760c0cfaf31f5d772624253/toolkit/content/widgets/moz-toggle/moz-toggle.css#34-50)), so that they can't be used outside of that specific component's domain. + +```css +/* moz-toggle.css */ +--toggle-background-color-pressed: var(--brand-color-accent); +``` + +### File structure +Design token files are structured for organization and consumption purposes. + +Token groups should be listed by alphabetical order: +Border, Color, Font Weight... + +A comment heading should be added above each token group with its name: +```css +/** Color **/ +--color-white: #ffffff; +--color-blue-05: #deeafc; +--color-blue-30: #73a7f3; +... +``` + +Design tokens should be listed by alphabetical order: +```css +/** 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; +``` + +Scale groups should be listed from the beginning to the end of the scale (i.e. smallest to largest value). +Any semantic tokens within a scale, such as the `--font-size-root` example below, can be listed above it: + +```css +/** Font size **/ +--font-size-root: 15px; +--font-size-small: 0.867rem; /* 13px */ +--font-size-large: 1.133rem; /* 17px */ +--font-size-xlarge: 1.467rem; /* 22px */ +--font-size-xxlarge: 2.2rem; /* 33px */ +``` + +[Base](#base) tokens should be listed at the top of the file, with a heading indicating that they are Base: +```css +/* Base tokens */ +/* Do not use base tokens directly. Their names don't carry any specific meaning, and they are simply used to set foundations. Refer to Application tokens below. */ +/** Color **/ +--color-white: #ffffff; +--color-blue-05: #deeafc; +--color-blue-30: #73a7f3; +... +``` + +[Application](#application) tokens should be added after Base tokens, accompanied by its own heading as well: +```css +/* Application tokens */ +/** Border **/ +--border-radius-circle: 9999px; +--border-radius-small: 4px; +--border-width: 1px; +... +``` + +## Theming + +For certain components, their high-contrast mode design will need styles that other modes do not (e.g. HCM relies on borders that do not exist in non-HCM). In those instances, we just add tokens under the high contrast mode media query rules. On the other hand, if something such as a color, does not apply to HCM contexts, then we add those design tokens under a "@media not (prefers-contrast)" query. + +### Light and dark +We rely on the [light-dark()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) CSS function to set light and dark mode colors at the token assignment level. + + +```css +/* tokens-shared.css */ +--icon-color: light-dark(var(--color-gray-70), var(--color-gray-05)); +``` + +### High contrast mode +We rely on two queries for assigning HCM counterpart variables, @media (prefers-contrast) and @media (forced-colors). They are found at the bottom of [tokens-shared.css](https://searchfox.org/mozilla-central/rev/6eb2ebcafb1b4a8576eb513e6cd2c61e3f3ae6dc/toolkit/themes/shared/design-system/tokens-shared.css#109). + + + +## Help and support +If you have any questions, concerns, or feedback, and if this document has not answered something specific, please reach out to Desktop Theme Reviewers or Reusable Components Reviewers. + +The Reusable Components team can be found on Matrix at [#reusable-components](https://matrix.to/#/#reusable-components:mozilla.org), and theme reviewers can be found at [#fx-theme-reviewers](https://matrix.to/#/#fx-desktop-theme:mozilla.org). You're also welcome to request info from any of us on Bugzilla. + +Tag us on your Phabricator patch via **#desktop-theme-reviewers** and **#reusable-components-reviewers**. + +Internal only: we are also on Mozilla's internal Slack at [#acorn-design-tokens](https://app.slack.com/client/T027LFU12/C046F5U05M1). This channel is dedicated to our design token working group. We also host weekly open-discussion sessions on Zoom; please reach out if you'd like an invite to the meeting. + +## Contributing +For proposing contributions to [design token files](#token-files), please [file a bug under the Theme component](https://bugzilla.mozilla.org/enter_bug.cgi?product=Toolkit&component=Themes). + +If any feature work may require a change or addition to token files, filing a follow-up bug is recommended. + +Token file changes or additions should be handled with their own bug and patch. Please add a detailed commit message following this changelog format: + +```markdown +Added +* ... + +Changed +* ... + +Deprecated +* ... + +Removed +* ... + +Fixed +* ... +``` + +Teams that generate component and feature specific tokens are welcome to [reach out to theme and reusable components reviewers for support](#help-and-support). diff --git a/toolkit/themes/shared/design-system/text-and-typography.css b/toolkit/themes/shared/design-system/text-and-typography.css new file mode 100644 index 0000000000..123847fe8b --- /dev/null +++ b/toolkit/themes/shared/design-system/text-and-typography.css @@ -0,0 +1,45 @@ +/* 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/. */ + +/* Typography scale */ +:root { + font: message-box; +} + +h1, +.heading-xlarge { + font-weight: var(--font-weight-bold); + font-size: var(--font-size-xxlarge); +} + +h2, +.heading-large { + font-weight: var(--font-weight-bold); + font-size: var(--font-size-xlarge); +} + +h3, +.heading-medium { + font-weight: var(--font-weight-bold); + font-size: var(--font-size-large); +} + +/* Text helpers */ +.text-deemphasized { + font-size: var(--font-size-small); + color: var(--text-color-deemphasized); +} + +.text-error { + color: var(--text-color-error); + font-weight: var(--font-weight-bold); +} + +.text-truncated-ellipsis { + /* Will not work on `display: flex` items + unless you wrap its contents with another element that has this class. */ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/toolkit/themes/shared/design-system/tokens-brand.css b/toolkit/themes/shared/design-system/tokens-brand.css new file mode 100644 index 0000000000..ac105d9767 --- /dev/null +++ b/toolkit/themes/shared/design-system/tokens-brand.css @@ -0,0 +1,52 @@ +/* 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-system/tokens-shared.css"); + +:root, +:host(.anonymous-content-host) { + /** Font size **/ + --font-size-root: 15px; /* Set at the `:root`. Do not use */ + --font-size-small: 0.867rem; /* 13px */ + --font-size-large: 1.133rem; /* 17px */ + --font-size-xlarge: 1.467rem; /* 22px */ + --font-size-xxlarge: 1.6rem; /* 24px */ +} + +@media not (prefers-contrast) { + :root, + :host(.anonymous-content-host) { + /** Border **/ + --border-interactive-color: light-dark(var(--color-gray-60), var(--color-gray-50)); + + /** 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); + + /** Link **/ + --link-color: var(--brand-color-accent); + --link-color-hover: var(--brand-color-accent-hover); + --link-color-active: var(--brand-color-accent-active); + --link-color-visited: var(--link-color); + + /** 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: light-dark(var(--color-blue-50), var(--color-cyan-50)); + --brand-color-accent-hover: light-dark(var(--color-blue-60), var(--color-cyan-30)); + --brand-color-accent-active: light-dark(var(--color-blue-70), var(--color-cyan-20)); + --color-canvas: light-dark(var(--color-white), var(--color-gray-90)); + + /** Text **/ + --text-color: light-dark(var(--color-gray-100), var(--color-gray-05)); + --text-color-deemphasized: light-dark( + color-mix(in srgb, currentColor 69%, transparent), + color-mix(in srgb, currentColor 75%, transparent) + ); + } +} diff --git a/toolkit/themes/shared/design-system/tokens-platform.css b/toolkit/themes/shared/design-system/tokens-platform.css new file mode 100644 index 0000000000..e7897d11b0 --- /dev/null +++ b/toolkit/themes/shared/design-system/tokens-platform.css @@ -0,0 +1,43 @@ +/* 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-system/tokens-shared.css"); + +@media not (prefers-contrast) { + :root, + :host(.anonymous-content-host) { + /** 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(--platform-color-accent); + --color-accent-primary-hover: var(--platform-color-accent-hover); + --color-accent-primary-active: var(--platform-color-accent-active); + --platform-color-accent: var(--button-primary-bgcolor, AccentColor); + --platform-color-accent-hover: var(--button-primary-hover-bgcolor); + --platform-color-accent-active: var(--button-primary-active-bgcolor); + --color-canvas: Canvas; + + /** Font size **/ + --font-size-root: unset; + --font-size-small: unset; + --font-size-large: unset; + --font-size-xlarge: unset; + --font-size-xxlarge: unset; + + /** Link **/ + --link-color: LinkText; + --link-color-hover: LinkText; + --link-color-active: ActiveText; + --link-color-visited: var(--link-color); + + /** Text **/ + --text-color: currentColor; + } +} diff --git a/toolkit/themes/shared/design-system/tokens-shared.css b/toolkit/themes/shared/design-system/tokens-shared.css new file mode 100644 index 0000000000..5d62fb8bbe --- /dev/null +++ b/toolkit/themes/shared/design-system/tokens-shared.css @@ -0,0 +1,190 @@ +/* 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, +:host(.anonymous-content-host) { + /* Base tokens */ + /* Do not use base tokens directly as they don't carry any meaning and are used to set our base. Refer to Application tokens below. */ + /** Color **/ + --color-white: #ffffff; + --color-black-a10: rgba(0, 0, 0, 0.1); + --color-blue-05: #deeafc; + --color-blue-30: #73a7f3; + --color-blue-50: #0060df; + --color-blue-60: #0250bb; + --color-blue-70: #054096; + --color-blue-80: #003070; + --color-cyan-20: #aaf2ff; + --color-cyan-30: #80ebff; + --color-cyan-50: #00ddff; + --color-gray-05: #fbfbfe; + --color-gray-50: #bfbfc9; + --color-gray-60: #8f8f9d; + --color-gray-70: #5b5b66; + --color-gray-80: #23222b; + --color-gray-90: #1c1b22; + --color-gray-100: #15141a; + --color-green-05: #d8eedc; + --color-green-30: #4dbc87; + --color-green-50: #017a40; + --color-green-80: #004725; + --color-red-05: #ffe8e8; + --color-red-20: #ff9aa2; + --color-red-30: #f37f98; + --color-red-50: #d7264c; + --color-red-80: #690f22; + --color-yellow-05: #ffebcd; + --color-yellow-30: #e49c49; + --color-yellow-50: #cd411e; + --color-yellow-80: #5a3100; + + /* Application tokens */ + /** Border **/ + --border-radius-circle: 9999px; + --border-radius-small: 4px; + --border-radius-medium: 8px; + --border-width: 1px; + + /** Box **/ + --box-background-color: light-dark(var(--color-white), var(--color-gray-80)); + --box-shadow-10: 0 1px 4px var(--color-black-a10); + + /** Font weight **/ + --font-weight-default: normal; + --font-weight-bold: 600; + + /** 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; + + /** Input **/ + /*** Button ***/ + --button-border-radius: var(--border-radius-small); + --button-font-weight: var(--font-weight-bold); + --button-line-height: var(--line-height-small); + --button-min-height: var(--size-item-large); + + /*** Checkbox ***/ + --checkbox-margin-inline: var(--space-small); + /* TODO Bug 1876537: Make this em-based, probably? */ + --checkbox-size: var(--size-item-small); + + /*** Text ***/ + --input-text-line-height: var(--button-line-height); + --input-text-min-height: var(--button-min-height); + + /** Link **/ + /* Not using --focus-outline-offset for links because that's intended for + elements with a background, and we only want a slight offset here while not + overlapping adjacent text. */ + --link-focus-outline-offset: 1px; + + /** Text **/ + --text-color-deemphasized: color-mix(in srgb, currentColor 60%, transparent); + + /** Size **/ + --size-item-small: 16px; + --size-item-medium: 28px; + --size-item-large: 32px; + + /** Space **/ + --space-xxsmall: calc(0.5 * var(--space-xsmall)); + --space-xsmall: 0.267rem; + --space-small: calc(2 * var(--space-xsmall)); + --space-xlarge: calc(8 * var(--space-xsmall)); +} + +@media not (prefers-contrast) { + :root, + :host(.anonymous-content-host) { + /** Color **/ + --color-background-information: light-dark(var(--color-blue-05), var(--color-blue-80)); + --color-background-success: light-dark(var(--color-green-05), var(--color-green-80)); + --color-background-warning: light-dark(var(--color-yellow-05), var(--color-yellow-80)); + --color-background-critical: light-dark(var(--color-red-05), var(--color-red-80)); + --color-error-outline: light-dark(var(--color-red-50), var(--color-red-20)); + + /** Icon **/ + --icon-color: light-dark(var(--color-gray-70), var(--color-gray-05)); + --icon-color-information: light-dark(var(--color-blue-50), var(--color-blue-30)); + --icon-color-success: light-dark(var(--color-green-50), var(--color-green-30)); + --icon-color-warning: light-dark(var(--color-yellow-50), var(--color-yellow-30)); + --icon-color-critical: light-dark(var(--color-red-50), var(--color-red-30)); + + /** Text **/ + --text-color-error: light-dark(var(--color-red-50), var(--color-red-20)); + } +} + +@media (prefers-contrast) { + :root, + :host(.anonymous-content-host) { + /* Border */ + --border-color: var(--text-color); + --border-interactive-color: AccentColor; + --border-interactive-color-hover: ButtonText; + --border-interactive-color-active: AccentColor; + --border-interactive-color-disabled: GrayText; + + /** Box **/ + --box-background-color: var(--color-canvas); + + /* Button */ + --button-background-color: ButtonFace; + --button-background-color-hover: ButtonFace; + --button-background-color-active: ButtonFace; + --button-background-color-disabled: GrayText; + + /** Link **/ + --link-color: LinkText; + --link-color-hover: LinkText; + --link-color-active: ActiveText; + --link-color-visited: var(--link-color); + + /** Color **/ + --color-canvas: Canvas; + --color-background-information: var(--color-canvas); + --color-background-success: var(--color-canvas); + --color-background-warning: var(--color-canvas); + --color-background-critical: var(--color-canvas); + --color-accent-primary: AccentColor; + /* FIXME(emilio): These seem rather sketchy */ + --color-accent-primary-hover: ButtonText; + --color-accent-primary-active: ButtonText; + --color-error-outline: var(--border-color); + + /** Icon **/ + --icon-color: var(--text-color); + --icon-color-information: var(--icon-color); + --icon-color-success: var(--icon-color); + --icon-color-warning: var(--icon-color); + --icon-color-critical: var(--icon-color); + + /** Text **/ + --text-color: CanvasText; + --text-color-error: inherit; + --text-color-deemphasized: inherit; + } + + @media (forced-colors) { + /* Applies to Windows HCM only, by default. + TODO(emilio): These seem rather sketchy */ + :root, + :host(.anonymous-content-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; + } + } +} diff --git a/toolkit/themes/shared/desktop-jar.inc.mn b/toolkit/themes/shared/desktop-jar.inc.mn new file mode 100644 index 0000000000..6f504132c2 --- /dev/null +++ b/toolkit/themes/shared/desktop-jar.inc.mn @@ -0,0 +1,153 @@ +# 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/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/radio.css (../../shared/radio.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-system/text-and-typography.css(../../shared/design-system/text-and-typography.css) + skin/classic/global/design-system/tokens-brand.css (../../shared/design-system/tokens-brand.css) + skin/classic/global/design-system/tokens-shared.css (../../shared/design-system/tokens-shared.css) + skin/classic/global/design-system/tokens-platform.css (../../shared/design-system/tokens-platform.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-shared.css (../../shared/menu-shared.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/popup.css (../../shared/popup.css) + skin/classic/global/popupnotification.css (../../shared/popupnotification.css) + skin/classic/global/splitter.css (../../shared/splitter.css) + skin/classic/global/toolbarbutton.css (../../shared/toolbarbutton.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-filled.svg (../../shared/icons/check-filled.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/clipboard.svg (../../shared/icons/clipboard.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/mdn.svg (../../shared/icons/mdn.svg) + 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/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/pocket-favicon.ico (../../shared/icons/pocket-favicon.ico) + skin/classic/global/icons/print.svg (../../shared/icons/print.svg) + skin/classic/global/icons/undo.svg (../../shared/icons/undo.svg) + skin/classic/global/icons/rating-star.svg (../../shared/icons/rating-star.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/sort-arrow.svg (../../shared/icons/sort-arrow.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-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..072678face --- /dev/null +++ b/toolkit/themes/shared/desktop-non-mac.jar.inc.mn @@ -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/. + +# 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) + + skin/classic/global/tree/sort-asc.svg (../../windows/global/tree/sort-asc.svg) + skin/classic/global/tree/sort-dsc.svg (../../windows/global/tree/sort-dsc.svg) + +% 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/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..714324929e --- /dev/null +++ b/toolkit/themes/shared/findbar.css @@ -0,0 +1,191 @@ +/* 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; +} + +@media (prefers-reduced-motion: reduce) { + findbar, + findbar[hidden] { + transition-duration: 0s; + transition-delay: 0s; + } +} + +findbar[noanim], +findbar[noanim] > .findbar-container, +findbar[noanim] > .findbar-closebutton { + transition-duration: 0s; + transition-delay: 0s; +} + +.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; + + &:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); + } +} + +.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..c478b2745e --- /dev/null +++ b/toolkit/themes/shared/global-shared.css @@ -0,0 +1,352 @@ +/* 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-system/tokens-platform.css"); +@import url("chrome://global/skin/design-system/text-and-typography.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-separator-color: color-mix(in srgb, currentColor 25%, 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; + --toolbar-field-focus-border-color: color-mix(in srgb, var(--focus-outline-color) 50%, transparent); + + --toolbar-non-lwt-bgcolor: color-mix(in srgb, -moz-dialog 85%, white); + --toolbar-non-lwt-textcolor: -moz-dialogtext; + --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor); + --toolbar-color: var(--toolbar-non-lwt-textcolor); + + &:-moz-lwtheme { + --toolbar-bgcolor: rgba(255,255,255,.4); + --toolbar-color: var(--lwt-text-color, inherit); + } + + /* This color scheme should match --toolbar-color. However, note that + * individual toolbars might override this (see ToolbarIconColor and the + * brighttext attribute). */ + --toolbar-color-scheme: light dark; + &[lwt-toolbar="light"] { + --toolbar-color-scheme: light; + } + &[lwt-toolbar="dark"] { + --toolbar-color-scheme: dark; + } + + @media (prefers-contrast) { + /* Reduce the opacity of disabled toolbar buttons in order to increase + contrast with the enabled state. */ + --toolbarbutton-disabled-opacity: 0.3; + + --panel-separator-color: currentColor; + --toolbar-field-focus-border-color: var(--focus-outline-color); + + &:not(:-moz-lwtheme) { + --panel-disabled-color: GrayText; + } + } + + background-color: -moz-Dialog; + color: -moz-DialogText; + font: message-box; + + &[dialogroot] { + font: menu; + } +} + +:is(menupopup, panel):where([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:-moz-lwtheme { + toolbar, + &[lwt-popup="light"] panel { + color-scheme: light; + } + toolbar[brighttext], + &[lwt-popup="dark"] panel { + color-scheme: dark; + } +} + +: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: var(--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: var(--link-color); + cursor: pointer; + text-decoration: underline; + + &:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--link-focus-outline-offset); + 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 { + margin: 8px 16px 16px; +} + +.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: .45em 1em; + min-height: var(--size-item-large); + font-weight: 600; + min-width: 0; + margin-inline: 8px 0; + margin-bottom: 0; + + &.small-button { + margin: 0; + min-height: var(--size-item-medium); + font-size: var(--font-size-small); + align-items: center; + } + + &[disabled] { + opacity: 0.4; + } + + &:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); + } + + &:not([disabled]) { + &:hover { + background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent)); + } + &:hover:active { + background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)); + } + &[default], + &.primary { + color: var(--button-primary-color); + background-color: var(--button-primary-bgcolor); + + &:hover { + background-color: var(--button-primary-hover-bgcolor); + } + &:hover:active { + background-color: var(--button-primary-active-bgcolor); + } + } + } + + &[type=menu] > .button-box > .button-menu-dropmarker { + appearance: none; + display: flex; + content: url("chrome://global/skin/icons/arrow-down-12.svg"); + -moz-context-properties: fill; + fill: currentColor; + } +} + +/* 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; +} + +/* Full width separator in select */ +#ContentSelectDropdown menuseparator { + padding-inline: 0; +} + +/* 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-filled.svg b/toolkit/themes/shared/icons/check-filled.svg new file mode 100644 index 0000000000..acc5704656 --- /dev/null +++ b/toolkit/themes/shared/icons/check-filled.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/clipboard.svg b/toolkit/themes/shared/icons/clipboard.svg new file mode 100644 index 0000000000..6681b4c6ab --- /dev/null +++ b/toolkit/themes/shared/icons/clipboard.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..ed047aa5c9 --- /dev/null +++ b/toolkit/themes/shared/icons/edit-copy.svg @@ -0,0 +1,7 @@ + + + + + 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/mdn.svg b/toolkit/themes/shared/icons/mdn.svg new file mode 100644 index 0000000000..52dd9d923f --- /dev/null +++ b/toolkit/themes/shared/icons/mdn.svg @@ -0,0 +1,10 @@ + + + + + + + + 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.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-favicon.ico b/toolkit/themes/shared/icons/pocket-favicon.ico new file mode 100644 index 0000000000..c0d1e7a74b Binary files /dev/null and b/toolkit/themes/shared/icons/pocket-favicon.ico differ 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/rating-star.svg b/toolkit/themes/shared/icons/rating-star.svg new file mode 100644 index 0000000000..c23bef36e8 --- /dev/null +++ b/toolkit/themes/shared/icons/rating-star.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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/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/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..d123d3c3b0 --- /dev/null +++ b/toolkit/themes/shared/in-content/common-shared.css @@ -0,0 +1,1302 @@ +/* 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-system/tokens-brand.css"); +@import url("chrome://global/skin/design-system/text-and-typography.css"); + +@namespace html "http://www.w3.org/1999/xhtml"; +@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; + +/* TODO(bug 1845150): Remove notification-message from the host selectors in + * this file */ + +:host(:is(.anonymous-content-host, notification-message)), +: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: var(--box-background-color); + --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-warning-icon-color: #ffa436; + --in-content-success-icon-color: #2ac3a2; + --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); + --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); + + --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); + + -moz-theme: non-native; + accent-color: var(--in-content-accent-color); + color-scheme: light dark; +} + +@media (prefers-color-scheme: dark) { + :host(:is(.anonymous-content-host, notification-message)), + :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-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-warning-icon-color: #ffbd4f; + --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] { + --in-content-page-background: #42414d; + } + } +} + +@media (prefers-contrast) { + :host(:is(.anonymous-content-host, notification-message)), + :root { + --in-content-page-color: CanvasText; + --in-content-page-background: Canvas; + + --in-content-box-background-odd: var(--in-content-box-background); + --in-content-box-border-color: -moz-DialogText; + --in-content-box-info-background: var(--in-content-box-background); + + --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: var(--border-color); + + --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; + } +} + +:root { + appearance: none; + background-color: var(--in-content-page-background); + color: var(--in-content-page-color); +} + +:root:not(.system-font-size) { + font-size: var(--font-size-root); +} + +html|body { + margin: 0; +} + +html|hr { + border-style: solid none none none; + border-color: var(--in-content-border-color); +} + +.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; + line-height: var(--button-line-height); +} + +/* xul buttons and menulists */ + +button, +html|select, +html|input[type="color"], +xul|menulist { + appearance: none; + min-height: var(--button-min-height); + 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; + line-height: var(--button-line-height); + padding: .45em 1em; + 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: var(--button-font-weight); +} + +/* Small buttons get sized to 6/12px padding (when adding the 1px border) */ +button.small-button { + padding: .25em 1em; + font-size: var(--font-size-small); + min-height: 28px; +} + +/* Remove margin added by button.css */ +xul|button > .button-box > .button-text { + margin: 0; +} + +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:where([type="color"]):focus-visible, +xul|menulist:focus-visible, +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]) { + /* 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. + * + * [------|---|---label---|dropmarker|----|------] + * 15px 3px 12px 4px 15px + * start-padding background- end-padding + * image-width + * + * Users of this element can change the variable --logical-padding. Other + * variables should adjust automatically. + */ + --logical-padding: 15px; + --start-padding: calc(var(--logical-padding) + 3px); + --end-padding: calc(var(--logical-padding) + 4px); + --background-image-width: 12px; + background-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + background-position: right var(--end-padding) center; + background-repeat: no-repeat; + background-size: auto var(--background-image-width); + -moz-context-properties: fill; + fill: currentColor; + font: inherit; + font-weight: 600; + + /* See above for some explanation about these values. */ + padding-inline-start: var(--start-padding); + padding-inline-end: calc(var(--background-image-width) + var(--end-padding)); + text-overflow: ellipsis; +} + +html|select:not([size], [multiple]):dir(rtl) { + background-position-x: left var(--end-padding); +} + +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 > 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:where([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: var(--input-text-min-height); + padding-inline: 8px; +} + +html|input:where([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), +html|textarea { + box-sizing: border-box; + font-family: inherit; + font-size: inherit; + line-height: var(--input-text-line-height); + padding: .45em; + margin: 2px 4px; + min-height: var(--input-text-min-height); +} + +html|input:where([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:where([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):user-invalid, +html|textarea:user-invalid { + border-color: transparent; + outline: 2px solid var(--in-content-border-invalid); + outline-offset: -1px; /* Prevents antialising around the corners */ +} + +html|input:where([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 { + cursor: pointer; + color: var(--link-color); +} + +html|a:visited { + color: var(--link-color-visited); +} + +html|a:hover, +.text-link:hover, +button.text-link:is(:not([disabled="true"]), :enabled):hover { + color: var(--link-color-hover); +} + +html|a:hover:active, +.text-link:hover:active, +button.text-link:is(:not([disabled="true"]), :enabled):hover:active { + color: var(--link-color-active); + text-decoration: none; +} + +html|a:focus-visible, +.text-link:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--link-focus-outline-offset); + 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|*.radio-check, +xul|*.checkbox-check, +html|input:where([type="checkbox"], [type="radio"]) { + /* TODO Bug 1876537: Make this em-based, probably? */ + height: 16px; + width: 16px; + padding: 0; + margin-block: var(--space-xxsmall); + margin-inline: 0 var(--checkbox-margin-inline); + flex-shrink: 0; /* avoid shrinking inside flex container */ +} + +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; +} + +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; +} + +xul|checkbox[disabled="true"] > .checkbox-label-box, +xul|radio[disabled="true"] > .radio-label-box, +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 { + 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 { + content: 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 { + content: 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..6b9d5bcd70 --- /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.2rem; + -moz-context-properties: fill; + fill: currentColor; +} + +.title:-moz-locale-dir(rtl), +.title:dir(rtl) { + background-position: right 0; +} + +.title-text { + font-size: 2.2rem; + 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..c50ccda9a3 --- /dev/null +++ b/toolkit/themes/shared/media/videocontrols.css @@ -0,0 +1,591 @@ +/* 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 (prefers-contrast) { + .controlsSpacer, + .clickToPlay { + background-color: transparent; + } +} + +.a11y-only { + position: absolute; + left: -10000px; + width: 100px; + height: 100px; +} + +:host::cue { + font-size: var(--cue-font-size); + writing-mode: var(--cue-writing-mode, inherit); +} diff --git a/toolkit/themes/shared/menu-shared.css b/toolkit/themes/shared/menu-shared.css new file mode 100644 index 0000000000..40b4fdd66c --- /dev/null +++ b/toolkit/themes/shared/menu-shared.css @@ -0,0 +1,168 @@ +/* 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"); + +*|*:root { + --menu-icon-opacity: 1; + --menu-arrow-width: 1em; + + @media (-moz-platform: windows) { + --menu-arrow-width: max(1em, 16px); + + @media (prefers-color-scheme: light) { + --menu-icon-opacity: 0.7; + } + } +} + +/* Menu separator */ + +menuseparator { + /* Using padding instead of margin to increase the hit area, as some + separators (e.g. in bookmarks menus) can be dragged or have a context + menu. */ + padding-block: 4px; + + @media (-moz-platform: macos) { + padding-block: 5px; + margin-inline: 9px; + } +} + +menuseparator::before { + border-top: 1px solid var(--panel-separator-color); + content: ""; + display: block; + flex: 1; +} + +/* Accel text */ + +@media not (prefers-contrast) { + menuitem:not([disabled]) > .menu-accel-container > :is(.menu-accel, .menu-iconic-accel) { + color: var(--panel-disabled-color); + } +} + +/* 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; +} + +@media (-moz-platform: windows) or (-moz-platform: linux) { + menupopup, + menubar { + font: menu; + } +} + +@media (-moz-platform: macos) { + menupopup { + /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ + font: -moz-pull-down-menu; + } +} + +menu, +menuitem, +menucaption { + border-radius: calc(var(--panel-border-radius) / 2); + align-items: center; + flex-shrink: 0; + list-style-image: none; + max-width: 42em; + + @media (-moz-platform: linux) { + padding: 4px 6px; + } + + @media (-moz-platform: macos) { + padding: 3px 9px; + } +} + +menu, +menuitem { + &:where([disabled="true"]) { + color: var(--panel-disabled-color); + text-shadow: none; + } + + &:where([_moz-menuactive]:not([disabled="true"])) { + color: -moz-menuhovertext; + background-color: -moz-menuhover; + } + + &:where([_moz-menuactive="true"][disabled="true"]) { + background-color: -moz-menuhoverdisabled; + } +} + +menuitem:is([default="true"], .spell-suggestion), +menucaption { + font-weight: bold; +} + +/* ..... menu arrow box ..... */ + +.menu-right { + list-style-image: url("chrome://global/skin/icons/arrow-right.svg"); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: var(--menu-icon-opacity); + + &:-moz-locale-dir(rtl) { + list-style-image: url("chrome://global/skin/icons/arrow-left.svg"); + } + + > image { + width: var(--menu-arrow-width); + } + + @media (-moz-platform: linux) { + margin-block: 0; + margin-inline: 6px 0; + } + + @media (-moz-platform: macos) { + margin-inline: 22px -3px; + } + + @media (-moz-platform: windows) { + margin-inline-end: 1em; + } +} + +@media (-moz-platform: macos) { + :is(.menu-accel, .menu-iconic-accel)[value] { + margin-inline-start: 25px; + } +} diff --git a/toolkit/themes/shared/menulist-shared.css b/toolkit/themes/shared/menulist-shared.css new file mode 100644 index 0000000000..fa7e68c7b7 --- /dev/null +++ b/toolkit/themes/shared/menulist-shared.css @@ -0,0 +1,79 @@ +/* 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([native]) { + appearance: auto; + -moz-default-appearance: menulist; + text-shadow: none; +} + +:host([native][disabled="true"]) { + color: GrayText; +} + +: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; + align-items: center; + justify-content: center; + + :host(:not([native])) & { + font-weight: 600; + } +} + +dropmarker { + pointer-events: none; + flex: 0; + + :host(:not([native])) & { + display: flex; + appearance: none; + content: url(chrome://global/skin/icons/arrow-down-12.svg); + -moz-context-properties: fill; + fill: currentColor; + } +} + +:host(:not([highlightable])) #highlightable-label, +:host([highlightable]) #label { + display: none; +} + +label { + margin: 0 3px; +} 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..83d93ff3da --- /dev/null +++ b/toolkit/themes/shared/mozapps.inc.mn @@ -0,0 +1,32 @@ +# 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/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..f29d68e429 --- /dev/null +++ b/toolkit/themes/shared/pictureinpicture/player.css @@ -0,0 +1,729 @@ +/* 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; +} + +.seethrough-mode { + background: transparent; + + .player-holder { + will-change: opacity, filter; + transition: opacity 160ms linear, filter 160ms linear; + + body:hover:not(:fullscreen) & { + opacity: 0.35; + filter: blur(8px); + } + } +} + +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: 1fr 2fr 1fr 1fr; + grid-template-areas: "audio audio-scrubber 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, +.control-item:hover { + opacity: 1; +} + +/* Background gradient is the only control item with a fixed opacity value. */ +#controls[keying] #controls-bottom-gradient, +#controls[showing] #controls-bottom-gradient, +#controls-bottom-gradient:hover { + 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; +} + +#audio-scrubber { + grid-area: audio-scrubber; + align-self: center; + width: 64px; + background-color: transparent; + padding: 6px 2px; + margin: 0; +} + +#audio-scrubber::-moz-range-thumb { + border-radius: 8px; + background-color: #FFFFFF; + position: relative; + width: 8px; + height: 8px; + bottom: 24px; + padding: 0; +} + +#audio-scrubber::-moz-range-track { + background-color: #969696; +} + +#audio-scrubber::-moz-range-progress { + background-color: #FFFFFF; +} + +#audio-scrubber, +#audio-scrubber::-moz-range-track, +#audio-scrubber::-moz-range-progress { + height: 2px; + border-radius: 10px; +} + +#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 2px; +} + +#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 (width <= 630px) { + #audio-scrubber { + display: none; + } + + .end-controls { + grid-template-columns: repeat(3, 1fr); + grid-template-areas: "audio closedcaption fullscreen"; + } +} + +@media (width <= 475px) { + #closed-caption { + display: none; + } + + .end-controls { + grid-template-columns: repeat(2, 1fr); + grid-template-areas: "audio fullscreen"; + } +} + +@media (height <= 325px) and (width > 630px) { + #closed-caption { + display: none; + } + + .end-controls { + grid-template-columns: 1fr 2fr 1fr; + grid-template-areas: "audio audio-scrubber fullscreen"; + } +} + +@media (height <= 325px) and (width <= 630px) { + #closed-caption, + #audio-scrubber { + 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/popup.css b/toolkit/themes/shared/popup.css new file mode 100644 index 0000000000..ddc41a66ed --- /dev/null +++ b/toolkit/themes/shared/popup.css @@ -0,0 +1,131 @@ +/* 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"); + +/* ::::: menupopup ::::: */ + +menupopup, +panel { + /* We can always render in the preferred color scheme (unless otherwise + * overridden). */ + color-scheme: light dark; + + min-width: 1px; + --panel-background: Menu; + --panel-color: MenuText; + --panel-padding-block: 4px; + --panel-padding: var(--panel-padding-block) 0; + --panel-border-radius: 4px; + --panel-border-color: ThreeDShadow; + --panel-width: initial; + + --panel-shadow-margin: 0px; + --panel-shadow: 0 0 var(--panel-shadow-margin) hsla(0,0%,0%,.2); + -moz-window-input-region-margin: var(--panel-shadow-margin); + margin: calc(-1 * var(--panel-shadow-margin)); + + /* Panel design token theming */ + --color-canvas: var(--panel-background); + + @media (-moz-platform: linux) { + --panel-border-radius: 8px; + --panel-padding-block: 3px; + + @media (prefers-contrast) { + --panel-border-color: color-mix(in srgb, currentColor 60%, transparent); + } + } + + @media (-moz-platform: linux) or (-moz-platform: windows) { + /* To account for the box-shadow below */ + --panel-shadow-margin: 4px; + } + + @media (-moz-platform: macos) { + appearance: auto; + -moz-default-appearance: menupopup; + /* We set the default background here, rather than on ::part(content), + * because otherwise it'd interfere with the native look. Non-native-looking + * popups should get their background via --panel-background */ + background-color: Menu; + --panel-background: none; + --panel-border-color: transparent; + /* This should be kept in sync with GetMenuMaskImage() */ + --panel-border-radius: 6px; + } + + &::part(content) { + display: flex; + box-sizing: border-box; + + padding: var(--panel-padding); + color: var(--panel-color); + background: var(--panel-background); + border-radius: var(--panel-border-radius); + border: 1px solid var(--panel-border-color); + width: var(--panel-width); + box-shadow: var(--panel-shadow); + margin: var(--panel-shadow-margin); + + min-width: 0; + min-height: 0; + + /* Makes popup constraints work. Round up to avoid subpixel rounding + * causing overflow, see bug 1846050 */ + max-height: round(up, 100% - 2 * var(--panel-shadow-margin), 1px); + max-width: round(up, 100% - 2 * var(--panel-shadow-margin), 1px); + + overflow: clip; /* Don't let panel content overflow the border */ + } + + &[orient=vertical]::part(content) { + flex-direction: column; + } + + /* ::::: arrow panel ::::: */ + + &:where([type="arrow"]) { + appearance: none; + background-color: transparent; + + &.panel-no-padding::part(content) { + padding: 0; + } + } +} + +menupopup { + /* Also apply the padding in the inline axis for menus */ + --panel-padding: var(--panel-padding-block); + + @media (-moz-platform: windows) { + > menu, + > menuitem { + padding-block: 0.5em; + padding-inline-start: 1em; + } + } + + > menu > menupopup { + /* Vertically align nested menupopups: the shadow plus the top padding plus top border */ + margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--panel-padding-block) + 1px)); + } +} + +/* Rules for popups associated with menulists */ +menulist > menupopup { + min-width: 0; + + @media (-moz-platform: windows) { + font: inherit; + } + + @media (-moz-platform: macos) { + &:not([position]) { + margin-inline-start: -13px; + margin-top: -1px; + } + } +} diff --git a/toolkit/themes/shared/popupnotification.css b/toolkit/themes/shared/popupnotification.css new file mode 100644 index 0000000000..6b795bfdd5 --- /dev/null +++ b/toolkit/themes/shared/popupnotification.css @@ -0,0 +1,132 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +.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; +} + +.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 { + appearance: none; + display: flex; + content: 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/radio.css b/toolkit/themes/shared/radio.css new file mode 100644 index 0000000000..b086ae7c3f --- /dev/null +++ b/toolkit/themes/shared/radio.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/. */ + +/* ===== radio.css =================================================== + == Styles used by the XUL radio element. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* ::::: radio ::::: */ + +radio { + align-items: center; + margin: 2px 4px; + + @media (-moz-platform: windows) { + padding-block: 1px; + padding-inline: 4px 2px; + } + + &[disabled="true"] { + color: GrayText; + } +} + +.radio-label { + margin: 0; +} + +.radio-check { + appearance: auto; + -moz-default-appearance: radio; + margin: 1px 0; + + radiogroup:focus-visible > radio[focused] > & { + outline-style: auto; + } + + @media (-moz-platform: windows) { + width: 13px; + height: 13px; + } + + @media (-moz-platform: linux) { + margin: 2px; + } + + @media (-moz-platform: macos) { + width: 1.3em; + height: 1.3em; + margin: 0 1px 1px; + /* vertical-align tells native theming where to snap to. However, this + * doesn't always work reliably because of bug 503833. */ + vertical-align: bottom; + } +} + +@media (-moz-platform: windows) or (-moz-platform: linux) { + radiogroup:focus-visible > radio[focused="true"] > .radio-label-box { + outline: var(--focus-outline); + } + + .radio-icon[src] { + margin-inline-end: 2px; + } +} + +@media (-moz-platform: windows) { + .radio-label-box { + margin-inline-start: 2px; + padding-bottom: 1px; + padding-inline-start: 1px; + } +} + +@media (-moz-platform: macos) { + .radio-label, + radiogroup { + margin: 1px 0; + } + + .radio-icon { + margin-inline-end: 2px; + } +} 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-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/splitter.css b/toolkit/themes/shared/splitter.css new file mode 100644 index 0000000000..7167c759bd --- /dev/null +++ b/toolkit/themes/shared/splitter.css @@ -0,0 +1,75 @@ +/* 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/. */ + +/* ===== splitter.css =================================================== + == Styles used by the XUL splitter element. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* ::::: splitter (vertical) ::::: */ + +splitter { + align-items: center; + justify-content: center; + cursor: ew-resize; + + @media (-moz-platform: linux) { + appearance: auto; + -moz-default-appearance: splitter; + } + @media (-moz-platform: macos) { + min-width: 9px; + min-height: 9px; + } + @media (-moz-platform: windows) { + border-width: 0 1px; + border-style: solid; + border-inline-start-color: ThreeDHighlight; + border-inline-end-color: ThreeDShadow; + min-width: 6px; + background-color: ThreeDFace; + } +} + +splitter[state="collapsed"][collapse="before"], +splitter[state="collapsed"][substate="before"], +splitter[state="collapsed"][collapse="after"]:-moz-locale-dir(rtl), +splitter[state="collapsed"][substate="after"]:-moz-locale-dir(rtl) { + cursor: e-resize; +} + +splitter[state="collapsed"][collapse="after"], +splitter[state="collapsed"][substate="after"], +splitter[state="collapsed"][collapse="before"]:-moz-locale-dir(rtl), +splitter[state="collapsed"][substate="before"]:-moz-locale-dir(rtl) { + cursor: w-resize; +} + +/* ::::: splitter (horizontal) ::::: */ + +splitter[orient="vertical"] { + cursor: ns-resize; + + @media (-moz-platform: windows) { + border-width: 1px 0; + border-top-color: ThreeDHighlight; + border-bottom-color: ThreeDShadow; + min-height: 6px; + } +} + +splitter[orient="vertical"][state="collapsed"][collapse="before"], +splitter[orient="vertical"][state="collapsed"][substate="before"] { + cursor: s-resize; +} + +splitter[orient="vertical"][state="collapsed"][collapse="after"], +splitter[orient="vertical"][state="collapsed"][substate="after"] { + cursor: n-resize; +} + +splitter[disabled="true"] { + cursor: default !important; +} diff --git a/toolkit/themes/shared/toolbarbutton.css b/toolkit/themes/shared/toolbarbutton.css new file mode 100644 index 0000000000..5bcb9ecb7d --- /dev/null +++ b/toolkit/themes/shared/toolbarbutton.css @@ -0,0 +1,106 @@ +/* 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/. */ + +toolbarbutton { + appearance: auto; + -moz-default-appearance: toolbarbutton; + background-color: transparent; + margin: 0; + padding: 3px; + + @media (-moz-platform: macos) { + appearance: none; + margin-inline: 2px; + padding-inline: 2px; + } + + @media (-moz-platform: windows) { + &:focus-visible { + outline: var(--default-focusring); + outline-offset: calc(-1 * var(--default-focusring-width) - 1px); + } + } + + @media (-moz-platform: linux) { + &:where(:hover) { + color: -moz-buttonhovertext; + } + &:where([checked="true"], :hover:active, [open="true"]) { + color: ButtonText; + } + } + + &:where([disabled="true"]) { + color: GrayText; + text-shadow: none; + } +} + +.toolbarbutton-text { + margin: 0; + padding: 0; + vertical-align: middle; +} + +/* ::::: toolbarbutton menu ::::: */ + +.toolbarbutton-menu-dropmarker, +.toolbarbutton-combined-buttons-dropmarker { + appearance: none; + -moz-context-properties: fill; + fill: currentColor; +} + +.toolbarbutton-menu-dropmarker { + content: url("chrome://global/skin/icons/arrow-down-12.svg"); +} + +.toolbarbutton-combined-buttons-dropmarker { + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); +} + +/* ::::: toolbarbutton badged ::::: */ + +.toolbarbutton-badge { + box-sizing: border-box; + overflow: hidden; + white-space: nowrap; + background-color: #d90000; + font-size: 10px; + padding: 0 2px 1px; + color: #fff; + text-shadow: none; + border-radius: 2px; + box-shadow: 0 1px 0 hsla(0, 100%, 100%, .2) inset, + 0 -1px 0 hsla(0, 0%, 0%, .1) inset, + 0 1px 0 hsla(206, 50%, 10%, .2); + margin: -5px 0 0 !important; + margin-inline-end: -4px !important; + min-width: 14px; + max-width: 20px; + line-height: 10px; + text-align: center; + align-self: start; + justify-self: end; + + @media (-moz-platform: windows) { + font-weight: bold; + } + @media (-moz-platform: macos) { + font-size: 9px; + padding-top: 1px; + } +} + +@media not (-moz-platform: macos) { + .toolbarbutton-badge-stack > .toolbarbutton-icon[label]:not([label=""]) { + margin-inline-end: 0; + } +} + +@media (-moz-platform: macos) { + toolbar[mode="icons"] > *|* > .toolbarbutton-badge { + margin-inline-end: -10px !important; + } +} diff --git a/toolkit/themes/shared/tree.css b/toolkit/themes/shared/tree.css new file mode 100644 index 0000000000..9c56af4db4 --- /dev/null +++ b/toolkit/themes/shared/tree.css @@ -0,0 +1,281 @@ +/* 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; + @media (-moz-platform: linux) { + appearance: none; + border: 1px solid ThreeDShadow; + } +} + +/* ::::: 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 not (prefers-contrast) { + 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; + background-color: -moz-ColHeader; + color: -moz-ColHeaderText; + align-items: center; + justify-content: center; + padding: 0 4px; + margin: 0; + border-inline-start: 1px solid ThreeDLightShadow; + + @media (-moz-platform: linux) or ((-moz-platform: windows) and (prefers-color-scheme: dark)) { + appearance: none; + box-shadow: inset 0 -1px ThreeDLightShadow; + } + + &:where(:hover) { + background-color: -moz-ColHeaderHover; + color: -moz-ColHeaderHoverText; + } + &:where(:hover:active) { + background-color: -moz-ColHeaderActive; + color: -moz-ColHeaderActiveText; + } +} + +.treecol-text { + margin: 0 !important; +} + +treecol:where([ordinal="1"]) { + border-inline-start: none; +} + +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 not (-moz-platform: macos) { + /* ::::: sort direction indicator ::::: */ + .treecol-sortdirection { + list-style-image: url("chrome://global/skin/tree/sort-asc.svg"); + -moz-context-properties: fill; + fill: currentColor; + visibility: hidden; + + treecol[sortDirection="ascending"]:not([hideheader="true"]) > & { + visibility: inherit; + } + + treecol[sortDirection="descending"]:not([hideheader="true"]) > & { + visibility: inherit; + list-style-image: url("chrome://global/skin/tree/sort-dsc.svg"); + } + } +} + +@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; + } +} -- cgit v1.2.3