From 43a97878ce14b72f0981164f87f2e35e14151312 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 7 Apr 2024 11:22:09 +0200 Subject: Adding upstream version 110.0.1. Signed-off-by: Daniel Baumann --- browser/themes/BuiltInThemeConfig.sys.mjs | 552 ++++++ browser/themes/BuiltInThemes.sys.mjs | 325 ++++ browser/themes/LICENSE | 2 + browser/themes/ThemeVariableMap.sys.mjs | 190 ++ browser/themes/Windows8WindowFrameColor.sys.mjs | 55 + .../addons/alpenglow/background-gradient-dark.svg | 4 + .../addons/alpenglow/background-gradient.svg | 4 + .../alpenglow/background-noodles-left-dark.svg | 4 + .../addons/alpenglow/background-noodles-left.svg | 4 + .../alpenglow/background-noodles-right-dark.svg | 4 + .../addons/alpenglow/background-noodles-right.svg | 4 + browser/themes/addons/alpenglow/icon.svg | 13 + browser/themes/addons/alpenglow/manifest.json | 139 ++ browser/themes/addons/alpenglow/preview.svg | 4 + .../2021-life-in-color/abstract/balanced/icon.svg | 12 + .../abstract/balanced/manifest.json | 76 + .../abstract/balanced/preview.svg | 36 + .../2021-life-in-color/abstract/bold/icon.svg | 12 + .../2021-life-in-color/abstract/bold/manifest.json | 76 + .../2021-life-in-color/abstract/bold/preview.svg | 18 + .../2021-life-in-color/abstract/soft/icon.svg | 12 + .../2021-life-in-color/abstract/soft/manifest.json | 76 + .../2021-life-in-color/abstract/soft/preview.svg | 36 + .../2021-life-in-color/cheers/balanced/icon.svg | 12 + .../cheers/balanced/manifest.json | 76 + .../2021-life-in-color/cheers/balanced/preview.svg | 36 + .../2021-life-in-color/cheers/bold/icon.svg | 12 + .../2021-life-in-color/cheers/bold/manifest.json | 76 + .../2021-life-in-color/cheers/bold/preview.svg | 18 + .../2021-life-in-color/cheers/soft/icon.svg | 12 + .../2021-life-in-color/cheers/soft/manifest.json | 76 + .../2021-life-in-color/cheers/soft/preview.svg | 36 + .../2021-life-in-color/elemental/balanced/icon.svg | 12 + .../elemental/balanced/manifest.json | 76 + .../elemental/balanced/preview.svg | 36 + .../2021-life-in-color/elemental/bold/icon.svg | 12 + .../elemental/bold/manifest.json | 76 + .../2021-life-in-color/elemental/bold/preview.svg | 18 + .../2021-life-in-color/elemental/soft/icon.svg | 12 + .../elemental/soft/manifest.json | 76 + .../2021-life-in-color/elemental/soft/preview.svg | 36 + .../2021-life-in-color/foto/balanced/icon.svg | 12 + .../2021-life-in-color/foto/balanced/manifest.json | 76 + .../2021-life-in-color/foto/balanced/preview.svg | 36 + .../2021-life-in-color/foto/bold/icon.svg | 12 + .../2021-life-in-color/foto/bold/manifest.json | 76 + .../2021-life-in-color/foto/bold/preview.svg | 18 + .../2021-life-in-color/foto/soft/icon.svg | 12 + .../2021-life-in-color/foto/soft/manifest.json | 76 + .../2021-life-in-color/foto/soft/preview.svg | 36 + .../2021-life-in-color/graffiti/balanced/icon.svg | 12 + .../graffiti/balanced/manifest.json | 76 + .../graffiti/balanced/preview.svg | 36 + .../2021-life-in-color/graffiti/bold/icon.svg | 12 + .../2021-life-in-color/graffiti/bold/manifest.json | 76 + .../2021-life-in-color/graffiti/bold/preview.svg | 18 + .../2021-life-in-color/graffiti/soft/icon.svg | 12 + .../2021-life-in-color/graffiti/soft/manifest.json | 76 + .../2021-life-in-color/graffiti/soft/preview.svg | 36 + .../2021-life-in-color/lush/balanced/icon.svg | 12 + .../2021-life-in-color/lush/balanced/manifest.json | 76 + .../2021-life-in-color/lush/balanced/preview.svg | 36 + .../2021-life-in-color/lush/bold/icon.svg | 12 + .../2021-life-in-color/lush/bold/manifest.json | 76 + .../2021-life-in-color/lush/bold/preview.svg | 18 + .../2021-life-in-color/lush/soft/icon.svg | 12 + .../2021-life-in-color/lush/soft/manifest.json | 76 + .../2021-life-in-color/lush/soft/preview.svg | 36 + .../activist/balanced/icon.svg | 12 + .../activist/balanced/manifest.json | 78 + .../activist/balanced/preview.svg | 36 + .../2022-independent-voices/activist/bold/icon.svg | 12 + .../activist/bold/manifest.json | 74 + .../activist/bold/preview.svg | 18 + .../2022-independent-voices/activist/soft/icon.svg | 12 + .../activist/soft/manifest.json | 76 + .../activist/soft/preview.svg | 36 + .../dreamer/balanced/icon.svg | 12 + .../dreamer/balanced/manifest.json | 78 + .../dreamer/balanced/preview.svg | 36 + .../2022-independent-voices/dreamer/bold/icon.svg | 12 + .../dreamer/bold/manifest.json | 74 + .../dreamer/bold/preview.svg | 18 + .../2022-independent-voices/dreamer/soft/icon.svg | 12 + .../dreamer/soft/manifest.json | 76 + .../dreamer/soft/preview.svg | 36 + .../expressionist/balanced/icon.svg | 12 + .../expressionist/balanced/manifest.json | 76 + .../expressionist/balanced/preview.svg | 36 + .../expressionist/bold/icon.svg | 12 + .../expressionist/bold/manifest.json | 76 + .../expressionist/bold/preview.svg | 18 + .../expressionist/soft/icon.svg | 12 + .../expressionist/soft/manifest.json | 76 + .../expressionist/soft/preview.svg | 36 + .../innovator/balanced/icon.svg | 12 + .../innovator/balanced/manifest.json | 76 + .../innovator/balanced/preview.svg | 36 + .../innovator/bold/icon.svg | 12 + .../innovator/bold/manifest.json | 76 + .../innovator/bold/preview.svg | 18 + .../innovator/soft/icon.svg | 12 + .../innovator/soft/manifest.json | 76 + .../innovator/soft/preview.svg | 36 + .../playmaker/balanced/icon.svg | 12 + .../playmaker/balanced/manifest.json | 74 + .../playmaker/balanced/preview.svg | 36 + .../playmaker/bold/icon.svg | 12 + .../playmaker/bold/manifest.json | 76 + .../playmaker/bold/preview.svg | 18 + .../playmaker/soft/icon.svg | 12 + .../playmaker/soft/manifest.json | 76 + .../playmaker/soft/preview.svg | 36 + .../visionary/balanced/icon.svg | 12 + .../visionary/balanced/manifest.json | 76 + .../visionary/balanced/preview.svg | 36 + .../visionary/bold/icon.svg | 12 + .../visionary/bold/manifest.json | 76 + .../visionary/bold/preview.svg | 18 + .../visionary/soft/icon.svg | 12 + .../visionary/soft/manifest.json | 76 + .../visionary/soft/preview.svg | 36 + .../colorways/2022-true-colors/blue/icon.svg | 12 + .../colorways/2022-true-colors/blue/manifest.json | 76 + .../colorways/2022-true-colors/blue/preview.svg | 36 + .../colorways/2022-true-colors/green/icon.svg | 12 + .../colorways/2022-true-colors/green/manifest.json | 76 + .../colorways/2022-true-colors/green/preview.svg | 36 + .../colorways/2022-true-colors/orange/icon.svg | 12 + .../2022-true-colors/orange/manifest.json | 76 + .../colorways/2022-true-colors/orange/preview.svg | 36 + .../colorways/2022-true-colors/purple/icon.svg | 12 + .../2022-true-colors/purple/manifest.json | 76 + .../colorways/2022-true-colors/purple/preview.svg | 36 + .../addons/colorways/2022-true-colors/red/icon.svg | 12 + .../colorways/2022-true-colors/red/manifest.json | 76 + .../colorways/2022-true-colors/red/preview.svg | 36 + .../colorways/2022-true-colors/yellow/icon.svg | 12 + .../2022-true-colors/yellow/manifest.json | 76 + .../colorways/2022-true-colors/yellow/preview.svg | 36 + browser/themes/addons/dark/experiment.css | 6 + browser/themes/addons/dark/icon.svg | 12 + browser/themes/addons/dark/manifest.json | 97 + browser/themes/addons/dark/preview.svg | 18 + browser/themes/addons/jar.mn | 102 + browser/themes/addons/light/experiment.css | 6 + browser/themes/addons/light/icon.svg | 12 + browser/themes/addons/light/manifest.json | 98 + browser/themes/addons/light/preview.svg | 36 + browser/themes/addons/moz.build | 7 + browser/themes/linux/browser.css | 447 +++++ browser/themes/linux/customizableui/panelUI.css | 14 + .../themes/linux/downloads/allDownloadsView.css | 5 + browser/themes/linux/downloads/downloads.css | 14 + browser/themes/linux/jar.mn | 27 + browser/themes/linux/monitor-base.png | Bin 0 -> 1087 bytes browser/themes/linux/monitor-border.png | Bin 0 -> 3268 bytes browser/themes/linux/moz.build | 9 + browser/themes/linux/pageInfo.css | 151 ++ browser/themes/linux/pageInfo.png | Bin 0 -> 8438 bytes browser/themes/linux/places/organizer.css | 152 ++ browser/themes/linux/preferences/alwaysAsk.png | Bin 0 -> 375 bytes browser/themes/linux/preferences/applications.css | 43 + browser/themes/linux/sanitizeDialog.css | 16 + browser/themes/linux/window-controls/close.svg | 6 + browser/themes/linux/window-controls/minimize.svg | 6 + browser/themes/linux/window-controls/restore.svg | 7 + browser/themes/moz.build | 50 + browser/themes/osx/browser.css | 458 +++++ browser/themes/osx/customizableui/panelUI.css | 67 + browser/themes/osx/downloads/allDownloadsView.css | 15 + browser/themes/osx/downloads/downloads.css | 12 + browser/themes/osx/jar.mn | 25 + browser/themes/osx/monitor-base.png | Bin 0 -> 1656 bytes browser/themes/osx/monitor-border.png | Bin 0 -> 4125 bytes browser/themes/osx/moz.build | 7 + browser/themes/osx/pageInfo.css | 137 ++ browser/themes/osx/places/organizer.css | 230 +++ browser/themes/osx/preferences/alwaysAsk.png | Bin 0 -> 502 bytes browser/themes/osx/preferences/application.png | Bin 0 -> 699 bytes browser/themes/osx/preferences/applications.css | 61 + browser/themes/osx/preferences/saveFile.png | Bin 0 -> 446 bytes browser/themes/osx/sanitizeDialog.css | 12 + browser/themes/osx/share.svg | 7 + .../swipe-gesture-icons/history-swipe-arrow.svg | 7 + browser/themes/shared/UITour.css | 154 ++ browser/themes/shared/aboutFrameCrashed.css | 12 + browser/themes/shared/aboutRestartRequired.css | 19 + browser/themes/shared/aboutSessionRestore.css | 55 + browser/themes/shared/aboutTabCrashed.css | 40 + browser/themes/shared/aboutWelcomeBack.css | 15 + browser/themes/shared/addon-notification.css | 54 + .../themes/shared/addons/addon-install-blocked.svg | 37 + .../shared/addons/addon-install-downloading.svg | 37 + .../shared/addons/addon-install-installed.svg | 37 + .../themes/shared/addons/extension-controlled.css | 32 + .../themes/shared/addons/unified-extensions.css | 255 +++ .../themes/shared/app-marketplace-icons/LICENSE | 1 + .../shared/app-marketplace-icons/Makefile.in | 26 + .../shared/app-marketplace-icons/af/android.png | Bin 0 -> 4576 bytes .../shared/app-marketplace-icons/ar/android.png | Bin 0 -> 4737 bytes .../themes/shared/app-marketplace-icons/ar/ios.svg | 2 + .../shared/app-marketplace-icons/az/android.png | Bin 0 -> 4571 bytes .../themes/shared/app-marketplace-icons/az/ios.svg | 2 + .../shared/app-marketplace-icons/be/android.png | Bin 0 -> 4874 bytes .../shared/app-marketplace-icons/bg/android.png | Bin 0 -> 4845 bytes .../themes/shared/app-marketplace-icons/bg/ios.svg | 2 + .../shared/app-marketplace-icons/bn-BD/android.png | Bin 0 -> 4310 bytes .../shared/app-marketplace-icons/bn-IN/android.png | Bin 0 -> 4310 bytes .../shared/app-marketplace-icons/ca/android.png | Bin 0 -> 4814 bytes .../shared/app-marketplace-icons/cs/android.png | Bin 0 -> 4420 bytes .../themes/shared/app-marketplace-icons/cs/ios.svg | 2 + .../shared/app-marketplace-icons/da/android.png | Bin 0 -> 4257 bytes .../themes/shared/app-marketplace-icons/da/ios.svg | 2 + .../shared/app-marketplace-icons/de/android.png | Bin 0 -> 4430 bytes .../themes/shared/app-marketplace-icons/de/ios.svg | 2 + .../shared/app-marketplace-icons/el/android.png | Bin 0 -> 5095 bytes .../themes/shared/app-marketplace-icons/el/ios.svg | 2 + .../shared/app-marketplace-icons/en-US/android.png | Bin 0 -> 4441 bytes .../shared/app-marketplace-icons/en-US/ios.svg | 2 + .../shared/app-marketplace-icons/es-ES/android.png | Bin 0 -> 4942 bytes .../shared/app-marketplace-icons/es-ES/ios.svg | 2 + .../shared/app-marketplace-icons/et/android.png | Bin 0 -> 4772 bytes .../themes/shared/app-marketplace-icons/et/ios.svg | 2 + .../shared/app-marketplace-icons/eu/android.png | Bin 0 -> 4471 bytes .../shared/app-marketplace-icons/fa/android.png | Bin 0 -> 4404 bytes .../shared/app-marketplace-icons/fi/android.png | Bin 0 -> 4441 bytes .../themes/shared/app-marketplace-icons/fi/ios.svg | 2 + .../shared/app-marketplace-icons/fr/android.png | Bin 0 -> 5054 bytes .../themes/shared/app-marketplace-icons/fr/ios.svg | 2 + .../shared/app-marketplace-icons/gl/android.png | Bin 0 -> 4866 bytes .../shared/app-marketplace-icons/gu-IN/android.png | Bin 0 -> 4233 bytes .../shared/app-marketplace-icons/he/android.png | Bin 0 -> 4415 bytes .../themes/shared/app-marketplace-icons/he/ios.svg | 2 + .../shared/app-marketplace-icons/hi-IN/android.png | Bin 0 -> 4166 bytes .../shared/app-marketplace-icons/hr/android.png | Bin 0 -> 5103 bytes .../shared/app-marketplace-icons/hu/android.png | Bin 0 -> 4835 bytes .../themes/shared/app-marketplace-icons/hu/ios.svg | 2 + .../shared/app-marketplace-icons/hy-AM/android.png | Bin 0 -> 4886 bytes .../shared/app-marketplace-icons/id/android.png | Bin 0 -> 4631 bytes .../themes/shared/app-marketplace-icons/id/ios.svg | 2 + .../shared/app-marketplace-icons/is/android.png | Bin 0 -> 4648 bytes .../shared/app-marketplace-icons/it/android.png | Bin 0 -> 4911 bytes .../themes/shared/app-marketplace-icons/it/ios.svg | 2 + .../shared/app-marketplace-icons/ja/android.png | Bin 0 -> 4633 bytes .../themes/shared/app-marketplace-icons/ja/ios.svg | 2 + browser/themes/shared/app-marketplace-icons/jar.mn | 17 + .../shared/app-marketplace-icons/ka/android.png | Bin 0 -> 5162 bytes .../shared/app-marketplace-icons/kk/android.png | Bin 0 -> 5008 bytes .../shared/app-marketplace-icons/km/android.png | Bin 0 -> 5085 bytes .../shared/app-marketplace-icons/kn/android.png | Bin 0 -> 5339 bytes .../shared/app-marketplace-icons/ko/android.png | Bin 0 -> 4716 bytes .../themes/shared/app-marketplace-icons/ko/ios.svg | 2 + .../shared/app-marketplace-icons/lo/android.png | Bin 0 -> 5084 bytes .../shared/app-marketplace-icons/lt/android.png | Bin 0 -> 4432 bytes .../themes/shared/app-marketplace-icons/lt/ios.svg | 2 + .../shared/app-marketplace-icons/lv/android.png | Bin 0 -> 4588 bytes .../themes/shared/app-marketplace-icons/lv/ios.svg | 2 + .../shared/app-marketplace-icons/mk/android.png | Bin 0 -> 4798 bytes .../shared/app-marketplace-icons/ml/android.png | Bin 0 -> 5554 bytes .../themes/shared/app-marketplace-icons/moz.build | 7 + .../shared/app-marketplace-icons/mr/android.png | Bin 0 -> 4495 bytes .../shared/app-marketplace-icons/ms/android.png | Bin 0 -> 4729 bytes .../themes/shared/app-marketplace-icons/ms/ios.svg | 2 + .../themes/shared/app-marketplace-icons/mt/ios.svg | 2 + .../shared/app-marketplace-icons/my/android.png | Bin 0 -> 4970 bytes .../shared/app-marketplace-icons/nb-NO/android.png | Bin 0 -> 4934 bytes .../shared/app-marketplace-icons/nb-NO/ios.svg | 2 + .../shared/app-marketplace-icons/ne-NP/android.png | Bin 0 -> 4674 bytes .../shared/app-marketplace-icons/nl/android.png | Bin 0 -> 4852 bytes .../themes/shared/app-marketplace-icons/nl/ios.svg | 2 + .../shared/app-marketplace-icons/nn-NO/android.png | Bin 0 -> 4934 bytes .../shared/app-marketplace-icons/nn-NO/ios.svg | 2 + .../shared/app-marketplace-icons/pa-IN/android.png | Bin 0 -> 4856 bytes .../shared/app-marketplace-icons/pl/android.png | Bin 0 -> 4581 bytes .../themes/shared/app-marketplace-icons/pl/ios.svg | 2 + .../shared/app-marketplace-icons/pt-BR/android.png | Bin 0 -> 4907 bytes .../shared/app-marketplace-icons/pt-BR/ios.svg | 2 + .../shared/app-marketplace-icons/pt-PT/android.png | Bin 0 -> 4907 bytes .../shared/app-marketplace-icons/pt-PT/ios.svg | 2 + .../shared/app-marketplace-icons/ro/android.png | Bin 0 -> 4452 bytes .../themes/shared/app-marketplace-icons/ro/ios.svg | 2 + .../shared/app-marketplace-icons/ru/android.png | Bin 0 -> 4774 bytes .../themes/shared/app-marketplace-icons/ru/ios.svg | 2 + .../shared/app-marketplace-icons/si/android.png | Bin 0 -> 5401 bytes .../shared/app-marketplace-icons/sk/android.png | Bin 0 -> 4502 bytes .../themes/shared/app-marketplace-icons/sk/ios.svg | 2 + .../shared/app-marketplace-icons/sl/android.png | Bin 0 -> 4660 bytes .../themes/shared/app-marketplace-icons/sl/ios.svg | 2 + .../shared/app-marketplace-icons/sq/android.png | Bin 0 -> 4507 bytes .../shared/app-marketplace-icons/sr/android.png | Bin 0 -> 4799 bytes .../shared/app-marketplace-icons/sv-SE/android.png | Bin 0 -> 4909 bytes .../shared/app-marketplace-icons/sv-SE/ios.svg | 2 + .../shared/app-marketplace-icons/sw/android.png | Bin 0 -> 4824 bytes .../shared/app-marketplace-icons/ta/android.png | Bin 0 -> 4682 bytes .../shared/app-marketplace-icons/te/android.png | Bin 0 -> 4897 bytes .../shared/app-marketplace-icons/th/android.png | Bin 0 -> 5133 bytes .../themes/shared/app-marketplace-icons/th/ios.svg | 2 + .../shared/app-marketplace-icons/tr/android.png | Bin 0 -> 4263 bytes .../themes/shared/app-marketplace-icons/tr/ios.svg | 2 + .../shared/app-marketplace-icons/uk/android.png | Bin 0 -> 5065 bytes .../shared/app-marketplace-icons/ur/android.png | Bin 0 -> 4321 bytes .../shared/app-marketplace-icons/uz/android.png | Bin 0 -> 4505 bytes .../shared/app-marketplace-icons/vi/android.png | Bin 0 -> 5117 bytes .../themes/shared/app-marketplace-icons/vi/ios.svg | 2 + .../shared/app-marketplace-icons/zh-CN/android.png | Bin 0 -> 4962 bytes .../shared/app-marketplace-icons/zh-CN/ios.svg | 2 + .../shared/app-marketplace-icons/zh-TW/android.png | Bin 0 -> 4280 bytes .../shared/app-marketplace-icons/zh-TW/ios.svg | 2 + .../shared/app-marketplace-icons/zu/android.png | Bin 0 -> 4648 bytes browser/themes/shared/autocomplete.css | 167 ++ browser/themes/shared/blockedSite.css | 71 + browser/themes/shared/browser-custom-colors.css | 64 + browser/themes/shared/browser-shared.css | 897 +++++++++ browser/themes/shared/contextmenu.css | 59 + .../shared/controlcenter/3rdpartycookies.svg | 6 + .../themes/shared/controlcenter/cryptominers.svg | 6 + browser/themes/shared/controlcenter/dashboard.svg | 4 + .../themes/shared/controlcenter/etp-milestone.svg | 4 + .../controlcenter/hero-message-background.svg | 4 + .../themes/shared/controlcenter/mcb-disabled.svg | 7 + browser/themes/shared/controlcenter/panel.css | 825 ++++++++ .../shared/controlcenter/tracking-protection.svg | 6 + browser/themes/shared/ctrlTab.css | 123 ++ .../themes/shared/customizableui/customizeMode.css | 631 ++++++ .../shared/customizableui/density-compact.svg | 21 + .../shared/customizableui/density-normal.svg | 18 + .../themes/shared/customizableui/density-touch.svg | 14 + .../shared/customizableui/empty-overflow-panel.png | Bin 0 -> 13890 bytes .../customizableui/empty-overflow-panel@2x.png | Bin 0 -> 34090 bytes .../shared/customizableui/panelUI-shared.css | 2033 ++++++++++++++++++++ browser/themes/shared/customizableui/whimsy.png | Bin 0 -> 5990 bytes .../shared/downloads/allDownloadsView.inc.css | 98 + .../shared/downloads/contentAreaDownloadsView.css | 27 + .../shared/downloads/download-blockedStates.css | 62 + .../themes/shared/downloads/download-summary.svg | 11 + browser/themes/shared/downloads/downloads.inc.css | 271 +++ browser/themes/shared/downloads/downloads.svg | 7 + browser/themes/shared/downloads/indicator.css | 211 ++ .../downloads/notification-finish-animation.svg | 193 ++ .../downloads/notification-start-animation.svg | 144 ++ browser/themes/shared/downloads/progressmeter.css | 95 + browser/themes/shared/drm-icon.svg | 8 + browser/themes/shared/e10s-64@2x.png | Bin 0 -> 3785 bytes browser/themes/shared/fullscreen/warning.css | 50 + browser/themes/shared/fxa/add-device.svg | 4 + browser/themes/shared/fxa/avatar-color.svg | 11 + browser/themes/shared/fxa/avatar-empty.svg | 8 + browser/themes/shared/fxa/avatar.svg | 6 + browser/themes/shared/fxa/fxa-spinner.svg | 28 + browser/themes/shared/fxa/monitor.svg | 4 + browser/themes/shared/fxa/send-to-device.svg | 4 + browser/themes/shared/fxa/send.svg | 4 + browser/themes/shared/fxa/sync-devices.svg | 49 + .../themes/shared/fxa/sync-illustration-issue.svg | 52 + browser/themes/shared/fxa/sync-illustration.svg | 50 + browser/themes/shared/icons/add-circle-fill.svg | 7 + browser/themes/shared/icons/back.svg | 6 + browser/themes/shared/icons/bookmark-12.svg | 7 + browser/themes/shared/icons/bookmark-hollow.svg | 6 + .../themes/shared/icons/bookmark-star-on-tray.svg | 7 + browser/themes/shared/icons/bookmark.svg | 6 + browser/themes/shared/icons/bookmarks-toolbar.svg | 7 + browser/themes/shared/icons/canvas-blocked.svg | 8 + browser/themes/shared/icons/canvas.svg | 8 + browser/themes/shared/icons/characterEncoding.svg | 6 + browser/themes/shared/icons/chevron-animation.svg | 391 ++++ browser/themes/shared/icons/customize.svg | 6 + browser/themes/shared/icons/device-desktop.svg | 6 + browser/themes/shared/icons/device-phone.svg | 6 + browser/themes/shared/icons/device-tablet.svg | 6 + browser/themes/shared/icons/device-tv.svg | 6 + browser/themes/shared/icons/device-vr.svg | 7 + browser/themes/shared/icons/edit-cut.svg | 6 + browser/themes/shared/icons/edit-paste.svg | 6 + browser/themes/shared/icons/fingerprint.svg | 8 + browser/themes/shared/icons/forget.svg | 6 + browser/themes/shared/icons/forward.svg | 6 + browser/themes/shared/icons/fullscreen-exit.svg | 7 + browser/themes/shared/icons/fullscreen.svg | 6 + browser/themes/shared/icons/history.svg | 7 + browser/themes/shared/icons/home.svg | 6 + browser/themes/shared/icons/import-export.svg | 7 + browser/themes/shared/icons/import.svg | 7 + browser/themes/shared/icons/ion.svg | 4 + browser/themes/shared/icons/library.svg | 9 + browser/themes/shared/icons/login.svg | 6 + browser/themes/shared/icons/logo-android.svg | 6 + browser/themes/shared/icons/logo-ios.svg | 6 + browser/themes/shared/icons/mail.svg | 7 + browser/themes/shared/icons/menu-badged.svg | 8 + browser/themes/shared/icons/menu.svg | 8 + browser/themes/shared/icons/new-tab.svg | 6 + .../themes/shared/icons/notification-fill-12.svg | 6 + browser/themes/shared/icons/open.svg | 6 + browser/themes/shared/icons/pin-12.svg | 6 + browser/themes/shared/icons/privateBrowsing.svg | 6 + browser/themes/shared/icons/quickactions.svg | 6 + browser/themes/shared/icons/reader-mode.svg | 9 + browser/themes/shared/icons/reload-to-stop.svg | 138 ++ browser/themes/shared/icons/save.svg | 7 + browser/themes/shared/icons/screenshot.svg | 4 + browser/themes/shared/icons/sidebars-right.svg | 9 + browser/themes/shared/icons/sidebars.svg | 9 + browser/themes/shared/icons/sort.svg | 11 + browser/themes/shared/icons/stop-to-reload.svg | 173 ++ .../themes/shared/icons/subtract-circle-fill.svg | 7 + browser/themes/shared/icons/success-animation.svg | 107 ++ browser/themes/shared/icons/sync.svg | 7 + browser/themes/shared/icons/synced-tabs.svg | 12 + browser/themes/shared/icons/tab.svg | 6 + browser/themes/shared/icons/thumb-down.svg | 7 + browser/themes/shared/icons/topsites.svg | 9 + browser/themes/shared/icons/trending.svg | 6 + browser/themes/shared/icons/window.svg | 6 + browser/themes/shared/icons/zoom-out.svg | 6 + .../shared/identity-block/identity-block.css | 277 +++ .../themes/shared/identity-block/permissions.svg | 9 + .../tracking-protection-active-brighttext.svg | 12 + .../identity-block/tracking-protection-active.svg | 12 + .../tracking-protection-disabled.svg | 7 + .../shared/identity-block/tracking-protection.svg | 6 + .../shared/identity-credential-notification.css | 13 + .../themes/shared/incontent-icons/tab-crashed.svg | 13 + browser/themes/shared/jar.inc.mn | 279 +++ browser/themes/shared/light-dark-overrides.css | 110 ++ browser/themes/shared/menupanel.css | 27 + .../themes/shared/migration/migration-dialog.css | 9 + .../themes/shared/migration/migration-wizard.css | 29 + browser/themes/shared/notification-icons.css | 404 ++++ .../notification-icons/autoplay-media-blocked.svg | 9 + .../shared/notification-icons/autoplay-media.svg | 7 + .../shared/notification-icons/camera-blocked.svg | 7 + .../themes/shared/notification-icons/camera.svg | 6 + .../desktop-notification-blocked.svg | 8 + .../notification-icons/desktop-notification.svg | 8 + .../shared/notification-icons/drag-indicator.svg | 4 + .../shared/notification-icons/geo-blocked.svg | 8 + browser/themes/shared/notification-icons/geo.svg | 7 + .../notification-icons/microphone-blocked.svg | 8 + .../shared/notification-icons/microphone.svg | 7 + browser/themes/shared/notification-icons/midi.svg | 6 + .../themes/shared/notification-icons/minimize.svg | 4 + .../persistent-storage-blocked.svg | 8 + .../notification-icons/persistent-storage.svg | 7 + .../shared/notification-icons/plugin-badge.svg | 7 + browser/themes/shared/notification-icons/popup.svg | 7 + .../shared/notification-icons/screen-blocked.svg | 7 + .../themes/shared/notification-icons/screen.svg | 7 + .../shared/notification-icons/xr-blocked.svg | 8 + browser/themes/shared/notification-icons/xr.svg | 7 + browser/themes/shared/panic-panel/header.png | Bin 0 -> 1880 bytes browser/themes/shared/panic-panel/header@2x.png | Bin 0 -> 4327 bytes browser/themes/shared/panic-panel/icons.png | Bin 0 -> 670 bytes browser/themes/shared/panic-panel/icons@2x.png | Bin 0 -> 1364 bytes browser/themes/shared/places/bookmarksMenu.svg | 9 + browser/themes/shared/places/bookmarksToolbar.svg | 8 + browser/themes/shared/places/editBookmark.css | 161 ++ browser/themes/shared/places/editBookmarkPanel.css | 218 +++ browser/themes/shared/places/folder-smart.svg | 6 + browser/themes/shared/places/sidebar.css | 216 +++ browser/themes/shared/places/tag.svg | 8 + browser/themes/shared/places/tree-icons.css | 95 + browser/themes/shared/preferences/android-menu.svg | 6 + .../themes/shared/preferences/category-general.svg | 7 + .../preferences/category-privacy-security.svg | 6 + .../themes/shared/preferences/category-search.svg | 6 + .../themes/shared/preferences/category-sync.svg | 7 + .../shared/preferences/containers-dialog.css | 50 + browser/themes/shared/preferences/containers.css | 54 + browser/themes/shared/preferences/dialog.css | 42 + browser/themes/shared/preferences/face-sad.svg | 9 + browser/themes/shared/preferences/face-smile.svg | 14 + .../themes/shared/preferences/fxaPairDevice.css | 122 ++ browser/themes/shared/preferences/ios-menu.svg | 6 + browser/themes/shared/preferences/mozilla-logo.svg | 5 + .../themes/shared/preferences/no-search-bar.svg | 20 + browser/themes/shared/preferences/preferences.css | 1471 ++++++++++++++ browser/themes/shared/preferences/privacy.css | 364 ++++ browser/themes/shared/preferences/relay-logo.svg | 7 + .../shared/preferences/search-arrow-indicator.svg | 13 + browser/themes/shared/preferences/search-bar.svg | 25 + browser/themes/shared/preferences/search.css | 100 + .../themes/shared/preferences/siteDataSettings.css | 64 + browser/themes/shared/preferences/vpn-logo.svg | 4 + .../privatebrowsing/aboutPrivateBrowsing.css | 458 +++++ browser/themes/shared/privatebrowsing/favicon.svg | 9 + browser/themes/shared/profiler-popup-backdrop.png | Bin 0 -> 8455 bytes .../shared/protections/breached-password.svg | 6 + browser/themes/shared/protections/new-feature.svg | 10 + .../shared/protections/resolved-breach-gray.svg | 9 + .../themes/shared/protections/resolved-breach.svg | 9 + .../shared/search/search-engine-placeholder.png | Bin 0 -> 252 bytes .../shared/search/search-engine-placeholder@2x.png | Bin 0 -> 461 bytes .../shared/search/search-indicator-badge-add.svg | 8 + browser/themes/shared/searchbar.css | 180 ++ browser/themes/shared/setDesktopBackground.css | 23 + browser/themes/shared/sidebar.css | 135 ++ browser/themes/shared/spotlight.css | 85 + .../swipe-gesture-icons/history-swipe-arrow.svg | 15 + browser/themes/shared/syncedtabs/sidebar.css | 371 ++++ browser/themes/shared/tab-list-tree.css | 50 + browser/themes/shared/tabbrowser/connecting.png | Bin 0 -> 8540 bytes browser/themes/shared/tabbrowser/connecting@2x.png | Bin 0 -> 30143 bytes browser/themes/shared/tabbrowser/crashed.svg | 14 + browser/themes/shared/tabbrowser/hourglass.svg | 9 + browser/themes/shared/tabbrowser/loading-burst.svg | 6 + browser/themes/shared/tabbrowser/loading.svg | 98 + browser/themes/shared/tabbrowser/pendingpaint.png | Bin 0 -> 12955 bytes .../shared/tabbrowser/tab-audio-blocked-small.svg | 7 + .../shared/tabbrowser/tab-audio-muted-small.svg | 7 + .../shared/tabbrowser/tab-audio-playing-small.svg | 7 + .../themes/shared/tabbrowser/tab-connecting.png | Bin 0 -> 5617 bytes .../themes/shared/tabbrowser/tab-connecting@2x.png | Bin 0 -> 7254 bytes .../shared/tabbrowser/tab-drag-indicator.svg | 4 + .../shared/tabbrowser/tab-loading-inverted.png | Bin 0 -> 5598 bytes .../shared/tabbrowser/tab-loading-inverted@2x.png | Bin 0 -> 7216 bytes browser/themes/shared/tabbrowser/tab-loading.png | Bin 0 -> 5598 bytes .../themes/shared/tabbrowser/tab-loading@2x.png | Bin 0 -> 7222 bytes browser/themes/shared/tabs.css | 790 ++++++++ browser/themes/shared/toolbar-drag-indicator.svg | 4 + browser/themes/shared/toolbarbutton-icons.css | 486 +++++ browser/themes/shared/toolbarbuttons.css | 350 ++++ browser/themes/shared/translation/infobar.css | 95 + .../themes/shared/translation/translating-16.png | Bin 0 -> 21270 bytes .../shared/translation/translating-16@2x.png | Bin 0 -> 29889 bytes .../themes/shared/translation/translation-16.png | Bin 0 -> 865 bytes .../shared/translation/translation-16@2x.png | Bin 0 -> 2023 bytes browser/themes/shared/update-badge.svg | 6 + browser/themes/shared/urlbar-dynamic-results.css | 478 +++++ browser/themes/shared/urlbar-searchbar.css | 745 +++++++ browser/themes/shared/urlbarView.css | 850 ++++++++ browser/themes/shared/weather/cloudy.svg | 24 + browser/themes/shared/weather/flurries.svg | 30 + browser/themes/shared/weather/fog.svg | 26 + browser/themes/shared/weather/freezing-rain.svg | 38 + browser/themes/shared/weather/hazy-sunshine.svg | 26 + browser/themes/shared/weather/hot.svg | 39 + browser/themes/shared/weather/ice.svg | 52 + .../shared/weather/mostly-cloudy-with-showers.svg | 41 + .../weather/mostly-cloudy-with-thunderstorms.svg | 36 + browser/themes/shared/weather/mostly-sunny.svg | 32 + browser/themes/shared/weather/night-clear.svg | 17 + .../themes/shared/weather/night-hazy-moonlight.svg | 30 + .../themes/shared/weather/night-mostly-clear.svg | 24 + .../weather/night-mostly-cloudy-with-flurries.svg | 34 + .../weather/night-partly-cloudy-with-showers.svg | 36 + .../night-partly-cloudy-with-thunderstorms.svg | 31 + .../shared/weather/partly-sunny-with-flurries.svg | 42 + browser/themes/shared/weather/partly-sunny.svg | 31 + browser/themes/shared/weather/rain.svg | 26 + browser/themes/shared/weather/showers.svg | 29 + browser/themes/shared/weather/snow.svg | 33 + browser/themes/shared/weather/sunny.svg | 17 + browser/themes/shared/weather/thunderstorms.svg | 31 + browser/themes/shared/weather/windy.svg | 25 + browser/themes/shared/webRTC-indicator.css | 346 ++++ browser/themes/shared/webRTC-legacy-indicator.css | 121 ++ browser/themes/shared/webRTC-menubar-indicator.css | 28 + browser/themes/test/browser/browser.ini | 3 + .../themes/test/browser/browser_expireThemes.js | 111 ++ .../test/xpcshell/test_BuiltInThemeConfig.js | 76 + browser/themes/test/xpcshell/xpcshell.ini | 4 + browser/themes/windows/browser-aero.css | 341 ++++ browser/themes/windows/browser.css | 588 ++++++ browser/themes/windows/customizableui/panelUI.css | 26 + .../themes/windows/downloads/allDownloadsView.css | 63 + browser/themes/windows/downloads/downloads.css | 33 + browser/themes/windows/jar.mn | 42 + browser/themes/windows/monitor-base.png | Bin 0 -> 1087 bytes browser/themes/windows/monitor-border.png | Bin 0 -> 3268 bytes browser/themes/windows/moz.build | 9 + .../themes/windows/notification-icons/camera.png | Bin 0 -> 1356 bytes .../windows/notification-icons/microphone.png | Bin 0 -> 1694 bytes .../themes/windows/notification-icons/screen.png | Bin 0 -> 1619 bytes browser/themes/windows/pageInfo.css | 178 ++ browser/themes/windows/pageInfo.png | Bin 0 -> 7850 bytes browser/themes/windows/places/organizer.css | 401 ++++ browser/themes/windows/preferences/alwaysAsk.png | Bin 0 -> 355 bytes browser/themes/windows/preferences/application.png | Bin 0 -> 332 bytes .../themes/windows/preferences/applications.css | 43 + browser/themes/windows/preferences/saveFile.png | Bin 0 -> 703 bytes browser/themes/windows/sanitizeDialog.css | 16 + .../windows/window-controls/close-highcontrast.svg | 6 + .../windows/window-controls/close-themes.svg | 7 + browser/themes/windows/window-controls/close.svg | 6 + .../window-controls/maximize-highcontrast.svg | 6 + .../windows/window-controls/maximize-themes.svg | 7 + .../themes/windows/window-controls/maximize.svg | 6 + .../window-controls/minimize-highcontrast.svg | 6 + .../windows/window-controls/minimize-themes.svg | 7 + .../themes/windows/window-controls/minimize.svg | 6 + .../window-controls/restore-highcontrast.svg | 7 + .../windows/window-controls/restore-themes.svg | 8 + browser/themes/windows/window-controls/restore.svg | 7 + 595 files changed, 30154 insertions(+) create mode 100644 browser/themes/BuiltInThemeConfig.sys.mjs create mode 100644 browser/themes/BuiltInThemes.sys.mjs create mode 100644 browser/themes/LICENSE create mode 100644 browser/themes/ThemeVariableMap.sys.mjs create mode 100644 browser/themes/Windows8WindowFrameColor.sys.mjs create mode 100644 browser/themes/addons/alpenglow/background-gradient-dark.svg create mode 100644 browser/themes/addons/alpenglow/background-gradient.svg create mode 100644 browser/themes/addons/alpenglow/background-noodles-left-dark.svg create mode 100644 browser/themes/addons/alpenglow/background-noodles-left.svg create mode 100644 browser/themes/addons/alpenglow/background-noodles-right-dark.svg create mode 100644 browser/themes/addons/alpenglow/background-noodles-right.svg create mode 100644 browser/themes/addons/alpenglow/icon.svg create mode 100644 browser/themes/addons/alpenglow/manifest.json create mode 100644 browser/themes/addons/alpenglow/preview.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/abstract/balanced/icon.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/abstract/balanced/manifest.json create mode 100644 browser/themes/addons/colorways/2021-life-in-color/abstract/balanced/preview.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/abstract/bold/icon.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/abstract/bold/manifest.json create mode 100644 browser/themes/addons/colorways/2021-life-in-color/abstract/bold/preview.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/abstract/soft/icon.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/abstract/soft/manifest.json create mode 100644 browser/themes/addons/colorways/2021-life-in-color/abstract/soft/preview.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/cheers/balanced/icon.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/cheers/balanced/manifest.json create mode 100644 browser/themes/addons/colorways/2021-life-in-color/cheers/balanced/preview.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/cheers/bold/icon.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/cheers/bold/manifest.json create mode 100644 browser/themes/addons/colorways/2021-life-in-color/cheers/bold/preview.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/cheers/soft/icon.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/cheers/soft/manifest.json create mode 100644 browser/themes/addons/colorways/2021-life-in-color/cheers/soft/preview.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/elemental/balanced/icon.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/elemental/balanced/manifest.json create mode 100644 browser/themes/addons/colorways/2021-life-in-color/elemental/balanced/preview.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/elemental/bold/icon.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/elemental/bold/manifest.json create mode 100644 browser/themes/addons/colorways/2021-life-in-color/elemental/bold/preview.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/elemental/soft/icon.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/elemental/soft/manifest.json create mode 100644 browser/themes/addons/colorways/2021-life-in-color/elemental/soft/preview.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/foto/balanced/icon.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/foto/balanced/manifest.json create mode 100644 browser/themes/addons/colorways/2021-life-in-color/foto/balanced/preview.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/foto/bold/icon.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/foto/bold/manifest.json create mode 100644 browser/themes/addons/colorways/2021-life-in-color/foto/bold/preview.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/foto/soft/icon.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/foto/soft/manifest.json create mode 100644 browser/themes/addons/colorways/2021-life-in-color/foto/soft/preview.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/graffiti/balanced/icon.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/graffiti/balanced/manifest.json create mode 100644 browser/themes/addons/colorways/2021-life-in-color/graffiti/balanced/preview.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/graffiti/bold/icon.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/graffiti/bold/manifest.json create mode 100644 browser/themes/addons/colorways/2021-life-in-color/graffiti/bold/preview.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/graffiti/soft/icon.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/graffiti/soft/manifest.json create mode 100644 browser/themes/addons/colorways/2021-life-in-color/graffiti/soft/preview.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/lush/balanced/icon.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/lush/balanced/manifest.json create mode 100644 browser/themes/addons/colorways/2021-life-in-color/lush/balanced/preview.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/lush/bold/icon.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/lush/bold/manifest.json create mode 100644 browser/themes/addons/colorways/2021-life-in-color/lush/bold/preview.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/lush/soft/icon.svg create mode 100644 browser/themes/addons/colorways/2021-life-in-color/lush/soft/manifest.json create mode 100644 browser/themes/addons/colorways/2021-life-in-color/lush/soft/preview.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/activist/balanced/icon.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/activist/balanced/manifest.json create mode 100644 browser/themes/addons/colorways/2022-independent-voices/activist/balanced/preview.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/activist/bold/icon.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/activist/bold/manifest.json create mode 100644 browser/themes/addons/colorways/2022-independent-voices/activist/bold/preview.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/activist/soft/icon.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/activist/soft/manifest.json create mode 100644 browser/themes/addons/colorways/2022-independent-voices/activist/soft/preview.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/dreamer/balanced/icon.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/dreamer/balanced/manifest.json create mode 100644 browser/themes/addons/colorways/2022-independent-voices/dreamer/balanced/preview.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/dreamer/bold/icon.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/dreamer/bold/manifest.json create mode 100644 browser/themes/addons/colorways/2022-independent-voices/dreamer/bold/preview.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/dreamer/soft/icon.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/dreamer/soft/manifest.json create mode 100644 browser/themes/addons/colorways/2022-independent-voices/dreamer/soft/preview.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/expressionist/balanced/icon.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/expressionist/balanced/manifest.json create mode 100644 browser/themes/addons/colorways/2022-independent-voices/expressionist/balanced/preview.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/expressionist/bold/icon.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/expressionist/bold/manifest.json create mode 100644 browser/themes/addons/colorways/2022-independent-voices/expressionist/bold/preview.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/expressionist/soft/icon.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/expressionist/soft/manifest.json create mode 100644 browser/themes/addons/colorways/2022-independent-voices/expressionist/soft/preview.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/innovator/balanced/icon.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/innovator/balanced/manifest.json create mode 100644 browser/themes/addons/colorways/2022-independent-voices/innovator/balanced/preview.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/innovator/bold/icon.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/innovator/bold/manifest.json create mode 100644 browser/themes/addons/colorways/2022-independent-voices/innovator/bold/preview.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/innovator/soft/icon.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/innovator/soft/manifest.json create mode 100644 browser/themes/addons/colorways/2022-independent-voices/innovator/soft/preview.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/playmaker/balanced/icon.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/playmaker/balanced/manifest.json create mode 100644 browser/themes/addons/colorways/2022-independent-voices/playmaker/balanced/preview.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/playmaker/bold/icon.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/playmaker/bold/manifest.json create mode 100644 browser/themes/addons/colorways/2022-independent-voices/playmaker/bold/preview.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/playmaker/soft/icon.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/playmaker/soft/manifest.json create mode 100644 browser/themes/addons/colorways/2022-independent-voices/playmaker/soft/preview.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/visionary/balanced/icon.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/visionary/balanced/manifest.json create mode 100644 browser/themes/addons/colorways/2022-independent-voices/visionary/balanced/preview.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/visionary/bold/icon.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/visionary/bold/manifest.json create mode 100644 browser/themes/addons/colorways/2022-independent-voices/visionary/bold/preview.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/visionary/soft/icon.svg create mode 100644 browser/themes/addons/colorways/2022-independent-voices/visionary/soft/manifest.json create mode 100644 browser/themes/addons/colorways/2022-independent-voices/visionary/soft/preview.svg create mode 100644 browser/themes/addons/colorways/2022-true-colors/blue/icon.svg create mode 100644 browser/themes/addons/colorways/2022-true-colors/blue/manifest.json create mode 100644 browser/themes/addons/colorways/2022-true-colors/blue/preview.svg create mode 100644 browser/themes/addons/colorways/2022-true-colors/green/icon.svg create mode 100644 browser/themes/addons/colorways/2022-true-colors/green/manifest.json create mode 100644 browser/themes/addons/colorways/2022-true-colors/green/preview.svg create mode 100644 browser/themes/addons/colorways/2022-true-colors/orange/icon.svg create mode 100644 browser/themes/addons/colorways/2022-true-colors/orange/manifest.json create mode 100644 browser/themes/addons/colorways/2022-true-colors/orange/preview.svg create mode 100644 browser/themes/addons/colorways/2022-true-colors/purple/icon.svg create mode 100644 browser/themes/addons/colorways/2022-true-colors/purple/manifest.json create mode 100644 browser/themes/addons/colorways/2022-true-colors/purple/preview.svg create mode 100644 browser/themes/addons/colorways/2022-true-colors/red/icon.svg create mode 100644 browser/themes/addons/colorways/2022-true-colors/red/manifest.json create mode 100644 browser/themes/addons/colorways/2022-true-colors/red/preview.svg create mode 100644 browser/themes/addons/colorways/2022-true-colors/yellow/icon.svg create mode 100644 browser/themes/addons/colorways/2022-true-colors/yellow/manifest.json create mode 100644 browser/themes/addons/colorways/2022-true-colors/yellow/preview.svg create mode 100644 browser/themes/addons/dark/experiment.css create mode 100644 browser/themes/addons/dark/icon.svg create mode 100644 browser/themes/addons/dark/manifest.json create mode 100644 browser/themes/addons/dark/preview.svg create mode 100644 browser/themes/addons/jar.mn create mode 100644 browser/themes/addons/light/experiment.css create mode 100644 browser/themes/addons/light/icon.svg create mode 100644 browser/themes/addons/light/manifest.json create mode 100644 browser/themes/addons/light/preview.svg create mode 100644 browser/themes/addons/moz.build create mode 100644 browser/themes/linux/browser.css create mode 100644 browser/themes/linux/customizableui/panelUI.css create mode 100644 browser/themes/linux/downloads/allDownloadsView.css create mode 100644 browser/themes/linux/downloads/downloads.css create mode 100644 browser/themes/linux/jar.mn create mode 100644 browser/themes/linux/monitor-base.png create mode 100644 browser/themes/linux/monitor-border.png create mode 100644 browser/themes/linux/moz.build create mode 100644 browser/themes/linux/pageInfo.css create mode 100644 browser/themes/linux/pageInfo.png create mode 100644 browser/themes/linux/places/organizer.css create mode 100644 browser/themes/linux/preferences/alwaysAsk.png create mode 100644 browser/themes/linux/preferences/applications.css create mode 100644 browser/themes/linux/sanitizeDialog.css create mode 100644 browser/themes/linux/window-controls/close.svg create mode 100644 browser/themes/linux/window-controls/minimize.svg create mode 100644 browser/themes/linux/window-controls/restore.svg create mode 100644 browser/themes/moz.build create mode 100644 browser/themes/osx/browser.css create mode 100644 browser/themes/osx/customizableui/panelUI.css create mode 100644 browser/themes/osx/downloads/allDownloadsView.css create mode 100644 browser/themes/osx/downloads/downloads.css create mode 100644 browser/themes/osx/jar.mn create mode 100644 browser/themes/osx/monitor-base.png create mode 100644 browser/themes/osx/monitor-border.png create mode 100644 browser/themes/osx/moz.build create mode 100644 browser/themes/osx/pageInfo.css create mode 100644 browser/themes/osx/places/organizer.css create mode 100644 browser/themes/osx/preferences/alwaysAsk.png create mode 100644 browser/themes/osx/preferences/application.png create mode 100644 browser/themes/osx/preferences/applications.css create mode 100644 browser/themes/osx/preferences/saveFile.png create mode 100644 browser/themes/osx/sanitizeDialog.css create mode 100644 browser/themes/osx/share.svg create mode 100644 browser/themes/osx/swipe-gesture-icons/history-swipe-arrow.svg create mode 100644 browser/themes/shared/UITour.css create mode 100644 browser/themes/shared/aboutFrameCrashed.css create mode 100644 browser/themes/shared/aboutRestartRequired.css create mode 100644 browser/themes/shared/aboutSessionRestore.css create mode 100644 browser/themes/shared/aboutTabCrashed.css create mode 100644 browser/themes/shared/aboutWelcomeBack.css create mode 100644 browser/themes/shared/addon-notification.css create mode 100644 browser/themes/shared/addons/addon-install-blocked.svg create mode 100644 browser/themes/shared/addons/addon-install-downloading.svg create mode 100644 browser/themes/shared/addons/addon-install-installed.svg create mode 100644 browser/themes/shared/addons/extension-controlled.css create mode 100644 browser/themes/shared/addons/unified-extensions.css create mode 100644 browser/themes/shared/app-marketplace-icons/LICENSE create mode 100644 browser/themes/shared/app-marketplace-icons/Makefile.in create mode 100644 browser/themes/shared/app-marketplace-icons/af/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ar/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ar/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/az/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/az/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/be/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/bg/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/bg/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/bn-BD/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/bn-IN/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ca/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/cs/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/cs/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/da/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/da/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/de/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/de/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/el/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/el/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/en-US/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/en-US/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/es-ES/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/es-ES/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/et/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/et/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/eu/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/fa/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/fi/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/fi/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/fr/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/fr/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/gl/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/gu-IN/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/he/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/he/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/hi-IN/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/hr/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/hu/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/hu/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/hy-AM/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/id/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/id/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/is/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/it/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/it/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/ja/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ja/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/jar.mn create mode 100644 browser/themes/shared/app-marketplace-icons/ka/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/kk/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/km/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/kn/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ko/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ko/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/lo/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/lt/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/lt/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/lv/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/lv/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/mk/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ml/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/moz.build create mode 100644 browser/themes/shared/app-marketplace-icons/mr/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ms/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ms/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/mt/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/my/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/nb-NO/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/nb-NO/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/ne-NP/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/nl/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/nl/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/nn-NO/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/nn-NO/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/pa-IN/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/pl/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/pl/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/pt-BR/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/pt-BR/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/pt-PT/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/pt-PT/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/ro/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ro/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/ru/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ru/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/si/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/sk/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/sk/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/sl/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/sl/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/sq/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/sr/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/sv-SE/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/sv-SE/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/sw/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ta/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/te/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/th/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/th/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/tr/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/tr/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/uk/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ur/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/uz/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/vi/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/vi/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/zh-CN/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/zh-CN/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/zh-TW/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/zh-TW/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/zu/android.png create mode 100644 browser/themes/shared/autocomplete.css create mode 100644 browser/themes/shared/blockedSite.css create mode 100644 browser/themes/shared/browser-custom-colors.css create mode 100644 browser/themes/shared/browser-shared.css create mode 100644 browser/themes/shared/contextmenu.css create mode 100644 browser/themes/shared/controlcenter/3rdpartycookies.svg create mode 100644 browser/themes/shared/controlcenter/cryptominers.svg create mode 100644 browser/themes/shared/controlcenter/dashboard.svg create mode 100644 browser/themes/shared/controlcenter/etp-milestone.svg create mode 100644 browser/themes/shared/controlcenter/hero-message-background.svg create mode 100644 browser/themes/shared/controlcenter/mcb-disabled.svg create mode 100644 browser/themes/shared/controlcenter/panel.css create mode 100644 browser/themes/shared/controlcenter/tracking-protection.svg create mode 100644 browser/themes/shared/ctrlTab.css create mode 100644 browser/themes/shared/customizableui/customizeMode.css create mode 100644 browser/themes/shared/customizableui/density-compact.svg create mode 100644 browser/themes/shared/customizableui/density-normal.svg create mode 100644 browser/themes/shared/customizableui/density-touch.svg create mode 100644 browser/themes/shared/customizableui/empty-overflow-panel.png create mode 100644 browser/themes/shared/customizableui/empty-overflow-panel@2x.png create mode 100644 browser/themes/shared/customizableui/panelUI-shared.css create mode 100644 browser/themes/shared/customizableui/whimsy.png create mode 100644 browser/themes/shared/downloads/allDownloadsView.inc.css create mode 100644 browser/themes/shared/downloads/contentAreaDownloadsView.css create mode 100644 browser/themes/shared/downloads/download-blockedStates.css create mode 100644 browser/themes/shared/downloads/download-summary.svg create mode 100644 browser/themes/shared/downloads/downloads.inc.css create mode 100644 browser/themes/shared/downloads/downloads.svg create mode 100644 browser/themes/shared/downloads/indicator.css create mode 100644 browser/themes/shared/downloads/notification-finish-animation.svg create mode 100644 browser/themes/shared/downloads/notification-start-animation.svg create mode 100644 browser/themes/shared/downloads/progressmeter.css create mode 100644 browser/themes/shared/drm-icon.svg create mode 100644 browser/themes/shared/e10s-64@2x.png create mode 100644 browser/themes/shared/fullscreen/warning.css create mode 100644 browser/themes/shared/fxa/add-device.svg create mode 100644 browser/themes/shared/fxa/avatar-color.svg create mode 100644 browser/themes/shared/fxa/avatar-empty.svg create mode 100644 browser/themes/shared/fxa/avatar.svg create mode 100644 browser/themes/shared/fxa/fxa-spinner.svg create mode 100644 browser/themes/shared/fxa/monitor.svg create mode 100644 browser/themes/shared/fxa/send-to-device.svg create mode 100644 browser/themes/shared/fxa/send.svg create mode 100644 browser/themes/shared/fxa/sync-devices.svg create mode 100644 browser/themes/shared/fxa/sync-illustration-issue.svg create mode 100644 browser/themes/shared/fxa/sync-illustration.svg create mode 100644 browser/themes/shared/icons/add-circle-fill.svg create mode 100644 browser/themes/shared/icons/back.svg create mode 100644 browser/themes/shared/icons/bookmark-12.svg create mode 100644 browser/themes/shared/icons/bookmark-hollow.svg create mode 100644 browser/themes/shared/icons/bookmark-star-on-tray.svg create mode 100644 browser/themes/shared/icons/bookmark.svg create mode 100644 browser/themes/shared/icons/bookmarks-toolbar.svg create mode 100644 browser/themes/shared/icons/canvas-blocked.svg create mode 100644 browser/themes/shared/icons/canvas.svg create mode 100644 browser/themes/shared/icons/characterEncoding.svg create mode 100644 browser/themes/shared/icons/chevron-animation.svg create mode 100644 browser/themes/shared/icons/customize.svg create mode 100644 browser/themes/shared/icons/device-desktop.svg create mode 100644 browser/themes/shared/icons/device-phone.svg create mode 100644 browser/themes/shared/icons/device-tablet.svg create mode 100644 browser/themes/shared/icons/device-tv.svg create mode 100644 browser/themes/shared/icons/device-vr.svg create mode 100644 browser/themes/shared/icons/edit-cut.svg create mode 100644 browser/themes/shared/icons/edit-paste.svg create mode 100644 browser/themes/shared/icons/fingerprint.svg create mode 100644 browser/themes/shared/icons/forget.svg create mode 100644 browser/themes/shared/icons/forward.svg create mode 100644 browser/themes/shared/icons/fullscreen-exit.svg create mode 100644 browser/themes/shared/icons/fullscreen.svg create mode 100644 browser/themes/shared/icons/history.svg create mode 100644 browser/themes/shared/icons/home.svg create mode 100644 browser/themes/shared/icons/import-export.svg create mode 100644 browser/themes/shared/icons/import.svg create mode 100644 browser/themes/shared/icons/ion.svg create mode 100644 browser/themes/shared/icons/library.svg create mode 100644 browser/themes/shared/icons/login.svg create mode 100644 browser/themes/shared/icons/logo-android.svg create mode 100644 browser/themes/shared/icons/logo-ios.svg create mode 100644 browser/themes/shared/icons/mail.svg create mode 100644 browser/themes/shared/icons/menu-badged.svg create mode 100644 browser/themes/shared/icons/menu.svg create mode 100644 browser/themes/shared/icons/new-tab.svg create mode 100644 browser/themes/shared/icons/notification-fill-12.svg create mode 100644 browser/themes/shared/icons/open.svg create mode 100644 browser/themes/shared/icons/pin-12.svg create mode 100644 browser/themes/shared/icons/privateBrowsing.svg create mode 100644 browser/themes/shared/icons/quickactions.svg create mode 100644 browser/themes/shared/icons/reader-mode.svg create mode 100644 browser/themes/shared/icons/reload-to-stop.svg create mode 100644 browser/themes/shared/icons/save.svg create mode 100644 browser/themes/shared/icons/screenshot.svg create mode 100644 browser/themes/shared/icons/sidebars-right.svg create mode 100644 browser/themes/shared/icons/sidebars.svg create mode 100644 browser/themes/shared/icons/sort.svg create mode 100644 browser/themes/shared/icons/stop-to-reload.svg create mode 100644 browser/themes/shared/icons/subtract-circle-fill.svg create mode 100644 browser/themes/shared/icons/success-animation.svg create mode 100644 browser/themes/shared/icons/sync.svg create mode 100644 browser/themes/shared/icons/synced-tabs.svg create mode 100644 browser/themes/shared/icons/tab.svg create mode 100644 browser/themes/shared/icons/thumb-down.svg create mode 100644 browser/themes/shared/icons/topsites.svg create mode 100644 browser/themes/shared/icons/trending.svg create mode 100644 browser/themes/shared/icons/window.svg create mode 100644 browser/themes/shared/icons/zoom-out.svg create mode 100644 browser/themes/shared/identity-block/identity-block.css create mode 100644 browser/themes/shared/identity-block/permissions.svg create mode 100644 browser/themes/shared/identity-block/tracking-protection-active-brighttext.svg create mode 100644 browser/themes/shared/identity-block/tracking-protection-active.svg create mode 100644 browser/themes/shared/identity-block/tracking-protection-disabled.svg create mode 100644 browser/themes/shared/identity-block/tracking-protection.svg create mode 100644 browser/themes/shared/identity-credential-notification.css create mode 100644 browser/themes/shared/incontent-icons/tab-crashed.svg create mode 100644 browser/themes/shared/jar.inc.mn create mode 100644 browser/themes/shared/light-dark-overrides.css create mode 100644 browser/themes/shared/menupanel.css create mode 100644 browser/themes/shared/migration/migration-dialog.css create mode 100644 browser/themes/shared/migration/migration-wizard.css create mode 100644 browser/themes/shared/notification-icons.css create mode 100644 browser/themes/shared/notification-icons/autoplay-media-blocked.svg create mode 100644 browser/themes/shared/notification-icons/autoplay-media.svg create mode 100644 browser/themes/shared/notification-icons/camera-blocked.svg create mode 100644 browser/themes/shared/notification-icons/camera.svg create mode 100644 browser/themes/shared/notification-icons/desktop-notification-blocked.svg create mode 100644 browser/themes/shared/notification-icons/desktop-notification.svg create mode 100644 browser/themes/shared/notification-icons/drag-indicator.svg create mode 100644 browser/themes/shared/notification-icons/geo-blocked.svg create mode 100644 browser/themes/shared/notification-icons/geo.svg create mode 100644 browser/themes/shared/notification-icons/microphone-blocked.svg create mode 100644 browser/themes/shared/notification-icons/microphone.svg create mode 100644 browser/themes/shared/notification-icons/midi.svg create mode 100644 browser/themes/shared/notification-icons/minimize.svg create mode 100644 browser/themes/shared/notification-icons/persistent-storage-blocked.svg create mode 100644 browser/themes/shared/notification-icons/persistent-storage.svg create mode 100644 browser/themes/shared/notification-icons/plugin-badge.svg create mode 100644 browser/themes/shared/notification-icons/popup.svg create mode 100644 browser/themes/shared/notification-icons/screen-blocked.svg create mode 100644 browser/themes/shared/notification-icons/screen.svg create mode 100644 browser/themes/shared/notification-icons/xr-blocked.svg create mode 100644 browser/themes/shared/notification-icons/xr.svg create mode 100644 browser/themes/shared/panic-panel/header.png create mode 100644 browser/themes/shared/panic-panel/header@2x.png create mode 100644 browser/themes/shared/panic-panel/icons.png create mode 100644 browser/themes/shared/panic-panel/icons@2x.png create mode 100644 browser/themes/shared/places/bookmarksMenu.svg create mode 100644 browser/themes/shared/places/bookmarksToolbar.svg create mode 100644 browser/themes/shared/places/editBookmark.css create mode 100644 browser/themes/shared/places/editBookmarkPanel.css create mode 100644 browser/themes/shared/places/folder-smart.svg create mode 100644 browser/themes/shared/places/sidebar.css create mode 100644 browser/themes/shared/places/tag.svg create mode 100644 browser/themes/shared/places/tree-icons.css create mode 100644 browser/themes/shared/preferences/android-menu.svg create mode 100644 browser/themes/shared/preferences/category-general.svg create mode 100644 browser/themes/shared/preferences/category-privacy-security.svg create mode 100644 browser/themes/shared/preferences/category-search.svg create mode 100644 browser/themes/shared/preferences/category-sync.svg create mode 100644 browser/themes/shared/preferences/containers-dialog.css create mode 100644 browser/themes/shared/preferences/containers.css create mode 100644 browser/themes/shared/preferences/dialog.css create mode 100644 browser/themes/shared/preferences/face-sad.svg create mode 100644 browser/themes/shared/preferences/face-smile.svg create mode 100644 browser/themes/shared/preferences/fxaPairDevice.css create mode 100644 browser/themes/shared/preferences/ios-menu.svg create mode 100644 browser/themes/shared/preferences/mozilla-logo.svg create mode 100644 browser/themes/shared/preferences/no-search-bar.svg create mode 100644 browser/themes/shared/preferences/preferences.css create mode 100644 browser/themes/shared/preferences/privacy.css create mode 100644 browser/themes/shared/preferences/relay-logo.svg create mode 100644 browser/themes/shared/preferences/search-arrow-indicator.svg create mode 100644 browser/themes/shared/preferences/search-bar.svg create mode 100644 browser/themes/shared/preferences/search.css create mode 100644 browser/themes/shared/preferences/siteDataSettings.css create mode 100644 browser/themes/shared/preferences/vpn-logo.svg create mode 100644 browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css create mode 100644 browser/themes/shared/privatebrowsing/favicon.svg create mode 100644 browser/themes/shared/profiler-popup-backdrop.png create mode 100644 browser/themes/shared/protections/breached-password.svg create mode 100644 browser/themes/shared/protections/new-feature.svg create mode 100644 browser/themes/shared/protections/resolved-breach-gray.svg create mode 100644 browser/themes/shared/protections/resolved-breach.svg create mode 100644 browser/themes/shared/search/search-engine-placeholder.png create mode 100644 browser/themes/shared/search/search-engine-placeholder@2x.png create mode 100644 browser/themes/shared/search/search-indicator-badge-add.svg create mode 100644 browser/themes/shared/searchbar.css create mode 100644 browser/themes/shared/setDesktopBackground.css create mode 100644 browser/themes/shared/sidebar.css create mode 100644 browser/themes/shared/spotlight.css create mode 100644 browser/themes/shared/swipe-gesture-icons/history-swipe-arrow.svg create mode 100644 browser/themes/shared/syncedtabs/sidebar.css create mode 100644 browser/themes/shared/tab-list-tree.css create mode 100644 browser/themes/shared/tabbrowser/connecting.png create mode 100644 browser/themes/shared/tabbrowser/connecting@2x.png create mode 100644 browser/themes/shared/tabbrowser/crashed.svg create mode 100644 browser/themes/shared/tabbrowser/hourglass.svg create mode 100644 browser/themes/shared/tabbrowser/loading-burst.svg create mode 100644 browser/themes/shared/tabbrowser/loading.svg create mode 100644 browser/themes/shared/tabbrowser/pendingpaint.png create mode 100644 browser/themes/shared/tabbrowser/tab-audio-blocked-small.svg create mode 100644 browser/themes/shared/tabbrowser/tab-audio-muted-small.svg create mode 100644 browser/themes/shared/tabbrowser/tab-audio-playing-small.svg create mode 100644 browser/themes/shared/tabbrowser/tab-connecting.png create mode 100644 browser/themes/shared/tabbrowser/tab-connecting@2x.png create mode 100644 browser/themes/shared/tabbrowser/tab-drag-indicator.svg create mode 100644 browser/themes/shared/tabbrowser/tab-loading-inverted.png create mode 100644 browser/themes/shared/tabbrowser/tab-loading-inverted@2x.png create mode 100644 browser/themes/shared/tabbrowser/tab-loading.png create mode 100644 browser/themes/shared/tabbrowser/tab-loading@2x.png create mode 100644 browser/themes/shared/tabs.css create mode 100644 browser/themes/shared/toolbar-drag-indicator.svg create mode 100644 browser/themes/shared/toolbarbutton-icons.css create mode 100644 browser/themes/shared/toolbarbuttons.css create mode 100644 browser/themes/shared/translation/infobar.css create mode 100644 browser/themes/shared/translation/translating-16.png create mode 100644 browser/themes/shared/translation/translating-16@2x.png create mode 100644 browser/themes/shared/translation/translation-16.png create mode 100644 browser/themes/shared/translation/translation-16@2x.png create mode 100644 browser/themes/shared/update-badge.svg create mode 100644 browser/themes/shared/urlbar-dynamic-results.css create mode 100644 browser/themes/shared/urlbar-searchbar.css create mode 100644 browser/themes/shared/urlbarView.css create mode 100644 browser/themes/shared/weather/cloudy.svg create mode 100644 browser/themes/shared/weather/flurries.svg create mode 100644 browser/themes/shared/weather/fog.svg create mode 100644 browser/themes/shared/weather/freezing-rain.svg create mode 100644 browser/themes/shared/weather/hazy-sunshine.svg create mode 100644 browser/themes/shared/weather/hot.svg create mode 100644 browser/themes/shared/weather/ice.svg create mode 100644 browser/themes/shared/weather/mostly-cloudy-with-showers.svg create mode 100644 browser/themes/shared/weather/mostly-cloudy-with-thunderstorms.svg create mode 100644 browser/themes/shared/weather/mostly-sunny.svg create mode 100644 browser/themes/shared/weather/night-clear.svg create mode 100644 browser/themes/shared/weather/night-hazy-moonlight.svg create mode 100644 browser/themes/shared/weather/night-mostly-clear.svg create mode 100644 browser/themes/shared/weather/night-mostly-cloudy-with-flurries.svg create mode 100644 browser/themes/shared/weather/night-partly-cloudy-with-showers.svg create mode 100644 browser/themes/shared/weather/night-partly-cloudy-with-thunderstorms.svg create mode 100644 browser/themes/shared/weather/partly-sunny-with-flurries.svg create mode 100644 browser/themes/shared/weather/partly-sunny.svg create mode 100644 browser/themes/shared/weather/rain.svg create mode 100644 browser/themes/shared/weather/showers.svg create mode 100644 browser/themes/shared/weather/snow.svg create mode 100644 browser/themes/shared/weather/sunny.svg create mode 100644 browser/themes/shared/weather/thunderstorms.svg create mode 100644 browser/themes/shared/weather/windy.svg create mode 100644 browser/themes/shared/webRTC-indicator.css create mode 100644 browser/themes/shared/webRTC-legacy-indicator.css create mode 100644 browser/themes/shared/webRTC-menubar-indicator.css create mode 100644 browser/themes/test/browser/browser.ini create mode 100644 browser/themes/test/browser/browser_expireThemes.js create mode 100644 browser/themes/test/xpcshell/test_BuiltInThemeConfig.js create mode 100644 browser/themes/test/xpcshell/xpcshell.ini create mode 100644 browser/themes/windows/browser-aero.css create mode 100644 browser/themes/windows/browser.css create mode 100644 browser/themes/windows/customizableui/panelUI.css create mode 100644 browser/themes/windows/downloads/allDownloadsView.css create mode 100644 browser/themes/windows/downloads/downloads.css create mode 100644 browser/themes/windows/jar.mn create mode 100644 browser/themes/windows/monitor-base.png create mode 100644 browser/themes/windows/monitor-border.png create mode 100644 browser/themes/windows/moz.build create mode 100644 browser/themes/windows/notification-icons/camera.png create mode 100644 browser/themes/windows/notification-icons/microphone.png create mode 100644 browser/themes/windows/notification-icons/screen.png create mode 100644 browser/themes/windows/pageInfo.css create mode 100644 browser/themes/windows/pageInfo.png create mode 100644 browser/themes/windows/places/organizer.css create mode 100644 browser/themes/windows/preferences/alwaysAsk.png create mode 100644 browser/themes/windows/preferences/application.png create mode 100644 browser/themes/windows/preferences/applications.css create mode 100644 browser/themes/windows/preferences/saveFile.png create mode 100644 browser/themes/windows/sanitizeDialog.css create mode 100644 browser/themes/windows/window-controls/close-highcontrast.svg create mode 100644 browser/themes/windows/window-controls/close-themes.svg create mode 100644 browser/themes/windows/window-controls/close.svg create mode 100644 browser/themes/windows/window-controls/maximize-highcontrast.svg create mode 100644 browser/themes/windows/window-controls/maximize-themes.svg create mode 100644 browser/themes/windows/window-controls/maximize.svg create mode 100644 browser/themes/windows/window-controls/minimize-highcontrast.svg create mode 100644 browser/themes/windows/window-controls/minimize-themes.svg create mode 100644 browser/themes/windows/window-controls/minimize.svg create mode 100644 browser/themes/windows/window-controls/restore-highcontrast.svg create mode 100644 browser/themes/windows/window-controls/restore-themes.svg create mode 100644 browser/themes/windows/window-controls/restore.svg (limited to 'browser/themes') diff --git a/browser/themes/BuiltInThemeConfig.sys.mjs b/browser/themes/BuiltInThemeConfig.sys.mjs new file mode 100644 index 0000000000..76bee95de3 --- /dev/null +++ b/browser/themes/BuiltInThemeConfig.sys.mjs @@ -0,0 +1,552 @@ +/* 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/. */ + +/** + * A Map of themes built in to the browser, alongwith a Map of collections those themes belong to. Params for the objects contained + * within the map: + * @param {string} id + * The unique identifier for the theme. The map's key. + * @param {string} version + * The theme add-on's semantic version, as defined in its manifest. + * @param {string} path + * Path to the add-on files. + * @param {string} [expiry] + * Date in YYYY-MM-DD format. Optional. If defined, the themes in the collection can no longer be + * used after this date, unless the user has permission to retain it. + * @param {string} [collection] + * The collection id that the theme is a part of. Optional. + */ +export const BuiltInThemeConfig = new Map([ + [ + "firefox-compact-light@mozilla.org", + { + version: "1.2", + path: "resource://builtin-themes/light/", + }, + ], + [ + "firefox-compact-dark@mozilla.org", + { + version: "1.2", + path: "resource://builtin-themes/dark/", + }, + ], + [ + "firefox-alpenglow@mozilla.org", + { + version: "1.4", + path: "resource://builtin-themes/alpenglow/", + }, + ], + [ + "2022red-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2022red/", + collection: "true-colors", + }, + ], + [ + "2022orange-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2022orange/", + collection: "true-colors", + }, + ], + [ + "2022green-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2022green/", + collection: "true-colors", + }, + ], + [ + "2022yellow-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2022yellow/", + collection: "true-colors", + }, + ], + [ + "2022purple-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2022purple/", + collection: "true-colors", + }, + ], + [ + "2022blue-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2022blue/", + collection: "true-colors", + }, + ], + [ + "lush-soft-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2021lush/soft/", + collection: "life-in-color", + }, + ], + [ + "lush-balanced-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2021lush/balanced/", + collection: "life-in-color", + }, + ], + [ + "lush-bold-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2021lush/bold/", + collection: "life-in-color", + }, + ], + [ + "abstract-soft-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2021abstract/soft/", + collection: "life-in-color", + }, + ], + [ + "abstract-balanced-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2021abstract/balanced/", + collection: "life-in-color", + }, + ], + [ + "abstract-bold-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2021abstract/bold/", + collection: "life-in-color", + }, + ], + [ + "elemental-soft-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2021elemental/soft/", + collection: "life-in-color", + }, + ], + [ + "elemental-balanced-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2021elemental/balanced/", + collection: "life-in-color", + }, + ], + [ + "elemental-bold-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2021elemental/bold/", + collection: "life-in-color", + }, + ], + [ + "cheers-soft-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2021cheers/soft/", + collection: "life-in-color", + }, + ], + [ + "cheers-balanced-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2021cheers/balanced/", + collection: "life-in-color", + }, + ], + [ + "cheers-bold-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2021cheers/bold/", + collection: "life-in-color", + }, + ], + [ + "graffiti-soft-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2021graffiti/soft/", + collection: "life-in-color", + }, + ], + [ + "graffiti-balanced-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2021graffiti/balanced/", + collection: "life-in-color", + }, + ], + [ + "graffiti-bold-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2021graffiti/bold/", + collection: "life-in-color", + }, + ], + [ + "foto-soft-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2021foto/soft/", + collection: "life-in-color", + }, + ], + [ + "foto-balanced-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2021foto/balanced/", + collection: "life-in-color", + }, + ], + [ + "foto-bold-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2021foto/bold/", + collection: "life-in-color", + }, + ], + [ + "playmaker-soft-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2022playmaker/soft/", + collection: "independent-voices", + l10nId: { + description: "playmaker-colorway-description", + groupName: "playmaker-colorway-name", + }, + figureUrl: + "chrome://browser/content/colorways/assets/independent-voices-playmaker.avif", + }, + ], + [ + "playmaker-balanced-colorway@mozilla.org", + { + version: "1.1.2", + path: "resource://builtin-themes/colorways/2022playmaker/balanced/", + collection: "independent-voices", + l10nId: { + description: "playmaker-colorway-description", + groupName: "playmaker-colorway-name", + }, + figureUrl: + "chrome://browser/content/colorways/assets/independent-voices-playmaker.avif", + }, + ], + [ + "playmaker-bold-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2022playmaker/bold/", + collection: "independent-voices", + l10nId: { + description: "playmaker-colorway-description", + groupName: "playmaker-colorway-name", + }, + figureUrl: + "chrome://browser/content/colorways/assets/independent-voices-playmaker.avif", + }, + ], + [ + "expressionist-soft-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2022expressionist/soft/", + collection: "independent-voices", + l10nId: { + description: "expressionist-colorway-description", + groupName: "expressionist-colorway-name", + }, + figureUrl: + "chrome://browser/content/colorways/assets/independent-voices-expressionist.avif", + }, + ], + [ + "expressionist-balanced-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2022expressionist/balanced/", + collection: "independent-voices", + l10nId: { + description: "expressionist-colorway-description", + groupName: "expressionist-colorway-name", + }, + figureUrl: + "chrome://browser/content/colorways/assets/independent-voices-expressionist.avif", + }, + ], + [ + "expressionist-bold-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2022expressionist/bold/", + collection: "independent-voices", + l10nId: { + description: "expressionist-colorway-description", + groupName: "expressionist-colorway-name", + }, + figureUrl: + "chrome://browser/content/colorways/assets/independent-voices-expressionist.avif", + }, + ], + [ + "visionary-soft-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2022visionary/soft/", + collection: "independent-voices", + l10nId: { + description: "visionary-colorway-description", + groupName: "visionary-colorway-name", + }, + figureUrl: + "chrome://browser/content/colorways/assets/independent-voices-visionary.avif", + }, + ], + [ + "visionary-balanced-colorway@mozilla.org", + { + version: "1.1.2", + path: "resource://builtin-themes/colorways/2022visionary/balanced/", + collection: "independent-voices", + l10nId: { + description: "visionary-colorway-description", + groupName: "visionary-colorway-name", + }, + figureUrl: + "chrome://browser/content/colorways/assets/independent-voices-visionary.avif", + }, + ], + [ + "visionary-bold-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2022visionary/bold/", + collection: "independent-voices", + l10nId: { + description: "visionary-colorway-description", + groupName: "visionary-colorway-name", + }, + figureUrl: + "chrome://browser/content/colorways/assets/independent-voices-visionary.avif", + }, + ], + [ + "activist-soft-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2022activist/soft/", + collection: "independent-voices", + l10nId: { + description: "activist-colorway-description", + groupName: "activist-colorway-name", + }, + figureUrl: + "chrome://browser/content/colorways/assets/independent-voices-activist.avif", + }, + ], + [ + "activist-balanced-colorway@mozilla.org", + { + version: "1.1.2", + path: "resource://builtin-themes/colorways/2022activist/balanced/", + collection: "independent-voices", + l10nId: { + description: "activist-colorway-description", + groupName: "activist-colorway-name", + }, + figureUrl: + "chrome://browser/content/colorways/assets/independent-voices-activist.avif", + }, + ], + [ + "activist-bold-colorway@mozilla.org", + { + version: "1.1.2", + path: "resource://builtin-themes/colorways/2022activist/bold/", + collection: "independent-voices", + l10nId: { + description: "activist-colorway-description", + groupName: "activist-colorway-name", + }, + figureUrl: + "chrome://browser/content/colorways/assets/independent-voices-activist.avif", + }, + ], + [ + "dreamer-soft-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2022dreamer/soft/", + collection: "independent-voices", + l10nId: { + description: "dreamer-colorway-description", + groupName: "dreamer-colorway-name", + }, + figureUrl: + "chrome://browser/content/colorways/assets/independent-voices-dreamer.avif", + }, + ], + [ + "dreamer-balanced-colorway@mozilla.org", + { + version: "1.1.2", + path: "resource://builtin-themes/colorways/2022dreamer/balanced/", + collection: "independent-voices", + l10nId: { + description: "dreamer-colorway-description", + groupName: "dreamer-colorway-name", + }, + figureUrl: + "chrome://browser/content/colorways/assets/independent-voices-dreamer.avif", + }, + ], + [ + "dreamer-bold-colorway@mozilla.org", + { + version: "1.1.1", + path: "resource://builtin-themes/colorways/2022dreamer/bold/", + collection: "independent-voices", + l10nId: { + description: "dreamer-colorway-description", + groupName: "dreamer-colorway-name", + }, + figureUrl: + "chrome://browser/content/colorways/assets/independent-voices-dreamer.avif", + }, + ], + [ + "innovator-soft-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2022innovator/soft/", + collection: "independent-voices", + l10nId: { + description: "innovator-colorway-description", + groupName: "innovator-colorway-name", + }, + figureUrl: + "chrome://browser/content/colorways/assets/independent-voices-innovator.avif", + }, + ], + [ + "innovator-balanced-colorway@mozilla.org", + { + version: "1.1.1", + path: "resource://builtin-themes/colorways/2022innovator/balanced/", + collection: "independent-voices", + l10nId: { + description: "innovator-colorway-description", + groupName: "innovator-colorway-name", + }, + figureUrl: + "chrome://browser/content/colorways/assets/independent-voices-innovator.avif", + }, + ], + [ + "innovator-bold-colorway@mozilla.org", + { + version: "1.1", + path: "resource://builtin-themes/colorways/2022innovator/bold/", + collection: "independent-voices", + l10nId: { + description: "innovator-colorway-description", + groupName: "innovator-colorway-name", + }, + figureUrl: + "chrome://browser/content/colorways/assets/independent-voices-innovator.avif", + }, + ], +]); + +const ColorwayCollections = [ + { + id: "life-in-color", + expiry: "2022-02-08", + }, + { + id: "true-colors", + expiry: "2022-05-03", + }, + { + id: "independent-voices", + expiry: "2023-01-17", + l10nId: { + title: "colorway-collection-independent-voices", + description: "colorway-collection-independent-voices-description", + }, + cardImagePath: + "chrome://browser/content/colorways/assets/independent-voices-collection-banner.avif", + figureUrl: + "chrome://browser/content/colorways/assets/independent-voices-collection.avif", + }, +]; + +export function _applyColorwayConfig(collections) { + const collectionsSorted = collections + .map(({ expiry, ...rest }) => ({ + expiry: new Date(expiry), + ...rest, + })) + .sort((a, b) => a.expiry - b.expiry); + const collectionsMap = collectionsSorted.reduce((map, c) => { + map.set(c.id, c); + return map; + }, new Map()); + for (let [key, value] of BuiltInThemeConfig.entries()) { + if (value.collection) { + const collectionConfig = collectionsMap.get(value.collection); + BuiltInThemeConfig.set(key, { + ...value, + expiry: collectionConfig.expiry, + }); + } + } + BuiltInThemeConfig.findActiveColorwayCollection = (now = new Date()) => { + let collection = null; + let start = 0; + let end = collectionsSorted.length - 1; + while (start <= end) { + const mid = Math.floor((start + end) / 2); + const c = collectionsSorted[mid]; + const diff = c.expiry - now; + if (diff < 0) { + // collection expired, look for newer one + start = mid + 1; + } else { + // collection not expired, check for older one + collection = c; + end = mid - 1; + } + } + return collection; + }; +} + +_applyColorwayConfig(ColorwayCollections); diff --git a/browser/themes/BuiltInThemes.sys.mjs b/browser/themes/BuiltInThemes.sys.mjs new file mode 100644 index 0000000000..f4c3ce5682 --- /dev/null +++ b/browser/themes/BuiltInThemes.sys.mjs @@ -0,0 +1,325 @@ +/* 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 { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs"; + +const lazy = {}; + +ChromeUtils.defineESModuleGetters(lazy, { + BuiltInThemeConfig: "resource:///modules/BuiltInThemeConfig.sys.mjs", +}); + +XPCOMUtils.defineLazyModuleGetters(lazy, { + AddonManager: "resource://gre/modules/AddonManager.jsm", +}); + +const ColorwayL10n = new Localization(["browser/colorways.ftl"], true); + +const kActiveThemePref = "extensions.activeThemeID"; +const kRetainedThemesPref = "browser.theme.retainedExpiredThemes"; + +const ColorwayIntensityIdPostfixToL10nMap = [ + ["-soft-colorway@mozilla.org", "colorway-intensity-soft"], + ["-balanced-colorway@mozilla.org", "colorway-intensity-balanced"], + ["-bold-colorway@mozilla.org", "colorway-intensity-bold"], +]; + +XPCOMUtils.defineLazyPreferenceGetter( + lazy, + "retainedThemes", + kRetainedThemesPref, + null, + null, + val => { + if (!val) { + return []; + } + + let parsedVal; + try { + parsedVal = JSON.parse(val); + } catch (ex) { + console.log(`${kRetainedThemesPref} has invalid value.`); + return []; + } + + return parsedVal; + } +); + +class _BuiltInThemes { + /** + * The list of themes to be installed. This is exposed on the class so tests + * can set custom config files. + */ + builtInThemeMap = lazy.BuiltInThemeConfig; + + /** + * @param {string} id An addon's id string. + * @returns {string} + * If `id` refers to a built-in theme, returns a path pointing to the + * theme's preview image. Null otherwise. + */ + previewForBuiltInThemeId(id) { + let theme = this.builtInThemeMap.get(id); + if (theme) { + return `${theme.path}preview.svg`; + } + + return null; + } + + /** + * @param {string} id An addon's id string. + * @return {boolean} + * True if the theme with id `id` is a monochromatic theme. + */ + isMonochromaticTheme(id) { + return id.endsWith("-colorway@mozilla.org"); + } + + /** + * If the active theme is built-in, this function calls + * AddonManager.maybeInstallBuiltinAddon for that theme. + */ + maybeInstallActiveBuiltInTheme() { + const activeThemeID = Services.prefs.getStringPref( + kActiveThemePref, + "default-theme@mozilla.org" + ); + let activeBuiltInTheme = this.builtInThemeMap.get(activeThemeID); + + if (activeBuiltInTheme) { + lazy.AddonManager.maybeInstallBuiltinAddon( + activeThemeID, + activeBuiltInTheme.version, + `resource://builtin-themes/${activeBuiltInTheme.path}` + ); + } + } + + /** + * Ensures that all built-in themes are installed and expired themes are + * uninstalled. + */ + async ensureBuiltInThemes() { + let installPromises = []; + installPromises.push(this._uninstallExpiredThemes()); + + const now = new Date(); + this.monochromaticSortIndices = new Map(); + let monochromaticSortIndex = 0; + for (let [id, themeInfo] of this.builtInThemeMap.entries()) { + if ( + !themeInfo.expiry || + lazy.retainedThemes.includes(id) || + new Date(themeInfo.expiry) > now + ) { + installPromises.push( + lazy.AddonManager.maybeInstallBuiltinAddon( + id, + themeInfo.version, + themeInfo.path + ) + ); + if (this.isMonochromaticTheme(id)) { + // Monochromatic themes get sorted in the UI according to their + // position in the config, implied by this loop over + // builtInThemeMap.entries(). + this.monochromaticSortIndices.set(id, monochromaticSortIndex++); + } + } + } + + await Promise.all(installPromises); + } + + /** + * @param {string} id + * A theme's ID. + * @returns {boolean} + * Returns true if the theme is expired. False otherwise. + * @note This looks up the id in a Map rather than accessing a property on + * the addon itself. That makes calls to this function O(m) where m is the + * total number of built-in themes offered now or in the past. Since we + * are using a Map, calls are O(1) in the average case. + */ + themeIsExpired(id) { + let themeInfo = this.builtInThemeMap.get(id); + return themeInfo?.expiry && new Date(themeInfo.expiry) < new Date(); + } + + /** + * @param {string} id + * The theme's id. + * @return {boolean} + * True if the theme with id `id` is both expired and retained. That is, + * the user has the ability to use it after its expiry date. + */ + isRetainedExpiredTheme(id) { + return lazy.retainedThemes.includes(id) && this.themeIsExpired(id); + } + + /** + * @param {string} id + * The theme's id. + * @return {boolean} + * True if the theme with id `id` is from the currently active theme. + */ + isActiveTheme(id) { + return ( + id === + Services.prefs.getStringPref( + kActiveThemePref, + "default-theme@mozilla.org" + ) + ); + } + + /** + * Uninstalls themes after they expire. If the expired theme is active, then + * it is not uninstalled. Instead, it is saved so that the user can use it + * indefinitely. + */ + async _uninstallExpiredThemes() { + const activeThemeID = Services.prefs.getStringPref( + kActiveThemePref, + "default-theme@mozilla.org" + ); + const now = new Date(); + const expiredThemes = Array.from(this.builtInThemeMap.entries()).filter( + ([id, themeInfo]) => + !!themeInfo.expiry && + !lazy.retainedThemes.includes(id) && + new Date(themeInfo.expiry) <= now + ); + for (let [id] of expiredThemes) { + if (id == activeThemeID) { + this._retainLimitedTimeTheme(id); + } else { + try { + let addon = await lazy.AddonManager.getAddonByID(id); + if (addon) { + await addon.uninstall(); + } + } catch (e) { + console.error(`Failed to uninstall expired theme ${id}`); + } + } + } + } + + /** + * Set a pref to ensure that the user can continue to use a specified theme + * past its expiry date. + * @param {string} id + * The ID of the theme to retain. + */ + _retainLimitedTimeTheme(id) { + if (!lazy.retainedThemes.includes(id)) { + lazy.retainedThemes.push(id); + Services.prefs.setStringPref( + kRetainedThemesPref, + JSON.stringify(lazy.retainedThemes) + ); + } + } + + /** + * Removes from the retained expired theme list colorways themes that have been + * migrated from the one installed in the built-in XPIProvider location + * to an AMO hosted xpi installed in the user profile XPIProvider location. + * @param {string} id + * The ID of the theme to remove from the retained themes list. + */ + + unretainMigratedColorwayTheme(id) { + if (lazy.retainedThemes.includes(id)) { + const retainedThemes = lazy.retainedThemes.filter( + retainedThemeId => retainedThemeId !== id + ); + Services.prefs.setStringPref( + kRetainedThemesPref, + JSON.stringify(retainedThemes) + ); + } + } + + /** + * Finds the active colorway collection. + * @return {object} + * Colorway Collection + */ + findActiveColorwayCollection() { + return this.builtInThemeMap.findActiveColorwayCollection(); + } + + /** + * @return {boolean} + * Whether a specific theme is part of the currently active colorway + * collection. + */ + isColorwayFromCurrentCollection(id) { + let collection = this.findActiveColorwayCollection(); + return ( + collection && this.builtInThemeMap.get(id)?.collection == collection.id + ); + } + + /** + * Colorway collections are usually divided into and presented as "groups". + * A group either contains closely related colorways, e.g. stemming from the + * same base color but with different intensities (soft, balanced, and bold), + * or if the current collection doesn't have intensities, each colorway is + * their own group. Group name localization is optional. + * @param {string} id + * The ID of the colorway add-on. + * @return {string} + * Localized colorway group name. null if there's no such name, in which + * case the caller should fall back on getting a name from the add-on API. + */ + getLocalizedColorwayGroupName(colorwayId) { + return this._getColorwayString(colorwayId, "groupName"); + } + + /** + * @param {string} id + * The ID of the colorway add-on. + * @return {string} + * L10nId for intensity value of the colorway with the provided id, null if + * there's none. + */ + getColorwayIntensityL10nId(colorwayId) { + const result = ColorwayIntensityIdPostfixToL10nMap.find( + ([postfix, l10nId]) => colorwayId.endsWith(postfix) + ); + return result ? result[1] : null; + } + + /** + * @param {string} id + * The ID of the colorway add-on. + * @return {string} + * Localized description of the colorway with the provided id, null if + * there's none. + */ + getLocalizedColorwayDescription(colorwayId) { + return this._getColorwayString(colorwayId, "description"); + } + + _getColorwayString(colorwayId, stringType) { + let l10nId = this.builtInThemeMap.get(colorwayId)?.l10nId?.[stringType]; + let s; + if (l10nId) { + [s] = ColorwayL10n.formatMessagesSync([ + { + id: l10nId, + }, + ]); + } + return s?.value || null; + } +} + +export var BuiltInThemes = new _BuiltInThemes(); diff --git a/browser/themes/LICENSE b/browser/themes/LICENSE new file mode 100644 index 0000000000..39d4f8fdf5 --- /dev/null +++ b/browser/themes/LICENSE @@ -0,0 +1,2 @@ +All files in this directory are assumed to be licensed under the MPL 2 license +which is used throughout this codebase. diff --git a/browser/themes/ThemeVariableMap.sys.mjs b/browser/themes/ThemeVariableMap.sys.mjs new file mode 100644 index 0000000000..f2fd99193d --- /dev/null +++ b/browser/themes/ThemeVariableMap.sys.mjs @@ -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/. */ + +export const ThemeVariableMap = [ + [ + "--lwt-accent-color-inactive", + { + lwtProperty: "accentcolorInactive", + }, + ], + [ + "--lwt-background-alignment", + { + isColor: false, + lwtProperty: "backgroundsAlignment", + }, + ], + [ + "--lwt-background-tiling", + { + isColor: false, + lwtProperty: "backgroundsTiling", + }, + ], + [ + "--tab-loading-fill", + { + lwtProperty: "tab_loading", + optionalElementID: "tabbrowser-tabs", + }, + ], + [ + "--lwt-tab-text", + { + lwtProperty: "tab_text", + }, + ], + [ + "--lwt-tab-line-color", + { + lwtProperty: "tab_line", + optionalElementID: "TabsToolbar", + }, + ], + [ + "--lwt-background-tab-separator-color", + { + lwtProperty: "tab_background_separator", + }, + ], + [ + "--toolbar-bgcolor", + { + lwtProperty: "toolbarColor", + }, + ], + [ + "--toolbar-color", + { + lwtProperty: "toolbar_text", + }, + ], + [ + "--lwt-tabs-border-color", + { + lwtProperty: "toolbar_top_separator", + optionalElementID: "navigator-toolbox", + }, + ], + [ + "--toolbarseparator-color", + { + lwtProperty: "toolbar_vertical_separator", + }, + ], + [ + "--chrome-content-separator-color", + { + lwtProperty: "toolbar_bottom_separator", + }, + ], + [ + "--toolbarbutton-icon-fill", + { + lwtProperty: "icon_color", + }, + ], + [ + "--lwt-toolbarbutton-icon-fill-attention", + { + lwtProperty: "icon_attention_color", + }, + ], + [ + "--toolbarbutton-hover-background", + { + lwtProperty: "button_background_hover", + }, + ], + [ + "--toolbarbutton-active-background", + { + lwtProperty: "button_background_active", + }, + ], + [ + "--lwt-selected-tab-background-color", + { + lwtProperty: "tab_selected", + }, + ], + [ + "--autocomplete-popup-highlight-background", + { + lwtProperty: "popup_highlight", + }, + ], + [ + "--autocomplete-popup-highlight-color", + { + lwtProperty: "popup_highlight_text", + }, + ], + [ + "--sidebar-background-color", + { + lwtProperty: "sidebar", + optionalElementID: "sidebar-box", + processColor(rgbaChannels, element) { + if (!rgbaChannels) { + element.removeAttribute("lwt-sidebar"); + return null; + } + const { r, g, b } = rgbaChannels; + element.setAttribute("lwt-sidebar", "true"); + // Drop alpha channel + return `rgb(${r}, ${g}, ${b})`; + }, + }, + ], + [ + "--sidebar-text-color", + { + lwtProperty: "sidebar_text", + optionalElementID: "sidebar-box", + }, + ], + [ + "--sidebar-border-color", + { + lwtProperty: "sidebar_border", + optionalElementID: "browser", + }, + ], + [ + "--tabpanel-background-color", + { + lwtProperty: "ntp_background", + processColor(rgbaChannels) { + if ( + !rgbaChannels || + !Services.prefs.getBoolPref("browser.newtabpage.enabled") + ) { + // We only set the tabpanel background to the new tab background color + // if the user uses about:home for new tabs. Otherwise, we flash a + // colorful background when a new tab is opened. We will flash the + // newtab color in new windows if the user uses about:home for new + // tabs but not new windows. However, the flash is concealed by the OS + // window-open animation. + return null; + } + // Drop alpha channel + let { r, g, b } = rgbaChannels; + return `rgb(${r}, ${g}, ${b})`; + }, + }, + ], +]; + +export const ThemeContentPropertyList = [ + "ntp_background", + "ntp_card_background", + "ntp_text", + "sidebar", + "sidebar_highlight", + "sidebar_highlight_text", + "sidebar_text", + "zap_gradient", +]; diff --git a/browser/themes/Windows8WindowFrameColor.sys.mjs b/browser/themes/Windows8WindowFrameColor.sys.mjs new file mode 100644 index 0000000000..dfca020255 --- /dev/null +++ b/browser/themes/Windows8WindowFrameColor.sys.mjs @@ -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/. */ + +import { WindowsRegistry as Registry } from "resource://gre/modules/WindowsRegistry.sys.mjs"; + +export var Windows8WindowFrameColor = { + _windowFrameColor: null, + + get() { + if (this._windowFrameColor) { + return this._windowFrameColor; + } + + const HKCU = Ci.nsIWindowsRegKey.ROOT_KEY_CURRENT_USER; + const dwmKey = "Software\\Microsoft\\Windows\\DWM"; + let customizationColor = Registry.readRegKey( + HKCU, + dwmKey, + "ColorizationColor" + ); + if (customizationColor == undefined) { + // Seems to be the default color (hardcoded because of bug 1065998) + return [158, 158, 158]; + } + + // The color returned from the Registry is in decimal form. + let customizationColorHex = customizationColor.toString(16); + + // Zero-pad the number just to make sure that it is 8 digits. + customizationColorHex = ("00000000" + customizationColorHex).substr(-8); + let customizationColorArray = customizationColorHex.match(/../g); + let [, fgR, fgG, fgB] = customizationColorArray.map(val => + parseInt(val, 16) + ); + let colorizationColorBalance = Registry.readRegKey( + HKCU, + dwmKey, + "ColorizationColorBalance" + ); + if (colorizationColorBalance == undefined) { + colorizationColorBalance = 78; + } + + // Window frame base color when Color Intensity is at 0, see bug 1004576. + let frameBaseColor = 217; + let alpha = colorizationColorBalance / 100; + + // Alpha-blend the foreground color with the frame base color. + let r = Math.round(fgR * alpha + frameBaseColor * (1 - alpha)); + let g = Math.round(fgG * alpha + frameBaseColor * (1 - alpha)); + let b = Math.round(fgB * alpha + frameBaseColor * (1 - alpha)); + return (this._windowFrameColor = [r, g, b]); + }, +}; diff --git a/browser/themes/addons/alpenglow/background-gradient-dark.svg b/browser/themes/addons/alpenglow/background-gradient-dark.svg new file mode 100644 index 0000000000..6ab26b42d5 --- /dev/null +++ b/browser/themes/addons/alpenglow/background-gradient-dark.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/addons/alpenglow/background-gradient.svg b/browser/themes/addons/alpenglow/background-gradient.svg new file mode 100644 index 0000000000..a0b54a46ad --- /dev/null +++ b/browser/themes/addons/alpenglow/background-gradient.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/addons/alpenglow/background-noodles-left-dark.svg b/browser/themes/addons/alpenglow/background-noodles-left-dark.svg new file mode 100644 index 0000000000..40d99a78b6 --- /dev/null +++ b/browser/themes/addons/alpenglow/background-noodles-left-dark.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/addons/alpenglow/background-noodles-left.svg b/browser/themes/addons/alpenglow/background-noodles-left.svg new file mode 100644 index 0000000000..ee2b4b6b75 --- /dev/null +++ b/browser/themes/addons/alpenglow/background-noodles-left.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/addons/alpenglow/background-noodles-right-dark.svg b/browser/themes/addons/alpenglow/background-noodles-right-dark.svg new file mode 100644 index 0000000000..b8a53679d9 --- /dev/null +++ b/browser/themes/addons/alpenglow/background-noodles-right-dark.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/addons/alpenglow/background-noodles-right.svg b/browser/themes/addons/alpenglow/background-noodles-right.svg new file mode 100644 index 0000000000..da1357b8c7 --- /dev/null +++ b/browser/themes/addons/alpenglow/background-noodles-right.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/addons/alpenglow/icon.svg b/browser/themes/addons/alpenglow/icon.svg new file mode 100644 index 0000000000..591ba2fc1b --- /dev/null +++ b/browser/themes/addons/alpenglow/icon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + diff --git a/browser/themes/addons/alpenglow/manifest.json b/browser/themes/addons/alpenglow/manifest.json new file mode 100644 index 0000000000..5dc20b33e8 --- /dev/null +++ b/browser/themes/addons/alpenglow/manifest.json @@ -0,0 +1,139 @@ +{ + "manifest_version": 2, + + "applications": { + "gecko": { + "id": "firefox-alpenglow@mozilla.org" + } + }, + + "name": "Firefox Alpenglow", + "description": "Use a colorful appearance for buttons, menus, and windows.", + "version": "1.4", + "icons": { "32": "icon.svg" }, + + "theme": { + "images": { + "additional_backgrounds": [ + "background-noodles-right.svg", + "background-noodles-left.svg", + "background-gradient.svg" + ] + }, + + "properties": { + "additional_backgrounds_alignment": [ + "right top", + "left top", + "right top" + ], + "additional_backgrounds_tiling": ["no-repeat", "no-repeat", "repeat-x"], + "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)" + }, + "colors": { + "frame": "hsla(240, 20%, 98%, 1)", + "toolbar": "hsla(0, 0%, 100%, .76)", + "button_background_active": "hsla(240, 26%, 11%, .16)", + "button_background_hover": "hsla(240, 26%, 11%, .08)", + "icons": "hsla(258, 66%, 48%, 1)", + "icons_attention": "hsla(180, 100%, 32%, 1)", + "toolbar_text": "hsla(261, 53%, 15%, 1)", + "toolbar_vertical_separator": "hsla(261, 53%, 15%, .2)", + "toolbar_field": "hsla(0, 0%, 100%, .8)", + "toolbar_field_focus": "hsla(261, 53%, 15%, .96)", + "toolbar_field_text": "hsla(261, 53%, 15%, 1)", + "toolbar_field_text_focus": "hsla(255, 100%, 94%, 1)", + "toolbar_field_border": "transparent", + "toolbar_field_border_focus": "hsla(265, 100%, 72%, 1)", + "toolbar_field_highlight": "hsla(265, 100%, 72%, .32)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsla(261, 53%, 15%, .32)", + "bookmark_text": "hsla(261, 53%, 15%, 1)", + "tab_text": "hsla(261, 53%, 15%, 1)", + "tab_background_text": "hsla(261, 53%, 15%, 1)", + "tab_background_separator": "hsla(261, 53%, 15%, 1)", + "tab_line": "hsla(265, 100%, 72%, 1)", + "tab_loading": "hsla(265, 100%, 72%, 1)", + "ntp_background": "#F9F9FB", + "ntp_text": "hsla(261, 53%, 15%, 1)", + "popup": "hsla(254, 46%, 21%, 1)", + "popup_text": "hsla(255, 100%, 94%, 1)", + "popup_border": "hsla(255, 100%, 94%, .32)", + "popup_highlight": "hsla(255, 100%, 94%, .12)", + "popup_highlight_text": "hsla(0, 0%, 100%, 1)", + "sidebar": "hsla(240, 15%, 95%, 1)", + "sidebar_text": "hsla(261, 53%, 15%, 1)", + "sidebar_border": "hsla(261, 53%, 15%, .24)", + "sidebar_highlight": "hsla(265, 100%, 72%, 1)", + "sidebar_highlight_text": "hsla(0, 0%, 100%, 1)", + "focus_outline": "hsla(258, 65%, 48%, 1)" + } + }, + "dark_theme": { + "images": { + "additional_backgrounds": [ + "background-noodles-right-dark.svg", + "background-noodles-left-dark.svg", + "background-gradient-dark.svg" + ] + }, + + "properties": { + "additional_backgrounds_alignment": [ + "right top", + "left top", + "right top" + ], + "additional_backgrounds_tiling": ["no-repeat", "no-repeat", "repeat-x"], + "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)" + }, + "colors": { + "frame": "hsla(240, 20%, 98%, 1)", + "toolbar": "hsla(254, 46%, 21%, .96)", + "button_background_active": "hsla(255, 100%, 94%, .24)", + "button_background_hover": "hsla(255, 100%, 94%, .12)", + "icons": "hsla(271, 100%, 77%, 1)", + "icons_attention": "hsla(157, 100%, 66%, 1)", + "toolbar_text": "hsla(255, 100%, 94%, 1)", + "toolbar_vertical_separator": "hsla(271, 100%, 77%, .4)", + "toolbar_field": "hsla(250, 43%, 25%, 1)", + "toolbar_field_focus": "hsla(250, 43%, 25%, .98)", + "toolbar_field_text": "hsla(255, 100%, 94%, 1)", + "toolbar_field_text_focus": "hsla(255, 100%, 94%, 1)", + "toolbar_field_border": "transparent", + "toolbar_field_border_focus": "hsla(265, 100%, 72%, 1)", + "toolbar_field_highlight": "hsla(265, 100%, 72%, .32)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsla(245, 38%, 33%, .96)", + "bookmark_text": "hsla(255, 100%, 94%, 1)", + "tab_selected": "rgb(60, 31, 123)", + "tab_text": "hsla(255, 100%, 94%, 1)", + "tab_background_text": "hsla(255, 100%, 94%, 1)", + "tab_background_separator": "hsla(255, 100%, 94%, 1)", + "tab_line": "hsla(265, 100%, 72%, 1)", + "tab_loading": "hsla(265, 100%, 72%, 1)", + "ntp_background": "#2A2A2E", + "ntp_text": "hsla(255, 100%, 94%, 1)", + "popup": "hsla(250, 43%, 25%, 1)", + "popup_text": "hsla(255, 100%, 94%, 1)", + "popup_border": "hsla(255, 100%, 94%, .32)", + "popup_highlight": "hsla(255, 100%, 94%, .12)", + "popup_highlight_text": "hsla(0, 0%, 100%, 1)", + "sidebar": "hsla(250, 43%, 25%, 1)", + "sidebar_text": "hsla(255, 100%, 94%, 1)", + "sidebar_border": "hsla(255, 100%, 94%, .24)", + "sidebar_highlight": "hsla(259, 76%, 58%, 1)", + "sidebar_highlight_text": "hsla(0, 0%, 100%, 1)", + "focus_outline": "hsla(265, 100%, 72%, 1)" + } + }, + + "theme_experiment": { + "colors": { + "focus_outline": "--focus-outline-color" + }, + "properties": { + "zap_gradient": "--panel-separator-zap-gradient" + } + } +} diff --git a/browser/themes/addons/alpenglow/preview.svg b/browser/themes/addons/alpenglow/preview.svg new file mode 100644 index 0000000000..887129ce3b --- /dev/null +++ b/browser/themes/addons/alpenglow/preview.svg @@ -0,0 +1,4 @@ + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/abstract/balanced/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/abstract/balanced/icon.svg new file mode 100644 index 0000000000..0bcba9aef3 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/abstract/balanced/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/abstract/balanced/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/abstract/balanced/manifest.json new file mode 100644 index 0000000000..25da542d1a --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/abstract/balanced/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "abstract-balanced-colorway@mozilla.org" + } + }, + "name": "Abstract – Balanced", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 100%)", + "tab_text": "hsl(0, 0%, 0%)", + "tab_selected": "hsl(16, 73%, 97%)", + "tab_line": "transparent", + "tab_loading": "hsl(15, 62%, 40%)", + "tab_loading_inactive": "hsl(16, 100%, 82%)", + "frame": "hsl(15, 62%, 34%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(0, 0%, 0%)", + "popup_border": "hsl(15, 74%, 63%)", + "popup_highlight": "hsla(15, 84%, 65%, 0.3)", + "popup_highlight_text": "hsl(0, 0%, 0%)", + "toolbar": "hsl(15, 62%, 40%)", + "toolbar_text": "hsl(0, 0%, 100%)", + "toolbar_field": "hsl(16, 73%, 97%)", + "toolbar_field_text": "hsl(0, 0%, 0%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 179, 244, 1)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(15, 62%, 34%)", + "ntp_background": "hsl(15, 39%, 80%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(0, 0%, 0%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(0, 0%, 0%)", + "sidebar_highlight": "hsla(15, 84%, 65%, 0.3)", + "address_bar_box": "hsl(15, 62%, 34%)", + "address_bar_box_hover": "hsla(15, 62%, 34%, 0.8)", + "address_bar_box_active": "hsla(15, 62%, 34%, 0.65)", + "address_bar_box_focus": "hsl(15, 62%, 40%)", + "address_bar_box_text": "hsl(0, 0%, 100%)", + "address_bar_url_color": "hsl(15, 62%, 40%)", + "panel_item_hover": "hsla(15, 84%, 65%, 0.3)", + "panel_item_active": "hsla(15, 84%, 65%, 0.45)", + "panel_separator": "hsl(15, 74%, 63%)", + "icons_attention": "hsl(16, 100%, 82%)", + "toolbar_field_icons_attention": "hsl(15, 62%, 40%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_update_icon_color": "hsl(94, 100%, 71%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2021-life-in-color/abstract/balanced/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/abstract/balanced/preview.svg new file mode 100644 index 0000000000..24dc27d4c6 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/abstract/balanced/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/abstract/bold/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/abstract/bold/icon.svg new file mode 100644 index 0000000000..7f5f32157c --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/abstract/bold/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/abstract/bold/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/abstract/bold/manifest.json new file mode 100644 index 0000000000..eda2056e0e --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/abstract/bold/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "abstract-bold-colorway@mozilla.org" + } + }, + "name": "Abstract – Bold", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(15, 89%, 86%)", + "tab_text": "hsl(15, 89%, 86%)", + "tab_selected": "hsl(12, 5%, 21%)", + "tab_line": "hsl(15, 100%, 86%)", + "tab_loading": "hsl(15, 59%, 75%)", + "tab_loading_inactive": "hsl(15, 59%, 75%)", + "frame": "hsl(15, 10%, 16%)", + "popup": "hsl(12, 5%, 21%)", + "popup_text": "hsl(15, 89%, 86%)", + "popup_border": "hsl(15, 100%, 86%)", + "popup_highlight": "hsla(15, 100%, 86%, 0.2)", + "popup_highlight_text": "hsl(15, 89%, 86%)", + "toolbar": "hsl(18, 10%, 25%)", + "toolbar_text": "hsl(15, 89%, 86%)", + "toolbar_field": "hsl(15, 10%, 16%)", + "toolbar_field_text": "hsl(15, 89%, 86%)", + "toolbar_field_focus": "hsl(12, 5%, 21%)", + "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(15, 10%, 16%)", + "ntp_background": "hsl(20, 9%, 13%)", + "ntp_card_background": "hsl(12, 5%, 21%)", + "ntp_text": "hsl(15, 89%, 86%)", + "sidebar": "hsl(12, 5%, 21%)", + "sidebar_text": "hsl(15, 89%, 86%)", + "sidebar_highlight": "hsla(15, 100%, 86%, 0.2)", + "address_bar_box": "hsl(12, 5%, 21%)", + "address_bar_box_hover": "hsla(12, 5%, 21%, 0.8)", + "address_bar_box_active": "hsla(12, 5%, 21%, 0.65)", + "address_bar_box_focus": "hsl(18, 10%, 25%)", + "address_bar_box_text": "hsl(15, 89%, 86%)", + "address_bar_url_color": "hsl(15, 89%, 82%)", + "panel_item_hover": "hsla(15, 100%, 86%, 0.2)", + "panel_item_active": "hsla(15, 100%, 86%, 0.35)", + "panel_separator": "hsl(15, 100%, 86%)", + "icons_attention": "hsl(15, 59%, 75%)", + "toolbar_field_icons_attention": "hsl(15, 59%, 75%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_update_icon_color": "hsl(94, 100%, 71%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2021-life-in-color/abstract/bold/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/abstract/bold/preview.svg new file mode 100644 index 0000000000..ff37080bdd --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/abstract/bold/preview.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/abstract/soft/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/abstract/soft/icon.svg new file mode 100644 index 0000000000..e36b822f9a --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/abstract/soft/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/abstract/soft/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/abstract/soft/manifest.json new file mode 100644 index 0000000000..79eadac692 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/abstract/soft/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "abstract-soft-colorway@mozilla.org" + } + }, + "name": "Abstract – Soft", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(30, 5%, 8%)", + "tab_text": "hsl(30, 5%, 8%)", + "tab_selected": "hsl(0, 0%, 100%)", + "tab_line": "transparent", + "tab_loading": "hsl(15, 70%, 38%)", + "tab_loading_inactive": "hsl(15, 70%, 38%)", + "frame": "hsl(15, 100%, 78%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(30, 5%, 8%)", + "popup_border": "hsl(15, 71%, 80%)", + "popup_highlight": "hsla(15, 90%, 50%, 0.2)", + "popup_highlight_text": "hsl(30, 5%, 8%)", + "toolbar": "hsl(15, 100%, 86%)", + "toolbar_text": "hsl(30, 5%, 8%)", + "toolbar_field": "hsl(15, 100%, 78%)", + "toolbar_field_text": "hsl(30, 5%, 8%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(15, 100%, 78%)", + "ntp_background": "hsl(16, 73%, 97%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(30, 5%, 8%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(30, 5%, 8%)", + "sidebar_highlight": "hsla(15, 90%, 50%, 0.2)", + "address_bar_box": "hsl(0, 0%, 100%)", + "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)", + "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)", + "address_bar_box_focus": "hsl(15, 100%, 86%)", + "address_bar_box_text": "hsl(30, 5%, 8%)", + "address_bar_url_color": "hsl(15, 70%, 38%)", + "panel_item_hover": "hsla(15, 90%, 50%, 0.2)", + "panel_item_active": "hsla(15, 90%, 50%, 0.35)", + "panel_separator": "hsl(15, 71%, 80%)", + "icons_attention": "hsl(15, 70%, 38%)", + "toolbar_field_icons_attention": "hsl(15, 70%, 38%)", + "tab_attention_dot": "hsl(146, 15%, 36%)", + "appmenu_update_icon_color": "hsl(146, 15%, 36%)", + "appmenu_info_icon_color": "hsl(203, 77%, 31%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2021-life-in-color/abstract/soft/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/abstract/soft/preview.svg new file mode 100644 index 0000000000..8e979444f9 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/abstract/soft/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/cheers/balanced/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/cheers/balanced/icon.svg new file mode 100644 index 0000000000..71e10b3326 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/cheers/balanced/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/cheers/balanced/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/cheers/balanced/manifest.json new file mode 100644 index 0000000000..61a2bc45c0 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/cheers/balanced/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "cheers-balanced-colorway@mozilla.org" + } + }, + "name": "Cheers – Balanced", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 0%)", + "tab_text": "hsl(0, 0%, 100%)", + "tab_selected": "hsl(0, 0%, 20%)", + "tab_line": "transparent", + "tab_loading": "hsl(42, 95%, 60%)", + "tab_loading_inactive": "hsl(42, 100%, 27%)", + "frame": "hsl(42, 95%, 60%)", + "popup": "hsl(0, 0%, 20%)", + "popup_text": "hsl(0, 0%, 100%)", + "popup_border": "hsl(42, 63%, 78%)", + "popup_highlight": "hsla(42, 100%, 62%, 0.22)", + "popup_highlight_text": "hsl(0, 0%, 100%)", + "toolbar": "hsl(42, 95%, 70%)", + "toolbar_text": "hsl(0, 0%, 0%)", + "toolbar_field": "hsl(0, 0%, 20%)", + "toolbar_field_text": "hsl(0, 0%, 100%)", + "toolbar_field_focus": "hsl(0, 0%, 20%)", + "toolbar_field_border_focus": "rgba(0, 179, 244, 1)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(42, 95%, 60%)", + "ntp_background": "hsl(0, 0%, 9%)", + "ntp_card_background": "hsl(0, 0%, 20%)", + "ntp_text": "hsl(0, 0%, 100%)", + "sidebar": "hsl(0, 0%, 20%)", + "sidebar_text": "hsl(0, 0%, 100%)", + "sidebar_highlight": "hsla(42, 100%, 62%, 0.22)", + "address_bar_box": "hsl(42, 95%, 60%)", + "address_bar_box_hover": "hsla(42, 95%, 60%, 0.8)", + "address_bar_box_active": "hsla(42, 95%, 60%, 0.65)", + "address_bar_box_focus": "hsl(42, 95%, 70%)", + "address_bar_box_text": "hsl(0, 0%, 0%)", + "address_bar_url_color": "hsl(42, 95%, 60%)", + "panel_item_hover": "hsla(42, 100%, 62%, 0.22)", + "panel_item_active": "hsla(42, 100%, 62%, 0.37)", + "panel_separator": "hsl(42, 63%, 78%)", + "icons_attention": "hsl(42, 100%, 27%)", + "toolbar_field_icons_attention": "hsl(42, 95%, 60%)", + "tab_attention_dot": "hsl(137, 15%, 36%)", + "appmenu_update_icon_color": "hsl(137, 15%, 36%)", + "appmenu_info_icon_color": "hsl(203, 77%, 31%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2021-life-in-color/cheers/balanced/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/cheers/balanced/preview.svg new file mode 100644 index 0000000000..1820af6cf3 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/cheers/balanced/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/cheers/bold/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/cheers/bold/icon.svg new file mode 100644 index 0000000000..224dba4eaf --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/cheers/bold/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/cheers/bold/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/cheers/bold/manifest.json new file mode 100644 index 0000000000..e9d4628b0d --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/cheers/bold/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "cheers-bold-colorway@mozilla.org" + } + }, + "name": "Cheers – Bold", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(42, 96%, 65%)", + "tab_text": "hsl(42, 96%, 65%)", + "tab_selected": "hsl(0, 0%, 16%)", + "tab_line": "hsl(42, 80%, 58%)", + "tab_loading": "hsl(42, 70%, 72%)", + "tab_loading_inactive": "hsl(42, 70%, 72%)", + "frame": "hsl(0, 0%, 11%)", + "popup": "hsl(0, 0%, 16%)", + "popup_text": "hsl(42, 96%, 65%)", + "popup_border": "hsl(42, 95%, 60%)", + "popup_highlight": "hsla(42, 95%, 60%, 0.2)", + "popup_highlight_text": "hsl(42, 96%, 65%)", + "toolbar": "hsl(0, 0%, 20%)", + "toolbar_text": "hsl(42, 96%, 65%)", + "toolbar_field": "hsl(0, 0%, 11%)", + "toolbar_field_text": "hsl(42, 96%, 65%)", + "toolbar_field_focus": "hsl(0, 0%, 16%)", + "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(0, 0%, 11%)", + "ntp_background": "hsl(0, 0%, 11%)", + "ntp_card_background": "hsl(0, 0%, 16%)", + "ntp_text": "hsl(42, 96%, 65%)", + "sidebar": "hsl(0, 0%, 16%)", + "sidebar_text": "hsl(42, 96%, 65%)", + "sidebar_highlight": "hsla(42, 95%, 60%, 0.2)", + "address_bar_box": "hsl(0, 0%, 16%)", + "address_bar_box_hover": "hsla(0, 0%, 16%, 0.8)", + "address_bar_box_active": "hsla(0, 0%, 16%, 0.65)", + "address_bar_box_focus": "hsl(0, 0%, 20%)", + "address_bar_box_text": "hsl(42, 96%, 65%)", + "address_bar_url_color": "hsl(42, 70%, 72%)", + "panel_item_hover": "hsla(42, 95%, 60%, 0.2)", + "panel_item_active": "hsla(42, 95%, 60%, 0.35)", + "panel_separator": "hsl(42, 95%, 60%)", + "icons_attention": "hsl(42, 70%, 72%)", + "toolbar_field_icons_attention": "hsl(42, 70%, 72%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_update_icon_color": "hsl(94, 100%, 71%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2021-life-in-color/cheers/bold/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/cheers/bold/preview.svg new file mode 100644 index 0000000000..ba16e58108 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/cheers/bold/preview.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/cheers/soft/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/cheers/soft/icon.svg new file mode 100644 index 0000000000..1b9132ccb9 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/cheers/soft/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/cheers/soft/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/cheers/soft/manifest.json new file mode 100644 index 0000000000..fbe7a2add5 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/cheers/soft/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "cheers-soft-colorway@mozilla.org" + } + }, + "name": "Cheers – Soft", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 0%)", + "tab_text": "hsl(0, 0%, 0%)", + "tab_selected": "hsl(0, 0%, 100%)", + "tab_line": "transparent", + "tab_loading": "hsl(42, 100%, 30%)", + "tab_loading_inactive": "hsl(42, 100%, 30%)", + "frame": "hsl(42, 100%, 70%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(0, 0%, 0%)", + "popup_border": "hsl(42, 100%, 60%)", + "popup_highlight": "hsla(42, 100%, 78%, 0.9)", + "popup_highlight_text": "hsl(0, 0%, 0%)", + "toolbar": "hsl(42, 100%, 84%)", + "toolbar_text": "hsl(0, 0%, 0%)", + "toolbar_field": "hsl(42, 100%, 70%)", + "toolbar_field_text": "hsl(0, 0%, 0%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(42, 100%, 70%)", + "ntp_background": "hsl(43, 61%, 92%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(0, 0%, 0%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(0, 0%, 0%)", + "sidebar_highlight": "hsla(42, 100%, 78%, 0.9)", + "address_bar_box": "hsl(0, 0%, 100%)", + "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)", + "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)", + "address_bar_box_focus": "hsl(42, 100%, 84%)", + "address_bar_box_text": "hsl(0, 0%, 0%)", + "address_bar_url_color": "hsl(42, 100%, 25%)", + "panel_item_hover": "hsla(42, 100%, 78%, 0.9)", + "panel_item_active": "hsl(42, 100%, 78%)", + "panel_separator": "hsl(42, 100%, 60%)", + "icons_attention": "hsl(42, 100%, 30%)", + "toolbar_field_icons_attention": "hsl(42, 100%, 30%)", + "tab_attention_dot": "hsl(137, 15%, 36%)", + "appmenu_update_icon_color": "hsl(137, 15%, 36%)", + "appmenu_info_icon_color": "hsl(203, 77%, 31%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2021-life-in-color/cheers/soft/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/cheers/soft/preview.svg new file mode 100644 index 0000000000..3d197dacf0 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/cheers/soft/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/elemental/balanced/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/elemental/balanced/icon.svg new file mode 100644 index 0000000000..46f9d406d0 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/elemental/balanced/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/elemental/balanced/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/elemental/balanced/manifest.json new file mode 100644 index 0000000000..ee50d27de7 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/elemental/balanced/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "elemental-balanced-colorway@mozilla.org" + } + }, + "name": "Elemental – Balanced", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 100%)", + "tab_text": "hsl(0, 0%, 0%)", + "tab_selected": "hsl(40, 7%, 92%)", + "tab_line": "transparent", + "tab_loading": "hsl(40, 7%, 18%)", + "tab_loading_inactive": "hsl(40, 8%, 85%)", + "frame": "hsl(38, 7%, 30%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(0, 0%, 0%)", + "popup_border": "hsl(43, 7%, 60%)", + "popup_highlight": "hsla(40, 7%, 55%, 0.4)", + "popup_highlight_text": "hsl(0, 0%, 0%)", + "toolbar": "hsl(43, 7%, 40%)", + "toolbar_text": "hsl(0, 0%, 100%)", + "toolbar_field": "hsl(40, 7%, 92%)", + "toolbar_field_text": "hsl(0, 0%, 0%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 179, 244, 1)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(38, 7%, 30%)", + "ntp_background": "hsl(42, 8%, 78%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(0, 0%, 0%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(0, 0%, 0%)", + "sidebar_highlight": "hsla(40, 7%, 55%, 0.4)", + "address_bar_box": "hsl(38, 7%, 30%)", + "address_bar_box_hover": "hsla(38, 7%, 30%, 0.8)", + "address_bar_box_active": "hsla(38, 7%, 30%, 0.65)", + "address_bar_box_focus": "hsl(43, 7%, 40%)", + "address_bar_box_text": "hsl(0, 0%, 100%)", + "address_bar_url_color": "hsl(150, 2%, 35%)", + "panel_item_hover": "hsla(40, 7%, 55%, 0.4)", + "panel_item_active": "hsla(40, 7%, 55%, 0.55)", + "panel_separator": "hsl(43, 7%, 60%)", + "icons_attention": "hsl(40, 8%, 85%)", + "toolbar_field_icons_attention": "hsl(40, 7%, 18%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_update_icon_color": "hsl(94, 100%, 71%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2021-life-in-color/elemental/balanced/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/elemental/balanced/preview.svg new file mode 100644 index 0000000000..c700f4656d --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/elemental/balanced/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/elemental/bold/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/elemental/bold/icon.svg new file mode 100644 index 0000000000..311409f39c --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/elemental/bold/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/elemental/bold/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/elemental/bold/manifest.json new file mode 100644 index 0000000000..6dd0ca7cfc --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/elemental/bold/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "elemental-bold-colorway@mozilla.org" + } + }, + "name": "Elemental – Bold", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 100%)", + "tab_text": "hsl(0, 0%, 100%)", + "tab_selected": "hsl(40, 7%, 25%)", + "tab_line": "hsl(42, 7%, 38%)", + "tab_loading": "hsl(45, 6%, 88%)", + "tab_loading_inactive": "hsl(45, 6%, 88%)", + "frame": "hsl(38, 7%, 30%)", + "popup": "hsl(40, 7%, 25%)", + "popup_text": "hsl(0, 0%, 100%)", + "popup_border": "hsl(43, 7%, 40%)", + "popup_highlight": "hsla(38, 7%, 70%, 0.3)", + "popup_highlight_text": "hsl(0, 0%, 100%)", + "toolbar": "hsl(42, 6%, 43%)", + "toolbar_text": "hsl(0, 0%, 100%)", + "toolbar_field": "hsl(38, 7%, 30%)", + "toolbar_field_text": "hsl(0, 0%, 100%)", + "toolbar_field_focus": "hsl(40, 7%, 25%)", + "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(38, 7%, 30%)", + "ntp_background": "hsl(38, 7%, 30%)", + "ntp_card_background": "hsl(40, 7%, 25%)", + "ntp_text": "hsl(0, 0%, 100%)", + "sidebar": "hsl(40, 7%, 25%)", + "sidebar_text": "hsl(0, 0%, 100%)", + "sidebar_highlight": "hsla(38, 7%, 70%, 0.3)", + "address_bar_box": "hsl(40, 7%, 25%)", + "address_bar_box_hover": "hsla(40, 7%, 25%, 0.8)", + "address_bar_box_active": "hsla(40, 7%, 25%, 0.65)", + "address_bar_box_focus": "hsl(42, 6%, 43%)", + "address_bar_box_text": "hsl(0, 0%, 100%)", + "address_bar_url_color": "hsl(40, 6%, 90%)", + "panel_item_hover": "hsla(38, 7%, 70%, 0.3)", + "panel_item_active": "hsla(38, 7%, 70%, 0.45)", + "panel_separator": "hsl(43, 7%, 40%)", + "icons_attention": "hsl(45, 6%, 88%)", + "toolbar_field_icons_attention": "hsl(45, 6%, 88%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_update_icon_color": "hsl(94, 100%, 71%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2021-life-in-color/elemental/bold/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/elemental/bold/preview.svg new file mode 100644 index 0000000000..8c1cd4867c --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/elemental/bold/preview.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/elemental/soft/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/elemental/soft/icon.svg new file mode 100644 index 0000000000..cb634ce131 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/elemental/soft/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/elemental/soft/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/elemental/soft/manifest.json new file mode 100644 index 0000000000..b49d4d2209 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/elemental/soft/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "elemental-soft-colorway@mozilla.org" + } + }, + "name": "Elemental – Soft", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(48, 10%, 10%)", + "tab_text": "hsl(48, 10%, 10%)", + "tab_selected": "hsl(0, 0%, 100%)", + "tab_line": "transparent", + "tab_loading": "hsl(42, 7%, 38%)", + "tab_loading_inactive": "hsl(42, 7%, 38%)", + "frame": "hsl(45, 6%, 88%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(48, 10%, 10%)", + "popup_border": "hsl(48, 6%, 85%)", + "popup_highlight": "hsla(40, 7%, 73%, 0.4)", + "popup_highlight_text": "hsl(48, 10%, 10%)", + "toolbar": "hsl(30, 7%, 94%)", + "toolbar_text": "hsl(48, 10%, 10%)", + "toolbar_field": "hsl(45, 6%, 88%)", + "toolbar_field_text": "hsl(48, 10%, 10%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(45, 6%, 88%)", + "ntp_background": "hsl(60, 8%, 95%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(48, 10%, 10%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(48, 10%, 10%)", + "sidebar_highlight": "hsla(40, 7%, 73%, 0.4)", + "address_bar_box": "hsl(0, 0%, 100%)", + "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)", + "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)", + "address_bar_box_focus": "hsl(30, 7%, 94%)", + "address_bar_box_text": "hsl(48, 10%, 10%)", + "address_bar_url_color": "hsl(42, 7%, 38%)", + "panel_item_hover": "hsla(40, 7%, 73%, 0.4)", + "panel_item_active": "hsla(40, 7%, 73%, 0.55)", + "panel_separator": "hsl(48, 6%, 85%)", + "icons_attention": "hsl(42, 7%, 38%)", + "toolbar_field_icons_attention": "hsl(42, 7%, 38%)", + "tab_attention_dot": "hsl(146, 15%, 36%)", + "appmenu_update_icon_color": "hsl(146, 15%, 36%)", + "appmenu_info_icon_color": "hsl(203, 77%, 31%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2021-life-in-color/elemental/soft/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/elemental/soft/preview.svg new file mode 100644 index 0000000000..dce730c57e --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/elemental/soft/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/foto/balanced/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/foto/balanced/icon.svg new file mode 100644 index 0000000000..08f3eaf469 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/foto/balanced/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/foto/balanced/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/foto/balanced/manifest.json new file mode 100644 index 0000000000..d744db57f3 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/foto/balanced/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "foto-balanced-colorway@mozilla.org" + } + }, + "name": "Foto – Balanced", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 100%)", + "tab_text": "hsl(0, 0%, 0%)", + "tab_selected": "hsl(349, 35%, 94%)", + "tab_line": "transparent", + "tab_loading": "hsl(351, 37%, 40%)", + "tab_loading_inactive": "hsl(352, 56%, 84%)", + "frame": "hsl(351, 37%, 40%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(0, 0%, 0%)", + "popup_border": "hsl(351, 44%, 63%)", + "popup_highlight": "hsla(350, 53%, 75%, 0.5)", + "popup_highlight_text": "hsl(0, 0%, 0%)", + "toolbar": "hsl(351, 37%, 47%)", + "toolbar_text": "hsl(0, 0%, 100%)", + "toolbar_field": "hsl(349, 35%, 94%)", + "toolbar_field_text": "hsl(0, 0%, 0%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 179, 244, 1)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(351, 37%, 40%)", + "ntp_background": "hsl(351, 37%, 80%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(0, 0%, 0%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(0, 0%, 0%)", + "sidebar_highlight": "hsla(350, 53%, 75%, 0.5)", + "address_bar_box": "hsl(351, 37%, 40%)", + "address_bar_box_hover": "hsla(351, 37%, 40%, 0.8)", + "address_bar_box_active": "hsla(351, 37%, 40%, 0.65)", + "address_bar_box_focus": "hsl(351, 37%, 47%)", + "address_bar_box_text": "hsl(0, 0%, 100%)", + "address_bar_url_color": "hsl(351, 37%, 40%)", + "panel_item_hover": "hsla(350, 53%, 75%, 0.5)", + "panel_item_active": "hsla(350, 53%, 75%, 0.65)", + "panel_separator": "hsl(351, 44%, 63%)", + "icons_attention": "hsl(352, 56%, 84%)", + "toolbar_field_icons_attention": "hsl(351, 37%, 40%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_update_icon_color": "hsl(94, 100%, 71%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2021-life-in-color/foto/balanced/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/foto/balanced/preview.svg new file mode 100644 index 0000000000..1c43a6e67d --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/foto/balanced/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/foto/bold/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/foto/bold/icon.svg new file mode 100644 index 0000000000..b08be54e42 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/foto/bold/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/foto/bold/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/foto/bold/manifest.json new file mode 100644 index 0000000000..91abfe5119 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/foto/bold/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "foto-bold-colorway@mozilla.org" + } + }, + "name": "Foto – Bold", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 100%)", + "tab_text": "hsl(0, 0%, 100%)", + "tab_selected": "hsl(351, 27%, 25%)", + "tab_line": "hsl(351, 31%, 52%)", + "tab_loading": "hsl(352, 56%, 84%)", + "tab_loading_inactive": "hsl(352, 56%, 84%)", + "frame": "hsl(350, 32%, 30%)", + "popup": "hsl(351, 27%, 25%)", + "popup_text": "hsl(0, 0%, 100%)", + "popup_border": "hsl(351, 32%, 46%)", + "popup_highlight": "hsla(351, 32%, 50%, 0.6)", + "popup_highlight_text": "hsl(0, 0%, 100%)", + "toolbar": "hsl(351, 32%, 42%)", + "toolbar_text": "hsl(0, 0%, 100%)", + "toolbar_field": "hsl(350, 32%, 30%)", + "toolbar_field_text": "hsl(0, 0%, 100%)", + "toolbar_field_focus": "hsl(351, 27%, 25%)", + "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(350, 32%, 30%)", + "ntp_background": "hsl(350, 14%, 17%)", + "ntp_card_background": "hsl(351, 27%, 25%)", + "ntp_text": "hsl(0, 0%, 100%)", + "sidebar": "hsl(351, 27%, 25%)", + "sidebar_text": "hsl(0, 0%, 100%)", + "sidebar_highlight": "hsla(351, 32%, 50%, 0.6)", + "address_bar_box": "hsl(351, 27%, 25%)", + "address_bar_box_hover": "hsla(351, 27%, 25%, 0.8)", + "address_bar_box_active": "hsla(351, 27%, 25%, 0.65)", + "address_bar_box_focus": "hsl(351, 32%, 42%)", + "address_bar_box_text": "hsl(0, 0%, 100%)", + "address_bar_url_color": "hsl(350, 57%, 90%)", + "panel_item_hover": "hsla(351, 32%, 50%, 0.6)", + "panel_item_active": "hsla(351, 32%, 50%, 0.75)", + "panel_separator": "hsl(351, 32%, 46%)", + "icons_attention": "hsl(352, 56%, 84%)", + "toolbar_field_icons_attention": "hsl(352, 56%, 84%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_update_icon_color": "hsl(94, 100%, 71%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2021-life-in-color/foto/bold/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/foto/bold/preview.svg new file mode 100644 index 0000000000..338672498f --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/foto/bold/preview.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/foto/soft/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/foto/soft/icon.svg new file mode 100644 index 0000000000..9552e234f0 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/foto/soft/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/foto/soft/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/foto/soft/manifest.json new file mode 100644 index 0000000000..e9f1edf319 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/foto/soft/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "foto-soft-colorway@mozilla.org" + } + }, + "name": "Foto – Soft", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(351, 32%, 8%)", + "tab_text": "hsl(351, 32%, 8%)", + "tab_selected": "hsl(0, 0%, 100%)", + "tab_line": "transparent", + "tab_loading": "hsl(351, 32%, 42%)", + "tab_loading_inactive": "hsl(351, 32%, 42%)", + "frame": "hsl(352, 56%, 84%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(351, 32%, 8%)", + "popup_border": "hsl(350, 61%, 88%)", + "popup_highlight": "hsla(351, 52%, 82%, 0.5)", + "popup_highlight_text": "hsl(351, 32%, 8%)", + "toolbar": "hsl(351, 47%, 89%)", + "toolbar_text": "hsl(351, 32%, 8%)", + "toolbar_field": "hsl(352, 56%, 84%)", + "toolbar_field_text": "hsl(351, 32%, 8%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(352, 56%, 84%)", + "ntp_background": "hsl(354, 33%, 94%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(351, 32%, 8%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(351, 32%, 8%)", + "sidebar_highlight": "hsla(351, 52%, 82%, 0.5)", + "address_bar_box": "hsl(0, 0%, 100%)", + "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)", + "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)", + "address_bar_box_focus": "hsl(351, 47%, 89%)", + "address_bar_box_text": "hsl(351, 32%, 8%)", + "address_bar_url_color": "hsl(351, 37%, 40%)", + "panel_item_hover": "hsla(351, 52%, 82%, 0.5)", + "panel_item_active": "hsla(351, 52%, 82%, 0.65)", + "panel_separator": "hsl(350, 61%, 88%)", + "icons_attention": "hsl(351, 32%, 42%)", + "toolbar_field_icons_attention": "hsl(351, 32%, 42%)", + "tab_attention_dot": "hsl(146, 15%, 36%)", + "appmenu_update_icon_color": "hsl(146, 15%, 36%)", + "appmenu_info_icon_color": "hsl(203, 77%, 31%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2021-life-in-color/foto/soft/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/foto/soft/preview.svg new file mode 100644 index 0000000000..e21d5c9de8 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/foto/soft/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/graffiti/balanced/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/graffiti/balanced/icon.svg new file mode 100644 index 0000000000..a6bb9c5a8b --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/graffiti/balanced/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/graffiti/balanced/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/graffiti/balanced/manifest.json new file mode 100644 index 0000000000..b7d668485a --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/graffiti/balanced/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "graffiti-balanced-colorway@mozilla.org" + } + }, + "name": "Graffiti – Balanced", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 100%)", + "tab_text": "hsl(0, 0%, 0%)", + "tab_selected": "hsl(278, 31%, 95%)", + "tab_line": "transparent", + "tab_loading": "hsl(278, 32%, 35%)", + "tab_loading_inactive": "hsl(279, 77%, 95%)", + "frame": "hsl(278, 33%, 40%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(0, 0%, 0%)", + "popup_border": "hsl(278, 32%, 50%)", + "popup_highlight": "hsla(278, 80%, 78%, 0.4)", + "popup_highlight_text": "hsl(0, 0%, 0%)", + "toolbar": "hsl(279, 29%, 52%)", + "toolbar_text": "hsl(0, 0%, 100%)", + "toolbar_field": "hsl(278, 31%, 95%)", + "toolbar_field_text": "hsl(0, 0%, 0%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 179, 244, 1)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(278, 33%, 40%)", + "ntp_background": "hsl(277, 30%, 86%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(0, 0%, 0%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(0, 0%, 0%)", + "sidebar_highlight": "hsla(278, 80%, 78%, 0.4)", + "address_bar_box": "hsl(278, 33%, 40%)", + "address_bar_box_hover": "hsla(278, 33%, 40%, 0.8)", + "address_bar_box_active": "hsla(278, 33%, 40%, 0.65)", + "address_bar_box_focus": "hsl(279, 29%, 52%)", + "address_bar_box_text": "hsl(0, 0%, 100%)", + "address_bar_url_color": "hsl(278, 32%, 35%)", + "panel_item_hover": "hsla(278, 80%, 78%, 0.4)", + "panel_item_active": "hsla(278, 80%, 78%, 0.55)", + "panel_separator": "hsl(278, 32%, 50%)", + "icons_attention": "hsl(279, 77%, 95%)", + "toolbar_field_icons_attention": "hsl(278, 32%, 35%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_update_icon_color": "hsl(94, 100%, 71%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2021-life-in-color/graffiti/balanced/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/graffiti/balanced/preview.svg new file mode 100644 index 0000000000..9aa245de3e --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/graffiti/balanced/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/graffiti/bold/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/graffiti/bold/icon.svg new file mode 100644 index 0000000000..764d072a09 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/graffiti/bold/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/graffiti/bold/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/graffiti/bold/manifest.json new file mode 100644 index 0000000000..e56600702e --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/graffiti/bold/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "graffiti-bold-colorway@mozilla.org" + } + }, + "name": "Graffiti – Bold", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 100%)", + "tab_text": "hsl(0, 0%, 100%)", + "tab_selected": "hsl(275, 15%, 22%)", + "tab_line": "hsl(278, 32%, 50%)", + "tab_loading": "hsl(278, 79%, 85%)", + "tab_loading_inactive": "hsl(278, 79%, 85%)", + "frame": "hsl(279, 31%, 28%)", + "popup": "hsl(275, 15%, 22%)", + "popup_text": "hsl(0, 0%, 100%)", + "popup_border": "hsl(278, 30%, 42%)", + "popup_highlight": "hsla(278, 33%, 52%, 0.6)", + "popup_highlight_text": "hsl(0, 0%, 100%)", + "toolbar": "hsl(278, 27%, 40%)", + "toolbar_text": "hsl(0, 0%, 100%)", + "toolbar_field": "hsl(279, 31%, 28%)", + "toolbar_field_text": "hsl(0, 0%, 100%)", + "toolbar_field_focus": "hsl(275, 15%, 22%)", + "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(279, 31%, 28%)", + "ntp_background": "hsl(270, 10%, 12%)", + "ntp_card_background": "hsl(275, 15%, 22%)", + "ntp_text": "hsl(0, 0%, 100%)", + "sidebar": "hsl(275, 15%, 22%)", + "sidebar_text": "hsl(0, 0%, 100%)", + "sidebar_highlight": "hsla(278, 33%, 52%, 0.6)", + "address_bar_box": "hsl(275, 15%, 22%)", + "address_bar_box_hover": "hsla(275, 15%, 22%, 0.8)", + "address_bar_box_active": "hsla(275, 15%, 22%, 0.65)", + "address_bar_box_focus": "hsl(278, 27%, 40%)", + "address_bar_box_text": "hsl(0, 0%, 100%)", + "address_bar_url_color": "hsl(278, 80%, 88%)", + "panel_item_hover": "hsla(278, 33%, 52%, 0.6)", + "panel_item_active": "hsla(278, 33%, 52%, 0.75)", + "panel_separator": "hsl(278, 30%, 42%)", + "icons_attention": "hsl(278, 79%, 85%)", + "toolbar_field_icons_attention": "hsl(278, 79%, 85%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_update_icon_color": "hsl(94, 100%, 71%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2021-life-in-color/graffiti/bold/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/graffiti/bold/preview.svg new file mode 100644 index 0000000000..f1db86b92e --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/graffiti/bold/preview.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/graffiti/soft/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/graffiti/soft/icon.svg new file mode 100644 index 0000000000..d50944e91a --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/graffiti/soft/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/graffiti/soft/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/graffiti/soft/manifest.json new file mode 100644 index 0000000000..dba350671b --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/graffiti/soft/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "graffiti-soft-colorway@mozilla.org" + } + }, + "name": "Graffiti – Soft", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(278, 22%, 10%)", + "tab_text": "hsl(278, 22%, 10%)", + "tab_selected": "hsl(0, 0%, 100%)", + "tab_line": "transparent", + "tab_loading": "hsl(278, 33%, 44%)", + "tab_loading_inactive": "hsl(278, 33%, 44%)", + "frame": "hsl(278, 79%, 85%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(278, 22%, 10%)", + "popup_border": "hsl(278, 80%, 86%)", + "popup_highlight": "hsla(278, 80%, 78%, 0.4)", + "popup_highlight_text": "hsl(278, 22%, 10%)", + "toolbar": "hsl(278, 80%, 91%)", + "toolbar_text": "hsl(278, 22%, 10%)", + "toolbar_field": "hsl(278, 79%, 85%)", + "toolbar_field_text": "hsl(278, 22%, 10%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(278, 79%, 85%)", + "ntp_background": "hsl(279, 77%, 95%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(278, 22%, 10%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(278, 22%, 10%)", + "sidebar_highlight": "hsla(278, 80%, 78%, 0.4)", + "address_bar_box": "hsl(0, 0%, 100%)", + "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)", + "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)", + "address_bar_box_focus": "hsl(278, 80%, 91%)", + "address_bar_box_text": "hsl(278, 22%, 10%)", + "address_bar_url_color": "hsl(278, 33%, 44%)", + "panel_item_hover": "hsla(278, 80%, 78%, 0.4)", + "panel_item_active": "hsla(278, 80%, 78%, 0.55)", + "panel_separator": "hsl(278, 80%, 86%)", + "icons_attention": "hsl(278, 33%, 44%)", + "toolbar_field_icons_attention": "hsl(278, 33%, 44%)", + "tab_attention_dot": "hsl(146, 15%, 36%)", + "appmenu_update_icon_color": "hsl(146, 15%, 36%)", + "appmenu_info_icon_color": "hsl(203, 77%, 31%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2021-life-in-color/graffiti/soft/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/graffiti/soft/preview.svg new file mode 100644 index 0000000000..ed76cdcce9 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/graffiti/soft/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/lush/balanced/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/lush/balanced/icon.svg new file mode 100644 index 0000000000..4c06426349 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/lush/balanced/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/lush/balanced/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/lush/balanced/manifest.json new file mode 100644 index 0000000000..c265b4ae87 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/lush/balanced/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "lush-balanced-colorway@mozilla.org" + } + }, + "name": "Lush – Balanced", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 100%)", + "tab_text": "hsl(0, 0%, 0%)", + "tab_selected": "hsl(120, 7%, 94%)", + "tab_line": "transparent", + "tab_loading": "hsl(138, 16%, 32%)", + "tab_loading_inactive": "hsl(147, 25%, 86%)", + "frame": "hsl(144, 16%, 30%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(0, 0%, 0%)", + "popup_border": "hsl(145, 25%, 50%)", + "popup_highlight": "hsla(145, 36%, 40%, 0.3)", + "popup_highlight_text": "hsl(0, 0%, 0%)", + "toolbar": "hsl(146, 15%, 36%)", + "toolbar_text": "hsl(0, 0%, 100%)", + "toolbar_field": "hsl(120, 7%, 94%)", + "toolbar_field_text": "hsl(0, 0%, 0%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 179, 244, 1)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(144, 16%, 30%)", + "ntp_background": "hsl(140, 10%, 82%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(0, 0%, 0%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(0, 0%, 0%)", + "sidebar_highlight": "hsla(145, 36%, 40%, 0.3)", + "address_bar_box": "hsl(144, 16%, 30%)", + "address_bar_box_hover": "hsla(144, 16%, 30%, 0.8)", + "address_bar_box_active": "hsla(144, 16%, 30%, 0.65)", + "address_bar_box_focus": "hsl(146, 15%, 36%)", + "address_bar_box_text": "hsl(0, 0%, 100%)", + "address_bar_url_color": "hsl(138, 16%, 32%)", + "panel_item_hover": "hsla(145, 36%, 40%, 0.3)", + "panel_item_active": "hsla(145, 36%, 40%, 0.45)", + "panel_separator": "hsl(145, 25%, 50%)", + "icons_attention": "hsl(147, 25%, 86%)", + "toolbar_field_icons_attention": "hsl(138, 16%, 32%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_update_icon_color": "hsl(94, 100%, 71%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2021-life-in-color/lush/balanced/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/lush/balanced/preview.svg new file mode 100644 index 0000000000..3bfe84c75f --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/lush/balanced/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/lush/bold/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/lush/bold/icon.svg new file mode 100644 index 0000000000..9c2c88dd7b --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/lush/bold/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/lush/bold/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/lush/bold/manifest.json new file mode 100644 index 0000000000..dd4011023d --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/lush/bold/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "lush-bold-colorway@mozilla.org" + } + }, + "name": "Lush – Bold", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 100%)", + "tab_text": "hsl(0, 0%, 100%)", + "tab_selected": "hsl(140, 2%, 28%)", + "tab_line": "hsl(139, 8%, 48%)", + "tab_loading": "hsl(146, 44%, 86%)", + "tab_loading_inactive": "hsl(146, 44%, 86%)", + "frame": "hsl(139, 16%, 30%)", + "popup": "hsl(140, 2%, 28%)", + "popup_text": "hsl(0, 0%, 100%)", + "popup_border": "hsl(140, 10%, 35%)", + "popup_highlight": "hsla(137, 18%, 50%, 0.42)", + "popup_highlight_text": "hsl(0, 0%, 100%)", + "toolbar": "hsl(139, 15%, 42%)", + "toolbar_text": "hsl(0, 0%, 100%)", + "toolbar_field": "hsl(139, 16%, 30%)", + "toolbar_field_text": "hsl(0, 0%, 100%)", + "toolbar_field_focus": "hsl(140, 2%, 28%)", + "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(139, 16%, 30%)", + "ntp_background": "hsl(150, 2%, 20%)", + "ntp_card_background": "hsl(140, 2%, 28%)", + "ntp_text": "hsl(0, 0%, 100%)", + "sidebar": "hsl(140, 2%, 28%)", + "sidebar_text": "hsl(0, 0%, 100%)", + "sidebar_highlight": "hsla(137, 18%, 50%, 0.42)", + "address_bar_box": "hsl(140, 2%, 28%)", + "address_bar_box_hover": "hsla(140, 2%, 28%, 0.8)", + "address_bar_box_active": "hsla(140, 2%, 28%, 0.65)", + "address_bar_box_focus": "hsl(139, 15%, 42%)", + "address_bar_box_text": "hsl(0, 0%, 100%)", + "address_bar_url_color": "hsl(146, 44%, 86%)", + "panel_item_hover": "hsla(137, 18%, 50%, 0.42)", + "panel_item_active": "hsla(137, 18%, 50%, 0.57)", + "panel_separator": "hsl(140, 10%, 35%)", + "icons_attention": "hsl(146, 44%, 86%)", + "toolbar_field_icons_attention": "hsl(146, 44%, 86%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_update_icon_color": "hsl(94, 100%, 71%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2021-life-in-color/lush/bold/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/lush/bold/preview.svg new file mode 100644 index 0000000000..83af350291 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/lush/bold/preview.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/lush/soft/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/lush/soft/icon.svg new file mode 100644 index 0000000000..79cf4d5bb7 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/lush/soft/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2021-life-in-color/lush/soft/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/lush/soft/manifest.json new file mode 100644 index 0000000000..1f4ef55c98 --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/lush/soft/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "lush-soft-colorway@mozilla.org" + } + }, + "name": "Lush – Soft", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(150, 6%, 20%)", + "tab_text": "hsl(150, 6%, 20%)", + "tab_selected": "hsl(0, 0%, 100%)", + "tab_line": "transparent", + "tab_loading": "hsl(145, 24%, 32%)", + "tab_loading_inactive": "hsl(145, 24%, 32%)", + "frame": "hsl(147, 25%, 86%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(150, 6%, 20%)", + "popup_border": "hsl(144, 25%, 88%)", + "popup_highlight": "hsla(143, 25%, 86%, 0.7)", + "popup_highlight_text": "hsl(150, 6%, 20%)", + "toolbar": "hsl(140, 26%, 93%)", + "toolbar_text": "hsl(150, 6%, 20%)", + "toolbar_field": "hsl(147, 25%, 86%)", + "toolbar_field_text": "hsl(150, 6%, 20%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(147, 25%, 86%)", + "ntp_background": "hsl(150, 25%, 97%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(150, 6%, 20%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(150, 6%, 20%)", + "sidebar_highlight": "hsla(143, 25%, 86%, 0.7)", + "address_bar_box": "hsl(0, 0%, 100%)", + "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)", + "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)", + "address_bar_box_focus": "hsl(140, 26%, 93%)", + "address_bar_box_text": "hsl(150, 6%, 20%)", + "address_bar_url_color": "hsl(145, 24%, 32%)", + "panel_item_hover": "hsla(143, 25%, 86%, 0.7)", + "panel_item_active": "hsla(143, 25%, 86%, 0.85)", + "panel_separator": "hsl(144, 25%, 88%)", + "icons_attention": "hsl(145, 24%, 32%)", + "toolbar_field_icons_attention": "hsl(145, 24%, 32%)", + "tab_attention_dot": "hsl(146, 15%, 36%)", + "appmenu_update_icon_color": "hsl(146, 15%, 36%)", + "appmenu_info_icon_color": "hsl(203, 77%, 31%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2021-life-in-color/lush/soft/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/lush/soft/preview.svg new file mode 100644 index 0000000000..611339319e --- /dev/null +++ b/browser/themes/addons/colorways/2021-life-in-color/lush/soft/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/activist/balanced/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/activist/balanced/icon.svg new file mode 100644 index 0000000000..1422130dc6 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/activist/balanced/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/activist/balanced/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/activist/balanced/manifest.json new file mode 100644 index 0000000000..4c75d2fab5 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/activist/balanced/manifest.json @@ -0,0 +1,78 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "activist-balanced-colorway@mozilla.org" + } + }, + "name": "Activist – Balanced", + "author": "Mozilla", + "version": "1.1.2", + "icons": { + "32": "icon.svg" + }, + "theme": { + "properties": { + "color_scheme": "light", + "content_color_scheme": "auto" + }, + "colors": { + "tab_background_text": "hsl(0, 0%, 100%)", + "tab_text": "hsl(0, 0%, 0%)", + "tab_selected": "hsl(223, 100%, 99%)", + "tab_line": "transparent", + "tab_loading": "hsl(0, 0%, 0%)", + "tab_loading_inactive": "hsl(0, 0%, 0%)", + "frame": "hsl(220, 72%, 28%)", + "popup": "hsl(228, 100%, 99%)", + "popup_text": "hsl(0, 0%, 0%)", + "popup_border": "hsl(220, 58%, 39%)", + "popup_highlight": "hsla(220, 54%, 80%, 0.3)", + "popup_highlight_text": "hsl(0, 0%, 0%)", + "toolbar": "hsl(220, 49%, 48%)", + "toolbar_text": "hsl(0, 0%, 100%)", + "toolbar_field": "hsl(223, 100%, 99%)", + "toolbar_field_text": "hsl(0, 0%, 0%)", + "toolbar_field_focus": "hsl(228, 100%, 99%)", + "toolbar_field_border_focus": "rgba(0, 179, 244, 1)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(220, 72%, 28%)", + "ntp_background": "hsl(221, 63%, 87%)", + "ntp_card_background": "hsl(228, 100%, 99%)", + "ntp_text": "hsl(0, 0%, 0%)", + "sidebar": "hsl(228, 100%, 99%)", + "sidebar_text": "hsl(0, 0%, 0%)", + "sidebar_highlight": "hsla(220, 54%, 80%, 0.3)", + "address_bar_box": "hsl(220, 72%, 28%)", + "address_bar_box_hover": "hsla(220, 72%, 28%, 0.8)", + "address_bar_box_active": "hsla(220, 72%, 28%, 0.65)", + "address_bar_box_focus": "hsl(220, 49%, 48%)", + "address_bar_box_text": "hsl(0, 0%, 100%)", + "address_bar_url_color": "hsl(220, 76%, 31%)", + "panel_item_hover": "hsla(220, 54%, 80%, 0.3)", + "panel_item_active": "hsla(220, 54%, 80%, 0.45)", + "panel_separator": "hsl(220, 58%, 39%)", + "icons_attention": "hsl(0, 0%, 0%)", + "toolbar_field_icons_attention": "hsl(0, 0%, 0%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-independent-voices/activist/balanced/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/activist/balanced/preview.svg new file mode 100644 index 0000000000..9ebc168c7e --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/activist/balanced/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/activist/bold/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/activist/bold/icon.svg new file mode 100644 index 0000000000..37eee3b21e --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/activist/bold/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/activist/bold/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/activist/bold/manifest.json new file mode 100644 index 0000000000..d3404ca9a5 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/activist/bold/manifest.json @@ -0,0 +1,74 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "activist-bold-colorway@mozilla.org" + } + }, + "name": "Activist – Bold", + "author": "Mozilla", + "version": "1.1.2", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 100%)", + "tab_text": "hsl(0, 0%, 100%)", + "tab_selected": "hsl(220, 79%, 11%)", + "tab_line": "hsl(220, 54%, 67%)", + "tab_loading": "hsl(220, 70%, 78%)", + "tab_loading_inactive": "hsl(220, 70%, 78%)", + "frame": "hsl(233, 73%, 12%)", + "popup": "hsl(220, 79%, 11%)", + "popup_text": "hsl(0, 0%, 100%)", + "popup_border": "hsl(220, 69%, 66%)", + "popup_highlight": "hsla(220, 89%, 69%, 0.2)", + "popup_highlight_text": "hsl(0, 0%, 100%)", + "toolbar": "hsl(234, 90%, 19%)", + "toolbar_text": "hsl(0, 0%, 100%)", + "toolbar_field": "hsl(233, 73%, 12%)", + "toolbar_field_text": "hsl(0, 0%, 100%)", + "toolbar_field_focus": "hsl(220, 79%, 11%)", + "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(233, 73%, 12%)", + "ntp_background": "hsl(222, 100%, 3%)", + "ntp_card_background": "hsl(220, 79%, 11%)", + "ntp_text": "hsl(0, 0%, 100%)", + "sidebar": "hsl(220, 79%, 11%)", + "sidebar_text": "hsl(0, 0%, 100%)", + "sidebar_highlight": "hsla(220, 89%, 69%, 0.2)", + "address_bar_box": "hsl(220, 79%, 11%)", + "address_bar_box_active": "hsla(220, 79%, 11%, 0.65)", + "address_bar_box_focus": "hsl(234, 90%, 19%)", + "address_bar_box_text": "hsl(0, 0%, 100%)", + "address_bar_url_color": "hsl(219, 37%, 59%)", + "panel_item_hover": "hsla(220, 89%, 69%, 0.2)", + "panel_item_active": "hsla(220, 89%, 69%, 0.35)", + "panel_separator": "hsl(220, 69%, 66%)", + "icons_attention": "hsl(220, 70%, 78%)", + "toolbar_field_icons_attention": "hsl(220, 70%, 78%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_update_icon_color": "hsl(94, 100%, 71%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-independent-voices/activist/bold/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/activist/bold/preview.svg new file mode 100644 index 0000000000..cf1f18c9b1 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/activist/bold/preview.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/activist/soft/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/activist/soft/icon.svg new file mode 100644 index 0000000000..403f3e5dfd --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/activist/soft/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/activist/soft/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/activist/soft/manifest.json new file mode 100644 index 0000000000..05753ccc52 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/activist/soft/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "activist-soft-colorway@mozilla.org" + } + }, + "name": "Activist – Soft", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 0%)", + "tab_text": "hsl(0, 0%, 0%)", + "tab_selected": "hsl(0, 0%, 100%)", + "tab_line": "transparent", + "tab_loading": "hsl(227, 91%, 41%)", + "tab_loading_inactive": "hsl(227, 91%, 41%)", + "frame": "hsl(226, 45%, 79%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(0, 0%, 0%)", + "popup_border": "hsl(226, 54%, 56%)", + "popup_highlight": "hsla(226, 54%, 56%, 0.3)", + "popup_highlight_text": "hsl(0, 0%, 0%)", + "toolbar": "hsl(227, 47%, 90%)", + "toolbar_text": "hsl(0, 0%, 0%)", + "toolbar_field": "hsl(226, 45%, 79%)", + "toolbar_field_text": "hsl(0, 0%, 0%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(226, 45%, 79%)", + "ntp_background": "hsl(226, 68%, 96%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(0, 0%, 0%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(0, 0%, 0%)", + "sidebar_highlight": "hsla(226, 54%, 56%, 0.3)", + "address_bar_box": "hsl(0, 0%, 100%)", + "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)", + "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)", + "address_bar_box_focus": "hsl(227, 47%, 90%)", + "address_bar_box_text": "hsl(0, 0%, 0%)", + "address_bar_url_color": "hsl(226, 67%, 37%)", + "panel_item_hover": "hsla(226, 54%, 56%, 0.3)", + "panel_item_active": "hsla(226, 54%, 56%, 0.45)", + "panel_separator": "hsl(226, 54%, 56%)", + "icons_attention": "hsl(227, 91%, 41%)", + "toolbar_field_icons_attention": "hsl(227, 91%, 41%)", + "tab_attention_dot": "hsl(146, 15%, 36%)", + "appmenu_update_icon_color": "hsl(146, 15%, 36%)", + "appmenu_info_icon_color": "hsl(203, 77%, 31%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-independent-voices/activist/soft/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/activist/soft/preview.svg new file mode 100644 index 0000000000..d8756b95ad --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/activist/soft/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/dreamer/balanced/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/dreamer/balanced/icon.svg new file mode 100644 index 0000000000..4e70d68e8b --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/dreamer/balanced/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/dreamer/balanced/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/dreamer/balanced/manifest.json new file mode 100644 index 0000000000..8c6a583464 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/dreamer/balanced/manifest.json @@ -0,0 +1,78 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "dreamer-balanced-colorway@mozilla.org" + } + }, + "name": "Dreamer – Balanced", + "author": "Mozilla", + "version": "1.1.2", + "icons": { + "32": "icon.svg" + }, + "theme": { + "properties": { + "color_scheme": "light", + "content_color_scheme": "auto" + }, + "colors": { + "tab_background_text": "hsl(0, 0%, 100%)", + "tab_text": "hsl(0, 0%, 0%)", + "tab_selected": "hsl(277, 31%, 95%)", + "tab_line": "transparent", + "tab_loading": "hsl(0, 0%, 0%)", + "tab_loading_inactive": "hsl(0, 0%, 0%)", + "frame": "hsl(266, 39%, 35%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(0, 0%, 0%)", + "popup_border": "hsl(266, 66%, 24%)", + "popup_highlight": "hsla(264, 43%, 85%, 0.3)", + "popup_highlight_text": "hsl(0, 0%, 0%)", + "toolbar": "hsl(265, 34%, 47%)", + "toolbar_text": "hsl(0, 0%, 100%)", + "toolbar_field": "hsl(277, 31%, 95%)", + "toolbar_field_text": "hsl(0, 0%, 0%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 179, 244, 1)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(266, 39%, 35%)", + "ntp_background": "hsl(263, 59%, 91%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(0, 0%, 0%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(0, 0%, 0%)", + "sidebar_highlight": "hsla(264, 43%, 85%, 0.3)", + "address_bar_box": "hsl(266, 39%, 35%)", + "address_bar_box_hover": "hsla(266, 39%, 35%, 0.8)", + "address_bar_box_active": "hsla(266, 39%, 35%, 0.65)", + "address_bar_box_focus": "hsl(265, 34%, 47%)", + "address_bar_box_text": "hsl(0, 0%, 100%)", + "address_bar_url_color": "hsl(266, 39%, 35%)", + "panel_item_hover": "hsla(264, 43%, 85%, 0.3)", + "panel_item_active": "hsla(264, 43%, 85%, 0.45)", + "panel_separator": "hsl(266, 66%, 24%)", + "icons_attention": "hsl(0, 0%, 0%)", + "toolbar_field_icons_attention": "hsl(0, 0%, 0%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-independent-voices/dreamer/balanced/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/dreamer/balanced/preview.svg new file mode 100644 index 0000000000..c0277ca6a3 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/dreamer/balanced/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/dreamer/bold/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/dreamer/bold/icon.svg new file mode 100644 index 0000000000..ffcb472f42 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/dreamer/bold/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/dreamer/bold/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/dreamer/bold/manifest.json new file mode 100644 index 0000000000..2d7b867562 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/dreamer/bold/manifest.json @@ -0,0 +1,74 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "dreamer-bold-colorway@mozilla.org" + } + }, + "name": "Dreamer – Bold", + "author": "Mozilla", + "version": "1.1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 100%)", + "tab_text": "hsl(0, 0%, 100%)", + "tab_selected": "hsl(267, 54%, 15%)", + "tab_line": "hsl(266, 49%, 45%)", + "tab_loading": "hsl(266, 83%, 81%)", + "tab_loading_inactive": "hsl(266, 83%, 81%)", + "frame": "hsl(266, 68%, 20%)", + "popup": "hsl(267, 54%, 15%)", + "popup_text": "hsl(0, 0%, 100%)", + "popup_border": "hsl(266, 60%, 67%)", + "popup_highlight": "hsla(266, 39%, 35%, 0.6)", + "popup_highlight_text": "hsl(0, 0%, 100%)", + "toolbar": "hsl(265, 45%, 29%)", + "toolbar_text": "hsl(0, 0%, 100%)", + "toolbar_field": "hsl(266, 68%, 20%)", + "toolbar_field_text": "hsl(0, 0%, 100%)", + "toolbar_field_focus": "hsl(267, 54%, 15%)", + "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(266, 68%, 20%)", + "ntp_background": "hsl(256, 100%, 4%)", + "ntp_card_background": "hsl(267, 54%, 15%)", + "ntp_text": "hsl(0, 0%, 100%)", + "sidebar": "hsl(267, 54%, 15%)", + "sidebar_text": "hsl(0, 0%, 100%)", + "sidebar_highlight": "hsla(266, 39%, 35%, 0.6)", + "address_bar_box": "hsl(267, 54%, 15%)", + "address_bar_box_active": "hsla(267, 54%, 15%, 0.65)", + "address_bar_box_focus": "hsl(265, 45%, 29%)", + "address_bar_box_text": "hsl(0, 0%, 100%)", + "address_bar_url_color": "hsl(266, 72%, 82%)", + "panel_item_hover": "hsla(266, 39%, 35%, 0.6)", + "panel_item_active": "hsla(266, 39%, 35%, 0.75)", + "panel_separator": "hsl(266, 60%, 67%)", + "icons_attention": "hsl(266, 83%, 81%)", + "toolbar_field_icons_attention": "hsl(266, 83%, 81%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_update_icon_color": "hsl(94, 100%, 71%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-independent-voices/dreamer/bold/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/dreamer/bold/preview.svg new file mode 100644 index 0000000000..c172daef44 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/dreamer/bold/preview.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/dreamer/soft/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/dreamer/soft/icon.svg new file mode 100644 index 0000000000..f4f3e0c2c8 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/dreamer/soft/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/dreamer/soft/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/dreamer/soft/manifest.json new file mode 100644 index 0000000000..350b354405 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/dreamer/soft/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "dreamer-soft-colorway@mozilla.org" + } + }, + "name": "Dreamer – Soft", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(278, 22%, 10%)", + "tab_text": "hsl(278, 22%, 10%)", + "tab_selected": "hsl(0, 0%, 100%)", + "tab_line": "transparent", + "tab_loading": "hsl(278, 49%, 35%)", + "tab_loading_inactive": "hsl(278, 49%, 35%)", + "frame": "hsl(258, 49%, 84%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(278, 22%, 10%)", + "popup_border": "hsl(258, 72%, 43%)", + "popup_highlight": "hsla(259, 56%, 79%, 0.3)", + "popup_highlight_text": "hsl(278, 22%, 10%)", + "toolbar": "hsl(259, 69%, 94%)", + "toolbar_text": "hsl(278, 22%, 10%)", + "toolbar_field": "hsl(258, 49%, 84%)", + "toolbar_field_text": "hsl(278, 22%, 10%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(258, 49%, 84%)", + "ntp_background": "hsl(258, 76%, 97%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(278, 22%, 10%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(278, 22%, 10%)", + "sidebar_highlight": "hsla(259, 56%, 79%, 0.3)", + "address_bar_box": "hsl(0, 0%, 100%)", + "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)", + "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)", + "address_bar_box_focus": "hsl(259, 69%, 94%)", + "address_bar_box_text": "hsl(278, 22%, 10%)", + "address_bar_url_color": "hsl(258, 46%, 46%)", + "panel_item_hover": "hsla(259, 56%, 79%, 0.3)", + "panel_item_active": "hsla(259, 56%, 79%, 0.45)", + "panel_separator": "hsl(258, 72%, 43%)", + "icons_attention": "hsl(278, 49%, 35%)", + "toolbar_field_icons_attention": "hsl(278, 49%, 35%)", + "tab_attention_dot": "hsl(146, 15%, 36%)", + "appmenu_update_icon_color": "hsl(146, 15%, 36%)", + "appmenu_info_icon_color": "hsl(203, 77%, 31%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-independent-voices/dreamer/soft/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/dreamer/soft/preview.svg new file mode 100644 index 0000000000..f801303d7d --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/dreamer/soft/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/expressionist/balanced/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/expressionist/balanced/icon.svg new file mode 100644 index 0000000000..28974b9b4b --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/expressionist/balanced/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/expressionist/balanced/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/expressionist/balanced/manifest.json new file mode 100644 index 0000000000..17eac4aa7f --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/expressionist/balanced/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "expressionist-balanced-colorway@mozilla.org" + } + }, + "name": "Expressionist – Balanced", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 0%)", + "tab_text": "hsl(0, 0%, 0%)", + "tab_selected": "hsl(46, 91%, 95%)", + "tab_line": "transparent", + "tab_loading": "hsl(0, 0%, 0%)", + "tab_loading_inactive": "hsl(0, 0%, 0%)", + "frame": "hsl(45, 85%, 63%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(0, 0%, 0%)", + "popup_border": "hsl(33, 91%, 27%)", + "popup_highlight": "hsla(45, 85%, 63%, 0.2)", + "popup_highlight_text": "hsl(0, 0%, 0%)", + "toolbar": "hsl(45, 93%, 77%)", + "toolbar_text": "hsl(0, 0%, 0%)", + "toolbar_field": "hsl(46, 91%, 95%)", + "toolbar_field_text": "hsl(0, 0%, 0%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 179, 244, 1)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(45, 85%, 63%)", + "ntp_background": "hsl(46, 94%, 94%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(0, 0%, 0%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(0, 0%, 0%)", + "sidebar_highlight": "hsla(45, 85%, 63%, 0.2)", + "address_bar_box": "hsl(45, 85%, 63%)", + "address_bar_box_hover": "hsla(45, 85%, 63%, 0.8)", + "address_bar_box_active": "hsla(45, 85%, 63%, 0.65)", + "address_bar_box_focus": "hsl(45, 93%, 77%)", + "address_bar_box_text": "hsl(0, 0%, 0%)", + "address_bar_url_color": "hsl(33, 91%, 27%)", + "panel_item_hover": "hsla(45, 85%, 63%, 0.2)", + "panel_item_active": "hsla(45, 85%, 63%, 0.35)", + "panel_separator": "hsl(33, 91%, 27%)", + "icons_attention": "hsl(0, 0%, 0%)", + "toolbar_field_icons_attention": "hsl(0, 0%, 0%)", + "tab_attention_dot": "hsl(146, 15%, 36%)", + "appmenu_update_icon_color": "hsl(146, 15%, 36%)", + "appmenu_info_icon_color": "hsl(203, 77%, 31%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-independent-voices/expressionist/balanced/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/expressionist/balanced/preview.svg new file mode 100644 index 0000000000..8d0bb43756 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/expressionist/balanced/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/expressionist/bold/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/expressionist/bold/icon.svg new file mode 100644 index 0000000000..bd6d7f390f --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/expressionist/bold/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/expressionist/bold/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/expressionist/bold/manifest.json new file mode 100644 index 0000000000..514463473c --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/expressionist/bold/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "expressionist-bold-colorway@mozilla.org" + } + }, + "name": "Expressionist – Bold", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 100%)", + "tab_text": "hsl(0, 0%, 100%)", + "tab_selected": "hsl(47, 95%, 8%)", + "tab_line": "hsl(45, 86%, 83%)", + "tab_loading": "hsl(45, 68%, 66%)", + "tab_loading_inactive": "hsl(45, 68%, 66%)", + "frame": "hsl(45, 95%, 17%)", + "popup": "hsl(47, 95%, 8%)", + "popup_text": "hsl(0, 0%, 100%)", + "popup_border": "hsl(45, 49%, 77%)", + "popup_highlight": "hsla(45, 87%, 47%, 0.2)", + "popup_highlight_text": "hsl(0, 0%, 100%)", + "toolbar": "hsl(45, 89%, 25%)", + "toolbar_text": "hsl(0, 0%, 100%)", + "toolbar_field": "hsl(45, 95%, 17%)", + "toolbar_field_text": "hsl(0, 0%, 100%)", + "toolbar_field_focus": "hsl(47, 95%, 8%)", + "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(45, 95%, 17%)", + "ntp_background": "hsl(46, 68%, 4%)", + "ntp_card_background": "hsl(47, 95%, 8%)", + "ntp_text": "hsl(0, 0%, 100%)", + "sidebar": "hsl(47, 95%, 8%)", + "sidebar_text": "hsl(0, 0%, 100%)", + "sidebar_highlight": "hsla(45, 87%, 47%, 0.2)", + "address_bar_box": "hsl(47, 95%, 8%)", + "address_bar_box_hover": "hsla(47, 95%, 8%, 0.8)", + "address_bar_box_active": "hsla(47, 95%, 8%, 0.65)", + "address_bar_box_focus": "hsl(45, 89%, 25%)", + "address_bar_box_text": "hsl(0, 0%, 100%)", + "address_bar_url_color": "hsl(45, 78%, 82%)", + "panel_item_hover": "hsla(45, 87%, 47%, 0.2)", + "panel_item_active": "hsla(45, 87%, 47%, 0.35)", + "panel_separator": "hsl(45, 49%, 77%)", + "icons_attention": "hsl(45, 68%, 66%)", + "toolbar_field_icons_attention": "hsl(45, 68%, 66%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_update_icon_color": "hsl(94, 100%, 71%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-independent-voices/expressionist/bold/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/expressionist/bold/preview.svg new file mode 100644 index 0000000000..e26a8edcf0 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/expressionist/bold/preview.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/expressionist/soft/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/expressionist/soft/icon.svg new file mode 100644 index 0000000000..a97d148a37 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/expressionist/soft/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/expressionist/soft/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/expressionist/soft/manifest.json new file mode 100644 index 0000000000..de192b05df --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/expressionist/soft/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "expressionist-soft-colorway@mozilla.org" + } + }, + "name": "Expressionist – Soft", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(30, 5%, 8%)", + "tab_text": "hsl(30, 5%, 8%)", + "tab_selected": "hsl(0, 0%, 100%)", + "tab_line": "transparent", + "tab_loading": "hsl(33, 74%, 29%)", + "tab_loading_inactive": "hsl(33, 74%, 29%)", + "frame": "hsl(45, 76%, 85%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(30, 5%, 8%)", + "popup_border": "hsl(45, 91%, 30%)", + "popup_highlight": "hsla(40, 90%, 50%, 0.2)", + "popup_highlight_text": "hsl(30, 5%, 8%)", + "toolbar": "hsl(46, 94%, 94%)", + "toolbar_text": "hsl(30, 5%, 8%)", + "toolbar_field": "hsl(45, 76%, 85%)", + "toolbar_field_text": "hsl(30, 5%, 8%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(45, 76%, 85%)", + "ntp_background": "hsl(44, 100%, 97%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(30, 5%, 8%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(30, 5%, 8%)", + "sidebar_highlight": "hsla(40, 90%, 50%, 0.2)", + "address_bar_box": "hsl(0, 0%, 100%)", + "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)", + "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)", + "address_bar_box_focus": "hsl(46, 94%, 94%)", + "address_bar_box_text": "hsl(30, 5%, 8%)", + "address_bar_url_color": "hsl(33, 86%, 23%)", + "panel_item_hover": "hsla(40, 90%, 50%, 0.2)", + "panel_item_active": "hsla(40, 90%, 50%, 0.35)", + "panel_separator": "hsl(45, 91%, 30%)", + "icons_attention": "hsl(33, 74%, 29%)", + "toolbar_field_icons_attention": "hsl(33, 74%, 29%)", + "tab_attention_dot": "hsl(146, 15%, 36%)", + "appmenu_update_icon_color": "hsl(146, 15%, 36%)", + "appmenu_info_icon_color": "hsl(203, 77%, 31%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-independent-voices/expressionist/soft/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/expressionist/soft/preview.svg new file mode 100644 index 0000000000..9eb3ddf051 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/expressionist/soft/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/innovator/balanced/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/innovator/balanced/icon.svg new file mode 100644 index 0000000000..29a6895ca7 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/innovator/balanced/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/innovator/balanced/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/innovator/balanced/manifest.json new file mode 100644 index 0000000000..b47d0dcbd5 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/innovator/balanced/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "innovator-balanced-colorway@mozilla.org" + } + }, + "name": "Innovator – Balanced", + "author": "Mozilla", + "version": "1.1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 100%)", + "tab_text": "hsl(0, 0%, 0%)", + "tab_selected": "hsl(12, 100%, 91%)", + "tab_line": "transparent", + "tab_loading": "hsl(0, 0%, 0%)", + "tab_loading_inactive": "hsl(0, 0%, 0%)", + "frame": "hsl(14, 94%, 55%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(0, 0%, 0%)", + "popup_border": "hsl(10, 92%, 33%)", + "popup_highlight": "hsla(17, 89%, 79%, 0.3)", + "popup_highlight_text": "hsl(0, 0%, 0%)", + "toolbar": "hsl(14, 93%, 83%)", + "toolbar_text": "hsl(0, 0%, 0%)", + "toolbar_field": "hsl(12, 100%, 91%)", + "toolbar_field_text": "hsl(0, 0%, 0%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 179, 244, 1)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(14, 94%, 55%)", + "ntp_background": "hsl(11, 100%, 90%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(0, 0%, 0%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(0, 0%, 0%)", + "sidebar_highlight": "hsla(17, 89%, 79%, 0.3)", + "address_bar_box": "hsl(14, 94%, 55%)", + "address_bar_box_hover": "hsla(14, 94%, 55%, 0.8)", + "address_bar_box_active": "hsla(14, 94%, 55%, 0.65)", + "address_bar_box_focus": "hsl(14, 93%, 83%)", + "address_bar_box_text": "hsl(0, 0%, 100%)", + "address_bar_url_color": "hsl(10, 86%, 40%)", + "panel_item_hover": "hsla(17, 89%, 79%, 0.3)", + "panel_item_active": "hsla(17, 89%, 79%, 0.45)", + "panel_separator": "hsl(10, 92%, 33%)", + "icons_attention": "hsl(0, 0%, 0%)", + "toolbar_field_icons_attention": "hsl(0, 0%, 0%)", + "tab_attention_dot": "hsl(146, 15%, 36%)", + "appmenu_update_icon_color": "hsl(146, 15%, 36%)", + "appmenu_info_icon_color": "hsl(203, 77%, 31%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-independent-voices/innovator/balanced/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/innovator/balanced/preview.svg new file mode 100644 index 0000000000..292ad647a2 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/innovator/balanced/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/innovator/bold/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/innovator/bold/icon.svg new file mode 100644 index 0000000000..3c96b19dd2 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/innovator/bold/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/innovator/bold/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/innovator/bold/manifest.json new file mode 100644 index 0000000000..395405b791 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/innovator/bold/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "innovator-bold-colorway@mozilla.org" + } + }, + "name": "Innovator – Bold", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 100%)", + "tab_text": "hsl(0, 0%, 100%)", + "tab_selected": "hsl(11, 96%, 10%)", + "tab_line": "hsl(10, 93%, 89%)", + "tab_loading": "hsl(11, 88%, 90%)", + "tab_loading_inactive": "hsl(11, 88%, 90%)", + "frame": "hsl(10, 89%, 18%)", + "popup": "hsl(11, 96%, 10%)", + "popup_text": "hsl(0, 0%, 100%)", + "popup_border": "hsl(10, 60%, 68%)", + "popup_highlight": "hsla(10, 85%, 36%, 0.3)", + "popup_highlight_text": "hsl(0, 0%, 100%)", + "toolbar": "hsl(11, 87%, 32%)", + "toolbar_text": "hsl(0, 0%, 100%)", + "toolbar_field": "hsl(10, 89%, 18%)", + "toolbar_field_text": "hsl(0, 0%, 100%)", + "toolbar_field_focus": "hsl(11, 96%, 10%)", + "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(10, 89%, 18%)", + "ntp_background": "hsl(10, 100%, 1%)", + "ntp_card_background": "hsl(11, 96%, 10%)", + "ntp_text": "hsl(0, 0%, 100%)", + "sidebar": "hsl(11, 96%, 10%)", + "sidebar_text": "hsl(0, 0%, 100%)", + "sidebar_highlight": "hsla(10, 85%, 36%, 0.3)", + "address_bar_box": "hsl(11, 96%, 10%)", + "address_bar_box_hover": "hsla(11, 96%, 10%, 0.8)", + "address_bar_box_active": "hsla(11, 96%, 10%, 0.65)", + "address_bar_box_focus": "hsl(11, 87%, 32%)", + "address_bar_box_text": "hsl(0, 0%, 100%)", + "address_bar_url_color": "hsl(350, 57%, 90%)", + "panel_item_hover": "hsla(10, 85%, 36%, 0.3)", + "panel_item_active": "hsla(10, 85%, 36%, 0.45)", + "panel_separator": "hsl(10, 60%, 68%)", + "icons_attention": "hsl(11, 88%, 90%)", + "toolbar_field_icons_attention": "hsl(11, 88%, 90%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_update_icon_color": "hsl(94, 100%, 71%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-independent-voices/innovator/bold/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/innovator/bold/preview.svg new file mode 100644 index 0000000000..fdb79fe84d --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/innovator/bold/preview.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/innovator/soft/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/innovator/soft/icon.svg new file mode 100644 index 0000000000..6df542ae42 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/innovator/soft/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/innovator/soft/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/innovator/soft/manifest.json new file mode 100644 index 0000000000..df0e55a309 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/innovator/soft/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "innovator-soft-colorway@mozilla.org" + } + }, + "name": "Innovator – Soft", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(351, 32%, 8%)", + "tab_text": "hsl(351, 32%, 8%)", + "tab_selected": "hsl(0, 0%, 100%)", + "tab_line": "transparent", + "tab_loading": "hsl(14, 89%, 28%)", + "tab_loading_inactive": "hsl(14, 89%, 28%)", + "frame": "hsl(14, 81%, 81%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(351, 32%, 8%)", + "popup_border": "hsl(14, 93%, 36%)", + "popup_highlight": "hsla(14, 83%, 76%, 0.4)", + "popup_highlight_text": "hsl(351, 32%, 8%)", + "toolbar": "hsl(14, 64%, 87%)", + "toolbar_text": "hsl(351, 32%, 8%)", + "toolbar_field": "hsl(14, 81%, 81%)", + "toolbar_field_text": "hsl(351, 32%, 8%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(14, 81%, 81%)", + "ntp_background": "hsl(14, 84%, 95%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(351, 32%, 8%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(351, 32%, 8%)", + "sidebar_highlight": "hsla(14, 83%, 76%, 0.4)", + "address_bar_box": "hsl(0, 0%, 100%)", + "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)", + "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)", + "address_bar_box_focus": "hsl(14, 64%, 87%)", + "address_bar_box_text": "hsl(351, 32%, 8%)", + "address_bar_url_color": "hsl(14, 86%, 41%)", + "panel_item_hover": "hsla(14, 83%, 76%, 0.4)", + "panel_item_active": "hsla(14, 83%, 76%, 0.55)", + "panel_separator": "hsl(14, 93%, 36%)", + "icons_attention": "hsl(14, 89%, 28%)", + "toolbar_field_icons_attention": "hsl(14, 89%, 28%)", + "tab_attention_dot": "hsl(146, 15%, 36%)", + "appmenu_update_icon_color": "hsl(146, 15%, 36%)", + "appmenu_info_icon_color": "hsl(203, 77%, 31%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-independent-voices/innovator/soft/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/innovator/soft/preview.svg new file mode 100644 index 0000000000..fd076d525e --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/innovator/soft/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/playmaker/balanced/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/playmaker/balanced/icon.svg new file mode 100644 index 0000000000..dec120e11f --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/playmaker/balanced/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/playmaker/balanced/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/playmaker/balanced/manifest.json new file mode 100644 index 0000000000..0ef95e6f04 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/playmaker/balanced/manifest.json @@ -0,0 +1,74 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "playmaker-balanced-colorway@mozilla.org" + } + }, + "name": "Playmaker – Balanced", + "author": "Mozilla", + "version": "1.1.2", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 100%)", + "tab_text": "hsl(0, 0%, 0%)", + "tab_selected": "hsl(352, 65%, 95%)", + "tab_line": "transparent", + "tab_loading": "hsl(0, 0%, 0%)", + "tab_loading_inactive": "hsl(0, 0%, 0%)", + "frame": "hsl(354, 71%, 43%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(0, 0%, 0%)", + "popup_border": "hsl(354, 87%, 36%)", + "popup_highlight": "hsla(355, 62%, 75%, 0.3)", + "popup_highlight_text": "hsl(0, 0%, 0%)", + "toolbar": "hsl(354, 80%, 69%)", + "toolbar_text": "hsl(0, 0%, 100%)", + "toolbar_field": "hsl(352, 65%, 95%)", + "toolbar_field_text": "hsl(0, 0%, 0%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 179, 244, 1)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(354, 71%, 43%)", + "ntp_background": "hsl(355, 73%, 91%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(0, 0%, 0%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(0, 0%, 0%)", + "sidebar_highlight": "hsla(355, 62%, 75%, 0.3)", + "address_bar_box": "hsl(354, 71%, 43%)", + "address_bar_box_hover": "hsla(354, 71%, 43%, 0.8)", + "address_bar_box_active": "hsla(354, 71%, 43%, 0.65)", + "address_bar_box_focus": "hsl(354, 80%, 69%)", + "address_bar_box_text": "hsl(0, 0%, 100%)", + "address_bar_url_color": "hsl(354, 79%, 40%)", + "panel_item_hover": "hsla(355, 62%, 75%, 0.3)", + "panel_item_active": "hsla(355, 62%, 75%, 0.45)", + "panel_separator": "hsl(354, 87%, 36%)", + "icons_attention": "hsl(0, 0%, 0%)", + "toolbar_field_icons_attention": "hsl(0, 0%, 0%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-independent-voices/playmaker/balanced/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/playmaker/balanced/preview.svg new file mode 100644 index 0000000000..69fd21bad0 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/playmaker/balanced/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/playmaker/bold/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/playmaker/bold/icon.svg new file mode 100644 index 0000000000..8ca7b43562 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/playmaker/bold/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/playmaker/bold/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/playmaker/bold/manifest.json new file mode 100644 index 0000000000..9229b9c7b4 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/playmaker/bold/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "playmaker-bold-colorway@mozilla.org" + } + }, + "name": "Playmaker – Bold", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 100%)", + "tab_text": "hsl(0, 0%, 100%)", + "tab_selected": "hsl(355, 61%, 11%)", + "tab_line": "hsl(354, 80%, 40%)", + "tab_loading": "hsl(0, 95%, 84%)", + "tab_loading_inactive": "hsl(0, 95%, 84%)", + "frame": "hsl(354, 78%, 18%)", + "popup": "hsl(355, 61%, 11%)", + "popup_text": "hsl(0, 0%, 100%)", + "popup_border": "hsl(354, 83%, 75%)", + "popup_highlight": "hsla(354, 71%, 43%, 0.4)", + "popup_highlight_text": "hsl(0, 0%, 100%)", + "toolbar": "hsl(354, 56%, 28%)", + "toolbar_text": "hsl(0, 0%, 100%)", + "toolbar_field": "hsl(354, 78%, 18%)", + "toolbar_field_text": "hsl(0, 0%, 100%)", + "toolbar_field_focus": "hsl(355, 61%, 11%)", + "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(354, 78%, 18%)", + "ntp_background": "hsl(0, 50%, 1%)", + "ntp_card_background": "hsl(355, 61%, 11%)", + "ntp_text": "hsl(0, 0%, 100%)", + "sidebar": "hsl(355, 61%, 11%)", + "sidebar_text": "hsl(0, 0%, 100%)", + "sidebar_highlight": "hsla(354, 71%, 43%, 0.4)", + "address_bar_box": "hsl(355, 61%, 11%)", + "address_bar_box_hover": "hsla(355, 61%, 11%, 0.8)", + "address_bar_box_active": "hsla(355, 61%, 11%, 0.65)", + "address_bar_box_focus": "hsl(354, 56%, 28%)", + "address_bar_box_text": "hsl(0, 0%, 100%)", + "address_bar_url_color": "hsl(4, 82%, 76%)", + "panel_item_hover": "hsla(354, 71%, 43%, 0.4)", + "panel_item_active": "hsla(354, 71%, 43%, 0.55)", + "panel_separator": "hsl(354, 83%, 75%)", + "icons_attention": "hsl(0, 95%, 84%)", + "toolbar_field_icons_attention": "hsl(0, 95%, 84%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_update_icon_color": "hsl(94, 100%, 71%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-independent-voices/playmaker/bold/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/playmaker/bold/preview.svg new file mode 100644 index 0000000000..bc3f80cbd2 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/playmaker/bold/preview.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/playmaker/soft/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/playmaker/soft/icon.svg new file mode 100644 index 0000000000..53cef4c9b9 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/playmaker/soft/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/playmaker/soft/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/playmaker/soft/manifest.json new file mode 100644 index 0000000000..5497dd7e9a --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/playmaker/soft/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "playmaker-soft-colorway@mozilla.org" + } + }, + "name": "Playmaker – Soft", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(7, 92%, 15%)", + "tab_text": "hsl(7, 92%, 15%)", + "tab_selected": "hsl(0, 0%, 100%)", + "tab_line": "transparent", + "tab_loading": "hsl(10, 89%, 22%)", + "tab_loading_inactive": "hsl(10, 89%, 22%)", + "frame": "hsl(354, 91%, 87%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(7, 92%, 15%)", + "popup_border": "hsl(355, 96%, 29%)", + "popup_highlight": "hsla(354, 93%, 84%, 0.3)", + "popup_highlight_text": "hsl(7, 92%, 15%)", + "toolbar": "hsl(355, 100%, 93%)", + "toolbar_text": "hsl(7, 92%, 15%)", + "toolbar_field": "hsl(354, 91%, 87%)", + "toolbar_field_text": "hsl(7, 92%, 15%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(354, 91%, 87%)", + "ntp_background": "hsl(0, 100%, 99%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(7, 92%, 15%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(7, 92%, 15%)", + "sidebar_highlight": "hsla(354, 93%, 84%, 0.3)", + "address_bar_box": "hsl(0, 0%, 100%)", + "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)", + "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)", + "address_bar_box_focus": "hsl(355, 100%, 93%)", + "address_bar_box_text": "hsl(7, 92%, 15%)", + "address_bar_url_color": "hsl(355, 90%, 30%)", + "panel_item_hover": "hsla(354, 93%, 84%, 0.3)", + "panel_item_active": "hsla(354, 93%, 84%, 0.45)", + "panel_separator": "hsl(355, 96%, 29%)", + "icons_attention": "hsl(10, 89%, 22%)", + "toolbar_field_icons_attention": "hsl(10, 89%, 22%)", + "tab_attention_dot": "hsl(146, 15%, 36%)", + "appmenu_update_icon_color": "hsl(146, 15%, 36%)", + "appmenu_info_icon_color": "hsl(203, 77%, 31%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-independent-voices/playmaker/soft/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/playmaker/soft/preview.svg new file mode 100644 index 0000000000..08d6960850 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/playmaker/soft/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/visionary/balanced/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/visionary/balanced/icon.svg new file mode 100644 index 0000000000..4404484e37 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/visionary/balanced/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/visionary/balanced/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/visionary/balanced/manifest.json new file mode 100644 index 0000000000..7710cde886 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/visionary/balanced/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "visionary-balanced-colorway@mozilla.org" + } + }, + "name": "Visionary – Balanced", + "author": "Mozilla", + "version": "1.1.2", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 100%)", + "tab_text": "hsl(0, 0%, 0%)", + "tab_selected": "hsl(150, 57%, 97%)", + "tab_line": "transparent", + "tab_loading": "hsl(0, 0%, 0%)", + "tab_loading_inactive": "hsl(0, 0%, 0%)", + "frame": "hsl(147, 94%, 25%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(0, 0%, 0%)", + "popup_border": "hsl(147, 72%, 21%)", + "popup_highlight": "hsla(147, 40%, 78%, 0.3)", + "popup_highlight_text": "hsl(0, 0%, 0%)", + "toolbar": "hsl(146, 38%, 49%)", + "toolbar_text": "hsl(0, 0%, 100%)", + "toolbar_field": "hsl(150, 57%, 97%)", + "toolbar_field_text": "hsl(0, 0%, 0%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 179, 244, 1)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(147, 94%, 25%)", + "ntp_background": "hsl(146, 30%, 86%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(0, 0%, 0%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(0, 0%, 0%)", + "sidebar_highlight": "hsla(147, 40%, 78%, 0.3)", + "address_bar_box": "hsl(147, 94%, 25%)", + "address_bar_box_hover": "hsla(147, 94%, 25%, 0.8)", + "address_bar_box_active": "hsla(147, 94%, 25%, 0.65)", + "address_bar_box_focus": "hsl(146, 38%, 49%)", + "address_bar_box_text": "hsl(0, 0%, 100%)", + "address_bar_url_color": "hsl(147, 89%, 19%)", + "panel_item_hover": "hsla(147, 40%, 78%, 0.3)", + "panel_item_active": "hsla(147, 40%, 78%, 0.45)", + "panel_separator": "hsl(147, 72%, 21%)", + "icons_attention": "hsl(0, 0%, 0%)", + "toolbar_field_icons_attention": "hsl(0, 0%, 0%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_update_icon_color": "hsl(146, 15%, 36%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-independent-voices/visionary/balanced/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/visionary/balanced/preview.svg new file mode 100644 index 0000000000..e08c04ad37 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/visionary/balanced/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/visionary/bold/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/visionary/bold/icon.svg new file mode 100644 index 0000000000..caadabeede --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/visionary/bold/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/visionary/bold/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/visionary/bold/manifest.json new file mode 100644 index 0000000000..45adf3316e --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/visionary/bold/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "visionary-bold-colorway@mozilla.org" + } + }, + "name": "Visionary – Bold", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 100%)", + "tab_text": "hsl(0, 0%, 100%)", + "tab_selected": "hsl(148, 74%, 7%)", + "tab_line": "hsl(146, 65%, 21%)", + "tab_loading": "hsl(147, 72%, 49%)", + "tab_loading_inactive": "hsl(147, 72%, 49%)", + "frame": "hsl(146, 89%, 11%)", + "popup": "hsl(148, 74%, 7%)", + "popup_text": "hsl(0, 0%, 100%)", + "popup_border": "hsl(146, 66%, 37%)", + "popup_highlight": "hsla(133, 94%, 27%, 0.3)", + "popup_highlight_text": "hsl(0, 0%, 100%)", + "toolbar": "hsl(147, 82%, 17%)", + "toolbar_text": "hsl(0, 0%, 100%)", + "toolbar_field": "hsl(146, 89%, 11%)", + "toolbar_field_text": "hsl(0, 0%, 100%)", + "toolbar_field_focus": "hsl(148, 74%, 7%)", + "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(146, 89%, 11%)", + "ntp_background": "hsl(150, 29%, 3%)", + "ntp_card_background": "hsl(148, 74%, 7%)", + "ntp_text": "hsl(0, 0%, 100%)", + "sidebar": "hsl(148, 74%, 7%)", + "sidebar_text": "hsl(0, 0%, 100%)", + "sidebar_highlight": "hsla(133, 94%, 27%, 0.3)", + "address_bar_box": "hsl(148, 74%, 7%)", + "address_bar_box_hover": "hsla(148, 74%, 7%, 0.8)", + "address_bar_box_active": "hsla(148, 74%, 7%, 0.65)", + "address_bar_box_focus": "hsl(147, 82%, 17%)", + "address_bar_box_text": "hsl(0, 0%, 100%)", + "address_bar_url_color": "hsl(40, 6%, 90%)", + "panel_item_hover": "hsla(133, 94%, 27%, 0.3)", + "panel_item_active": "hsla(133, 94%, 27%, 0.45)", + "panel_separator": "hsl(146, 66%, 37%)", + "icons_attention": "hsl(147, 72%, 49%)", + "toolbar_field_icons_attention": "hsl(147, 72%, 49%)", + "tab_attention_dot": "hsl(94, 100%, 71%)", + "appmenu_update_icon_color": "hsl(94, 100%, 71%)", + "appmenu_info_icon_color": "hsl(173, 100%, 71%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-independent-voices/visionary/bold/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/visionary/bold/preview.svg new file mode 100644 index 0000000000..9d03199725 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/visionary/bold/preview.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/visionary/soft/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/visionary/soft/icon.svg new file mode 100644 index 0000000000..6de52afaf2 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/visionary/soft/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-independent-voices/visionary/soft/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/visionary/soft/manifest.json new file mode 100644 index 0000000000..e335d3f4db --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/visionary/soft/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "visionary-soft-colorway@mozilla.org" + } + }, + "name": "Visionary – Soft", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(48, 10%, 10%)", + "tab_text": "hsl(48, 10%, 10%)", + "tab_selected": "hsl(140, 60%, 98%)", + "tab_line": "transparent", + "tab_loading": "hsl(144, 70%, 21%)", + "tab_loading_inactive": "hsl(144, 70%, 21%)", + "frame": "hsl(147, 53%, 75%)", + "popup": "hsl(140, 60%, 98%)", + "popup_text": "hsl(48, 10%, 10%)", + "popup_border": "hsl(147, 89%, 22%)", + "popup_highlight": "hsla(147, 54%, 52%, 0.3)", + "popup_highlight_text": "hsl(48, 10%, 10%)", + "toolbar": "hsl(146, 49%, 85%)", + "toolbar_text": "hsl(48, 10%, 10%)", + "toolbar_field": "hsl(147, 53%, 75%)", + "toolbar_field_text": "hsl(48, 10%, 10%)", + "toolbar_field_focus": "hsl(140, 60%, 98%)", + "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(147, 53%, 75%)", + "ntp_background": "hsl(148, 100%, 97%)", + "ntp_card_background": "hsl(140, 60%, 98%)", + "ntp_text": "hsl(48, 10%, 10%)", + "sidebar": "hsl(140, 60%, 98%)", + "sidebar_text": "hsl(48, 10%, 10%)", + "sidebar_highlight": "hsla(147, 54%, 52%, 0.3)", + "address_bar_box": "hsl(140, 60%, 98%)", + "address_bar_box_hover": "hsla(140, 60%, 98%, 0.8)", + "address_bar_box_active": "hsla(140, 60%, 98%, 0.65)", + "address_bar_box_focus": "hsl(146, 49%, 85%)", + "address_bar_box_text": "hsl(48, 10%, 10%)", + "address_bar_url_color": "hsl(147, 73%, 27%)", + "panel_item_hover": "hsla(147, 54%, 52%, 0.3)", + "panel_item_active": "hsla(147, 54%, 52%, 0.45)", + "panel_separator": "hsl(147, 89%, 22%)", + "icons_attention": "hsl(144, 70%, 21%)", + "toolbar_field_icons_attention": "hsl(144, 70%, 21%)", + "tab_attention_dot": "hsl(146, 15%, 36%)", + "appmenu_update_icon_color": "hsl(146, 15%, 36%)", + "appmenu_info_icon_color": "hsl(203, 77%, 31%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-independent-voices/visionary/soft/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/visionary/soft/preview.svg new file mode 100644 index 0000000000..864706d582 --- /dev/null +++ b/browser/themes/addons/colorways/2022-independent-voices/visionary/soft/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-true-colors/blue/icon.svg b/browser/themes/addons/colorways/2022-true-colors/blue/icon.svg new file mode 100644 index 0000000000..f562013826 --- /dev/null +++ b/browser/themes/addons/colorways/2022-true-colors/blue/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-true-colors/blue/manifest.json b/browser/themes/addons/colorways/2022-true-colors/blue/manifest.json new file mode 100644 index 0000000000..c0c38d40a1 --- /dev/null +++ b/browser/themes/addons/colorways/2022-true-colors/blue/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "2022blue-colorway@mozilla.org" + } + }, + "name": "Chillaxing", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 0%)", + "tab_text": "hsl(0, 0%, 0%)", + "tab_selected": "hsl(0, 0%, 100%)", + "tab_line": "transparent", + "tab_loading": "hsl(207, 60%, 36%)", + "tab_loading_inactive": "hsl(207, 60%, 36%)", + "frame": "hsl(206, 43%, 65%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(0, 0%, 0%)", + "popup_border": "hsl(207, 43%, 75%)", + "popup_highlight": "hsla(207, 44%, 70%, 0.6)", + "popup_highlight_text": "hsl(0, 0%, 0%)", + "toolbar": "hsl(206, 43%, 78%)", + "toolbar_text": "hsl(0, 0%, 0%)", + "toolbar_field": "hsl(206, 43%, 65%)", + "toolbar_field_text": "hsl(0, 0%, 0%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(206, 43%, 65%)", + "ntp_background": "hsl(207, 43%, 85%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(0, 0%, 0%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(0, 0%, 0%)", + "sidebar_highlight": "hsla(207, 44%, 70%, 0.6)", + "address_bar_box": "hsl(0, 0%, 100%)", + "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)", + "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)", + "address_bar_box_focus": "hsl(206, 43%, 78%)", + "address_bar_box_text": "hsl(0, 0%, 0%)", + "address_bar_url_color": "hsl(207, 43%, 41%)", + "panel_item_hover": "hsla(207, 44%, 70%, 0.6)", + "panel_item_active": "hsla(207, 44%, 70%, 0.75)", + "panel_separator": "hsl(207, 43%, 75%)", + "icons_attention": "hsl(207, 60%, 36%)", + "toolbar_field_icons_attention": "hsl(207, 60%, 36%)", + "tab_attention_dot": "hsl(145, 33%, 40%)", + "appmenu_update_icon_color": "hsl(145, 33%, 40%)", + "appmenu_info_icon_color": "hsl(206, 50%, 41%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-true-colors/blue/preview.svg b/browser/themes/addons/colorways/2022-true-colors/blue/preview.svg new file mode 100644 index 0000000000..96ca0f7ec8 --- /dev/null +++ b/browser/themes/addons/colorways/2022-true-colors/blue/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-true-colors/green/icon.svg b/browser/themes/addons/colorways/2022-true-colors/green/icon.svg new file mode 100644 index 0000000000..2ff592a450 --- /dev/null +++ b/browser/themes/addons/colorways/2022-true-colors/green/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-true-colors/green/manifest.json b/browser/themes/addons/colorways/2022-true-colors/green/manifest.json new file mode 100644 index 0000000000..540507a9fa --- /dev/null +++ b/browser/themes/addons/colorways/2022-true-colors/green/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "2022green-colorway@mozilla.org" + } + }, + "name": "Vegging Out", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 0%)", + "tab_text": "hsl(0, 0%, 0%)", + "tab_selected": "hsl(0, 0%, 100%)", + "tab_line": "transparent", + "tab_loading": "hsl(142, 24%, 32%)", + "tab_loading_inactive": "hsl(142, 24%, 32%)", + "frame": "hsl(142, 32%, 57%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(0, 0%, 0%)", + "popup_border": "hsl(142, 25%, 75%)", + "popup_highlight": "hsla(142, 32%, 78%, 0.8)", + "popup_highlight_text": "hsl(0, 0%, 0%)", + "toolbar": "hsl(142, 32%, 73%)", + "toolbar_text": "hsl(0, 0%, 0%)", + "toolbar_field": "hsl(142, 32%, 57%)", + "toolbar_field_text": "hsl(0, 0%, 0%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(142, 32%, 57%)", + "ntp_background": "hsl(143, 32%, 89%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(0, 0%, 0%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(0, 0%, 0%)", + "sidebar_highlight": "hsla(142, 32%, 78%, 0.8)", + "address_bar_box": "hsl(0, 0%, 100%)", + "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)", + "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)", + "address_bar_box_focus": "hsl(142, 32%, 73%)", + "address_bar_box_text": "hsl(0, 0%, 0%)", + "address_bar_url_color": "hsl(143, 35%, 30%)", + "panel_item_hover": "hsla(142, 32%, 78%, 0.8)", + "panel_item_active": "hsla(142, 32%, 78%, 0.95)", + "panel_separator": "hsl(142, 25%, 75%)", + "icons_attention": "hsl(142, 24%, 32%)", + "toolbar_field_icons_attention": "hsl(142, 24%, 32%)", + "tab_attention_dot": "hsl(141, 15%, 36%)", + "appmenu_update_icon_color": "hsl(141, 15%, 36%)", + "appmenu_info_icon_color": "hsl(203, 77%, 31%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-true-colors/green/preview.svg b/browser/themes/addons/colorways/2022-true-colors/green/preview.svg new file mode 100644 index 0000000000..db7900891a --- /dev/null +++ b/browser/themes/addons/colorways/2022-true-colors/green/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-true-colors/orange/icon.svg b/browser/themes/addons/colorways/2022-true-colors/orange/icon.svg new file mode 100644 index 0000000000..1eb441ce04 --- /dev/null +++ b/browser/themes/addons/colorways/2022-true-colors/orange/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-true-colors/orange/manifest.json b/browser/themes/addons/colorways/2022-true-colors/orange/manifest.json new file mode 100644 index 0000000000..8643398f91 --- /dev/null +++ b/browser/themes/addons/colorways/2022-true-colors/orange/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "2022orange-colorway@mozilla.org" + } + }, + "name": "That’s So Fire", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 0%)", + "tab_text": "hsl(0, 0%, 0%)", + "tab_selected": "hsl(0, 0%, 100%)", + "tab_line": "transparent", + "tab_loading": "hsl(16, 70%, 38%)", + "tab_loading_inactive": "hsl(16, 70%, 38%)", + "frame": "hsl(16, 94%, 65%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(0, 0%, 0%)", + "popup_border": "hsl(16, 72%, 76%)", + "popup_highlight": "hsla(16, 90%, 50%, 0.3)", + "popup_highlight_text": "hsl(0, 0%, 0%)", + "toolbar": "hsl(17, 92%, 80%)", + "toolbar_text": "hsl(0, 0%, 0%)", + "toolbar_field": "hsl(16, 94%, 65%)", + "toolbar_field_text": "hsl(0, 0%, 0%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(16, 94%, 65%)", + "ntp_background": "hsl(17, 92%, 90%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(0, 0%, 0%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(0, 0%, 0%)", + "sidebar_highlight": "hsla(16, 90%, 50%, 0.3)", + "address_bar_box": "hsl(0, 0%, 100%)", + "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)", + "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)", + "address_bar_box_focus": "hsl(17, 92%, 80%)", + "address_bar_box_text": "hsl(0, 0%, 0%)", + "address_bar_url_color": "hsl(16, 90%, 43%)", + "panel_item_hover": "hsla(16, 90%, 50%, 0.3)", + "panel_item_active": "hsla(16, 90%, 50%, 0.45)", + "panel_separator": "hsl(16, 72%, 76%)", + "icons_attention": "hsl(16, 70%, 38%)", + "toolbar_field_icons_attention": "hsl(16, 70%, 38%)", + "tab_attention_dot": "hsl(145, 15%, 43%)", + "appmenu_update_icon_color": "hsl(145, 15%, 43%)", + "appmenu_info_icon_color": "hsl(203, 77%, 41%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-true-colors/orange/preview.svg b/browser/themes/addons/colorways/2022-true-colors/orange/preview.svg new file mode 100644 index 0000000000..fbb738a93b --- /dev/null +++ b/browser/themes/addons/colorways/2022-true-colors/orange/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-true-colors/purple/icon.svg b/browser/themes/addons/colorways/2022-true-colors/purple/icon.svg new file mode 100644 index 0000000000..2e9e6dd54d --- /dev/null +++ b/browser/themes/addons/colorways/2022-true-colors/purple/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-true-colors/purple/manifest.json b/browser/themes/addons/colorways/2022-true-colors/purple/manifest.json new file mode 100644 index 0000000000..2edb9ceaa8 --- /dev/null +++ b/browser/themes/addons/colorways/2022-true-colors/purple/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "2022purple-colorway@mozilla.org" + } + }, + "name": "Bomb-dot-com", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 0%)", + "tab_text": "hsl(0, 0%, 0%)", + "tab_selected": "hsl(0, 0%, 100%)", + "tab_line": "transparent", + "tab_loading": "hsl(285, 35%, 42%)", + "tab_loading_inactive": "hsl(285, 35%, 42%)", + "frame": "hsl(284, 35%, 70%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(0, 0%, 0%)", + "popup_border": "hsl(284, 80%, 77%)", + "popup_highlight": "hsla(284, 61%, 75%, 0.6)", + "popup_highlight_text": "hsl(0, 0%, 0%)", + "toolbar": "hsl(285, 36%, 81%)", + "toolbar_text": "hsl(0, 0%, 0%)", + "toolbar_field": "hsl(284, 35%, 70%)", + "toolbar_field_text": "hsl(0, 0%, 0%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(284, 35%, 70%)", + "ntp_background": "hsl(284, 35%, 88%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(0, 0%, 0%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(0, 0%, 0%)", + "sidebar_highlight": "hsla(284, 61%, 75%, 0.6)", + "address_bar_box": "hsl(0, 0%, 100%)", + "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)", + "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)", + "address_bar_box_focus": "hsl(285, 36%, 81%)", + "address_bar_box_text": "hsl(0, 0%, 0%)", + "address_bar_url_color": "hsl(285, 32%, 40%)", + "panel_item_hover": "hsla(284, 61%, 75%, 0.6)", + "panel_item_active": "hsla(284, 61%, 75%, 0.75)", + "panel_separator": "hsl(284, 80%, 77%)", + "icons_attention": "hsl(285, 35%, 42%)", + "toolbar_field_icons_attention": "hsl(285, 35%, 42%)", + "tab_attention_dot": "hsl(145, 35%, 46%)", + "appmenu_update_icon_color": "hsl(145, 35%, 46%)", + "appmenu_info_icon_color": "hsl(203, 80%, 50%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-true-colors/purple/preview.svg b/browser/themes/addons/colorways/2022-true-colors/purple/preview.svg new file mode 100644 index 0000000000..76f57a9fb6 --- /dev/null +++ b/browser/themes/addons/colorways/2022-true-colors/purple/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-true-colors/red/icon.svg b/browser/themes/addons/colorways/2022-true-colors/red/icon.svg new file mode 100644 index 0000000000..899cffc519 --- /dev/null +++ b/browser/themes/addons/colorways/2022-true-colors/red/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-true-colors/red/manifest.json b/browser/themes/addons/colorways/2022-true-colors/red/manifest.json new file mode 100644 index 0000000000..b4cfb2a82a --- /dev/null +++ b/browser/themes/addons/colorways/2022-true-colors/red/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "2022red-colorway@mozilla.org" + } + }, + "name": "Rawrrr!", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 0%)", + "tab_text": "hsl(0, 0%, 0%)", + "tab_selected": "hsl(0, 0%, 100%)", + "tab_line": "transparent", + "tab_loading": "hsl(356, 72%, 27%)", + "tab_loading_inactive": "hsl(356, 72%, 27%)", + "frame": "hsl(356, 95%, 67%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(0, 0%, 0%)", + "popup_border": "hsl(356, 61%, 78%)", + "popup_highlight": "hsla(356, 75%, 76%, 0.6)", + "popup_highlight_text": "hsl(0, 0%, 0%)", + "toolbar": "hsl(356, 91%, 75%)", + "toolbar_text": "hsl(0, 0%, 0%)", + "toolbar_field": "hsl(356, 95%, 67%)", + "toolbar_field_text": "hsl(0, 0%, 0%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(356, 95%, 67%)", + "ntp_background": "hsl(356, 84%, 88%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(0, 0%, 0%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(0, 0%, 0%)", + "sidebar_highlight": "hsla(356, 75%, 76%, 0.6)", + "address_bar_box": "hsl(0, 0%, 100%)", + "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)", + "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)", + "address_bar_box_focus": "hsl(356, 91%, 75%)", + "address_bar_box_text": "hsl(0, 0%, 0%)", + "address_bar_url_color": "hsl(356, 72%, 42%)", + "panel_item_hover": "hsla(356, 75%, 76%, 0.6)", + "panel_item_active": "hsla(356, 75%, 76%, 0.75)", + "panel_separator": "hsl(356, 61%, 78%)", + "icons_attention": "hsl(356, 72%, 27%)", + "toolbar_field_icons_attention": "hsl(356, 72%, 27%)", + "tab_attention_dot": "hsl(145, 15%, 34%)", + "appmenu_update_icon_color": "hsl(145, 15%, 34%)", + "appmenu_info_icon_color": "hsl(204, 75%, 28%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-true-colors/red/preview.svg b/browser/themes/addons/colorways/2022-true-colors/red/preview.svg new file mode 100644 index 0000000000..7ce088c235 --- /dev/null +++ b/browser/themes/addons/colorways/2022-true-colors/red/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-true-colors/yellow/icon.svg b/browser/themes/addons/colorways/2022-true-colors/yellow/icon.svg new file mode 100644 index 0000000000..055ac2904b --- /dev/null +++ b/browser/themes/addons/colorways/2022-true-colors/yellow/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/colorways/2022-true-colors/yellow/manifest.json b/browser/themes/addons/colorways/2022-true-colors/yellow/manifest.json new file mode 100644 index 0000000000..fad940bbb4 --- /dev/null +++ b/browser/themes/addons/colorways/2022-true-colors/yellow/manifest.json @@ -0,0 +1,76 @@ +{ + "manifest_version": 2, + "applications": { + "gecko": { + "id": "2022yellow-colorway@mozilla.org" + } + }, + "name": "Cheese Puff", + "author": "Mozilla", + "version": "1.1", + "icons": { + "32": "icon.svg" + }, + "theme": { + "colors": { + "tab_background_text": "hsl(0, 0%, 0%)", + "tab_text": "hsl(0, 0%, 0%)", + "tab_selected": "hsl(0, 0%, 100%)", + "tab_line": "transparent", + "tab_loading": "hsl(29, 84%, 46%)", + "tab_loading_inactive": "hsl(29, 84%, 46%)", + "frame": "hsl(39, 98%, 63%)", + "popup": "hsl(0, 0%, 100%)", + "popup_text": "hsl(0, 0%, 0%)", + "popup_border": "hsl(39, 100%, 68%)", + "popup_highlight": "hsla(39, 100%, 72%, 0.9)", + "popup_highlight_text": "hsl(0, 0%, 0%)", + "toolbar": "hsl(39, 98%, 84%)", + "toolbar_text": "hsl(0, 0%, 0%)", + "toolbar_field": "hsl(39, 98%, 63%)", + "toolbar_field_text": "hsl(0, 0%, 0%)", + "toolbar_field_focus": "hsl(0, 0%, 100%)", + "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(39, 98%, 63%)", + "ntp_background": "hsl(39, 97%, 87%)", + "ntp_card_background": "hsl(0, 0%, 100%)", + "ntp_text": "hsl(0, 0%, 0%)", + "sidebar": "hsl(0, 0%, 100%)", + "sidebar_text": "hsl(0, 0%, 0%)", + "sidebar_highlight": "hsla(39, 100%, 72%, 0.9)", + "address_bar_box": "hsl(0, 0%, 100%)", + "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)", + "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)", + "address_bar_box_focus": "hsl(39, 98%, 84%)", + "address_bar_box_text": "hsl(0, 0%, 0%)", + "address_bar_url_color": "hsl(39, 100%, 30%)", + "panel_item_hover": "hsla(39, 100%, 72%, 0.9)", + "panel_item_active": "hsl(39, 100%, 72%)", + "panel_separator": "hsl(39, 100%, 68%)", + "icons_attention": "hsl(29, 84%, 46%)", + "toolbar_field_icons_attention": "hsl(29, 84%, 46%)", + "tab_attention_dot": "hsl(138, 15%, 44%)", + "appmenu_update_icon_color": "hsl(138, 15%, 44%)", + "appmenu_info_icon_color": "hsl(203, 77%, 41%)" + } + }, + "theme_experiment": { + "colors": { + "address_bar_box": "--urlbar-box-bgcolor", + "address_bar_box_hover": "--urlbar-box-hover-bgcolor", + "address_bar_box_active": "--urlbar-box-active-bgcolor", + "address_bar_box_focus": "--urlbar-box-focus-bgcolor", + "address_bar_box_text": "--urlbar-box-text-color", + "address_bar_url_color": "--urlbar-popup-url-color", + "panel_item_hover": "--panel-item-hover-bgcolor", + "panel_item_active": "--panel-item-active-bgcolor", + "panel_separator": "--panel-separator-color", + "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention", + "tab_attention_dot": "--lwt-tab-attention-icon-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_loading_inactive": "--lwt-tab-loading-fill-inactive" + } + } +} diff --git a/browser/themes/addons/colorways/2022-true-colors/yellow/preview.svg b/browser/themes/addons/colorways/2022-true-colors/yellow/preview.svg new file mode 100644 index 0000000000..dfe21a4881 --- /dev/null +++ b/browser/themes/addons/colorways/2022-true-colors/yellow/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/dark/experiment.css b/browser/themes/addons/dark/experiment.css new file mode 100644 index 0000000000..be11bc1988 --- /dev/null +++ b/browser/themes/addons/dark/experiment.css @@ -0,0 +1,6 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* Proton Dark theme */ +@import url("chrome://browser/skin/light-dark-overrides.css"); diff --git a/browser/themes/addons/dark/icon.svg b/browser/themes/addons/dark/icon.svg new file mode 100644 index 0000000000..6d60850b77 --- /dev/null +++ b/browser/themes/addons/dark/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/dark/manifest.json b/browser/themes/addons/dark/manifest.json new file mode 100644 index 0000000000..eb8242fbb8 --- /dev/null +++ b/browser/themes/addons/dark/manifest.json @@ -0,0 +1,97 @@ +{ + "manifest_version": 2, + + "applications": { + "gecko": { + "id": "firefox-compact-dark@mozilla.org" + } + }, + + "name": "Dark", + "description": "A theme with a dark color scheme.", + "author": "Mozilla", + "version": "1.2", + + "icons": {"32": "icon.svg"}, + + "theme": { + "colors": { + "tab_background_text": "#fbfbfe", + "tab_selected": "rgb(66,65,77)", + "tab_text": "rgb(251,251,254)", + "icons": "rgb(251,251,254)", + "frame": "#1c1b22", + "popup": "rgb(66,65,77)", + "popup_text": "rgb(251,251,254)", + "popup_border": "rgb(82,82,94)", + "popup_highlight": "rgb(43,42,51)", + "tab_line": "transparent", + "toolbar": "rgb(43,42,51)", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "hsl(240, 5%, 5%)", + "toolbar_field": "rgb(28,27,34)", + "toolbar_field_border": "transparent", + "toolbar_field_text": "rgb(251,251,254)", + "toolbar_field_focus": "rgb(66,65,77)", + "toolbar_text": "rgb(251, 251, 254)", + "ntp_background": "rgb(43, 42, 51)", + "ntp_card_background": "rgb(66,65,77)", + "ntp_text": "rgb(251, 251, 254)", + "sidebar": "#38383D", + "sidebar_text": "rgb(249, 249, 250)", + "sidebar_border": "rgba(255, 255, 255, 0.1)", + "button": "rgb(43,42,51)", + "button_hover": "rgb(82,82,94)", + "button_active": "rgb(91,91,102)", + "button_primary": "rgb(0, 221, 255)", + "button_primary_hover": "rgb(128, 235, 255)", + "button_primary_active": "rgb(170, 242, 255)", + "button_primary_color": "rgb(43, 42, 51)", + "input_background": "#42414D", + "input_color": "rgb(251,251,254)", + "input_border": "#8f8f9d", + "autocomplete_popup_separator": "rgb(82,82,94)", + "appmenu_update_icon_color": "#54FFBD", + "appmenu_info_icon_color": "#80EBFF", + "tab_icon_overlay_stroke": "rgb(66,65,77)", + "tab_icon_overlay_fill": "rgb(251,251,254)" + }, + "properties": { + "color_scheme": "dark", + "panel_hover": "color-mix(in srgb, currentColor 9%, transparent)", + "panel_active": "color-mix(in srgb, currentColor 14%, transparent)", + "panel_active_darker": "color-mix(in srgb, currentColor 25%, transparent)", + "toolbar_field_icon_opacity": "1", + "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)" + } + }, + + "theme_experiment": { + "stylesheet": "experiment.css", + "colors": { + "button": "--button-bgcolor", + "button_hover": "--button-hover-bgcolor", + "button_active": "--button-active-bgcolor", + "button_primary": "--button-primary-bgcolor", + "button_primary_hover": "--button-primary-hover-bgcolor", + "button_primary_active": "--button-primary-active-bgcolor", + "button_primary_color": "--button-primary-color", + "input_background": "--input-bgcolor", + "input_color": "--input-color", + "input_border": "--input-border-color", + "autocomplete_popup_separator": "--autocomplete-popup-separator-color", + "zoom_controls": "--zoom-controls-bgcolor", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_icon_overlay_stroke": "--tab-icon-overlay-stroke", + "tab_icon_overlay_fill": "--tab-icon-overlay-fill" + }, + "properties": { + "panel_hover": "--panel-item-hover-bgcolor", + "panel_active": "--arrowpanel-dimmed-further", + "panel_active_darker": "--panel-item-active-bgcolor", + "toolbar_field_icon_opacity": "--urlbar-icon-fill-opacity", + "zap_gradient": "--panel-separator-zap-gradient" + } + } +} diff --git a/browser/themes/addons/dark/preview.svg b/browser/themes/addons/dark/preview.svg new file mode 100644 index 0000000000..7fd9cbcfa7 --- /dev/null +++ b/browser/themes/addons/dark/preview.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/jar.mn b/browser/themes/addons/jar.mn new file mode 100644 index 0000000000..69bb3000d6 --- /dev/null +++ b/browser/themes/addons/jar.mn @@ -0,0 +1,102 @@ +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +browser.jar: +% resource builtin-themes %content/builtin-themes/ + + content/builtin-themes/alpenglow (alpenglow/*.svg) + content/builtin-themes/alpenglow/manifest.json (alpenglow/manifest.json) + + content/builtin-themes/dark (dark/*.svg) + content/builtin-themes/dark (dark/*.css) + content/builtin-themes/dark/manifest.json (dark/manifest.json) + + content/builtin-themes/light (light/*.svg) + content/builtin-themes/light (light/*.css) + content/builtin-themes/light/manifest.json (light/manifest.json) + + content/builtin-themes/colorways/2021lush/soft (colorways/2021-life-in-color/lush/soft/*.svg) + content/builtin-themes/colorways/2021lush/soft/manifest.json (colorways/2021-life-in-color/lush/soft/manifest.json) + content/builtin-themes/colorways/2021lush/balanced (colorways/2021-life-in-color/lush/balanced/*.svg) + content/builtin-themes/colorways/2021lush/balanced/manifest.json (colorways/2021-life-in-color/lush/balanced/manifest.json) + content/builtin-themes/colorways/2021lush/bold (colorways/2021-life-in-color/lush/bold/*.svg) + content/builtin-themes/colorways/2021lush/bold/manifest.json (colorways/2021-life-in-color/lush/bold/manifest.json) + content/builtin-themes/colorways/2021abstract/soft (colorways/2021-life-in-color/abstract/soft/*.svg) + content/builtin-themes/colorways/2021abstract/soft/manifest.json (colorways/2021-life-in-color/abstract/soft/manifest.json) + content/builtin-themes/colorways/2021abstract/balanced (colorways/2021-life-in-color/abstract/balanced/*.svg) + content/builtin-themes/colorways/2021abstract/balanced/manifest.json (colorways/2021-life-in-color/abstract/balanced/manifest.json) + content/builtin-themes/colorways/2021abstract/bold (colorways/2021-life-in-color/abstract/bold/*.svg) + content/builtin-themes/colorways/2021abstract/bold/manifest.json (colorways/2021-life-in-color/abstract/bold/manifest.json) + content/builtin-themes/colorways/2021elemental/soft (colorways/2021-life-in-color/elemental/soft/*.svg) + content/builtin-themes/colorways/2021elemental/soft/manifest.json (colorways/2021-life-in-color/elemental/soft/manifest.json) + content/builtin-themes/colorways/2021elemental/balanced (colorways/2021-life-in-color/elemental/balanced/*.svg) + content/builtin-themes/colorways/2021elemental/balanced/manifest.json (colorways/2021-life-in-color/elemental/balanced/manifest.json) + content/builtin-themes/colorways/2021elemental/bold (colorways/2021-life-in-color/elemental/bold/*.svg) + content/builtin-themes/colorways/2021elemental/bold/manifest.json (colorways/2021-life-in-color/elemental/bold/manifest.json) + content/builtin-themes/colorways/2021cheers/soft (colorways/2021-life-in-color/cheers/soft/*.svg) + content/builtin-themes/colorways/2021cheers/soft/manifest.json (colorways/2021-life-in-color/cheers/soft/manifest.json) + content/builtin-themes/colorways/2021cheers/balanced (colorways/2021-life-in-color/cheers/balanced/*.svg) + content/builtin-themes/colorways/2021cheers/balanced/manifest.json (colorways/2021-life-in-color/cheers/balanced/manifest.json) + content/builtin-themes/colorways/2021cheers/bold (colorways/2021-life-in-color/cheers/bold/*.svg) + content/builtin-themes/colorways/2021cheers/bold/manifest.json (colorways/2021-life-in-color/cheers/bold/manifest.json) + content/builtin-themes/colorways/2021graffiti/soft (colorways/2021-life-in-color/graffiti/soft/*.svg) + content/builtin-themes/colorways/2021graffiti/soft/manifest.json (colorways/2021-life-in-color/graffiti/soft/manifest.json) + content/builtin-themes/colorways/2021graffiti/balanced (colorways/2021-life-in-color/graffiti/balanced/*.svg) + content/builtin-themes/colorways/2021graffiti/balanced/manifest.json (colorways/2021-life-in-color/graffiti/balanced/manifest.json) + content/builtin-themes/colorways/2021graffiti/bold (colorways/2021-life-in-color/graffiti/bold/*.svg) + content/builtin-themes/colorways/2021graffiti/bold/manifest.json (colorways/2021-life-in-color/graffiti/bold/manifest.json) + content/builtin-themes/colorways/2021foto/soft (colorways/2021-life-in-color/foto/soft/*.svg) + content/builtin-themes/colorways/2021foto/soft/manifest.json (colorways/2021-life-in-color/foto/soft/manifest.json) + content/builtin-themes/colorways/2021foto/balanced (colorways/2021-life-in-color/foto/balanced/*.svg) + content/builtin-themes/colorways/2021foto/balanced/manifest.json (colorways/2021-life-in-color/foto/balanced/manifest.json) + content/builtin-themes/colorways/2021foto/bold (colorways/2021-life-in-color/foto/bold/*.svg) + content/builtin-themes/colorways/2021foto/bold/manifest.json (colorways/2021-life-in-color/foto/bold/manifest.json) + content/builtin-themes/colorways/2022blue (colorways/2022-true-colors/blue/*.svg) + content/builtin-themes/colorways/2022blue/manifest.json (colorways/2022-true-colors/blue/manifest.json) + content/builtin-themes/colorways/2022green (colorways/2022-true-colors/green/*.svg) + content/builtin-themes/colorways/2022green/manifest.json (colorways/2022-true-colors/green/manifest.json) + content/builtin-themes/colorways/2022orange (colorways/2022-true-colors/orange/*.svg) + content/builtin-themes/colorways/2022orange/manifest.json (colorways/2022-true-colors/orange/manifest.json) + content/builtin-themes/colorways/2022purple (colorways/2022-true-colors/purple/*.svg) + content/builtin-themes/colorways/2022purple/manifest.json (colorways/2022-true-colors/purple/manifest.json) + content/builtin-themes/colorways/2022red (colorways/2022-true-colors/red/*.svg) + content/builtin-themes/colorways/2022red/manifest.json (colorways/2022-true-colors/red/manifest.json) + content/builtin-themes/colorways/2022yellow (colorways/2022-true-colors/yellow/*.svg) + content/builtin-themes/colorways/2022yellow/manifest.json (colorways/2022-true-colors/yellow/manifest.json) + content/builtin-themes/colorways/2022playmaker/soft (colorways/2022-independent-voices/playmaker/soft/*.svg) + content/builtin-themes/colorways/2022playmaker/soft/manifest.json (colorways/2022-independent-voices/playmaker/soft/manifest.json) + content/builtin-themes/colorways/2022playmaker/balanced (colorways/2022-independent-voices/playmaker/balanced/*.svg) + content/builtin-themes/colorways/2022playmaker/balanced/manifest.json (colorways/2022-independent-voices/playmaker/balanced/manifest.json) + content/builtin-themes/colorways/2022playmaker/bold (colorways/2022-independent-voices/playmaker/bold/*.svg) + content/builtin-themes/colorways/2022playmaker/bold/manifest.json (colorways/2022-independent-voices/playmaker/bold/manifest.json) + content/builtin-themes/colorways/2022expressionist/soft (colorways/2022-independent-voices/expressionist/soft/*.svg) + content/builtin-themes/colorways/2022expressionist/soft/manifest.json (colorways/2022-independent-voices/expressionist/soft/manifest.json) + content/builtin-themes/colorways/2022expressionist/balanced (colorways/2022-independent-voices/expressionist/balanced/*.svg) + content/builtin-themes/colorways/2022expressionist/balanced/manifest.json (colorways/2022-independent-voices/expressionist/balanced/manifest.json) + content/builtin-themes/colorways/2022expressionist/bold (colorways/2022-independent-voices/expressionist/bold/*.svg) + content/builtin-themes/colorways/2022expressionist/bold/manifest.json (colorways/2022-independent-voices/expressionist/bold/manifest.json) + content/builtin-themes/colorways/2022visionary/soft (colorways/2022-independent-voices/visionary/soft/*.svg) + content/builtin-themes/colorways/2022visionary/soft/manifest.json (colorways/2022-independent-voices/visionary/soft/manifest.json) + content/builtin-themes/colorways/2022visionary/balanced (colorways/2022-independent-voices/visionary/balanced/*.svg) + content/builtin-themes/colorways/2022visionary/balanced/manifest.json (colorways/2022-independent-voices/visionary/balanced/manifest.json) + content/builtin-themes/colorways/2022visionary/bold (colorways/2022-independent-voices/visionary/bold/*.svg) + content/builtin-themes/colorways/2022visionary/bold/manifest.json (colorways/2022-independent-voices/visionary/bold/manifest.json) + content/builtin-themes/colorways/2022activist/soft (colorways/2022-independent-voices/activist/soft/*.svg) + content/builtin-themes/colorways/2022activist/soft/manifest.json (colorways/2022-independent-voices/activist/soft/manifest.json) + content/builtin-themes/colorways/2022activist/balanced (colorways/2022-independent-voices/activist/balanced/*.svg) + content/builtin-themes/colorways/2022activist/balanced/manifest.json (colorways/2022-independent-voices/activist/balanced/manifest.json) + content/builtin-themes/colorways/2022activist/bold (colorways/2022-independent-voices/activist/bold/*.svg) + content/builtin-themes/colorways/2022activist/bold/manifest.json (colorways/2022-independent-voices/activist/bold/manifest.json) + content/builtin-themes/colorways/2022dreamer/soft (colorways/2022-independent-voices/dreamer/soft/*.svg) + content/builtin-themes/colorways/2022dreamer/soft/manifest.json (colorways/2022-independent-voices/dreamer/soft/manifest.json) + content/builtin-themes/colorways/2022dreamer/balanced (colorways/2022-independent-voices/dreamer/balanced/*.svg) + content/builtin-themes/colorways/2022dreamer/balanced/manifest.json (colorways/2022-independent-voices/dreamer/balanced/manifest.json) + content/builtin-themes/colorways/2022dreamer/bold (colorways/2022-independent-voices/dreamer/bold/*.svg) + content/builtin-themes/colorways/2022dreamer/bold/manifest.json (colorways/2022-independent-voices/dreamer/bold/manifest.json) + content/builtin-themes/colorways/2022innovator/soft (colorways/2022-independent-voices/innovator/soft/*.svg) + content/builtin-themes/colorways/2022innovator/soft/manifest.json (colorways/2022-independent-voices/innovator/soft/manifest.json) + content/builtin-themes/colorways/2022innovator/balanced (colorways/2022-independent-voices/innovator/balanced/*.svg) + content/builtin-themes/colorways/2022innovator/balanced/manifest.json (colorways/2022-independent-voices/innovator/balanced/manifest.json) + content/builtin-themes/colorways/2022innovator/bold (colorways/2022-independent-voices/innovator/bold/*.svg) + content/builtin-themes/colorways/2022innovator/bold/manifest.json (colorways/2022-independent-voices/innovator/bold/manifest.json) diff --git a/browser/themes/addons/light/experiment.css b/browser/themes/addons/light/experiment.css new file mode 100644 index 0000000000..fbb5ce4f51 --- /dev/null +++ b/browser/themes/addons/light/experiment.css @@ -0,0 +1,6 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* Proton Light theme */ +@import url("chrome://browser/skin/light-dark-overrides.css"); diff --git a/browser/themes/addons/light/icon.svg b/browser/themes/addons/light/icon.svg new file mode 100644 index 0000000000..5a4c2d0e67 --- /dev/null +++ b/browser/themes/addons/light/icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/addons/light/manifest.json b/browser/themes/addons/light/manifest.json new file mode 100644 index 0000000000..9faa95b863 --- /dev/null +++ b/browser/themes/addons/light/manifest.json @@ -0,0 +1,98 @@ +{ + "manifest_version": 2, + + "applications": { + "gecko": { + "id": "firefox-compact-light@mozilla.org" + } + }, + + "name": "Light", + "description": "A theme with a light color scheme.", + "author": "Mozilla", + "version": "1.2", + + "icons": {"32": "icon.svg"}, + + "theme": { + "colors": { + "tab_background_text": "rgb(21,20,26)", + "tab_selected": "#fff", + "tab_text": "rgb(21,20,26)", + "icons": "rgb(91,91,102)", + "frame": "#f0f0f4", + "popup": "#fff", + "popup_text": "rgb(21,20,26)", + "popup_border": "rgb(240,240,244)", + "popup_highlight": "#e0e0e6", + "popup_highlight_text": "#15141a", + "tab_line": "transparent", + "toolbar": "#f9f9fb", + "toolbar_top_separator": "transparent", + "toolbar_bottom_separator": "#ccc", + "toolbar_field": "#f0f0f4", + "toolbar_field_text": "rgb(21,20,26)", + "toolbar_field_border": "transparent", + "toolbar_field_focus": "white", + "toolbar_text": "rgb(21,20,26)", + "ntp_background": "#F9F9FB", + "ntp_text": "rgb(21, 20, 26)", + "popup_action_color": "rgb(91,91,102)", + "button": "rgba(207,207,216,.33)", + "button_hover": "rgba(207,207,216,.66)", + "button_active": "rgb(207,207,216)", + "button_primary": "rgb(0, 97, 224)", + "button_primary_hover": "rgb(2, 80, 187)", + "button_primary_active": "rgb(5, 62, 148)", + "button_primary_color": "rgb(251, 251, 254)", + "input_color": "rgb(21,20,26)", + "input_background": "rgb(255,255,255)", + "autocomplete_popup_hover": "rgb(240,240,244)", + "autocomplete_popup_separator": "rgb(240,240,244)", + "appmenu_update_icon_color": "#2AC3A2", + "appmenu_info_icon_color": "#0090ED", + "tab_icon_overlay_stroke": "rgb(255,255,255)", + "tab_icon_overlay_fill": "rgb(91,91,102)" + }, + "properties": { + "color_scheme": "light", + "panel_hover": "color-mix(in srgb, currentColor 12%, transparent)", + "panel_active": "color-mix(in srgb, currentColor 20%, transparent)", + "panel_active_darker": "color-mix(in srgb, currentColor 27%, transparent)", + "toolbar_field_icon_opacity": "0.72", + "input_border_color": "color-mix(in srgb, currentColor 41%, transparent)", + "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)" + } + }, + + "theme_experiment": { + "stylesheet": "experiment.css", + "colors": { + "popup_action_color": "--urlbar-popup-action-color", + "button": "--button-bgcolor", + "button_hover": "--button-hover-bgcolor", + "button_active": "--button-active-bgcolor", + "button_primary": "--button-primary-bgcolor", + "button_primary_hover": "--button-primary-hover-bgcolor", + "button_primary_active": "--button-primary-active-bgcolor", + "button_primary_color": "--button-primary-color", + "input_background": "--input-bgcolor", + "input_color": "--input-color", + "input_border": "--input-border-color", + "autocomplete_popup_hover": "--autocomplete-popup-hover-background", + "autocomplete_popup_separator": "--autocomplete-popup-separator-color", + "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor", + "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor", + "tab_icon_overlay_stroke": "--tab-icon-overlay-stroke", + "tab_icon_overlay_fill": "--tab-icon-overlay-fill" + }, + "properties": { + "panel_hover": "--panel-item-hover-bgcolor", + "panel_active": "--arrowpanel-dimmed-further", + "panel_active_darker": "--panel-item-active-bgcolor", + "toolbar_field_icon_opacity": "--urlbar-icon-fill-opacity", + "input_border_color": "--input-border-color", + "zap_gradient": "--panel-separator-zap-gradient" + } + } +} diff --git a/browser/themes/addons/light/preview.svg b/browser/themes/addons/light/preview.svg new file mode 100644 index 0000000000..19e9643169 --- /dev/null +++ b/browser/themes/addons/light/preview.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/addons/moz.build b/browser/themes/addons/moz.build new file mode 100644 index 0000000000..d988c0ff9b --- /dev/null +++ b/browser/themes/addons/moz.build @@ -0,0 +1,7 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +JAR_MANIFESTS += ["jar.mn"] diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css new file mode 100644 index 0000000000..31a762b322 --- /dev/null +++ b/browser/themes/linux/browser.css @@ -0,0 +1,447 @@ +/* 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://browser/skin/browser-shared.css"); +@import url("chrome://browser/skin/contextmenu.css"); + +@namespace html url("http://www.w3.org/1999/xhtml"); + +/** + * We intentionally do not include browser-custom-colors.css, + * instead choosing to fall back to system colours and transparencies + * in order to accomodate the wider variety of system themes on that + * platform. + */ + +:root { + --toolbar-non-lwt-bgcolor: color-mix(in srgb, -moz-dialog 85%, white); + --toolbar-non-lwt-textcolor: -moz-dialogtext; + + --panel-separator-color: ThreeDShadow; + + --chrome-content-separator-color: ThreeDShadow; +} + +#TabsToolbar:not(:-moz-lwtheme), +#TabsToolbar[brighttext]:not(:-moz-lwtheme) { + --tab-attention-icon-color: AccentColor; +} + +:root:-moz-lwtheme { + --chrome-content-separator-color: rgba(0,0,0,.3); + + --panel-separator-color: hsla(210,4%,10%,.14); +} + +:root[lwt-popup-brighttext] { + --panel-separator-color: rgba(249,249,250,.1); +} + +#menubar-items { + -moz-box-orient: vertical; /* for flex hack */ +} + +#navigator-toolbox { + appearance: none; + background-color: transparent; + border-top: none; +} + +.browser-toolbar { + padding: 0; +} + +.browser-toolbar:not(.titlebar-color) { + background-color: var(--toolbar-bgcolor); + color: var(--toolbar-color); + appearance: none; + border-style: none; +} + +#nav-bar:not([tabs-hidden="true"]) { + box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--lwt-tabs-border-color, rgba(0,0,0,.3)); + /* This is needed for some toolbar button animations. Gross :( */ + position: relative; +} + +/* Bookmark menus */ +menu.bookmark-item, +menuitem.bookmark-item { + min-width: 0; + max-width: 32em; +} + +.bookmark-item:not(.subviewbutton) > .menu-iconic-left { + margin-block: 0; +} + +/* Bookmark drag and drop styles */ +.bookmark-item[dragover-into="true"] { + background: SelectedItem !important; + color: SelectedItemText !important; +} + +.bookmark-item[cutting] > .toolbarbutton-icon, +.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon { + opacity: 0.5; +} + +.bookmark-item[cutting] > .toolbarbutton-text, +.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text { + opacity: 0.7; +} + +/* Address bar */ +#urlbar, +#searchbar { + font-size: 1.05em; +} + +@supports -moz-bool-pref("browser.urlbar.experimental.expandTextOnFocus") { + #urlbar[breakout-extend] { + font-size: 1.14em; + } +} + +:root { + --toolbar-field-border-color: ThreeDShadow; +} + +/* Address bar results view */ + +:root:not(:-moz-lwtheme) { + --urlbar-popup-action-color: -moz-nativehyperlinktext; + --autocomplete-popup-highlight-background: SelectedItem; + --autocomplete-popup-highlight-color: SelectedItemText; +} + +/* AutoComplete */ + +#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] { + border-top: 1px solid ThreeDShadow; +} + +/* Content area */ + + +#browser { + --sidebar-border-color: ThreeDShadow; +} + +.sidebar-splitter { + appearance: none; + width: 6px; + background-color: -moz-dialog; + border: 1px ThreeDShadow; + border-style: none solid; +} + +/* Tabstrip */ + +#tabbrowser-tabs { + /* override the global style to allow the selected tab to be above the nav-bar */ + z-index: auto; +} + +#TabsToolbar { + min-height: 0; +} + +#TabsToolbar:not(:-moz-lwtheme) { + appearance: auto; + -moz-default-appearance: menubar; + color: -moz-menubartext; +} + +#context_reloadTab { + list-style-image: url("moz-icon://stock/gtk-refresh?size=menu"); +} + +#context_closeOtherTabs { + list-style-image: url("moz-icon://stock/gtk-clear?size=menu"); +} + +#context_closeOtherTabs[disabled] { + list-style-image: url("moz-icon://stock/gtk-clear?size=menu&state=disabled"); +} + +#context_undoCloseTab { + list-style-image: url("moz-icon://stock/gtk-undelete?size=menu"); +} + +#context_closeTab { + list-style-image: url("moz-icon://stock/gtk-close?size=menu"); +} + +/* All tabs menupopup */ + +.alltabs-item[selected="true"] { + font-weight: bold; +} + +/* Status panel */ + +#statuspanel-label { + margin: 0; + padding: 2px 4px; + background-color: -moz-dialog; + border: 1px none ThreeDShadow; + border-top-style: solid; + color: -moz-dialogText; + text-shadow: none; + color-scheme: light; +} + +@media (-moz-content-prefers-color-scheme: dark) { + #statuspanel-label { + color-scheme: dark; + } +} + +#statuspanel:not([mirror]) > #statuspanel-label:-moz-locale-dir(ltr), +#statuspanel[mirror] > #statuspanel-label:-moz-locale-dir(rtl) { + border-right-style: solid; + border-top-right-radius: .3em; + margin-right: 1em; +} + +#statuspanel:not([mirror]) > #statuspanel-label:-moz-locale-dir(rtl), +#statuspanel[mirror] > #statuspanel-label:-moz-locale-dir(ltr) { + border-left-style: solid; + border-top-left-radius: .3em; + margin-left: 1em; +} + + +#UITourHighlight { + /* Below are some fixes for people without an X compositor on Linux. + This is why we can't have nice things: */ + /* Animations don't repaint properly without an X compositor. */ + animation-name: none !important; + /* Opacity rounds to 0 or 1 on Linux without an X compositor, making the + background color not visible. Anti-aliasing is not available either. Make a + thicker outline and cancel border-radius for that case. */ + outline: 4px solid rgb(0,200,215); + border-radius: 0 !important; +} + +#UITourTooltipDescription { + font-size: 1.05rem; +} + +#UITourTooltipClose { + margin-inline-end: -4px; +} + +/** + * Override the --arrowpanel-padding so the background extends + * to the sides and bottom of the panel. + */ +#UITourTooltipButtons { + margin-inline-start: -10px; + margin-bottom: -10px; +} + +#context-navigation > .menuitem-iconic > .menu-iconic-left { + /* override toolkit/themes/linux/global/menu.css */ + padding-inline-end: 0 !important; + margin-inline-end: 0 !important; +} + +/** + * Titlebar drawing: + * + * We draw to titlebar when Gkt+ CSD is available. This is mostly + * straight-forward, but getting the window corners to look perfect is a bit + * tricky, as there are different variables to take into account. + * + * GTK windows have both a window radius (exposed via the + * `-moz-gtk-csd-titlebar-radius`) environment variable, and a window shadow + * (which we can't read back from GTK). Note that the native drawing does draw + * the shadow already. + * + * So there are multiple configurations to consider: + * + * * Whether we're using Wayland vs. X11 + * * Whether we're using a lightweight theme or not. + * + * Consider the simple case (default system theme). We render the titlebar + * using `-moz-default-appearance: -moz-window-titlebar;`, then don't draw + * anything else. Success! + * + * Now consider lightweight themes: We need to render the native titlebar + * behind the "theme" titlebar in order to render the native shadow on X11. But + * we can't just use the #navigator-toolbox as that's where the lightweight + * theme background goes, so we need to use the #navigator-toolbox-background. + * We still have to apply the corner radii to #navigator-toolbox of course, so + * the lightweight theme background doesn't overflow the titlebar radius. + * + * In a Wayland-only world, the setup could be much simpler: We could apply the + * titlebar appearance to #navigator-toolbox, and just apply the border radius + * on the or #navigator-toolbox-background to clip the extra shadow when + * using the system theme. For the lightweight theme, we could use + * appearance: none and the titlebar radius on the toolbox. In X11 however, we + * do need the native titlebar behind at all times. + */ +@media (-moz-gtk-csd-available) { + :root[tabsintitlebar][sizemode="normal"] { + background-color: transparent; + } + + :root[tabsintitlebar] #titlebar { + color: CaptionText; + } + + :root[tabsintitlebar] #titlebar:-moz-window-inactive { + color: InactiveCaptionText; + } + + :root[tabsintitlebar] #titlebar:-moz-lwtheme { + color: inherit; + } + + :root[tabsintitlebar] #navigator-toolbox-background { + appearance: auto; + -moz-default-appearance: -moz-window-titlebar-maximized; + } + + :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) #navigator-toolbox-background { + -moz-default-appearance: -moz-window-titlebar; + } + + :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) #navigator-toolbox:-moz-lwtheme, + :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) dialog::backdrop { + border-top-left-radius: env(-moz-gtk-csd-titlebar-radius); + border-top-right-radius: env(-moz-gtk-csd-titlebar-radius); + } + + /* When temporarily showing the menu bar, make it at least as tall as the tab + * bar such that the window controls don't appear to move up. */ + :root[tabsintitlebar] #toolbar-menubar[autohide="true"] { + height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin)); + } + + /* Make #TabsToolbar transparent as we style underlying #titlebar with + * -moz-window-titlebar (Gtk+ theme). */ + :root[tabsintitlebar] #TabsToolbar, + :root[tabsintitlebar] #toolbar-menubar { + appearance: none; + color: inherit; + } + + :root[tabsintitlebar] #main-menubar { + color: inherit; + } + + /* The button box must appear on top of the navigator-toolbox in order for + * click and hover mouse events to work properly for the button in the restored + * window state. Otherwise, elements in the navigator-toolbox, like the menubar, + * can swallow those events. */ + .titlebar-buttonbox { + z-index: 1; + -moz-box-align: center; + } + + /* Render titlebar command buttons according to system config. + * Use full scale icons here as the Gtk+ does. */ + .titlebar-min { + appearance: auto; + -moz-default-appearance: -moz-window-button-minimize; + -moz-box-ordinal-group: env(-moz-gtk-csd-minimize-button-position); + } + .titlebar-max { + appearance: auto; + -moz-default-appearance: -moz-window-button-maximize; + -moz-box-ordinal-group: env(-moz-gtk-csd-maximize-button-position); + } + .titlebar-restore { + appearance: auto; + -moz-default-appearance: -moz-window-button-restore; + -moz-box-ordinal-group: env(-moz-gtk-csd-maximize-button-position); + } + .titlebar-close { + appearance: auto; + -moz-default-appearance: -moz-window-button-close; + -moz-box-ordinal-group: env(-moz-gtk-csd-close-button-position); + } + + /* When using lightweight themes, use our own buttons since native ones might + * assume a native background in order to be visible. */ + .titlebar-button:-moz-lwtheme { + appearance: none; + border-radius: 100%; + } + .titlebar-button > .toolbarbutton-icon:-moz-lwtheme { + padding: 6px; + -moz-context-properties: stroke; + stroke: currentColor; + } + .titlebar-min:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/window-controls/minimize.svg); + } + .titlebar-max:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/window-controls/maximize.svg); + } + .titlebar-restore:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/window-controls/restore.svg); + } + .titlebar-close:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/window-controls/close.svg); + } + .titlebar-button:-moz-lwtheme:hover { + background-color: color-mix(in srgb, currentColor 12%, transparent); + } + .titlebar-button:-moz-lwtheme:hover:active { + background-color: color-mix(in srgb, currentColor 20%, transparent); + } + .titlebar-close:-moz-lwtheme:hover { + background-color: #d70022; + color: white; + } + .titlebar-close:-moz-lwtheme:hover:active { + background-color: #ff0039; + } + + @media not (-moz-gtk-csd-minimize-button) { + .titlebar-min { + display: none; + } + } + @media not (-moz-gtk-csd-maximize-button) { + .titlebar-restore, + .titlebar-max { + display: none; + } + } + @media not (-moz-gtk-csd-close-button) { + .titlebar-close { + display: none; + } + } + + @media (-moz-gtk-csd-reversed-placement) { + .titlebar-buttonbox-container { + -moz-box-ordinal-group: 0; + } + } +} + +#historySwipeAnimationPreviousArrow { + background: url("chrome://browser/skin/history-swipe-arrow.svg") + center left / 192px 192px no-repeat transparent; + will-change: transform; + -moz-context-properties: fill; +} +#historySwipeAnimationPreviousArrow:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} +#historySwipeAnimationNextArrow { + background: url("chrome://browser/skin/history-swipe-arrow.svg") + center left / 192px 192px no-repeat transparent; + will-change: transform; + -moz-context-properties: fill; +} +#historySwipeAnimationNextArrow:-moz-locale-dir(ltr) { + transform: scaleX(-1); +} diff --git a/browser/themes/linux/customizableui/panelUI.css b/browser/themes/linux/customizableui/panelUI.css new file mode 100644 index 0000000000..63969676ec --- /dev/null +++ b/browser/themes/linux/customizableui/panelUI.css @@ -0,0 +1,14 @@ +/* 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 "chrome://browser/skin/customizableui/panelUI-shared.css"; + +menupopup::part(drop-indicator) { + /* To account for the shadow margin + border of the panel */ + margin-inline-start: 5px; +} + +.subviewradio > .radio-label-box { + appearance: none; +} diff --git a/browser/themes/linux/downloads/allDownloadsView.css b/browser/themes/linux/downloads/allDownloadsView.css new file mode 100644 index 0000000000..cae3f34a22 --- /dev/null +++ b/browser/themes/linux/downloads/allDownloadsView.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 "chrome://browser/skin/downloads/allDownloadsView.inc.css"; diff --git a/browser/themes/linux/downloads/downloads.css b/browser/themes/linux/downloads/downloads.css new file mode 100644 index 0000000000..5c00c1a7fa --- /dev/null +++ b/browser/themes/linux/downloads/downloads.css @@ -0,0 +1,14 @@ +/* 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 "chrome://browser/skin/downloads/downloads.inc.css"; + +/*** List items and similar elements in the summary ***/ + +:root { + --downloads-item-height: 5.5em; + --downloads-item-font-size-factor: 0.9; + --downloads-item-details-opacity: 0.6; + --downloads-item-disabled-opacity: 0.6; +} diff --git a/browser/themes/linux/jar.mn b/browser/themes/linux/jar.mn new file mode 100644 index 0000000000..b81188c22b --- /dev/null +++ b/browser/themes/linux/jar.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/. + +browser.jar: +% skin browser classic/1.0 %skin/classic/browser/ +#include ../shared/jar.inc.mn + skin/classic/browser/sanitizeDialog.css + skin/classic/browser/browser.css + skin/classic/browser/contextmenu.css (../shared/contextmenu.css) + skin/classic/browser/monitor-base.png + skin/classic/browser/monitor-border.png + skin/classic/browser/pageInfo.css + skin/classic/browser/pageInfo.png + skin/classic/browser/webRTC-legacy-indicator.css (../shared/webRTC-legacy-indicator.css) + skin/classic/browser/customizableui/panelUI.css (customizableui/panelUI.css) + skin/classic/browser/downloads/allDownloadsView.css (downloads/allDownloadsView.css) + skin/classic/browser/downloads/downloads.css (downloads/downloads.css) + skin/classic/browser/places/organizer.css (places/organizer.css) + skin/classic/browser/preferences/alwaysAsk.png (preferences/alwaysAsk.png) + skin/classic/browser/preferences/applications.css (preferences/applications.css) + skin/classic/browser/window-controls/close.svg (../windows/window-controls/close.svg) + skin/classic/browser/window-controls/maximize.svg (../windows/window-controls/maximize.svg) + skin/classic/browser/window-controls/minimize.svg (../windows/window-controls/minimize.svg) + skin/classic/browser/window-controls/restore.svg (../windows/window-controls/restore.svg) + skin/classic/browser/e10s-64@2x.png (../shared/e10s-64@2x.png) + skin/classic/browser/history-swipe-arrow.svg (../shared/swipe-gesture-icons/history-swipe-arrow.svg) diff --git a/browser/themes/linux/monitor-base.png b/browser/themes/linux/monitor-base.png new file mode 100644 index 0000000000..45a2410217 Binary files /dev/null and b/browser/themes/linux/monitor-base.png differ diff --git a/browser/themes/linux/monitor-border.png b/browser/themes/linux/monitor-border.png new file mode 100644 index 0000000000..f05dcb7839 Binary files /dev/null and b/browser/themes/linux/monitor-border.png differ diff --git a/browser/themes/linux/moz.build b/browser/themes/linux/moz.build new file mode 100644 index 0000000000..20e4e3af75 --- /dev/null +++ b/browser/themes/linux/moz.build @@ -0,0 +1,9 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +JAR_MANIFESTS += ["jar.mn"] + +DEFINES["MENUBAR_CAN_AUTOHIDE"] = 1 diff --git a/browser/themes/linux/pageInfo.css b/browser/themes/linux/pageInfo.css new file mode 100644 index 0000000000..c87a18c02d --- /dev/null +++ b/browser/themes/linux/pageInfo.css @@ -0,0 +1,151 @@ +/* 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 html url("http://www.w3.org/1999/xhtml"); + +/* View buttons */ +#viewGroup > radio { + list-style-image: url("chrome://browser/skin/pageInfo.png"); + appearance: none; + min-width: 4.5em; + margin: 0; + padding: 3px; + color: FieldText; +} + +#viewGroup > radio[selected="true"] { + background-color: SelectedItem; + color: SelectedItemText; +} + +#viewGroup > radio > .radio-label-box { + padding: 0 6px; +} + +#viewGroup:focus-visible > radio[focused="true"] > .radio-label-box { + outline: var(--default-focusring); +} + +#topBar { + border-bottom: 1px solid ThreeDShadow; + padding-inline-start: 10px; + background-color: Field; + color: FieldText; +} + +#generalTab { + -moz-image-region: rect(0px, 32px, 32px, 0px) +} + +#mediaTab { + -moz-image-region: rect(0px, 64px, 32px, 32px) +} + +#permTab { + -moz-image-region: rect(0px, 128px, 32px, 96px) +} + +#securityTab { + -moz-image-region: rect(0px, 160px, 32px, 128px) +} + +/* Misc */ +tree { + margin: .5em; +} + +html|input { + background: transparent; + border: none; + padding: 0; +} + +html|input.header { + margin-inline-start: 0; +} + +#imagecontainerbox { + margin: .5em; + background: white; + overflow: auto; + border: 1px solid ThreeDLightShadow; +} + +html|input:disabled { + font-style: italic; +} + +/* General Tab */ +#generalPanel > #titletext { + margin-inline-start: 5px; +} + +#securityBox description { + margin-inline-start: 10px; +} + +#general-security-identity { + white-space: pre-wrap; + line-height: 2em; +} + +/* Media Tab */ +#imagetree { + min-height: 10em; + margin-block: 2px 0; +} + +#mediaSplitter { + appearance: none; + height: .8em; +} + +#mediaTable { + margin-bottom: 2em; +} + +#mediaLabelColumn { + min-width: 10em; +} + +#thepreviewimage { + margin: 1em; +} + +treechildren::-moz-tree-cell-text(broken) { + font-style: italic; + color: graytext; +} + +/* Permissions Tab */ + +#permList { + appearance: auto; + -moz-default-appearance: listbox; + margin: .5em; + overflow: auto; + color: FieldText; +} + +.permission { + padding: 6px 7px; + min-height: 25px; + border-bottom: 1px dotted ThreeDShadow; +} + +.permissionLabel { + font-weight: bold; +} + +.permission:hover { + background-color: -moz-dialog; + color: -moz-DialogText; +} + +/* Security Tab */ + +#securityPanel table { + margin-bottom: 1em; +} diff --git a/browser/themes/linux/pageInfo.png b/browser/themes/linux/pageInfo.png new file mode 100644 index 0000000000..cdd511cf1f Binary files /dev/null and b/browser/themes/linux/pageInfo.png differ diff --git a/browser/themes/linux/places/organizer.css b/browser/themes/linux/places/organizer.css new file mode 100644 index 0000000000..3866e70dfa --- /dev/null +++ b/browser/themes/linux/places/organizer.css @@ -0,0 +1,152 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* Toolbar */ + +#placesToolbar { + appearance: auto; + -moz-default-appearance: menubar; + color: -moz-menubartext; +} + +@media (-moz-menubar-drag) { + #placesToolbar { + -moz-window-dragging: drag; + } +} + +#placesToolbar > toolbarbutton { + color: -moz-menubartext; +} + +#placesToolbar > toolbarbutton:hover { + color: ButtonText; +} + +#placesToolbar > toolbarbutton[disabled] { + color: GrayText; +} + +/* Back button */ + +#back-button { + list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=toolbar"); +} +#back-button[disabled] { + list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=toolbar&state=disabled"); +} + +#back-button:-moz-locale-dir(rtl) { + list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=toolbar"); +} +#back-button[disabled]:-moz-locale-dir(rtl) { + list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=toolbar&state=disabled"); +} + +/* Forward button */ + +#forward-button { + list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=toolbar"); +} +#forward-button[disabled] { + list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=toolbar&state=disabled"); +} + +#forward-button:-moz-locale-dir(rtl) { + list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=toolbar"); +} +#forward-button[disabled]:-moz-locale-dir(rtl) { + list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=toolbar&state=disabled"); +} + +/* Menus */ +#placesMenu > menu { + padding-inline-start: 4px; + appearance: auto; + -moz-default-appearance: toolbarbutton; +} + +#placesMenu > menu:hover { + color: ButtonText; +} + +#placesMenu > menu:active, +#placesMenu > menu[open] { + color: -moz-buttonactivetext; +} + +#placesMenu > menu::after { + content: ""; + display: -moz-box; + width: 12px; + height: 12px; + content: url("chrome://global/skin/icons/arrow-down-12.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +/* Root View */ +#placesView { + background-color: Window; +} + +/* Info box */ +#infoBox:not([hidden="true"]) { + display: block; +} + +#editBookmarkPanelContent { + grid-template-columns: auto 1fr; +} + +#editBookmarkPanelContent .caption-label:not([hidden="true"]) { + display: block; + grid-column: 2; +} + +#editBookmarkPanelContent input { + margin: 4px; +} + +#editBookmarkPanelContent label { + align-self: center; +} + +#editBMPanel_itemsCountText { + grid-column: auto / span 2; + justify-self: center; +} + +#editBMPanel_tagsSelectorRow { + grid-column: auto / span 2; +} + +#detailsPane { + height: 16em; + padding: 5px; +} + +/* Expanders */ + +.expander-up, +.expander-down { + min-width: 0; + padding: 2px 0; + padding-inline-start: 2px; +} + +.expander-up > .button-box { + appearance: auto; + -moz-default-appearance: button-arrow-up; +} + +.expander-down > .button-box { + appearance: auto; + -moz-default-appearance: button-arrow-down; +} + +/* Downloads pane */ +#clearDownloadsButton > .toolbarbutton-icon { + display: none; +} diff --git a/browser/themes/linux/preferences/alwaysAsk.png b/browser/themes/linux/preferences/alwaysAsk.png new file mode 100644 index 0000000000..c6720e19e7 Binary files /dev/null and b/browser/themes/linux/preferences/alwaysAsk.png differ diff --git a/browser/themes/linux/preferences/applications.css b/browser/themes/linux/preferences/applications.css new file mode 100644 index 0000000000..2627b06d00 --- /dev/null +++ b/browser/themes/linux/preferences/applications.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/. */ + +richlistitem[appHandlerIcon="handleInternally"], +menuitem[appHandlerIcon="handleInternally"] { + list-style-image: url("chrome://branding/content/icon32.png"); +} + +richlistitem[appHandlerIcon="ask"], +menuitem[appHandlerIcon="ask"] { + list-style-image: url("chrome://browser/skin/preferences/alwaysAsk.png"); +} + +richlistitem[appHandlerIcon="save"], +menuitem[appHandlerIcon="save"] { + list-style-image: url("moz-icon://stock/gtk-save?size=menu"); +} + +richlistitem[appHandlerIcon="plugin"], +menuitem[appHandlerIcon="plugin"] { + list-style-image: url("chrome://global/skin/icons/plugin.svg"); +} + +#appList { + min-height: 212px; +} + +#appList > richlistitem { + -moz-box-align: center; +} + +#appList > richlistitem > image { + margin: 5px; + width: 32px; + height: 32px; +} + +#appList > richlistitem > label { + margin: 0px; + padding: 5px; + white-space: nowrap; +} diff --git a/browser/themes/linux/sanitizeDialog.css b/browser/themes/linux/sanitizeDialog.css new file mode 100644 index 0000000000..4883786a9f --- /dev/null +++ b/browser/themes/linux/sanitizeDialog.css @@ -0,0 +1,16 @@ +/* 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/. */ + +#sanitizeDurationChoice { + margin-inline-end: 0; +} + +/* Align the duration label with the warning box and item list */ +#sanitizeDurationLabel { + margin-inline-start: 3px; +} + +#sanitizeEverythingWarningIcon { + list-style-image: url("moz-icon://stock/gtk-dialog-warning?size=dialog"); +} diff --git a/browser/themes/linux/window-controls/close.svg b/browser/themes/linux/window-controls/close.svg new file mode 100644 index 0000000000..9d0a252357 --- /dev/null +++ b/browser/themes/linux/window-controls/close.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/linux/window-controls/minimize.svg b/browser/themes/linux/window-controls/minimize.svg new file mode 100644 index 0000000000..7ffa1fecbb --- /dev/null +++ b/browser/themes/linux/window-controls/minimize.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/linux/window-controls/restore.svg b/browser/themes/linux/window-controls/restore.svg new file mode 100644 index 0000000000..80b71b178d --- /dev/null +++ b/browser/themes/linux/window-controls/restore.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/moz.build b/browser/themes/moz.build new file mode 100644 index 0000000000..6a9126de41 --- /dev/null +++ b/browser/themes/moz.build @@ -0,0 +1,50 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +with Files("**"): + BUG_COMPONENT = ("Firefox", "Theme") + +with Files("ThemeVariableMap.sys.mjs"): + BUG_COMPONENT = ("WebExtensions", "Themes") + +EXTRA_JS_MODULES += [ + "BuiltInThemeConfig.sys.mjs", + "BuiltInThemes.sys.mjs", + "ThemeVariableMap.sys.mjs", +] + +BROWSER_CHROME_MANIFESTS += [ + "test/browser/browser.ini", +] + +XPCSHELL_TESTS_MANIFESTS += [ + "test/xpcshell/xpcshell.ini", +] + +toolkit = CONFIG["MOZ_WIDGET_TOOLKIT"] + +if toolkit == "windows": + EXTRA_JS_MODULES += [ + "Windows8WindowFrameColor.sys.mjs", + ] + +if toolkit == "cocoa": + DIRS += ["osx"] +elif toolkit == "gtk": + DIRS += ["linux"] +else: + DIRS += ["windows"] + +DIRS += ["addons", "shared/app-marketplace-icons"] + +with Files("osx/**"): + SCHEDULES.exclusive = ["macosx"] + +with Files("linux/**"): + SCHEDULES.exclusive = ["linux"] + +with Files("windows/**"): + SCHEDULES.exclusive = ["windows"] diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css new file mode 100644 index 0000000000..e16c87ff37 --- /dev/null +++ b/browser/themes/osx/browser.css @@ -0,0 +1,458 @@ +/* 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://browser/skin/browser-shared.css"); +@import url("chrome://browser/skin/browser-custom-colors.css"); + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + --toolbar-non-lwt-bgcolor: -moz-dialog; + --toolbar-non-lwt-textcolor: -moz-dialogtext; + + --panel-separator-color: hsla(210,4%,10%,.14); + + --arrowpanel-field-background: rgba(249,249,250,.3); + + --chrome-content-separator-color: #e1e1e2; +} + +:root:-moz-lwtheme { + --chrome-content-separator-color: rgba(0,0,0,.3); +} + +:root[lwt-popup-brighttext] { + --panel-separator-color: rgba(249,249,250,.1); + --arrowpanel-field-background: rgba(12,12,13,.3); +} + +#browser { + /* #browser and #navigator-toolbox must have relative positions so that the + latter can slide over the former in fullscreen mode. */ + position: relative; +} + +#navigator-toolbox { + appearance: none; + position: relative; +} + +#navigator-toolbox:not(:-moz-lwtheme) { + background-color: window; +} + +@media not (prefers-contrast) { + #navigator-toolbox:not(:-moz-lwtheme) { + background-color: #f0f0f4; + } +} + +/* + This is a workaround for Bug 1482157 + -moz-default-appearance: toolbox; makes the macOS sheets attached to the + element's bottom border. We cannot put this property on the toolbox itself as + it cancels all backgrounds that are there, so we set it on the toolbox bottom + border. +*/ +#navigator-toolbox::after { + content: ""; + display: -moz-box; + appearance: auto; + -moz-default-appearance: toolbox; + height: 1px; + margin-top: -1px; + opacity: 0.001; +} + +/** Begin titlebar **/ + +#titlebar { + /* Centrally align content items vertically */ + -moz-box-pack: center; +} + +.titlebar-button { + display: none; +} + +.titlebar-buttonbox-container { + -moz-box-align: center; +} + +/* Hide window controls in fullscreen */ +:root[inFullscreen] .titlebar-buttonbox-container { + display: none; +} + +.titlebar-buttonbox:-moz-locale-dir(ltr) { + margin-left: 12px; + margin-right: 0; +} + +.titlebar-buttonbox:-moz-locale-dir(rtl) { + margin-left: 12px; + margin-right: 12px; +} + +@media (-moz-mac-rtl) { + .titlebar-buttonbox:-moz-locale-dir(ltr) { + margin-left: 12px; + margin-right: 12px; + } + + .titlebar-buttonbox:-moz-locale-dir(rtl) { + margin-left: 0; + margin-right: 12px; + } +} + +/** End titlebar **/ + +:root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] { + border-top: 1px solid rgba(0,0,0,0.65); +} + +.browser-toolbar { + appearance: none; +} + +.browser-toolbar:not(.titlebar-color) { + background: var(--toolbar-bgcolor); + color: var(--toolbar-color); +} + +/* Draw the bottom border of the tabs toolbar when titlebar isn't using vibrancy */ +:root:not([inFullscreen], [tabsintitlebar]) #nav-bar:not([tabs-hidden="true"]), +#nav-bar:not([tabs-hidden="true"]):-moz-lwtheme { + box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--lwt-tabs-border-color, rgba(0,0,0,.3)); +} + +#nav-bar:not([tabs-hidden="true"]) { + /* The toolbar buttons that animate are only visible when the #TabsToolbar is not collapsed. + The animations use position:absolute and require a positioned #nav-bar. */ + position: relative; +} + +/* ----- BOOKMARK TOOLBAR ----- */ + +#nav-bar-customization-target > #wrapper-personal-bookmarks > #personal-bookmarks { + min-height: 32px; + -moz-box-align: center; +} + +/* Workaround for native menubar inheritance */ +.openintabs-menuitem { + list-style-image: none; +} + +.bookmark-item[cutting] > .toolbarbutton-icon, +.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon { + opacity: 0.5; +} + +.bookmark-item[cutting] > .toolbarbutton-text, +.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text { + opacity: 0.7; +} + +/* ----- BOOKMARK MENUS ----- */ + +.bookmark-item > .menu-iconic-left > .menu-iconic-icon { + width: 16px; + height: 16px; +} + +#bookmarksToolbarFolderMenu, +#BMB_bookmarksToolbar, +#panelMenu_bookmarksToolbar { + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg"); +} + +/* Inactive elements are faded out on OSX */ +.toolbarbutton-1:not(:hover):-moz-window-inactive, +.bookmark-item:not(:hover):-moz-window-inactive, +:root:not([customizing]) .toolbarbutton-1:-moz-window-inactive[disabled="true"] { + opacity: 0.5; +} + +/* Address bar */ + +@media not (prefers-contrast) { + :root:not(:-moz-lwtheme) #urlbar { + --urlbar-box-bgcolor: white; + } + :root[lwt-default-theme-in-dark-mode] #urlbar { + --urlbar-box-bgcolor: var(--toolbar-field-focus-background-color); + } +} + +@media (prefers-contrast) { + /* The "increase contrast" preference on macOS draws a 1px black line around + panels, including the separate search bar. Since the Urlbar is not + implemented as a panel, it does not get this outline. This outline rule + resembles the system outline, bringing the Urlbar in line with panels and + other Mac apps. */ + #urlbar[open] > #urlbar-background { + outline: 1px solid var(--focus-outline-color) + } +} + +#urlbar, +#searchbar { + font-size: 1.25em; +} + +@supports -moz-bool-pref("browser.urlbar.experimental.expandTextOnFocus") { + #urlbar[breakout-extend] { + font-size: 1.36em; + } +} + +/* Move the margin to the parent element to properly position the ::after badge */ +moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left > .menu-iconic-icon { + margin-inline: 0; +} +moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left { + margin-inline: 0 5px; +} + +/* ----- AUTOCOMPLETE ----- */ + +#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] { + border-top: 1px solid #C7C7C7; +} + +/* Bookmarking panel */ + +/* The following elements come from editBookmarkPanel.inc.xhtml. Styling that's + specific to the editBookmarkPanel should be in browser.css. Styling that + should be shared by all editBookmarkPanel.inc.xhtml consumers should be in + editBookmark.css. */ + +#editBMPanel_newFolderBox { + background-color: var(--arrowpanel-field-background); + color: inherit; + border: 1px solid var(--panel-separator-color); + border-radius: 0 0 2px 2px; + margin: 0; + padding: 0; + height: 24px; +} + +#editBMPanel_newFolderButton { + appearance: none; + -moz-box-flex: 1; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.8; + border: none; + border-radius: 0; + padding: 0 9px; + margin: 0; + min-height: 24px; + height: 24px; + color: inherit; + list-style-image: url("chrome://global/skin/icons/plus.svg"); +} + +#editBMPanel_newFolderButton:hover { + background-color: var(--arrowpanel-dimmed); +} + +#editBMPanel_newFolderButton:hover:active { + background-color: var(--arrowpanel-dimmed-further); +} + +#editBMPanel_newFolderButton .button-text { + -moz-box-flex: 1; /* push the button icon to the start side */ + text-align: start; +} + +/**** folder tree and tag selector ****/ + +#editBMPanel_folderTree, +#editBMPanel_tagsSelector { + appearance: none; + background-color: var(--arrowpanel-field-background); + color: inherit; + border-radius: 2px; + border: 1px solid var(--panel-separator-color); + margin: 0; +} + +#editBMPanel_folderTree > treechildren::-moz-tree-row(blur,selected), +#editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] { + background-color: var(--arrowpanel-dimmed); +} + +#editBMPanel_folderTree > treechildren::-moz-tree-twisty(blur,selected), +#editBMPanel_folderTree > treechildren::-moz-tree-image(blur,selected), +#editBMPanel_folderTree > treechildren::-moz-tree-cell-text(blur,selected), +#editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] { + color: inherit; +} + +#editBMPanel_folderTree { + border-bottom: none; + border-end-start-radius: 0; + border-end-end-radius: 0; + /* Implements editBookmarkPanel resizing on folderTree un-collapse. */ + margin: 0 !important; + min-width: 27em; + position: relative; +} + +/* ----- SIDEBAR ELEMENTS ----- */ + +#browser { + --sidebar-border-color: hsla(240, 5%, 5%, .1); +} + +#sidebar-box { + /* Default font size is 11px on mac, so this is 12px */ + font-size: 1.0909rem; + --sidebar-background-color: -moz-mac-source-list; +} + +/* Give the sidebar a vibrant appearance. Only do this when no lwtheme sidebar + * rules are in use. Vibrant appearance values only work if there is no + * background-color rendered behind the element. If the active theme has sidebar + * rules, we want to show the theme's background-color in the sidebar. */ +#sidebar-box:not([lwt-sidebar]) { + appearance: auto; + -moz-default-appearance: -moz-mac-source-list; + -moz-font-smoothing-background-color: -moz-mac-source-list; +} + +/* ----- CONTENT ----- */ + +.openintabs-menuitem { + list-style-image: none; +} + +/* ::::: tabbrowser ::::: */ + +#tabbrowser-tabbox { + margin: 0; +} + +.tab-label { + margin-block: 1px 0; +} + +.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected="true"], [multiselected]) { + opacity: .9; +} + +/* + * Force the overlay to create a new stacking context so it always appears on + * top of the icon. + */ +.tab-icon-overlay { + opacity: 0.9999; +} + +.tab-label-container:not([selected="true"], [multiselected]) { + opacity: .7; +} + +.tabbrowser-tab { + font: message-box; + border: none; +} +.tabbrowser-tab[multiselected]:not(:-moz-lwtheme), +.tabbrowser-tab[visuallyselected=true]:not(:-moz-lwtheme) { + /* overriding tabbox.css */ + color: hsl(240, 5%, 5%); +} + +.tabbrowser-tab[multiselected], +.tabbrowser-tab[visuallyselected=true] { + /* overriding tabbox.css */ + text-shadow: inherit; +} + +#tabbrowser-tabs { + /* overriding tabbox.css */ + -moz-box-align: stretch; + margin-bottom: 0; + position: static; + z-index: auto; +} + +/* Bookmark drag and drop styles */ + +.bookmark-item[dragover-into="true"] { + background: SelectedItem !important; + color: SelectedItemText !important; +} + +/* Status panel */ + +#statuspanel-label { + margin: 0; + padding: 2px 4px; + background-color: #f9f9fa; + border: 1px none #ddd; + border-top-style: solid; + color: #444; + text-shadow: none; +} + +@media (-moz-content-prefers-color-scheme: dark) { + #statuspanel-label { + background-color: hsl(240, 1%, 20%); + border-color: hsl(240, 1%, 40%); + color: rgb(249, 249, 250); + } +} + +#statuspanel:not([mirror]) > #statuspanel-label:-moz-locale-dir(ltr), +#statuspanel[mirror] > #statuspanel-label:-moz-locale-dir(rtl) { + border-right-style: solid; + border-top-right-radius: .3em; + margin-right: 1em; +} + +#statuspanel:not([mirror]) > #statuspanel-label:-moz-locale-dir(rtl), +#statuspanel[mirror] > #statuspanel-label:-moz-locale-dir(ltr) { + border-left-style: solid; + border-top-left-radius: .3em; + margin-left: 1em; +} + +/* On mac, the popup notification contents are indented by default and so + the default closebutton margins from notification.css require adjustment */ + +.click-to-play-plugins-notification-description-box > .popup-notification-closebutton { + margin-inline-end: -6px; + margin-top: -7px; +} + +#UITourTooltipDescription { + font-size: 1.18rem; + line-height: 2rem; +} + +#UITourTooltipClose { + margin-inline-end: -10px; + margin-top: -14px; +} + +#historySwipeAnimationPreviousArrow { + background: url("chrome://browser/skin/history-swipe-arrow.svg") + center left / 64px 128px no-repeat transparent; + will-change: transform; +} +#historySwipeAnimationPreviousArrow:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} +#historySwipeAnimationNextArrow { + background: url("chrome://browser/skin/history-swipe-arrow.svg") + center left / 64px 128px no-repeat transparent; + will-change: transform; +} +#historySwipeAnimationNextArrow:-moz-locale-dir(ltr) { + transform: scaleX(-1); +} diff --git a/browser/themes/osx/customizableui/panelUI.css b/browser/themes/osx/customizableui/panelUI.css new file mode 100644 index 0000000000..9579a3797d --- /dev/null +++ b/browser/themes/osx/customizableui/panelUI.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/. */ + +@import "chrome://browser/skin/customizableui/panelUI-shared.css"; + +#downloadsPanel, +#widget-overflow, +#appMenu-popup, +#customizationui-widget-panel, +#identity-popup, +#permission-popup, +#protections-popup, +#appMenu-notification-popup, +#BMB_bookmarksPopup, +#editBookmarkPanel { + margin-top: -1px; +} + +.panel-subview-body { + scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent; +} + +#appMenu-mainView > .panel-subview-body > .panel-banner-item { + padding-inline-start: 18px; +} + +.subviewbutton:not([image],[targetURI],.bookmark-item) > .menu-iconic-left { + display: none; +} + +.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] { + padding-inline-start: 6px; +} + +.PanelUI-remotetabs-notabsforclient-label { + margin-inline-start: 19px; + font-size: 13px; +} + +#PanelUI-remotetabs[mainview] .PanelUI-remotetabs-notabsforclient-label { + margin-inline-start: 23px; +} + +#PanelUI-remotetabs-tabslist { + padding-bottom: 4px; +} + +.panel-button { + appearance: none; + border-radius: 2px; + background-color: var(--arrowpanel-dimmed); + color: inherit; + padding: 2px 6px; +} + +.panel-button:not([disabled]):hover { + background-color: var(--panel-item-hover-bgcolor); +} + +.panel-button:not([disabled]):hover:active { + background-color: var(--panel-item-active-bgcolor); +} + +.panel-button:focus-visible { + outline: var(--focus-outline); +} diff --git a/browser/themes/osx/downloads/allDownloadsView.css b/browser/themes/osx/downloads/allDownloadsView.css new file mode 100644 index 0000000000..3740280d80 --- /dev/null +++ b/browser/themes/osx/downloads/allDownloadsView.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/. */ + +@import "chrome://browser/skin/downloads/allDownloadsView.inc.css"; + +/*** List items ***/ + +.downloadProgress::-moz-progress-bar { + background-color: #3c9af8; +} + +.downloadProgress[paused]::-moz-progress-bar { + background-color: #a6a6a6; +} diff --git a/browser/themes/osx/downloads/downloads.css b/browser/themes/osx/downloads/downloads.css new file mode 100644 index 0000000000..62112bd7d7 --- /dev/null +++ b/browser/themes/osx/downloads/downloads.css @@ -0,0 +1,12 @@ +/* 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 "chrome://browser/skin/downloads/downloads.inc.css"; + +:root { + --downloads-item-height: 6em; + --downloads-item-font-size-factor: 0.80; + --downloads-item-details-opacity: 0.7; + --downloads-item-disabled-opacity: 0.7; +} diff --git a/browser/themes/osx/jar.mn b/browser/themes/osx/jar.mn new file mode 100644 index 0000000000..dc3089dfa0 --- /dev/null +++ b/browser/themes/osx/jar.mn @@ -0,0 +1,25 @@ +# 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/. + +browser.jar: +% skin browser classic/1.0 %skin/classic/browser/ +#include ../shared/jar.inc.mn + skin/classic/browser/sanitizeDialog.css + skin/classic/browser/browser.css + skin/classic/browser/browser-custom-colors.css (../shared/browser-custom-colors.css) + skin/classic/browser/pageInfo.css + skin/classic/browser/customizableui/panelUI.css (customizableui/panelUI.css) + skin/classic/browser/downloads/allDownloadsView.css (downloads/allDownloadsView.css) + skin/classic/browser/downloads/downloads.css (downloads/downloads.css) + skin/classic/browser/monitor-base.png + skin/classic/browser/monitor-border.png + skin/classic/browser/places/organizer.css (places/organizer.css) + skin/classic/browser/preferences/alwaysAsk.png (preferences/alwaysAsk.png) + skin/classic/browser/preferences/application.png (preferences/application.png) + skin/classic/browser/preferences/saveFile.png (preferences/saveFile.png) + skin/classic/browser/preferences/applications.css (preferences/applications.css) + skin/classic/browser/share.svg (share.svg) + skin/classic/browser/e10s-64@2x.png (../shared/e10s-64@2x.png) + skin/classic/browser/webRTC-menubar-indicator.css (../shared/webRTC-menubar-indicator.css) + skin/classic/browser/history-swipe-arrow.svg (swipe-gesture-icons/history-swipe-arrow.svg) diff --git a/browser/themes/osx/monitor-base.png b/browser/themes/osx/monitor-base.png new file mode 100644 index 0000000000..7b61c6b45b Binary files /dev/null and b/browser/themes/osx/monitor-base.png differ diff --git a/browser/themes/osx/monitor-border.png b/browser/themes/osx/monitor-border.png new file mode 100644 index 0000000000..54337d8bb0 Binary files /dev/null and b/browser/themes/osx/monitor-border.png differ diff --git a/browser/themes/osx/moz.build b/browser/themes/osx/moz.build new file mode 100644 index 0000000000..d988c0ff9b --- /dev/null +++ b/browser/themes/osx/moz.build @@ -0,0 +1,7 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +JAR_MANIFESTS += ["jar.mn"] diff --git a/browser/themes/osx/pageInfo.css b/browser/themes/osx/pageInfo.css new file mode 100644 index 0000000000..3a8c8fc9be --- /dev/null +++ b/browser/themes/osx/pageInfo.css @@ -0,0 +1,137 @@ +/* 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 "chrome://global/skin/global.css"; +@namespace html url("http://www.w3.org/1999/xhtml"); + +#topBar { + appearance: auto; + -moz-default-appearance: toolbar; + -moz-window-dragging: drag; + -moz-box-align: center; + -moz-box-pack: center; +} + +#viewGroup { + margin: 4px 0 9px; +} + +#viewGroup > radio, +#viewGroup > toolbarbutton { + -moz-box-orient: vertical; + -moz-box-align: center; + appearance: auto; + -moz-default-appearance: toolbarbutton; + font: menu; + margin: 0; + padding: 0 6px; + height: 22px; +} + +@media (-moz-mac-big-sur-theme: 0) { + #viewGroup > radio[selected=true], + #viewGroup > toolbarbutton[checked=true] { + color: #FFF !important; + text-shadow: rgba(0, 0, 0, 0.4) 0 1px; + } +} + +/* Misc */ +tree { + margin: .5em; +} + +html|input { + background: transparent; + border: none; + padding: 0; +} + +html|input.header { + margin-inline-start: 0; +} + +#imagecontainerbox { + margin: .5em; + background: white; + overflow: auto; + border: 1px solid ThreeDLightShadow; +} + +html|input:disabled { + font-style: italic; +} + +.help-button { + appearance: auto; + -moz-default-appearance: -moz-mac-help-button; +} + +/* General Tab */ + +#securityBox description { + margin-inline-start: 10px; +} + +#general-security-identity { + white-space: pre-wrap; + line-height: 2em; +} + +/* Media Tab */ +#imagetree { + min-height: 10em; + margin-bottom: 0; +} + +#mediaSplitter { + background: none; +} + +#mediaTable { + margin-bottom: 2em; +} + +#mediaLabelColumn { + min-width: 10em; +} + +#thepreviewimage { + margin: 1em; +} + +treechildren::-moz-tree-cell-text(broken) { + font-style: italic; + color: graytext; +} + +/* Permissions Tab */ +#permList { + margin: .5em; + overflow: auto; + appearance: auto; + -moz-default-appearance: listbox; + color: FieldText; +} + +.permission { + padding: 6px 7px; + min-height: 25px; + border-bottom: 1px dotted ThreeDShadow; +} + +.permissionLabel { + font-weight: bold; +} + +.permission:hover { + background-color: -moz-dialog; + color: -moz-DialogText; +} + +/* Security Tab */ + +#securityPanel table { + margin-bottom: 1em; +} diff --git a/browser/themes/osx/places/organizer.css b/browser/themes/osx/places/organizer.css new file mode 100644 index 0000000000..fe9c8df833 --- /dev/null +++ b/browser/themes/osx/places/organizer.css @@ -0,0 +1,230 @@ +/* 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/. */ + +/* Places Organizer Sidebars */ + +#placesList { + appearance: auto; + -moz-default-appearance: -moz-mac-source-list; + width: 160px; +} + +#placesList > treechildren::-moz-tree-cell-text { + margin-inline-end: 6px; +} + +#placesList > treechildren::-moz-tree-row(selected) { + appearance: auto; + -moz-default-appearance: -moz-mac-source-list-selection; + -moz-font-smoothing-background-color: -moz-mac-source-list-selection; +} + +#placesList > treechildren::-moz-tree-row(selected,focus) { + appearance: auto; + -moz-default-appearance: -moz-mac-active-source-list-selection; + -moz-font-smoothing-background-color: -moz-mac-active-source-list-selection; +} + +#placesList > treechildren::-moz-tree-cell(separator) { + cursor: default; +} + +#placesList > treechildren::-moz-tree-separator { + border-top: 1px solid color-mix(in srgb, FieldText 70%, transparent); + margin: 0 10px; +} + +#placesToolbar { + padding: 0 4px 3px; +} + +#placesView { + border-top: none !important; +} + +#placesView > splitter { + border-inline-start: none !important; + border-inline-end: 1px solid color-mix(in srgb, FieldText 30%, transparent); + min-width: 1px; + width: 3px; + margin-inline-start: -3px; + position: relative; + background-image: none !important; +} + +#placesToolbar > toolbarbutton { + margin: 4px 4px 5px; + padding: 0; + height: 22px; + appearance: auto; + -moz-default-appearance: toolbarbutton; +} + +#placesToolbar > toolbarbutton > .toolbarbutton-icon { + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.8; + margin: 1px 4px; +} + +#placesToolbar > toolbarbutton:not(#clearDownloadsButton) > .toolbarbutton-text { + display: none; +} + +#placesToolbar > toolbarbutton[type="menu"] > .toolbarbutton-menu-dropmarker { + list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg); + padding: 0; + margin-inline-end: 2px; +} + +#placesToolbar > toolbarbutton[disabled] > .toolbarbutton-icon, +#placesToolbar > toolbarbutton:not(:hover):-moz-window-inactive > .toolbarbutton-icon, +#placesToolbar > toolbarbutton[type="menu"][disabled] > .toolbarbutton-menu-dropmarker, +#placesToolbar > toolbarbutton:not(:hover):-moz-window-inactive[type="menu"] > .toolbarbutton-menu-dropmarker { + opacity: .5; +} + +#placesToolbar > toolbarbutton:-moz-window-inactive[disabled] > .toolbarbutton-icon, +#placesToolbar > toolbarbutton:-moz-window-inactive[type="menu"][disabled] > .toolbarbutton-menu-dropmarker { + opacity: .25; +} + +#placesToolbar > toolbarbutton > menupopup { + margin-top: 1px; +} + +/* back and forward button */ +#back-button, +#forward-button:-moz-locale-dir(rtl) { + list-style-image: url("chrome://global/skin/icons/arrow-left.svg"); +} + +#forward-button, +#back-button:-moz-locale-dir(rtl) { + list-style-image: url("chrome://global/skin/icons/arrow-right.svg"); +} + +#back-button { + margin-inline-end: 0 !important; /* override margin from #placesToolbar > toolbarbutton */ +} + +#forward-button { + margin-inline-start: 0 !important; /* override margin from #placesToolbar > toolbarbutton */ +} + +#back-button > .toolbarbutton-icon { + margin-inline: 3px 2px !important; +} + +#forward-button > .toolbarbutton-icon { + margin-inline: 2px 3px !important; +} + +/* organize button */ +#organizeButton { + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} + +/* view button */ +#viewMenu { + list-style-image: url("chrome://browser/skin/sort.svg"); +} + +/* maintenance button */ +#maintenanceButton { + list-style-image: url("chrome://browser/skin/import-export.svg"); +} + +/* Root View */ +#placesView { + border-top: 1px solid ThreeDDarkShadow; + -moz-user-focus: ignore; +} + +/* Info box */ +#infoBox:not([hidden="true"]) { + display: block; +} + +#editBookmarkPanelContent { + grid-template-columns: auto 1fr; +} + +#editBookmarkPanelContent .caption-label:not([hidden="true"]) { + display: block; + grid-column: 2; +} + +#editBookmarkPanelContent label { + align-self: center; +} + +#editBMPanel_itemsCountText { + grid-column: auto / span 2; + justify-self: center; +} + +#editBMPanel_tagsSelectorRow { + grid-column: auto / span 2; +} + +#detailsPane { + border-top: 1px solid color-mix(in srgb, FieldText 50%, transparent); + height: 16em; + padding: 10px; +} + +#placeContent { + appearance: none; + border: none; +} + +#placeContent > treechildren::-moz-tree-cell, +#placeContent > treechildren::-moz-tree-column { + border-inline-end: 1px solid color-mix(in srgb, FieldText 30%, transparent); +} + +#placeContent > treechildren::-moz-tree-cell(separator) { + border-color: transparent; +} + +/** + * info pane + */ + +#itemsCountText, +#selectItemDescription { + color: GrayText; +} + +/** + * Downloads pane + */ + +#clearDownloadsButton { + list-style-image: none !important; +} + +#clearDownloadsButton > .toolbarbutton-icon { + display: none; +} + +/**** expanders ****/ + +.expander-up, +.expander-down { + margin-block: 0 1px; + margin-inline: 8px 4px; + padding: 0; +} + +.expander-up { + appearance: auto; + -moz-default-appearance: -moz-mac-disclosure-button-open; +} + +.expander-down { + appearance: auto; + -moz-default-appearance: -moz-mac-disclosure-button-closed; +} diff --git a/browser/themes/osx/preferences/alwaysAsk.png b/browser/themes/osx/preferences/alwaysAsk.png new file mode 100644 index 0000000000..444880422a Binary files /dev/null and b/browser/themes/osx/preferences/alwaysAsk.png differ diff --git a/browser/themes/osx/preferences/application.png b/browser/themes/osx/preferences/application.png new file mode 100644 index 0000000000..f8d610f6c2 Binary files /dev/null and b/browser/themes/osx/preferences/application.png differ diff --git a/browser/themes/osx/preferences/applications.css b/browser/themes/osx/preferences/applications.css new file mode 100644 index 0000000000..7eb762cefd --- /dev/null +++ b/browser/themes/osx/preferences/applications.css @@ -0,0 +1,61 @@ +/* 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/. */ + +.actionsMenu > menupopup > menuitem > .menu-iconic-left { + /* Undo content/browser/preferences/handlers.css - we don't + * want icon-less labels to line up with the other labels. + */ + min-width: 0; +} + +richlistitem[appHandlerIcon="handleInternally"], +menuitem[appHandlerIcon="handleInternally"] { + list-style-image: url("chrome://branding/content/icon32.png"); +} + +richlistitem[appHandlerIcon="ask"], +menuitem[appHandlerIcon="ask"] { + list-style-image: url("chrome://browser/skin/preferences/alwaysAsk.png"); +} + +richlistitem[appHandlerIcon="save"], +menuitem[appHandlerIcon="save"] { + list-style-image: url("chrome://browser/skin/preferences/saveFile.png"); +} + +richlistitem[appHandlerIcon="plugin"], +menuitem[appHandlerIcon="plugin"] { + list-style-image: url("chrome://global/skin/icons/plugin.svg"); +} + +/* Repeat what menu.css does for .menuitem-iconic */ +menuitem[appHandlerIcon] { + padding-top: 1px; + padding-bottom: 3px; +} + +menuitem[appHandlerIcon] > .menu-iconic-left > .menu-iconic-icon { + margin-inline-start: 0; + width: 16px; +} + +#appList { + min-height: 212px; +} + +#appList > richlistitem { + -moz-box-align: center; +} + +#appList > richlistitem > image { + margin: 5px; + width: 32px; + height: 32px; +} + +#appList > richlistitem > label { + margin: 0px; + padding: 5px; + white-space: nowrap; +} diff --git a/browser/themes/osx/preferences/saveFile.png b/browser/themes/osx/preferences/saveFile.png new file mode 100644 index 0000000000..3cd1d94066 Binary files /dev/null and b/browser/themes/osx/preferences/saveFile.png differ diff --git a/browser/themes/osx/sanitizeDialog.css b/browser/themes/osx/sanitizeDialog.css new file mode 100644 index 0000000000..6969c9f4be --- /dev/null +++ b/browser/themes/osx/sanitizeDialog.css @@ -0,0 +1,12 @@ +/* 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/. */ + +/* Align the duration label with the warning box and item list */ +#sanitizeDurationLabel { + margin-inline-start: 1px; +} + +#sanitizeEverythingWarningIcon { + list-style-image: url("chrome://global/skin/icons/warning-large.png"); +} diff --git a/browser/themes/osx/share.svg b/browser/themes/osx/share.svg new file mode 100644 index 0000000000..9793379648 --- /dev/null +++ b/browser/themes/osx/share.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/osx/swipe-gesture-icons/history-swipe-arrow.svg b/browser/themes/osx/swipe-gesture-icons/history-swipe-arrow.svg new file mode 100644 index 0000000000..9c0c0a5672 --- /dev/null +++ b/browser/themes/osx/swipe-gesture-icons/history-swipe-arrow.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/browser/themes/shared/UITour.css b/browser/themes/shared/UITour.css new file mode 100644 index 0000000000..3380e7d4a0 --- /dev/null +++ b/browser/themes/shared/UITour.css @@ -0,0 +1,154 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* UI Tour */ + +#UITourHighlightContainer { + appearance: none; + + /* Resets the native styles in windows and macOS */ + border: none; + background-color: transparent; + -moz-window-shadow: none; + + --panel-border-color: transparent; + --panel-background: transparent; + /* This is a buffer to compensate for the movement in the "wobble" effect, + and for the box-shadow of #UITourHighlight. */ + --panel-padding: 4px; + /* Compensate the displacement caused by padding. */ + margin: -4px; +} + +#UITourHighlight { + background-color: rgba(0, 200, 215, 0.3); + min-height: 24px; + min-width: 24px; +} + +#UITourHighlight.rounded-highlight { + border-radius: 4px; +} + +#UITourTooltipBody { + -moz-box-align: start; +} + +#UITourTooltipTitleContainer { + -moz-box-align: start; + margin-bottom: 10px; +} + +#UITourTooltipIcon { + width: 48px; + height: 48px; + margin-inline-end: 10px; +} + +#UITourTooltipTitle, +#UITourTooltipDescription { + max-width: 20rem; +} + +#UITourTooltipTitle { + font-size: 1.45rem; + font-weight: bold; + margin: 0; +} + +#UITourTooltipDescription { + margin-inline: 0; + font-size: 1.15rem; + line-height: 1.8rem; + margin-bottom: 0; /* Override global.css */ +} + +#UITourTooltipClose { + position: relative; + appearance: none; + border: none; + background-color: transparent; + min-width: 0; + margin-inline-start: 4px; + margin-top: -2px; +} + +#UITourTooltipClose > .toolbarbutton-text { + display: none; +} + +#UITourTooltipButtons { + -moz-box-pack: end; + background-color: var(--arrowpanel-dimmed); + border-top: 1px solid var(--panel-separator-color); + margin: 10px -16px -16px; + padding: 16px; +} + +#UITourTooltipButtons > label, +#UITourTooltipButtons > button { + margin: 0 15px; +} + +#UITourTooltipButtons > label:first-child, +#UITourTooltipButtons > button:first-child { + margin-inline-start: 0; +} + +#UITourTooltipButtons > label:last-child, +#UITourTooltipButtons > button:last-child { + margin-inline-end: 0; +} + +#UITourTooltipButtons > button[image] > .button-box > .button-icon { + width: 16px; + height: 16px; + margin-inline-end: 5px; +} + +#UITourTooltipButtons > label, +#UITourTooltipButtons > button .button-text { + font-size: 1.15rem; +} + +#UITourTooltipButtons > button:not(.button-link) { + appearance: none; + background-color: rgb(251,251,251); + border-radius: 3px; + border: 1px solid; + border-color: rgb(192,192,192); + color: rgb(71,71,71); + padding: 4px 30px; + transition-property: background-color, border-color; + transition-duration: 150ms; +} + +#UITourTooltipButtons > button:not(.button-link, :active):hover { + background-color: hsla(210,4%,10%,.15); + border-color: hsla(210,4%,10%,.15); + box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset; +} + +#UITourTooltipButtons > label, +#UITourTooltipButtons > button.button-link:not(:hover) { + appearance: none; + background: transparent; + border: none; + box-shadow: none; + color: var(--panel-disabled-color); + padding-inline: 10px; +} + +/* The primary button gets the same color as the customize button. */ +#UITourTooltipButtons > button.button-primary { + background-color: rgb(116,191,67); + color: white; + padding-inline: 30px; +} + +#UITourTooltipButtons > button.button-primary:not(:active):hover { + background-color: rgb(105,173,61); +} diff --git a/browser/themes/shared/aboutFrameCrashed.css b/browser/themes/shared/aboutFrameCrashed.css new file mode 100644 index 0000000000..f15a4cf10e --- /dev/null +++ b/browser/themes/shared/aboutFrameCrashed.css @@ -0,0 +1,12 @@ +/* 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 { + background-image: url("chrome://browser/skin/tab-crashed.svg"); + background-position: center, center; + background-repeat: no-repeat; + height: 100%; + width: 100%; + background-size: 1.6em; +} diff --git a/browser/themes/shared/aboutRestartRequired.css b/browser/themes/shared/aboutRestartRequired.css new file mode 100644 index 0000000000..1b7c0e595a --- /dev/null +++ b/browser/themes/shared/aboutRestartRequired.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/. */ + +@import url("chrome://global/skin/error-pages.css"); + +#header { + background: none; + padding-inline-start: 0; + margin-inline-start: 0; +} + +#text-container { + margin: auto; +} + +#restart { + margin-top: 1.2em; +} diff --git a/browser/themes/shared/aboutSessionRestore.css b/browser/themes/shared/aboutSessionRestore.css new file mode 100644 index 0000000000..4bc69b0122 --- /dev/null +++ b/browser/themes/shared/aboutSessionRestore.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/. */ + +@import url("chrome://browser/skin/tab-list-tree.css"); + +#tabsToggle { + cursor: pointer; + /* Override button background-color and color from common.css */ + background-color: transparent; + color: var(--in-content-link-color); + -moz-context-properties: fill; + fill: currentColor; + border: none; + padding: 0; + margin: 0; + padding-inline-end: 45px; + position: relative; +} + +#tabsToggle::after { + content: ""; + position: absolute; + width: 100%; + height: 100%; + top: 0; + inset-inline-start: 0; + background-image: url("chrome://global/skin/icons/arrow-down.svg"); + background-repeat: no-repeat; + background-size: 20px; + background-position: right center; +} + +#tabsToggle:dir(rtl)::after { + background-position-x: left; +} + +#tabsToggle:not(.tabs-hidden)::after { + background-image: url("chrome://global/skin/icons/arrow-up.svg"); +} + +#tabsToggle.tabs-hidden > #hideTabs, +#tabsToggle:not(.tabs-hidden) > #showTabs { + display: none; +} + +#tabList { + flex: 1; + min-height: 12em; + margin-top: 1.2em; +} + +.button-container { + text-align: end; +} diff --git a/browser/themes/shared/aboutTabCrashed.css b/browser/themes/shared/aboutTabCrashed.css new file mode 100644 index 0000000000..264e064f6d --- /dev/null +++ b/browser/themes/shared/aboutTabCrashed.css @@ -0,0 +1,40 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +#reportSent { + font-weight: bold; +} + +#reportBox { + background-color: var(--in-content-box-info-background); + margin: 24px 0; + padding: 14px; + border: 1px solid var(--in-content-box-border-color); + border-radius: 2px; +} + +#reportBox > h2:first-child { + margin-top: 0; +} + +input[type="text"], +textarea { + width: 100%; + box-sizing: border-box; + resize: none; +} + +input[type="text"] { + margin-inline-start: 0; +} + +#options { + list-style: none; + margin-inline-start: 0; +} + +#options > li, +#email { + margin-top: 11px; +} diff --git a/browser/themes/shared/aboutWelcomeBack.css b/browser/themes/shared/aboutWelcomeBack.css new file mode 100644 index 0000000000..d9ac643c2a --- /dev/null +++ b/browser/themes/shared/aboutWelcomeBack.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/. */ + +@import url("chrome://browser/skin/tab-list-tree.css"); + +.radioRestoreContainer:not(:last-child) { + margin-bottom: 0.3em; +} + +#tabList { + flex: 1; + min-height: 12em; + margin-top: 1.2em; +} diff --git a/browser/themes/shared/addon-notification.css b/browser/themes/shared/addon-notification.css new file mode 100644 index 0000000000..0436c3985a --- /dev/null +++ b/browser/themes/shared/addon-notification.css @@ -0,0 +1,54 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +.popup-notification-body[popupid="addon-progress"], +.popup-notification-body[popupid="addon-install-confirmation"] { + width: 28em; + max-width: 28em; +} + +.addon-install-confirmation-name { + font-weight: bold; +} + +html|*.addon-webext-perm-list { + margin-block-end: 0; + padding-inline-start: 10px; +} + +.addon-webext-perm-single-entry { + margin-top: 11px; +} + +.addon-webext-perm-text, +.addon-webext-perm-single-entry { + margin-inline-start: 0; +} + +.popup-notification-description[popupid="addon-webext-permissions"], +.popup-notification-description[popupid="addon-webext-permissions-notification"] { + margin-inline-start: -1px; +} + +.addon-webext-perm-notification-content, +.addon-installed-notification-content { + margin-top: 0; +} + +.addon-installed-notification-content > checkbox { + margin: 8px 4px 2px; +} + +.addon-webext-name { + display: inline; + font-weight: bold; + margin: 0; +} + +.addon-warning-icon { + -moz-context-properties: fill; + fill: #FFBF00; +} diff --git a/browser/themes/shared/addons/addon-install-blocked.svg b/browser/themes/shared/addons/addon-install-blocked.svg new file mode 100644 index 0000000000..b2f739a868 --- /dev/null +++ b/browser/themes/shared/addons/addon-install-blocked.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/addons/addon-install-downloading.svg b/browser/themes/shared/addons/addon-install-downloading.svg new file mode 100644 index 0000000000..2b8ba7cb86 --- /dev/null +++ b/browser/themes/shared/addons/addon-install-downloading.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/addons/addon-install-installed.svg b/browser/themes/shared/addons/addon-install-installed.svg new file mode 100644 index 0000000000..86ebe4975d --- /dev/null +++ b/browser/themes/shared/addons/addon-install-installed.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/addons/extension-controlled.css b/browser/themes/shared/addons/extension-controlled.css new file mode 100644 index 0000000000..69d78373fc --- /dev/null +++ b/browser/themes/shared/addons/extension-controlled.css @@ -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/. */ + +.extension-controlled-notification > .popup-notification-body-container > .popup-notification-body { + width: 30em; +} + +.extension-controlled-notification > .popup-notification-body-container > .popup-notification-body > hbox > vbox > .popup-notification-description { + font-weight: 600; +} + +.extension-controlled-notification { + margin-bottom: 0; +} + +.extension-controlled-notification popupnotificationcontent > description > .extension-controlled-icon { + height: 16px; + width: 16px; + vertical-align: bottom; +} + +.extension-controlled-icon.alltabs-icon { + background: url("chrome://global/skin/icons/arrow-down.svg"); + /* This icon has a lot of extra space to the sides, reduce that a little. */ + margin: 0 -1px 1px; +} + +.extension-controlled-notification > .popup-notification-body-container > .popup-notification-body > .popup-notification-bottom-content > .popup-notification-warning, +.extension-controlled-notification > .popup-notification-body-container > .popup-notification-icon { + display: none; +} diff --git a/browser/themes/shared/addons/unified-extensions.css b/browser/themes/shared/addons/unified-extensions.css new file mode 100644 index 0000000000..3356695e1e --- /dev/null +++ b/browser/themes/shared/addons/unified-extensions.css @@ -0,0 +1,255 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +:root { + /* uei = unified extensions item */ + --uei-icon-size: 32px; + --uei-attention-dot-size: 8px; + --uei-button-hover-bgcolor: var(--panel-item-hover-bgcolor); + --uei-button-hover-color: inherit; + --uei-button-active-bgcolor: var(--panel-item-active-bgcolor); + --uei-button-active-color: inherit; + --uei-button-attention-dot-color: var(--tab-attention-icon-color); +} + +:root[uidensity="compact"] { + --uei-icon-size: 24px; +} + +#unified-extensions-panel { + --uei-dot-horizontal-position-in-panel: calc(var(--uei-icon-size) / 2 + var(--arrowpanel-menuitem-padding-inline) - var(--uei-attention-dot-size) / 2); + --uei-dot-vertical-position-in-panel: max(0px, calc(var(--arrowpanel-menuitem-padding-block) / 2 - var(--uei-attention-dot-size) / 2)); +} + +/* Align extensions rendered with custom elements. */ +unified-extensions-item { + display: flex; + align-items: center; +} + +#unified-extensions-panel .unified-extensions-item { + /* Have some spacing between items in the panel; mainly useful for when HCM is enabled. */ + padding-block: 2px; +} + +/* The "attention UI" for the unified extensions is based on: + * https://searchfox.org/mozilla-central/rev/560b7b1b17/browser/themes/shared/tabs.css#624 */ + +/* On the main unified extensions button, we draw the attention on the icon element. */ +#unified-extensions-button[attention] > .toolbarbutton-icon, +/* For extension widgets placed in a toolbar, we use the stack element (containing the icon) + * of the action button to draw the attention dot. + * Otherwise (in the extensions panel), we use the action button itself. */ +toolbar .unified-extensions-item[attention] > .unified-extensions-item-action-button > .toolbarbutton-badge-stack, +#unified-extensions-panel .unified-extensions-item[attention] > .unified-extensions-item-action-button, +.widget-overflow-list .unified-extensions-item[attention][unified-extensions="false"] > .unified-extensions-item-action-button { + background-image: radial-gradient(circle, var(--uei-button-attention-dot-color), var(--uei-button-attention-dot-color) 2px, transparent 2px); + background-size: var(--uei-attention-dot-size) var(--uei-attention-dot-size); + background-repeat: no-repeat; +} + +/* Adjust attention dots position in the toolbar. */ +#unified-extensions-button[attention] > .toolbarbutton-icon, +toolbar .unified-extensions-item[attention] > .unified-extensions-item-action-button > .toolbarbutton-badge-stack { + background-position: center bottom calc(var(--toolbarbutton-inner-padding) / 2 - var(--uei-attention-dot-size) / 2); +} + +/* Adjust attention dots position in the unified extensions panel. */ +#unified-extensions-panel .unified-extensions-item[attention] > .unified-extensions-item-action-button { + background-position: left var(--uei-dot-horizontal-position-in-panel) bottom var(--uei-dot-vertical-position-in-panel); +} + +/* Adjust attention dots position in the unified extensions panel for RTL. */ +#unified-extensions-panel .unified-extensions-item[attention] > .unified-extensions-item-action-button:-moz-locale-dir(rtl) { + background-position-x: right var(--uei-dot-horizontal-position-in-panel); +} + +/* Adjust attention dots position in the overflow panel. */ +.widget-overflow-list .unified-extensions-item[attention][unified-extensions="false"] > .unified-extensions-item-action-button { + background-position-x: left calc(16px / 2 + var(--arrowpanel-menuitem-padding-inline) - var(--uei-attention-dot-size) / 2); + background-position-y: bottom calc(var(--arrowpanel-menuitem-padding-block) / 2 - var(--uei-attention-dot-size) / 2); +} + +:root[uidensity="compact"] .widget-overflow-list .unified-extensions-item[attention][unified-extensions="false"] > .unified-extensions-item-action-button { + background-position-y: bottom -2px; +} + +/* Adjust attention dots position in the overflow panel for RTL. */ +.widget-overflow-list toolbaritem.unified-extensions-item[attention][unified-extensions="false"] > .unified-extensions-item-action-button:-moz-locale-dir(rtl) { + background-position-x: right calc(16px / 2 + var(--arrowpanel-menuitem-padding-inline) - var(--uei-attention-dot-size) / 2); +} + +.unified-extensions-item-action-button { + overflow: hidden; + background-color: transparent; +} + +/* The padding-block for menuitems is set to 0 in compact mode which, with the + * extension icon being 32px in this case, makes the item look crowded even for + * compact mode. */ +:root[uidensity="compact"] panel:not([touchmode]) .unified-extensions-item-action-button { + padding-block: 4px; +} + +.unified-extensions-item-action-button[disabled].subviewbutton { + color: var(--panel-description-color); +} + +.unified-extensions-item-action-button[disabled] .unified-extensions-item-icon { + opacity: 0.5; +} + +.unified-extensions-item-icon, +/* When the unified extensions pref is enabled, we also want to increase the + * size of the icons in the extension CUI widgets. */ +panel .unified-extensions-item[unified-extensions="true"] .webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-icon { + height: var(--uei-icon-size); + width: var(--uei-icon-size); +} + +/* The first selector is for the custom elements icon, which appears only in the UEP. */ +.unified-extensions-item-icon, +panel .unified-extensions-item[unified-extensions="true"] .webextension-browser-action > .toolbarbutton-badge-stack { + margin-inline-end: 6px; +} + +.unified-extensions-item-icon, +.unified-extensions-item-contents { + pointer-events: none; +} + +.unified-extensions-item-name, +.unified-extensions-item-message { + margin: 0; + padding-inline-start: .5em; + width: 22em; + word-break: break-word; +} + +.unified-extensions-item-message { + color: var(--panel-description-color); +} + +.unified-extensions-item-menu-button.subviewbutton { + list-style-image: url("chrome://global/skin/icons/settings.svg"); + margin: 0; + margin-inline-end: var(--arrowpanel-menuitem-margin-inline); + /* Have the icon even padding all around by default */ + padding: var(--arrowpanel-menuitem-padding-inline); + border: 1px solid transparent; + background-color: transparent; +} + +.unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-text { + display: none; +} + +/* --- browser action CUI widget styles --- */ + +/* Hide secondary (menu) button when the widget is in the list of widgets in + * customization mode. */ +toolbaritem.unified-extensions-item:not([cui-areatype="panel"], [overflowedItem=true]) .unified-extensions-item-menu-button { + display: none; +} + +/* Hide subviewbutton label by default, it should only be shown in the old + * overflow panel and the palette. */ +toolbaritem.unified-extensions-item[cui-areatype="toolbar"] .toolbarbutton-text, +#unified-extensions-area > toolbaritem.unified-extensions-item .toolbarbutton-text { + display: none; +} + +/* Hide unified extensions content by default, unless the item is overflowed or in + * a panel. Also hide this content if the item is visible in customize mode. */ +toolbaritem.unified-extensions-item:not([overflowedItem="true"], [cui-areatype="panel"]) .unified-extensions-item-contents, +toolbarpaletteitem > toolbaritem.unified-extensions-item .unified-extensions-item-contents { + display: none; +} + +toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton { + -moz-box-flex: 0; + margin-inline-start: var(--arrowpanel-menuitem-margin-inline); + padding: var(--arrowpanel-menuitem-padding); + border: 1px solid transparent; +} + +/* When the unified extensions pref is set, we want to always have a "large" + * menu button, even on compact mode since each extension has two lines of text + * anyway (extension name and message). */ +toolbaritem.unified-extensions-item[unified-extensions="true"] .unified-extensions-item-menu-button.subviewbutton { + padding: 8px; +} + +/* --- browser action CUI widget styles in the overflow/unified extensions panel --- */ + +/* Align CUI widgets with the custom elements in the unified extensions panel. */ +#unified-extensions-panel toolbaritem.unified-extensions-item { + max-width: max-content; +} + +/* Show CUI widget label in overflow panel when the unified extensions pref is + * not set. */ +.widget-overflow-list toolbaritem.unified-extensions-item[unified-extensions="false"] .unified-extensions-item-action-button .toolbarbutton-text { + text-align: start; + display: block; +} + +@media (prefers-contrast) { + :root { + --uei-button-attention-dot-color: ButtonText; + } + + #unified-extensions-panel :is( + .unified-extensions-item-action-button:not([disabled]).subviewbutton, + .unified-extensions-item-menu-button.subviewbutton, + toolbaritem.unified-extensions-item .unified-extensions-item-action-button:not([disabled]).subviewbutton, + toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton + ) { + border-color: currentColor; + background-color: ButtonFace; + color: ButtonText; + --uei-button-hover-bgcolor: SelectedItem; + --uei-button-hover-color: SelectedItemText; + --uei-button-active-bgcolor: ButtonFace; + --uei-button-active-color: ButtonText; + } + + #unified-extensions-panel .unified-extensions-item-action-button[disabled].subviewbutton { + background-color: Canvas; + color: GrayText; + } + + .unified-extensions-item-action-button[disabled] .unified-extensions-item-message { + color: GrayText; + } + + .unified-extensions-item-action-button:not([disabled]) .unified-extensions-item-message { + color: ButtonText; + } + + .unified-extensions-item-action-button:not([disabled]):hover .unified-extensions-item-message { + color: inherit; + } + + #unified-extensions-panel :is( + .unified-extensions-item-action-button:not([disabled]).subviewbutton, + .unified-extensions-item-menu-button.subviewbutton, + toolbaritem.unified-extensions-item .unified-extensions-item-action-button:not([disabled]).subviewbutton, + toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton + ):hover:not(:active) { + background-color: var(--uei-button-hover-bgcolor); + color: var(--uei-button-hover-color); + border-color: var(--uei-button-hover-bgcolor); + } + + #unified-extensions-panel :is( + .unified-extensions-item-action-button:not([disabled]).subviewbutton, + .unified-extensions-item-menu-button.subviewbutton, + toolbaritem.unified-extensions-item .unified-extensions-item-action-button:not([disabled]).subviewbutton, + toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton + ):hover:active { + background-color: var(--uei-button-active-bgcolor); + color: var(--uei-button-active-color); + } +} diff --git a/browser/themes/shared/app-marketplace-icons/LICENSE b/browser/themes/shared/app-marketplace-icons/LICENSE new file mode 100644 index 0000000000..6efe8a3cc9 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/LICENSE @@ -0,0 +1 @@ +Files in this folder include material that may be protected as a trademark in some jurisdictions. diff --git a/browser/themes/shared/app-marketplace-icons/Makefile.in b/browser/themes/shared/app-marketplace-icons/Makefile.in new file mode 100644 index 0000000000..0e7114ca06 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/Makefile.in @@ -0,0 +1,26 @@ +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +include $(topsrcdir)/config/rules.mk + +# Note: `Makefile.in` is not allowed to modify `DEFINES`, so we modify +# `MAKE_JAR_FLAGS` directly. + +# Note: we use 'es-ES' badge for all Spanish locales like in Bedrock. +# See https://github.com/mozilla/bedrock/blob/67fd925b4d621dde0e48e27738c4b9c397ac5169/bedrock/mozorg/templatetags/misc.py#L58. + +# Note: it's probably possible to format these lists so they're easier to +# modify. + +ifneq (,$(filter es%,$(AB_CD))) +MAKE_JARS_FLAGS += -DANDROID_MARKETPLACE_AB_CD=es-ES +MAKE_JARS_FLAGS += -DIOS_MARKETPLACE_AB_CD=es-ES +else +ifneq (,$(filter $(AB_CD),af ar az be bg bn-BD bn-IN ca cs da de el es-ES et eu fa fi fr gl gu-IN he hi-IN hr hu hy-AM id is it ja ka kk km kn ko lo lt lv mk ml mr ms my nb-NO ne-NP nl nn-NO pa-IN pl pt-BR pt-PT ro ru si sk sl sq sr sv-SE sw ta te th tr uk ur uz vi zh-CN zh-TW zu)) +MAKE_JARS_FLAGS += -DANDROID_MARKETPLACE_AB_CD=$(AB_CD) +endif # Android, does not start with es. +ifneq (,$(filter $(AB_CD),ar az bg cs da de el es-ES et fi fr he hu id it ja ko lt lv ms mt nb-NO nl nn-NO pl pt-BR pt-PT ro ru sk sl sv-SE th tr vi zh-CN zh-TW)) +MAKE_JARS_FLAGS += -DIOS_MARKETPLACE_AB_CD=$(AB_CD) +endif # iOS, does not start with es. +endif # starts with es. diff --git a/browser/themes/shared/app-marketplace-icons/af/android.png b/browser/themes/shared/app-marketplace-icons/af/android.png new file mode 100644 index 0000000000..beb0f90228 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/af/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ar/android.png b/browser/themes/shared/app-marketplace-icons/ar/android.png new file mode 100644 index 0000000000..32541d672f Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ar/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ar/ios.svg b/browser/themes/shared/app-marketplace-icons/ar/ios.svg new file mode 100644 index 0000000000..8bcd76a996 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/ar/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/az/android.png b/browser/themes/shared/app-marketplace-icons/az/android.png new file mode 100644 index 0000000000..0f3a854c74 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/az/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/az/ios.svg b/browser/themes/shared/app-marketplace-icons/az/ios.svg new file mode 100644 index 0000000000..46bf593543 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/az/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/be/android.png b/browser/themes/shared/app-marketplace-icons/be/android.png new file mode 100644 index 0000000000..fc0ff894db Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/be/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/bg/android.png b/browser/themes/shared/app-marketplace-icons/bg/android.png new file mode 100644 index 0000000000..204b3e4303 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/bg/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/bg/ios.svg b/browser/themes/shared/app-marketplace-icons/bg/ios.svg new file mode 100644 index 0000000000..df80f3c5e1 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/bg/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/bn-BD/android.png b/browser/themes/shared/app-marketplace-icons/bn-BD/android.png new file mode 100644 index 0000000000..4e2b6da628 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/bn-BD/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/bn-IN/android.png b/browser/themes/shared/app-marketplace-icons/bn-IN/android.png new file mode 100644 index 0000000000..4e2b6da628 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/bn-IN/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ca/android.png b/browser/themes/shared/app-marketplace-icons/ca/android.png new file mode 100644 index 0000000000..a184cebc00 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ca/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/cs/android.png b/browser/themes/shared/app-marketplace-icons/cs/android.png new file mode 100644 index 0000000000..2fbe5e7e9d Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/cs/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/cs/ios.svg b/browser/themes/shared/app-marketplace-icons/cs/ios.svg new file mode 100644 index 0000000000..a3baabc173 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/cs/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/da/android.png b/browser/themes/shared/app-marketplace-icons/da/android.png new file mode 100644 index 0000000000..b6bab10959 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/da/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/da/ios.svg b/browser/themes/shared/app-marketplace-icons/da/ios.svg new file mode 100644 index 0000000000..1a47f8bca8 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/da/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/de/android.png b/browser/themes/shared/app-marketplace-icons/de/android.png new file mode 100644 index 0000000000..eef59de69a Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/de/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/de/ios.svg b/browser/themes/shared/app-marketplace-icons/de/ios.svg new file mode 100644 index 0000000000..523e8114b1 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/de/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/el/android.png b/browser/themes/shared/app-marketplace-icons/el/android.png new file mode 100644 index 0000000000..9161f086b6 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/el/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/el/ios.svg b/browser/themes/shared/app-marketplace-icons/el/ios.svg new file mode 100644 index 0000000000..82505aa3f4 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/el/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/en-US/android.png b/browser/themes/shared/app-marketplace-icons/en-US/android.png new file mode 100644 index 0000000000..ce3f0f4933 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/en-US/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/en-US/ios.svg b/browser/themes/shared/app-marketplace-icons/en-US/ios.svg new file mode 100644 index 0000000000..e525da53e4 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/en-US/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/es-ES/android.png b/browser/themes/shared/app-marketplace-icons/es-ES/android.png new file mode 100644 index 0000000000..7589829d5d Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/es-ES/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/es-ES/ios.svg b/browser/themes/shared/app-marketplace-icons/es-ES/ios.svg new file mode 100644 index 0000000000..8311e5e714 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/es-ES/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/et/android.png b/browser/themes/shared/app-marketplace-icons/et/android.png new file mode 100644 index 0000000000..1a65656d60 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/et/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/et/ios.svg b/browser/themes/shared/app-marketplace-icons/et/ios.svg new file mode 100644 index 0000000000..da2884ae78 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/et/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/eu/android.png b/browser/themes/shared/app-marketplace-icons/eu/android.png new file mode 100644 index 0000000000..db991b0ca8 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/eu/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/fa/android.png b/browser/themes/shared/app-marketplace-icons/fa/android.png new file mode 100644 index 0000000000..086832e42a Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/fa/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/fi/android.png b/browser/themes/shared/app-marketplace-icons/fi/android.png new file mode 100644 index 0000000000..ce3f0f4933 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/fi/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/fi/ios.svg b/browser/themes/shared/app-marketplace-icons/fi/ios.svg new file mode 100644 index 0000000000..b843470b72 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/fi/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/fr/android.png b/browser/themes/shared/app-marketplace-icons/fr/android.png new file mode 100644 index 0000000000..7b8372b203 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/fr/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/fr/ios.svg b/browser/themes/shared/app-marketplace-icons/fr/ios.svg new file mode 100644 index 0000000000..676e7cbc86 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/fr/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/gl/android.png b/browser/themes/shared/app-marketplace-icons/gl/android.png new file mode 100644 index 0000000000..0da16b89bb Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/gl/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/gu-IN/android.png b/browser/themes/shared/app-marketplace-icons/gu-IN/android.png new file mode 100644 index 0000000000..7dc446f58b Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/gu-IN/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/he/android.png b/browser/themes/shared/app-marketplace-icons/he/android.png new file mode 100644 index 0000000000..9177c5469f Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/he/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/he/ios.svg b/browser/themes/shared/app-marketplace-icons/he/ios.svg new file mode 100644 index 0000000000..4994a2682b --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/he/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/hi-IN/android.png b/browser/themes/shared/app-marketplace-icons/hi-IN/android.png new file mode 100644 index 0000000000..eafcb92ad7 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/hi-IN/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/hr/android.png b/browser/themes/shared/app-marketplace-icons/hr/android.png new file mode 100644 index 0000000000..3e8f2b5b84 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/hr/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/hu/android.png b/browser/themes/shared/app-marketplace-icons/hu/android.png new file mode 100644 index 0000000000..c965eaa058 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/hu/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/hu/ios.svg b/browser/themes/shared/app-marketplace-icons/hu/ios.svg new file mode 100644 index 0000000000..f01e689a1e --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/hu/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/hy-AM/android.png b/browser/themes/shared/app-marketplace-icons/hy-AM/android.png new file mode 100644 index 0000000000..c383a8ce9d Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/hy-AM/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/id/android.png b/browser/themes/shared/app-marketplace-icons/id/android.png new file mode 100644 index 0000000000..9f603f02a1 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/id/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/id/ios.svg b/browser/themes/shared/app-marketplace-icons/id/ios.svg new file mode 100644 index 0000000000..a6a69865cc --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/id/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/is/android.png b/browser/themes/shared/app-marketplace-icons/is/android.png new file mode 100644 index 0000000000..1e4d7478eb Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/is/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/it/android.png b/browser/themes/shared/app-marketplace-icons/it/android.png new file mode 100644 index 0000000000..85b5df99df Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/it/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/it/ios.svg b/browser/themes/shared/app-marketplace-icons/it/ios.svg new file mode 100644 index 0000000000..6e1e4394e5 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/it/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/ja/android.png b/browser/themes/shared/app-marketplace-icons/ja/android.png new file mode 100644 index 0000000000..5ed3cadd17 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ja/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ja/ios.svg b/browser/themes/shared/app-marketplace-icons/ja/ios.svg new file mode 100644 index 0000000000..2385a32c1c --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/ja/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/jar.mn b/browser/themes/shared/app-marketplace-icons/jar.mn new file mode 100644 index 0000000000..e201dad135 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/jar.mn @@ -0,0 +1,17 @@ +#filter substitution +# 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/. + +browser.jar: +% locale app-marketplace-icons @AB_CD@ %locale/@AB_CD@/app-marketplace-icons/ +#if defined(ANDROID_MARKETPLACE_AB_CD) + locale/@AB_CD@/app-marketplace-icons/android.png (@ANDROID_MARKETPLACE_AB_CD@/android.png) +#else + locale/@AB_CD@/app-marketplace-icons/android.png (en-US/android.png) +#endif +#if defined(IOS_MARKETPLACE_AB_CD) + locale/@AB_CD@/app-marketplace-icons/ios.svg (@IOS_MARKETPLACE_AB_CD@/ios.svg) +#else + locale/@AB_CD@/app-marketplace-icons/ios.svg (en-US/ios.svg) +#endif diff --git a/browser/themes/shared/app-marketplace-icons/ka/android.png b/browser/themes/shared/app-marketplace-icons/ka/android.png new file mode 100644 index 0000000000..4717fffd19 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ka/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/kk/android.png b/browser/themes/shared/app-marketplace-icons/kk/android.png new file mode 100644 index 0000000000..36266d750c Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/kk/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/km/android.png b/browser/themes/shared/app-marketplace-icons/km/android.png new file mode 100644 index 0000000000..4529924e7d Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/km/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/kn/android.png b/browser/themes/shared/app-marketplace-icons/kn/android.png new file mode 100644 index 0000000000..0b57399581 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/kn/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ko/android.png b/browser/themes/shared/app-marketplace-icons/ko/android.png new file mode 100644 index 0000000000..b0c0c496bf Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ko/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ko/ios.svg b/browser/themes/shared/app-marketplace-icons/ko/ios.svg new file mode 100644 index 0000000000..aba6865915 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/ko/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/lo/android.png b/browser/themes/shared/app-marketplace-icons/lo/android.png new file mode 100644 index 0000000000..ea2eaa3ffb Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/lo/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/lt/android.png b/browser/themes/shared/app-marketplace-icons/lt/android.png new file mode 100644 index 0000000000..7ad323fb97 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/lt/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/lt/ios.svg b/browser/themes/shared/app-marketplace-icons/lt/ios.svg new file mode 100644 index 0000000000..dc3e080ee2 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/lt/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/lv/android.png b/browser/themes/shared/app-marketplace-icons/lv/android.png new file mode 100644 index 0000000000..828f6bd659 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/lv/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/lv/ios.svg b/browser/themes/shared/app-marketplace-icons/lv/ios.svg new file mode 100644 index 0000000000..45aa7eb35e --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/lv/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/mk/android.png b/browser/themes/shared/app-marketplace-icons/mk/android.png new file mode 100644 index 0000000000..e3f7f0a856 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/mk/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ml/android.png b/browser/themes/shared/app-marketplace-icons/ml/android.png new file mode 100644 index 0000000000..5debb8c1a1 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ml/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/moz.build b/browser/themes/shared/app-marketplace-icons/moz.build new file mode 100644 index 0000000000..d988c0ff9b --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/moz.build @@ -0,0 +1,7 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +JAR_MANIFESTS += ["jar.mn"] diff --git a/browser/themes/shared/app-marketplace-icons/mr/android.png b/browser/themes/shared/app-marketplace-icons/mr/android.png new file mode 100644 index 0000000000..ca00f14064 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/mr/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ms/android.png b/browser/themes/shared/app-marketplace-icons/ms/android.png new file mode 100644 index 0000000000..e6c25272c0 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ms/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ms/ios.svg b/browser/themes/shared/app-marketplace-icons/ms/ios.svg new file mode 100644 index 0000000000..b8e2904aa7 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/ms/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/mt/ios.svg b/browser/themes/shared/app-marketplace-icons/mt/ios.svg new file mode 100644 index 0000000000..3f68a2fe59 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/mt/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/my/android.png b/browser/themes/shared/app-marketplace-icons/my/android.png new file mode 100644 index 0000000000..0f90e2d8e4 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/my/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/nb-NO/android.png b/browser/themes/shared/app-marketplace-icons/nb-NO/android.png new file mode 100644 index 0000000000..1bf3d31a1e Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/nb-NO/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/nb-NO/ios.svg b/browser/themes/shared/app-marketplace-icons/nb-NO/ios.svg new file mode 100644 index 0000000000..5a3831467f --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/nb-NO/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/ne-NP/android.png b/browser/themes/shared/app-marketplace-icons/ne-NP/android.png new file mode 100644 index 0000000000..ac4d645359 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ne-NP/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/nl/android.png b/browser/themes/shared/app-marketplace-icons/nl/android.png new file mode 100644 index 0000000000..3521f86305 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/nl/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/nl/ios.svg b/browser/themes/shared/app-marketplace-icons/nl/ios.svg new file mode 100644 index 0000000000..1d11155096 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/nl/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/nn-NO/android.png b/browser/themes/shared/app-marketplace-icons/nn-NO/android.png new file mode 100644 index 0000000000..1bf3d31a1e Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/nn-NO/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/nn-NO/ios.svg b/browser/themes/shared/app-marketplace-icons/nn-NO/ios.svg new file mode 100644 index 0000000000..5a3831467f --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/nn-NO/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/pa-IN/android.png b/browser/themes/shared/app-marketplace-icons/pa-IN/android.png new file mode 100644 index 0000000000..12ccc49e4a Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/pa-IN/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/pl/android.png b/browser/themes/shared/app-marketplace-icons/pl/android.png new file mode 100644 index 0000000000..2229bade13 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/pl/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/pl/ios.svg b/browser/themes/shared/app-marketplace-icons/pl/ios.svg new file mode 100644 index 0000000000..1af1327869 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/pl/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/pt-BR/android.png b/browser/themes/shared/app-marketplace-icons/pt-BR/android.png new file mode 100644 index 0000000000..951cd7457f Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/pt-BR/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/pt-BR/ios.svg b/browser/themes/shared/app-marketplace-icons/pt-BR/ios.svg new file mode 100644 index 0000000000..6e27d3f95e --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/pt-BR/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/pt-PT/android.png b/browser/themes/shared/app-marketplace-icons/pt-PT/android.png new file mode 100644 index 0000000000..951cd7457f Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/pt-PT/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/pt-PT/ios.svg b/browser/themes/shared/app-marketplace-icons/pt-PT/ios.svg new file mode 100644 index 0000000000..685deb4e01 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/pt-PT/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/ro/android.png b/browser/themes/shared/app-marketplace-icons/ro/android.png new file mode 100644 index 0000000000..ee3b5be037 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ro/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ro/ios.svg b/browser/themes/shared/app-marketplace-icons/ro/ios.svg new file mode 100644 index 0000000000..a573bdd50d --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/ro/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/ru/android.png b/browser/themes/shared/app-marketplace-icons/ru/android.png new file mode 100644 index 0000000000..427d8701b4 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ru/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ru/ios.svg b/browser/themes/shared/app-marketplace-icons/ru/ios.svg new file mode 100644 index 0000000000..c7494a14d7 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/ru/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/si/android.png b/browser/themes/shared/app-marketplace-icons/si/android.png new file mode 100644 index 0000000000..397e9ff7c4 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/si/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/sk/android.png b/browser/themes/shared/app-marketplace-icons/sk/android.png new file mode 100644 index 0000000000..6efaf531f7 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/sk/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/sk/ios.svg b/browser/themes/shared/app-marketplace-icons/sk/ios.svg new file mode 100644 index 0000000000..bbb4c21551 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/sk/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/sl/android.png b/browser/themes/shared/app-marketplace-icons/sl/android.png new file mode 100644 index 0000000000..817e823f25 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/sl/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/sl/ios.svg b/browser/themes/shared/app-marketplace-icons/sl/ios.svg new file mode 100644 index 0000000000..854a63d4f1 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/sl/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/sq/android.png b/browser/themes/shared/app-marketplace-icons/sq/android.png new file mode 100644 index 0000000000..f3340e74aa Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/sq/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/sr/android.png b/browser/themes/shared/app-marketplace-icons/sr/android.png new file mode 100644 index 0000000000..b91d2c0749 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/sr/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/sv-SE/android.png b/browser/themes/shared/app-marketplace-icons/sv-SE/android.png new file mode 100644 index 0000000000..b6e1693169 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/sv-SE/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/sv-SE/ios.svg b/browser/themes/shared/app-marketplace-icons/sv-SE/ios.svg new file mode 100644 index 0000000000..243486903e --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/sv-SE/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/sw/android.png b/browser/themes/shared/app-marketplace-icons/sw/android.png new file mode 100644 index 0000000000..75cb4991fd Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/sw/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ta/android.png b/browser/themes/shared/app-marketplace-icons/ta/android.png new file mode 100644 index 0000000000..6f5f900b22 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ta/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/te/android.png b/browser/themes/shared/app-marketplace-icons/te/android.png new file mode 100644 index 0000000000..49a74c3082 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/te/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/th/android.png b/browser/themes/shared/app-marketplace-icons/th/android.png new file mode 100644 index 0000000000..81443611e6 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/th/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/th/ios.svg b/browser/themes/shared/app-marketplace-icons/th/ios.svg new file mode 100644 index 0000000000..ec16f437ca --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/th/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/tr/android.png b/browser/themes/shared/app-marketplace-icons/tr/android.png new file mode 100644 index 0000000000..93d6731d93 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/tr/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/tr/ios.svg b/browser/themes/shared/app-marketplace-icons/tr/ios.svg new file mode 100644 index 0000000000..ea44575d42 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/tr/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/uk/android.png b/browser/themes/shared/app-marketplace-icons/uk/android.png new file mode 100644 index 0000000000..5c113c3082 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/uk/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ur/android.png b/browser/themes/shared/app-marketplace-icons/ur/android.png new file mode 100644 index 0000000000..2e8e12539b Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ur/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/uz/android.png b/browser/themes/shared/app-marketplace-icons/uz/android.png new file mode 100644 index 0000000000..2cc63078d0 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/uz/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/vi/android.png b/browser/themes/shared/app-marketplace-icons/vi/android.png new file mode 100644 index 0000000000..c9db5debfb Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/vi/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/vi/ios.svg b/browser/themes/shared/app-marketplace-icons/vi/ios.svg new file mode 100644 index 0000000000..37b674202c --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/vi/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/zh-CN/android.png b/browser/themes/shared/app-marketplace-icons/zh-CN/android.png new file mode 100644 index 0000000000..02c6d7345c Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/zh-CN/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/zh-CN/ios.svg b/browser/themes/shared/app-marketplace-icons/zh-CN/ios.svg new file mode 100644 index 0000000000..d997375067 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/zh-CN/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/zh-TW/android.png b/browser/themes/shared/app-marketplace-icons/zh-TW/android.png new file mode 100644 index 0000000000..d292082e96 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/zh-TW/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/zh-TW/ios.svg b/browser/themes/shared/app-marketplace-icons/zh-TW/ios.svg new file mode 100644 index 0000000000..b5956135de --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/zh-TW/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/zu/android.png b/browser/themes/shared/app-marketplace-icons/zu/android.png new file mode 100644 index 0000000000..3526174e04 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/zu/android.png differ diff --git a/browser/themes/shared/autocomplete.css b/browser/themes/shared/autocomplete.css new file mode 100644 index 0000000000..f7c0721635 --- /dev/null +++ b/browser/themes/shared/autocomplete.css @@ -0,0 +1,167 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* General popup rules */ + +#PopupAutoComplete > richlistbox > richlistitem { + min-height: 20px; + border: 0; + border-radius: 0; + padding: 0 1px; +} + +#PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon { + margin-inline: 4px 0; +} + +#PopupAutoComplete > richlistbox > richlistitem > .ac-title { + font: icon; + margin-inline-start: 4px; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="importableLearnMore"] { + padding-bottom: 2px; + padding-inline-start: 21px; +} + +#PopupAutoComplete > richlistbox { + padding: 0; +} + +/* Popup states */ + +.autocomplete-richlistitem:hover { + background-color: var(--arrowpanel-dimmed); +} + +.autocomplete-richlistitem[selected] { + background-color: SelectedItem; + color: SelectedItemText; +} + +/* Autocomplete richlistitem support for a two-line label display */ + +#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper { + box-sizing: border-box; + display: flex; + flex-direction: row; + margin: 0; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="possible-username"] > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper > .ac-site-icon { + display: block; + margin-inline: 4px; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="possible-username"] > .ac-site-icon { + visibility: hidden; +} + +#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper > .labels-wrapper { + /* The text should flex while the icon should not */ + flex: 1; + /* width/min-width are needed to get the text-overflow: ellipsis to work for the children */ + min-width: 0; + width: 0; +} + +#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper > .labels-wrapper > .label-row { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .labels-wrapper > .generated-password-autosave, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="importableLearnMore"] > .ac-title, +#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper > .labels-wrapper > .line2-label { + padding-top: 2px !important; + opacity: .6; +} + +/* Login form autocompletion (with and without origin showing) and generated passwords */ +#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon { + fill: GrayText; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="importableLogins"] > .two-line-wrapper > .ac-site-icon { + fill: GrayText; + list-style-image: url(chrome://browser/skin/import.svg); +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"][selected] > .two-line-wrapper > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="importableLogins"][selected] > .two-line-wrapper > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"][selected] > .two-line-wrapper > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] { + fill: SelectedItemText; +} + +/* Login form autocompletion */ +#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper { + padding: 4px; + padding-inline-start: 0; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"]:not([collapsed="true"]) { + /* Workaround bug 451997 and/or bug 492645 */ + display: block; +} + + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .labels-wrapper > .line2-label > span { + /* The font-family is only adjusted on the inner span so that the + line-height of .line2-label matches that of .line1-label */ + font-family: monospace; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .labels-wrapper > .generated-password-autosave > span { + /* The font-* properties are only adjusted on the inner span so that the + line-height of .generated-password-autosave matches that of .line1-label */ + font-style: italic; + font-size: 0.85em; + white-space: normal; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] + richlistitem[originaltype="generatedPassword"], +#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] + richlistitem[originaltype="generatedPassword"] { + /* Separator between logins and generated passwords. This uses --panel-separator-color from default + * themes since autocomplete doesn't yet switch to dark. */ + border-top: 1px solid hsla(210,4%,10%,.14); +} + +/* Insecure field warning */ +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] { + background-color: var(--arrowpanel-dimmed); + border-bottom: 1px solid var(--panel-separator-color); + padding-block: 4px; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] { + background-color: var(--arrowpanel-dimmed-further); + color: -moz-DialogText; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title { + color: var(--grey-60); + font-size: 1em; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title .ac-emphasize-text-title { + font-weight: 600; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title { + color: inherit; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon { + list-style-image: url(chrome://global/skin/icons/security-broken.svg); + -moz-context-properties: fill; + fill: var(--grey-60); +} diff --git a/browser/themes/shared/blockedSite.css b/browser/themes/shared/blockedSite.css new file mode 100644 index 0000000000..568ae6c2c8 --- /dev/null +++ b/browser/themes/shared/blockedSite.css @@ -0,0 +1,71 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/error-pages.css"); + +@media not (prefers-contrast) { + :root { + --in-content-page-background: #A4000F; + --in-content-page-color: white; + --in-content-text-color: white; + --in-content-primary-button-text-color: black; + --in-content-button-background: transparent; + --in-content-button-background-hover: #5a0002; + --in-content-button-background-active: #3e0200; + --in-content-primary-button-background: white; + --in-content-primary-button-background-hover: rgba(255, 255, 255, 0.8); + --in-content-primary-button-background-active: rgba(255, 255, 255, 0.7); + } +} + +.title { + background-image: url("chrome://global/skin/icons/blocked.svg"); +} + +.button-container button { + border: 1px solid white; + margin-inline-end: 0; + margin-top: 1.5em; +} + +#advisory_provider { + text-decoration: underline; +} + +#errorDescriptionContainer { + position: absolute; + margin: 48px auto; +} + +.error-description { + min-width: var(--in-content-container-min-width); + max-width: var(--in-content-container-max-width); + color: black; + background-color: white; +} + +.error-description > p:first-child { + padding: 3.5em 3.5em 1em; +} + +.error-description > p:last-child { + padding: 0 3.5em 3.5em; +} + +.error-description #ignore_warning_link, +.error-description a:is(:link, :visited) { + cursor: pointer; + text-decoration: underline; + color: black; +} + +a:not(:link) { + color: black; + text-decoration: none; + cursor: auto; +} + +.sitename { + font-weight: bold; +} diff --git a/browser/themes/shared/browser-custom-colors.css b/browser/themes/shared/browser-custom-colors.css new file mode 100644 index 0000000000..ef472da578 --- /dev/null +++ b/browser/themes/shared/browser-custom-colors.css @@ -0,0 +1,64 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +@media not (prefers-contrast) { + :root:not(:-moz-lwtheme) { + --button-primary-bgcolor: rgb(0,97,224); + --button-primary-hover-bgcolor: rgb(2,80,187); + --button-primary-active-bgcolor: rgb(5,62,148); + --button-primary-color: rgb(251,251,254); + --button-bgcolor: rgba(207,207,216,.33); + --button-hover-bgcolor: rgba(207,207,216,.66); + --button-active-bgcolor: rgb(207,207,216); + --button-color: rgb(21,20,26); + + --focus-outline-color: var(--button-primary-bgcolor); + + --checkbox-border-color: var(--input-border-color); + --checkbox-unchecked-bgcolor: var(--button-bgcolor); + --checkbox-unchecked-hover-bgcolor: var(--button-hover-bgcolor); + --checkbox-unchecked-active-bgcolor: var(--button-active-bgcolor); + --checkbox-checked-border-color: transparent; + --checkbox-checked-bgcolor: var(--button-primary-bgcolor); + --checkbox-checked-color: var(--button-primary-color); + --checkbox-checked-hover-bgcolor: var(--button-primary-hover-bgcolor); + --checkbox-checked-active-bgcolor: var(--button-primary-active-bgcolor); + + --arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent); + --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent); + --panel-disabled-color: color-mix(in srgb, currentColor 40%, transparent); + --panel-shortcut-color: rgb(91,91,102); + + --input-color: rgb(21,20,26); + --input-bgcolor: rgb(255,255,255); + --input-border-color: color-mix(in srgb, currentColor 41%, transparent); + + --tab-selected-bgcolor: rgb(255,255,255); + --tab-icon-overlay-stroke: rgb(255,255,255); + --tab-icon-overlay-fill: rgb(91,91,102); + --toolbar-color: rgb(21,20,26); + --toolbar-non-lwt-bgcolor: #f9f9fb; + --toolbar-non-lwt-textcolor: rgb(21, 20, 26); + --toolbarbutton-icon-fill: rgb(91,91,102); + --toolbarbutton-icon-fill-attention: rgb(0,97,224); + + --urlbar-popup-action-color: rgb(91,91,102); + --urlbar-popup-url-color: rgb(0,97,224); + --urlbar-icon-fill-opacity: 0.72; + + --autocomplete-popup-separator-color: rgb(240,240,244); + --toolbar-field-border-color: transparent; + --arrowpanel-border-color: rgb(240,240,244); + --chrome-content-separator-color: rgb(204,204,204); + + --toolbar-field-background-color: rgb(240,240,244); + --toolbar-field-color: rgb(21,20,26); + + --autocomplete-popup-highlight-background: #e0e0e6; + --autocomplete-popup-highlight-color: rgb(21,20,26); + --autocomplete-popup-hover-background: rgb(240,240,244); + } +} diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css new file mode 100644 index 0000000000..b5d7f54d7e --- /dev/null +++ b/browser/themes/shared/browser-shared.css @@ -0,0 +1,897 @@ +/* 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://browser/skin/downloads/indicator.css"); +@import url("chrome://browser/skin/addons/extension-controlled.css"); +@import url("chrome://browser/skin/addons/unified-extensions.css"); +@import url("chrome://browser/skin/toolbarbuttons.css"); +@import url("chrome://browser/skin/toolbarbutton-icons.css"); +@import url("chrome://browser/skin/menupanel.css"); +@import url("chrome://browser/skin/urlbar-searchbar.css"); +@import url("chrome://browser/skin/identity-block/identity-block.css"); +@import url("chrome://browser/skin/notification-icons.css"); +@import url("chrome://browser/skin/addon-notification.css"); +@import url("chrome://browser/skin/identity-credential-notification.css"); +@import url("chrome://browser/skin/urlbarView.css"); +@import url("chrome://browser/skin/translation/infobar.css"); +@import url("chrome://browser/skin/autocomplete.css"); +@import url("chrome://browser/skin/places/editBookmarkPanel.css"); +@import url("chrome://browser/skin/sidebar.css"); +@import url("chrome://browser/skin/tabs.css"); +@import url("chrome://browser/skin/fullscreen/warning.css"); +@import url("chrome://browser/skin/ctrlTab.css"); +@import url("chrome://browser/skin/customizableui/customizeMode.css"); +@import url("chrome://browser/skin/UITour.css"); + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor); + --toolbar-color: var(--toolbar-non-lwt-textcolor); + --toolbarbutton-border-radius: 4px; + + --tabs-navbar-shadow-size: 1px; + + --panel-shortcut-color: inherit; + --panelui-subview-transition-duration: 150ms; + + --short-notification-background: #0250BB; + --short-notification-gradient: #9059FF; + + --button-bgcolor: color-mix(in srgb, currentColor 13%, transparent); + --button-hover-bgcolor: color-mix(in srgb, currentColor 17%, transparent); + --button-active-bgcolor: color-mix(in srgb, currentColor 30%, transparent); + --button-color: currentColor; + --button-primary-bgcolor: AccentColor; + --button-primary-hover-bgcolor: color-mix(in srgb, black 10%, AccentColor); + --button-primary-active-bgcolor: color-mix(in srgb, black 20%, AccentColor); + --button-primary-color: AccentColorText; + + --buttons-destructive-bgcolor: #e22850; + --buttons-destructive-hover-bgcolor: #c50042; + --buttons-destructive-active-bgcolor: #810220; + --buttons-destructive-color: #fbfbfe; + + --checkbox-unchecked-bgcolor: var(--button-bgcolor); + --checkbox-unchecked-hover-bgcolor: var(--button-hover-bgcolor); + --checkbox-unchecked-active-bgcolor: var(--button-active-bgcolor); + --checkbox-checked-border-color: transparent; + --checkbox-checked-bgcolor: var(--button-primary-bgcolor); + --checkbox-checked-color: var(--button-primary-color); + --checkbox-checked-hover-bgcolor: var(--button-primary-hover-bgcolor); + --checkbox-checked-active-bgcolor: var(--button-primary-active-bgcolor); + + --autocomplete-popup-hover-background: var(--arrowpanel-dimmed); + --autocomplete-popup-separator-color: color-mix(in srgb, currentColor 14%, transparent); + + --identity-box-margin-inline: 4px; + --urlbar-box-bgcolor: var(--button-bgcolor); + --urlbar-box-focus-bgcolor: var(--button-bgcolor); + --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor); + --urlbar-box-active-bgcolor: var(--button-active-bgcolor); + --urlbar-box-text-color: inherit; + --urlbar-box-hover-text-color: var(--urlbar-box-text-color); + --urlbar-min-height: 32px; + --urlbar-icon-fill-opacity: 0.9; + --urlbar-icon-padding: 6px; /* (32px - 2px border - 2px padding - 16px icon) / 2 */ + /* This should be used for icons and chiclets inside the input field. It makes + the gap around them more uniform when they are close to the field edges */ + --urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) - 1px); + --urlbar-popup-url-color: -moz-nativehyperlinktext; + + --lwt-additional-images: none; + --lwt-background-alignment: right top; + --lwt-background-tiling: no-repeat; + --lwt-brighttext-url-color: #00ddff; + + --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67); + + -moz-box-layout: flex; +} + +:root:-moz-lwtheme { + --checkbox-border-color: color-mix(in srgb, currentColor 41%, transparent); +} + +@media (prefers-contrast) { + :root { + --autocomplete-popup-separator-color: color-mix(in srgb, currentColor 86%, transparent); + --urlbar-icon-fill-opacity: 1; + --checkbox-checked-border-color: var(--checkbox-checked-bgcolor); + } +} + +:root[uidensity=compact] { + --urlbar-min-height: 26px; + --urlbar-icon-padding: 3px; /* (26px - 2px border - 2px padding - 16px icon) / 2 */ +} + +:root[uidensity=touch] { + --urlbar-min-height: 34px; + --urlbar-icon-padding: 7px; /* (34px - 2px border - 2px padding - 16px icon) / 2 */ +} + +:root:-moz-lwtheme { + --toolbar-bgcolor: rgba(255,255,255,.4); + --toolbar-color: var(--lwt-text-color, inherit); + + color: var(--lwt-text-color); +} + +@media not (prefers-contrast) { + :root:-moz-lwtheme { + --focus-outline-color: #0061E0; + } + + @media (prefers-color-scheme: dark) { + :root:-moz-lwtheme { + --focus-outline-color: #00DDFF; + } + } +} + +/* Increase the contrast of urlbar boxes in dark mode. + In practice these are bumped-up --button(-hover)-bgcolor rules */ +@media (prefers-color-scheme: dark) { + :root { + --urlbar-box-bgcolor: color-mix(in srgb, currentColor 16%, transparent); + --urlbar-box-focus-bgcolor: color-mix(in srgb, currentColor 16%, transparent); + --urlbar-box-hover-bgcolor: color-mix(in srgb, currentColor 22%, transparent); + } +} + +@media (min-resolution: 1.5dppx) { + :root { + --tabs-navbar-shadow-size: 0.5px; + } +} + +@media (min-resolution: 3dppx) { + :root { + --tabs-navbar-shadow-size: 0.33px; + } +} + +/* Set link color with proper contrast for WebExt themes */ + +toolbar .text-link:-moz-lwtheme, +panel .text-link:-moz-lwtheme { + color: #0060df; +} + +toolbar[brighttext] .text-link:-moz-lwtheme, +:root[lwt-popup-brighttext] panel .text-link { + color: var(--lwt-brighttext-url-color); +} + +toolbar .text-link:-moz-lwtheme:not(:hover), +panel .text-link:-moz-lwtheme:not(:hover) { + text-decoration: none; +} + +/* Toolbar / content area border */ + +#navigator-toolbox { + border-bottom: 1px solid var(--chrome-content-separator-color); +} + +:root[customizing] #navigator-toolbox { + border-bottom-style: none; +} + +/* Add space to beginning of toolbar and make that space click the first */ +#nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child, +#nav-bar-customization-target > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) { + padding-inline-start: var(--toolbar-start-end-padding); +} + +:root[sessionrestored] #nav-bar:-moz-lwtheme { + transition: var(--ext-theme-background-transition); +} + +/* Bookmark toolbar */ + +#PersonalToolbar { + overflow: clip; + max-height: 4em; + padding-inline: 6px; +} + +:root[uidensity=compact] #PersonalToolbar { + padding-inline: 2px; +} + +:root[sessionrestored] #PersonalToolbar:not(.instant) { + transition: min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition); +} + +#PersonalToolbar[collapsed=true] { + min-height: 0; + max-height: 0; +} + +:root[sessionrestored] #PersonalToolbar:not(.instant)[collapsed=true] { + transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear; +} + +#PersonalToolbar[collapsed=false]:not([initialized]) > #personal-toolbar-empty { + visibility: hidden; +} + +/* + * Make the empty bookmarks toolbar message take up no horizontal space. + * This avoids two issues: + * 1) drag/drop of urls/bookmarks to the toolbar not working, because they land + * on the personal-toolbar-empty element. + * 2) buttons in the toolbar moving horizontally while the window opens, + * because the element is first shown at full width and then completely + * hidden. + * TODO(emilio): The comment above was never quite true (the message did take + * horizontal space, see bug 1812636). Figure out how much of this rule is + * really needed. + */ +#PersonalToolbar[collapsed=false] > #personal-toolbar-empty[nowidth] > #personal-toolbar-empty-description { + margin-inline: 0; + min-width: 0; + white-space: nowrap; + position: relative; + z-index: 1; +} + +#PersonalToolbar[collapsed=true].instant { + visibility: collapse; +} + +#PersonalToolbar[customizing] { + outline: 1px dashed; + outline-offset: -3px; +} + +#PersonalToolbar[customizing]:empty { + /* Avoid the toolbar having no height when there's no items in it */ + min-height: 22px; +} + +#PlacesToolbarDropIndicator { + list-style-image: url(chrome://browser/skin/toolbar-drag-indicator.svg); + pointer-events: none; +} + +/* rules for menupopup drop indicators */ +menupopup::part(drop-indicator-container) { + /* TODO(emilio): When menupopups get ported to modern flex layout we can + * probably simplify this substantially, by making the indicator position: + * absolute or so (which was never properly supported in XUL). The container + * should become completely unnecessary then. */ + -moz-box-flex: 1; + min-width: 0; + min-height: 0; +} + +menupopup::part(drop-indicator-bar) { + position: relative; + /* these two margins must together compensate the indicator's height */ + margin-block: -1px; +} + +menupopup::part(drop-indicator) { + list-style-image: none; + height: 2px; + margin-inline-end: -4em; + background-color: SelectedItem; + pointer-events: none; +} + +/* Back / Forward context menu */ + +.unified-nav-back, +.unified-nav-forward { + -moz-context-properties: fill; + fill: currentColor; +} + +.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr), +.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) { + list-style-image: url("chrome://browser/skin/back.svg") !important; +} + +.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr), +.unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) { + list-style-image: url("chrome://browser/skin/forward.svg") !important; +} + +/* Find bar */ + +.browserContainer > findbar { + background-color: var(--toolbar-non-lwt-bgcolor); + color: var(--toolbar-non-lwt-textcolor); + text-shadow: none; +} + +:root:not([lwtheme-image]) .browserContainer > findbar:-moz-lwtheme { + background-color: var(--lwt-accent-color); + background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)); + border-top-color: var(--chrome-content-separator-color); + color: var(--toolbar-color); +} + +:root:not([lwtheme-image]) .browserContainer > findbar:-moz-lwtheme:-moz-window-inactive { + background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); +} + +/* Private browsing indicator */ + +.private-browsing-indicator { + background-image: url("chrome://global/skin/icons/indicator-private-browsing.svg"); + background-repeat: no-repeat; + background-size: 100% auto; + background-position: center; + width: 24px; + margin-inline: 7px; + position: relative; + /* Need to ensure this gets positioned on top of the position:relative #navigator-toolbox + * in case the dark/light themes give that item a background. */ + z-index: 1; +} + +/* New Private Browsing Indicator */ + +#private-browsing-indicator-with-label { + -moz-box-align: center; + margin-inline: 7px; +} + +.private-browsing-indicator-icon { + list-style-image: url("chrome://global/skin/icons/indicator-private-browsing.svg"); + width: 16px; + height: 16px; +} + +:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator, +:root[privatebrowsingnewindicator] .private-browsing-indicator, +:root:not([privatebrowsingnewindicator]) #private-browsing-indicator-with-label, +:root:not([privatebrowsingmode=temporary]) #private-browsing-indicator-with-label { + display: none; +} + +/* End private browsing indicator */ + +/* Override theme colors since the picker uses extra colors that + themes cannot set */ +#DateTimePickerPanel { + --arrowpanel-background: Field; + --arrowpanel-color: FieldText; + --arrowpanel-border-color: ThreeDShadow; +} + +#DateTimePickerPanel[side="top"], +#DateTimePickerPanel[side="bottom"] { + margin-inline: 0; +} + +#widget-overflow .webextension-popup-browser { + background: #fff; + + /* height set via JS can be lower than the stack min-height, + ensure the browser takes up at least that min-height */ + min-height: 100%; +} + +#addon-progress-notification-progressmeter { + margin: 2px 4px; +} + +/* Contextual Feature Recommendation popup-notification */ + +#cfr-notification-header { + width: 100%; + display: block; + text-align: center; + box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2); +} + +#cfr-notification-header-stack { + width: 100%; +} + +#cfr-notification-header-label { + margin: 9px; + font-weight: 600; +} + +#cfr-notification-header-link { + margin: 7px; + color: inherit; + cursor: default; + justify-self: end; +} + +#cfr-notification-header-image { + width: 19px; + height: 19px; + padding: 2px; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.6; + list-style-image: url(chrome://global/skin/icons/help.svg); +} + +#cfr-notification-header-image:hover { + background-color: hsla(0,0%,70%,.2); + border-radius: 2px; +} + +#contextual-feature-recommendation-notification { + width: 400px; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] { + background: radial-gradient(circle farthest-side at top right, var(--short-notification-gradient), var(--short-notification-background)); + width: unset; + max-width: 700px; + overflow-wrap: break-word; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"]:-moz-locale-dir(rtl) { + background: radial-gradient(circle farthest-side at top left, var(--short-notification-gradient), var(--short-notification-background)); +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-body-container, +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-footer-container, +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] #cfr-notification-header-link { + display: none; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] #cfr-notification-header { + box-shadow: none; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] description { + font-weight: 400; + margin: unset; + margin-inline: 12px; + transform: translateY(50%); +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-button-container, +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-header-container { + display: inline-flex; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-button-container { + float: inline-end; + background-color: transparent; + flex-direction: row-reverse; + /* Override proton-doorhanger default styles that increase the size of the button */ + margin: 0; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-primary-button { + background-color: rgba(216, 216, 216, 0.2); + color: white; + border: none; + border-radius: 2px; + margin: 4px; + padding: 3px 12px; + flex: 1; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-primary-button:after { + content: url(chrome://global/skin/icons/arrow-left-12.svg); + -moz-context-properties: fill; + fill: currentColor; + transform: translateY(2px); + float: inline-end; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"]:-moz-locale-dir(ltr) .popup-notification-primary-button:after { + content: url(chrome://global/skin/icons/arrow-right-12.svg); +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-primary-button:hover { + background-color: rgba(216, 216, 216, 0.4); +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-primary-button:active { + background-color: rgba(216, 216, 216, 0.5); +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-secondary-button { + margin: 3px; + border: none; + border-radius: 2px; + background-image: url(chrome://global/skin/icons/close.svg); + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + background-size: 10px; + -moz-context-properties: fill; + fill: white; + height: 22px; + width: 22px; + padding: 0; + align-self: center; + flex: none; + font-size: 0; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-secondary-button:hover { + background-color: rgba(216, 216, 216, 0.4); +} + + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-header-container { + color: white; + max-width: unset; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_SOCIAL_TRACKING_PROTECTION"] { + width: 386px; +} + +#contextual-feature-recommendation-notification .popup-notification-icon { + margin-inline-end: 4px; +} + +#contextual-feature-recommendation-notification .cfr-doorhanger-large-icon { + width: 64px; + height: 64px; + margin-inline-end: 12px; +} + +#contextual-feature-recommendation-notification .popup-notification-body-container { + width: 100%; + padding-bottom: 2px; +} + +#contextual-feature-recommendation-notification popupnotificationcontent { + margin-top: 0; +} + +#contextual-feature-recommendation-notification description { + margin-bottom: 0; +} + +#cfr-notification-footer-text-and-addon-info { + display: block; + padding: 10px var(--arrowpanel-padding); +} + +#contextual-feature-recommendation-notification[data-notification-category="addon_recommendation"] #cfr-notification-feature-steps, +#contextual-feature-recommendation-notification[data-notification-category="icon_and_message"] .popup-notification-footer-container { + display: none; +} + +/* + * `icon_and_message` CFR doorhanger with: icon, title and subtitle. + * No panel header is shown + */ +#contextual-feature-recommendation-notification[data-notification-category="icon_and_message"] #cfr-notification-header { + display: none; +} + +#contextual-feature-recommendation-notification[data-notification-category="icon_and_message"] .popup-notification-description { + font-weight: 600; + margin-bottom: 15px; +} + +#contextual-feature-recommendation-notification[data-notification-category="icon_and_message"] popupnotificationcontent { + display: block; /* This forces the subtitle content to wrap */ +} + + +#cfr-notification-feature-steps { + display: flex; + flex-direction: column; + margin-top: 10px; +} + +#cfr-notification-feature-steps li { + margin-inline-start: 10px; + position: relative; + display: list-item; +} + +#cfr-notification-feature-steps li:not(:last-child) { + margin-bottom: 5px; +} + +#cfr-notification-footer-text, +#cfr-notification-footer-users, +#cfr-notification-footer-learn-more-link { + margin: 0; +} + +#cfr-notification-footer-addon-info { + align-items: center; + display: flex; + margin-block: 10px 6px; +} + +#cfr-notification-footer-filled-stars, +#cfr-notification-footer-empty-stars { + -moz-context-properties: fill, fill-opacity; + background-image: url(chrome://browser/skin/bookmark.svg); + fill: currentColor; + fill-opacity: 0.7; + height: 16px; +} + +#cfr-notification-footer-filled-stars:-moz-locale-dir(rtl), +#cfr-notification-footer-empty-stars { + background-position-x: right; +} + +#cfr-notification-footer-filled-stars, +#cfr-notification-footer-empty-stars:-moz-locale-dir(rtl) { + background-position-x: left; +} + +#cfr-notification-footer-empty-stars[tooltiptext] { + margin-inline-end: 6px; + opacity: 0.3; +} + +#cfr-notification-footer-users { + opacity: 0.7; +} + +#cfr-notification-footer-spacer { + flex-grow: 1; +} + +#content-mask { + background: rgba(0, 0, 0, 0.5); +} + +/* nhnt11: Workaround to insert a linebreak after the DoH doorhanger's title. + * The title uses the inline html|b that usually contains the hostname for + * permission prompts to achieve bold formatting. This is always the 2nd child. + */ +.popup-notification-description[popupid="doh-first-time"] > html|b:first-of-type { + display: block; + margin-bottom: 4px; /* matches the margin-bottom on description elements */ +} + +/* Password Manager Doorhanger */ + +.ac-dropmarker { + appearance: none; + justify-self: end; + margin-inline-end: 8px; + align-self: center; +} + +.ac-dropmarker::part(icon) { + list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg); + -moz-context-properties: fill; + fill: var(--input-color, -moz-DialogText); +} + +.ac-has-end-icon { + text-overflow: ellipsis; + overflow: hidden; +} + +/* ENABLE DEVTOOLS POPUP */ +@media (-moz-platform: macos), (-moz-platform: windows) { + #enable-devtools-popup { + font-size: 1.18em; + } +} + +#sharing-tabs-warning-panel > hbox[type="window"] > vbox > label > #sharing-warning-screen-panel-header, +#sharing-tabs-warning-panel > hbox[type="screen"] > vbox > label > #sharing-warning-window-panel-header { + display: none; +} + +#sharing-tabs-warning-panel { + max-width: 400px; +} + +#sharing-warning-proceed-to-tab { + appearance: none; + border-style: none; + margin: 0; + background-color: rgb(0,96,223); + color: rgb(255,255,255); + border-radius: 5px; + padding: 10px; + margin-top: 15px; + margin-bottom: 10px; +} + +#sharing-warning-proceed-to-tab:hover { + background-color: rgb(0,62,170); +} + +.webRTC-selectDevice-selector-container { + display: flex; + align-items: center; +} + +.webRTC-selectDevice-selector-container > menulist { + flex: 1; + min-width: 0; +} + +popupnotificationcontent { + margin-block-start: 8px; +} + +/** + * Our OS integration code toggles whether system colors should return light or + * dark values based on the luminosity of the toolbar background. Because themes + * can style panels to have a different background color than the toolbar, we + * need specific overrides for system colors used in light or dark themes. + */ +.popup-notification-body:-moz-lwtheme { + color-scheme: light; +} + +:root[lwt-popup-brighttext] .popup-notification-body { + color-scheme: dark; +} + +.popup-notification-body menulist { + margin: 0; +} + +.popup-notification-checkbox { + margin-block: 12px 0; +} + +.popup-notification-body-container { + padding-block-end: 0; +} + +#webRTC-selectCamera-label, +#webRTC-selectMicrophone-label { + display: none; +} + +.webRTC-selectDevice-icon { + -moz-context-properties: fill; + fill: currentColor; + margin-inline-end: 8px; + /* Setting width explicitly so it's still visible if the device label is very long */ + width: 16px; +} + +#webRTC-selectCamera-icon { + list-style-image: url("chrome://browser/skin/notification-icons/camera.svg"); +} + +#webRTC-selectMicrophone-icon { + list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg"); +} + +#webRTC-selectSpeaker-icon { + list-style-image: url("chrome://global/skin/media/audio.svg"); +} + +.popup-notification-body :is(description, label:not(.learnMore), checkbox, input) { + margin-inline: 0; +} + +.popup-notification-body input { + padding: 8px; + border-radius: 4px; + border: 0; + outline: 1px solid var(--input-border-color, ThreeDShadow); + outline-offset: -1px; + background-color: var(--input-bgcolor, Field); + color: var(--input-color, FieldText); +} + +.popup-notification-body input.ac-has-end-icon { + --input-padding-from-arrow-side: calc(8px + 16px + 8px); /* spacing from the end + arrow element width + extra spacing) */ + padding-inline-end: var(--input-padding-from-arrow-side); +} + +/* Avoid overlapping the text on the arrow icon when switching input text direction */ +.popup-notification-body:-moz-locale-dir(rtl) input.ac-has-end-icon:dir(ltr) { + padding-left: var(--input-padding-from-arrow-side); + padding-right: 8px; +} +.popup-notification-body:-moz-locale-dir(ltr) input.ac-has-end-icon:dir(rtl) { + padding-right: var(--input-padding-from-arrow-side); + padding-left: 8px; +} + +.popup-notification-body input:focus-visible { + outline: 2px solid var(--focus-outline-color); +} + +/** + * There's already a margin-block-start of 8px on popupnotificationcontent, + * so the first label only needs 8px of margin-block-start to match the + * spec. + */ +.password-notification-label:first-of-type { + margin-block-start: 8px; +} + +.password-notification-label:not(:first-of-type) { + margin-block-start: 16px; +} + +#password-notification-visibilityToggle { + margin-block-start: 14px; +} + +#password-notification-visibilityToggle > .checkbox-label-box > .checkbox-label { + opacity: 0.7; +} + +.popup-notification-description > b { + font-weight: inherit; +} + +.popup-notification-description { + font-weight: 600; + margin-top: 0; +} + +#tab-notification-deck { + display: block; +} + +.relay-integration-header { + display: flex; + align-items: center; + font-size: 2em; +} + +.relay-integration-header > div { + width: 32px; + height: 32px; + background-image: url("chrome://browser/content/logos/relay.svg"); + background-repeat: no-repeat; +} + +.relay-integration-header > span:first-of-type { + font-weight: bold; + margin-inline-start: 8px; +} + +.relay-integration-header > span:last-of-type { + font-weight: normal; + white-space: pre; +} + +.popup-notification-description[popupid="relay-integration-offer-notification"] > html|div:first-of-type { + font-weight: normal; + display: grid; + grid-template-columns: auto; + grid-template-rows: auto auto auto auto; +} + +#relay-integration-reuse-masks-notification > popupnotificationcontent > div { + font-weight: normal; + display: grid; + grid-template-columns: auto; + grid-template-rows: auto auto auto auto; +} + +.reusable-relay-masks { + display: flex; + flex-direction: column; +} + +.reusable-relay-masks > button { + padding: 4px; + margin: 4px; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.reusable-relay-masks > button > span:first-child { + margin-inline-end: 20px; +} + +.reusable-relay-masks > button > span:last-child { + opacity: 0.6; +} diff --git a/browser/themes/shared/contextmenu.css b/browser/themes/shared/contextmenu.css new file mode 100644 index 0000000000..b0ace28d12 --- /dev/null +++ b/browser/themes/shared/contextmenu.css @@ -0,0 +1,59 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +#context-navigation > .menuitem-iconic { + -moz-box-flex: 1; + -moz-box-pack: center; + -moz-box-align: center; +} + +#context-navigation > .menuitem-iconic > .menu-iconic-left { + appearance: none; +} + +#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { + width: 1.25em; + height: auto; + margin: 7px; + -moz-context-properties: fill; + fill: currentColor; +} + +#context-back { + list-style-image: url("chrome://browser/skin/back.svg"); +} + +#context-forward { + list-style-image: url("chrome://browser/skin/forward.svg"); +} + +#context-reload { + list-style-image: url("chrome://global/skin/icons/reload.svg"); +} + +#context-stop { + list-style-image: url("chrome://global/skin/icons/close.svg"); +} + +#context-bookmarkpage { + list-style-image: url("chrome://browser/skin/bookmark-hollow.svg"); +} + +#context-bookmarkpage[starred=true] { + list-style-image: url("chrome://browser/skin/bookmark.svg"); +} + +#context-back:-moz-locale-dir(rtl), +#context-forward:-moz-locale-dir(rtl), +#context-reload:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +#context-media-eme-learnmore { + list-style-image: url("chrome://browser/skin/drm-icon.svg"); + -moz-context-properties: fill; + fill: currentColor; +} diff --git a/browser/themes/shared/controlcenter/3rdpartycookies.svg b/browser/themes/shared/controlcenter/3rdpartycookies.svg new file mode 100644 index 0000000000..4477d1b43e --- /dev/null +++ b/browser/themes/shared/controlcenter/3rdpartycookies.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/controlcenter/cryptominers.svg b/browser/themes/shared/controlcenter/cryptominers.svg new file mode 100644 index 0000000000..9486ae76de --- /dev/null +++ b/browser/themes/shared/controlcenter/cryptominers.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/controlcenter/dashboard.svg b/browser/themes/shared/controlcenter/dashboard.svg new file mode 100644 index 0000000000..e2908d9485 --- /dev/null +++ b/browser/themes/shared/controlcenter/dashboard.svg @@ -0,0 +1,4 @@ + + diff --git a/browser/themes/shared/controlcenter/etp-milestone.svg b/browser/themes/shared/controlcenter/etp-milestone.svg new file mode 100644 index 0000000000..c9dd70954a --- /dev/null +++ b/browser/themes/shared/controlcenter/etp-milestone.svg @@ -0,0 +1,4 @@ + + diff --git a/browser/themes/shared/controlcenter/hero-message-background.svg b/browser/themes/shared/controlcenter/hero-message-background.svg new file mode 100644 index 0000000000..d54f1cbc4a --- /dev/null +++ b/browser/themes/shared/controlcenter/hero-message-background.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/controlcenter/mcb-disabled.svg b/browser/themes/shared/controlcenter/mcb-disabled.svg new file mode 100644 index 0000000000..b9396a8e2a --- /dev/null +++ b/browser/themes/shared/controlcenter/mcb-disabled.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/controlcenter/panel.css b/browser/themes/shared/controlcenter/panel.css new file mode 100644 index 0000000000..2c24550951 --- /dev/null +++ b/browser/themes/shared/controlcenter/panel.css @@ -0,0 +1,825 @@ +/* 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/. */ + +/* Hide all conditional elements by default. */ +:is([when-connection],[when-customroot],[when-mixedcontent],[when-ciphers],[when-httpsonlystatus]) { + display: none; +} + +#identity-popup, +#permission-popup, +#protections-popup { + --popup-width: 30.81em; + /* Set default fill for icons in the identity popup. + Individual icons can override this. */ + fill: currentColor; + --horizontal-padding: calc(var(--arrowpanel-menuitem-padding-inline) * 2); + --vertical-section-padding: 0.9em; + --height-offset: 0px; + font: menu; +} + +#protections-popup[toast] { + --popup-width: 27.12em; +} + +#protections-popup[infoMessageShowing] { + --height-offset: 260px; +} + +/* This is used by screenshots tests to hide intermittently different + * identity popup shadows (see bug 1425253). */ +#identity-popup.no-shadow, +#permission-popup.no-shadow { + -moz-window-shadow: none; +} + +/* Show the right elements for the right connection states. */ +#identity-popup[customroot=true] [when-customroot=true], +#identity-popup[connection=not-secure] [when-connection~=not-secure], +#identity-popup[connection=secure-cert-user-overridden] [when-connection~=secure-cert-user-overridden], +#identity-popup[connection=secure-ev] [when-connection~=secure-ev], +#identity-popup[connection=secure] [when-connection~=secure], +#identity-popup[connection=chrome] [when-connection~=chrome], +#identity-popup[connection=file] [when-connection~=file], +#identity-popup[connection=extension] [when-connection~=extension], +#identity-popup[connection=cert-error-page] [when-connection~=cert-error-page], +#identity-popup[connection=net-error-page] [when-connection~=net-error-page], +#identity-popup[connection=https-only-error-page] [when-connection~=https-only-error-page], +/* Show weak cipher messages when needed. */ +#identity-popup[ciphers=weak] [when-ciphers~=weak], +/* Show mixed content warnings when needed */ +#identity-popup[mixedcontent~=active-loaded] [when-mixedcontent=active-loaded], +#identity-popup[mixedcontent~=passive-loaded]:not([mixedcontent~=active-loaded]) [when-mixedcontent=passive-loaded], +#identity-popup[mixedcontent~=active-blocked]:not([mixedcontent~=passive-loaded]) [when-mixedcontent=active-blocked], +/* Show the right elements when there is mixed passive content loaded and active blocked. */ +#identity-popup[mixedcontent~=active-blocked][mixedcontent~=passive-loaded] [when-mixedcontent~=active-blocked][when-mixedcontent~=passive-loaded], +/* HTTPS-Only Mode */ +#identity-popup[httpsonlystatus=exception] [when-httpsonlystatus~=exception], +#identity-popup[httpsonlystatus=upgraded] [when-httpsonlystatus~=upgraded], +#identity-popup[httpsonlystatus=failed-top] [when-httpsonlystatus~=failed-top], +#identity-popup[httpsonlystatus=failed-sub] [when-httpsonlystatus~=failed-sub], +/* Show 'disable MCB' button always when there is mixed active content blocked. */ +#identity-popup-securityView-extended-info[mixedcontent~=active-blocked] > button[when-mixedcontent=active-blocked] { + display: revert; +} + +/* Hide 'not secure' message in subview when weak cipher or mixed content messages are shown. */ +#identity-popup-securityView-extended-info:is([mixedcontent],[ciphers]) > description[when-connection=not-secure], +/* Hide 'passive-loaded (only)' message when there is mixed passive content loaded and active blocked. */ +#identity-popup-securityView-extended-info[mixedcontent~=passive-loaded][mixedcontent~=active-blocked] > description[when-mixedcontent=passive-loaded] { + display: none; +} + +/* Make sure hidden elements don't accidentally become visible from one of the + above selectors (see Bug 1194258) */ +#identity-popup [hidden] { + display: none !important; +} + +#identity-popup-mainView, +#permission-popup-mainView, +#protections-popup-mainView { + min-width: var(--popup-width); + max-width: var(--popup-width); +} + +#protections-popup[toast] #protections-popup-mainView > :not(#protections-popup-mainView-panel-header-section), +#protections-popup[toast] #protections-popup-mainView-panel-header-section > :not(#protections-popup-mainView-panel-header), +#protections-popup[toast] #protections-popup-mainView-panel-header > :is(.panel-info-button, #protections-popup-main-header-label) { + /* Hide all elements in the panel except for the toast descriptions */ + display: none; +} + +#protections-popup[toast] #protections-popup-mainView-panel-header { + min-height: unset; /* revert panelUI-shared.css */ +} + +#identity-popup-security-description > description { + font-weight: 600; + margin-top: 0.5em; +} + +#identity-popup-security-httpsonlymode { + margin-top: 1em; +} + +#identity-popup-security-httpsonlymode-menulist { + text-overflow: ellipsis; + overflow: hidden; + width: 11em; + margin: 0.5em 0; +} + +#identity-popup-security-httpsonlymode-info { + font-size: 0.85em; + color: var(--panel-description-color); +} + +#identity-popup-security-httpsonlymode-info > description { + margin-bottom: 0.5em; +} + +#permission-popup-permissions-content { + padding-inline: 1.25em; + min-width: 0; +} + +/* CONTENT */ + +:where(#protections-popup, #identity-popup) :is(description, label) { + margin: 0; +} + +#protections-popup .panel-header > h1 > span, +#permission-popup .panel-header > h1 > span, +#identity-popup .panel-header > h1 > span { + /* This is needed for the overflow-wrap to work correctly when the domain name is really long. */ + max-width: calc(var(--popup-width) - 2 * var(--arrowpanel-menuitem-margin-inline)); + overflow-wrap: break-word; +} + +#protections-popup .panel-header > h1 > span { + /* The protections popup panel header text needs a different calculation because it contains an info button. + * icon-full-width and icon-margin are included twice to compensate for the margin-inline-start of the text, + * used to center it even if the header includes a info button. See .panel-header-with-info-button */ + max-width: calc(var(--popup-width) + - var(--arrowpanel-menuitem-margin-inline) * 2 + - var(--arrowpanel-header-info-icon-full-width) * 2 + - var(--arrowpanel-header-info-icon-margin-inline-end) * 2); +} + +#identity-popup .panel-header > .subviewbutton-back + h1 > span { + /* Same idea as above, but in the identity popup when there's a back button. */ + max-width: calc(var(--popup-width) + - var(--arrowpanel-menuitem-margin-inline) * 2 + - var(--arrowpanel-header-back-icon-full-width) * 2); +} + +#protections-popup:not([infoMessageShowing]) #protections-popup-mainView-panel-header-section + toolbarseparator { + display: none; +} + +#protections-popup-mainView-panel-header-section { + /* Don't display the info message on top of the panel content while it fades in and out */ + overflow: hidden; +} + +#permission-popup-permissions-content > description, +#protections-popup-content > description { + color: var(--panel-description-color); +} + +/* This element needs the pre-wrap because we add newlines to it in the code. */ +#identity-popup-content-supplemental { + white-space: pre-wrap; +} + +/* SECURITY */ + +#identity-popup[mixedcontent~=active-loaded] .identity-popup-connection-not-secure, +#identity-popup:not([mixedcontent]) .identity-popup-connection-not-secure { + font-weight: bold; +} + +#identity-popup-mainView > .panel-subview-body { + padding-bottom: var(--panel-subview-body-padding-block); +} + +#identity-popup-mainView[footerVisible="true"] > .panel-subview-body { + padding-bottom: 0; +} + +.identity-popup-section { + margin-inline: var(--arrowpanel-menuitem-margin-inline); + padding-inline: var(--arrowpanel-menuitem-padding-inline); +} + +.identity-popup-section.indented { + /* Align with the text displayed following the lock icon, in the connection status button above. + 16px is the icon size and 8px is the inline-start padding of the text. */ + padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + 16px + 8px); +} + +.identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/security-broken.svg); + margin: var(--arrowpanel-menuitem-margin); + padding: var(--arrowpanel-menuitem-padding); + -moz-context-properties: fill; + min-height: 24px; +} + +#identity-popup[connection=chrome] .identity-popup-security-connection { + list-style-image: url(chrome://branding/content/icon48.png); +} + +#identity-popup[connection=file] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/page-portrait.svg); +} + +#identity-popup[connection^=secure] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/security.svg); +} + +/* Use [isbroken] to make sure we don't show a warning lock on an http page. See Bug 1192162. */ +#identity-popup[ciphers=weak] .identity-popup-security-connection, +#identity-popup[mixedcontent~=passive-loaded][isbroken] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/security-warning.svg); + -moz-context-properties: fill, fill-opacity; +} + +#identity-popup[connection=secure-cert-user-overridden] .identity-popup-security-connection, +#identity-popup[connection=cert-error-page] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/security-warning.svg); + fill: unset; +} + +#identity-popup[connection=net-error-page] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/info.svg); + fill: unset; +} + +#identity-popup[mixedcontent~=active-loaded][isbroken] .identity-popup-security-connection { + list-style-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg); +} + +#identity-popup[connection=extension] .identity-popup-security-connection { + list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); +} + +.identity-popup-security-connection-icon { + width: 16px; + height: 16px; +} + +.identity-popup-connection-secure.security-view, +.identity-popup-connection-secure.upgraded, +.identity-popup-connection-not-secure.security-view { + padding-inline-start: 8px; +} + +#identity-popup-securityView-extended-info > button, +#identity-popup-securityView-extended-info > hbox > .text-link, +#identity-popup-content-verifier, +#identity-popup-content-verifier ~ description, +#identity-popup-content-owner-label { + margin-block: 0.5em; +} + +#identity-popup-securityView-extended-info > .identity-popup-warning-box { + font-weight: 600; +} + +#identity-popup-securityView-extended-info > button { + margin-inline: 0; +} + +@media (-moz-platform: macos) { + #identity-popup-securityView-extended-info > button { + min-height: 30px; + } + + #identity-popup-securityView-extended-info > button:focus-visible { + outline: var(--focus-outline); + } +} + +/* CONTENT BLOCKING / TRACKING PROTECTION */ + +#protections-popup-sendReportView-heading, +#protections-popup-sendReportView-body, +#protections-popup-siteNotWorkingView-body { + padding: var(--vertical-section-padding) var(--horizontal-padding); +} + +.protections-popup-sendReportView-collection-section { + margin-bottom: 16px; +} + +#protections-popup-sendReportView-collection-url { + appearance: none; + border: none; + margin: 4px 0; +} + +#protections-popup-sendReportView-collection-comments { + height: 120px; +} + +.protections-popup-sendReportView-collection-section label { + margin-bottom: 2px; +} + +#protections-popup-sendReportView-report-error { + margin-bottom: 24px; + color: #d74345; +} + +#protections-popup-not-blocking-section-why:hover, +#protections-popup-show-report-stack:hover > .protections-popup-footer-button { + background-color: var(--panel-item-hover-bgcolor); +} + +#protections-popup-show-report-stack:hover:active > .protections-popup-footer-button { + background-color: var(--panel-item-active-bgcolor); +} + +/* This subview could get filled with a lot of trackers, set a maximum size + * and allow it to scroll vertically.*/ +#protections-popup-socialblockView, +#protections-popup-cookiesView, +#protections-popup-trackersView { + max-height: calc(600px + var(--height-offset)); +} + +#protections-popup-trackersView-list.empty { + -moz-box-align: center; + -moz-box-pack: center; +} + +.protections-popup-empty-label { + color: var(--panel-description-color); +} + +.protections-popup-trackersView-empty-image { + width: 48px; + height: 48px; + -moz-context-properties: fill; + margin-bottom: 16px; +} + +#protections-popup-cookiesView .protections-popup-empty-label { + margin-inline-start: 24px; + margin-block: 2px 4px; +} + +.protections-popup-cookiesView-list-header { + color: var(--panel-description-color); + margin: 5px 0; +} + +#protections-popup-cookiesView-list > .protections-popup-cookiesView-list-section:only-of-type > .protections-popup-cookiesView-list-header { + display: none; +} + +.protections-popup-list { + padding: 5px 16px !important; /* override panelUI-shared.css */ +} + +.protections-popup-list-item { + display: flex; + margin: 5px 0; +} + +.protections-popup-list-host-label { + direction: ltr; + text-align: match-parent; +} + +/* Special alignment for items which include a state label (e.g. "Allowed") */ +.protections-popup-list-item-with-state > label { + margin: auto 0; +} +.protections-popup-list-item-with-state { + justify-content: space-between; +} + +/* Content Blocking categories */ + +#protections-popup-no-trackers-found-description { + margin: 4.85em 7.25em; + font-size: 1.1em; + text-align: center; + color: var(--panel-description-color); +} + +.protections-popup-section-header { + color: var(--panel-description-color); +} + +:root[uidensity="compact"] .protections-popup-section-header { + margin-block: 4px; +} + +#tracking-protection-container > tooltip { + max-width: var(--popup-width); +} +/* + * The category list is split into two sections: "Blocking" and "Not Blocking", + * with five different category items distributed between them at runtime. + * To achieve this, we use a grid layout with 12 rows: one row for each header + * label and five rows in each section for the items. + * Items with the "blocked" class are assigned rows 2-6, and those without + * are assigned rows 8-12, with the headers taking rows 1 and 7. + */ + +#protections-popup-no-trackers-found-description:not([hidden]) ~ #protections-popup-content { + display: none; +} + +#protections-popup-not-blocking-section-why { + border-radius: 2px; +} + +#protections-popup-not-blocking-section-why:hover { + outline: 4px solid var(--panel-item-hover-bgcolor); +} + +.trackers-icon { + list-style-image: url(chrome://browser/skin/canvas.svg); +} + +.socialblock-icon { + list-style-image: url(chrome://browser/skin/thumb-down.svg); +} + +.thirdpartycookies-icon { + list-style-image: url(chrome://browser/skin/controlcenter/3rdpartycookies.svg); +} + +.cryptominers-icon { + list-style-image: url(chrome://browser/skin/controlcenter/cryptominers.svg); +} + +.fingerprinters-icon { + list-style-image: url(chrome://browser/skin/fingerprint.svg); +} + +/* PERMISSIONS */ + +.permission-popup-permission-item { + min-height: 24px; +} + +.protections-popup-category[uidisabled] { + display: none; +} + +#permission-popup-storage-access-permission-list-header { + padding-inline-end: 8px; +} + +.permission-popup-permission-item, +#permission-popup-storage-access-permission-list-header { + margin-block: 0.25em; +} + +#permission-popup-permission-reload-hint, +#permission-popup-permission-empty-hint { + margin-top: 8px; +} + +.permission-popup-permission-list-anchor[anchorfor="3rdPartyStorage"] > vbox:only-child { + display: none; +} + +#permission-popup-storage-access-permission-list-hint { + margin-top: 0.25em; + color: var(--panel-description-color); +} + +#permission-popup-storage-access-permission-list-hint, +#permission-popup-storage-access-permission-learn-more { + /* Matches offset for items - 16px icon + 8px margin */ + margin-inline-start: calc(16px + 8px); +} + +.permission-popup-permission-icon { + width: 16px; + height: 16px; +} + +.permission-popup-permission-label, +.permission-popup-permission-header-label { + margin-inline-start: 8px; +} + +.permission-popup-permission-label-subitem { + /* Align label with other labels with icon. */ + /* icon width + icon inline margin + label inline margin */ + margin-inline-start: calc(16px + 3px + 10px); +} + +.permission-popup-permission-state-label { + margin-inline-end: 5px; + text-align: end; +} + +.permission-popup-permission-remove-button { + appearance: none; + margin: 0; + margin-inline-start: 2px; + border-width: 0; + min-width: 0; + padding: 2px; + padding-inline-end: 6px; + background-color: var(--button-bgcolor); + color: var(--button-color); + border-radius: 4px; +} + +.permission-popup-permission-remove-button > .button-box > .button-icon { + margin: 0; + width: 12px; + height: 12px; + list-style-image: url(chrome://global/skin/icons/close.svg); + -moz-context-properties: fill; + fill: currentColor; +} + +.permission-popup-permission-remove-button > .button-box > .button-text { + display: none; +} + +.permission-popup-permission-remove-button:not(:-moz-focusring):hover { + background-color: var(--button-hover-bgcolor); +} + +.permission-popup-permission-remove-button:not(:-moz-focusring):hover:active { + background-color: var(--button-active-bgcolor) +} + +#protections-popup[hasException] .protections-popup-tp-switch-on-header, +#protections-popup:not([hasException]) .protections-popup-tp-switch-off-header { + display: none; +} + +#protections-popup-cookie-banner-section[hasException] .protections-popup-cookie-banner-switch-on-header, +#protections-popup-cookie-banner-section:not([hasException]) .protections-popup-cookie-banner-switch-off-header { + display: none; +} + +#protections-popup-cookie-banner-section[uiDisabled], +#protections-popup-cookie-banner-section-separator[uiDisabled]{ + display: none; +} + +#protections-popup-toast-panel-tp-on-desc, +#protections-popup-toast-panel-tp-off-desc { + display: none; +} + +#protections-popup:not([hasException])[toast] #protections-popup-toast-panel-tp-on-desc, +#protections-popup[hasException][toast] #protections-popup-toast-panel-tp-off-desc { + display: revert; +} + +.protections-popup-tp-switch-label-box, +.protections-popup-tp-switch-box { + min-height: 40px; + -moz-box-pack: center; +} + +/* This is needed in order to show a correct height if the 'Site not working?' + link is not displaying. */ +.protections-popup-switch-section[short] > .protections-popup-tp-switch-label-box, +.protections-popup-switch-section[short] > .protections-popup-tp-switch-box { + min-height: 30px; +} + +.protections-popup-switch-header { + font-weight: 600; +} + +.protections-popup-tp-switch { + appearance: none; + box-sizing: border-box; + min-width: 30px; + border-radius: 10px; + background-color: var(--button-bgcolor); + border: 1px solid hsla(210,4%,10%,.14); + margin-block: 4px; + margin-inline-start: 1px; + padding: 2px; + padding-inline-end: 0; + transition: padding .2s ease; +} + +.protections-popup-tp-switch::before { + position: relative; + display: block; + content: ""; + width: 10px; + height: 10px; + border-radius: 10px; + background: white; + outline: 1px solid var(--panel-separator-color); +} + +.protections-popup-tp-switch[enabled] { + background-color: var(--button-primary-bgcolor); + border-color: var(--button-primary-hover-bgcolor); + /* Push the toggle to the right. */ + padding-inline-start: 16px; +} + +.protections-popup-tp-switch[enabled]:hover { + background-color: var(--button-primary-hover-bgcolor); + border-color: var(--button-primary-active-bgcolor); +} + +.protections-popup-tp-switch[enabled]:hover:active { + background-color: var(--button-primary-active-bgcolor); + border-color: var(--button-primary-active-bgcolor); +} + +.protections-popup-tp-switch:not([enabled]):hover { + background-color: var(--button-hover-bgcolor); +} + +.protections-popup-tp-switch:not([enabled]):hover:active { + background-color: var(--button-active-bgcolor); +} + +#protections-popup-siteNotWorkingView-body-issue-list { + padding-inline-start: 1em; +} + +/* Protection popup footer categories */ + +#protections-popup-trackers-blocked-counter-box { + margin: var(--arrowpanel-menuitem-margin); + padding: var(--arrowpanel-menuitem-padding); + visibility: hidden; + opacity: 0; + transition: opacity 200ms linear; + justify-self: end; +} + +#protections-popup-trackers-blocked-counter-box[showing] { + visibility: visible; + opacity: 1; +} + +#protections-popup-trackers-blocked-counter-description, +#protections-popup-footer-protection-type-label { + color: var(--panel-description-color); +} + +.protections-popup-description > description { + margin: 10px 16px; +} + +#protections-popup:not([milestone]) #protections-popup-milestones, +#protections-popup:not([milestone]) #protections-popup-milestones-separator { + display: none; +} + +#protections-popup-milestones-content { + background-color: var(--panel-banner-item-background-color); +} + +/* The padding-block for menuitems is set to 0 in compact mode which, with the + * shield icon being bigger than a usual menuitem, makes the item look crowded + * even for compact mode. */ +:root[uidensity="compact"] #protections-popup-milestones-content { + padding-block: 4px; +} + +#protections-popup-milestones-content:hover { + background-color: var(--panel-banner-item-hover-bgcolor); +} + +#protections-popup-milestones-content:hover:active { + background-color: var(--panel-banner-item-active-bgcolor); +} + +#protections-popup-milestones-text { + font-weight: 600; +} + +#protections-popup-milestones-illustration { + list-style-image: url(chrome://browser/skin/controlcenter/etp-milestone.svg); + -moz-context-properties: fill, stroke; + margin-inline-start: var(--horizontal-padding); + margin-inline-end: 4px; + height: 40px; + width: 32px; +} + +#protections-popup[milestone] #protections-popup-milestones-illustration { + fill: #45278d; + stroke: #321c64; +} + +#protections-popup[milestone="5000"] #protections-popup-milestones-illustration { + fill: #5a29cb; + stroke: #45278d; +} + +#protections-popup[milestone="10000"] #protections-popup-milestones-illustration { + fill: #7641e5; + stroke: #5a29cb; +} + +#protections-popup[milestone="25000"] #protections-popup-milestones-illustration { + fill: #e31587; + stroke: #c60084; +} + +#protections-popup[milestone="50000"] #protections-popup-milestones-illustration { + fill: #ff298a; + stroke: #e31587; +} + +#protections-popup[milestone="100000"] #protections-popup-milestones-illustration { + fill: #ffa436; + stroke: #e27f2e; +} + +#protections-popup[milestone="500000"] #protections-popup-milestones-illustration { + fill: #ffd567; + stroke: #ffbd4f; +} + +#protections-popup-tp-switch-breakage-link, +#protections-popup-tp-switch-breakage-fixed-link { + text-decoration: underline; +} + +.permission-popup-section { + padding-bottom: 12px; +} + +#permission-popup-menulist { + padding-inline: 12px 6px; +} + +.protections-popup-section-header, +.protections-popup-switch-section, +#protections-popup-siteNotWorkingView-header { + padding: var(--arrowpanel-menuitem-padding); + margin: var(--arrowpanel-menuitem-margin); +} + +.identity-popup-expander:focus-visible, +.permission-popup-permission-remove-button:focus-visible { + outline: var(--focus-outline); +} + +@media (-moz-platform: linux) { + .identity-popup-expander > .button-box, + .permission-popup-permission-remove-button > .button-box { + appearance: none; + } +} + +.protections-popup-tp-switch:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +#blocked-popup-indicator-item, +#geo-access-indicator-item { + margin-top: -2px; + margin-inline-start: 16px; +} + +#geo-access-indicator-item { + font-size: 0.8em; + color: var(--panel-description-color); +} + +/** Shim-allow warning and indicator icons **/ + +.protections-popup-shim-allow-hint { + padding: 0 2em; + margin-block-end: 10px; +} + +.protections-popup-shim-allow-hint-icon, +.protections-popup-list-host-shim-allow-indicator { + -moz-context-properties: fill; + background-image: url("chrome://global/skin/icons/info-filled.svg"); + background-repeat: no-repeat; + background-position: center; + + fill: #0090ED; +} + +.protections-popup-shim-allow-hint-icon { + width: 24px; + height: 24px; + + background-size: contain; + margin-inline-end: 0.5em; +} + +.protections-popup-list-host-shim-allow-indicator { + width: 16px; +} + +:root[lwt-popup-brighttext] .protections-popup-shim-allow-hint-icon, +:root[lwt-popup-brighttext] .protections-popup-list-host-shim-allow-indicator { + fill: #80EBFF; +} + +.protections-popup-shim-allow-hint-icon { + margin-inline-end: 0.5em; +} + +.protections-popup-list-host-shim-allow-indicator { + margin-inline-start: 0.5em; + min-width: 16px; +} diff --git a/browser/themes/shared/controlcenter/tracking-protection.svg b/browser/themes/shared/controlcenter/tracking-protection.svg new file mode 100644 index 0000000000..341e44fa6d --- /dev/null +++ b/browser/themes/shared/controlcenter/tracking-protection.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/ctrlTab.css b/browser/themes/shared/ctrlTab.css new file mode 100644 index 0000000000..0f78e09a52 --- /dev/null +++ b/browser/themes/shared/ctrlTab.css @@ -0,0 +1,123 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* Ctrl-Tab */ + +#ctrlTab-panel { + appearance: none; + --panel-background: hsla(0,0%,40%,.85); + --panel-color: white; + --panel-border-color: transparent; + --panel-padding: 20px 10px 10px; +} + +@media (-moz-platform: macos) { + #ctrlTab-panel { + -moz-window-shadow: none; + } +} + +@media not (-moz-platform: macos) { + #ctrlTab-panel { + font-weight: bold; + } +} + +.ctrlTab-preview, +#ctrlTab-showAll { + appearance: none; + color: inherit; + /* remove the :-moz-focusring outline from button.css on Windows */ + outline: none !important; + margin: 0; + text-shadow: 0 0 1px hsl(0,0%,12%), 0 0 2px hsl(0,0%,12%); + border: none; + background-color: transparent; +} + +.ctrlTab-preview > .button-box { + display: none; +} + +.ctrlTab-canvas > html|img, +.ctrlTab-canvas > html|canvas { + min-width: inherit; + max-width: inherit; + min-height: inherit; + max-height: inherit; +} + +.ctrlTab-favicon-container { + position: relative; + -moz-box-pack: end; +} + +.ctrlTab-favicon[src] { + width: 42px; + height: 42px; + margin-top: -44px; + margin-bottom: 2px; + margin-inline-end: -6px; + padding: 5px; + background-color: #F9F9FA; + border-radius: 6px; + box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); +} + +.ctrlTab-canvas { + color-scheme: light; + background-color: Canvas; + color: CanvasText; + box-shadow: 1px 1px 2px hsl(0,0%,12%); + margin-bottom: 8px; +} + +@media (-moz-content-prefers-color-scheme: dark) { + .ctrlTab-canvas { + /* Make the blank canvas match the default content background. */ + color-scheme: dark; + } +} + +.ctrlTab-preview:not([hidden]) .ctrlTab-canvas:empty::before { + content: ""; + display: block; + width: 100%; + height: 100%; + background: url("chrome://global/skin/icons/defaultFavicon.svg") center/20% no-repeat; + -moz-context-properties: fill; + fill: currentColor; + filter: drop-shadow(0 0 2px hsla(0,0%,0%,0.5)); +} + +.ctrlTab-preview-inner, +#ctrlTab-showAll { + padding: 8px; + border: 2px solid transparent; + border-radius: .5em; +} + +.ctrlTab-preview-inner { + margin-top: -10px; +} + +#ctrlTab-showAll { + background-color: rgba(255,255,255,.2); + margin-top: .5em; +} + +.ctrlTab-preview:focus > .ctrlTab-preview-inner, +#ctrlTab-showAll:focus { + background-color: rgba(0,0,0,.75); + text-shadow: none; + border-color: #45a1ff; +} + +.ctrlTab-label { + -moz-box-flex: 1; + -moz-box-pack: center; + contain: inline-size; +} diff --git a/browser/themes/shared/customizableui/customizeMode.css b/browser/themes/shared/customizableui/customizeMode.css new file mode 100644 index 0000000000..60248d811c --- /dev/null +++ b/browser/themes/shared/customizableui/customizeMode.css @@ -0,0 +1,631 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* Customization mode */ + +:root { + --drag-drop-transition-duration: .3s; +} + +@media (prefers-reduced-motion: reduce) { + :root { + --drag-drop-transition-duration: 0s; + } +} + +:root[customizing] .customization-target:not(#widget-overflow-fixed-list) { + min-width: 100px; +} + +#customization-container { + background-color: var(--toolbar-non-lwt-bgcolor); + color: var(--toolbar-color); +} + +#customization-container:-moz-lwtheme { + /* Ensure this displays on top of the non-lwt bgcolor, to make sure it's not + * semi-transparent */ + background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)); +} + +:root[lwtheme-image] #customization-container { + background-image: none; + color: var(--toolbar-non-lwt-textcolor); + text-shadow: none; +} + +:root[lwtheme-image] #customization-palette .toolbarbutton-1 { + fill: currentColor; +} + +#customization-palette { + padding: 5px 20px 20px; +} + +#customization-header { + font-weight: 600; + font-size: 1.2em; + margin: 20px 20px 15px; +} + +#customization-panel-container { + --customization-panel-padding: 20px; + padding: 0 var(--customization-panel-padding) 25px; +} + +#customization-footer { + border-top: 1px solid rgba(0,0,0,.15); + padding: 10px; +} + +@media (-moz-platform: macos), + (-moz-platform: windows) { + @media not (prefers-contrast) { + .customizationmode-button { + border: 1px solid #b1b1b1; + border-radius: 2px; + background-color: #fcfcfd; + appearance: none; + } + + .customizationmode-checkbox, + .customizationmode-button { + margin: 6px 10px; + padding: 2px 5px; + } + + .customizationmode-checkbox:not(:-moz-lwtheme, [disabled]), + .customizationmode-button { + color: rgb(71, 71, 71); + } + + .customizationmode-checkbox[disabled]:-moz-lwtheme { + color: inherit; + opacity: 0.4; + } + + #customization-reset-button, + #customization-undo-reset-button, + #customization-done-button { + min-width: 10em; + } + + #customization-done-button { + color: #fff !important; + font-weight: 700; + border-color: #0060df; + background-color: #0a84ff; + } + + .customizationmode-button > .box-inherit { + border-width: 0; + padding: 3px 0; + } + + /* We use a smaller padding to ensure images don't have padding. + * We can't detect whether a button has an image. This button doesn't + * so it needs more padding, so we unfortunately hardcode the extra + * padding in here: + */ + #customization-toolbar-visibility-button { + padding-inline-start: 8px; + } + + .customizationmode-button[type=menu] > .box-inherit > .box-inherit > .button-text { + padding-inline-end: 10px; + } + + .customizationmode-button > .button-icon { + margin-inline-start: 0; + } + + .customizationmode-button:not([type=menu]) > .button-text { + margin-inline-end: 0; + } + + .customizationmode-button > .box-inherit > .button-menu-dropmarker { + margin-inline-end: 0; + padding-inline-end: 0; + list-style-image: url(chrome://global/skin/icons/arrow-down.svg); + } + + .customizationmode-button:is(:active,:hover):not([disabled]), + .customizationmode-button[open], + .customizationmode-button[checked] { + background-color: #e1e1e5; + } + + #customization-done-button:is(:active,:hover):not([disabled]) { + background-color: #0060df; + } + + .customizationmode-button[disabled="true"] { + opacity: .5; + } + } +} + +#customization-lwtheme-link { + display: flex; + align-items: center; +} + +#widget-overflow-fixed-list > toolbarpaletteitem:not([notransition])[place="panel"], +toolbarpaletteitem:not([notransition])[place="toolbar"] { + transition: border-width var(--drag-drop-transition-duration) ease-in-out; +} + +toolbarpaletteitem[mousedown] { + cursor: -moz-grabbing; +} + +toolbarpaletteitem:not([notransition])[place="palette"], +toolbarpaletteitem:not([notransition])[place="panel"] { + transition: transform var(--drag-drop-transition-duration) ease-in-out; +} + +#customization-palette { + transition: opacity .3s ease-in-out; + opacity: 0; +} + +#customization-palette[showing="true"] { + opacity: 1; +} + +#customization-palette #firefox-view-button[attention] { + background-position: center bottom 8%; +} + +toolbarpaletteitem toolbarbutton[disabled] { + color: inherit !important; +} + +#PersonalToolbar toolbarpaletteitem toolbarbutton[checked="true"], +toolbar toolbarpaletteitem toolbarbutton[checked="true"] + > :where(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) { + background-color: revert !important; +} + +toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, +toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, +toolbarpaletteitem > #search-container, +toolbarpaletteitem > toolbaritem.toolbaritem-combined-buttons { + transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important; +} + +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon { + transform: scale(1.3); +} + +toolbarpaletteitem[mousedown] > #search-container, +toolbarpaletteitem[mousedown] > toolbaritem.toolbaritem-combined-buttons { + transform: scale(1.1); +} + +toolbarpaletteitem[mousedown] > #search-container > #searchbar, +toolbarpaletteitem[mousedown] > #urlbar-container > #urlbar > #urlbar-background +{ + outline: 1px solid color-mix(in srgb, currentColor 60%, transparent); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.13); +} + +/* Override the toolkit styling for items being dragged over. */ +toolbarpaletteitem[place="toolbar"] { + border-inline-width: 0; + margin-inline: 0; +} +#widget-overflow-fixed-list > toolbarpaletteitem[place="panel"] { + border-block: 0 solid transparent; +} + +#customization-palette:not([hidden]) { + margin-bottom: 20px; +} + + +toolbarpaletteitem[place="palette"]:-moz-focusring, +toolbarpaletteitem[place="panel"]:-moz-focusring, +toolbarpaletteitem[place="toolbar"]:-moz-focusring { + outline-width: 0; +} + +toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring, +toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring, +toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { + /* Delay adding the focusring back until after the transform transition completes. */ + transition: outline-width .01s linear var(--drag-drop-transition-duration); + outline: var(--default-focusring); +} + +toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { + outline-offset: calc(-1 * var(--default-focusring-width) - 4px); +} + +toolbarpaletteitem[place=palette]::after { + content: attr(title); + display: block; + text-align: center; +} + +toolbarpaletteitem[place=palette] > toolbarspring { + width: 7em; + min-width: 7em; + outline: 1px solid; + outline-offset: -8px; + opacity: .6; + min-height: 37px; + max-height: 37px; +} + +toolbarpaletteitem[place=toolbar] > toolbarspring { + outline: 1px solid; + outline-offset: -2px; + opacity: .6; + margin-block: 5px; +} + +toolbarpaletteitem > #search-container > #searchbar > .searchbar-textbox { + visibility: hidden; /* Hide searchbar placeholder text in customize mode */ +} + +#wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon { + opacity: 1; /* To ensure these buttons always look enabled in customize mode */ +} + +#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button, +#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator { + display: none; +} + +/* Squeeze together the multi-button toolbarpaletteitems: */ +#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-out-button, +#wrapper-edit-controls[place="palette"] > #edit-controls > #cut-button, +#wrapper-profiler-button[place="palette"] > #profiler-button > #profiler-button-button { + -moz-box-align: end; +} +#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-in-button, +#wrapper-edit-controls[place="palette"] > #edit-controls > #paste-button, +#wrapper-profiler-button[place="palette"] > #profiler-button > #profiler-button-dropmarker { + -moz-box-align: start; +} +#wrapper-edit-controls[place="palette"] > #edit-controls > #copy-button { + -moz-box-flex: 0; +} + +#customization-uidensity-touch-spacer { + border-top: 1px solid var(--panel-separator-color); + margin: 6px calc(-1 * var(--arrowpanel-padding)) 9px; +} + +#customization-uidensity-autotouchmode-checkbox { + margin-bottom: var(--arrowpanel-padding); +} + +#customization-uidensity-menu { + font: menu; + margin-inline: 0; + + /* Make the panel padding uniform across all platforms due to the + styling of the section headers and footer. */ + --arrowpanel-padding: 8px; +} + +.customization-uidensity-menuitem > .menu-iconic-left > .menu-iconic-icon { + width: 32px; + height: 32px; + margin: 5px; +} + +.customization-uidensity-menuitem { + appearance: none; + color: inherit; + border: 1px solid transparent; + border-radius: 4px; + padding-block: 0; + padding-inline: 0 5px; + margin: 2px 0; +} + +#customization-uidensity-menuitem-normal { + list-style-image: url("chrome://browser/skin/customizableui/density-normal.svg"); +} + +#customization-uidensity-menuitem-compact { + list-style-image: url("chrome://browser/skin/customizableui/density-compact.svg"); +} + +#customization-uidensity-menuitem-touch { + list-style-image: url("chrome://browser/skin/customizableui/density-touch.svg"); +} + +.customization-uidensity-menuitem:is(:hover, :focus-visible) { + background-color: var(--button-hover-bgcolor); +} + +.customization-uidensity-menuitem:is(:hover:active, [active="true"]) { + background-color: var(--button-active-bgcolor); +} + +.customization-uidensity-menuitem > .menu-iconic-text { + text-align: start; +} + +.customization-uidensity-menuitem > .menu-iconic-left > .menu-iconic-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +#customization-uidensity-button > .box-inherit > .box-inherit > .button-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +#customization-panelWrapper > .panel-arrowcontent { + color: var(--arrowpanel-color); + background: var(--arrowpanel-background); + background-clip: padding-box; + max-width: 29em; +} + +@media (-moz-platform: macos) { + #customization-panelWrapper > .panel-arrowcontent { + /* Native styling adds more 'oompf' to the popup box-shadow, so simulate that + * as best as we can here: */ + box-shadow: 0 0 1px hsla(0,0%,0%,.3), 0 4px 10px hsla(0,0%,0%,.3); + appearance: none; + border-radius: var(--arrowpanel-border-radius); + } +} + +@media not (-moz-platform: macos) { + #customization-panelWrapper > .panel-arrowcontent { + border: 1px solid var(--arrowpanel-border-color); + margin: 0; + box-shadow: 0 0 4px hsla(0,0%,0%,.2); + } +} + +#customization-panelWrapper > .panel-arrowbox { + display: block; + position: relative; + height: 10px; + margin-bottom: -1px; +} + +/* In customize mode, the overflow button should look both 'disabled' and 'open'. + * So we make the button fully opaque but fill the icon semi-transparent. */ +#nav-bar[customizing] > .overflow-button > .toolbarbutton-icon { + background-color: var(--toolbarbutton-active-background); + opacity: 1; + fill-opacity: 0.4; +} + +#customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] { + list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg"); + -moz-context-properties: fill, stroke; + fill: var(--arrowpanel-background); + stroke: var(--arrowpanel-border-color); + /* JS code sets --panel-arrow-offset to the distance between the middle of the + * overflow button and the end of the window. We subtract the padding of our + * container (#customization-panel-container) and half our own width: + */ + margin-inline-end: calc(var(--panel-arrow-offset) - var(--customization-panel-padding) - 10px); + vertical-align: top; +} + +@media (-moz-platform: macos) { + #customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] { + /* The OS X image is 2px narrower than the windows/linux one. + * Add padding to compensate: */ + padding: 0 1px; + /* specify width for hidpi image to fit correctly */ + width: 20px; + } +} + +#customization-panelDescription { + font-size: 1.1em; + padding: 2px 12px 10px; + margin: 0; +} + +#customization-panelHeader { + font-size: 1.3em; + font-weight: 600; + padding: 2px 12px; + margin: 0; +} + +#customization-panelHolder > #widget-overflow-fixed-list { + padding-top: 10px; +} + +/** + * We create a ::before pseudoelement that contains a background image to show the + * drop dragon. This element fades in and out depending on whether the containing + * panel list is empty and unhovered, or not. + */ +#customization-panelHolder > #widget-overflow-fixed-list:not(:empty) { + padding-bottom: 50px; /* Make sure there's always space to drop stuff. */ + border-top: 1px solid var(--panel-separator-color); +} + +#customization-panelHolder > #widget-overflow-fixed-list::before { + display: block; + content: ""; + background-image: url("chrome://browser/skin/customizableui/empty-overflow-panel.png"); + background-position: center bottom 10px; + background-size: 218px 134px; + background-repeat: no-repeat; + opacity: 0; + transition: opacity 300ms ease-out; + padding-bottom: 154px; /* 154 = 134 for the image, 10px space on either side. */ + margin-bottom: -154px; /* don't affect positioning of the actual contents */ + pointer-events: none; +} + +@media (min-resolution: 1.1dppx) { + #customization-panelHolder > #widget-overflow-fixed-list::before { + background-image: url("chrome://browser/skin/customizableui/empty-overflow-panel@2x.png"); + } +} + +#customization-panelHolder > #widget-overflow-fixed-list:empty::before { + opacity: 1; +} +#customization-panelHolder > #widget-overflow-fixed-list[draggingover]:empty::before { + opacity: 0; +} + +#downloads-button-autohide-panel { + --arrowpanel-padding: 5px 12px; +} + +#downloads-button-autohide-checkbox { + margin: 0; + padding: 0; +} + +#whimsy-button { + /* Don't need HiDPI versions since the size used will be scaled down to 20x20. */ + list-style-image: url("chrome://browser/skin/customizableui/whimsy.png"); +} + +#whimsy-button > .button-box > .button-icon { + width: 16px; + height: 16px; +} + +#customization-palette[whimsypong] { + /* Keep the palette in the render tree but invisible + so -moz-element() will work. */ + padding: 0; + min-height: 0; + max-height: 0; +} + +#customization-palette[whimsypong] > toolbarpaletteitem > toolbarspring { + margin: 0 -7px; +} + +@media (-moz-platform: linux) { + #customization-palette[whimsypong] > toolbarpaletteitem[id^="wrapper-customizableui-special-spring"] { + font-size: 12px; + } +} + +#wp-lives, +#wp-ball { + /* Don't need HiDPI versions since the size used will be scaled down to 20x20. */ + background-image: url("chrome://browser/skin/customizableui/whimsy.png"); + background-size: contain; + width: 20px; +} + +#customization-pong-arena { + width: 300px; + height: 300px; + border-inline: 1px solid currentColor; + margin: 16px auto 0; + box-sizing: content-box; +} + +#customization-palette[whimsypong] > toolbarpaletteitem[kcode], +#customization-pong-arena[kcode] { + animation-name: kcode; + animation-timing-function: steps(5); + animation-duration: 1s; + animation-iteration-count: infinite; +} + +#wp-ball { + margin-inline-start: -10px; + margin-top: -10px; + height: 20px; +} + +#wp-player1, +#wp-player2 { + width: 84px; + height: calc(39px + 3em); +} + +#wp-player1, +#wp-player2, +#wp-ball, +#wp-score { + display: block; + position: fixed; +} + +#wp-score { + transform: translateX(-4ch); +} + +#wp-score:-moz-locale-dir(rtl) { + transform: translateX(4ch); +} + +#wp-lives { + transform: translate(-4ch, 1ch); +} + +#wp-lives:-moz-locale-dir(rtl) { + transform: translate(4ch, 1ch); +} + +#wp-lives[lives="5"] { + height: 100px; +} + +#wp-lives[lives="4"] { + height: 80px; +} + +#wp-lives[lives="3"] { + height: 60px; +} + +#wp-lives[lives="2"] { + height: 40px; +} + +#wp-lives[lives="1"] { + height: 20px; +} + +#customization-pong-arena[lives="0"] > #wp-ball { + animation: game-over 4s forwards ease; +} + +@keyframes game-over { + 0% { + transform: scale(1) translateY(0) rotateZ(0); + opacity: 1; + } + 15% { + transform: scale(2) translateY(-10px) rotateZ(-90deg); + } + 35% { + opacity: 1; + } + 65% { + opacity: 0; + } + 100% { + transform: scale(2) translateY(300px) rotateZ(-2.5turn); + opacity: 0; + } +} + +@keyframes kcode { + 0% { border-color: rgb(195,17,206); color: rgb(195,17,206); } + 20% { border-color: rgb(252,82,27); color: rgb(252,82,27); } + 40% { border-color: rgb(251,179,0); color: rgb(251,179,0); } + 60% { border-color: rgb(105,211,0); color: rgb(105,211,0); } + 80% { border-color: rgb(20,155,249); color: rgb(20,155,249); } + 100% { border-color: rgb(195,17,206); color: rgb(195,17,206); } +} diff --git a/browser/themes/shared/customizableui/density-compact.svg b/browser/themes/shared/customizableui/density-compact.svg new file mode 100644 index 0000000000..8d6bf1e7cd --- /dev/null +++ b/browser/themes/shared/customizableui/density-compact.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/customizableui/density-normal.svg b/browser/themes/shared/customizableui/density-normal.svg new file mode 100644 index 0000000000..8298a571be --- /dev/null +++ b/browser/themes/shared/customizableui/density-normal.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/customizableui/density-touch.svg b/browser/themes/shared/customizableui/density-touch.svg new file mode 100644 index 0000000000..62963a5b0e --- /dev/null +++ b/browser/themes/shared/customizableui/density-touch.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/browser/themes/shared/customizableui/empty-overflow-panel.png b/browser/themes/shared/customizableui/empty-overflow-panel.png new file mode 100644 index 0000000000..6bad10f5c2 Binary files /dev/null and b/browser/themes/shared/customizableui/empty-overflow-panel.png differ diff --git a/browser/themes/shared/customizableui/empty-overflow-panel@2x.png b/browser/themes/shared/customizableui/empty-overflow-panel@2x.png new file mode 100644 index 0000000000..f2c7e5a418 Binary files /dev/null and b/browser/themes/shared/customizableui/empty-overflow-panel@2x.png differ diff --git a/browser/themes/shared/customizableui/panelUI-shared.css b/browser/themes/shared/customizableui/panelUI-shared.css new file mode 100644 index 0000000000..055a0e5a7e --- /dev/null +++ b/browser/themes/shared/customizableui/panelUI-shared.css @@ -0,0 +1,2033 @@ +/* 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 { + --panel-item-hover-bgcolor: var(--button-hover-bgcolor); + --panel-item-active-bgcolor: var(--button-active-bgcolor); + --panel-banner-item-color: var(--button-color); + --panel-banner-item-background-color: var(--button-bgcolor); + --panel-banner-item-hover-bgcolor: var(--button-hover-bgcolor); + --panel-banner-item-active-bgcolor: var(--button-active-bgcolor); + --panel-banner-item-update-supported-bgcolor: #2AC3A2; + --panel-banner-item-info-icon-bgcolor: #0090ED; + + --menu-panel-width: 22.35em; + --menu-panel-width-wide: 29em; + + --arrowpanel-menuitem-margin-block: 0; + --arrowpanel-menuitem-margin-inline: 8px; + --arrowpanel-menuitem-margin: var(--arrowpanel-menuitem-margin-block) var(--arrowpanel-menuitem-margin-inline); + --arrowpanel-menuitem-padding-block: 8px; + --arrowpanel-menuitem-padding-inline: 8px; + --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline); + --arrowpanel-menuitem-border-radius: 4px; + --arrowpanel-header-back-icon-padding: 8px; + --arrowpanel-header-back-icon-full-width: calc(16px + (2 * var(--arrowpanel-header-back-icon-padding))); + --arrowpanel-header-info-icon-padding: 4px; + --arrowpanel-header-info-icon-margin-inline-end: 4px; + --arrowpanel-header-info-icon-full-width: calc(16px + (2 * var(--arrowpanel-header-info-icon-padding))); + --arrowpanel-header-height: calc(16px + (var(--arrowpanel-header-back-icon-padding) * 2) + (var(--panel-separator-margin-horizontal) * 2)); + --panel-separator-margin-vertical: 4px; + --panel-separator-margin-horizontal: 8px; + --panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal); + --panel-subview-body-padding-block: 8px; + --panel-subview-body-padding-inline: 0; + --panel-subview-body-padding: var(--panel-subview-body-padding-block) var(--panel-subview-body-padding-inline); + + --panel-and-palette-icon-size: 16px; +} + +:root:not(:-moz-lwtheme) { + --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%); +} + +:root[uidensity=compact] { + --arrowpanel-menuitem-margin-inline: 4px; + --arrowpanel-menuitem-padding-block: 0px; + --arrowpanel-header-back-icon-padding: 4px; + --arrowpanel-header-info-icon-margin-inline-end: 0px; + --panel-separator-margin-horizontal: 4px; + --panel-subview-body-padding-block: 4px; +} + +#PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: -moz-box; + height: 10px; + width: 10px; + background-size: contain; + border: none; +} + +#PanelUI-menu-button[badge-status="extension-new-tab"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="download-success"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: none; +} + +#PanelUI-menu-button[badge-status="update-available"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-downloading"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-manual"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-other-instance"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-unsupported"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + box-shadow: none; + /* "!important" is necessary to override the rule in toolbarbutton.css */ + margin: -5px 0 0 !important; + margin-inline-end: -3px !important; + min-width: 12px; + min-height: 12px; + -moz-context-properties: fill; + background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center; + background-size: 12px; +} + +#PanelUI-menu-button[badge-status="update-available"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-downloading"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-manual"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-other-instance"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + fill: var(--panel-banner-item-update-supported-bgcolor); +} + +#PanelUI-menu-button[badge-status="update-unsupported"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: url(chrome://global/skin/icons/warning-fill-12.svg) no-repeat center; + fill: var(--warning-icon-bgcolor); +} + +.panel-banner-item[notificationid="update-available"] > .toolbarbutton-icon, +.panel-banner-item[notificationid="update-downloading"] > .toolbarbutton-icon, +.panel-banner-item[notificationid="update-manual"] > .toolbarbutton-icon, +.panel-banner-item[notificationid="update-other-instance"] > .toolbarbutton-icon, +.panel-banner-item[notificationid="update-restart"] > .toolbarbutton-icon { + background-image: url(chrome://browser/skin/update-badge.svg); + background-repeat: no-repeat; + background-position: center; + -moz-context-properties: fill; + fill: var(--panel-banner-item-update-supported-bgcolor); +} + +.panel-banner-item[notificationid="update-unsupported"] > .toolbarbutton-icon { + background: url(chrome://global/skin/icons/warning.svg) no-repeat center; + -moz-context-properties: stroke, fill; + stroke: var(--arrowpanel-background); + fill: var(--warning-icon-bgcolor); +} + +#PanelUI-menu-button[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#fxa-toolbar-menu-button[badge-status="login_failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + height: 13px; + background: url(chrome://global/skin/icons/warning-fill-12.svg) center / contain no-repeat transparent; + box-shadow: none; + border-radius: 0; + -moz-context-properties: fill; + fill: var(--warning-icon-bgcolor); +} + +#fxa-toolbar-menu-button[badge-status="login_failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: flex; +} + +#PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive { + filter: grayscale(100%); +} + +.cui-widget-panel, +#widget-overflow, +#unified-extensions-panel { + font: menu; +} + +panelview { + -moz-box-orient: vertical; + background: var(--arrowpanel-background); + padding: 0; +} + +/* Prevent a scrollbar from appearing while the animation for transitioning from + one view to another runs, which would otherwise happen if the new view has + more height than the old one because that would mean that during the + animation the height of the multiview will be too short for the new view. */ +panelmultiview[transitioning] > .panel-viewcontainer > .panel-viewstack > panelview > .panel-subview-body { + overflow-y: hidden; +} + +.panel-subview-body { + overflow-y: auto; + overflow-x: hidden; + -moz-box-flex: 1; + padding: var(--panel-subview-body-padding); +} + +.panel-subview-body:not(:last-child) { + padding-bottom: 0; +} + +toolbarseparator + .panel-subview-body { + padding-top: 0; +} + +.panel-view-body-unscrollable { + overflow: hidden; + -moz-box-flex: 1; +} + +.panel-info-button { + appearance: none; + color: inherit; + padding: 0; + border-radius: var(--toolbarbutton-border-radius); + flex-shrink: 0; +} + +.panel-info-button[disabled=true] { + visibility: hidden; +} + +.panel-info-button:hover { + background-color: var(--panel-item-hover-bgcolor); +} + +.panel-info-button:not(:hover)[checked], +.panel-info-button:hover:active { + background-color: var(--panel-item-active-bgcolor); +} + +.panel-info-button:focus-visible { + outline: var(--focus-outline); +} + +.panel-info-button > image { + list-style-image: url(chrome://global/skin/icons/info.svg); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + padding: var(--arrowpanel-header-info-icon-padding); +} + +#wrapper-edit-controls:is([place="palette"],[place="panel"]) > #edit-controls, +#wrapper-zoom-controls:is([place="palette"],[place="panel"]) > #zoom-controls, +:is(panelview, #widget-overflow-fixed-list) .toolbaritem-combined-buttons { + margin: var(--arrowpanel-menuitem-margin); +} + +/* Bookmark-related menupopup tweaks to make them feel like standard panels */ + +toolbarbutton menupopup[placespopup] { + appearance: none; + border: none; + font: menu; + background-color: transparent; + --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(--panel-subview-body-padding); +} + +toolbarbutton menupopup[placespopup] menupopup[placespopup] { + /* Align non top-level menupopup's first menuitem with the menuitem that opened it. + * The 1px is for the menupopup's border. */ + margin-top: calc(-1 * (var(--panel-subview-body-padding-block) + var(--panel-shadow-margin) + 1px)); +} + +toolbarbutton menupopup[placespopup] > :is(menu, menuitem)[disabled] { + color: var(--panel-disabled-color); +} + +toolbarbutton menupopup[placespopup] > :is(menu, menuitem):not([disabled])[_moz-menuactive] { + color: inherit; + background-color: var(--panel-item-hover-bgcolor); +} + +toolbarbutton menupopup[placespopup] > :is(menu, menuitem):not([disabled])[_moz-menuactive]:active { + color: inherit; + background-color: var(--panel-item-active-bgcolor); +} + +toolbarbutton menupopup[placespopup] > :is(menu, menuitem) :is( + .menu-text, + .menu-iconic-text, + .menu-iconic-icon, + .menu-iconic-left, + .menu-iconic-accel, + .menu-accel-container, + .menu-accel, + .menu-right +) { + /* Reset every spacing and appearance set by the platforms' menu.css + * and set the ones we need in the following rules. */ + margin: 0 !important; + padding: 0 !important; + appearance: none !important; +} + +toolbarbutton menupopup[placespopup] > :is(.menu-iconic, .menuitem-iconic) > .menu-iconic-left { + margin-inline-end: 8px !important; +} + +toolbarbutton menupopup[placespopup] > :is(menu, menuitem) > .menu-accel-container > :is(.menu-accel, .menu-iconic-accel) { + margin-inline-start: 16px !important; + color: var(--panel-shortcut-color); +} + +toolbarbutton menupopup[placespopup][emptyplacesresult] > menuitem > .menu-accel-container > .menu-accel { + margin: 0 !important; +} + +toolbarbutton menupopup[placespopup] > menu > .menu-right { + list-style-image: url(chrome://global/skin/icons/arrow-right.svg); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.6; + width: unset; + height: unset; + /* Reset the rect we inherit from the button */ + -moz-image-region: auto; +} + +toolbarbutton menupopup[placespopup] > menu > .menu-right:-moz-locale-dir(rtl) { + list-style-image: url(chrome://global/skin/icons/arrow-left.svg); +} + +/* menuseparators in bookmark-related menupopups are styled differently + * to allow for user interaction with them (e.g. drag, right click ...) */ +toolbarbutton menupopup[placespopup] menuseparator { + position: relative; + appearance: none; + border: none; + min-height: 0; + margin: 0 var(--panel-separator-margin-horizontal); + padding-inline: 0; + padding-top: var(--panel-separator-margin-vertical); + padding-bottom: calc(var(--panel-separator-margin-vertical) + 1px); +} + +toolbarbutton menupopup[placespopup] menuseparator::before { + content: ''; + position: absolute; + width: 100%; + border-top: 1px solid var(--panel-separator-color); + border-bottom: none; +} + +#BMB_bookmarksPopup { + max-width: 30em; +} + +#confirmation-hint { + --arrowpanel-background: #0060df; + --arrowpanel-border-color: #0060df; + --arrowpanel-color: #fff; + --arrowpanel-padding: 6px 10px; + font-weight: 400; + font-size: 1.1rem; +} + +#confirmation-hint::part(content) { + -moz-box-align: center; +} + +#confirmation-hint-checkmark-animation-container { + position: relative; + overflow: hidden; + width: 14px; + height: 14px; +} + +/* Don't show the checkmark if there is a description */ +#confirmation-hint.with-description #confirmation-hint-checkmark-animation-container { + display: none; +} + +#confirmation-hint-checkmark-animation-container[animate] > #confirmation-hint-checkmark-image { + display: block; + position: absolute; + background-image: url(chrome://browser/skin/success-animation.svg); + background-repeat: no-repeat; + /* frames are 16px wide by 14px high */ + min-width: 304px; + max-width: 304px; + min-height: 14px; + max-height: 14px; + animation-name: confirmation-hint-checkmark-animation; + animation-fill-mode: forwards; + animation-timing-function: steps(18); + -moz-context-properties: fill; + fill: currentColor; +} + +#confirmation-hint[data-message-id="loginRemoved"] #confirmation-hint-checkmark-image { + background-image: url("chrome://global/skin/icons/delete.svg"); + background-size: contain; + -moz-context-properties: fill; + fill: #FFF; + animation: none; +} + +#confirmation-hint-checkmark-animation-container[animate] > #confirmation-hint-checkmark-image:-moz-locale-dir(rtl) { + animation-name: confirmation-hint-checkmark-animation-rtl; + transform: translateX(288px); +} + +@media (prefers-reduced-motion: no-preference) { + #confirmation-hint-checkmark-animation-container[animate] > #confirmation-hint-checkmark-image { + animation-duration: 300ms; + animation-delay: 60ms; + } +} + +@keyframes confirmation-hint-checkmark-animation { + from { + transform: translateX(0); + } + to { + transform: translateX(-288px); + } +} + +@keyframes confirmation-hint-checkmark-animation-rtl { + from { + transform: translateX(288px); + } + to { + transform: translateX(0); + } +} + +#confirmation-hint-message { + margin-inline: 7px 0; +} + +#confirmation-hint.with-description #confirmation-hint-message { + font-size: 1.2em; + font-weight: 600; +} + +@media (prefers-reduced-motion: no-preference) { + #confirmation-hint-message-container { + transform: scale(.8); + opacity: 0; + transition: transform 120ms cubic-bezier(.25,1.27,.35,1.18), + opacity 60ms linear; + } + + #confirmation-hint-checkmark-animation-container[animate] + #confirmation-hint-message-container { + transform: scale(1); + opacity: 1; + } +} + +panelview[id^=PanelUI-webext-] { + overflow: hidden; +} + +.cui-widget-panel { + --arrowpanel-padding: var(--panel-subview-body-padding); +} + +#appMenu-popup panelview, +#PanelUI-fxa { + width: 22.5em; +} + +#customizationui-widget-multiview panelview:not([extension]) { + min-width: var(--menu-panel-width); + max-width: 35em; +} + +#customizationui-widget-multiview #appMenu-libraryView, +#pageActionPanel panelview, +#widget-overflow panelview { + min-width: var(--menu-panel-width-wide); + max-width: var(--menu-panel-width-wide); +} + +/* Add 2 * 16px extra width for touch mode button padding. */ +#appMenu-popup[touchmode] panelview { + min-width: calc(var(--menu-panel-width) + 32px); +} + +.toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] +) > toolbarbutton > .toolbarbutton-icon { + min-width: 0; + min-height: 0; + margin: 0; +} + +.animate-out { + animation-name: widget-animate-out; + animation-fill-mode: forwards; + animation-duration: 500ms; + animation-timing-function: var(--animation-easing-function); +} + +@keyframes widget-animate-out { + 0% { + opacity: 1; + transform: scale(1); + } + 100% { + opacity: 0 ; + transform: scale(.5); + } +} + +toolbarpaletteitem[place="panel"] > .toolbarbutton-1 { + -moz-box-flex: 1; +} + +/* Help webextension buttons fit in. */ +toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon, +toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon, +toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-icon, +toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { + height: var(--panel-and-palette-icon-size); + width: var(--panel-and-palette-icon-size); +} + +#customization-palette .toolbarbutton-1 { + appearance: none; + -moz-box-orient: vertical; + padding: 12px 0 9px; + margin: 0; +} + +/* above we treat the container as the icon for the margins, that is so the +/* badge itself is positioned correctly. Here we make sure that the icon itself +/* has the minimum size we want, but no padding/margin. */ +.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon { + width: var(--panel-and-palette-icon-size); + height: var(--panel-and-palette-icon-size); + min-width: var(--panel-and-palette-icon-size); + min-height: var(--panel-and-palette-icon-size); + margin: 0; + padding: 0; +} + +#zoom-in-button > .toolbarbutton-text, +#zoom-out-button > .toolbarbutton-text, +#zoom-reset-button > .toolbarbutton-icon { + display: none; +} + +/* Main menu banner menuitems */ + +#appMenu-popup .panel-banner-item, +#appMenu-popup .addon-banner-item { + -moz-box-align: start; + color: var(--panel-banner-item-color); + background-color: var(--panel-banner-item-background-color); + margin-bottom: 4px; + font-weight: 600; +} + +:root[uidensity="compact"] .panel-banner-item, +:root[uidensity="compact"] .addon-banner-item { + /* Without some padding the button gets too crowded even for compact mode + when the text wraps to a newline. */ + padding-block: 4px; +} + +#appMenu-popup .panel-banner-item:not([disabled]):hover, +#appMenu-popup .addon-banner-item:not([disabled]):hover { + background-color: var(--panel-banner-item-hover-bgcolor); +} + +#appMenu-popup .panel-banner-item:not([disabled]):hover:active, +#appMenu-popup .addon-banner-item:not([disabled]):hover:active { + background-color: var(--panel-banner-item-active-bgcolor); +} + +#appMenu-popup .panel-banner-item > .toolbarbutton-text, +#appMenu-popup .addon-banner-item > .toolbarbutton-text { + display: inline-block; + padding: 0; +} + +.panel-banner-item > .toolbarbutton-icon { + width: 16px; + height: 16px; + /* Move the icon to appear after the text label. */ + -moz-box-ordinal-group: 2; +} + +.addon-banner-item > .toolbarbutton-icon { + display: none; +} + +/* Addon banners use that one for the addon's icon and need a content element + added to put their generic notification in. */ +.addon-banner-item::after { + content: ""; + display: -moz-box; + background: url(chrome://global/skin/icons/warning.svg) no-repeat center; + width: 16px; + height: 16px; + -moz-context-properties: fill; + fill: var(--warning-icon-bgcolor); + margin-inline-start: 10px; +} + +/* FxAccount indicator bits. */ + +@keyframes syncRotate { + from { transform: rotate(0); } + to { transform: rotate(360deg); } +} + +@media (prefers-reduced-motion: no-preference) { +#PanelUI-fxa-menu-syncnow-button[syncstatus="active"] > .toolbarbutton-icon, +#PanelUI-remotetabs-syncnow[syncstatus="active"] > .toolbarbutton-icon, +.syncNowBtn[syncstatus="active"] { + animation: syncRotate 0.8s linear infinite; + -moz-context-properties: fill; + fill: var(--toolbarbutton-icon-fill-attention); + visibility: visible; +} +} + +.syncNowBtn { + -moz-context-properties: fill; + fill: currentColor; + height: 16px; + width: 16px; + list-style-image: url("chrome://browser/skin/sync.svg"); +} + +#fxa-menu-account-fxa-avatar { + pointer-events: none; + list-style-image: var(--avatar-image-url); + -moz-context-properties: fill; + fill: currentColor; +} + +/* Handle different UI states. */ + +:root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-syncnow-button { + display: none; +} + +/* Error states */ + +#appMenu-fxa-status2 { + display: flex; +} + +#appMenu-fxa-text, +#appMenu-fxa-status2[fxastatus] > #appMenu-fxa-label2 { + flex: 1; + align-self: center; +} + +#appMenu-fxa-status2[fxastatus] { + margin: 0; + padding: 0; +} + +#appMenu-fxa-status2:not([fxastatus]) { + padding-block: 0 2px; +} + +#appMenu-fxa-status2[fxastatus] > #appMenu-fxa-label2 > vbox > #appMenu-header-description, +#appMenu-fxa-text { + font-weight: 600; +} + +#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2 { + padding: 6px 12px; + background-color: var(--button-bgcolor); + font-size: 0.8em; + font-weight: 600; +} + +#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2:hover { + background-color: var(--button-hover-bgcolor); +} + +#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2:active { + background-color: var(--button-active-bgcolor); +} + +:root[fxadisabled=true] #appMenu-fxa-status2, +:root[fxadisabled=true] #appMenu-fxa-separator { + display: none; +} + +#fxa-manage-account-button > vbox > label, +#PanelUI-fxa-menu-syncnow-button > hbox > label, +#PanelUI-remotetabs-syncnow > hbox > label { + margin-inline-start: 0; +} + +#appMenu-fxa-label2 > vbox > label { + margin-inline: 0; +} + +.syncNowBtn { + visibility: collapse; + -moz-box-ordinal-group: 2; +} + +.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] { + font-size: 11px; +} + +#appMenu-fxa-status2[fxastatus="login-failed"] #appMenu-fxa-label2::after { + content: url("chrome://global/skin/icons/warning.svg"); + -moz-context-properties: fill; + fill: var(--warning-icon-bgcolor); +} + +#appMenu-fxa-status2[fxastatus="unverified"] #appMenu-fxa-label2::after { + content: url("chrome://global/skin/icons/info-filled.svg"); + -moz-context-properties: fill; + fill: var(--panel-banner-item-info-icon-bgcolor); +} + +/* Firefox Account Toolbar Panel */ + +#fxa-avatar-image { + width: 16px; + height: 16px; +} + +:root { + --avatar-image-url: url(chrome://browser/skin/fxa/avatar.svg); +} + +:root[fxastatus="not_configured"] { + --avatar-image-url: url(chrome://browser/skin/fxa/avatar-empty.svg); +} + +:root:not([fxatoolbarmenu]) #fxa-toolbar-menu-button { + display: none; +} + +/* Hide the FxA toolbar button when its in the nav-bar, until in use */ +:root[fxastatus="not_configured"] #widget-overflow-list > #fxa-toolbar-menu-button, +:root[fxastatus="not_configured"] #nav-bar-customization-target > #fxa-toolbar-menu-button { + display: none; +} + +#fxa-avatar-image, +#PanelUI-fxa-menu-account-settings-button { + list-style-image: var(--avatar-image-url); +} + +/* Non-signedin statuses icons are not totally round. */ +:root[fxastatus="signedin"] #fxa-avatar-image { + border-radius: 50%; +} + +.PanelUI-fxa-service-description-label, +.PanelUI-remotetabs-instruction-label { + /* Use 'lighter' font for this to de-emphasize it compared to the title. */ + font-weight: lighter; +} + +@media (-moz-platform: linux) { + .PanelUI-fxa-service-description-label, + .PanelUI-remotetabs-instruction-label { + /* Use 300 on Linux because 100 is too light (lacks contrast with + * the background) for some fonts in combination with anti-aliasing. */ + font-weight: 300; + } +} + +#fxa-menu-header-title { + color: var(--arrowpanel-color); +} + +#fxa-menu-header-description { + color: var(--panel-description-color); + font-weight: 600; +} + +#PanelUI-appMenu-fxa-label-last-synced { + font-size: 10px; + font-style: italic; + color: var(--panel-description-color); +} + +#PanelUI-fxa-menu-send-button { + list-style-image: url(chrome://browser/skin/fxa/send.svg); +} + +#PanelUI-fxa-menu-monitor-button { + list-style-image: url(chrome://browser/skin/fxa/monitor.svg); +} + +#PanelUI-fxa-menu-connect-device-button { + list-style-image: url(chrome://browser/skin/fxa/add-device.svg); +} + +:root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-connect-device-button { + color: var(--panel-disabled-color); +} + +/* From the FxA menu -> synced tabs, we don't need to clutter the view with + redundant buttons because these are accessible from the main menu */ +panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow { + display: none; +} + +#PanelUI-sendTabToDevice > .panel-subview-body:not([state]) > #PanelUI-sendTabToDevice-syncingDevices { + display: none; +} + +#PanelUI-fxa-menu-sendtab-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { + transform: scaleX(-1); +} + +.fxaSendLogo, +.fxaMonitorLogo { + margin-top: 15px; + height: 80px; + width: 80px; +} + +.fxaSendToDeviceLogo { + margin-top: 15px; + height: 119px; + width: 164px; + list-style-image: url(chrome://browser/skin/fxa/send-to-device.svg); +} + +.fxaSendLogo { + list-style-image: url(chrome://browser/content/logos/send.svg); +} + +.fxaMonitorLogo { + list-style-image: url(chrome://browser/content/logos/monitor.svg); +} + +#PanelUI-remotetabs { + --panel-ui-sync-illustration-height: 141px; +} + +.sendToDevice-device[clientType=phone] { + list-style-image: url("chrome://browser/skin/device-phone.svg"); +} + +.sendToDevice-device[clientType=tablet] { + list-style-image: url("chrome://browser/skin/device-tablet.svg"); +} + +.sendToDevice-device[clientType=desktop] { + list-style-image: url("chrome://browser/skin/device-desktop.svg"); +} + +.sendToDevice-device[clientType=tv] { + list-style-image: url("chrome://browser/skin/device-tv.svg"); +} + +.sendToDevice-device[clientType=vr] { + list-style-image: url("chrome://browser/skin/device-vr.svg"); +} + +.sendToDevice-device.signintosync { + list-style-image: url("chrome://browser/skin/sync.svg"); +} + +.PanelUI-fxa-service-description-label, +.PanelUI-remotetabs-instruction-label { + /* If you change the margin here, the min-height of the synced tabs panel + (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may + need adjusting (see bug 1248506) */ + margin: 0; + text-align: center; + text-shadow: none; + max-width: 15em; +} + +.PanelUI-fxa-service-description-label, +.PanelUI-remotetabs-instruction-label { + margin-top: 10px; +} + +.PanelUI-fxa-signin-button, +.PanelUI-remotetabs-button { + appearance: none; + background-color: #0060df; + /* !important for the color as an OSX specific rule when a lightweight theme + is used for buttons in the toolbox overrides. See bug 1238531 for details */ + color: white !important; + border-radius: 2px; + /* If you change the margin or padding below, the min-height of the synced tabs + panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, + etc) may need adjusting (see bug 1248506) */ + margin-block: 15px; + padding: 8px; + text-shadow: none; + min-width: 200px; +} + +.PanelUI-fxa-signin-button, +.PanelUI-remotetabs-button { + padding: 1em; +} + +.PanelUI-fxa-signin-button:hover, +.PanelUI-remotetabs-button:hover { + background-color: #003eaa; +} + +.PanelUI-fxa-signin-button:hover:active, +.PanelUI-remotetabs-button:hover:active { + background-color: #002275; +} + +.remotetabs-promo-link { + margin: 0; +} + +.PanelUI-remotetabs-notabsforclient-label { + color: var(--panel-description-color); + /* This margin is to line this label up with the labels in toolbarbuttons. */ + margin-inline-start: 28px; +} + +#PanelUI-remotetabs[mainview] .PanelUI-remotetabs-notabsforclient-label { + margin-inline-start: 32px; +} + +.fxaSyncIllustration, +.fxaSyncIllustrationIssue { + /* If you change the margin here, the min-height of the synced tabs panel + (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may + need adjusting (see bug 1248506) */ + width: 204px; + height: var(--panel-ui-sync-illustration-height); + -moz-context-properties: fill; + fill: #cdcdcd; +} + +.fxaSyncIllustration { + list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg); +} + +.fxaSyncIllustrationIssue { + list-style-image: url(chrome://browser/skin/fxa/sync-illustration-issue.svg); +} + +.PanelUI-fxa-signin-button > .toolbarbutton-text, +.PanelUI-remotetabs-button > .toolbarbutton-text { + /* Overrides toolbar[mode="icons"] from xul.css */ + display: block; +} + +#PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */ + min-width: 19em; +} + +/* Work around bug 1224412 - these boxes will cause scrollbars to appear when + the panel is anchored to a toolbar button. +*/ +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-syncdisabled, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-unverified, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane { + min-height: calc(var(--panel-ui-sync-illustration-height) + + 15px + /* margin of .fxaSyncIllustration */ + 30px + /* margin of .PanelUI-remotetabs-button */ + 8px + /* padding of .PanelUI-remotetabs-button */ + 1em); +} + +.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] { + color: var(--panel-description-color); +} + +/* Collapse the non-active vboxes in the remotetabs deck to use only the + height the active box needs */ +#PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane, +#PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching, +#PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane { + visibility: collapse; +} + +#PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons { + display: none; +} + +#PanelUI-fxa-remotetabs-deck:not([syncingtabs]) { + display: none; +} + +#customization-palette .toolbarbutton-text { + display: none; +} + +toolbarbutton menupopup[placespopup] > :is(menu, menuitem), +.subview-subheader, +panelview .toolbarbutton-1, +.subviewbutton, +.widget-overflow-list .toolbarbutton-1 { + appearance: none; + margin: var(--arrowpanel-menuitem-margin); + min-height: 24px; + padding: var(--arrowpanel-menuitem-padding); + border-radius: var(--arrowpanel-menuitem-border-radius); + background-color: transparent; +} + +.subview-subheader { + font-size: 11px; + font-weight: inherit; + color: var(--panel-description-color); + padding-block: 4px; + box-sizing: border-box; +} + +.subviewbutton { + /* toolbarbuttons default to centered, but we don't want that for subviews. */ + -moz-box-pack: start; +} + +.subviewbutton[disabled="true"] { + color: var(--panel-disabled-color); +} + +.subviewbutton-iconic > .toolbarbutton-text, +.subviewbutton[image] > .toolbarbutton-text, +.subviewbutton[targetURI] > .toolbarbutton-text, +.subviewbutton.bookmark-item > .toolbarbutton-text, +.subviewbutton[checked="true"] > .toolbarbutton-text { + padding-inline-start: 8px; +} + +.subviewbutton-iconic > .toolbarbutton-icon { + width: 16px; + height: 16px; + -moz-context-properties: fill; + fill: currentColor; +} + +/* Adjust the Zoom toolbaritem padding to have its height the same as other toolbarbuttons, + * also in compact density and touch mode. */ +#appMenu-zoom-controls { + padding-block: max(0px, var(--arrowpanel-menuitem-padding-block) - 4px); +} + +#appMenu-zoom-controls > .subviewbutton { + margin-inline-start: 2px; + padding: 4px; +} + +/* hover and active color changes are applied to child elements not the button itself */ +#appMenu-zoom-controls > .subviewbutton:not([disabled]):is(:hover, :hover:active) { + color: unset; + background-color: unset; +} + +#appMenu-zoom-controls > .subviewbutton:focus-visible { + outline: none; +} + +#appMenu-zoom-controls > .subviewbutton-iconic:focus-visible > .toolbarbutton-icon, +#appMenu-zoomReset-button2:focus-visible > .toolbarbutton-text { + outline: var(--focus-outline); +} + +#appMenu-zoomReduce-button2 > .toolbarbutton-icon, +#appMenu-zoomEnlarge-button2 > .toolbarbutton-icon { + -moz-context-properties: fill, stroke; + fill: var(--button-color); + /* the stroke color is used to fill the circle in the icon */ + stroke: var(--button-bgcolor); + border-radius: 50%; + padding: 0; +} + +#appMenu-zoomReset-button2 > .toolbarbutton-text, +#appMenu-fullscreen-button2 > .toolbarbutton-icon { + border-radius: 2px; +} + +#appMenu-fullscreen-button2 > .toolbarbutton-icon { + padding: 1px; + background-color: var(--button-bgcolor); +} + +#appMenu-zoomReset-button2:not([disabled]):hover > .toolbarbutton-text, +#appMenu-fullscreen-button2:not([disabled]):hover > .toolbarbutton-icon { + background-color: var(--panel-item-hover-bgcolor); +} +#appMenu-zoomReduce-button2:not([disabled]):hover > .toolbarbutton-icon, +#appMenu-zoomEnlarge-button2:not([disabled]):hover > .toolbarbutton-icon { + stroke: var(--panel-item-hover-bgcolor); +} + +#appMenu-zoomReset-button2:not([disabled]):active:hover > .toolbarbutton-text, +#appMenu-fullscreen-button2:not([disabled]):active:hover > .toolbarbutton-icon { + background-color: var(--panel-item-active-bgcolor); +} +#appMenu-zoomReduce-button2:not([disabled]):active:hover > .toolbarbutton-icon, +#appMenu-zoomEnlarge-button2:not([disabled]):active:hover > .toolbarbutton-icon { + stroke: var(--panel-item-active-bgcolor); +} + +/** + * When the Zoom Reset button is disabled, we don't want the zoom-level + * indicator to be so hard to read, so we override the disabled text + * style on it. + */ +#appMenu-zoomReset-button2[disabled], +#zoom-reset-button[disabled] { + opacity: 1; +} + +/* We don't always display: none this item, and if it has forced width (like above) + * or margin, that impacts the position of the label. Fix: + */ +.subviewbutton > .toolbarbutton-icon { + margin: 0; +} + +.subviewbutton > .toolbarbutton-text { + text-align: start; + display: block; +} + +.panel-subview-footer-button { + /* Set the footer's bottom margin according to menuitems inline margin + to make sure the footer's margin is even from all sides. */ + margin-bottom: var(--arrowpanel-menuitem-margin-inline); +} + +.subviewbutton[shortcut]::after { + content: attr(shortcut); + display: -moz-box; + color: var(--panel-shortcut-color); +} + +#protections-popup-mainView .subviewbutton-nav:not(.notFound)::after, +#identity-credential-notification .subviewbutton-nav::after, +.widget-overflow-list .subviewbutton-nav::after, +.PanelUI-subView .subviewbutton-nav::after { + -moz-context-properties: fill, fill-opacity; + content: url(chrome://global/skin/icons/arrow-right.svg); + fill: currentColor; + fill-opacity: 0.6; + display: -moz-box; +} + +#protections-popup-mainView .subviewbutton-nav:not(.notFound):-moz-locale-dir(rtl)::after, +#identity-credential-notification .subviewbutton-nav:-moz-locale-dir(rtl)::after, +.widget-overflow-list .subviewbutton-nav:-moz-locale-dir(rtl)::after, +.PanelUI-subView .subviewbutton-nav:-moz-locale-dir(rtl)::after { + content: url(chrome://global/skin/icons/arrow-left.svg); +} + +.PanelUI-subView .subviewbutton-nav-down::after { + content: url(chrome://global/skin/icons/arrow-down.svg); +} + +.subviewbutton[shortcut]::after, +.widget-overflow-list .subviewbutton-nav::after, +.PanelUI-subView .subviewbutton-nav::after { + margin-inline-start: 10px; +} + +.subviewbutton[checked="true"] { + list-style-image: url(chrome://global/skin/icons/check.svg); + -moz-context-properties: fill; + fill: currentColor; + color: inherit; +} + +.subviewbutton[type="open-to-new"]::after { + content: url(chrome://global/skin/icons/open-in-new.svg); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.6; + display: -moz-box; + height: 12px; + width: 12px; +} + +.subviewbutton[type="open-to-new"]:-moz-locale-dir(rtl)::after { + transform: scaleX(-1); +} + +/* A menu item with some buttons at the end. */ +.toolbaritem-menu-buttons { + /* Use the same margin at the start as at the end (other margin set below). */ + margin-inline-start: 8px; +} + +.toolbaritem-menu-buttons > .subviewbutton { + min-width: auto; + padding-inline: 5px; +} + +.toolbaritem-menu-buttons > .subviewbutton-iconic:not([flex]) > .toolbarbutton-text { + display: none; +} + +.toolbaritem-combined-buttons, +.toolbaritem-menu-buttons { + -moz-box-align: center; + -moz-box-orient: horizontal; + border: 0; + border-radius: 0; +} + +.toolbaritem-combined-buttons:not([widget-type="button-and-view"], [widget-type="custom"]), +.toolbaritem-menu-buttons { + margin-inline-end: 8px; +} + +panelmultiview .toolbaritem-combined-buttons > label { + -moz-box-flex: 1; + margin: 0; + padding: 4px 0; +} + +.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton { + -moz-box-flex: 0; + height: auto; + margin-inline-start: 18px; + min-width: auto; + padding: 4px 5px; +} + +#appMenu-zoomReset-button2 > .toolbarbutton-text { + min-width: calc(4ch + 8px); + text-align: center; +} + +.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton-iconic > .toolbarbutton-text, +.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-icon { + display: none; +} + +.toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text { + padding-inline-start: 0; +} + +panelview .toolbarbutton-1 { + margin-top: 6px; +} + +:is( + panelview .toolbarbutton-1, + toolbarbutton.subviewbutton, + .widget-overflow-list .toolbarbutton-1, + .toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] + ) > toolbarbutton +):focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +/* hover styles for not-disabled, not-active buttons */ +:is( + panelview .toolbarbutton-1, + toolbarbutton.subviewbutton, + .widget-overflow-list .toolbarbutton-1, + .toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] + ) > toolbarbutton +):not([disabled]):hover { + color: inherit; + background-color: var(--panel-item-hover-bgcolor); +} + +/* hovered-and-active styles for not-disabled buttons */ +:is( + panelview .toolbarbutton-1, + toolbarbutton.subviewbutton, + .widget-overflow-list .toolbarbutton-1, + .toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] + ) > toolbarbutton +):not([disabled]):hover:active { + color: inherit; + background-color: var(--panel-item-active-bgcolor); + box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset; +} + +#widget-overflow-mainView > toolbarseparator, +#widget-overflow-mainView > .panel-subview-body > toolbarseparator, +.PanelUI-subView toolbarseparator, +#unified-extensions-panel toolbarseparator, +#permission-popup-mainView > toolbarseparator, +#editBookmarkPanel toolbarseparator, +#downloadsFooterButtons > toolbarseparator, +.cui-widget-panel toolbarseparator { + appearance: none; + min-height: 0; + border-top: 1px solid var(--panel-separator-color); + border-bottom: none; + margin: var(--panel-separator-margin); + padding: 0; +} + +.PanelUI-subView toolbarseparator.proton-zap { + border-image: var(--panel-separator-zap-gradient, none) 1; +} + +.PanelUI-remotetabs-clientcontainer > toolbarbutton[itemtype="tab"], +#PanelUI-historyItems > toolbarbutton { + list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +#fxa-menu-account-fxa-avatar, +#appMenu-fxa-label > .toolbarbutton-icon, +#PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon, +.PanelUI-remotetabs-clientcontainer > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon, +#PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon, +#PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon, +#PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +#PanelUI-fxa-remotetabs-tabspane { + min-width: 0; +} + +#PanelUI-fxa-menu-account-settings-button > .toolbarbutton-icon { + border-radius: 50%; +} + +toolbarpaletteitem[place="palette"] > #search-container { + min-width: 7em; + width: 7em; + min-height: 37px; + max-height: 37px; +} + +.toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] +) > toolbarbutton { + border: 0; + margin: 0; + -moz-box-flex: 1; + padding-block: var(--arrowpanel-menuitem-padding-block); + -moz-box-orient: horizontal; +} + +toolbarpaletteitem[place="panel"], +toolbarpaletteitem[place="panel"] > toolbaritem { + -moz-box-flex: 1; +} + +.toolbaritem-combined-buttons[cui-areatype="panel"] > .toolbarbutton-combined-buttons-dropmarker, +.toolbaritem-combined-buttons[overflowedItem] > .toolbarbutton-combined-buttons-dropmarker { + display: none; +} + +.toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] +) > toolbarbutton:not(.toolbarbutton-1)[disabled] { + opacity: 0.4; + /* Override toolbarbutton.css which sets the color to GrayText */ + color: inherit; +} + +#zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text { + /* 4 chars max, but `ch` is the width of the `0` glyph, so account for larger glyphs by adding 1ch */ + min-width: calc(5ch + var(--toolbarbutton-inner-padding) * 2); +} + +.toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] +) > separator { + appearance: none; + -moz-box-align: stretch; + margin: .5em 0; + width: 1px; + height: auto; + background: var(--panel-separator-color); + transition-property: margin; + transition-duration: 10ms; + transition-timing-function: ease; +} + +.toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] +):hover > separator { + margin: 0; +} + +toolbaritem[overflowedItem=true], +.widget-overflow-list .toolbarbutton-1 { + max-width: var(--menu-panel-width-wide); + background-repeat: no-repeat; + background-position: 0 center; +} + +.widget-overflow-list .toolbarbutton-1 { + -moz-box-align: center; + -moz-box-orient: horizontal; +} + +toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after { + opacity: 0.5; +} + +.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text { + text-align: start; + padding-inline-start: .5em; +} + +#PanelUI-panicView > .panel-subview-body, +#PanelUI-panicView { + overflow: visible; +} + +#PanelUI-panicView.cui-widget-panelview { + min-width: 280px; +} + +#PanelUI-panic-timeframe { + padding: 15px; + border-bottom: 1px solid var(--panel-separator-color); +} + +#panic-button-success-icon, +#PanelUI-panic-timeframe-icon { + background-color: transparent; + margin-inline-end: 10px; +} + +#panic-button-success-icon, +#PanelUI-panic-timeframe-icon { + list-style-image: url(chrome://browser/skin/panic-panel/header.png); + max-height: 48px; + width: 48px; +} + +#panic-button-success-header { + -moz-box-align: center; + margin-bottom: 5px; +} + +#PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.subviewradio { + appearance: none; + -moz-box-align: center; + padding: 3px; + margin: 0 0 2px; + background-color: transparent; + border-radius: 4px; + border: 1px solid transparent; +} + +.subviewradio:hover { + background-color: var(--button-hover-bgcolor); +} + +.subviewradio:is([selected], [selected]:hover, :hover:active) { + background-color: var(--button-active-bgcolor); +} + +radiogroup:focus-visible > .subviewradio[focused="true"] { + outline: var(--focus-outline); +} + +radiogroup:focus-visible > .subviewradio[focused="true"] > .radio-label-box { + outline: none; +} + +.subviewradio > .radio-check { + appearance: none; + width: 16px; + height: 16px; + border: 1px solid rgba(110, 110, 110, 0.4); + border-radius: 50%; + margin: 1px 5px; + background-color: rgba(150,150,150,0.2); +} + +.subviewradio > .radio-check[selected] { + background-color: #fff; + border: 4px solid #177ee6; +} + +:root[lwt-popup-brighttext] .subviewradio > .radio-check[selected] { + background-color: transparent; + border: 4px solid #00ddff; +} + +#PanelUI-panic-explanations { + padding: 10px 10px 0; +} + +#PanelUI-panic-actionlist-main-label { + color: var(--panel-description-color); + font-size: 0.9em; +} + +.PanelUI-panic-actionlist { + padding-block: 2px; + padding-inline-start: 20px; + background-size: 16px 16px; + background-repeat: no-repeat; + background-color: transparent; + background-position: left center; +} + +.PanelUI-panic-actionlist:-moz-locale-dir(rtl) { + background-position-x: right; +} + +#PanelUI-panic-actionlist-cookies { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0); +} + +#PanelUI-panic-actionlist-history { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16); +} + +#PanelUI-panic-actionlist-windows { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32); +} + +#PanelUI-panic-actionlist-newwindow { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48); +} + +#PanelUI-panic-warning { + color: #d74345; + text-align: center; + width: 100%; + margin-top: 20px; +} + +#PanelUI-panic-view-button { + appearance: none; + background-color: var(--buttons-destructive-bgcolor); + color: var(--buttons-destructive-color); + margin: 5px 15px 11px; + border: 1px solid transparent; + border-radius: 4px; + font-weight: 600; + padding: 10px; +} + +#PanelUI-panic-view-button:hover { + background-color: var(--buttons-destructive-hover-bgcolor); +} + +#PanelUI-panic-view-button:hover:active { + background-color: var(--buttons-destructive-active-bgcolor); +} + +#PanelUI-panic-view-button:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +#PanelUI-panic-view-button > .toolbarbutton-text { + text-align: center; + text-shadow: none; +} + +#panic-button-success-closebutton { + background-color: var(--button-bgcolor); + color: var(--button-color); + margin: 5px 0 0; + border: 1px solid transparent; + border-radius: 4px; + padding: 10px; + font-weight: 600; + appearance: none; +} + +#panic-button-success-closebutton:hover { + background-color: var(--button-hover-bgcolor); +} + +#panic-button-success-closebutton:hover:active { + background-color: var(--button-active-bgcolor); +} + +@media (min-resolution: 1.1dppx) { + #panic-button-success-icon, + #PanelUI-panic-timeframe-icon { + list-style-image: url(chrome://browser/skin/panic-panel/header@2x.png); + } + + #PanelUI-panic-actionlist-cookies { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 32, 32, 0); + } + + #PanelUI-panic-actionlist-history { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 64, 32, 32); + } + + #PanelUI-panic-actionlist-windows { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 96, 32, 64); + } + + #PanelUI-panic-actionlist-newwindow { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 128, 32, 96); + } +} + +.panel-header { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + /* Set the header's padding according to menuitems horizontal padding + to make sure they are even from all sides and aligned according to that padding. */ + padding: var(--arrowpanel-menuitem-margin-inline); + /* Calculate the header's height assuming it includes an icon even if it doesn't, + to make sure all headers are the same height (assuming their text is a one liner). */ + min-height: var(--arrowpanel-header-height); +} + +.panel-header + toolbarseparator { + margin-top: 0 !important; +} + +.panel-header > h1 { + display: inline; + flex: auto; + font-size: inherit; + font-weight: 600; + margin: 0; +} + +.panel-header.panel-header-with-info-button > .panel-info-button { + margin-inline-end: var(--arrowpanel-header-info-icon-margin-inline-end); +} + +.panel-header.panel-header-with-info-button > h1 { + /* Add the size of the info button to center properly. */ + margin-inline-start: calc(var(--arrowpanel-header-info-icon-full-width) + var(--arrowpanel-header-info-icon-margin-inline-end)); +} + +.panel-header > .subviewbutton-back + h1 { + /* Add the size of the back button to center properly. */ + margin-inline-end: var(--arrowpanel-header-back-icon-full-width); +} + +.panel-header > h1 > span { + display: inline-block; + white-space: pre-wrap; +} + +.panel-header > .subviewbutton-back { + -moz-context-properties: fill; + fill: var(--arrowpanel-color); + list-style-image: url(chrome://global/skin/icons/arrow-left.svg); + padding: var(--arrowpanel-header-back-icon-padding); +} + +.panel-header > .subviewbutton-back:-moz-locale-dir(rtl) { + list-style-image: url(chrome://global/skin/icons/arrow-right.svg); +} + +.subviewbutton-back { + margin: 0; +} + +.subviewbutton-back > .toolbarbutton-text { + display: none; +} + +/* What's New panel */ +#customizationui-widget-multiview #PanelUI-whatsNew { + max-width: var(--menu-panel-width); +} + +#protections-popup #messaging-system-message-container { + height: 260px; + overflow: hidden; + transition: margin-bottom .25s; +} + +#protections-popup #messaging-system-message-container[disabled] { + /* Offset the height when hidden. This makes the panel content + * cover the info message and reveal it as it slides down, rather + * than the info message growing in height. */ + margin-bottom: -260px; + pointer-events: none; +} + +#protections-popup #messaging-system-message-container[disabled] #protections-popup-message { + opacity: 0; +} + +#protections-popup-message { + display: flex; + align-items: flex-end; + height: calc(100% - 20px); + margin: 10px; + transition: opacity .25s; + opacity: 1; + background-image: url(chrome://browser/skin/controlcenter/hero-message-background.svg); + background-repeat: no-repeat; + background-position: top right; + -moz-context-properties: fill; +} + +#protections-popup-message:-moz-locale-dir(rtl) { + background-position-x: left; +} + +#protections-popup-message .protections-popup-content { + display: block; + margin: 12px 0; +} + +panelview[mainview] #PanelUI-whatsNew-content { + height: 43em; +} + +/* Hide the What's New header when the panel is a subview */ +panelview:not([mainview]) #PanelUI-whatsNew-title { + display: none; +} + +#PanelUI-whatsNew .panelMenu-toggleWhatsNew-checkbox { + padding-inline-start: 16px; + min-height: 41px; +} + +#PanelUI-whatsNew .whatsNew-message { + cursor: pointer; + margin: 0; + padding: 0; +} + +/* The following 2 rules show a 1 pixel line separator between What's New + * messages while at the same time ensuring that the first message (which has + * a date header) will not show the separator + */ +#PanelUI-whatsNew .whatsNew-message-body::before { + content: ""; + display: block; + height: 1px; + width: 104%; + margin-inline-start: -2%; + background: var(--panel-separator-color); +} + +#PanelUI-whatsNew .has-icon::before { + /* the width of the icon + the grid margin */ + width: calc(104% + 40px); +} + +#PanelUI-whatsNew .whatsNew-message-date + .whatsNew-message-body::before { + display: none; +} + +#PanelUI-whatsNew .whatsNew-message-date { + font-size: .85em; + margin: -12px; + margin-top: 0; + margin-inline-start: 0; + padding: 6px 16px; + background: var(--arrowpanel-dimmed); +} + +#PanelUI-whatsNew .whatsNew-message-body { + padding: 5px 0 10px; + margin: 10px 16px; + text-align: inherit; + text-decoration: none; + color: inherit; + background: none; + border: none; + cursor: pointer; +} + +#protections-popup-message .whatsNew-message-body { + /* -10px to compensate for the margin on the container. We can't get rid of that + because it helps position the background image. */ + margin: 0 calc(-10px + var(--horizontal-padding)) var(--vertical-section-padding); + margin-inline: 6px; +} + +#PanelUI-whatsNew .whatsNew-message-body.has-icon { + display: grid; + grid-template-columns: auto 32px; + grid-template-rows: 0; + grid-gap: 0 8px; +} + +#PanelUI-whatsNew .whatsNew-message-icon { + height: 32px; + width: 32px; + margin: 14px auto; + display: grid; + grid-column-start: 2; +} + +#PanelUI-whatsNew .whatsNew-message-title, +#protections-popup-message .whatsNew-message-title { + display: grid; + font-size: 1.3em; + font-weight: 600; + line-height: 1.4em; + margin: 14px 0 0; + grid-column-start: 1; +} + +#PanelUI-whatsNew .whatsNew-message-title-large { + font-size: 2.1em; + margin: 2px 0; + font-weight: 300; + grid-column-start: 1; +} + +#PanelUI-whatsNew .whatsNew-message-subtitle { + margin: 2px 0; + font-size: .8em; + color: #949494; + font-weight: normal; + grid-column-start: 1; +} + +#PanelUI-whatsNew .whatsNew-message-content { + display: grid; + margin: 5px 0 10px; + grid-column-start: 1; +} + +#PanelUI-whatsNew .text-link { + background: none; + border: 0; + color: #45a1ff; + cursor: pointer; + font-size: .9em; + grid-column-start: 1; +} + +#protections-popup-message .text-link { + color: inherit; + font-weight: 600; +} + +#PanelUI-whatsNew .text-link:hover { + color: #0a84ff; + text-decoration: underline; +} + +#PanelUI-whatsNew .text-link:hover:active { + color: #0060df; +} + +/* In the next two rules the panel's width is set according to the + * profiler backdrop image when not opened from the overflow panel. */ +#customizationui-widget-panel #PanelUI-profiler { + min-width: 319px; + max-width: 319px; +} + +#customizationui-widget-panel[viewId="PanelUI-profiler"] { + --panel-width: 319px; + } + +:where(#PanelUI-profiler) :is(description, label) { + margin: 0; +} + +#widget-overflow #PanelUI-profiler-header { + display: none; +} + +#PanelUI-profiler-header[isinfocollapsed="false"] { + background: radial-gradient(circle farthest-side at top right, #03b1f4, #0556cd); + color: #fff; + /* Set custom hover/focus/active states on the info button, + to make them more visible on the header background */ + --panel-item-hover-bgcolor: #0005; + --panel-item-active-bgcolor: #0007; +} + +#PanelUI-profiler-header[isinfocollapsed="false"]:-moz-locale-dir(rtl) { + background: radial-gradient(circle farthest-side at top left, #03b1f4, #0556cd); +} + +#PanelUI-profiler-header[isinfocollapsed="false"] :is(button, toolbarbutton):focus-visible { + outline-color: currentColor; +} + +#PanelUI-profiler-header[isinfocollapsed="false"] toolbarseparator { + border-color: #0003; +} + +#PanelUI-profiler-header[isinfocollapsed="true"] #PanelUI-profiler-info { + opacity: 0; + pointer-events: none; +} + +#PanelUI-profiler-info { + min-height: 180px; + padding: 0 15px 15px; + background: top 10px right no-repeat + url("chrome://browser/skin/profiler-popup-backdrop.png"); + opacity: 1; +} + +/* The header has an attribute "animationready" that is either set to "true" or to + "false". When the DOM is being initialized it is set to "false" so that animations + do not run. */ +#PanelUI-profiler-header[animationready="true"] #PanelUI-profiler-info { + transition: margin-block-end 250ms, opacity 250ms; +} + +/* Override themes for the Pocket panel, because the Pocket + panel currently only supports dark and light themes. */ +@media not (prefers-color-scheme: dark){ + #customizationui-widget-panel[viewId="PanelUI-savetopocket"] { + --arrowpanel-background: #fbfbfb; + } +} + +#PanelUI-profiler-content { + position: relative; + padding: calc(15px - var(--panel-separator-margin-vertical)) 15px 15px; +} + +.PanelUI-profiler-description-title { + font-size: 1.3em; + font-weight: 600; + margin-block: 2px; +} + +.PanelUI-profiler-description { + margin-block: 4px; +} + +#PanelUI-profiler-learn-more { + margin-top: 4px; + color: #fff; + text-decoration: underline; +} + +#PanelUI-profiler-learn-more:hover:active { + color: #fffc; +} + +#PanelUI-profiler-presets { + margin: 8px 0; +} + +#PanelUI-profiler-content-edit-settings { + font-size: .9em; +} + +.PanelUI-profiler-content-label { + font-weight: 600; +} + +#PanelUI-profiler-content-description { + margin-block: 4px; + font-size: .9em; + color: var(--panel-description-color); +} + +#PanelUI-profiler-content-recording:not([hidden]) { + display: flex; + place-items: center; + place-content: center; + gap: 13px; + padding-block: 28px; + font-size: 1.3em; +} + +.PanelUI-profiler-recording-icon { + width: 42px; + list-style-image: url(chrome://devtools/skin/images/tool-profiler.svg); + -moz-context-properties: fill; + fill: currentColor; + opacity: 0.3; +} + +.PanelUI-profiler-button { + appearance: none; + background-color: var(--button-bgcolor); + border-radius: 4px; + color: var(--button-color); + padding: 8px; + margin: 0 5px; +} + +.PanelUI-profiler-button:hover { + background-color: var(--button-hover-bgcolor); +} + +.PanelUI-profiler-button:hover:active { + background-color: var(--button-active-bgcolor); +} + +.PanelUI-profiler-button:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +.PanelUI-profiler-button-primary { + background-color: var(--button-primary-bgcolor); + color: var(--button-primary-color); +} + +.PanelUI-profiler-button-primary:hover { + background-color: var(--button-primary-hover-bgcolor); +} + +.PanelUI-profiler-button-primary:hover:active { + background-color: var(--button-primary-active-bgcolor); +} + +.PanelUI-profiler-shortcut { + padding-block-start: 5px; + opacity: 0.5; + text-align: center; +} + +.PanelUI-profiler-buttons { + margin: 7px 10px 0; +} + +.PanelUI-profiler-info-icon { + margin-inline-end: 10px; + margin-block-start: 25px; + width: 50px; + list-style-image: url(chrome://devtools/skin/images/tool-profiler.svg); + -moz-context-properties: fill; + fill: #fff; +} + +#PanelUI-profiler-presets[disabled="true"]::part(label-box) { + opacity: 0.5; +} + +/* Web-extension pop-ups */ + +.cui-widget-panelview[id^=PanelUI-webext-] { + border-radius: var(--arrowpanel-border-radius); +} + +.webextension-popup-browser, +.webextension-popup-stack { + border-radius: inherit; +} + +.webextension-popup-stack { + position: relative; +} diff --git a/browser/themes/shared/customizableui/whimsy.png b/browser/themes/shared/customizableui/whimsy.png new file mode 100644 index 0000000000..ba53aa98ef Binary files /dev/null and b/browser/themes/shared/customizableui/whimsy.png differ diff --git a/browser/themes/shared/downloads/allDownloadsView.inc.css b/browser/themes/shared/downloads/allDownloadsView.inc.css new file mode 100644 index 0000000000..bbe678fde9 --- /dev/null +++ b/browser/themes/shared/downloads/allDownloadsView.inc.css @@ -0,0 +1,98 @@ +/* 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 "chrome://browser/skin/downloads/progressmeter.css"; +@import "chrome://browser/skin/downloads/download-blockedStates.css"; + +/*** View and outer controls ***/ + +#downloadsListBox { + margin: 0; +} + +/*** List items ***/ + +#downloadsListBox > richlistitem { + min-height: 4.5em; +} + +.downloadTypeIcon { + margin: 8px 13px; + width: 32px; + height: 32px; +} + +.downloadTarget { + margin: 0; +} + +.downloadDetails { + opacity: 0.7; + font-size: 95%; + /* Use calc() to keep the height consistent with .downloadTarget, so that the + progress bar can be vertically centered. */ + margin: 4px 0 calc(1em / 0.95 - 1em); +} + +.downloadDetailsHover, +.downloadDetailsButtonHover { + display: none; +} + +.downloadButton { + appearance: none; + -moz-box-align: center; + background: transparent; + min-width: 0; + min-height: 0; + margin: 0; + border: none; + color: inherit; + padding: 0 12px; +} + +.downloadButton > .button-box { + padding: 8px; + border-radius: 4px; +} + +.downloadButton > .button-box > .button-icon { + width: 16px; + height: 16px; + margin: 0; + -moz-context-properties: fill; + fill: currentColor; +} + +.downloadButton > .button-box > .button-text { + display: none; +} + +.downloadButton:hover > .button-box { + background-color: color-mix(in srgb, currentColor 15%, transparent); +} + +.downloadButton:hover:active > .button-box { + background-color: color-mix(in srgb, currentColor 30%, transparent); +} + +/*** Button icons ***/ + +.downloadIconCancel > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/close.svg"); +} + +.downloadIconShow > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +@media (-moz-platform: macos) { + .downloadIconShow > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); + } +} + +.downloadIconRetry > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/reload.svg"); +} diff --git a/browser/themes/shared/downloads/contentAreaDownloadsView.css b/browser/themes/shared/downloads/contentAreaDownloadsView.css new file mode 100644 index 0000000000..c2e27b1d08 --- /dev/null +++ b/browser/themes/shared/downloads/contentAreaDownloadsView.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/. */ + +@import url("chrome://global/skin/in-content/common.css"); + +#contentAreaDownloadsView { + padding: 18px; +} + +#downloadsListBox:empty { + border-color: transparent; + background-color: transparent; +} + +.downloadButton:not([disabled="true"]):hover, +.downloadButton:not([disabled="true"]):hover:active, +.downloadButton:not([disabled]):hover:active { + background: transparent; + border: none; +} + +#downloadsListEmptyDescription { + margin: 1em; + text-align: center; + color: var(--in-content-deemphasized-text); +} diff --git a/browser/themes/shared/downloads/download-blockedStates.css b/browser/themes/shared/downloads/download-blockedStates.css new file mode 100644 index 0000000000..7a68a381c0 --- /dev/null +++ b/browser/themes/shared/downloads/download-blockedStates.css @@ -0,0 +1,62 @@ +/* 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/. */ + +.downloadBlockedBadge { + background-repeat: no-repeat; + width: 16px; + height: 16px; + margin: 0; + margin-inline: 16px; +} + +#downloadsPanel-blockedSubview[verdict="Insecure"] .downloadsPanel-blockedSubview-image, +#downloadsPanel-blockedSubview[verdict="Malware"] .downloadsPanel-blockedSubview-image, +#downloadsListBox > richlistitem[verdict="Insecure"] .downloadBlockedBadge, +#downloadsListBox > richlistitem[verdict="Malware"] .downloadBlockedBadge { + background-image: url("chrome://global/skin/icons/error.svg"); + -moz-context-properties: fill; + fill: #e22850; +} + +:root[lwt-popup-brighttext] #downloadsPanel-blockedSubview[verdict="Insecure"] .downloadsPanel-blockedSubview-image, +:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Insecure"] .downloadBlockedBadge, +:root[lwt-popup-brighttext] #downloadsPanel-blockedSubview[verdict="Malware"] .downloadsPanel-blockedSubview-image, +:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Malware"] .downloadBlockedBadge { + fill: #FF9AA2; +} + +#downloadsPanel-blockedSubview[verdict="Uncommon"] .downloadsPanel-blockedSubview-image, +#downloadsListBox > richlistitem[verdict="Uncommon"] .downloadBlockedBadge { + -moz-context-properties: fill; + fill: #0090ED; + background-image: url("chrome://global/skin/icons/info-filled.svg"); +} + +:root[lwt-popup-brighttext] #downloadsPanel-blockedSubview[verdict="Uncommon"] .downloadsPanel-blockedSubview-image, +:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Uncommon"] .downloadBlockedBadge { + fill: #80EBFF; +} + +.downloadsPanel-blockedSubview-image { + width: 16px; + background-repeat: no-repeat; + margin-inline-end: 25px; +} + +.downloadsPanel-blockedSubview-title-box { + margin-block: 21.5px 0; +} + +#downloadsPanel-blockedSubview-title { + -moz-box-flex: 1; +} + +#downloadsPanel-blockedSubview[verdict="PotentiallyUnwanted"] .downloadsPanel-blockedSubview-image, +#downloadsPanel-blockedSubview[verdict="DownloadSpam"] .downloadsPanel-blockedSubview-image, +#downloadsListBox > richlistitem[verdict="PotentiallyUnwanted"] .downloadBlockedBadge, +#downloadsListBox > richlistitem[verdict="DownloadSpam"] .downloadBlockedBadge { + -moz-context-properties: fill; + fill: #ffbf00; + background-image: url("chrome://global/skin/icons/warning.svg"); +} diff --git a/browser/themes/shared/downloads/download-summary.svg b/browser/themes/shared/downloads/download-summary.svg new file mode 100644 index 0000000000..c10ee95fcb --- /dev/null +++ b/browser/themes/shared/downloads/download-summary.svg @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/browser/themes/shared/downloads/downloads.inc.css b/browser/themes/shared/downloads/downloads.inc.css new file mode 100644 index 0000000000..64c3253bfb --- /dev/null +++ b/browser/themes/shared/downloads/downloads.inc.css @@ -0,0 +1,271 @@ +/* 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 "chrome://browser/skin/downloads/progressmeter.css"; +@import "chrome://browser/skin/downloads/download-blockedStates.css"; + +/*** Panel and outer controls ***/ + +#downloadsListBox { + background: transparent; + color: inherit; + appearance: none; + border: 0; + margin: 0; + /* We have an explicit width set by l10n, but we still want to fill our + * container if it's wider. */ + min-width: 100%; +} + +@media not (prefers-contrast) { + #downloadsListBox[disabled] { + opacity: var(--downloads-item-disabled-opacity) !important; + } +} + +@media (prefers-contrast) { + #downloadsListBox[disabled] { + color: GrayText; + } +} + +#emptyDownloads { + padding: 1.5em 8px 2.1em; + margin: 0; + pointer-events: none; +} + +#downloadsListBox > richlistitem { + /* Leave space for the 32x32 icon with 16px vertical padding, and/or + * the text in the item, with the same padding, whichever is bigger: */ + min-height: max(48px, calc(16px + 2em)); + padding-inline-end: 4px; + margin: 0 0 8px; + border-radius: 4px; +} + +.downloadMainArea { + padding-block: 8px; + padding-inline-start: 4px; + border-radius: 4px; + min-width: 0; +} + +.downloadContainer { + min-width: 0; +} + +#downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover, +#downloadsListBox > richlistitem.openWhenFinished.hoveringMainArea:hover, +#downloadsListBox > richlistitem[verdict]:hover, +#downloadsListBox > richlistitem.openWhenFinished:hover, +.downloadsPanelFooterButton:hover { + background-color: var(--panel-item-hover-bgcolor); +} + +#downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover:active, +#downloadsListBox > richlistitem.openWhenFinished.hoveringMainArea:hover:active, +#downloadsListBox > richlistitem[verdict]:hover:active, +.downloadsPanelFooterButton[open="true"] { + background-color: var(--panel-item-active-bgcolor); +} + +#downloadsListBox:focus-visible > richlistitem[selected], +#downloadsListBox[force-focus-visible]:focus > richlistitem[selected], +.downloadButton:focus-visible, +#downloadsSummary:focus-visible, +.downloadsPanelFooterButton:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +#downloadsListBox > richlistitem[verdict="Insecure"] .downloadDetails, +#downloadsListBox > richlistitem[verdict="Malware"] .downloadDetails { + color: #C50042; + /* The details text usually gets an opacity reduction, but for the error + states we disable that, because it would reduce the contrast too much. */ + opacity: inherit; +} + +:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Insecure"] .downloadDetails, +:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Malware"] .downloadDetails { + color: #FF848B; +} + +.downloadTypeIcon { + margin-inline-end: 0.7em; +} + +#downloadsPanel-blockedSubview-buttons { + margin-top: 1.5em; +} + +#downloadsSummary { + background: var(--arrowpanel-dimmed); + border-top: 1px solid var(--panel-separator-color); + /* Reserve the same space as the button and separator in download items. */ + padding-inline-end: 59px; + -moz-user-focus: normal; +} + +#downloadsSummary > .downloadTypeIcon { + list-style-image: url("chrome://browser/skin/downloads/download-summary.svg"); +} + +#downloadsSummaryDescription { + color: -moz-nativehyperlinktext; +} + +:root[lwt-popup-brighttext] #downloadsSummaryDescription { + color: #75baff; /* --blue-30 */ +} + +/*** List items and similar elements in the summary ***/ +#downloadsSummary { + min-height: var(--downloads-item-height); +} + +#downloadsListBox > richlistitem { + background: transparent; + color: inherit; +} + +#downloadsListBox > richlistitem:last-child { + margin-bottom: 0; +} + +.downloadTypeIcon { + width: 32px; + height: 32px; +} + +#downloadsSummaryDescription, +.downloadTarget { + margin: 0; +} + +#downloadsSummaryDetails, +.downloadDetails { + font-size: calc(100% * var(--downloads-item-font-size-factor)); + opacity: var(--downloads-item-details-opacity); + /* Use calc() to keep the height consistent with .downloadTarget, so that the + progress bar can be vertically centered. */ + margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em); +} + +/* When hovering the mouse pointer over the item, instead of the normal message + we display a more detailed one. For blocked downloads the entire area shows + the hover message, for other downloads only the main area does. */ +#downloadsListBox > richlistitem[verdict]:hover > .downloadMainArea > .downloadContainer > .downloadDetailsNormal, +#downloadsListBox > richlistitem[verdict]:not(:hover) > .downloadMainArea > .downloadContainer > .downloadDetailsHover, +.downloadMainArea:hover > .downloadContainer > .downloadDetailsNormal, +#downloadsListBox > richlistitem:not([verdict]) > .downloadMainArea:not(:hover) > .downloadContainer > .downloadDetailsHover { + display: none; +} + +/* When hovering the action button in particular, instead of the usual hover + message we display the command associated with the button. */ +#downloadsListBox > richlistitem.downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsNormal, +#downloadsListBox > richlistitem.downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsHover, +#downloadsListBox > richlistitem:not(.downloadHoveringButton) > .downloadMainArea > .downloadContainer > .downloadDetailsButtonHover { + display: none; +} + +.downloadButton { + appearance: none; + min-width: 32px; + height: 32px; + margin: 0; + margin-inline-start: 4px; + border: 1px solid transparent; + padding: 0; + background: transparent; + color: inherit; + border-radius: 4px; + --button-hover-bgcolor: var(--panel-item-hover-bgcolor); + --button-hover-color: inherit; + --button-active-bgcolor: var(--panel-item-active-bgcolor); + --button-active-color: inherit; +} + +.downloadButton > .button-box > .button-icon { + width: 16px; + height: 16px; + margin: 1px; + -moz-context-properties: fill; + fill: currentColor; +} + +.downloadButton > .button-box > .button-text { + margin: 0 !important; + padding: 0; +} + +@media (prefers-contrast) { + .downloadButton { + background-color: ButtonFace; + color: ButtonText; + border-color: currentColor; + --button-hover-bgcolor: SelectedItem; + --button-hover-color: SelectedItemText; + --button-active-bgcolor: ButtonFace; + --button-active-color: ButtonText; + } +} + +.downloadButton:hover:not(:active) { + background-color: var(--button-hover-bgcolor); + color: var(--button-hover-color); + border-color: var(--button-hover-bgcolor); +} +.downloadButton:hover:active { + background-color: var(--button-active-bgcolor); + color: var(--button-active-color); +} + +/*** Button icons ***/ + +.downloadIconCancel > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/close.svg"); +} + +.downloadIconShow > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +@media (-moz-platform: macos) { + .downloadIconShow > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); + } +} + +.downloadIconRetry > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/reload.svg"); +} + +.downloadIconSubviewArrow > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/arrow-left.svg"); +} + +.downloadIconSubviewArrow > .button-box > .button-icon:-moz-locale-dir(ltr) { + list-style-image: url("chrome://global/skin/icons/arrow-right.svg"); +} + +/*** Blocked subview ***/ +#downloadsPanel-blockedSubview-title { + font-size: calc(100% * var(--downloads-item-font-size-factor)); + margin-bottom: 1.5em; +} + +#downloadsPanel-blockedSubview-details1, +#downloadsPanel-blockedSubview-details2 { + font-size: calc(100% * var(--downloads-item-font-size-factor)); + margin-bottom: 0.5em; + opacity: var(--downloads-item-details-opacity); +} + +/*** Toolbarseparator ***/ +#downloadsFooterButtons > toolbarseparator { + margin-inline: 0; +} diff --git a/browser/themes/shared/downloads/downloads.svg b/browser/themes/shared/downloads/downloads.svg new file mode 100644 index 0000000000..a62f31b7e7 --- /dev/null +++ b/browser/themes/shared/downloads/downloads.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/downloads/indicator.css b/browser/themes/shared/downloads/indicator.css new file mode 100644 index 0000000000..875023f841 --- /dev/null +++ b/browser/themes/shared/downloads/indicator.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/. */ + +/*** Status and progress indicator ***/ +#downloads-button { + --download-progress-pcent: 0%; +} + +#downloads-indicator-anchor { + min-width: 16px; + min-height: 16px; + -moz-context-properties: fill, fill-opacity; + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} + +#downloads-button[progress] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon, +#downloads-button[animate][notification] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon { + visibility: hidden; +} + +#wrapper-downloads-button > #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon { + visibility: visible; +} + +#downloads-button[attention="success"] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon { + fill: var(--toolbarbutton-icon-fill-attention); + fill-opacity: 1; +} + +#downloads-button > .toolbarbutton-badge-stack > .toolbarbutton-animatable-box { + pointer-events: none; + -moz-context-properties: fill, fill-opacity, stroke; + grid-area: initial; + top: calc(50% - 10px); /* Vertically center the 20px tall animatable image */ + left: calc(50% - 10px); /* Horizontally center the 20px wide animatable image */ + width: 20px; /* Width of each frame within the SVG sprite */ + height: 20px; /* Height of each frame within the SVG sprite */ + /* Animation is not directional and shouldn't be reversed in RTL */ + direction: ltr; + /* Revert to the xul.css user agent stylesheet's z-index value (auto) for + stack children, to ensure the badge (the last child of the stack) appears in + front of the animatable boxes */ + z-index: revert; +} + +/* Hide progress and state animations in customize mode */ +toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > .toolbarbutton-animatable-box, +toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer { + display: none; +} + +#downloads-indicator-start-box > .toolbarbutton-animatable-image, +#downloads-indicator-finish-box > .toolbarbutton-animatable-image { + visibility: hidden; +} + +/* Button progress indication */ +#downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer { + visibility: hidden; + top: calc(50% - 9px); /* Vertically center the 18px tall animatable image */ + left: calc(50% - 9px); /* Horizontally center the 18px wide animatable image */ + width: 18px; + height: 18px; + border-radius: 50%; + border: 1px solid currentColor; + display: flex; + align-items: center; + justify-content: center; +} + +#downloads-button[progress]:not([notification]) > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer { + visibility: visible; +} + +#downloads-indicator-progress-inner { + width: 14px; + height: 14px; + /* + From javascript side we update the --download-progress-pcent variable to show the current progress + */ + background: conic-gradient(var(--toolbarbutton-icon-fill-attention) var(--download-progress-pcent), transparent var(--download-progress-pcent)); + border-radius: 50%; +} + +/*** Status badges ***/ + +#downloads-button[attention="info"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: block; + box-shadow: none; + /* "!important" is necessary to override the rule in toolbarbutton.css */ + margin: -7px 0 0 !important; + margin-inline-end: -4px !important; + min-width: 12px; + min-height: 12px; + -moz-context-properties: fill; + background-size: 12px; +} + +#downloads-button[attention="info"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center; + fill: var(--panel-banner-item-info-icon-bgcolor); +} + +#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: url(chrome://global/skin/icons/warning-fill-12.svg) no-repeat center; + fill: var(--warning-icon-bgcolor); +} + +#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center; + fill: rgb(226,40,80); +} + +toolbar[brighttext] #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + fill: rgb(255,132,138); +} + +#downloads-button[animate] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + /* Don't display the badge until after the animation has cleared. */ + display: none; +} + +/*** Download notifications (transitions between downloading states) ***/ + +#downloads-indicator-start-image { + --anim-steps: 16; + + list-style-image: url("chrome://browser/skin/downloads/notification-start-animation.svg"); + width: calc(20px * (var(--anim-steps) + 1)); + height: 20px; + + fill: currentColor; + fill-opacity: 1; + stroke: currentColor; + + /* initial state for animation */ + transform: translateX(0); +} +#downloads-button[attention="success"] > .toolbarbutton-badge-stack > #downloads-indicator-start-box > #downloads-indicator-start-image { + /* Match the download icon color in the initial animation frames + to the current color of the indicator */ + stroke: var(--toolbarbutton-icon-fill-attention); +} +#downloads-button[washidden] > .toolbarbutton-badge-stack > #downloads-indicator-start-box > #downloads-indicator-start-image { + /* Hide the download icon in the first few animation frames, when the button was just un-hidden */ + stroke: transparent; +} + +#downloads-button[animate][notification="start"] > .toolbarbutton-badge-stack > #downloads-indicator-start-box > #downloads-indicator-start-image { + visibility: visible; + /* Upon changing the animation-duration below, please keep the + setTimeout() identical in indicator.js#_showNotification. + */ + animation-name: downloadsButtonNotification; + animation-duration: calc(var(--anim-steps) * 16.667ms); + animation-timing-function: steps(var(--anim-steps)); + + /* end state for animation: */ + transform: translateX(calc(var(--anim-steps) * -20px)); +} + +#downloads-indicator-finish-image { + --anim-frames: 26; + --anim-steps: calc(var(--anim-frames) + 100); /* Add 100 frames for doing the pause in the middle */ + + fill: var(--toolbarbutton-icon-fill-attention); + fill-opacity: 1; + stroke: var(--toolbarbutton-icon-fill-attention); + + list-style-image: url("chrome://browser/skin/downloads/notification-finish-animation.svg"); + width: calc(20px * (var(--anim-frames) + 1)); + height: 20px; + + /* initial state for animation */ + transform: translateX(0); +} +#downloads-button[open] > .toolbarbutton-badge-stack > #downloads-indicator-finish-box > #downloads-indicator-finish-image { + stroke: currentColor; +} + +#downloads-button[animate][notification="finish"] > .toolbarbutton-badge-stack > #downloads-indicator-finish-box > #downloads-indicator-finish-image { + visibility: visible; + animation-name: downloadsButtonFinishedNotification; + animation-duration: calc(var(--anim-steps) * 16.667ms); + + /* end state for animation: */ + transform: translateX(calc(var(--anim-frames) * -20px)); +} + +@keyframes downloadsButtonNotification { + from { + transform: translateX(0); + } +} + +@keyframes downloadsButtonFinishedNotification { + from { + animation-timing-function: steps(18); + transform: translateX(0); + } + 14.28% { /* 18th frame (18/126) */ + transform: translateX(calc(18 * -20px)); + } + 93.65% { /* Wait 100 frames of time, but resume from 18th frame (118/126) */ + animation-timing-function: steps(8); + transform: translateX(calc(18 * -20px)); + } +} diff --git a/browser/themes/shared/downloads/notification-finish-animation.svg b/browser/themes/shared/downloads/notification-finish-animation.svg new file mode 100644 index 0000000000..cef56f13f8 --- /dev/null +++ b/browser/themes/shared/downloads/notification-finish-animation.svg @@ -0,0 +1,193 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/downloads/notification-start-animation.svg b/browser/themes/shared/downloads/notification-start-animation.svg new file mode 100644 index 0000000000..14e3061657 --- /dev/null +++ b/browser/themes/shared/downloads/notification-start-animation.svg @@ -0,0 +1,144 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/downloads/progressmeter.css b/browser/themes/shared/downloads/progressmeter.css new file mode 100644 index 0000000000..892cea7135 --- /dev/null +++ b/browser/themes/shared/downloads/progressmeter.css @@ -0,0 +1,95 @@ +/* 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/. */ + +/*** Common-styled progressmeter ***/ + +:root { + --download-progress-fill-color: AccentColor; + --download-progress-paused-color: GrayText; + --download-progress-flare-color: rgba(255,255,255,0.75); +} + +/* download progress bar is used in contexts which are not LightweightThemeConsumers and + do not get the lwt- theme variables. So we duplicate the fallbacks here. */ +:root:-moz-lwtheme { + --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,97,224)); +} + +@media (prefers-color-scheme: dark) { + :root:-moz-lwtheme { + --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,221,255)); + } + #contentAreaDownloadsView { + --download-progress-fill-color: var(--in-content-item-selected); + } +} + +:root[lwt-popup-brighttext] panel, +toolbar[brighttext]:-moz-lwtheme { + --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,221,255)); +} + +/* + * Styling "html:progress" is limited by the fact that a number of properties + * are intentionally locked at the UA stylesheet level. We have to use a border + * instead of an outline because the latter would be drawn over the progress + * bar and we cannot change its z-index. This means we have to use a negative + * margin, except when the value is zero, and adjust the width calculation for + * the indeterminate state. + */ + +.downloadProgress { + appearance: none; + display: -moz-box; + margin-block: 5px 1px; + /* This value is kinda odd, it's used to align with the edge of the badge, + * if shown, which is inside the edge of the image (the image gets 16px + * margin). */ + margin-inline-end: 18px; + border: none; + height: 4px; + border-radius: 2px; + background-color: color-mix(in srgb, currentColor 15%, transparent); +} + +/* Ensure we have contrast in selected download items */ +#downloadsListBox.allDownloadsListBox richlistitem[selected] .downloadProgress::-moz-progress-bar { + --download-progress-fill-color: currentColor; + --download-progress-flare-color: AccentColor; +} + +.downloadProgress::-moz-progress-bar { + appearance: none; + background-color: var(--download-progress-fill-color); + border-radius: 2px; +} + +.downloadProgress[paused]::-moz-progress-bar { + background-color: var(--download-progress-paused-color); +} + +.downloadProgress:indeterminate::-moz-progress-bar { + width: calc(100% + 2px); + /* Make a white reflecting animation. + Create a gradient with 2 identical patterns, and enlarge the size to 200%. + This allows us to animate background-position with percentage. */ + background-color: var(--download-progress-fill-color); + background-image: linear-gradient(90deg, transparent 0%, + var(--download-progress-flare-color) 25%, + transparent 50%, + var(--download-progress-flare-color) 75%, + transparent 100%); + background-blend-mode: normal; + background-size: 200% 100%; + animation: downloadProgressSlideX 1.5s linear infinite; +} + +@keyframes downloadProgressSlideX { + 0% { + background-position: 0 0; + } + 100% { + background-position: -100% 0; + } +} diff --git a/browser/themes/shared/drm-icon.svg b/browser/themes/shared/drm-icon.svg new file mode 100644 index 0000000000..8b510a1c53 --- /dev/null +++ b/browser/themes/shared/drm-icon.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/e10s-64@2x.png b/browser/themes/shared/e10s-64@2x.png new file mode 100644 index 0000000000..7bc8a60e18 Binary files /dev/null and b/browser/themes/shared/e10s-64@2x.png differ diff --git a/browser/themes/shared/fullscreen/warning.css b/browser/themes/shared/fullscreen/warning.css new file mode 100644 index 0000000000..fc1c203a78 --- /dev/null +++ b/browser/themes/shared/fullscreen/warning.css @@ -0,0 +1,50 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +html|*.pointerlockfswarning { + align-items: center; + background: rgba(45, 62, 72, 0.9); + border: 2px solid currentColor; + box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5); + border-radius: 8px; + color: #fafafa; + padding: 24px 16px; + font: message-box; +} + +html|*.pointerlockfswarning:is([data-identity="verifiedDomain"], [data-identity="unknownIdentity"])::before { + content: ""; + background-size: cover; + margin: 0; + width: 24px; + height: 24px; + -moz-context-properties: fill; + fill: currentColor; +} + +html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before { + background-image: url("chrome://global/skin/icons/security.svg"); +} + +html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before { + background-image: url("chrome://global/skin/icons/security-broken.svg"); +} + +html|*.pointerlockfswarning-domain-text, +html|*.pointerlockfswarning-generic-text { + font-size: 21px; + font-weight: lighter; + margin: 0 16px; +} + +html|*.pointerlockfswarning-domain { + font-weight: bold; + margin: 0; +} + +html|*#fullscreen-exit-button { + margin: 0; +} diff --git a/browser/themes/shared/fxa/add-device.svg b/browser/themes/shared/fxa/add-device.svg new file mode 100644 index 0000000000..361095bae7 --- /dev/null +++ b/browser/themes/shared/fxa/add-device.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/fxa/avatar-color.svg b/browser/themes/shared/fxa/avatar-color.svg new file mode 100644 index 0000000000..5a87586b35 --- /dev/null +++ b/browser/themes/shared/fxa/avatar-color.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/browser/themes/shared/fxa/avatar-empty.svg b/browser/themes/shared/fxa/avatar-empty.svg new file mode 100644 index 0000000000..9f7a8266f7 --- /dev/null +++ b/browser/themes/shared/fxa/avatar-empty.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/fxa/avatar.svg b/browser/themes/shared/fxa/avatar.svg new file mode 100644 index 0000000000..9391f57540 --- /dev/null +++ b/browser/themes/shared/fxa/avatar.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/fxa/fxa-spinner.svg b/browser/themes/shared/fxa/fxa-spinner.svg new file mode 100644 index 0000000000..1c3c739cf5 --- /dev/null +++ b/browser/themes/shared/fxa/fxa-spinner.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/fxa/monitor.svg b/browser/themes/shared/fxa/monitor.svg new file mode 100644 index 0000000000..04df0e0029 --- /dev/null +++ b/browser/themes/shared/fxa/monitor.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/fxa/send-to-device.svg b/browser/themes/shared/fxa/send-to-device.svg new file mode 100644 index 0000000000..0d6e6a4253 --- /dev/null +++ b/browser/themes/shared/fxa/send-to-device.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/fxa/send.svg b/browser/themes/shared/fxa/send.svg new file mode 100644 index 0000000000..e5c36eace8 --- /dev/null +++ b/browser/themes/shared/fxa/send.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/fxa/sync-devices.svg b/browser/themes/shared/fxa/sync-devices.svg new file mode 100644 index 0000000000..9d4f3fb97d --- /dev/null +++ b/browser/themes/shared/fxa/sync-devices.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/fxa/sync-illustration-issue.svg b/browser/themes/shared/fxa/sync-illustration-issue.svg new file mode 100644 index 0000000000..9fdfb1e65d --- /dev/null +++ b/browser/themes/shared/fxa/sync-illustration-issue.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/fxa/sync-illustration.svg b/browser/themes/shared/fxa/sync-illustration.svg new file mode 100644 index 0000000000..155d2a4009 --- /dev/null +++ b/browser/themes/shared/fxa/sync-illustration.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/icons/add-circle-fill.svg b/browser/themes/shared/icons/add-circle-fill.svg new file mode 100644 index 0000000000..4732d4f63c --- /dev/null +++ b/browser/themes/shared/icons/add-circle-fill.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/back.svg b/browser/themes/shared/icons/back.svg new file mode 100644 index 0000000000..b52c06b776 --- /dev/null +++ b/browser/themes/shared/icons/back.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/bookmark-12.svg b/browser/themes/shared/icons/bookmark-12.svg new file mode 100644 index 0000000000..96a8f82355 --- /dev/null +++ b/browser/themes/shared/icons/bookmark-12.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/bookmark-hollow.svg b/browser/themes/shared/icons/bookmark-hollow.svg new file mode 100644 index 0000000000..23c8a48dd3 --- /dev/null +++ b/browser/themes/shared/icons/bookmark-hollow.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/bookmark-star-on-tray.svg b/browser/themes/shared/icons/bookmark-star-on-tray.svg new file mode 100644 index 0000000000..49b83232ca --- /dev/null +++ b/browser/themes/shared/icons/bookmark-star-on-tray.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/bookmark.svg b/browser/themes/shared/icons/bookmark.svg new file mode 100644 index 0000000000..47ba62c026 --- /dev/null +++ b/browser/themes/shared/icons/bookmark.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/bookmarks-toolbar.svg b/browser/themes/shared/icons/bookmarks-toolbar.svg new file mode 100644 index 0000000000..2840b5dffc --- /dev/null +++ b/browser/themes/shared/icons/bookmarks-toolbar.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/canvas-blocked.svg b/browser/themes/shared/icons/canvas-blocked.svg new file mode 100644 index 0000000000..636b6f8fa8 --- /dev/null +++ b/browser/themes/shared/icons/canvas-blocked.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/icons/canvas.svg b/browser/themes/shared/icons/canvas.svg new file mode 100644 index 0000000000..4a3e99094f --- /dev/null +++ b/browser/themes/shared/icons/canvas.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/icons/characterEncoding.svg b/browser/themes/shared/icons/characterEncoding.svg new file mode 100644 index 0000000000..6cd4f56dd1 --- /dev/null +++ b/browser/themes/shared/icons/characterEncoding.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/chevron-animation.svg b/browser/themes/shared/icons/chevron-animation.svg new file mode 100644 index 0000000000..0cf17dcc46 --- /dev/null +++ b/browser/themes/shared/icons/chevron-animation.svg @@ -0,0 +1,391 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/icons/customize.svg b/browser/themes/shared/icons/customize.svg new file mode 100644 index 0000000000..f0da3a385b --- /dev/null +++ b/browser/themes/shared/icons/customize.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/device-desktop.svg b/browser/themes/shared/icons/device-desktop.svg new file mode 100644 index 0000000000..51c7bf0a74 --- /dev/null +++ b/browser/themes/shared/icons/device-desktop.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/device-phone.svg b/browser/themes/shared/icons/device-phone.svg new file mode 100644 index 0000000000..81094ef961 --- /dev/null +++ b/browser/themes/shared/icons/device-phone.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/device-tablet.svg b/browser/themes/shared/icons/device-tablet.svg new file mode 100644 index 0000000000..58e61faa11 --- /dev/null +++ b/browser/themes/shared/icons/device-tablet.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/device-tv.svg b/browser/themes/shared/icons/device-tv.svg new file mode 100644 index 0000000000..ed65b4a229 --- /dev/null +++ b/browser/themes/shared/icons/device-tv.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/device-vr.svg b/browser/themes/shared/icons/device-vr.svg new file mode 100644 index 0000000000..1a60279c88 --- /dev/null +++ b/browser/themes/shared/icons/device-vr.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/edit-cut.svg b/browser/themes/shared/icons/edit-cut.svg new file mode 100644 index 0000000000..e0e685c4c1 --- /dev/null +++ b/browser/themes/shared/icons/edit-cut.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/edit-paste.svg b/browser/themes/shared/icons/edit-paste.svg new file mode 100644 index 0000000000..64b77646c8 --- /dev/null +++ b/browser/themes/shared/icons/edit-paste.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/fingerprint.svg b/browser/themes/shared/icons/fingerprint.svg new file mode 100644 index 0000000000..320d516b07 --- /dev/null +++ b/browser/themes/shared/icons/fingerprint.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/icons/forget.svg b/browser/themes/shared/icons/forget.svg new file mode 100644 index 0000000000..8dc744849d --- /dev/null +++ b/browser/themes/shared/icons/forget.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/forward.svg b/browser/themes/shared/icons/forward.svg new file mode 100644 index 0000000000..2eac6f3ed7 --- /dev/null +++ b/browser/themes/shared/icons/forward.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/fullscreen-exit.svg b/browser/themes/shared/icons/fullscreen-exit.svg new file mode 100644 index 0000000000..227ba4229e --- /dev/null +++ b/browser/themes/shared/icons/fullscreen-exit.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/fullscreen.svg b/browser/themes/shared/icons/fullscreen.svg new file mode 100644 index 0000000000..b525df0668 --- /dev/null +++ b/browser/themes/shared/icons/fullscreen.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/history.svg b/browser/themes/shared/icons/history.svg new file mode 100644 index 0000000000..3772c8f76d --- /dev/null +++ b/browser/themes/shared/icons/history.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/home.svg b/browser/themes/shared/icons/home.svg new file mode 100644 index 0000000000..a9c2ced8e8 --- /dev/null +++ b/browser/themes/shared/icons/home.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/import-export.svg b/browser/themes/shared/icons/import-export.svg new file mode 100644 index 0000000000..b92beabc8d --- /dev/null +++ b/browser/themes/shared/icons/import-export.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/import.svg b/browser/themes/shared/icons/import.svg new file mode 100644 index 0000000000..cc6232af51 --- /dev/null +++ b/browser/themes/shared/icons/import.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/ion.svg b/browser/themes/shared/icons/ion.svg new file mode 100644 index 0000000000..870914287b --- /dev/null +++ b/browser/themes/shared/icons/ion.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/icons/library.svg b/browser/themes/shared/icons/library.svg new file mode 100644 index 0000000000..26bf1ef985 --- /dev/null +++ b/browser/themes/shared/icons/library.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/icons/login.svg b/browser/themes/shared/icons/login.svg new file mode 100644 index 0000000000..51a8f285fc --- /dev/null +++ b/browser/themes/shared/icons/login.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/logo-android.svg b/browser/themes/shared/icons/logo-android.svg new file mode 100644 index 0000000000..b8b0ab040b --- /dev/null +++ b/browser/themes/shared/icons/logo-android.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/logo-ios.svg b/browser/themes/shared/icons/logo-ios.svg new file mode 100644 index 0000000000..dcd70b5588 --- /dev/null +++ b/browser/themes/shared/icons/logo-ios.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/mail.svg b/browser/themes/shared/icons/mail.svg new file mode 100644 index 0000000000..62fd0e0875 --- /dev/null +++ b/browser/themes/shared/icons/mail.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/menu-badged.svg b/browser/themes/shared/icons/menu-badged.svg new file mode 100644 index 0000000000..bbfce72776 --- /dev/null +++ b/browser/themes/shared/icons/menu-badged.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/icons/menu.svg b/browser/themes/shared/icons/menu.svg new file mode 100644 index 0000000000..39628990ce --- /dev/null +++ b/browser/themes/shared/icons/menu.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/icons/new-tab.svg b/browser/themes/shared/icons/new-tab.svg new file mode 100644 index 0000000000..2d475aada0 --- /dev/null +++ b/browser/themes/shared/icons/new-tab.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/notification-fill-12.svg b/browser/themes/shared/icons/notification-fill-12.svg new file mode 100644 index 0000000000..6af8d91526 --- /dev/null +++ b/browser/themes/shared/icons/notification-fill-12.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/open.svg b/browser/themes/shared/icons/open.svg new file mode 100644 index 0000000000..b7682227bf --- /dev/null +++ b/browser/themes/shared/icons/open.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/pin-12.svg b/browser/themes/shared/icons/pin-12.svg new file mode 100644 index 0000000000..2c354bdfa4 --- /dev/null +++ b/browser/themes/shared/icons/pin-12.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/privateBrowsing.svg b/browser/themes/shared/icons/privateBrowsing.svg new file mode 100644 index 0000000000..c896922d7e --- /dev/null +++ b/browser/themes/shared/icons/privateBrowsing.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/quickactions.svg b/browser/themes/shared/icons/quickactions.svg new file mode 100644 index 0000000000..9631efd296 --- /dev/null +++ b/browser/themes/shared/icons/quickactions.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/browser/themes/shared/icons/reader-mode.svg b/browser/themes/shared/icons/reader-mode.svg new file mode 100644 index 0000000000..5454f63ad9 --- /dev/null +++ b/browser/themes/shared/icons/reader-mode.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/icons/reload-to-stop.svg b/browser/themes/shared/icons/reload-to-stop.svg new file mode 100644 index 0000000000..fe7635f1d9 --- /dev/null +++ b/browser/themes/shared/icons/reload-to-stop.svg @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/icons/save.svg b/browser/themes/shared/icons/save.svg new file mode 100644 index 0000000000..0207fb6045 --- /dev/null +++ b/browser/themes/shared/icons/save.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/screenshot.svg b/browser/themes/shared/icons/screenshot.svg new file mode 100644 index 0000000000..92b1473b61 --- /dev/null +++ b/browser/themes/shared/icons/screenshot.svg @@ -0,0 +1,4 @@ + + diff --git a/browser/themes/shared/icons/sidebars-right.svg b/browser/themes/shared/icons/sidebars-right.svg new file mode 100644 index 0000000000..5bf51e168b --- /dev/null +++ b/browser/themes/shared/icons/sidebars-right.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/icons/sidebars.svg b/browser/themes/shared/icons/sidebars.svg new file mode 100644 index 0000000000..e116c9e2d0 --- /dev/null +++ b/browser/themes/shared/icons/sidebars.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/icons/sort.svg b/browser/themes/shared/icons/sort.svg new file mode 100644 index 0000000000..15d68af6d5 --- /dev/null +++ b/browser/themes/shared/icons/sort.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/browser/themes/shared/icons/stop-to-reload.svg b/browser/themes/shared/icons/stop-to-reload.svg new file mode 100644 index 0000000000..fd9b30d86c --- /dev/null +++ b/browser/themes/shared/icons/stop-to-reload.svg @@ -0,0 +1,173 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/icons/subtract-circle-fill.svg b/browser/themes/shared/icons/subtract-circle-fill.svg new file mode 100644 index 0000000000..63a30033f8 --- /dev/null +++ b/browser/themes/shared/icons/subtract-circle-fill.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/success-animation.svg b/browser/themes/shared/icons/success-animation.svg new file mode 100644 index 0000000000..1faa6eb7e6 --- /dev/null +++ b/browser/themes/shared/icons/success-animation.svg @@ -0,0 +1,107 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/icons/sync.svg b/browser/themes/shared/icons/sync.svg new file mode 100644 index 0000000000..888e593abf --- /dev/null +++ b/browser/themes/shared/icons/sync.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/synced-tabs.svg b/browser/themes/shared/icons/synced-tabs.svg new file mode 100644 index 0000000000..deea09780b --- /dev/null +++ b/browser/themes/shared/icons/synced-tabs.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/shared/icons/tab.svg b/browser/themes/shared/icons/tab.svg new file mode 100644 index 0000000000..7585b1987f --- /dev/null +++ b/browser/themes/shared/icons/tab.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/thumb-down.svg b/browser/themes/shared/icons/thumb-down.svg new file mode 100644 index 0000000000..f110985fc0 --- /dev/null +++ b/browser/themes/shared/icons/thumb-down.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/topsites.svg b/browser/themes/shared/icons/topsites.svg new file mode 100644 index 0000000000..6381606fb2 --- /dev/null +++ b/browser/themes/shared/icons/topsites.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/icons/trending.svg b/browser/themes/shared/icons/trending.svg new file mode 100644 index 0000000000..3268e65cf6 --- /dev/null +++ b/browser/themes/shared/icons/trending.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/window.svg b/browser/themes/shared/icons/window.svg new file mode 100644 index 0000000000..1c3e1b24d4 --- /dev/null +++ b/browser/themes/shared/icons/window.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/zoom-out.svg b/browser/themes/shared/icons/zoom-out.svg new file mode 100644 index 0000000000..282a728f3f --- /dev/null +++ b/browser/themes/shared/icons/zoom-out.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/identity-block/identity-block.css b/browser/themes/shared/identity-block/identity-block.css new file mode 100644 index 0000000000..c30d70b8f9 --- /dev/null +++ b/browser/themes/shared/identity-block/identity-block.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/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +#identity-box { + margin-inline-end: var(--identity-box-margin-inline); +} + +#identity-box, +#tracking-protection-icon-container { + /* Set default fill for icons in the identity block. + Individual icons can override this. */ + fill: currentColor; + fill-opacity: var(--urlbar-icon-fill-opacity); +} + +#urlbar.searchButton > #urlbar-input-container > #identity-box[pageproxystate="invalid"], +#identity-box[pageproxystate="invalid"] > #identity-permission-box, +#identity-box[pageproxystate="invalid"] > #notification-popup-box, +#identity-box[pageproxystate="invalid"] #identity-icon-label { + display: none; +} + +#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"] { + pointer-events: none; + -moz-user-focus: ignore; +} + +.identity-box-button:hover:not([open=true]), +#tracking-protection-icon-container:hover:not([open=true]) { + background-color: var(--urlbar-box-hover-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +.identity-box-button:hover:active, +.identity-box-button[open=true], +#tracking-protection-icon-container:hover:active, +#tracking-protection-icon-container[open=true] { + background-color: var(--urlbar-box-active-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +.identity-box-button:focus-visible, +#tracking-protection-icon-container:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +.identity-box-button { + padding-inline: var(--urlbar-icon-padding); + border-radius: var(--urlbar-icon-border-radius); +} + +#identity-icon-label { + padding-inline-start: 4px; +} + +#identity-box[pageproxystate="valid"].notSecureText, +#identity-box[pageproxystate="valid"].chromeUI, +#identity-box[pageproxystate="valid"].extensionPage, +#urlbar-label-box { + margin-inline-end: 8px; +} + +#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button, +#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button, +#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button, +#urlbar-label-box { + background-color: var(--urlbar-box-bgcolor); + color: var(--urlbar-box-text-color); + padding-inline: 8px; + border-radius: var(--urlbar-icon-border-radius); +} + +#urlbar[focused="true"] #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:not(:hover, [open=true]), +#urlbar[focused="true"] #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:not(:hover, [open=true]), +#urlbar[focused="true"] #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:not(:hover, [open=true]), +#urlbar[focused="true"] #urlbar-label-box { + background-color: var(--urlbar-box-focus-bgcolor); +} + +#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:hover:not([open]), +#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:hover:not([open]), +#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:hover:not([open]) { + background-color: var(--urlbar-box-hover-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:hover:active, +#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button[open=true], +#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:hover:active, +#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button[open=true], +#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:hover:active, +#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button[open=true] { + background-color: var(--urlbar-box-active-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +#urlbar[searchmode]:not([focused="true"]) > #urlbar-input-container > #urlbar-search-mode-indicator, +#urlbar[searchmode]:not([focused="true"]) > #urlbar-input-container > #urlbar-label-box { + pointer-events: none; +} + +#urlbar[searchmode]:not([focused="true"]) > #urlbar-input-container > #urlbar-search-mode-indicator > #urlbar-search-mode-indicator-close { + pointer-events: initial; +} + +.urlbar-label { + margin: 0; +} + +.sharing-icon, +#identity-icon, +#permissions-granted-icon, +#tracking-protection-icon, +.notification-anchor-icon, +#blocked-permissions-container > .blocked-permission-icon { + -moz-context-properties: fill, fill-opacity; +} + +.sharing-icon, +#identity-icon, +#permissions-granted-icon, +#tracking-protection-icon, +#blocked-permissions-container > .blocked-permission-icon { + width: 16px; + height: 16px; +} + +.sharing-icon, +#identity-icon, +#tracking-protection-icon, +#blocked-permissions-container > .blocked-permission-icon { + margin-inline-start: 4px; +} + +#tracking-protection-icon { + margin-inline-start: 0; +} + +/* MAIN IDENTITY ICON */ +#identity-icon { + margin-inline-start: 0; + list-style-image: url(chrome://global/skin/icons/info.svg); +} + +#identity-box[pageproxystate="valid"].chromeUI #identity-icon { + list-style-image: url(chrome://branding/content/icon16.png); +} +@media (min-resolution: 1.1dppx) { + #identity-box[pageproxystate="valid"].chromeUI #identity-icon { + list-style-image: url(chrome://branding/content/icon32.png); + } +} + +#identity-box[pageproxystate="valid"].localResource #identity-icon { + list-style-image: url(chrome://global/skin/icons/page-portrait.svg); +} + +#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"] #identity-icon { + list-style-image: url(chrome://global/skin/icons/search-glass.svg); +} + +#urlbar[actiontype="extension"] > #urlbar-input-container > #identity-box #identity-icon { + list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); +} + +#identity-box[pageproxystate="valid"].extensionPage #identity-icon { + list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); +} + +#identity-box[pageproxystate="valid"].verifiedDomain #identity-icon, +#identity-box[pageproxystate="valid"].mixedActiveBlocked #identity-icon { + list-style-image: url(chrome://global/skin/icons/security.svg); +} + +#identity-box[pageproxystate="valid"].weakCipher #identity-icon, +#identity-box[pageproxystate="valid"].mixedDisplayContent #identity-icon, +#identity-box[pageproxystate="valid"].mixedDisplayContentLoadedActiveBlocked #identity-icon, +#identity-box[pageproxystate="valid"].certUserOverridden #identity-icon, +#identity-box[pageproxystate="valid"].certErrorPage #identity-icon { + list-style-image: url(chrome://global/skin/icons/security-warning.svg); + fill: unset; +} + + +#identity-box[pageproxystate="valid"].notSecure #identity-icon, +#identity-box[pageproxystate="valid"].mixedActiveContent #identity-icon, +#identity-box[pageproxystate="valid"].httpsOnlyErrorPage #identity-icon { + list-style-image: url(chrome://global/skin/icons/security-broken.svg); +} + +#permissions-granted-icon { + list-style-image: url(chrome://browser/skin/permissions.svg); +} + +#identity-permission-box { + display: none; +} + +#identity-permission-box[open=true], +#identity-permission-box[hasPermissions], +#identity-permission-box[hasSharingIcon] { + display: -moz-box; +} + +/* SHARING ICON */ + +#webrtc-sharing-icon[sharing="camera"] { + list-style-image: url("chrome://browser/skin/notification-icons/camera.svg"); +} + +#webrtc-sharing-icon[sharing="microphone"] { + list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg"); +} + +#webrtc-sharing-icon[sharing="screen"] { + list-style-image: url("chrome://browser/skin/notification-icons/screen.svg"); +} + +#geo-sharing-icon[sharing] { + list-style-image: url("chrome://browser/skin/notification-icons/geo.svg"); +} + +.sharing-icon:not([sharing]) { + display: none; +} + +#webrtc-sharing-icon[sharing]:not([paused]) { + -moz-context-properties: fill; + fill: rgb(224, 41, 29); +} + +/* TRACKING PROTECTION ICON */ + +#tracking-protection-icon-container { + padding-inline: var(--urlbar-icon-padding); + border-radius: var(--urlbar-icon-border-radius); + /* This is needed in order to position the blue dot indicator. */ + position: relative; +} + +#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container.chromeUI { + display: none; +} + +#tracking-protection-icon-box { + overflow: hidden; + width: 16px; + height: 16px; +} + +#tracking-protection-icon-tooltip { + max-width: 500px; +} + +#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box > #tracking-protection-icon { + list-style-image: url(chrome://browser/skin/tracking-protection.svg); +} + +#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box[hasException] > #tracking-protection-icon { + list-style-image: url(chrome://browser/skin/tracking-protection-disabled.svg); +} + +#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon { + list-style-image: url(chrome://browser/skin/tracking-protection-active.svg); +} + +:root[lwt-toolbar-field-brighttext] #urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon { + list-style-image: url(chrome://browser/skin/tracking-protection-active-brighttext.svg); +} + +#urlbar-input-container[pageproxystate="invalid"] > #tracking-protection-icon-container { + visibility: collapse; +} diff --git a/browser/themes/shared/identity-block/permissions.svg b/browser/themes/shared/identity-block/permissions.svg new file mode 100644 index 0000000000..0237c34e44 --- /dev/null +++ b/browser/themes/shared/identity-block/permissions.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/identity-block/tracking-protection-active-brighttext.svg b/browser/themes/shared/identity-block/tracking-protection-active-brighttext.svg new file mode 100644 index 0000000000..c7de8d017c --- /dev/null +++ b/browser/themes/shared/identity-block/tracking-protection-active-brighttext.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/shared/identity-block/tracking-protection-active.svg b/browser/themes/shared/identity-block/tracking-protection-active.svg new file mode 100644 index 0000000000..591c0b0990 --- /dev/null +++ b/browser/themes/shared/identity-block/tracking-protection-active.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/shared/identity-block/tracking-protection-disabled.svg b/browser/themes/shared/identity-block/tracking-protection-disabled.svg new file mode 100644 index 0000000000..f34f1cd8de --- /dev/null +++ b/browser/themes/shared/identity-block/tracking-protection-disabled.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/identity-block/tracking-protection.svg b/browser/themes/shared/identity-block/tracking-protection.svg new file mode 100644 index 0000000000..09cdb83ecf --- /dev/null +++ b/browser/themes/shared/identity-block/tracking-protection.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/identity-credential-notification.css b/browser/themes/shared/identity-credential-notification.css new file mode 100644 index 0000000000..61ebdd2db4 --- /dev/null +++ b/browser/themes/shared/identity-credential-notification.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/. */ + +#identity-credential-notification .subviewbutton { + width: 100%; + margin-inline: 0; +} + +#credential-provider-explanation, +#credential-account-explanation { + margin-top: 1em; +} diff --git a/browser/themes/shared/incontent-icons/tab-crashed.svg b/browser/themes/shared/incontent-icons/tab-crashed.svg new file mode 100644 index 0000000000..db19117370 --- /dev/null +++ b/browser/themes/shared/incontent-icons/tab-crashed.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + diff --git a/browser/themes/shared/jar.inc.mn b/browser/themes/shared/jar.inc.mn new file mode 100644 index 0000000000..e874e39777 --- /dev/null +++ b/browser/themes/shared/jar.inc.mn @@ -0,0 +1,279 @@ +# 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/browser/aboutFrameCrashed.css (../shared/aboutFrameCrashed.css) + skin/classic/browser/aboutRestartRequired.css (../shared/aboutRestartRequired.css) + skin/classic/browser/aboutSessionRestore.css (../shared/aboutSessionRestore.css) + skin/classic/browser/aboutTabCrashed.css (../shared/aboutTabCrashed.css) + skin/classic/browser/aboutWelcomeBack.css (../shared/aboutWelcomeBack.css) + skin/classic/browser/tab-list-tree.css (../shared/tab-list-tree.css) + skin/classic/browser/addon-notification.css (../shared/addon-notification.css) + skin/classic/browser/autocomplete.css (../shared/autocomplete.css) + skin/classic/browser/blockedSite.css (../shared/blockedSite.css) + skin/classic/browser/browser-shared.css (../shared/browser-shared.css) + skin/classic/browser/ctrlTab.css (../shared/ctrlTab.css) + skin/classic/browser/identity-credential-notification.css (../shared/identity-credential-notification.css) + skin/classic/browser/light-dark-overrides.css (../shared/light-dark-overrides.css) + skin/classic/browser/menupanel.css (../shared/menupanel.css) + skin/classic/browser/notification-icons.css (../shared/notification-icons.css) + skin/classic/browser/searchbar.css (../shared/searchbar.css) + skin/classic/browser/setDesktopBackground.css (../shared/setDesktopBackground.css) + skin/classic/browser/sidebar.css (../shared/sidebar.css) + skin/classic/browser/tabs.css (../shared/tabs.css) + skin/classic/browser/toolbarbuttons.css (../shared/toolbarbuttons.css) + skin/classic/browser/toolbarbutton-icons.css (../shared/toolbarbutton-icons.css) + skin/classic/browser/urlbar-dynamic-results.css (../shared/urlbar-dynamic-results.css) + skin/classic/browser/urlbar-searchbar.css (../shared/urlbar-searchbar.css) + skin/classic/browser/urlbarView.css (../shared/urlbarView.css) + skin/classic/browser/UITour.css (../shared/UITour.css) + skin/classic/browser/webRTC-indicator.css (../shared/webRTC-indicator.css) + skin/classic/browser/addons/addon-install-blocked.svg (../shared/addons/addon-install-blocked.svg) + skin/classic/browser/addons/addon-install-downloading.svg (../shared/addons/addon-install-downloading.svg) + skin/classic/browser/addons/addon-install-installed.svg (../shared/addons/addon-install-installed.svg) + skin/classic/browser/addons/extension-controlled.css (../shared/addons/extension-controlled.css) + skin/classic/browser/addons/unified-extensions.css (../shared/addons/unified-extensions.css) + skin/classic/browser/controlcenter/3rdpartycookies.svg (../shared/controlcenter/3rdpartycookies.svg) + skin/classic/browser/controlcenter/cryptominers.svg (../shared/controlcenter/cryptominers.svg) + skin/classic/browser/controlcenter/dashboard.svg (../shared/controlcenter/dashboard.svg) + skin/classic/browser/controlcenter/mcb-disabled.svg (../shared/controlcenter/mcb-disabled.svg) + skin/classic/browser/controlcenter/etp-milestone.svg (../shared/controlcenter/etp-milestone.svg) + skin/classic/browser/controlcenter/panel.css (../shared/controlcenter/panel.css) + skin/classic/browser/controlcenter/tracking-protection.svg (../shared/controlcenter/tracking-protection.svg) + skin/classic/browser/controlcenter/hero-message-background.svg (../shared/controlcenter/hero-message-background.svg) + skin/classic/browser/customizableui/customizeMode.css (../shared/customizableui/customizeMode.css) + skin/classic/browser/customizableui/panelUI-shared.css (../shared/customizableui/panelUI-shared.css) + + skin/classic/browser/customizableui/empty-overflow-panel.png (../shared/customizableui/empty-overflow-panel.png) + skin/classic/browser/customizableui/empty-overflow-panel@2x.png (../shared/customizableui/empty-overflow-panel@2x.png) + skin/classic/browser/customizableui/density-compact.svg (../shared/customizableui/density-compact.svg) + skin/classic/browser/customizableui/density-normal.svg (../shared/customizableui/density-normal.svg) + skin/classic/browser/customizableui/density-touch.svg (../shared/customizableui/density-touch.svg) + skin/classic/browser/customizableui/whimsy.png (../shared/customizableui/whimsy.png) + skin/classic/browser/downloads/allDownloadsView.inc.css (../shared/downloads/allDownloadsView.inc.css) + skin/classic/browser/downloads/contentAreaDownloadsView.css (../shared/downloads/contentAreaDownloadsView.css) + skin/classic/browser/downloads/download-blockedStates.css (../shared/downloads/download-blockedStates.css) + skin/classic/browser/downloads/download-summary.svg (../shared/downloads/download-summary.svg) + skin/classic/browser/downloads/downloads.inc.css (../shared/downloads/downloads.inc.css) + skin/classic/browser/downloads/downloads.svg (../shared/downloads/downloads.svg) + skin/classic/browser/downloads/indicator.css (../shared/downloads/indicator.css) + skin/classic/browser/downloads/notification-finish-animation.svg (../shared/downloads/notification-finish-animation.svg) + skin/classic/browser/downloads/notification-start-animation.svg (../shared/downloads/notification-start-animation.svg) + skin/classic/browser/downloads/progressmeter.css (../shared/downloads/progressmeter.css) + skin/classic/browser/drm-icon.svg (../shared/drm-icon.svg) + skin/classic/browser/identity-block/identity-block.css (../shared/identity-block/identity-block.css) + skin/classic/browser/permissions.svg (../shared/identity-block/permissions.svg) + skin/classic/browser/migration/migration-dialog.css (../shared/migration/migration-dialog.css) + skin/classic/browser/migration/migration-wizard.css (../shared/migration/migration-wizard.css) + skin/classic/browser/notification-icons/autoplay-media.svg (../shared/notification-icons/autoplay-media.svg) + skin/classic/browser/notification-icons/autoplay-media-blocked.svg (../shared/notification-icons/autoplay-media-blocked.svg) + skin/classic/browser/notification-icons/camera-blocked.svg (../shared/notification-icons/camera-blocked.svg) + skin/classic/browser/notification-icons/camera.svg (../shared/notification-icons/camera.svg) + skin/classic/browser/notification-icons/desktop-notification-blocked.svg (../shared/notification-icons/desktop-notification-blocked.svg) + skin/classic/browser/notification-icons/desktop-notification.svg (../shared/notification-icons/desktop-notification.svg) + skin/classic/browser/notification-icons/drag-indicator.svg (../shared/notification-icons/drag-indicator.svg) + skin/classic/browser/notification-icons/geo.svg (../shared/notification-icons/geo.svg) + skin/classic/browser/notification-icons/geo-blocked.svg (../shared/notification-icons/geo-blocked.svg) + skin/classic/browser/notification-icons/microphone-blocked.svg (../shared/notification-icons/microphone-blocked.svg) + skin/classic/browser/notification-icons/microphone.svg (../shared/notification-icons/microphone.svg) + skin/classic/browser/notification-icons/minimize.svg (../shared/notification-icons/minimize.svg) + skin/classic/browser/notification-icons/persistent-storage-blocked.svg (../shared/notification-icons/persistent-storage-blocked.svg) + skin/classic/browser/notification-icons/persistent-storage.svg (../shared/notification-icons/persistent-storage.svg) + skin/classic/browser/notification-icons/plugin-badge.svg (../shared/notification-icons/plugin-badge.svg) + skin/classic/browser/notification-icons/popup.svg (../shared/notification-icons/popup.svg) + skin/classic/browser/notification-icons/screen-blocked.svg (../shared/notification-icons/screen-blocked.svg) + skin/classic/browser/notification-icons/screen.svg (../shared/notification-icons/screen.svg) + skin/classic/browser/notification-icons/xr-blocked.svg (../shared/notification-icons/xr-blocked.svg) + skin/classic/browser/notification-icons/xr.svg (../shared/notification-icons/xr.svg) + skin/classic/browser/notification-icons/midi.svg (../shared/notification-icons/midi.svg) + + skin/classic/browser/tracking-protection.svg (../shared/identity-block/tracking-protection.svg) + skin/classic/browser/tracking-protection-disabled.svg (../shared/identity-block/tracking-protection-disabled.svg) + skin/classic/browser/tracking-protection-active.svg (../shared/identity-block/tracking-protection-active.svg) + skin/classic/browser/tracking-protection-active-brighttext.svg (../shared/identity-block/tracking-protection-active-brighttext.svg) + skin/classic/browser/translation/infobar.css (../shared/translation/infobar.css) + + skin/classic/browser/toolbar-drag-indicator.svg (../shared/toolbar-drag-indicator.svg) + + skin/classic/browser/protections/resolved-breach.svg (../shared/protections/resolved-breach.svg) + skin/classic/browser/protections/resolved-breach-gray.svg (../shared/protections/resolved-breach-gray.svg) + skin/classic/browser/protections/breached-password.svg (../shared/protections/breached-password.svg) + skin/classic/browser/protections/new-feature.svg (../shared/protections/new-feature.svg) + + skin/classic/browser/preferences/android-menu.svg (../shared/preferences/android-menu.svg) + skin/classic/browser/preferences/category-general.svg (../shared/preferences/category-general.svg) + skin/classic/browser/preferences/category-privacy-security.svg (../shared/preferences/category-privacy-security.svg) + skin/classic/browser/preferences/category-search.svg (../shared/preferences/category-search.svg) + skin/classic/browser/preferences/category-sync.svg (../shared/preferences/category-sync.svg) + skin/classic/browser/preferences/containers.css (../shared/preferences/containers.css) + skin/classic/browser/preferences/containers-dialog.css (../shared/preferences/containers-dialog.css) + skin/classic/browser/preferences/dialog.css (../shared/preferences/dialog.css) + skin/classic/browser/preferences/face-sad.svg (../shared/preferences/face-sad.svg) + skin/classic/browser/preferences/face-smile.svg (../shared/preferences/face-smile.svg) + skin/classic/browser/preferences/fxaPairDevice.css (../shared/preferences/fxaPairDevice.css) + skin/classic/browser/preferences/ios-menu.svg (../shared/preferences/ios-menu.svg) + skin/classic/browser/preferences/mozilla-logo.svg (../shared/preferences/mozilla-logo.svg) + skin/classic/browser/preferences/no-search-bar.svg (../shared/preferences/no-search-bar.svg) + skin/classic/browser/preferences/preferences.css (../shared/preferences/preferences.css) + skin/classic/browser/preferences/privacy.css (../shared/preferences/privacy.css) + skin/classic/browser/preferences/relay-logo.svg (../shared/preferences/relay-logo.svg) + skin/classic/browser/preferences/search-arrow-indicator.svg (../shared/preferences/search-arrow-indicator.svg) + skin/classic/browser/preferences/search-bar.svg (../shared/preferences/search-bar.svg) + skin/classic/browser/preferences/vpn-logo.svg (../shared/preferences/vpn-logo.svg) + skin/classic/browser/preferences/search.css (../shared/preferences/search.css) + skin/classic/browser/preferences/siteDataSettings.css (../shared/preferences/siteDataSettings.css) + skin/classic/browser/spotlight.css (../shared/spotlight.css) + skin/classic/browser/fxa/fxa-spinner.svg (../shared/fxa/fxa-spinner.svg) + skin/classic/browser/fxa/sync-illustration.svg (../shared/fxa/sync-illustration.svg) + skin/classic/browser/fxa/sync-illustration-issue.svg (../shared/fxa/sync-illustration-issue.svg) + skin/classic/browser/fxa/send-to-device.svg (../shared/fxa/send-to-device.svg) + + skin/classic/browser/fxa/avatar.svg (../shared/fxa/avatar.svg) + skin/classic/browser/fxa/avatar-color.svg (../shared/fxa/avatar-color.svg) + skin/classic/browser/fxa/avatar-empty.svg (../shared/fxa/avatar-empty.svg) + skin/classic/browser/fxa/sync-devices.svg (../shared/fxa/sync-devices.svg) + skin/classic/browser/fxa/send.svg (../shared/fxa/send.svg) + skin/classic/browser/fxa/monitor.svg (../shared/fxa/monitor.svg) + skin/classic/browser/fxa/add-device.svg (../shared/fxa/add-device.svg) + + skin/classic/browser/fullscreen/warning.css (../shared/fullscreen/warning.css) + + skin/classic/browser/add-circle-fill.svg (../shared/icons/add-circle-fill.svg) + skin/classic/browser/back.svg (../shared/icons/back.svg) + skin/classic/browser/bookmark.svg (../shared/icons/bookmark.svg) + skin/classic/browser/bookmark-12.svg (../shared/icons/bookmark-12.svg) + skin/classic/browser/bookmark-hollow.svg (../shared/icons/bookmark-hollow.svg) + skin/classic/browser/bookmark-star-on-tray.svg (../shared/icons/bookmark-star-on-tray.svg) + skin/classic/browser/bookmarks-toolbar.svg (../shared/icons/bookmarks-toolbar.svg) + skin/classic/browser/canvas.svg (../shared/icons/canvas.svg) + skin/classic/browser/canvas-blocked.svg (../shared/icons/canvas-blocked.svg) + skin/classic/browser/characterEncoding.svg (../shared/icons/characterEncoding.svg) + skin/classic/browser/chevron-animation.svg (../shared/icons/chevron-animation.svg) + skin/classic/browser/customize.svg (../shared/icons/customize.svg) + skin/classic/browser/device-phone.svg (../shared/icons/device-phone.svg) + skin/classic/browser/device-tablet.svg (../shared/icons/device-tablet.svg) + skin/classic/browser/device-desktop.svg (../shared/icons/device-desktop.svg) + skin/classic/browser/device-tv.svg (../shared/icons/device-tv.svg) + skin/classic/browser/device-vr.svg (../shared/icons/device-vr.svg) + skin/classic/browser/edit-cut.svg (../shared/icons/edit-cut.svg) + skin/classic/browser/edit-paste.svg (../shared/icons/edit-paste.svg) + skin/classic/browser/fingerprint.svg (../shared/icons/fingerprint.svg) + skin/classic/browser/forget.svg (../shared/icons/forget.svg) + skin/classic/browser/forward.svg (../shared/icons/forward.svg) + skin/classic/browser/fullscreen.svg (../shared/icons/fullscreen.svg) + skin/classic/browser/fullscreen-exit.svg (../shared/icons/fullscreen-exit.svg) + skin/classic/browser/history.svg (../shared/icons/history.svg) + skin/classic/browser/home.svg (../shared/icons/home.svg) + skin/classic/browser/import.svg (../shared/icons/import.svg) +#ifndef MOZ_WIDGET_GTK + skin/classic/browser/import-export.svg (../shared/icons/import-export.svg) +#endif + skin/classic/browser/library.svg (../shared/icons/library.svg) + skin/classic/browser/login.svg (../shared/icons/login.svg) + skin/classic/browser/logo-android.svg (../shared/icons/logo-android.svg) + skin/classic/browser/logo-ios.svg (../shared/icons/logo-ios.svg) + skin/classic/browser/mail.svg (../shared/icons/mail.svg) + skin/classic/browser/menu.svg (../shared/icons/menu.svg) + skin/classic/browser/menu-badged.svg (../shared/icons/menu-badged.svg) + skin/classic/browser/new-tab.svg (../shared/icons/new-tab.svg) + skin/classic/browser/notification-fill-12.svg (../shared/icons/notification-fill-12.svg) + skin/classic/browser/open.svg (../shared/icons/open.svg) + skin/classic/browser/pin-12.svg (../shared/icons/pin-12.svg) + skin/classic/browser/privateBrowsing.svg (../shared/icons/privateBrowsing.svg) + skin/classic/browser/quickactions.svg (../shared/icons/quickactions.svg) + skin/classic/browser/reader-mode.svg (../shared/icons/reader-mode.svg) + skin/classic/browser/reload-to-stop.svg (../shared/icons/reload-to-stop.svg) + skin/classic/browser/save.svg (../shared/icons/save.svg) + skin/classic/browser/screenshot.svg (../shared/icons/screenshot.svg) + skin/classic/browser/sidebars.svg (../shared/icons/sidebars.svg) + skin/classic/browser/sidebars-right.svg (../shared/icons/sidebars-right.svg) +#ifndef MOZ_WIDGET_GTK + skin/classic/browser/sort.svg (../shared/icons/sort.svg) +#endif + skin/classic/browser/stop-to-reload.svg (../shared/icons/stop-to-reload.svg) + skin/classic/browser/subtract-circle-fill.svg (../shared/icons/subtract-circle-fill.svg) + skin/classic/browser/success-animation.svg (../shared/icons/success-animation.svg) + skin/classic/browser/sync.svg (../shared/icons/sync.svg) + skin/classic/browser/synced-tabs.svg (../shared/icons/synced-tabs.svg) + skin/classic/browser/tab.svg (../shared/icons/tab.svg) + skin/classic/browser/thumb-down.svg (../shared/icons/thumb-down.svg) + skin/classic/browser/topsites.svg (../shared/icons/topsites.svg) + skin/classic/browser/trending.svg (../shared/icons/trending.svg) + skin/classic/browser/window.svg (../shared/icons/window.svg) + skin/classic/browser/zoom-out.svg (../shared/icons/zoom-out.svg) + skin/classic/browser/ion.svg (../shared/icons/ion.svg) + + + skin/classic/browser/search-engine-placeholder.png (../shared/search/search-engine-placeholder.png) + skin/classic/browser/search-engine-placeholder@2x.png (../shared/search/search-engine-placeholder@2x.png) + skin/classic/browser/search-indicator-badge-add.svg (../shared/search/search-indicator-badge-add.svg) + + skin/classic/browser/tabbrowser/crashed.svg (../shared/tabbrowser/crashed.svg) + skin/classic/browser/tabbrowser/hourglass.svg (../shared/tabbrowser/hourglass.svg) + skin/classic/browser/tabbrowser/loading.svg (../shared/tabbrowser/loading.svg) + skin/classic/browser/tabbrowser/loading-burst.svg (../shared/tabbrowser/loading-burst.svg) + skin/classic/browser/tabbrowser/pendingpaint.png (../shared/tabbrowser/pendingpaint.png) + skin/classic/browser/tabbrowser/tab-audio-playing-small.svg (../shared/tabbrowser/tab-audio-playing-small.svg) + skin/classic/browser/tabbrowser/tab-audio-muted-small.svg (../shared/tabbrowser/tab-audio-muted-small.svg) + skin/classic/browser/tabbrowser/tab-audio-blocked-small.svg (../shared/tabbrowser/tab-audio-blocked-small.svg) + skin/classic/browser/tabbrowser/tab-connecting.png (../shared/tabbrowser/tab-connecting.png) + skin/classic/browser/tabbrowser/tab-connecting@2x.png (../shared/tabbrowser/tab-connecting@2x.png) + skin/classic/browser/tabbrowser/tab-drag-indicator.svg (../shared/tabbrowser/tab-drag-indicator.svg) + skin/classic/browser/tabbrowser/tab-loading.png (../shared/tabbrowser/tab-loading.png) + skin/classic/browser/tabbrowser/tab-loading@2x.png (../shared/tabbrowser/tab-loading@2x.png) + skin/classic/browser/tabbrowser/tab-loading-inverted.png (../shared/tabbrowser/tab-loading-inverted.png) + skin/classic/browser/tabbrowser/tab-loading-inverted@2x.png (../shared/tabbrowser/tab-loading-inverted@2x.png) + + skin/classic/browser/translating-16.png (../shared/translation/translating-16.png) + skin/classic/browser/translating-16@2x.png (../shared/translation/translating-16@2x.png) + skin/classic/browser/translation-16.png (../shared/translation/translation-16.png) + skin/classic/browser/translation-16@2x.png (../shared/translation/translation-16@2x.png) + skin/classic/browser/update-badge.svg (../shared/update-badge.svg) + skin/classic/browser/profiler-popup-backdrop.png (../shared/profiler-popup-backdrop.png) + skin/classic/browser/tab-crashed.svg (../shared/incontent-icons/tab-crashed.svg) + skin/classic/browser/panic-panel/header.png (../shared/panic-panel/header.png) + skin/classic/browser/panic-panel/header@2x.png (../shared/panic-panel/header@2x.png) + skin/classic/browser/panic-panel/icons.png (../shared/panic-panel/icons.png) + skin/classic/browser/panic-panel/icons@2x.png (../shared/panic-panel/icons@2x.png) + skin/classic/browser/places/sidebar.css (../shared/places/sidebar.css) + skin/classic/browser/places/bookmarksMenu.svg (../shared/places/bookmarksMenu.svg) + skin/classic/browser/places/bookmarksToolbar.svg (../shared/places/bookmarksToolbar.svg) + skin/classic/browser/places/editBookmark.css (../shared/places/editBookmark.css) + skin/classic/browser/places/editBookmarkPanel.css (../shared/places/editBookmarkPanel.css) + skin/classic/browser/places/folder-smart.svg (../shared/places/folder-smart.svg) + skin/classic/browser/places/tag.svg (../shared/places/tag.svg) + skin/classic/browser/places/tree-icons.css (../shared/places/tree-icons.css) + skin/classic/browser/privatebrowsing/aboutPrivateBrowsing.css (../shared/privatebrowsing/aboutPrivateBrowsing.css) + skin/classic/browser/privatebrowsing/favicon.svg (../shared/privatebrowsing/favicon.svg) + + skin/classic/browser/syncedtabs/sidebar.css (../shared/syncedtabs/sidebar.css) + + skin/classic/browser/weather/sunny.svg (../shared/weather/sunny.svg) + skin/classic/browser/weather/mostly-sunny.svg (../shared/weather/mostly-sunny.svg) + skin/classic/browser/weather/partly-sunny.svg (../shared/weather/partly-sunny.svg) + skin/classic/browser/weather/hazy-sunshine.svg (../shared/weather/hazy-sunshine.svg) + skin/classic/browser/weather/cloudy.svg (../shared/weather/cloudy.svg) + skin/classic/browser/weather/fog.svg (../shared/weather/fog.svg) + skin/classic/browser/weather/showers.svg (../shared/weather/showers.svg) + skin/classic/browser/weather/mostly-cloudy-with-showers.svg (../shared/weather/mostly-cloudy-with-showers.svg) + skin/classic/browser/weather/thunderstorms.svg (../shared/weather/thunderstorms.svg) + skin/classic/browser/weather/mostly-cloudy-with-thunderstorms.svg (../shared/weather/mostly-cloudy-with-thunderstorms.svg) + skin/classic/browser/weather/rain.svg (../shared/weather/rain.svg) + skin/classic/browser/weather/flurries.svg (../shared/weather/flurries.svg) + skin/classic/browser/weather/partly-sunny-with-flurries.svg (../shared/weather/partly-sunny-with-flurries.svg) + skin/classic/browser/weather/snow.svg (../shared/weather/snow.svg) + skin/classic/browser/weather/ice.svg (../shared/weather/ice.svg) + skin/classic/browser/weather/freezing-rain.svg (../shared/weather/freezing-rain.svg) + skin/classic/browser/weather/hot.svg (../shared/weather/hot.svg) + skin/classic/browser/weather/windy.svg (../shared/weather/windy.svg) + skin/classic/browser/weather/night-clear.svg (../shared/weather/night-clear.svg) + skin/classic/browser/weather/night-mostly-clear.svg (../shared/weather/night-mostly-clear.svg) + skin/classic/browser/weather/night-hazy-moonlight.svg (../shared/weather/night-hazy-moonlight.svg) + skin/classic/browser/weather/night-partly-cloudy-with-showers.svg (../shared/weather/night-partly-cloudy-with-showers.svg) + skin/classic/browser/weather/night-partly-cloudy-with-thunderstorms.svg (../shared/weather/night-partly-cloudy-with-thunderstorms.svg) + skin/classic/browser/weather/night-mostly-cloudy-with-flurries.svg (../shared/weather/night-mostly-cloudy-with-flurries.svg) diff --git a/browser/themes/shared/light-dark-overrides.css b/browser/themes/shared/light-dark-overrides.css new file mode 100644 index 0000000000..5fa24219f5 --- /dev/null +++ b/browser/themes/shared/light-dark-overrides.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/. */ + +#urlbar { + --urlbar-box-bgcolor: var(--toolbar-field-focus-background-color); + --urlbar-box-focus-bgcolor: var(--button-bgcolor); + --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor); +} + +@media (-moz-platform: windows) { + /* The window background is white due to no accentcolor in the lightweight + theme. It can't be changed to transparent when there is no compositor + (Win 7 in classic / basic theme), or else dragging and focus become + broken. So instead just show the normal titlebar in that case, and override + the window color as transparent when the compositor is available. */ + @media (-moz-windows-compositor: 0) { + :root[tabsintitlebar]:not([inDOMFullscreen]) #titlebar:-moz-lwtheme { + visibility: visible; + } + + /* Prevent accent color overriding the window background for + * light and dark theme on Aero Basic. This is copied from browser-aero.css. */ + @media (-moz-windows-default-theme) { + :root { + background-color: rgb(185,209,234) !important; + } + :root:-moz-window-inactive { + background-color: rgb(215,228,242) !important; + } + } + } + + /* Add a fog for background tabs to be visible on Windows 7 glass window background */ + @media (-moz-platform: windows-win7) { + @media (-moz-windows-default-theme) { + #TabsToolbar { + background-image: radial-gradient(ellipse at bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.5) 80%, transparent); + color: black; + --toolbarbutton-icon-fill: currentColor; + } + } + } + + @media (-moz-windows-glass) { + /* Make the menubar text readable on aero glass (copied from browser-aero.css). */ + #toolbar-menubar { + text-shadow: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255,255,255,.4); + } + + #main-menubar:not(:-moz-window-inactive) { + background-color: rgba(255,255,255,.5); + color: black; + border-radius: 4px; + } + } + + @media (-moz-platform: windows-win7), + (-moz-platform: windows-win8) { + @media (-moz-windows-compositor) { + :root { + background: transparent !important; + } + + /* Remove lwtheme borders from toolbars in non-maximized windows. */ + #toolbar-menubar, + #TabsToolbar { + border-inline-style: none !important; + } + } + + /* Use proper menu text styling in Win7 classic mode. On Windows 8, we use + these colors so tabs and menus are legible against the window accent color. + These colors are copied from browser.css. */ + @media (-moz-windows-compositor: 0), + (-moz-windows-default-theme: 0), + (-moz-platform: windows-win8) { + :root[tabsintitlebar] { + color: CaptionText; + } + + :root[tabsintitlebar]:-moz-window-inactive { + color: InactiveCaptionText; + } + } + } + + /* Restored windows get an artificial border on windows, because the lwtheme background + * overlaps the regular window border. That isn't the case for us, so we avoid painting + * over the native border with our custom borders. These are !important to avoid + * specificity-wars with the selectors that add these borders. */ + @media (-moz-windows-classic), + (-moz-windows-compositor: 0) and (-moz-windows-default-theme) { + #navigator-toolbox { + background-image: none !important; + } + } + @media (-moz-windows-glass) { + #navigator-toolbox { + border-top: none !important; + box-shadow: none !important; + padding-top: 0 !important; + } + } + @media (-moz-platform: windows-win8) { + #navigator-toolbox { + border-top: none !important; + } + } +} diff --git a/browser/themes/shared/menupanel.css b/browser/themes/shared/menupanel.css new file mode 100644 index 0000000000..e20b3cfaa4 --- /dev/null +++ b/browser/themes/shared/menupanel.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 html url("http://www.w3.org/1999/xhtml"); + +/* Menu panel and palette styles */ + +/** + * These are placeholder icons until we get the proper Proton + * assets for zoom/fullscreen/sync. + */ +#appMenu-zoomEnlarge-button2 { + list-style-image: url(chrome://browser/skin/add-circle-fill.svg); +} + +#appMenu-zoomReduce-button2 { + list-style-image: url(chrome://browser/skin/subtract-circle-fill.svg); +} + +#appMenu-fullscreen-button2 { + list-style-image: url(chrome://browser/skin/fullscreen.svg); +} + +#appMenu-fullscreen-button2[checked] { + list-style-image: url(chrome://browser/skin/fullscreen-exit.svg); +} diff --git a/browser/themes/shared/migration/migration-dialog.css b/browser/themes/shared/migration/migration-dialog.css new file mode 100644 index 0000000000..686f6cfe9c --- /dev/null +++ b/browser/themes/shared/migration/migration-dialog.css @@ -0,0 +1,9 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/in-content/common.css"); + +body { + padding: 24px; +} diff --git a/browser/themes/shared/migration/migration-wizard.css b/browser/themes/shared/migration/migration-wizard.css new file mode 100644 index 0000000000..0140bd5795 --- /dev/null +++ b/browser/themes/shared/migration/migration-wizard.css @@ -0,0 +1,29 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/in-content/common.css"); + +:host { + display: flex; + flex-direction: column; +} + +h3 { + font-weight: normal; + margin-block-start: 0; + min-height: 1em; +} + +fieldset { + border: 0; +} + +label { + display: flex; + align-items: center; +} + +button { + margin-block-end: 0; +} diff --git a/browser/themes/shared/notification-icons.css b/browser/themes/shared/notification-icons.css new file mode 100644 index 0000000000..bd6271f4b9 --- /dev/null +++ b/browser/themes/shared/notification-icons.css @@ -0,0 +1,404 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +#notification-popup-box { + height: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding)); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: var(--urlbar-icon-fill-opacity); + color: inherit; + border-radius: var(--urlbar-icon-border-radius); +} +#notification-popup-box:hover { + background-color: hsla(0,0%,70%,.2); +} +#notification-popup-box:hover:active, +#notification-popup-box[open] { + background-color: hsla(0,0%,70%,.3); +} + +.popup-notification-icon, +.permission-popup-permission-icon { + -moz-context-properties: fill, fill-opacity; + fill: currentColor; +} + +.notification-anchor-icon:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); + border-radius: var(--urlbar-icon-border-radius); +} + +.blocked-permission-icon:focus-visible { + outline: var(--focus-outline); + outline-offset: calc(var(--urlbar-icon-padding) + var(--focus-outline-inset)); + border-radius: 1px; +} + +/* This class can be used alone or in combination with the class defining the + type of icon displayed. This rule must be defined before the others in order + for its list-style-image to be overridden. */ +.notification-anchor-icon { + list-style-image: url(chrome://global/skin/icons/info-filled.svg); + padding: var(--urlbar-icon-padding); +} + +/* INDIVIDUAL NOTIFICATIONS */ + +.focus-tab-by-prompt-icon { + list-style-image: url(chrome://global/skin/icons/info.svg); +} + +.storage-access-icon { + list-style-image: url(chrome://browser/skin/controlcenter/3rdpartycookies.svg); +} + +.persistent-storage-icon { + list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage.svg); +} + +.persistent-storage-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage-blocked.svg); +} + +.desktop-notification-icon { + list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification.svg); +} + +.desktop-notification-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification-blocked.svg); +} + +.geo-icon { + list-style-image: url(chrome://browser/skin/notification-icons/geo.svg); +} + +.geo-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/geo-blocked.svg); +} + +.open-protocol-handler-icon { + list-style-image: url(chrome://global/skin/icons/open-in-new.svg); +} + +.open-protocol-handler-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.xr-icon { + list-style-image: url(chrome://browser/skin/notification-icons/xr.svg); +} + +.xr-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/xr-blocked.svg); +} + +.autoplay-media-icon { + list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media.svg); +} + +.autoplay-media-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media-blocked.svg); +} + +.storage-access-notification-content { + color: var(--panel-disabled-color); + font-style: italic; + margin-top: 15px; +} + +.storage-access-notification-content .text-link { + color: -moz-nativehyperlinktext; +} + +.storage-access-notification-content .text-link:hover { + text-decoration: underline; +} + +#storage-access-notification .popup-notification-body-container { + padding: 20px; +} + +.indexedDB-icon { + list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage.svg); +} + +#password-notification-icon { + list-style-image: url(chrome://browser/skin/login.svg); +} + +#password-notification-icon[extraAttr="attention"] { + fill: var(--toolbar-field-icon-fill-attention); + fill-opacity: 1; +} + +.camera-icon { + list-style-image: url(chrome://browser/skin/notification-icons/camera.svg); +} + +.camera-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons/camera.svg); +} + +.camera-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/camera-blocked.svg); +} + +.microphone-icon { + list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); +} + +.microphone-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); +} + +.microphone-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/microphone-blocked.svg); +} + +.popup-notification-icon.microphone-icon { + list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); +} + +.screen-icon { + list-style-image: url(chrome://browser/skin/notification-icons/screen.svg); +} + +.screen-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons/screen.svg); +} + +.screen-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/screen-blocked.svg); +} + +.speaker-icon { + list-style-image: url(chrome://global/skin/media/audio.svg); +} + +.midi-icon, +.midi-sysex-icon { + list-style-image: url(chrome://browser/skin/notification-icons/midi.svg); +} + +#canvas-notification-icon, +.canvas-icon { + list-style-image: url(chrome://browser/skin/canvas.svg); +} + +.canvas-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/canvas-blocked.svg); +} + +#webauthn-notification-icon, +.popup-notification-icon[popupid^="webauthn-prompt-"] { + list-style-image: url(chrome://browser/skin/fingerprint.svg); +} + +#identity-credential-notification-icon { + list-style-image: url(chrome://browser/skin/fingerprint.svg); +} + +#permission-popup-menulist { + margin-inline-end: 0; +} + +#webRTC-preview:not([hidden]) { + -moz-box-orient: vertical; +} + +#webRTC-previewVideo { + border-radius: 4px; + border: 1px solid var(--panel-separator-color); + min-width: 0; + min-height: 10em; + max-height: 250px; +} + +#webRTC-all-windows-shared, +#webRTC-previewWarning { + font-size: 0.8em; +} + +@media not (prefers-contrast) { + #webRTC-all-windows-shared, + #webRTC-previewWarning { + opacity: 0.6; + } +} + +#webRTC-previewWarning { + margin-block-start: 14px; +} + +/** + * All learn-more links tend to have an !important margin-top, but + * the small one below the WebRTC preview warning is special and + * doesn't have one by design. + */ +#webRTC-previewWarning-learnMore { + margin-top: 0 !important; + font-size: 0.75em; +} + +#webRTC-previewWarningBox:-moz-locale-dir(rtl) { + background-position: calc(100% - .75em) .75em; +} + +#webRTC-previewWarning > .text-link { + margin-inline-start: 0; +} + +/* This icon has a block sign in it, so we don't need a blocked version. */ +.popup-icon { + list-style-image: url("chrome://browser/skin/notification-icons/popup.svg"); +} + +/** + * Bug 1708716: The blocked popup icon is just slightly vertically offset from + * the other icons that can appear alongside it in the URL bar due to how it's + * placed in the SVG file. We nudge it a little here to make it line up in a + * more aesthetically pleasing way. + */ +#blocked-permissions-container > .popup-icon { + transform: translateY(1px); +} + +#permission-popup-menulist, +#permission-popup-menulist > menupopup { + min-width: 6.5em; +} + +/* EME */ + +.drm-icon { + list-style-image: url("chrome://browser/skin/drm-icon.svg"); +} + +.notification-anchor-icon[animate=true], +#eme-notification-icon[firstplay=true] { + animation: emeTeachingMoment 0.2s linear 0s 5 normal; +} + +@keyframes emeTeachingMoment { + 0% {transform: translateX(0); } + 25% {transform: translateX(3px) } + 75% {transform: translateX(-3px) } + 100% { transform: translateX(0); } +} + +/* INSTALL ADDONS */ + +.install-icon { + list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); +} + +.install-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); +} + +/* PLUGINS */ + +.plugin-icon { + list-style-image: url(chrome://global/skin/icons/plugin.svg); + transition: fill 1.5s; +} + +#plugin-icon-badge { + list-style-image: url(chrome://browser/skin/notification-icons/plugin-badge.svg); + width: 16px; + height: 16px; + opacity: 0; + transition: opacity 1.5s; +} + +#plugins-notification-icon:not(.plugin-blocked)[extraAttr="inactive"] > .plugin-icon { + fill-opacity: 0.25; +} + +#plugins-notification-icon[extraAttr="inactive"] > #plugin-icon-badge { + opacity: 1; +} + +#plugins-notification-icon[extraAttr="inactive"] > #plugin-icon-badge[animate] { + animation: blink-badge 1000ms ease 0s 5 alternate both; +} + +@keyframes blink-badge { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.plugin-blocked > .plugin-icon { + list-style-image: url(chrome://global/skin/icons/plugin-blocked.svg); + fill: #d92215 !important; +} + +.plugin-blocked > #plugin-icon-badge { + visibility: collapse; +} + +#notification-popup-box[hidden] { + /* Override display:none to make the pluginBlockedNotification animation work + when showing the notification repeatedly. */ + display: -moz-box; + visibility: collapse; +} + +#plugins-notification-icon.plugin-blocked[showing] { + animation: pluginBlockedNotification 500ms ease 0s 5 alternate both; +} + +@keyframes pluginBlockedNotification { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +/* TRANSLATION */ + +.translation-icon { + list-style-image: url(chrome://browser/skin/translation-16.png); + -moz-image-region: rect(0px, 16px, 16px, 0px); +} + +.translation-icon.in-use { + -moz-image-region: rect(0px, 32px, 16px, 16px); +} + +@media (-moz-platform: macos) and (min-resolution: 1.1dppx) { + .translation-icon { + list-style-image: url(chrome://browser/skin/translation-16@2x.png); + -moz-image-region: rect(0px, 32px, 32px, 0px); + } + + .translation-icon.in-use { + -moz-image-region: rect(0px, 64px, 32px, 32px); + } +} + +/* UPDATE */ +.popup-notification-icon[popupid="update-available"], +.popup-notification-icon[popupid="update-manual"], +.popup-notification-icon[popupid="update-other-instance"], +.popup-notification-icon[popupid="update-restart"] { + background: url(chrome://browser/skin/update-badge.svg) no-repeat center; + -moz-context-properties: fill; + fill: var(--panel-banner-item-update-supported-bgcolor); +} + +.popup-notification-icon[popupid="update-unsupported"] { + background: url(chrome://global/skin/icons/warning.svg) no-repeat center; + -moz-context-properties: fill; + fill: var(--warning-icon-bgcolor); +} diff --git a/browser/themes/shared/notification-icons/autoplay-media-blocked.svg b/browser/themes/shared/notification-icons/autoplay-media-blocked.svg new file mode 100644 index 0000000000..8710280b1f --- /dev/null +++ b/browser/themes/shared/notification-icons/autoplay-media-blocked.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/notification-icons/autoplay-media.svg b/browser/themes/shared/notification-icons/autoplay-media.svg new file mode 100644 index 0000000000..3ee92bcfc4 --- /dev/null +++ b/browser/themes/shared/notification-icons/autoplay-media.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/notification-icons/camera-blocked.svg b/browser/themes/shared/notification-icons/camera-blocked.svg new file mode 100644 index 0000000000..fdb7bf27d9 --- /dev/null +++ b/browser/themes/shared/notification-icons/camera-blocked.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/notification-icons/camera.svg b/browser/themes/shared/notification-icons/camera.svg new file mode 100644 index 0000000000..f653b3bcc7 --- /dev/null +++ b/browser/themes/shared/notification-icons/camera.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/notification-icons/desktop-notification-blocked.svg b/browser/themes/shared/notification-icons/desktop-notification-blocked.svg new file mode 100644 index 0000000000..d2f97a166c --- /dev/null +++ b/browser/themes/shared/notification-icons/desktop-notification-blocked.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/notification-icons/desktop-notification.svg b/browser/themes/shared/notification-icons/desktop-notification.svg new file mode 100644 index 0000000000..41d5fa9b40 --- /dev/null +++ b/browser/themes/shared/notification-icons/desktop-notification.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/notification-icons/drag-indicator.svg b/browser/themes/shared/notification-icons/drag-indicator.svg new file mode 100644 index 0000000000..78265cd155 --- /dev/null +++ b/browser/themes/shared/notification-icons/drag-indicator.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/notification-icons/geo-blocked.svg b/browser/themes/shared/notification-icons/geo-blocked.svg new file mode 100644 index 0000000000..53b7d3ed14 --- /dev/null +++ b/browser/themes/shared/notification-icons/geo-blocked.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/notification-icons/geo.svg b/browser/themes/shared/notification-icons/geo.svg new file mode 100644 index 0000000000..fcfd085dcd --- /dev/null +++ b/browser/themes/shared/notification-icons/geo.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/notification-icons/microphone-blocked.svg b/browser/themes/shared/notification-icons/microphone-blocked.svg new file mode 100644 index 0000000000..1f299eb9d6 --- /dev/null +++ b/browser/themes/shared/notification-icons/microphone-blocked.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/notification-icons/microphone.svg b/browser/themes/shared/notification-icons/microphone.svg new file mode 100644 index 0000000000..183793d25c --- /dev/null +++ b/browser/themes/shared/notification-icons/microphone.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/notification-icons/midi.svg b/browser/themes/shared/notification-icons/midi.svg new file mode 100644 index 0000000000..34e6ef569e --- /dev/null +++ b/browser/themes/shared/notification-icons/midi.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/notification-icons/minimize.svg b/browser/themes/shared/notification-icons/minimize.svg new file mode 100644 index 0000000000..9a5144ddf5 --- /dev/null +++ b/browser/themes/shared/notification-icons/minimize.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/notification-icons/persistent-storage-blocked.svg b/browser/themes/shared/notification-icons/persistent-storage-blocked.svg new file mode 100644 index 0000000000..bd804c6976 --- /dev/null +++ b/browser/themes/shared/notification-icons/persistent-storage-blocked.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/notification-icons/persistent-storage.svg b/browser/themes/shared/notification-icons/persistent-storage.svg new file mode 100644 index 0000000000..dd80c09cf8 --- /dev/null +++ b/browser/themes/shared/notification-icons/persistent-storage.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/notification-icons/plugin-badge.svg b/browser/themes/shared/notification-icons/plugin-badge.svg new file mode 100644 index 0000000000..1646dac7e1 --- /dev/null +++ b/browser/themes/shared/notification-icons/plugin-badge.svg @@ -0,0 +1,7 @@ + + + + diff --git a/browser/themes/shared/notification-icons/popup.svg b/browser/themes/shared/notification-icons/popup.svg new file mode 100644 index 0000000000..093fa952da --- /dev/null +++ b/browser/themes/shared/notification-icons/popup.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/notification-icons/screen-blocked.svg b/browser/themes/shared/notification-icons/screen-blocked.svg new file mode 100644 index 0000000000..a9fd846e51 --- /dev/null +++ b/browser/themes/shared/notification-icons/screen-blocked.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/notification-icons/screen.svg b/browser/themes/shared/notification-icons/screen.svg new file mode 100644 index 0000000000..bccfda43c7 --- /dev/null +++ b/browser/themes/shared/notification-icons/screen.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/notification-icons/xr-blocked.svg b/browser/themes/shared/notification-icons/xr-blocked.svg new file mode 100644 index 0000000000..a023bb46d2 --- /dev/null +++ b/browser/themes/shared/notification-icons/xr-blocked.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/notification-icons/xr.svg b/browser/themes/shared/notification-icons/xr.svg new file mode 100644 index 0000000000..d9a870902f --- /dev/null +++ b/browser/themes/shared/notification-icons/xr.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/panic-panel/header.png b/browser/themes/shared/panic-panel/header.png new file mode 100644 index 0000000000..1646804e43 Binary files /dev/null and b/browser/themes/shared/panic-panel/header.png differ diff --git a/browser/themes/shared/panic-panel/header@2x.png b/browser/themes/shared/panic-panel/header@2x.png new file mode 100644 index 0000000000..dd1d07087e Binary files /dev/null and b/browser/themes/shared/panic-panel/header@2x.png differ diff --git a/browser/themes/shared/panic-panel/icons.png b/browser/themes/shared/panic-panel/icons.png new file mode 100644 index 0000000000..436ce8e7d6 Binary files /dev/null and b/browser/themes/shared/panic-panel/icons.png differ diff --git a/browser/themes/shared/panic-panel/icons@2x.png b/browser/themes/shared/panic-panel/icons@2x.png new file mode 100644 index 0000000000..99b33184dd Binary files /dev/null and b/browser/themes/shared/panic-panel/icons@2x.png differ diff --git a/browser/themes/shared/places/bookmarksMenu.svg b/browser/themes/shared/places/bookmarksMenu.svg new file mode 100644 index 0000000000..97154aadb6 --- /dev/null +++ b/browser/themes/shared/places/bookmarksMenu.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/places/bookmarksToolbar.svg b/browser/themes/shared/places/bookmarksToolbar.svg new file mode 100644 index 0000000000..2b031295be --- /dev/null +++ b/browser/themes/shared/places/bookmarksToolbar.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/places/editBookmark.css b/browser/themes/shared/places/editBookmark.css new file mode 100644 index 0000000000..54cd75548a --- /dev/null +++ b/browser/themes/shared/places/editBookmark.css @@ -0,0 +1,161 @@ +/* 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/. */ + +#editBookmarkPanelContent { + display: grid; + grid-template-columns: auto; +} + +#editBMPanel_folderTree, +#editBMPanel_tagsSelector { + height: 12.5em; +} + +#editBMPanel_folderMenuList::part(icon) { + width: 16px; + height: 16px; +} + +@media (-moz-platform: macos) { + /* FIXME(emilio): Is this rule needed at all? */ + .folder-icon > .menu-iconic-left > .menu-iconic-icon { + width: 16px; + height: 16px; + } +} + +.folder-icon > .menu-iconic-left { + display: -moz-box; +} + +.folder-icon { + list-style-image: url("chrome://global/skin/icons/folder.svg") !important; + -moz-context-properties: fill; + fill: currentColor; +} + +#editBMPanel_folderTree { + margin-block: 2px; +} + +@media (-moz-platform: macos) { + #editBMPanel_folderTree { + margin: 6px 4px 0; + } +} + +#editBMPanel_tagsSelector > richlistitem > image { + appearance: auto; + -moz-default-appearance: checkbox; + -moz-box-align: center; + margin: 0 2px; + min-width: 13px; + min-height: 13px; +} + +@media (-moz-platform: windows) { + #editBMPanel_tagsSelector > richlistitem > image { + border: 1px solid -moz-DialogText; + background: Field no-repeat 50% 50%; + } +} + +#bookmarkpropertiesdialog #editBMPanel_tagsSelector { + border-color: var(--in-content-border-color); + padding: 12px; +} + +/* Reset default margins for tags so we can apply custom ones */ +#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem > image, +#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem > label { + margin: 0; +} + +/* Set spacing between tags */ +#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem:not(:last-child) { + margin-bottom: 8px; +} + +#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem > image { + margin-inline-end: 8px; +} + +/* Bookmark panel dropdown icons */ + +#editBMPanel_folderMenuList[selectedGuid="toolbar_____"], +#editBMPanel_toolbarFolderItem { + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important; +} + +#editBMPanel_folderMenuList[selectedGuid="menu________"], +#editBMPanel_bmRootItem { + list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important; +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent > label:not(.editBMPanel_nameRow), +#bookmarkpropertiesdialog #editBookmarkPanelContent > #editBMPanel_folderTreeRow, +#bookmarkpropertiesdialog #editBookmarkPanelContent > #editBMPanel_tagsSelectorRow { + padding-block: var(--editbookmarkdialog-padding) 0; +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent label[control] { + margin-inline-start: 0; + margin-block: 0 4px; +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent { + padding: calc(var(--editbookmarkdialog-padding) / 2) var(--editbookmarkdialog-padding) var(--editbookmarkdialog-padding); +} + +#bookmarkpropertiesdialog .expander-up, +#bookmarkpropertiesdialog .expander-down { + appearance: none; + -moz-context-properties: fill; + fill: currentColor; + margin: 0; + min-width: 32px; + min-height: 32px; + padding: 0; +} + +#bookmarkpropertiesdialog .expander-up { + list-style-image: url("chrome://global/skin/icons/arrow-up.svg"); +} + +#bookmarkpropertiesdialog .expander-down { + list-style-image: url("chrome://global/skin/icons/arrow-down.svg"); +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent > input, +#bookmarkpropertiesdialog #editBookmarkPanelContent > hbox > input, +#bookmarkpropertiesdialog #editBMPanel_folderMenuList { + margin: 0; +} + +/* dialog-specific #editBookmarkPanel styles */ + +#bookmarkpropertiesdialog #editBookmarkPanelContent { + padding-inline: 0; + margin-inline: 4px; +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent, +#bookmarkpropertiesdialog vbox#editBMPanel_nameRow { + padding-top: 0; +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent #editBMPanel_tagsField, +#bookmarkpropertiesdialog #editBookmarkPanelContent #editBMPanel_folderMenuList { + margin-inline-end: 16px; +} + +#bookmarkpropertiesdialog .caption-label { + margin: 4px; + color: var(--in-content-deemphasized-text); +} + +.caption-label { + font-size: 0.9em; + margin: 2px 4px; +} diff --git a/browser/themes/shared/places/editBookmarkPanel.css b/browser/themes/shared/places/editBookmarkPanel.css new file mode 100644 index 0000000000..1250f1e1c1 --- /dev/null +++ b/browser/themes/shared/places/editBookmarkPanel.css @@ -0,0 +1,218 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +/** + * Our OS integration code toggles whether system colors should return light or + * dark values based on the luminosity of the toolbar background. Because themes + * can style panels to have a different background color than the toolbar, we + * need specific overrides for system colors used in light or dark themes. + */ +#editBookmarkPanel:-moz-lwtheme { + color-scheme: light; +} + +:root[lwt-popup-brighttext] #editBookmarkPanel { + color-scheme: dark; +} + +#editBookmarkPanel > .panel-subview-body { + padding-bottom: 0; +} + +html|div#editBookmarkPanelFaviconContainer { + display: flex; +} + +#editBookmarkPanelInfoArea { + overflow: hidden; + padding: 4px var(--arrowpanel-padding) 0; +} + +html|img#editBookmarkPanelFavicon[src] { + box-sizing: content-box; + width: 32px; + height: 32px; + padding: 5px; + background-color: #F9F9FA; + box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); + border-radius: 6px; + margin-top: 10px; + margin-inline-start: 10px; + margin-bottom: -52px; /* margin-top + paddings + height */ +} + +#editBookmarkPanelImage { + border-radius: 4px; + height: 150px; + background-image: -moz-element(#editBookmarkPanelImageCanvas); + background-repeat: no-repeat; + background-size: cover; + margin: 0; +} + +#editBookmarkPanelContent, +#editBookmarkPanelBottomContent { + padding: var(--arrowpanel-padding); +} + +#editBookmarkPanelContent { + padding-bottom: 0; +} + +/* Implements editBookmarkPanel resizing on folderTree un-collapse. */ +#editBMPanel_folderTree { + min-width: 27em; +} + +#editBMPanel_newFolderButton { + appearance: none; + border: 0; + border-radius: 4px; + background-color: var(--button-bgcolor); + color: var(--button-color, inherit); + font-weight: 600; + min-width: 0; + padding: 8px 16px; + + /* This button is deeper in the visual hierarchy than others (notably the + buttons at the bottom of the panel), so it should be slightly smaller. */ + font-size: 90%; + + /* This button needs to align with the tree above it. */ + margin-inline-start: 4px; +} + +#editBMPanel_newFolderButton:hover { + background-color: var(--button-hover-bgcolor); +} + +#editBMPanel_newFolderButton:hover:active { + background-color: var(--button-active-bgcolor); +} + +#editBookmarkPanel > #editBookmarkHeaderSeparator, +#editBookmarkPanel > .panel-subview-body > #editBookmarkSeparator { + margin-bottom: 0; + margin-inline: 16px; +} + +#editBookmarkPanel { + font: caption; +} + +#editBookmarkPanelContent > label:not(.editBMPanel_nameRow), +#editBookmarkPanelContent > #editBMPanel_folderTreeRow, +#editBookmarkPanelContent > #editBMPanel_tagsSelectorRow { + padding-block: var(--arrowpanel-padding) 0; +} + +#editBookmarkPanelContent label[control] { + margin-inline-start: 0; + margin-block: 0 4px; +} + +#editBookmarkPanel .caption-label { + display: none; +} + +#editBookmarkPanelContent { + padding: 0.8em var(--arrowpanel-padding) var(--arrowpanel-padding); +} + +#editBMPanel_selectionCount { + padding-top: 0.8em; +} + +#editBookmarkPanelBottomContent { + padding: 0 var(--arrowpanel-padding) calc(var(--arrowpanel-padding) / 2); +} + +#editBookmarkPanelBottomContent > checkbox { + margin-inline-start: 0; +} + +#editBookmarkPanel_showForNewBookmarks > .checkbox-label-box > .checkbox-label { + opacity: 0.7; +} + +#editBookmarkPanelBottomButtons > button { + margin-top: 0; +} + +#editBookmarkPanel .expander-up > .button-box > .button-text, +#editBookmarkPanel .expander-down > .button-box > .button-text { + display: none; +} + +#editBookmarkPanel .expander-up, +#editBookmarkPanel .expander-down { + appearance: none; /* override button.css */ + -moz-context-properties: fill; + fill: currentColor; + margin: 0; + margin-inline-start: 4px; + min-width: 32px; + min-height: 32px; + color: var(--button-color); + background-color: var(--button-bgcolor); + border-radius: 4px; +} + +#editBookmarkPanel .expander-up:hover, +#editBookmarkPanel .expander-down:hover { + background-color: var(--button-hover-bgcolor); +} + +#editBookmarkPanel .expander-up:hover:active, +#editBookmarkPanel .expander-down:hover:active { + /** + * We override the colour here because on macOS, buttons default to + * having :hover:active buttons have color -moz-buttonactivetext + */ + color: var(--button-color); + background-color: var(--button-active-bgcolor); +} + +#editBookmarkPanel .expander-up { + list-style-image: url("chrome://global/skin/icons/arrow-up.svg"); +} + +#editBookmarkPanel .expander-down { + list-style-image: url("chrome://global/skin/icons/arrow-down.svg"); +} + +#editBMPanel_folderMenuList { + margin: 0; +} + +#editBookmarkPanelContent > html|input, +#editBookmarkPanelContent > hbox > html|input { + appearance: none; + padding: 8px; + border-radius: 4px; + border: 1px solid var(--input-border-color, ThreeDShadow); + background-color: var(--input-bgcolor, Field); + color: var(--input-color, FieldText); + margin: 0; +} + +/* Focus outlines */ + +#editBookmarkPanel .expander-up:focus-visible, +#editBookmarkPanel .expander-down:focus-visible, +#editBMPanel_newFolderButton:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +#editBMPanel_folderTree:focus-visible, +#editBMPanel_tagsSelector:focus-visible, +#editBookmarkPanelContent > html|input:focus-visible, +#editBookmarkPanelContent > hbox > html|input:focus-visible { + border-color: transparent; + outline: var(--focus-outline); + outline-offset: -1px; +} diff --git a/browser/themes/shared/places/folder-smart.svg b/browser/themes/shared/places/folder-smart.svg new file mode 100644 index 0000000000..c38c606efc --- /dev/null +++ b/browser/themes/shared/places/folder-smart.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/places/sidebar.css b/browser/themes/shared/places/sidebar.css new file mode 100644 index 0000000000..c4c7db5701 --- /dev/null +++ b/browser/themes/shared/places/sidebar.css @@ -0,0 +1,216 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +.sidebar-panel { + appearance: none; + background-color: transparent; +} + +/* Themed sidebars */ + +.sidebar-panel[lwt-sidebar] { + background-color: var(--lwt-sidebar-background-color); + color: var(--lwt-sidebar-text-color); + scrollbar-color: rgba(204,204,204,.5) rgba(230,230,235,.5); + color-scheme: light; +} + +.sidebar-panel[lwt-sidebar-brighttext] { + scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3); + color-scheme: dark; +} + +.sidebar-panel[lwt-sidebar] .sidebar-placesTreechildren::-moz-tree-row(selected) { + background-color: hsla(0,0%,80%,.3); +} + +.sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-row(selected) { + background-color: rgba(249,249,250,.1); +} + +.sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-image(selected), +.sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-twisty(selected), +.sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-cell-text(selected) { + color: var(--lwt-sidebar-text-color); +} + +.sidebar-panel[lwt-sidebar-highlight] .sidebar-placesTreechildren::-moz-tree-row(selected,focus) { + background-color: var(--lwt-sidebar-highlight-background-color); +} + +.sidebar-panel[lwt-sidebar-highlight] .sidebar-placesTreechildren::-moz-tree-image(selected, focus), +.sidebar-panel[lwt-sidebar-highlight] .sidebar-placesTreechildren::-moz-tree-twisty(selected, focus), +.sidebar-panel[lwt-sidebar-highlight] .sidebar-placesTreechildren::-moz-tree-cell-text(selected, focus) { + color: var(--lwt-sidebar-highlight-text-color, var(--lwt-sidebar-text-color, var(--sidebar-text-color))); +} + +/* Sidebar tree */ + +.sidebar-placesTree { + appearance: none; + background-color: transparent; + color: inherit; + border: 0; + margin: 0; +} + +/* View button */ + +#viewButton { + appearance: none; + border-radius: 4px; + padding: 2px 4px; + color: inherit; +} + +#viewButton:hover { + /* Matches --toolbarbutton-hover-background: */ + background-color: color-mix(in srgb, currentColor 17%, transparent); +} + +#viewButton[open] { + /* Matches --toolbarbutton-active-background: */ + background-color: color-mix(in srgb, currentColor 30%, transparent); +} + +#viewButton:focus-visible { + outline: var(--focus-outline); +} + +#viewButton > .button-box > .button-menu-dropmarker { + appearance: none !important; + display: -moz-box; + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + width: 12px; + height: 12px; + -moz-context-properties: fill; + fill: currentColor; +} + +@media (-moz-platform: windows) { + :root[uidensity=touch] #search-box, + :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row { + min-height: 32px; + } + + .sidebar-placesTreechildren::-moz-tree-cell, + .sidebar-placesTreechildren::-moz-tree-twisty { + padding: 0 4px; + } + + .sidebar-placesTreechildren::-moz-tree-cell(leaf) , + .sidebar-placesTreechildren::-moz-tree-image(leaf) { + cursor: pointer; + } + + .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) { + cursor: pointer; + text-decoration: underline; + } + + .sidebar-placesTreechildren::-moz-tree-cell(separator) { + cursor: default; + } + + @media (-moz-windows-default-theme) { + .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) { + text-decoration: none; + } + } + + /* Default button vert. margins are 1px/2px, and this can cause misalignment */ + #viewButton { + margin: 0; + margin-inline-start: 4px; + border-radius: 2px; + } + + #sidebar-search-container { + padding: 8px; + } + + #search-box { + margin: 0; + } +} + +@media (-moz-platform: linux) { + #sidebar-search-container { + padding: 8px; + } + + #search-box { + margin: 0; + } + + #viewButton { + margin: 1px 0; + margin-inline-start: 4px; + } + + :root[uidensity=touch] #search-box, + :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row { + min-height: 32px; + } + + .sidebar-placesTreechildren::-moz-tree-cell(leaf) , + .sidebar-placesTreechildren::-moz-tree-image(leaf) { + cursor: pointer; + } + + .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) { + cursor: pointer; + text-decoration: underline; + } + + .sidebar-placesTreechildren::-moz-tree-cell(separator) { + cursor: default; + } +} + +@media (-moz-platform: macos) { + .sidebar-placesTree { + margin: 0; + /* Default font size is 11px on mac, so this is 12px */ + font-size: 1.0909rem; + } + + :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row { + min-height: 32px; + } + + .sidebar-placesTreechildren::-moz-tree-separator { + border-top: 1px solid #505d6d; + margin: 0 10px; + } + + .sidebar-panel:not([lwt-sidebar]) .sidebar-placesTreechildren::-moz-tree-row(selected,blur) { + appearance: auto; + -moz-default-appearance: -moz-mac-source-list-selection; + -moz-font-smoothing-background-color: -moz-mac-source-list-selection; + } + + .sidebar-panel:not([lwt-sidebar-highlight]) .sidebar-placesTreechildren::-moz-tree-row(selected,focus) { + appearance: auto; + -moz-default-appearance: -moz-mac-active-source-list-selection; + -moz-font-smoothing-background-color: -moz-mac-active-source-list-selection; + } + + .sidebar-placesTreechildren::-moz-tree-cell-text { + margin-inline-end: 6px; + } + + #sidebar-search-container { + /* Native searchbar styling already adds 4px margin on Mac, so + * adding 4px padding results in 8px of total whitespace. */ + padding: 4px; + } + + #viewButton { + margin: 4px 0; + margin-inline-end: 4px; + /* Default font size is 11px on mac, so this is 12px */ + font-size: 1.0909rem; + } +} diff --git a/browser/themes/shared/places/tag.svg b/browser/themes/shared/places/tag.svg new file mode 100644 index 0000000000..3be1d0e1be --- /dev/null +++ b/browser/themes/shared/places/tag.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/places/tree-icons.css b/browser/themes/shared/places/tree-icons.css new file mode 100644 index 0000000000..38df3ea4d1 --- /dev/null +++ b/browser/themes/shared/places/tree-icons.css @@ -0,0 +1,95 @@ +/* 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/. */ + +treechildren::-moz-tree-image { + -moz-context-properties: fill, fill-opacity; + fill-opacity: 0.7; +} + +treechildren::-moz-tree-image(title) { + list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); + padding-inline-end: 2px; + margin: 0 2px; + width: 16px; + height: 16px; +} + +treechildren::-moz-tree-image(title, container), +treechildren::-moz-tree-image(title, open) { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +treechildren::-moz-tree-image(title, separator) { + list-style-image: none; + width: 0 !important; + height: 0 !important; + margin: 0; +} + +treechildren::-moz-tree-image(container, queryFolder_toolbar_____) { + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg"); +} + +treechildren::-moz-tree-image(container, queryFolder_menu________) { + list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg"); +} + +/* query-nodes should be styled even if they're not expandable */ +treechildren::-moz-tree-image(query) { + list-style-image: url("chrome://browser/skin/places/folder-smart.svg"); +} + +treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) { + list-style-image: url("chrome://browser/skin/bookmark.svg"); +} + +treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) { + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} + +treechildren::-moz-tree-image(title, query, tagContainer), +treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) { + list-style-image: url("chrome://browser/skin/places/tag.svg"); +} + +/* calendar icon for folders grouping items by date */ +treechildren::-moz-tree-image(title, query, dayContainer) { + list-style-image: url("chrome://browser/skin/history.svg"); +} + +treechildren::-moz-tree-image(title, query, hostContainer) { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +treechildren::-moz-tree-image(query, OrganizerQuery_history____v) { + list-style-image: url("chrome://browser/skin/history.svg"); +} + +/* We want some queries to look like ordinary folders. This must come + after the (title, query) selector, or it would get overridden. */ +treechildren::-moz-tree-image(title, query, folder) { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +treechildren::-moz-tree-cell-text(title, separator) { + color: ThreeDShadow; + margin: 0 5px; +} + +treechildren::-moz-tree-cell-text(title, separator, selected, focus) { + color: SelectedItemText; +} + +/* Remove tiny spacing in separators appearing after the twisty column */ +treechildren::-moz-tree-twisty(title, separator) { + padding: 0; +} + +treechildren::-moz-tree-image(cutting) { + opacity: 0.5; +} + +treechildren::-moz-tree-cell-text(cutting) { + opacity: 0.7; +} diff --git a/browser/themes/shared/preferences/android-menu.svg b/browser/themes/shared/preferences/android-menu.svg new file mode 100644 index 0000000000..1084f264a8 --- /dev/null +++ b/browser/themes/shared/preferences/android-menu.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/preferences/category-general.svg b/browser/themes/shared/preferences/category-general.svg new file mode 100644 index 0000000000..952164e863 --- /dev/null +++ b/browser/themes/shared/preferences/category-general.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/preferences/category-privacy-security.svg b/browser/themes/shared/preferences/category-privacy-security.svg new file mode 100644 index 0000000000..deecf8702f --- /dev/null +++ b/browser/themes/shared/preferences/category-privacy-security.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/preferences/category-search.svg b/browser/themes/shared/preferences/category-search.svg new file mode 100644 index 0000000000..942846b673 --- /dev/null +++ b/browser/themes/shared/preferences/category-search.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/preferences/category-sync.svg b/browser/themes/shared/preferences/category-sync.svg new file mode 100644 index 0000000000..0af29ec1e1 --- /dev/null +++ b/browser/themes/shared/preferences/category-sync.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/preferences/containers-dialog.css b/browser/themes/shared/preferences/containers-dialog.css new file mode 100644 index 0000000000..870c4141eb --- /dev/null +++ b/browser/themes/shared/preferences/containers-dialog.css @@ -0,0 +1,50 @@ +/* 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://browser/content/usercontext/usercontext.css"); + +#name { + -moz-box-flex: 1; +} + +.radio-buttons { + -moz-box-orient: horizontal; + margin-inline-start: 0.35rem; +} + +.radio-buttons > radio { + user-select: none; + outline: 2px solid transparent; + outline-offset: 4px; + min-block-size: 24px; + min-inline-size: 24px; + border-radius: 50%; + padding: 2px; + margin: 9px; +} + +.icon-buttons > radio > .userContext-icon { + fill: var(--in-content-text-color); +} + +.radio-buttons > radio { + padding-inline-start: 2px; +} + +radio > .userContext-icon { + inline-size: 22px; + block-size: 22px; +} + +.radio-buttons > radio[selected=true] { + outline-color: var(--in-content-text-color); +} + +.radio-buttons > radio[focused=true] { + outline-color: var(--in-content-accent-color); +} + +.radio-buttons > radio:hover:active { + outline-color: var(--in-content-accent-color-active); +} diff --git a/browser/themes/shared/preferences/containers.css b/browser/themes/shared/preferences/containers.css new file mode 100644 index 0000000000..43081ce8a4 --- /dev/null +++ b/browser/themes/shared/preferences/containers.css @@ -0,0 +1,54 @@ +/* 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://browser/content/usercontext/usercontext.css"); + +#category-containers { + display: none; +} + +.container-header-links { + margin-block-end: 15px; +} + +[data-identity-icon] { + margin: 0; + margin-inline-end: 16px; +} + +#containersView { + border: 0; + background: transparent; + margin-block-end: 8px; +} + +#containersView richlistitem { + padding-block: 4px; + border-block-end: 1px solid var(--in-content-border-color); +} + +#containersView richlistitem > .container-buttons { + margin-inline-end: 4px; +} + +/* Crop the label at the end using CSS. This isn't using XUL crop + * and a value attribute because those labels cannot be highlighted + * by the prefs' find-in-page feature. + */ +.userContext-label-inprefs { + display: -moz-box; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.userContext-icon-inprefs { + margin-inline: 4px 10px; + width: 24px; + height: 24px; +} + +#containersView richlistitem:last-of-type { + border-block-end: 0; +} diff --git a/browser/themes/shared/preferences/dialog.css b/browser/themes/shared/preferences/dialog.css new file mode 100644 index 0000000000..dcd7783cca --- /dev/null +++ b/browser/themes/shared/preferences/dialog.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/. */ + +window, +dialog { + appearance: none; + background-color: var(--in-content-page-background); + color: var(--in-content-page-color); + margin: 0; + padding: 0; +} + +/* Add some padding around the contents of the dialog */ +dialog { + padding: 6px; +} + +.contentPane, +dialog::part(content-box) { + -moz-box-flex: 1; + /* This allows the focus ring to display fully when scrolling is enabled. */ + padding: 4px; +} + +.contentPane.doScroll, +dialog.doScroll::part(content-box) { + overflow-y: auto; + contain: size; +} + +tree:not(#rejectsTree) { + height: 15em; +} + +.actionButtons { + margin: 3px 0 0; +} + +menulist label { + font-weight: unset; +} diff --git a/browser/themes/shared/preferences/face-sad.svg b/browser/themes/shared/preferences/face-sad.svg new file mode 100644 index 0000000000..7e50710648 --- /dev/null +++ b/browser/themes/shared/preferences/face-sad.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/preferences/face-smile.svg b/browser/themes/shared/preferences/face-smile.svg new file mode 100644 index 0000000000..6ab7f26131 --- /dev/null +++ b/browser/themes/shared/preferences/face-smile.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/browser/themes/shared/preferences/fxaPairDevice.css b/browser/themes/shared/preferences/fxaPairDevice.css new file mode 100644 index 0000000000..51183b84c7 --- /dev/null +++ b/browser/themes/shared/preferences/fxaPairDevice.css @@ -0,0 +1,122 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +#fxaPairDeviceDialog { + padding-bottom: 2em; +} + +#pairTitle { + font-size: 2.1rem; + font-weight: bold; + padding-top: 12px; + text-align: center; +} + +.pairHeading { + font-size: 1.08em; +} + +.menu-icon { + width: 20px; + height: 20px; + vertical-align: middle; + -moz-context-properties: fill; + fill: currentColor; +} + +#qrCodeDisplay { + width: 450px; + margin: auto; +} + +#qrWrapper { + position: relative; + width: 200px; + height: 200px; + margin: auto; + margin-top: 28px; +} + +#qrContainer { + height: 200px; + width: 200px; + background-size: contain; + image-rendering: -moz-crisp-edges; + transition: filter 250ms cubic-bezier(.07,.95,0,1); +} + +#qrWrapper:not([pairing-status="ready"]) #qrContainer { + opacity: 0.05; + filter: blur(3px); +} + +#qrWrapper:not([pairing-status="loading"]) #qrSpinner { + opacity: 0; +} + +#qrSpinner { + display: block; + position: absolute; + height: 250px; + width: 250px; +} + +#qrSpinner::before { + background-image: url("chrome://browser/skin/fxa/fxa-spinner.svg"); + animation: 0.9s spin infinite linear; + background-size: 36px; + background-repeat: no-repeat; + background-position: center; + display: block; + position: absolute; + height: 200px; + width: 200px; + content: ""; + transition: opacity 250ms cubic-bezier(.07,.95,0,1); + will-change: transform; + margin-inline: auto; +} + +#qrWrapper:not([pairing-status="error"]) #qrError { + display: none; +} + +#qrError { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 200px; /* Same as #qrContainer */ + position: absolute; + inset: 0; + margin-inline: auto; + transition: opacity 250ms cubic-bezier(.07,.95,0,1); + cursor: pointer; +} + +.qr-error-text { + text-align: center; + user-select: none; + display: block; + color: #2484C6; + cursor: pointer; +} + +#refresh-qr { + width: 36px; + height: 36px; + background-image: url("chrome://global/skin/icons/reload.svg"); + background-size: contain; + -moz-context-properties: fill; + fill: #2484C6; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/browser/themes/shared/preferences/ios-menu.svg b/browser/themes/shared/preferences/ios-menu.svg new file mode 100644 index 0000000000..15183a814d --- /dev/null +++ b/browser/themes/shared/preferences/ios-menu.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/preferences/mozilla-logo.svg b/browser/themes/shared/preferences/mozilla-logo.svg new file mode 100644 index 0000000000..af66da5135 --- /dev/null +++ b/browser/themes/shared/preferences/mozilla-logo.svg @@ -0,0 +1,5 @@ + + diff --git a/browser/themes/shared/preferences/no-search-bar.svg b/browser/themes/shared/preferences/no-search-bar.svg new file mode 100644 index 0000000000..b5c17b5f26 --- /dev/null +++ b/browser/themes/shared/preferences/no-search-bar.svg @@ -0,0 +1,20 @@ + + + + + + + + diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css new file mode 100644 index 0000000000..12beaa7e01 --- /dev/null +++ b/browser/themes/shared/preferences/preferences.css @@ -0,0 +1,1471 @@ +/* - This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this file, + - You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html "http://www.w3.org/1999/xhtml"; + +/* Global rules */ +* { + user-select: text; +} + +#preferences-root { + text-rendering: optimizeLegibility; + -moz-box-layout: flex; +} + +@media not print { + #preferences-root, + #preferences-body { + height: 100%; + overflow: hidden; + } +} + +#preferences-root, +#preferences-body { + margin: 0; + padding: 0; + width: 100%; +} + +#preferences-body { + vertical-align: top; /* See bug 1606130 */ + display: -moz-box; + -moz-box-orient: vertical; + + --main-pane-width: 664px; +} + +/* + The stack has some very tall content but it shouldn't be taller than the + viewport (and we know the tall content will still be accessible via scrollbars + regardless if the stack has a shorter height). So we use min-height: 0 to allow + the stack to be smaller than its content height so it can fit the viewport size. +*/ +#preferences-stack { + min-height: 0; +} + +.main-content { + padding-top: 0; + /* the 32px min-height, plus 20+30px margin below, plus some leeway: */ + scroll-padding-top: 90px; + contain: inline-size; +} + +.pane-container { + /* A workaround to keep the container always float on the `top: 0` (Bug 1377009) */ + display: block; + width: min(100%, var(--main-pane-width)); + min-width: min-content; +} + +#mainPrefPane { + width: 100%; + padding: 0; +} + +groupbox[data-category] { + margin: 0 0 32px; +} + +html|h1 { + margin: 0 0 8px; + font-size: 1.46em; + font-weight: 300; + line-height: 1.3em; +} + +html|h2 { + margin: 16px 0 4px; + font-size: 1.14em; + line-height: normal; +} + +description.indent, +.indent:not(#browserPrivateEngineSelection) > description { + color: var(--in-content-deemphasized-text); +} + +button, +treecol, +html|option { + /* override the * rule */ + user-select: none; +} + +/* Buttons get a default min-width in XUL. When they also have flex, they will + * be large enough anyway, and we don't want them to become smaller than their inner + * text which would then overflow the button. Set min-width back to auto for that: + */ +button[flex] { + min-width: auto; +} + +description, +label { + line-height: 1.8em; + margin: 0; +} + +.tip-caption { + font-size: .9em; +} + +menulist::part(label), +menuitem > label, +button > hbox > label { + line-height: unset; +} + +.indent { + /* This should match the checkboxes/radiobuttons' width and inline margin, + such that when we have a toggle with a label followed by another element + with this class, the other element's text aligns with the toggle label. */ + margin-inline-start: 22px !important; +} + +checkbox { + margin-inline: 0; +} + +.tail-with-learn-more { + margin-inline: 0 10px; +} + +/* Add a bit of space to the end of descriptions to + * leave margin with e.g. additional buttons on the side. */ +.description-with-side-element { + margin-inline-end: 10px !important; +} + +.learnMore { + margin-inline-start: 0; + font-weight: normal; + white-space: nowrap; +} + +.accessory-button { + min-width: 150px; + margin: 4px 0; +} + +.spotlight { + background-color: color-mix(in srgb, var(--in-content-accent-color) 15%, transparent); + outline: var(--in-content-accent-color) 1px dotted; + animation: fade-out 0.5s ease-out 2s forwards; + /* Show the border to spotlight the components in high-contrast mode. */ + border: 1px solid transparent; + border-radius: 2px; +} + +@keyframes fade-out { + 100% { + background-color: transparent; + outline-color: transparent; + } +} + +[data-subcategory] { + margin-inline: -4px; + padding-inline: 4px; +} + +.ac-site-icon { + display: -moz-box; +} + +/* Subcategory title */ + +/** + * The first subcategory title for each category should not have margin-top. + */ + +.subcategory:not([hidden]) ~ .subcategory { + margin-top: 16px; + padding-top: 16px; + border-top: 1px solid var(--in-content-border-color); +} + +/* Category List */ + +#categories { + overflow: visible !important; /* Cancel scrollbar and do not clip overflow content when window size goes very small */ + padding: 1px; /* Adding padding around richlistitem in order to make entire keyboard focusing outline visible */ +} + +#category-general > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/category-general.svg"); +} + +#category-home > .category-icon { + list-style-image: url("chrome://browser/skin/home.svg"); +} + +#category-search > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/category-search.svg"); +} + +#category-privacy > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/category-privacy-security.svg"); +} + +#category-sync > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/category-sync.svg"); +} + +#category-experimental > .category-icon { + list-style-image: url("chrome://global/skin/icons/experiments.svg"); +} + +#category-more-from-mozilla > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/mozilla-logo.svg"); +} + +/* All panes */ + +.info-icon, +.androidIcon, +.iOSIcon { + -moz-context-properties: fill; + fill: currentColor; +} + +/* General Pane */ + +.is-default > #isNotDefaultPane, +:not(.is-default) > #isDefaultPane { + visibility: hidden; +} + +#isDefaultLabel, +#isNotDefaultLabel { + font-weight: 600; +} + +#browserContainersExtensionContent { + padding-block: 5px; +} + +.extension-controlled { + margin-block: 18px; +} + +.extension-controlled-icon { + height: 20px; + margin: 2px 0 6px; + vertical-align: middle; + width: 20px; + -moz-context-properties: fill; + fill: currentColor; +} + +.extension-controlled-disabled { + -moz-context-properties: fill; + color: GrayText; + fill: currentColor; +} + +.extension-controlled-disabled > .extension-controlled-button { + display: none; +} + +.extension-controlled-icon.close-icon { + height: 30px; + width: 30px; + margin-inline-start: 5px; +} + +#getStarted { + font-size: 90%; +} + +#colors { + margin-inline-start: 5px; +} + +#FontsDialog menulist:empty { + /* When there's no menupopup, while the font builder is running, + * the height of the menulist would otherwise shrink. This throws + * off the height determination SubDialog.sys.mjs does, which then + * leads to content being cut off. Fix by enforcing a minimum height + * when there's no content: */ + min-height: max(32px, calc(1.4em + 16px)); +} + +#useDocumentColors { + margin: 4px 0; +} + +#translationAttributionImage { + width: 70px; + cursor: pointer; +} + +#activeLanguages > richlistitem { + padding: 0.3em; +} + +#saveWhere { + -moz-box-align: center; +} + +#saveTo { + margin-inline-end: 1em; +} + +#downloadFolder { + -moz-box-flex: 1; + margin-block: 4px; + margin-inline-start: 0; + padding-inline-start: 30px; + background-repeat: no-repeat; + background-size: 16px; + background-position: center left 8px; +} + +#downloadFolder:-moz-locale-dir(rtl) { + background-position-x: right 8px; +} + +#updateBox { + margin-block: 4px 32px; +} + +/* Work around bug 560067 - animated images in visibility: hidden + * still eat CPU. */ +#updateDeck > *:not(.deck-selected) > .update-throbber { + display: none; +} + +#updateDeck > hbox > button { + margin-block: 0; + margin-inline-end: 0; +} + +#updateDeck > hbox > label { + -moz-box-flex: 1; +} + +.manualLink { + margin-inline-start: 6px !important; +} + +#updateRadioGroup > radio { + min-height: 30px; + margin: 2px 0; +} + +#filter { + margin: 4px 0 8px; +} + +#handlersView { + height: 25em; + margin-inline-end: 0; +} + +#handlersView > richlistitem { + min-height: 30px; +} + +#handlersViewHeader > treecol, +#handlersView > richlistitem > hbox { + width: 50%; +} + +#handlersView .actionsMenu { + margin: 0; + min-height: 0; + padding: 0; + border: none; + padding-inline-end: 8px; +} + +#handlersView .actionsMenu::part(label) { + margin: 0; +} + +.typeIcon, +.actionIcon, +.actionsMenu::part(icon) { + height: 16px; + width: 16px; +} + +.typeIcon { + margin-inline: 10px 9px !important; +} + +#handlersView .actionsMenu::part(icon), +.actionIcon { + margin-inline: 11px 8px !important; +} + +.actionsMenu > menupopup > menuitem { + padding-inline-start: 10px !important; +} + +.actionsMenu > menupopup > menuitem > .menu-iconic-left { + margin-inline-end: 8px !important; +} + +/* Increase the specifity to override common.inc.css */ +richlistitem[selected] .actionsMenu:focus-visible { + outline-offset: -3px; +} + +/* Home Pane */ + +#homepageGroup menulist, +#homepageGroup html|input { + margin: 5px 0; +} + +#homepageGroup html|input { + text-align: match-parent; +} + +#homepageGroup:-moz-locale-dir(rtl) html|input { + unicode-bidi: plaintext; +} + +#homepageAndNewWindowsOption { + margin-top: 20px; +} + +#homepageGroup:-moz-locale-dir(rtl) panel[type="autocomplete-richlistbox"] { + direction: rtl; +} + +.homepage-button:first-of-type { + margin-inline-start: 0; +} + +.homepage-button:last-of-type { + margin-inline-end: 0; +} + +#homeContentsGroup .checkbox-icon[src] { + -moz-context-properties: fill; + fill: currentColor; + margin-inline: 2px 8px; + width: 16px; +} + +#homeContentsGroup [data-subcategory] { + margin-top: 14px; +} + +#homeContentsGroup [data-subcategory] .section-checkbox { + font-weight: 600; +} + +#homeContentsGroup [data-subcategory] > vbox menulist { + margin-block: 0; +} + +.addon-with-favicon .menu-iconic-icon { + margin-inline-start: 0; +} + +/* Search Pane */ + +#engineList { + margin: 2px 0 5px; +} + +#engineList > treechildren::-moz-tree-image(engineShown, checked), +#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked) { + list-style-image: url("chrome://global/skin/icons/check.svg"); + -moz-context-properties: fill, stroke; + fill: var(--in-content-accent-color); +} + +#engineList > treechildren::-moz-tree-image(engineShown, checked, selected), +#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked, selected) { + fill: var(--in-content-item-selected-text); + stroke: var(--in-content-item-selected); +} + +@media (prefers-contrast) { + #engineList > treechildren::-moz-tree-image(hover), + #blocklistsTree > treechildren::-moz-tree-image(hover) { + fill: var(--in-content-item-hover-text); + stroke: var(--in-content-item-hover); + } +} + +#engineList > treechildren::-moz-tree-row, +#blocklistsTree > treechildren::-moz-tree-row { + min-height: 36px; +} + +#selectionCol { + min-width: 26px; +} + +#addEnginesBox { + margin: 4px 0 0; +} + +/* Privacy Pane */ + +#allowSmartSize { + margin-block: 0 4px; +} + +#doNotTrackLearnMoreBox { + margin-top: 32px; +} + +#historyPane { + margin-top: 4px; +} + +#historyButtons { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +#blockCookies, +#keepRow { + margin-top: 1.5em; +} + +/* Collapse the non-active vboxes in decks to use only the height the + active vbox needs */ +#historyPane:not([selectedIndex="1"]) > #historyDontRememberPane, +#historyPane:not([selectedIndex="2"]) > #historyCustomPane, +#weavePrefsDeck:not([selectedIndex="1"]) > #hasFxaAccount, +#fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified, +#fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected, +#syncStatus:not([selectedIndex="1"]) > #syncConfigured { + visibility: collapse; +} + +#tabsElement { + margin-inline-end: 4px; /* add the 4px end-margin of other elements */ +} + +.text-link { + margin-bottom: 0; +} + +.text-link[disabled="true"] { + pointer-events: none; +} + +#showUpdateHistory { + margin-inline-start: 0; +} + +@media (-moz-platform: windows-win7), + (-moz-platform: windows-win8) { + #windows-sso, + #windows-sso-caption { + display: none; + } +} + +/** + * Dialog + */ + +.dialogOverlay { + visibility: hidden; +} + +.dialogOverlay[topmost="true"] { + background-color: rgba(0,0,0,0.5); +} + +.dialogBox { + background-color: var(--in-content-page-background); + background-clip: content-box; + color: var(--in-content-page-color); + /* `transparent` will use the dialogText color in high-contrast themes and + when page colors are disabled */ + border: 1px solid transparent; + border-radius: 8px; + box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3); + display: -moz-box; + margin: 0; + padding: 0; + overflow-x: auto; +} + +@media (prefers-color-scheme: dark) { + @media not (prefers-contrast) { + .dialogBox { + --in-content-page-background: #42414d; + } + } +} + +.dialogBox[resizable="true"] { + resize: both; + overflow: hidden; + min-height: 20em; + min-width: 66ch; +} + +.dialogTitleBar { + padding: .4em .2em; + border-bottom: 1px solid var(--in-content-border-color); +} + +.dialogTitle { + font-weight: 600; + text-align: center; + user-select: none; +} + +.fxaPairDeviceIcon { + background-image: url("chrome://browser/content/logos/fxa-logo.svg"); + background-position: center center; + background-repeat: no-repeat; + position: relative; + height: 80px; + padding-top: 42px; + margin-top: -40px; +} + +.fxaPairDeviceIcon .close-icon { + margin-top: 10px; +} + +.close-icon { + border: none; + background-color: transparent; /* override common.css, but keep hover/active states */ + min-width: 0; + min-height: auto; + width: 20px; + height: 20px; + padding: 0; + margin-inline: 0 8px; +} + +.dialogFrame { + margin: 10px; + -moz-box-flex: 1; + /* Default dialog dimensions */ + min-width: 66ch; +} + +/** + * End Dialog + */ + +/** + * Font group and font dialog menulist fixes + */ + +#font-chooser-group { + display: grid; + grid-template-columns: max-content 1fr max-content max-content; +} + +#defaultFont { + width: 25ch; +} + +#defaultFontType, +#serif, +#sans-serif, +#monospace { + width: 0; /* Might be able to be removed */ + min-width: 30ch; +} + +/** + * Sync + */ + +.fxaProfileImage { + width: 80px; + height: 80px; + border-radius: 50%; + border: 1px solid transparent; + list-style-image: url(chrome://browser/skin/fxa/avatar-color.svg); + margin-inline-end: 24px; + -moz-user-focus: normal; +} + +.fxaProfileImage.actionable { + cursor: pointer; +} + +.fxaProfileImage.actionable:hover { + border-color: #0095DD; +} + +.fxaProfileImage.actionable:hover:active { + border-color: #ff9500; +} + +#useFirefoxSync { + font-size: 90%; + margin-inline-end: 8px !important; +} + +#fxaNoLoginStatus { + margin-block: 46px 64px; +} + +#fxaSyncComputerName { + -moz-box-flex: 1; + margin-block: 4px; + margin-inline-start: 0; +} + +#fxaChangeDeviceName { + margin-block: 4px; + margin-inline-end: 0; +} + +#noFxaAccount { + line-height: 1.2em; +} + +#noFxaAccount > label:first-child { + margin-bottom: 0.6em; +} + +#noFxaCaption { + line-height: 30px; + margin-block: 0 4px; +} + +#noFxaSignIn { + margin-inline-start: 8px; +} + +.fxaSyncIllustration { + list-style-image: url(chrome://browser/skin/fxa/sync-devices.svg); + width: 312px; + height: 136px; +} + +#noFxaDescription { + padding-inline-end: 52px; +} + +.separator { + border-bottom: 1px solid var(--in-content-box-border-color); +} + +#fxaGroup { + margin-bottom: 32px; +} + +.openLink { + line-height: 30px; + cursor: pointer; +} + +.openLink:visited { + color: var(--in-content-link-color); +} + +#fxaDisplayName { + margin-inline-end: 10px !important; +} + +.fxaLoginRejectedWarning { + list-style-image: url(chrome://global/skin/icons/warning.svg); + -moz-context-properties: fill; + fill: #FFBF00; + margin-inline: 4px 8px; +} + +#syncStatus { + margin-top: 32px; +} + +.sync-group { + margin-block: 16px; + border: 1px solid var(--in-content-border-color); +} + +.sync-configured { + display: block; +} + +.sync-engines-list > div, +.sync-engines-list + hbox { + margin-top: 0; + padding-top: 16px; + max-width: 300px; + height: auto; +} + +dialog > .sync-engines-list > div, +dialog > .sync-engines-list + hbox { + padding-top: 0; +} + +.sync-engines-list checkbox .checkbox-icon, +.sync-engine-image { + margin-inline: 2px 8px; + width: 16px; + height: 16px; + -moz-context-properties: fill; + fill: currentColor; + align-self: center; +} + +.sync-engines-list checkbox { + min-width: max-content; + max-width: calc(50vw - 10px); +} + +.sync-engines-list .checkbox-label-box { + -moz-box-align: center; +} + +.sync-engines-list { + column-count: 2; + column-fill: balance; +} + +.sync-engines-list > div:not([hidden]) { + display: flex; +} + +.sync-engine-bookmarks .checkbox-icon, +.sync-engine-bookmarks.sync-engine-image { + list-style-image: url("chrome://browser/skin/bookmark.svg"); +} + +.sync-engine-history .checkbox-icon, +.sync-engine-history.sync-engine-image { + list-style-image: url("chrome://browser/skin/history.svg"); +} + +.sync-engine-tabs .checkbox-icon, +.sync-engine-tabs.sync-engine-image { + list-style-image: url("chrome://browser/skin/synced-tabs.svg"); +} + +.sync-engine-passwords .checkbox-icon, +.sync-engine-passwords.sync-engine-image { + list-style-image: url("chrome://browser/skin/login.svg"); +} + +.sync-engine-addons .checkbox-icon, +.sync-engine-addons.sync-engine-image { + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} + +.sync-engine-prefs .checkbox-icon, +.sync-engine-prefs.sync-engine-image { + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} + +.sync-engine-addresses .checkbox-icon, +.sync-engine-addresses.sync-engine-image { + list-style-image: url("chrome://formautofill/content/formfill-anchor.svg"); +} + +.sync-engine-creditcards .checkbox-icon, +.sync-engine-creditcards.sync-engine-image { + list-style-image: url("chrome://formautofill/content/icon-credit-card-generic.svg"); +} + +.fxaMobilePromo { + margin-top: 2px !important; +} + +.androidIcon, +.iOSIcon { + margin-inline: 2px 4px; + width: 20px; + height: 20px; + vertical-align: text-bottom; +} + +#updateDeck > hbox > label { + margin-inline-end: 5px ! important; +} + +.update-throbber { + width: 16px; + min-height: 16px; + margin-block: 7px; + margin-inline-end: 8px; +} + +html|img.update-throbber { + vertical-align: middle; +} + +image.update-throbber { + list-style-image: url("chrome://global/skin/icons/loading.png"); +} + +@media (min-resolution: 1.1dppx) { + .update-throbber { + list-style-image: url("chrome://global/skin/icons/loading@2x.png"); + } +} + +.navigation { + overflow-x: hidden; + overflow-y: auto; + position: relative; +} + +@media (prefers-reduced-motion) { + /* Setting border-inline-end on .navigation makes it a focusable element */ + .navigation::after { + content: ""; + width: 1px; + height: 100%; + background-color: var(--in-content-border-color); + top: 0; + inset-inline-end: 0; + position: absolute; + } +} + +.face-sad { + list-style-image: url("chrome://browser/skin/preferences/face-sad.svg"); + width: 20px; + height: 20px; + margin-block: 5px; + margin-inline-end: 8px; +} + +.face-smile { + list-style-image: url("chrome://browser/skin/preferences/face-smile.svg"); + width: 20px; + height: 20px; + margin-block: 5px; + margin-inline-end: 8px; +} + +#policies-container, +#searchInput { + min-height: 32px; + margin: 20px 0 30px; +} + +#policies-container { + margin-inline-end: 16px; + /* Make sure the container is at least the same height as the searchbox. + This is needed in addition to the min-height above to make the info icon + the same height as the first line in the policies label. + Searchbox's height - line-height - border top and bottom */ + padding-block: max(0px, calc((32px - 1.8em - 2px) / 2)); +} + +.info-box-container { + background-color: var(--in-content-box-info-background); + padding: 9px; + border: 1px solid transparent; + border-radius: 4px; +} + +.info-box-container.smaller-font-size { + font-size: 85%; +} + +.info-icon-container { + display: flex; +} + +.info-icon { + list-style-image: url("chrome://global/skin/icons/info.svg"); + width: 16px; + height: 16px; + margin-inline-end: 6px; + align-self: start; + margin-top: 0.4em; + flex-shrink: 0; +} + +.info-box-container.smaller-font-size .info-icon { + margin-top: 0.3em; +} + +.sticky-container { + position: sticky; + background-color: var(--in-content-page-background); + top: 0; + z-index: 1; + /* The sticky-container should have the capability to cover all spotlight area. */ + width: calc(100% + 8px); + margin-inline: -4px; + padding-inline: 4px; +} + +.sticky-inner-container { + -moz-box-flex: 1; + max-width: var(--main-pane-width); +} + +.search-tooltip { + max-width: 10em; + font-size: 1rem; + position: absolute; + padding: 0 .7em; + background-color: #ffe900; + color: #000; + border: 1px solid #d7b600; + margin-top: -18px; + opacity: .85; +} + +.search-tooltip:hover { + opacity: .1; +} + +.search-tooltip::before { + position: absolute; + content: ""; + border: 7px solid transparent; + border-top-color: #d7b600; + top: 100%; + inset-inline-start: calc(50% - 7px); +} + +.search-tooltip::after { + position: absolute; + content: ""; + border: 6px solid transparent; + border-top-color: #ffe900; + top: 100%; + inset-inline-start: calc(50% - 6px); +} + +.search-tooltip-parent { + position: relative; +} + +.search-tooltip > span { + display: block; + user-select: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.visually-hidden { + visibility: collapse; +} + +menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left { + display: -moz-box; + min-width: auto; /* Override the min-width defined in menu.css */ + margin-inline-end: 6px; +} + +menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left > .menu-iconic-icon { + width: 8px; + height: 10px; + margin: 0; +} + +menulist[indicator=true] > menupopup menuitem[indicator=true]:not([image]) > .menu-iconic-left > .menu-iconic-icon { + list-style-image: url(chrome://browser/skin/preferences/search-arrow-indicator.svg); +} + +menulist[indicator=true] > menupopup menuitem[indicator=true]:not([image]) > .menu-iconic-left > .menu-iconic-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.menu-iconic-highlightable-text { + margin: 0; /* Align with the margin of xul:label.menu-iconic-text */ +} + +#no-results-message > label { + margin: 2px 0; + line-height: 30px; +} + +/* Proxy port input */ + +.proxy-port-input { + width: calc(5ch + 18px); /* 5 chars + (8px padding + 1px border) on both sides */ + margin-inline-start: 4px; +} + +#primaryBrowserLocale { + margin-inline-start: 0; + min-width: 20em; +} + +#availableLanguages, +#availableLocales { + margin-inline-start: 0; +} + +#availableLanguages, +#availableLocales, +#activeLanguages, +#selectedLocales { + margin-inline-end: 4px; +} + +#selectedLocales > richlistitem { + padding-inline-start: 13px; +} + +#warning-message > .message-bar-description { + width: 32em; +} + +#warning-message { + margin-top: 8px; +} + +.action-button { + margin-inline-end: 0; +} + +/* Menulist styles */ +.label-item { + font-size: 0.8em; +} + +.updateSettingCrossUserWarningContainer { + margin-block-end: 17px; +} + +#updateSettingCrossUserWarningDesc { + padding-inline-start: calc(16px + 6px); /* radio-check's width + margin-inline-end */ + margin-block-start: 20px; +} + +richlistitem .text-link { + color: inherit; + text-decoration: underline; +} + +richlistitem .text-link:hover { + color: inherit; +} + +#proxy-grid, +#dnsOverHttps-grid { + display: grid; + grid-template-columns: auto 1fr; + align-items: center; +} + +.proxy-grid-row:not([hidden]), +.dnsOverHttps-grid-row:not([hidden]) { + display: contents; +} + +#proxy-grid > .thin { + grid-column: span 2; + height: 20px; +} + +#pane-experimental-search-results-header, +#pane-experimental-subtitle { + background-image: url("chrome://global/skin/icons/warning.svg"); + background-repeat: no-repeat; + background-position: 0 center; + background-size: contain; + min-height: 30px; + padding-inline-start: 38px; + display: flex; + align-items: center; + -moz-context-properties: fill; + fill: #FFBF00; +} + +#pane-experimental-search-results-header:-moz-locale-dir(rtl), +#pane-experimental-subtitle:-moz-locale-dir(rtl) { + background-position-x: right; +} + +#pane-experimental-featureGates { + margin-top: 16px; +} + +.featureGate { + margin-bottom: 16px; +} + +.featureGateCheckbox { + font-size: 1.14em; + -moz-box-align: center; +} + +.featureGateCheckbox > .checkbox-label-box { + -moz-box-align: center; +} + +.featureGateDescription { + margin-inline-start: 28px; +} + +.checkbox-row { + display: flex; + align-items: baseline; +} + +.checkbox-row input[type=checkbox] { + translate: 0 2px +} + +.checkbox-row a { + margin-inline-start: 6px; +} + +#moreFromMozillaCategory-header .title { + margin-block-end: 4px; +} + +#moreFromMozillaCategory-header .subtitle { + color: var(--in-content-text-color); + margin-block-end: 24px; + line-height: 1.4em; +} + +#moreFromMozillaCategory:not([hidden]) { + display: flex; + flex-direction: column; +} + +#moreFromMozillaCategory .mozilla-product-item { + margin-top: 30px; +} + +#moreFromMozillaCategory .product-title { + margin: 4px 0 3px; + background-repeat: no-repeat; + background-size: contain; + padding-inline-start: 30px; + -moz-context-properties: fill; + fill: currentColor; +} + +#moreFromMozillaCategory .product-title:-moz-locale-dir(rtl) { + background-position-x: right; +} + +#moreFromMozillaCategory .product-description-box { + padding-inline-start: 30px; + margin: 2px 0; + line-height: 1.4em; +} + +#moreFromMozillaCategory .description { + display: inline; +} + +#moreFromMozillaCategory .small-button { + margin-block: 14px 2px; + margin-inline: 30px 0; +} + +#firefox-mobile { + background-image: url("chrome://browser/skin/device-phone.svg"); +} + +#mozilla-vpn { + background-image: url("chrome://browser/skin/preferences/vpn-logo.svg"); +} + +#firefox-relay { + background-image: url("chrome://browser/skin/preferences/relay-logo.svg"); +} + +/* + * The :not clause is required because hiding an element with `display: flex` only + * partially hides it. + */ +.qr-code-box:not([hidden="true"]) { + max-width: 320px; /* a unit better than px for this & next? */ + min-height: 204px; + margin-block: 10px 0; + margin-inline-start: 30px; + background-color: var(--in-content-box-info-background); + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + border-radius: 4px; +} + +@media (prefers-contrast) { + .qr-code-box:not([hidden="true"]) { + border: 1px solid currentColor; + } +} + +.qr-code-box-image { + border-radius: 4px; + padding: 2px; + width: 80px; + flex: 0 0 auto; + -moz-context-properties: fill; + fill: currentColor; +} + +.qr-code-title-label { + flex: 1 1 auto; +} + +.qr-code-box-title { + font-size: .87em; + font-weight: normal; + line-height: 1.42em; + + text-align: center; + + margin-block: 20px 0; + margin-inline: 40px; +} + +.simple .qr-code-box-title { + margin-block: 0; + width: 296px; +} + +.simple .qr-code-box { + padding-inline: 24px; + padding-block: 20px +} + +.simple .qr-code-box-image { + padding: 10px; +} + +#moreFromMozillaCategory .qr-code-link { + font-size: .87em; + line-height: 1.42em; +} + +@media (prefers-color-scheme: dark) { + .qr-code-box:not([hidden="true"]) { + background-color: rgba(91,91,102,0.45); + } + + .qr-code-box-title { + color: #fbfbfe; + } +} + +#websiteAppearanceGroup { + display: block; +} + +#web-appearance-chooser { + display: flex; + justify-content: space-between; + gap: 16px; +} + +#web-appearance-chooser, +#web-appearance-override-warning { + margin: 12px 0; +} + +#web-appearance-override-warning:not([hidden]) { + display: flex; +} + +.web-appearance-choice { + width: 100%; + border: 1px solid var(--in-content-box-border-color); + background-color: var(--in-content-box-background-color); + color: var(--in-content-text-color); + border-radius: 4px; + overflow: clip; +} + +.web-appearance-choice-image-container { + background-color: var(--in-content-button-background); + padding: 12px 0; +} + +.web-appearance-choice:hover > .web-appearance-choice-image-container { + background-color: var(--in-content-button-background-hover); +} + +.web-appearance-choice:hover:active > .web-appearance-choice-image-container { + background-color: var(--in-content-button-background-active); +} + +.web-appearance-choice img { + display: block; + margin: 0 auto; + + border: 1px solid var(--in-content-box-border-color); + border-radius: 4px; + box-shadow: 0 0 2px 0 rgba(0,0,0,0.2); + + transform: scaleX(1); + content: url("chrome://browser/content/preferences/web-appearance-light.svg") +} + +.web-appearance-choice.dark img { + content: url("chrome://browser/content/preferences/web-appearance-dark.svg") +} + +.web-appearance-choice img:dir(rtl) { + transform: scaleX(-1); +} + +.web-appearance-choice-footer { + border-top: 1px solid var(--in-content-box-border-color); + padding: 4px 8px; + overflow-wrap: anywhere; + display: flex; +} + +.web-appearance-choice input { + margin-top: 0.4em; +} + +/* Platform-specific tweaks & overrides */ + +@media (-moz-platform: macos) { + tabpanels { + padding: 20px 7px 7px; + } + + #browserUseCurrent, + #browserUseBookmark, + #browserUseBlank { + margin-top: 10px; + } + + #privacyPrefs { + padding: 0 4px; + } + + #privacyPrefs > tabpanels { + padding: 18px 10px 10px; + } + + #OCSPDialogPane { + font: message-box !important; + } + + /** + * Update Preferences + */ + #autoInstallOptions { + margin-inline-start: 20px; + } + + .updateControls { + margin-inline-start: 10px; + } +} + +@media (-moz-platform: linux) { + .treecol-sortdirection { + /* override the Linux only toolkit rule */ + appearance: none; + } +} diff --git a/browser/themes/shared/preferences/privacy.css b/browser/themes/shared/preferences/privacy.css new file mode 100644 index 0000000000..69342135b6 --- /dev/null +++ b/browser/themes/shared/preferences/privacy.css @@ -0,0 +1,364 @@ +/* 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/. */ + +/* Permissions */ + +#trackingGroup { + --section-highlight-background-color: color-mix(in srgb, var(--in-content-accent-color) 20%, transparent); +} + +.permission-icon { + width: 20px; + height: 20px; + vertical-align: middle; + margin-inline-end: 0.2em; +} + +.permission-icon, +.content-blocking-category .checkbox-label-box, +.extra-information-label > image, +.arrowhead, +.reload-tabs-button, +.content-blocking-warning-image { + -moz-context-properties: fill; + fill: currentColor; +} + +.geo-icon { + list-style-image: url(chrome://browser/skin/notification-icons/geo.svg); +} + +.xr-icon { + list-style-image: url(chrome://browser/skin/notification-icons/xr.svg); +} + +.camera-icon { + list-style-image: url(chrome://browser/skin/notification-icons/camera.svg); +} + +.microphone-icon { + list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); +} + +.desktop-notification-icon { + list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification.svg); +} + +.autoplay-icon { + list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media.svg); +} + +.midi-icon { + list-style-image: url(chrome://browser/skin/notification-icons/midi.svg); +} + +/* Content Blocking */ + +/* Override styling that sets descriptions as grey */ +#trackingGroup description.indent, +#trackingGroup .indent > description { + color: inherit; +} + +[data-subcategory="trackingprotection"] { + margin-top: 10px; +} + +#trackingProtectionShield { + list-style-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg"); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.5; + width: 64px; + height: 64px; + margin-inline-end: 10px; +} + +.content-blocking-category, +#fpiIncompatibilityWarning { + margin: 3px 0; +} + +#fpiIncompatibilityWarning { + background-color: var(--section-highlight-background-color); +} + +#fpiIncompatibilityWarning, +#contentBlockingCategories { + margin-top: 16px; +} + +.content-blocking-category { + border-color: var(--in-content-box-border-color); +} + +.content-blocking-category.disabled { + opacity: 0.5; +} + +.content-blocking-category.disabled .radio-check { + opacity: 1; +} + +.content-blocking-category > .indent { + margin-inline-end: 22px; +} + +.arrowhead { + border-radius: 2px; + min-height: 20px; + min-width: 20px; + max-height: 20px; + max-width: 20px; + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + background-color: transparent; + padding: 3px; +} + +.arrowhead:not([disabled]):hover { + cursor: pointer; +} + +.arrowhead.up { + list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg"); +} + +.content-blocking-category.expanded:not(.selected) .reload-tabs { + display: none; +} + +.content-blocking-warning.reload-tabs:not([hidden]) { + display: flex; + flex-wrap: wrap; +} + +.content-blocking-reload-desc-container { + /* 345px is enough for (almost) twice the size of the default English + * string at default font sizes. If this and the button do not fit + * on one line, the button will get wrapped to the next line and this + * item will stretch to fill all available space. */ + flex: 1 1 345px; + display: flex; + align-self: center; +} + +.content-blocking-reload-description { + line-height: 1.8em; + margin-inline-end: 5px; +} + +.reload-tabs-button { + max-height: 30px; + min-height: 30px; + padding: 0 20px; + list-style-image: url("chrome://global/skin/icons/reload.svg"); + align-self: center; +} + +.reload-tabs-button .button-icon { + margin: 0 6px; + color: inherit; +} + +.reload-tabs-button .button-text { + color: inherit; +} + +.content-blocking-category.selected .content-blocking-warning { + background-color: var(--section-highlight-background-color); +} + +.content-blocking-category.selected .arrowhead { + display: none; +} + +.content-blocking-category.selected { + border-color: var(--in-content-accent-color); +} + +@media (prefers-contrast) { + .content-blocking-category.selected { + outline: 2px solid var(--in-content-accent-color); + } +} + +@media not (prefers-contrast) { + .content-blocking-category { + background-color: rgba(215, 215, 219, 0.1); + } + + .content-blocking-category.selected { + background-color: var(--section-highlight-background-color); + } +} + +.content-blocking-warning-title, +.content-blocking-category .radio-label-box { + font-weight: bold; +} + +.content-blocking-category:not(.expanded, .selected) .content-blocking-extra-information { + visibility: collapse; +} + +.extra-information-label { + margin-top: 18px; +} + +/* Apply display: block to the containers of all the category information, as + * without this the flex-wrapped blocks inside don't stretch vertically to + * enclose their content. */ +.content-blocking-category > .indent { + display: block; +} + +.content-blocking-category.expanded .content-blocking-extra-information, +.content-blocking-category.selected .content-blocking-extra-information { + display: flex; + flex-direction: column; + align-content: stretch; +} + +.content-blocking-extra-information > .indent { + margin-bottom: 18px; +} + +.content-blocking-extra-information > .custom-option { + margin: 10px 0; +} + +.content-blocking-warning { + /* Match .indent's horizontal padding, minus the border added via .info-box-container: */ + padding-inline: calc(22px - 1px); + margin: 10px 0; +} + +.content-blocking-warning:not([hidden]) + .content-blocking-warning { + margin-top: 0; +} + +.content-blocking-extra-blocking-desc { + margin-inline-start: 0.5em; + position: relative; + top: 0.65em; +} + +.content-blocking-label { + display: list-item; + line-height: 1.2em; +} + +.content-blocking-warning-image { + list-style-image: url("chrome://global/skin/icons/warning.svg"); + margin-inline-end: 6px; +} + +#blockCookiesMenu { + width: 450px; +} + +#blockCookiesMenu, +#trackingProtectionMenu { + margin: 0; +} + +#changeBlockListLink { + margin-inline-start: 56px; +} + +#telemetry-container { + margin-block: 4px; + line-height: 1.8em; + width: 100%; +} + +.content-blocking-category-description { + font-size: 90%; + opacity: 0.6; +} + +.warning-description { + background: url(chrome://global/skin/icons/warning.svg) no-repeat 0 5px; + opacity: 0.6; + -moz-context-properties: fill, stroke; + fill: #d7b600; + stroke: white; + padding-inline-start: 20px; +} + +.reject-trackers-warning-icon:-moz-locale-dir(rtl) { + background-position-x: right 0; +} + +#contentBlockingChangeCookieSettings { + padding: 0.25em 0.75em; + margin: 4px 8px; +} + +#deleteOnCloseNote { + margin-top: 8px; + margin-inline-end: 32px; +} + +#submitHealthReportBox { + display: -moz-inline-box; +} + +/* Address bar */ + +.firefoxSuggestOptionBox { + /* With this value we're trying to keep the apparent vertical space between + option boxes the same as the apparent vertical space between the labels of + the checkboxes above the Firefox Suggest subsection. */ + margin-block-start: 11px; +} + +.firefoxSuggestOptionBox:first-of-type { + /* Similar here: Make the apparent vertical space between the last checkbox + and first option box the same as elsewhere. */ + margin-block-start: 5px; +} + +.firefoxSuggestToggle { + /* These variables and comments are copied from and override + toggle-button.css. We include values for all variables, even those that are + the same at the time this comment was written, for sanity and locality of + reference. */ + --button-height: 16px !important; + --button-half-height: 8px !important; + --button-width: 32px !important; + --button-border-width: 1px !important; + /* dot-size = button-height - 2*dot-margin - 2*button-border-width */ + --dot-size: 14px !important; + --dot-margin: 0px !important; + /* --dot-transform-x = button-width - 2*dot-margin - dot-size - 2*button-border-width */ + --dot-transform-x: 16px !important; +} + +.firefoxSuggestOptionDescription { + /* Prevent the description from flowing under the toggle button. + 32px = toggle button width + 1em = a little extra */ + padding-inline-end: calc(32px + 1em); + color: var(--in-content-deemphasized-text); +} + +#firefoxSuggestInfoBox { + margin-block-start: 16px; + padding: 12px; +} + +#firefoxSuggestInfoBox > description { + margin-inline-start: 2px; + margin-block: 2px; +} + +#openSearchEnginePreferences { + margin-block-start: 6px; + line-height: 30px; +} + +#openSearchEnginePreferences.extraMargin { + margin-block-start: 24px; +} diff --git a/browser/themes/shared/preferences/relay-logo.svg b/browser/themes/shared/preferences/relay-logo.svg new file mode 100644 index 0000000000..bf99230a1f --- /dev/null +++ b/browser/themes/shared/preferences/relay-logo.svg @@ -0,0 +1,7 @@ + + + + diff --git a/browser/themes/shared/preferences/search-arrow-indicator.svg b/browser/themes/shared/preferences/search-arrow-indicator.svg new file mode 100644 index 0000000000..8ac83df260 --- /dev/null +++ b/browser/themes/shared/preferences/search-arrow-indicator.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + diff --git a/browser/themes/shared/preferences/search-bar.svg b/browser/themes/shared/preferences/search-bar.svg new file mode 100644 index 0000000000..0f592bf476 --- /dev/null +++ b/browser/themes/shared/preferences/search-bar.svg @@ -0,0 +1,25 @@ + + + + + + + + + + diff --git a/browser/themes/shared/preferences/search.css b/browser/themes/shared/preferences/search.css new file mode 100644 index 0000000000..65651e5583 --- /dev/null +++ b/browser/themes/shared/preferences/search.css @@ -0,0 +1,100 @@ +/* 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/. */ + +.searchBarImage { + height: 36px; + width: 631px; + -moz-context-properties: fill, stroke; + fill: var(--in-content-box-background); + stroke: var(--in-content-box-border-color); +} + +.searchBarImage, +#searchShowSearchTermCheckbox { + margin-inline-start: 33px; +} + +.searchBarImage:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.searchBarHiddenImage { + list-style-image: url("chrome://browser/skin/preferences/no-search-bar.svg"); +} + +#searchBarShownRadio { + /* Allow a little visual space to separate the radio from the image above it. */ + margin-top: 10px; +} + +.searchBarShownImage { + list-style-image: url("chrome://browser/skin/preferences/search-bar.svg"); +} + +#defaultEngine, +#defaultPrivateEngine { + margin-inline-start: 0; +} + +#defaultEngine::part(icon), +#defaultPrivateEngine::part(icon) { + height: 16px; + width: 16px; +} + +/* work around a display: none in Linux's menu.css, see bug 1112310 */ +.searchengine-menuitem > .menu-iconic-left { + display: -moz-box; +} + +#engineList { + margin: .5em 0; +} + +#engineList treechildren::-moz-tree-image(engineName) { + margin-inline: 1px 10px; + width: 16px; + height: 16px; +} + +#engineList treechildren::-moz-tree-drop-feedback { + background-color: SelectedItem; + width: 10000px; /* 100% doesn't work; 10k is hopefully larger than any window + we may have, overflow isn't visible. */ + height: 2px; + margin-inline-start: 0; +} + +#engineList treechildren::-moz-tree-image(bookmarks), +#engineList treechildren::-moz-tree-image(tabs), +#engineList treechildren::-moz-tree-image(history) { + -moz-context-properties: fill; +} + +/* Local search shortcut icon colors. These should match the values in + urlbarView.inc.css. */ +#engineList treechildren::-moz-tree-image(bookmarks) { + fill: #0060df; /* Blue-60 */ +} +#engineList treechildren::-moz-tree-image(tabs) { + fill: #008eaf; /* Teal-70 */ +} +#engineList treechildren::-moz-tree-image(history), +#engineList treechildren::-moz-tree-image(bookmarks, selected), +#engineList treechildren::-moz-tree-image(tabs, selected) { + fill: currentColor; +} + +#engineShown { + min-width: 26px; +} + +#addEnginesBox { + margin-bottom: 1em; +} + +#removeEngineButton, +#restoreDefaultSearchEngines { + margin-inline: 0; +} diff --git a/browser/themes/shared/preferences/siteDataSettings.css b/browser/themes/shared/preferences/siteDataSettings.css new file mode 100644 index 0000000000..c793fb740a --- /dev/null +++ b/browser/themes/shared/preferences/siteDataSettings.css @@ -0,0 +1,64 @@ +/* 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/. */ + +/** + * Site Data - Settings dialog + */ +#sitesList { + height: 20em; +} + +/* Show selected items in high contrast mode. */ +#sitesList > richlistitem[selected] { + outline: 1px solid transparent; +} + +#sitesList > richlistitem > hbox, +.item-box > label { + -moz-box-flex: 1; +} + +.item-box { + padding: 5px 8px; + -moz-box-align: center; + width: 50px; +} + +/** + * Confirmation dialog of removing sites selected + */ +#SiteDataRemoveSelectedDialog { + -moz-box-layout: flex; + padding: 16px; + min-width: 50px; +} + +#SiteDataRemoveSelectedDialog.single-entry { + min-height: 8em; +} + +#SiteDataRemoveSelectedDialog.single-entry .multi-site { + display: none; +} + +#SiteDataRemoveSelectedDialog.multi-entry #removalList { + max-height: 20em; +} + +#SiteDataRemoveSelectedDialog > dialog { + padding: 0; /* override dialog.css */ +} + +#contentContainer { + font-size: 1.2em; + margin-bottom: 10px; +} + +.question-icon { + margin: 6px; +} + +#removing-label { + font-weight: bold; +} diff --git a/browser/themes/shared/preferences/vpn-logo.svg b/browser/themes/shared/preferences/vpn-logo.svg new file mode 100644 index 0000000000..5300d3bf5c --- /dev/null +++ b/browser/themes/shared/preferences/vpn-logo.svg @@ -0,0 +1,4 @@ + + diff --git a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css new file mode 100644 index 0000000000..3af748c9cc --- /dev/null +++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css @@ -0,0 +1,458 @@ +/* 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"); + +@media not (prefers-contrast) { +html.private { + --in-content-page-color: white; + --in-content-text-color: white; + --in-content-page-background: #25003e; + --in-content-link-color-hover: white; + --in-content-link-color-active: white; + --in-content-banner-background: #f9f9fe; + --in-content-banner-text-color: #0c0c0d; + --in-content-button-background-hover: rgba(12,12,13,.1); + --in-content-button-background-active: rgba(12,12,13,.15); +} +} + +/** + * When the showBanner class is applied, the banner is displayed at the top + * of the page, and we need to adjust the padding, so that the banner is + * spread across the full page width. + */ +body.showBanner { + padding: 0 0 40px; + min-height: 0; +} + +.showBanner > .showPrivate { + padding: 40px 48px 0; +} + +a:link { + color: inherit; + text-decoration: underline; +} + +a:link:hover { + color: inherit; +} + +.container { + max-width: 768px; +} + +p { + line-height: 1.5em; +} + +.logo-and-wordmark { + align-items: center; + display: flex; + justify-content: center; + margin-bottom: 50px; +} + +.logo { + /* The new private browsing logo, shown for + "browser.privatebrowsing.enable-new-logo" == true */ + background: url("chrome://branding/content/about-logo-private.png") no-repeat center center; + background-size: 96px; + display: inline-block; + height: 96px; + width: 96px; +} + +.logo[legacy] { + /* The legacy private browsing logo, shown for + "browser.privatebrowsing.enable-new-logo" == false */ + background-image: url("chrome://branding/content/about-logo.png"); +} + +@media (min-resolution: 2x) { + .logo { + background-image: url('chrome://branding/content/about-logo-private@2x.png'); + } + .logo[legacy] { + background-image: url('chrome://branding/content/about-logo@2x.png'); + } +} + +.wordmark { + display: inline-block; + background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center; + background-size: 172px; + margin-inline-start: 15px; + -moz-context-properties: fill; + fill: currentColor; + height: 96px; + width: 172px; +} + +.search-inner-wrapper { + display: flex; + height: 48px; + padding: 0 22px; + min-width: 70vw; +} + +.promo-image-large { + margin-inline-end: 6px; + min-width: 160px; +} + +.promo-image-small { + display: none; +} + +.promo.top { + background: rgba(255, 255, 255, .2); + position: absolute; + top: 0; + left: 0; + right: 0; + border-bottom: 1px solid rgba(255, 255, 255, .3); +} + +.promo.top .promo-image-large { + min-width: 100px; + margin-inline: 6px; +} + +.promo.top ~ .container { + margin-top: 120px; +} + +@media (min-width: 764px) { + .search-inner-wrapper { + min-width: 680px; + } + + .promo-image-large { + margin-inline-end: 36px; + min-width: 200px; + } + + .promo-image-small { + display: block; + } + + .promo.top { + padding: 10px 22%; + } + + .promo.top .promo-image-large { + min-width: 120px; + } + + .promo.top .vpn-promo { + margin: 10px 0; + } +} + +@media (max-height: 780px) { + /* On screens with not enough height we need to push down the content + * to make room for the banner */ + .promo.top ~ .container { + margin-top: 140px; + } +} + +.search-handoff-button, +.search-handoff-button:active, +.search-handoff-button:enabled:hover:active { + background: #fff var(--newtab-search-icon) 12px center no-repeat; + background-size: 24px; + border: solid 1px rgba(249, 249, 250, 0.2); + border-radius: 3px; + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15); + cursor: text; + font-size: 15px; + font-weight: normal; + margin: 0; + padding-block: 0; + padding-inline: 46px 48px; + position: relative; + opacity: 1; + width: 100%; + -moz-context-properties: fill; + fill: rgba(12, 12, 13, 0.4); +} + +.search-handoff-button.focused:not(.disabled) { + border: solid 1px #0060df; + box-shadow: 0 0 0 1px #0060df, 0 0 0 4px rgba(0, 96, 223, 0.3); +} + +.search-handoff-button.disabled { + opacity: 0.5; + box-shadow: none; +} + +.search-handoff-button:dir(rtl), +.search-handoff-button:active:dir(rtl), +.search-handoff-button:enabled:hover:active:dir(rtl) { + background-position-x: right 12px; +} + +.search-inner-wrapper .search-handoff-button:hover, +.search-inner-wrapper .search-handoff-button:hover:active { + background-color: #fff; + color: inherit; +} + +.search-handoff-button.focused:not(.disabled) .fake-caret { + display: block; +} + +.fake-editable:focus { + outline: none; + caret-color: transparent; +} + +.fake-editable { + border: 0; + height: 100%; + top: 0; + inset-inline-start: 0; + opacity: 0; + padding: 0; + position: absolute; + width: 100%; +} + +.fake-textbox { + color: rgb(12, 12, 13); + opacity: 0.54; + text-align: start; +} + +@keyframes caret-animation { + to { + visibility: hidden; + } +} + +.fake-caret { + animation: caret-animation 1.3s steps(5, start) infinite; + background-color: rgb(12, 12, 13); + display: none; + inset-inline-start: 47px; + height: 17px; + position: absolute; + top: 16px; + width: 1px; +} + +@media (prefers-contrast) { + .fake-caret { + background-color: ButtonText; + } +} + +.search-banner { + width: 100%; + background-color: var(--in-content-banner-background); + color: var(--in-content-banner-text-color); +} + +.banner-body { + margin: auto; + width: max-content; + background-image: url("chrome://global/skin/icons/settings.svg"); + background-position: left 0 top 50px; + background-repeat: no-repeat; + background-size: 32px; + letter-spacing: -.2px; + padding: 50px 0; + padding-inline-start: 44px; +} + +.banner-body:dir(rtl) { + background-position-x: right; +} + +.banner-body h1 { + font-size: 18px; + font-weight: bold; + color: var(--in-content-banner-text-color); + line-height: 1em; + margin: 7px 0; +} + +.banner-body p { + font-size: 15px; + line-height: 1em; + margin: 4px 0; +} + +.info { + margin-top: 64px; + background-color: rgba(0, 0, 0, 0.2); + background-image: url("chrome://global/skin/icons/indicator-private-browsing.svg"); + background-position: left 32px top 20px; + background-repeat: no-repeat; + background-size: 32px; + border: 1px solid transparent; + border-radius: 6px; + letter-spacing: -0.2px; + padding: 20px; + padding-inline-start: 76px; +} + +.info:dir(rtl) { + background-position-x: right 32px; +} + +.info h1, +.promo h1 { + font-size: 18px; + font-weight: bold; + line-height: 28px; +} + +.info p { + margin-top: 0; + font-size: 15px; + line-height: 25px; +} + +.info #info-title + p { + margin-top: 15px; +} + +.search-banner-close-button { + float: inline-end; + /* min-width and min-height override values set on button elements. */ + min-width: 28px; + min-height: 28px; + /* Forcing height and line-height ensure the button hover is displayed correctly + as a square box (and focus box). No text gets displayed here so that's ok. */ + height: 28px; + line-height: 0; + margin: 16px; + padding: 0; + background-color: inherit; + border: 0; +} + +.search-banner-close-image { + -moz-context-properties: fill; + fill: currentColor; + width: 22px; +} + +.promo { + text-align: center; + align-items: center; +} + +.promo-visible { + display: flex; + border: 1px solid transparent; + border-radius: 6px; + background-color: rgba(0, 0, 0, 0.2); +} + +.promo-dismiss { + padding: 10px; + min-width: 16px; + min-height: 16px; + display: inline flow-root; + background: url("chrome://global/skin/icons/close.svg") center no-repeat; + cursor: pointer; + -moz-context-properties: fill; + fill: currentColor; + position: relative; + top: -90px; +} + +@media not (prefers-contrast) { + .promo-dismiss { + opacity: 0.6; + } + + .promo-dismiss:hover { + background-color: color-mix(in srgb, currentColor 10%, transparent) !important; + } + + .promo-dismiss:hover:active { + background-color: color-mix(in srgb, currentColor 20%, transparent) !important; + } +} + +.promo-content { + width: 100%; +} + +.promo-image-large img { + width: 100%; +} + +.promo-cta { + display: flex; + justify-content: space-between; + align-items: center; +} + +.promo-cta .primary { + padding-block: 11px; + margin: 8px 0; + font-weight: 600; + cursor: pointer; +} + +.promo.bottom .promo-cta { + display: unset; +} + +.promo.bottom h1 { + margin-bottom: 1em; +} + +.promo a { + color: inherit; + text-decoration: underline; + flex: 1; +} + +.promo.top a, +.promo.below-search a { + flex: unset; +} + +.promo.top, +.promo.below-search { + text-align: start; +} + +.promo.below-search { + padding: 25px 22px 10px; + margin-top: 25px; +} + +.promo.bottom { + margin-top: 30px; +} + +.promo.bottom .promo-image-small { + margin-top: 40px; +} + +.promo.bottom .promo-image-small img { + height: 40px; +} + +.promo.top > .promo-content { + padding: 10px 6px; +} + +.promo-link { + margin: 0; + cursor: pointer; + color: var(--in-content-link-color-active); + text-decoration: underline; +} diff --git a/browser/themes/shared/privatebrowsing/favicon.svg b/browser/themes/shared/privatebrowsing/favicon.svg new file mode 100644 index 0000000000..9a6acd3b16 --- /dev/null +++ b/browser/themes/shared/privatebrowsing/favicon.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/profiler-popup-backdrop.png b/browser/themes/shared/profiler-popup-backdrop.png new file mode 100644 index 0000000000..675b49a234 Binary files /dev/null and b/browser/themes/shared/profiler-popup-backdrop.png differ diff --git a/browser/themes/shared/protections/breached-password.svg b/browser/themes/shared/protections/breached-password.svg new file mode 100644 index 0000000000..d080744740 --- /dev/null +++ b/browser/themes/shared/protections/breached-password.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/protections/new-feature.svg b/browser/themes/shared/protections/new-feature.svg new file mode 100644 index 0000000000..00ae3843a6 --- /dev/null +++ b/browser/themes/shared/protections/new-feature.svg @@ -0,0 +1,10 @@ + + + + + + + + diff --git a/browser/themes/shared/protections/resolved-breach-gray.svg b/browser/themes/shared/protections/resolved-breach-gray.svg new file mode 100644 index 0000000000..0bfda007fa --- /dev/null +++ b/browser/themes/shared/protections/resolved-breach-gray.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/protections/resolved-breach.svg b/browser/themes/shared/protections/resolved-breach.svg new file mode 100644 index 0000000000..274cd570c8 --- /dev/null +++ b/browser/themes/shared/protections/resolved-breach.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/search/search-engine-placeholder.png b/browser/themes/shared/search/search-engine-placeholder.png new file mode 100644 index 0000000000..bff355bf48 Binary files /dev/null and b/browser/themes/shared/search/search-engine-placeholder.png differ diff --git a/browser/themes/shared/search/search-engine-placeholder@2x.png b/browser/themes/shared/search/search-engine-placeholder@2x.png new file mode 100644 index 0000000000..1565fc55df Binary files /dev/null and b/browser/themes/shared/search/search-engine-placeholder@2x.png differ diff --git a/browser/themes/shared/search/search-indicator-badge-add.svg b/browser/themes/shared/search/search-indicator-badge-add.svg new file mode 100644 index 0000000000..eef74b2c72 --- /dev/null +++ b/browser/themes/shared/search/search-indicator-badge-add.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/searchbar.css b/browser/themes/shared/searchbar.css new file mode 100644 index 0000000000..9afb692ddd --- /dev/null +++ b/browser/themes/shared/searchbar.css @@ -0,0 +1,180 @@ +/* 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/. */ + +.searchbar-engine-image { + width: 16px; + height: 16px; + list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +.search-one-offs:not([hidden]) { + display: block; + width: 100%; +} + +.search-panel-one-offs-header { + display: block; +} + +.search-panel-header { + font-weight: normal; + margin: 0; +} + +.search-panel-header > label { + margin-top: 2px; + margin-bottom: 1px; + opacity: .6; +} + +/* Make the contrast stronger in dark mode */ +:root[lwt-toolbar-field-focus-brighttext] .search-panel-header > label { + opacity: 1; +} + +/** + * The borders of the various elements are specified as follows. + * + * The current engine always has a bottom border. + * The search results never have a border. + * + * When the search results are not collapsed: + * - The elements underneath the search results all have a top border. + * + * When the search results are collapsed: + * - The elements underneath the search results all have a bottom border. + */ + +.search-panel-current-engine { + -moz-box-align: center; + border-top: none !important; + padding-inline: 8px; +} + +.search-panel-one-offs:not([hidden]), +.search-panel-one-offs-container { + display: flex; + flex-direction: row; + flex-grow: 1; +} + +.search-panel-one-offs { + margin: 0 !important; + /* Bug 1108841: prevent font-size from affecting the layout */ + line-height: 0; + flex-wrap: wrap; +} + +.searchbar-engine-one-off-item { + appearance: none; + display: -moz-inline-box; + background-color: transparent; + border: none; + min-width: 32px; + height: 32px; + margin-inline-end: 8px; + margin-block: 0; + padding: 0; + color: inherit; + border-radius: var(--toolbarbutton-border-radius); +} + +@media (-moz-platform: windows) { + .searchbar-engine-one-off-item:focus-visible { + outline: none; + } +} + +/* We don't handle `:active` because it doesn't work on the search or settings + buttons due to event.preventDefault() in SearchOneOffs._on_mousedown(). */ +.searchbar-engine-one-off-item:not([selected]):hover { + background-color: var(--autocomplete-popup-hover-background); + color: inherit; +} + +.searchbar-engine-one-off-item[selected] { + background-color: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); +} + +.searchbar-engine-one-off-item > .button-box > .button-text { + display: none; +} + +.searchbar-engine-one-off-item > .button-box > .button-icon { + margin-inline: 0; + width: 16px; + height: 16px; +} + +.search-panel-tree { + background: transparent; + color: inherit; +} + +.search-panel-tree > .autocomplete-richlistitem { + padding: 1px 3px; +} + +.search-panel-tree > .autocomplete-richlistitem:hover { + background-color: var(--autocomplete-popup-hover-background); +} + +.search-panel-tree > .autocomplete-richlistitem > .ac-type-icon { + display: -moz-box; + width: 14px; + height: 14px; + margin-inline-end: 7px; +} + +.search-panel-tree > .autocomplete-richlistitem[originaltype="fromhistory"] > .ac-type-icon { + list-style-image: url("chrome://browser/skin/history.svg"); + -moz-context-properties: fill; + fill: currentColor; + fill-opacity: 0.6; +} + +.search-panel-tree > .autocomplete-richlistitem[originaltype="fromhistory"][selected] > .ac-type-icon { + fill-opacity: 1; +} + +.searchbar-separator { + appearance: none; + margin: var(--panel-separator-margin); + padding: 0; + border: 0; + border-top: 1px solid var(--autocomplete-popup-separator-color); + color: inherit; +} + +.search-panel-tree[collapsed=true] + .searchbar-separator { + display: none; +} + +.search-setting-button { + max-height: 32px; + align-self: end; + margin-inline: 0; +} + +.search-setting-button > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/settings.svg"); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: var(--urlbar-icon-fill-opacity); +} + +@media (-moz-platform: windows-win10) { + #PopupSearchAutoComplete { + --panel-border-radius: var(--arrowpanel-border-radius); + } +} + +@media (-moz-platform: macos) { + #PopupSearchAutoComplete { + border-radius: 4px; + } +} diff --git a/browser/themes/shared/setDesktopBackground.css b/browser/themes/shared/setDesktopBackground.css new file mode 100644 index 0000000000..768bc7c949 --- /dev/null +++ b/browser/themes/shared/setDesktopBackground.css @@ -0,0 +1,23 @@ +/* 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"); + +html|canvas#screen { + border-style: solid; + border-width: 12px 11px; + border-image: url("chrome://browser/skin/monitor-border.png") 12 11 stretch; +} + +#monitor-base { + list-style-image: url("chrome://browser/skin/monitor-base.png"); +} + +html|p#preview-unavailable { + margin: 12px 11px; + text-align: center; + color: #9B2423; + font-weight: bold; +} diff --git a/browser/themes/shared/sidebar.css b/browser/themes/shared/sidebar.css new file mode 100644 index 0000000000..fb879bc73f --- /dev/null +++ b/browser/themes/shared/sidebar.css @@ -0,0 +1,135 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +#sidebar-box { + --sidebar-background-color: Field; + --sidebar-text-color: FieldText; + background-color: var(--sidebar-background-color); + color: var(--sidebar-text-color); + text-shadow: none; +} + +#sidebar-header { + font-size: 1.333em; + padding: 8px; + border-bottom: 1px solid var(--sidebar-border-color); +} + +#sidebar-spacer { + /* To ensure the button doesn't expand unnecessarily for short labels, the + spacer should significantly out-flex the button. */ + -moz-box-flex: 1000; +} + +#sidebar { + -moz-box-flex: 1; +} + +@media not (-moz-platform: linux) { + /* We don't let the splitter overlap the sidebar on Linux since the sidebar's + scrollbar is too narrow on Linux. */ + .sidebar-splitter { + appearance: none; + border: 0 solid; + border-inline-end-width: 1px; + border-color: var(--sidebar-border-color); + min-width: 1px; + width: 4px; + background-image: none !important; + background-color: transparent; + margin-inline-start: -4px; + position: relative; + } + + #sidebar-box[positionend] + .sidebar-splitter { + border-inline-width: 1px 0; + margin-inline: 0 -4px; + } +} + +#sidebar-throbber[loading="true"] { + list-style-image: url("chrome://global/skin/icons/loading.png"); +} + +@media (min-resolution: 2dppx) { + #sidebar-throbber[loading="true"] { + list-style-image: url("chrome://global/skin/icons/loading@2x.png"); + width: 16px; + } +} + +#sidebar-title { + margin: 0; + padding: 0; + padding-inline: 8px 4px; + -moz-box-flex: 1; +} + +#sidebar-switcher-arrow { + -moz-context-properties: fill; + fill: currentColor; + opacity: 0.8; +} + +#sidebar-switcher-arrow { + list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg); + width: 12px; + height: 12px; +} + +#sidebar-switcher-target { + appearance: none; + color: inherit; + margin-inline-end: 4px; + border-radius: var(--toolbarbutton-border-radius); + border: 1px solid transparent; + padding: 2px 4px; + -moz-box-flex: 1; +} + +#sidebar-switcher-target:hover { + background-color: var(--toolbarbutton-hover-background); +} + +#sidebar-switcher-target:hover:active, +#sidebar-switcher-target.active { + background-color: var(--toolbarbutton-active-background); +} + +#sidebar-switcher-target:focus-visible, +#sidebar-close:focus-visible { + outline: var(--focus-outline); + outline-offset: 0; +} + +#sidebarMenu-popup .subviewbutton { + min-width: 190px; +} + +toolbarseparator + #sidebar-extensions-separator { + display: none; +} + +#sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { + list-style-image: url(chrome://browser/skin/bookmark.svg); + -moz-context-properties: fill; + fill: currentColor; + opacity: 0.8; +} + +#sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { + list-style-image: url(chrome://browser/skin/history.svg); + -moz-context-properties: fill; + fill: currentColor; + opacity: 0.8; +} + +#sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { + list-style-image: url(chrome://browser/skin/synced-tabs.svg); + -moz-context-properties: fill; + fill: currentColor; + opacity: 0.8; +} diff --git a/browser/themes/shared/spotlight.css b/browser/themes/shared/spotlight.css new file mode 100644 index 0000000000..8f09943238 --- /dev/null +++ b/browser/themes/shared/spotlight.css @@ -0,0 +1,85 @@ +/* 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/. */ + +/* Whether this is actually still required + * is not totally clear, but better to be safe than sorry: + * + * For some reason SubDialog browser sizing can result in scrollbars, so just + * hide the horizontal scrollbar that would have then required vertical + * scrollbar. This should be okay as we wrap content for this fixed width + * dialog unless the window is actually narrow and really does need + * horizontal scrollbars. */ +@media (min-width: 544px) { +body { + overflow-x: hidden; +} +} + +body { + padding: 20px 40px; + /* Keep as multiple of 4px. Match min-width media query above + padding. */ + width: 464px; +} + +#dialog-content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + text-align: center; +} + +.logo { + width: 100px; + height: 100px; + object-fit: contain; + margin-bottom: 8px; +} + +#title { + font-weight: 500; + font-size: 26px; + margin-bottom: 0; + white-space: pre-wrap; +} + +#content { + font-weight: 400; + font-size: 13px; + margin-block: 10px 18px; +} + +#learn-more-toggle::after { + background: url("chrome://global/skin/icons/arrow-right.svg") center / 12px no-repeat; + content: ""; + -moz-context-properties: fill; + fill: currentColor; + padding-inline: .5em; +} + +#learn-more-toggle:dir(rtl)::after { + background-image: url("chrome://global/skin/icons/arrow-left.svg"); +} + +#learn-more-toggle[aria-expanded="true"]::after { + background-image: url("chrome://global/skin/icons/arrow-down.svg"); +} + +#learn-more-toggle[aria-expanded="false"] + .expanded { + visibility: hidden; +} + +.expanded { + margin-bottom: 0; +} + +#primary { + font-size: 13px; +} + +#secondary { + /* make the font look like the mock */ + font-size: 13px; + padding: 4px; +} diff --git a/browser/themes/shared/swipe-gesture-icons/history-swipe-arrow.svg b/browser/themes/shared/swipe-gesture-icons/history-swipe-arrow.svg new file mode 100644 index 0000000000..db91aff0c8 --- /dev/null +++ b/browser/themes/shared/swipe-gesture-icons/history-swipe-arrow.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + diff --git a/browser/themes/shared/syncedtabs/sidebar.css b/browser/themes/shared/syncedtabs/sidebar.css new file mode 100644 index 0000000000..406bfc71e4 --- /dev/null +++ b/browser/themes/shared/syncedtabs/sidebar.css @@ -0,0 +1,371 @@ +/* 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/. */ + +/* These styles are intended to mimic XUL trees and the XUL search box. */ + +html { + height: 100%; + box-sizing: border-box; +} + +body { + height: 100%; + margin: 0; + font: message-box; + background-color: Field; + color: FieldText; + user-select: none; +} + +/* The content-container holds the non-scrollable header and the scrollable + content area. +*/ +.content-container { + display: flex; + flex-flow: column; + height: 100%; +} + +/* The content header is not scrollable */ +.content-header { + flex: 0 1 auto; +} + +/* The main content area is scrollable and fills the rest of the area */ +.content-scrollable { + flex: 1 1 auto; + overflow: auto; +} + +.emptyListInfo { + cursor: default; + padding: 3em 1em; + text-align: center; +} + +.list, +.item-tabs-list { + display: flex; + flex-flow: column; + flex-grow: 1; +} + +.item.client { + opacity: 1; + max-height: unset; + display: unset; +} + +.item.client.closed .item-tabs-list { + display: none; +} + +.item { + display: inline-block; + opacity: 1; + flex: 1; + min-width: 0; + white-space: nowrap; + overflow: hidden; + outline: none; +} + +.item.selected > .item-title-container { + background-color: -moz-cellhighlight; + color: -moz-cellhighlighttext; +} + +.item.selected:focus > .item-title-container { + background-color: SelectedItem; + color: SelectedItemText; +} + +.item.client .item-twisty-container { + min-width: 12px; + height: 12px; + background-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 1; +} + +.item.client.closed .item-twisty-container { + background-image: url("chrome://global/skin/icons/arrow-right-12.svg"); +} + +.item.client.closed .item-twisty-container:dir(rtl) { + background-image: url("chrome://global/skin/icons/arrow-left-12.svg"); +} + +.client .item.tab > .item-title-container { + padding-inline-start: 35px; +} + +.item.tab > .item-title-container { + padding-inline-start: 20px; +} + +.item.client[clientType] > .item-title-container > .item-icon-container { + -moz-context-properties: fill; + fill: currentColor; +} + +.item.client[clientType=phone] > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/device-phone.svg"); +} + +.item.client[clientType=tablet] > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/device-tablet.svg"); +} + +.item.client[clientType=desktop] > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/device-desktop.svg"); +} + +.item.client[clientType=tv] > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/device-tv.svg"); +} + +.item.client[clientType=vr] > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/device-vr.svg"); +} + +.item.tab > .item-title-container > .item-icon-container { + background-image: url("chrome://global/skin/icons/defaultFavicon.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +.item-icon-container { + min-width: 16px; + max-width: 16px; + min-height: 16px; + max-height: 16px; + margin-inline: 5px; + background-size: 16px 16px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +.item-title-container { + display: flex; + flex-flow: row; + overflow: hidden; + flex-grow: 1; + align-items: center; + padding: 4px; +} + +.item-title { + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + margin: 1px 0 0; + margin-inline-end: 6px; + line-height: 1.3; + cursor: default; +} + +.item[hidden] { + opacity: 0; + max-height: 0; + transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms; +} + +.item.empty .item-title-container { + color: #aeaeae; +} + +.client .item.empty > .item-title-container { + padding-inline-start: 35px; +} + +.sync-state > p { + padding-inline: 10px; +} + +.text-link { + color: rgb(0, 149, 221); + cursor: pointer; +} + +.text-link:hover { + text-decoration: underline; +} + +.text-link, +.text-link:focus { + margin: 0; + padding: 0; + border: 0; +} + +.deck .sync-state { + display: none; + opacity: 0; + transition: opacity 1.5s; + border-top: 1px solid #bdbdbd; +} + +.deck .sync-state.tabs-container { + border-top: 0; +} + +.deck .sync-state.selected { + display: unset; + opacity: 100; +} + +.deck .syncIllustration, +.deck .syncIllustrationIssue { + height: 174px; + margin: 38px 8px 15px; + background-position: center; + background-repeat: no-repeat; + background-size: contain; +} + +.deck .syncIllustration { + background-image: url(chrome://browser/skin/fxa/sync-illustration.svg); +} + +.deck .syncIllustrationIssue { + background-image: url(chrome://browser/skin/fxa/sync-illustration-issue.svg); +} + +.deck .instructions { + text-align: center; + color: GrayText; + padding: 0 11px; + max-width: 15em; + margin: 0 auto; +} + +body[lwt-sidebar] .deck .instructions { + color: inherit; + opacity: .6; +} + +.deck .button { + display: block; + background-color: #0060df; + color: white; + border: 0; + border-radius: 2px; + margin: 15px auto; + padding: 8px; + text-shadow: none; + width: calc(100% - 22px); + max-width: 200px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.deck .button:hover { + background-color: #003eaa; +} + +.deck .button:hover:active { + background-color: #002275; +} + +.sidebar-search-container { + display: flex; + padding: 4px; +} + +.sidebar-search-container:not(.selected) { + display: none; +} + +.tabsFilter { + flex-grow: 1; +} + +/* Themed sidebars */ + +body[lwt-sidebar] { + background-color: var(--lwt-sidebar-background-color); + color: var(--lwt-sidebar-text-color); + scrollbar-color: rgba(204,204,204,.5) rgba(230,230,235,.5); +} + +body[lwt-sidebar-brighttext] { + scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3); +} + +body[lwt-sidebar] .item.selected > .item-title-container { + background-color: hsla(0,0%,80%,.3); + color: inherit; +} + +body[lwt-sidebar-brighttext] .item.selected > .item-title-container { + background-color: rgba(249,249,250,.1); +} + +body[lwt-sidebar-highlight] .item.selected:focus > .item-title-container { + background-color: var(--lwt-sidebar-highlight-background-color); + color: var(--lwt-sidebar-highlight-text-color); +} + +/* Apply crisp rendering for favicons at exactly 2dppx resolution */ +@media (resolution: 2dppx) { + .tabs-container .item-tabs-list .item-icon-container { + image-rendering: -moz-crisp-edges; + } +} + +/* Platform specific styling */ +@media (-moz-platform: macos) { + body { + /* let the -moz-appearance of the sidebar shine through */ + background-color: transparent; + } + + .item-title-container { + box-sizing: border-box; + align-items: center; + height: 24px; + font-size: 12px; + } + + .item-title { + margin: 0; + } + + body:not([lwt-sidebar]) .item.selected:not(:focus) > .item-title-container { + appearance: auto; + -moz-default-appearance: -moz-mac-source-list-selection; + -moz-font-smoothing-background-color: -moz-mac-source-list-selection; + } + + body:not([lwt-sidebar-highlight]) .item.selected:focus > .item-title-container { + appearance: auto; + -moz-default-appearance: -moz-mac-active-source-list-selection; + -moz-font-smoothing-background-color: -moz-mac-active-source-list-selection; + } +} + +@media (-moz-platform: windows) { + .client .item.tab > .item-title-container { + padding-inline-start: 26px; + } + + .item.tab > .item-title-container { + padding-inline-start: 14px; + } + + .item-icon-container { + min-width: 16px; + max-width: 16px; + min-height: 16px; + max-height: 16px; + margin-inline-end: 5px; + background-size: 16px 16px; + background-repeat: no-repeat; + background-position: center; + } +} diff --git a/browser/themes/shared/tab-list-tree.css b/browser/themes/shared/tab-list-tree.css new file mode 100644 index 0000000000..ed60f26df1 --- /dev/null +++ b/browser/themes/shared/tab-list-tree.css @@ -0,0 +1,50 @@ +/* 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 file is used by both about:sessionrestore and about:welcomeback */ + +.tab-list-tree-container { + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: center; +} + +treechildren::-moz-tree-image(icon), +treechildren::-moz-tree-image(noicon) { + -moz-context-properties: fill; + fill: currentColor; + padding-inline-end: 2px; + margin: 0 2px; + width: 16px; + height: 16px; +} + +treechildren::-moz-tree-image(noicon) { + list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); +} + +treechildren::-moz-tree-image(container, noicon) { + list-style-image: url("chrome://browser/skin/window.svg"); +} + +treechildren::-moz-tree-image(checked), +treechildren::-moz-tree-image(partial) { + -moz-context-properties: fill, stroke; + fill: var(--in-content-accent-color); +} + +treechildren::-moz-tree-image(checked, selected), +treechildren::-moz-tree-image(partial, selected) { + fill: var(--in-content-item-selected-text); + stroke: var(--in-content-item-selected); +} + +treechildren::-moz-tree-image(checked) { + list-style-image: url("chrome://global/skin/icons/check.svg"); +} + +treechildren::-moz-tree-image(partial) { + list-style-image: url("chrome://global/skin/icons/check-partial.svg"); +} diff --git a/browser/themes/shared/tabbrowser/connecting.png b/browser/themes/shared/tabbrowser/connecting.png new file mode 100644 index 0000000000..e564fb5708 Binary files /dev/null and b/browser/themes/shared/tabbrowser/connecting.png differ diff --git a/browser/themes/shared/tabbrowser/connecting@2x.png b/browser/themes/shared/tabbrowser/connecting@2x.png new file mode 100644 index 0000000000..97e2b2eb67 Binary files /dev/null and b/browser/themes/shared/tabbrowser/connecting@2x.png differ diff --git a/browser/themes/shared/tabbrowser/crashed.svg b/browser/themes/shared/tabbrowser/crashed.svg new file mode 100644 index 0000000000..85f3d85141 --- /dev/null +++ b/browser/themes/shared/tabbrowser/crashed.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/browser/themes/shared/tabbrowser/hourglass.svg b/browser/themes/shared/tabbrowser/hourglass.svg new file mode 100644 index 0000000000..4687846c91 --- /dev/null +++ b/browser/themes/shared/tabbrowser/hourglass.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/tabbrowser/loading-burst.svg b/browser/themes/shared/tabbrowser/loading-burst.svg new file mode 100644 index 0000000000..cd4aeec314 --- /dev/null +++ b/browser/themes/shared/tabbrowser/loading-burst.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/tabbrowser/loading.svg b/browser/themes/shared/tabbrowser/loading.svg new file mode 100644 index 0000000000..1bc5843781 --- /dev/null +++ b/browser/themes/shared/tabbrowser/loading.svg @@ -0,0 +1,98 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/tabbrowser/pendingpaint.png b/browser/themes/shared/tabbrowser/pendingpaint.png new file mode 100644 index 0000000000..1a97feeeb3 Binary files /dev/null and b/browser/themes/shared/tabbrowser/pendingpaint.png differ diff --git a/browser/themes/shared/tabbrowser/tab-audio-blocked-small.svg b/browser/themes/shared/tabbrowser/tab-audio-blocked-small.svg new file mode 100644 index 0000000000..14a59803f3 --- /dev/null +++ b/browser/themes/shared/tabbrowser/tab-audio-blocked-small.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/tabbrowser/tab-audio-muted-small.svg b/browser/themes/shared/tabbrowser/tab-audio-muted-small.svg new file mode 100644 index 0000000000..89795c27fc --- /dev/null +++ b/browser/themes/shared/tabbrowser/tab-audio-muted-small.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/tabbrowser/tab-audio-playing-small.svg b/browser/themes/shared/tabbrowser/tab-audio-playing-small.svg new file mode 100644 index 0000000000..68ee22e398 --- /dev/null +++ b/browser/themes/shared/tabbrowser/tab-audio-playing-small.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/tabbrowser/tab-connecting.png b/browser/themes/shared/tabbrowser/tab-connecting.png new file mode 100644 index 0000000000..3f948c37cb Binary files /dev/null and b/browser/themes/shared/tabbrowser/tab-connecting.png differ diff --git a/browser/themes/shared/tabbrowser/tab-connecting@2x.png b/browser/themes/shared/tabbrowser/tab-connecting@2x.png new file mode 100644 index 0000000000..4bffc9e063 Binary files /dev/null and b/browser/themes/shared/tabbrowser/tab-connecting@2x.png differ diff --git a/browser/themes/shared/tabbrowser/tab-drag-indicator.svg b/browser/themes/shared/tabbrowser/tab-drag-indicator.svg new file mode 100644 index 0000000000..d195802641 --- /dev/null +++ b/browser/themes/shared/tabbrowser/tab-drag-indicator.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/tabbrowser/tab-loading-inverted.png b/browser/themes/shared/tabbrowser/tab-loading-inverted.png new file mode 100644 index 0000000000..029dccfe94 Binary files /dev/null and b/browser/themes/shared/tabbrowser/tab-loading-inverted.png differ diff --git a/browser/themes/shared/tabbrowser/tab-loading-inverted@2x.png b/browser/themes/shared/tabbrowser/tab-loading-inverted@2x.png new file mode 100644 index 0000000000..45166f3226 Binary files /dev/null and b/browser/themes/shared/tabbrowser/tab-loading-inverted@2x.png differ diff --git a/browser/themes/shared/tabbrowser/tab-loading.png b/browser/themes/shared/tabbrowser/tab-loading.png new file mode 100644 index 0000000000..02117c589e Binary files /dev/null and b/browser/themes/shared/tabbrowser/tab-loading.png differ diff --git a/browser/themes/shared/tabbrowser/tab-loading@2x.png b/browser/themes/shared/tabbrowser/tab-loading@2x.png new file mode 100644 index 0000000000..779ecc4344 Binary files /dev/null and b/browser/themes/shared/tabbrowser/tab-loading@2x.png differ diff --git a/browser/themes/shared/tabs.css b/browser/themes/shared/tabs.css new file mode 100644 index 0000000000..b02787360b --- /dev/null +++ b/browser/themes/shared/tabs.css @@ -0,0 +1,790 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + --tab-min-height: 36px; + --inline-tab-padding: 8px; + /* Value for --in-content-page-background in in-content/common.inc.css */ + --tabpanel-background-color: #f9f9fa; + --tab-border-radius: 4px; + --tab-shadow-max-size: 6px; + --tab-block-margin: 4px; + /* --tabpanel-background-color matches $in-content-page-background in newtab + (browser/components/newtab/content-src/styles/_variables.scss) */ + --tabpanel-background-color: #F9F9FB; + --tab-attention-icon-color: var(--lwt-tab-attention-icon-color, rgb(42,195,162)); +} + +#tabbrowser-tabpanels browser[type=content] { + color-scheme: env(-moz-content-preferred-color-scheme); +} + +@media (-moz-content-prefers-color-scheme: dark) { + :root { + /* --tabpanel-background-color matches $in-content-page-background in newtab + (browser/components/newtab/content-src/styles/_variables.scss) */ + --tabpanel-background-color: #2B2A33; + } +} + +:root[privatebrowsingmode=temporary] { + /* Value for --in-content-page-background in aboutPrivateBrowsing.css. + !important overrides the direct setting of this variable in + ThemeVariableMap.sys.mjs when the user has a theme that defines + ntp_background. */ + --tabpanel-background-color: #25003e !important; +} + +:root[uidensity=compact] { + --tab-min-height: 29px; +} + +:root[uidensity=touch] { + --tab-min-height: 41px; +} + +#tabbrowser-tabs { + --tab-min-width: 76px; + --tab-loading-fill: #0A84FF; + --tab-overflow-pinned-tabs-width: 0px; + padding-inline: var(--tab-overflow-pinned-tabs-width) 0; +} + +#tabbrowser-tabpanels { + appearance: none; + padding: 0; + color-scheme: unset; + background-color: var(--tabpanel-background-color); +} + +#tabbrowser-tabs, +#tabbrowser-arrowscrollbox, +#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { + min-height: var(--tab-min-height); +} + +.tab-background, +.tab-stack { + min-height: inherit; +} + +#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox::part(scrollbox) { + /* Add padding to match the shadow's blur radius so the + shadow doesn't get clipped when either the first or + last tab is selected */ + padding-inline: var(--tab-shadow-max-size); +} + +#tabbrowser-arrowscrollbox::part(scrollbox-clip) { + /* Needed to prevent tabstrip from growing as wide as the sum of the tabs' + page-title widths when emulating XUL with modern flexbox. */ + contain: inline-size; +} + +.tabbrowser-tab { + appearance: none; + background-color: transparent; + color-scheme: unset; + border-radius: 0; + border-width: 0; + margin: 0; + padding: 0 2px; + -moz-box-align: stretch; + /* Needed so that overflowing content overflows towards the end rather than + getting centered. That prevents tab opening animation from looking off at + the start, see bug 1759221. */ + -moz-box-pack: start; + overflow: clip; + /* Needed to avoid clipping the tab-background shadow, which has a 4px blur + * (we only have 2px padding in the inline direction) */ + overflow-clip-margin: 2px; + min-height: var(--tab-min-height); +} + +/* tabbrowser-tab keyboard focus */ +.keyboard-focused-tab > .tab-stack > .tab-background, +.tabbrowser-tab:focus:not([aria-activedescendant]) > .tab-stack > .tab-background { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +.tab-content { + padding: 0 var(--inline-tab-padding); + min-width: 0; +} + +:root:not([uidensity=compact]) .tab-content[pinned] { + padding: 0 10px; +} + +@media (prefers-reduced-motion: no-preference) { + .tab-loading-burst { + border-radius: inherit; + position: relative; + overflow: hidden; + } + + .tab-loading-burst::before { + position: absolute; + content: ""; + /* We set the width to be a percentage of the tab's width so that we can use + the `scale` transform to scale it up to the full size of the tab when the + burst occurs. We also need to set the margin-inline-start so that the + center of the burst matches the center of the favicon. */ + width: 5%; + height: 100%; + /* Center the burst over the .tab-loading-burst; it's 9px from the edge thanks + to .tab-content, plus 8px more since .tab-loading-burst is 16px wide. */ + margin-inline-start: calc(17px - 2.5%); + } + + .tab-loading-burst[pinned]::before { + /* This is like the margin-inline-start rule above, except that icons for + pinned tabs are 12px from the edge. */ + margin-inline-start: calc(20px - 2.5%); + } + + .tab-loading-burst[bursting]::before { + background-image: url("chrome://browser/skin/tabbrowser/loading-burst.svg"); + background-position: center center; + background-size: 100% auto; + background-repeat: no-repeat; + animation: tab-burst-animation 375ms cubic-bezier(0,0,.58,1); + -moz-context-properties: fill; + fill: var(--tab-loading-fill); + } + + .tab-loading-burst[bursting][notselectedsinceload]::before { + animation-name: tab-burst-animation-light; + } + + @keyframes tab-burst-animation { + 0% { + opacity: 0.4; + transform: scale(1); + } + 100% { + opacity: 0; + transform: scale(40); + } + } + + @keyframes tab-burst-animation-light { + 0% { + opacity: 0.2; + transform: scale(1); + } + 100% { + opacity: 0; + transform: scale(40); + } + } +} + +/* Width/height & margins apply on tab icon stack children */ +.tab-throbber-tabslist, +.tab-throbber, +.tab-icon-pending, +.tab-icon-image, +.tab-sharing-icon-overlay, +.tab-icon-overlay { + height: 16px; + width: 16px; +} + +.tab-throbber:not([pinned]), +.tab-icon-pending:not([pinned]), +.tab-icon-image:not([pinned]), +.tab-sharing-icon-overlay:not([pinned]), +.tab-icon-overlay:not([pinned]) { + margin-inline-end: 5.5px; +} + +@media (prefers-reduced-motion: reduce) { + .tab-throbber[busy] { + background-image: url("chrome://browser/skin/tabbrowser/hourglass.svg"); + background-position: center; + background-repeat: no-repeat; + -moz-context-properties: fill; + fill: currentColor; + opacity: 0.4; + } + + .tab-throbber[progress] { + opacity: 0.8; + } +} + +@media (prefers-reduced-motion: no-preference) { + :root[sessionrestored] .tab-throbber[busy] { + position: relative; + overflow: hidden; + } + + :root[sessionrestored] .tab-throbber[busy]::before { + content: ""; + position: absolute; + background-image: url("chrome://browser/skin/tabbrowser/loading.svg"); + background-position: left center; + background-repeat: no-repeat; + width: 480px; + height: 100%; + animation: tab-throbber-animation 1.05s steps(30) infinite; + -moz-context-properties: fill; + + /* XXX: It would be nice to transition between the "connecting" color and the + "loading" color (see the `.tab-throbber[progress]::before` rule below); + however, that currently forces main thread painting. When this is fixed + (after WebRender lands), we can do something like + `transition: fill 0.333s, opacity 0.333s;` */ + + fill: currentColor; + opacity: 0.7; + } + + :root[sessionrestored] .tab-throbber[busy]:-moz-locale-dir(rtl)::before { + animation-name: tab-throbber-animation-rtl; + } + + @keyframes tab-throbber-animation { + 0% { transform: translateX(0); } + 100% { transform: translateX(-100%); } + } + + @keyframes tab-throbber-animation-rtl { + 0% { transform: translateX(0); } + 100% { transform: translateX(100%); } + } + + :root[sessionrestored] .tab-throbber[progress]::before { + fill: var(--tab-loading-fill); + opacity: 1; + } + + #TabsToolbar[brighttext] .tab-throbber[progress]:not([selected=true])::before { + fill: var(--lwt-tab-loading-fill-inactive, #84c1ff); + } +} + +.tab-icon-image { + -moz-context-properties: fill; + fill: currentColor; +} + +.tab-icon-image:not([src]), +.tab-icon-image:-moz-broken { + content: url("chrome://global/skin/icons/defaultFavicon.svg"); +} + +.tab-icon-image[sharing]:not([selected]), +.tab-sharing-icon-overlay { + animation: 3s linear tab-sharing-icon-pulse infinite; +} + +@keyframes tab-sharing-icon-pulse { + 0%, 16.66%, 83.33%, 100% { + opacity: 0; + } + 33.33%, 66.66% { + opacity: 1; + } +} + +.tab-icon-image[sharing]:not([selected]) { + animation-delay: -1.5s; +} + +.tab-sharing-icon-overlay { + position: relative; + -moz-context-properties: fill; + fill: rgb(224, 41, 29); +} + +.tab-sharing-icon-overlay[sharing="camera"] { + list-style-image: url("chrome://browser/skin/notification-icons/camera.svg"); +} + +.tab-sharing-icon-overlay[sharing="microphone"] { + list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg"); +} + +.tab-sharing-icon-overlay[sharing="screen"] { + list-style-image: url("chrome://browser/skin/notification-icons/screen.svg"); +} + +.tab-icon-overlay { + width: 16px; + height: 16px; + position: relative; +} + +.tab-icon-overlay:not([crashed]):is([pinned], [sharing]) { + top: -5.5px; + inset-inline-end: -6px; + z-index: 1; /* Overlay tab title */ + padding: 2px; +} + +:root[uidensity=compact] .tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay), +#tabbrowser-tabs[secondarytext-unsupported] .tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay), +:root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) .tab-icon-overlay[indicator-replaces-favicon], +:root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover .tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay) { + opacity: 0; +} + +.tab-icon-overlay[soundplaying]:not([crashed]), +.tab-icon-overlay[muted]:not([crashed]), +.tab-icon-overlay[activemedia-blocked]:not([crashed]) { + border-radius: 10px; + -moz-context-properties: fill, fill-opacity, stroke; + fill: currentColor; + stroke: transparent; +} + +.tab-icon-overlay:is([pinned], [sharing]):not([crashed]) { + stroke: var(--tab-icon-overlay-stroke, white); + color: var(--tab-icon-overlay-fill, black); +} + +.tab-icon-overlay:is([pinned], [sharing]):not([crashed])[soundplaying]:hover, +.tab-icon-overlay:is([pinned], [sharing]):not([crashed])[muted]:hover, +.tab-icon-overlay:is([pinned], [sharing]):not([crashed])[activemedia-blocked]:hover { + background-color: var(--tab-icon-overlay-stroke, white); +} + +#TabsToolbar[brighttext] .tab-icon-overlay:is([pinned], [sharing]):not([crashed]) { + stroke: var(--tab-icon-overlay-stroke, black); + color: var(--tab-icon-overlay-fill, white); +} + +#TabsToolbar[brighttext] .tab-icon-overlay:is([pinned], [sharing]):not([crashed])[soundplaying]:hover, +#TabsToolbar[brighttext] .tab-icon-overlay:is([pinned], [sharing]):not([crashed])[muted]:hover, +#TabsToolbar[brighttext] .tab-icon-overlay:is([pinned], [sharing]):not([crashed])[activemedia-blocked]:hover { + background-color: var(--tab-icon-overlay-stroke, black); +} + +.tab-icon-overlay[indicator-replaces-favicon] { + border-radius: 2px; + fill-opacity: 0.75; + padding: 2px; +} +.tab-icon-overlay[indicator-replaces-favicon]:hover { + background-color: color-mix(in srgb, currentColor 15%, transparent); + fill-opacity: 0.95; +} +.tab-icon-overlay[indicator-replaces-favicon]:hover:active { + background-color: color-mix(in srgb, currentColor 30%, transparent); +} + +.tab-icon-overlay[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); +} + +.tab-icon-overlay[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); +} + +.tab-icon-overlay[activemedia-blocked] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg"); +} + +.tab-icon-overlay[crashed] { + list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg"); +} + +@media (prefers-reduced-motion: reduce) { + .tab-throbber-tabslist[busy] { + list-style-image: url("chrome://browser/skin/tabbrowser/hourglass.svg"); + -moz-context-properties: fill; + fill: currentColor; + opacity: 0.4; + } + + .tab-throbber-tabslist[progress] { + opacity: 0.8; + } +} + +@media (prefers-reduced-motion: no-preference) { + .tab-throbber-tabslist[busy] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-connecting.png"); + } + + .tab-throbber-tabslist[progress] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading.png"); + } + + :root[lwt-popup-brighttext] .tab-throbber-tabslist[progress]:not([selected=true]) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading-inverted.png"); + } + + @media (min-resolution: 1.1dppx) { + .tab-throbber-tabslist[busy] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-connecting@2x.png"); + } + + .tab-throbber-tabslist[progress] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading@2x.png"); + } + + :root[lwt-popup-brighttext] .tab-throbber-tabslist[progress]:not([selected=true]) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading-inverted@2x.png"); + } + } +} + +.tab-label { + margin-inline: 0; +} + +.tab-close-button { + -moz-context-properties: fill, fill-opacity; + margin-inline-end: calc(var(--inline-tab-padding) / -2); + width: 24px; + height: 24px; + padding: 7px; + border-radius: var(--tab-border-radius); +} + +/* The following rulesets allow showing more of the tab title */ +.tabbrowser-tab:not([labelendaligned],:hover) > .tab-stack > .tab-content > .tab-close-button { + padding-inline-start: 0; + width: 17px; +} + +.tabbrowser-tab[visuallyselected=true]:not([labelendaligned]):hover, +#tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true],[labelendaligned]):hover { + --tab-label-mask-size: 1em; +} + + +#tabbrowser-tabs[secondarytext-unsupported] .tab-secondary-label { + display: none; +} + +#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container { + height: 2.7em; +} + +.tab-secondary-label { + font-size: .75em; + opacity: .8; +} + +.tab-icon-sound-label { + /* Set height back to equivalent of parent's 1em based + on the .tab-icon-sound having a reduced font-size */ + height: 1.3333em; + white-space: nowrap; + margin: 0; +} + +.tab-secondary-label[soundplaying-scheduledremoval]:not([muted]):not(:hover) { + transition: opacity .3s linear var(--soundplaying-removal-delay); + opacity: 0; +} + +/* Tab Overflow */ +#tabbrowser-arrowscrollbox:not([scrolledtostart])::part(overflow-start-indicator), +#tabbrowser-arrowscrollbox:not([scrolledtoend])::part(overflow-end-indicator) { + width: 7px; /* The width is the sum of the inline margins */ + background-image: radial-gradient(ellipse at bottom, + rgba(0,0,0,0.1) 0%, + rgba(0,0,0,0.1) 7.6%, + rgba(0,0,0,0) 87.5%); + background-repeat: no-repeat; + background-position: -3px; + border-left: .5px solid rgba(255,255,255,.2); + pointer-events: none; + position: relative; + border-bottom: .5px solid transparent; +} + +#tabbrowser-arrowscrollbox:not([scrolledtostart])::part(overflow-start-indicator) { + margin-inline: -.5px -6.5px; +} + +#tabbrowser-arrowscrollbox:not([scrolledtoend])::part(overflow-end-indicator) { + margin-inline: -6.5px -.5px; +} + +#tabbrowser-arrowscrollbox:-moz-locale-dir(rtl)::part(overflow-start-indicator), +#tabbrowser-arrowscrollbox:-moz-locale-dir(ltr)::part(overflow-end-indicator) { + transform: scaleX(-1); +} + +#tabbrowser-arrowscrollbox[scrolledtostart]::part(overflow-start-indicator), +#tabbrowser-arrowscrollbox[scrolledtoend]::part(overflow-end-indicator) { + opacity: 0; +} + +#tabbrowser-arrowscrollbox::part(overflow-start-indicator), +#tabbrowser-arrowscrollbox::part(overflow-end-indicator) { + transition: opacity 150ms ease; +} + +.tabbrowser-tab:not([visuallyselected=true], [multiselected]), +.tabbrowser-tab:-moz-lwtheme { + color: inherit; +} + +.tab-background { + border-radius: var(--tab-border-radius); + margin-block: var(--tab-block-margin); +} + +/* Selected tab and tab hover */ + +#TabsToolbar #firefox-view-button:hover:not([open]) > .toolbarbutton-icon, +.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) { + background-color: color-mix(in srgb, currentColor 11%, transparent); +} + +#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon, +#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { + box-shadow: 0 0 4px rgba(0,0,0,.4); +} + +#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon, +.tab-background:is([selected], [multiselected]) { + background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + background-origin: border-box; + background-repeat: repeat-x; +} + +.tabbrowser-tab:is([selected], [multiselected]):-moz-lwtheme { + color: var(--lwt-tab-text, var(--toolbar-color)); +} + +@media (prefers-contrast) { + #TabsToolbar #firefox-view-button:is([open], :hover):not(:focus-visible) > .toolbarbutton-icon, + .tab-background[selected], + .tabbrowser-tab:hover > .tab-stack > .tab-background { + outline: 1px solid currentColor; + outline-offset: -1px; + } +} + +@media not (prefers-contrast) { + #TabsToolbar #firefox-view-button[open]:not(:focus-visible) > .toolbarbutton-icon:-moz-lwtheme, + .tab-background[selected]:not([multiselected=true]):-moz-lwtheme { + outline: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor)); + outline-offset: -1px; + } +} + +/* Add a focus outline on top of the multiselected tabs, with the currently selected + tab getting a slightly thicker outline. */ +.tab-background[multiselected=true] { + outline: 1px solid var(--focus-outline-color); + outline-offset: -1px; +} + +.tab-background[multiselected=true][selected=true] { + outline-width: 2px; + outline-offset: -2px; +} + +/* + * LightweightThemeConsumer will set the current lightweight theme's header + * image to the lwt-header-image variable, used in each of the following rulesets. + */ +#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon:-moz-lwtheme, +#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected=true]:-moz-lwtheme, +#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected=true]:-moz-lwtheme { + background-attachment: scroll, scroll, fixed; + background-color: transparent; + background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), + linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), + var(--lwt-header-image, none); + background-position: 0 0, 0 0, right top; + background-repeat: repeat-x, repeat-x, no-repeat; + background-size: auto 100%, auto 100%, auto auto; +} + +/* Pinned tabs */ + +toolbar[brighttext] { + --tab-attention-icon-color: var(--lwt-tab-attention-icon-color, rgb(84,255,189)); +} + +.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), +.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]), +#firefox-view-button[attention] { + background-image: radial-gradient(circle, var(--tab-attention-icon-color), var(--tab-attention-icon-color) 2px, transparent 2px); + background-position: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); + background-size: 4px 4px; + background-repeat: no-repeat; +} + +.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned], [selected="true"]) { + background-position-x: left 14px; +} + +.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned], [selected="true"]):-moz-locale-dir(rtl) { + background-position-x: right 14px; +} + +#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { + /* Add a gap between the last pinned tab and the first visible tab */ + margin-inline-start: 12px !important; /* .tabbrowser-tab sets margin: 0 !important; */ +} + +.tab-label[attention]:not([selected="true"]) { + font-weight: bold; +} + +/* Tab drag and drop */ + +.tab-drop-indicator { + width: 12px; + margin-inline-start: -12px; + background: url(chrome://browser/skin/tabbrowser/tab-drag-indicator.svg) no-repeat center; + position: relative; + z-index: 2; +} + +/* Drag space */ + +.titlebar-spacer[type="pre-tabs"], +.titlebar-spacer[type="post-tabs"] { + width: 40px; +} + +@media (max-width: 500px) { + .titlebar-spacer[type="post-tabs"] { + display: none; + } +} + +/* Firefox View button and menu item */ + +:root:not([privatebrowsingmode=temporary], [firefoxviewhidden]) :is(toolbarbutton, toolbarpaletteitem) + #tabbrowser-tabs, +:root[privatebrowsingmode=temporary]:not([firefoxviewhidden]) :is( + toolbarbutton:not(#firefox-view-button), + toolbarpaletteitem:not(#wrapper-firefox-view-button) +) + #tabbrowser-tabs { + border-inline-start: 1px solid color-mix(in srgb, currentColor 25%, transparent); + padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 2px); + margin-inline-start: 2px; +} + +:root[privatebrowsingmode=temporary] :is(#firefox-view-button, #menu_openFirefoxView) { + display: none; +} + +toolbar:not(#TabsToolbar) #firefox-view-button { + background-position: top 25% right 25%; +} + +:is(#widget-overflow-mainView, #widget-overflow-fixed-list) #firefox-view-button { + background-position: top 25% left 22px; +} + +/* RTL notification dot */ +toolbar:not(#TabsToolbar) #firefox-view-button:-moz-locale-dir(rtl) { + background-position-x: left 25%; +} + +:is(#widget-overflow-mainView, #widget-overflow-fixed-list) #firefox-view-button:-moz-locale-dir(rtl) { + background-position-x: right 22px; +} + +/* Tab bar scroll arrows */ + +#tabbrowser-arrowscrollbox::part(scrollbutton-up), +#tabbrowser-arrowscrollbox::part(scrollbutton-down) { + fill: var(--toolbarbutton-icon-fill); +} + +/* New tab button */ + +#tabs-newtab-button, +#TabsToolbar #new-tab-button { + list-style-image: url(chrome://global/skin/icons/plus.svg); +} + +/* All tabs button and menupopup */ + +#alltabs-button { + list-style-image: url(chrome://global/skin/icons/arrow-down.svg); +} + +#tabbrowser-tabs[hiddensoundplaying] ~ #alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: transparent url(chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg); + box-shadow: none; + /* Match the color of the button, rather than label default. */ + color: inherit; + display: block; + -moz-context-properties: fill, fill-opacity, stroke; + fill: currentColor; + stroke: transparent; + /* "!important" is necessary to override the rule in toolbarbutton.css */ + margin: -7px 0 0 !important; + margin-inline-end: -4px !important; + min-width: 12px; + min-height: 12px; +} + +/* The list of tabs is in its own panel-subview-body which will scroll. We don't + want any padding below the scrollbar, so remove the bottom padding + from the outer panel-subview-body. */ +#allTabsMenu-allTabsView > .panel-subview-body { + padding-bottom: 0; +} + +#allTabsMenu-allTabsView-tabs { + padding-top: 0; +} + +.all-tabs-item { + margin-inline: var(--arrowpanel-menuitem-margin-inline); + border-radius: var(--arrowpanel-menuitem-border-radius); +} + +.all-tabs-item:hover { + background-color: var(--panel-item-hover-bgcolor); +} + +.all-tabs-item:hover:active { + background-color: var(--panel-item-active-bgcolor); +} + +.all-tabs-item[selected] { + font-weight: bold; +} + +.all-tabs-item > toolbarbutton { + margin: 0; + /* Since the background is set on the item, don't set it on the children. */ + background-color: transparent !important; +} + +.all-tabs-button { + list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); +} + +.all-tabs-secondary-button { + opacity: .8; + -moz-context-properties: fill; + fill: currentColor; +} + +.all-tabs-secondary-button[soundplaying] { + list-style-image: url(chrome://global/skin/media/audio.svg); +} + +.all-tabs-secondary-button[muted] { + list-style-image: url(chrome://global/skin/media/audio-muted.svg); +} + +.all-tabs-secondary-button:hover { + opacity: 1; +} + +.all-tabs-secondary-button > label { + display: none !important; /* override panelUI-shared.css */ +} diff --git a/browser/themes/shared/toolbar-drag-indicator.svg b/browser/themes/shared/toolbar-drag-indicator.svg new file mode 100644 index 0000000000..ebcef29690 --- /dev/null +++ b/browser/themes/shared/toolbar-drag-indicator.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/toolbarbutton-icons.css b/browser/themes/shared/toolbarbutton-icons.css new file mode 100644 index 0000000000..c8cc0e9a1b --- /dev/null +++ b/browser/themes/shared/toolbarbutton-icons.css @@ -0,0 +1,486 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + --toolbarbutton-icon-fill-attention: AccentColor; + --warning-icon-bgcolor: #FFA436; +} + +:root:-moz-lwtheme { + --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,97,224)); +} + +:root[lwt-popup-brighttext] panel, +toolbar[brighttext]:-moz-lwtheme { + --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,221,255)); + --warning-icon-bgcolor: #FFBD4F; +} + +:root, +/* Pick up the panel- and toolbar-specific --toolbarbutton-icon-fill-attention + values from above. */ +panel, +toolbar { + --toolbar-field-icon-fill-attention: var(--lwt-toolbar-field-icon-fill-attention, var(--toolbarbutton-icon-fill-attention)); +} + +.toolbarbutton-animatable-box, +.toolbarbutton-1 { + color: inherit; + -moz-context-properties: fill, fill-opacity; + fill: var(--toolbarbutton-icon-fill); +} + +.toolbarbutton-animatable-box { + display: block; + position: absolute; + overflow: hidden; + z-index: 2; + pointer-events: none; +} + +.toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + animation-fill-mode: forwards; + animation-iteration-count: 1; + list-style-image: none; + /* Height must be equal to height of toolbarbutton padding-box. --toolbarbutton-height + is calculated and set during runtime by BrowserUIUtils.setToolbarButtonHeightProperty() + before the animation begins. */ + height: var(--toolbarbutton-height); +} + +#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image, +#stop-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image, +#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image, +#PlacesChevron:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#PanelUI-menu-button:-moz-locale-dir(rtl) > .toolbarbutton-badge-stack > .toolbarbutton-icon { + scale: -1 1; +} + +#back-button { + list-style-image: url("chrome://browser/skin/back.svg"); +} + +#forward-button { + list-style-image: url("chrome://browser/skin/forward.svg"); +} + +/* The animations for the reload-button and stop-button are disabled + outside of the nav-bar due to bug 1382894. */ +:is(#reload-button, #stop-button) > .toolbarbutton-animatable-box { + display: none; +} +#nav-bar-customization-target > #stop-reload-button > :is(#reload-button, #stop-button) > .toolbarbutton-animatable-box { + display: block; +} + +#stop-reload-button[animate] > #reload-button > .toolbarbutton-icon, +#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-icon { + fill: transparent; +} + +@keyframes stop-to-reload { + /* pause on the first frame (step 0) for 6 frames of time */ + from { + /* 0 */ + transform: translateX(0); + } + /* resume at 7/35 and animate across the next 14 frames */ + 17.14% { + animation-timing-function: steps(14); + transform: translateX(calc(0 * -20px)); + } + /* pause on the last frame for the remainder of the duration */ + 54.29% { + transform: translateX(calc(14 * -20px)); + } + to { + /* end state for animation: */ + transform: translateX(calc(var(--anim-frames) * -20px)); + } +} + +@keyframes reload-to-stop { + /* pause on the first frame (step 0) for 6 frames of time */ + from { + /* 0 */ + transform: translateX(0); + animation-timing-function: steps(12); + } + /* pause at 13/15 for 3 frames */ + 86.67% { + transform: translateX(calc(var(--anim-frames) * -20px)); + } + to { + /* end state for animation: */ + transform: translateX(calc(var(--anim-frames) * -20px)); + } +} + +#stop-reload-button[animate] > #reload-button, +#stop-reload-button[animate] > #stop-button { + position: relative; +} + +#nav-bar-customization-target :where(#reload-button, #stop-button) > .toolbarbutton-icon { + padding: calc(var(--toolbarbutton-inner-padding) + 1px) var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 1px ) !important; /* The animation is 18px but the other icons are 16px, lower it by 1px so it is vertically centered */ +} + +#reload-button > .toolbarbutton-animatable-box, +#stop-button > .toolbarbutton-animatable-box { + top: calc(50% - 9px); /* Vertically center the 20px tall animatable image, which is 1px higher than other icons */ + /* Since .toolbarbutton-icon uses a different width than the animatable-box, + we need to set a padding relative to the difference in widths. */ + margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 20px) / 2); + width: 20px; /* Width of each frame within the SVG sprite */ + height: 20px; /* Height of each frame within the SVG sprite */ +} + +#stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + background-image: url("chrome://browser/skin/stop-to-reload.svg"); + /* + transition from stop icon to reload icon + pause at frame 0 for 6 ticks, + pause at frame 15 for 16 ticks + total 35 steps*/ + --anim-frames: 14; + --anim-steps: calc(var(--anim-frames) + 21); /* Add steps for doing the pause at the start and end */ + width: calc(20px * (var(--anim-frames) + 1)); + height: 20px; + + /* initial state for animation */ + transform: translateX(0); +} + +#stop-reload-button[animate] > #reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + animation-name: stop-to-reload; +} + +#reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + animation-duration: calc(var(--anim-steps) * 16.667ms); +} + +#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + background-image: url("chrome://browser/skin/reload-to-stop.svg"); + /* + transition from reload icon to stop icon + pause at end for 3 frames of time + pause at ... + total 15 steps*/ + --anim-frames: 12; + --anim-steps: calc(var(--anim-frames) + 3); /* Add steps for doing the pause at the start and end */ + width: calc(20px * (var(--anim-frames) + 1)); + height: 20px; + + /* initial state for animation */ + transform: translateX(0); +} + +#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + animation-name: reload-to-stop; + animation-duration: calc(var(--anim-steps) * 16.667ms); +} + +#reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + animation-timing-function: steps(15); + animation-duration: 0.25s; +} + +#reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + transform: translateX(-700px); +} + +#reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + transform: translateX(-300px); +} + +#reload-button { + list-style-image: url("chrome://global/skin/icons/reload.svg"); +} + +#stop-button { + list-style-image: url("chrome://global/skin/icons/close.svg"); +} + +#home-button { + list-style-image: url("chrome://browser/skin/home.svg"); +} + +#bookmarks-toolbar-button, +#bookmarks-toolbar-placeholder { + list-style-image: url("chrome://browser/skin/bookmarks-toolbar.svg"); +} + +#bookmarks-menu-button { + list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); +} + +#history-panelmenu { + list-style-image: url("chrome://browser/skin/history.svg"); +} + +#downloads-button { + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} + +#add-ons-button { + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} + +#open-file-button { + list-style-image: url("chrome://browser/skin/open.svg"); +} + +#screenshot-button { + list-style-image: url("chrome://browser/skin/screenshot.svg"); +} + +#save-page-button { + list-style-image: url("chrome://browser/skin/save.svg"); +} + +#sync-button { + list-style-image: url("chrome://browser/skin/synced-tabs.svg"); +} + +#characterencoding-button { + list-style-image: url("chrome://browser/skin/characterEncoding.svg"); +} + +#new-window-button { + list-style-image: url("chrome://browser/skin/window.svg"); +} + +#new-tab-button { + list-style-image: url("chrome://browser/skin/new-tab.svg"); +} + +#privatebrowsing-button { + list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); +} + +#find-button { + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); +} + +#print-button { + list-style-image: url("chrome://global/skin/icons/print.svg"); +} + +#fullscreen-button { + list-style-image: url("chrome://browser/skin/fullscreen.svg"); +} + +#developer-button { + list-style-image: url("chrome://global/skin/icons/developer.svg"); +} + +#profiler-button-button > .toolbarbutton-icon { + list-style-image: url("chrome://devtools/skin/images/tool-profiler.svg"); +} + +#profiler-button-button:not(.profiler-active) > image { + transform: scaleX(-1); +} + +#profiler-button-button.profiler-active > image { + fill: #0060df; + fill-opacity: 1; + background-color: #0060df33; +} + +#profiler-button-button.profiler-active:hover > image { + background-color: #0060df22; +} + +#profiler-button-button.profiler-paused > image { + opacity: 0.4; +} + +#preferences-button { + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} + +#PanelUI-menu-button { + list-style-image: url("chrome://browser/skin/menu.svg"); +} + +#PanelUI-menu-button[badge-status="update-available"], +#PanelUI-menu-button[badge-status="update-downloading"], +#PanelUI-menu-button[badge-status="update-manual"], +#PanelUI-menu-button[badge-status="update-other-instance"], +#PanelUI-menu-button[badge-status="update-restart"], +#PanelUI-menu-button[badge-status="update-unsupported"], +#PanelUI-menu-button[badge-status="addon-alert"], +#PanelUI-menu-button[badge-status="fxa-needs-authentication"] { + list-style-image: url("chrome://browser/skin/menu-badged.svg"); +} + +#cut-button { + list-style-image: url("chrome://browser/skin/edit-cut.svg"); +} + +#copy-button { + list-style-image: url("chrome://global/skin/icons/edit-copy.svg"); +} + +#paste-button { + list-style-image: url("chrome://browser/skin/edit-paste.svg"); +} + +#zoom-out-button { + list-style-image: url("chrome://browser/skin/zoom-out.svg"); +} + +#zoom-in-button { + list-style-image: url("chrome://global/skin/icons/plus.svg"); +} + +#PlacesChevron, +#nav-bar-overflow-button { + list-style-image: url("chrome://global/skin/icons/chevron.svg"); +} + +#nav-bar-overflow-button[animate] > .toolbarbutton-icon { + fill: transparent; +} + +@keyframes overflow-animation { + from { + transform: translateX(0); + } + from { + transform: translateX(-832px); + } +} + +#nav-bar-overflow-button > .toolbarbutton-animatable-box { + visibility: hidden; + top: calc(50% - 8px); /* Vertically center the 16px tall animatable image */ + /* Since .toolbarbutton-icon uses a different width than the animatable box, + we need to set a padding relative to the difference in widths. */ + margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 16px) / 2); + width: 16px; /* Width of each frame within the SVG sprite */ + height: 16px; /* Height of each frame within the SVG sprite */ + -moz-context-properties: fill, stroke; + fill: var(--toolbarbutton-icon-fill); + stroke: var(--toolbarbutton-icon-fill-attention); +} +#nav-bar-overflow-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + background-image: url("chrome://browser/skin/chevron-animation.svg"); + width: 848px; + height: 16px; + transform: translateX(0); +} + +#nav-bar-overflow-button[animate] > .toolbarbutton-animatable-box { + visibility: visible; +} +#nav-bar-overflow-button[animate] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + animation-name: overflow-animation; + animation-timing-function: steps(52); + animation-duration: calc(52 * 16.667ms); +} + +#unified-extensions-button { + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} + +#email-link-button { + list-style-image: url("chrome://browser/skin/mail.svg"); +} + +#sidebar-button { + list-style-image: url("chrome://browser/skin/sidebars-right.svg"); +} + +#sidebar-button:-moz-locale-dir(ltr):not([positionend]), +#sidebar-button:-moz-locale-dir(rtl)[positionend] { + list-style-image: url("chrome://browser/skin/sidebars.svg"); +} + +#panic-button { + list-style-image: url("chrome://browser/skin/forget.svg"); +} + +#panic-button[open] { + fill: rgb(213, 32, 20); +} + +toolbar[brighttext] #panic-button[open] { + fill: #ff848b; +} + +#library-button { + list-style-image: url("chrome://browser/skin/library.svg"); +} + +#save-to-pocket-button { + list-style-image: url("chrome://global/skin/icons/pocket-outline.svg"); + fill: var(--toolbarbutton-icon-fill); +} + +#save-to-pocket-button[open="true"], +#save-to-pocket-button[pocketed="true"] { + list-style-image: url("chrome://global/skin/icons/pocket.svg"); + fill: #ef4056; +} + +/* ----- BOOKMARK BUTTONS ----- */ + +.bookmark-item { + list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +toolbarbutton.bookmark-item { + -moz-context-properties: fill, fill-opacity; + fill: var(--toolbarbutton-icon-fill); +} + +.bookmark-item[container] { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +.bookmark-item[container][query] { + list-style-image: url("chrome://browser/skin/places/folder-smart.svg"); +} + +.bookmark-item[query][tagContainer] { + list-style-image: url("chrome://browser/skin/places/tag.svg"); + -moz-image-region: auto; +} + +.bookmark-item[query][dayContainer] { + list-style-image: url("chrome://browser/skin/history.svg"); + -moz-image-region: auto; +} + +.bookmark-item[query][hostContainer] { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +#whats-new-menu-button { + list-style-image: url("chrome://global/skin/icons/whatsnew.svg"); +} + +#ion-button { + list-style-image: url("chrome://browser/skin/ion.svg"); +} + +#import-button { + list-style-image: url("chrome://browser/skin/import.svg"); +} + +#firefox-view-button { + list-style-image: url("chrome://branding/content/icon32.png"); +} diff --git a/browser/themes/shared/toolbarbuttons.css b/browser/themes/shared/toolbarbuttons.css new file mode 100644 index 0000000000..0a51e9a19e --- /dev/null +++ b/browser/themes/shared/toolbarbuttons.css @@ -0,0 +1,350 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + --toolbar-start-end-padding: 8px; + --toolbarbutton-outer-padding: 2px; + --toolbarbutton-inner-padding: 8px; + + --toolbarbutton-hover-background: var(--button-hover-bgcolor); + --toolbarbutton-active-background: var(--button-active-bgcolor); + + --toolbarseparator-color: color-mix(in srgb, currentColor 60%, transparent); + + --bookmark-block-padding: 4px; + + /* This default value of --toolbarbutton-height is defined to prevent + CSS errors for an invalid variable. The value should not get used, + as a more specific value should be set when the value will be used. */ + --toolbarbutton-height: 0; +} + +:root[uidensity=compact] { + --toolbarbutton-outer-padding: 3px; + --toolbarbutton-inner-padding: 6px; + --bookmark-block-padding: 1px; +} + +:root[uidensity=touch] { + --toolbarbutton-inner-padding: 9px; + --bookmark-block-padding: 7px; +} + +#TabsToolbar { + /* Override the inner padding to ensure the dimensions match the tabs, but also making sure + different types of buttons (combined-buttons-dropmarker or text) still look correct. */ + --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2); +} + +/* ::::: primary toolbar buttons ::::: */ + +#tabbrowser-arrowscrollbox[scrolledtostart=true]::part(scrollbutton-up), +#tabbrowser-arrowscrollbox[scrolledtoend=true]::part(scrollbutton-down), +:root:not([customizing]) .toolbarbutton-1[disabled=true], +/* specialcase the overflow and the hamburger button so they show up disabled in customize mode. */ +#nav-bar-overflow-button[disabled=true], +#PanelUI-menu-button[disabled=true] { + opacity: 0.4; +} + +.toolbarbutton-1 > .toolbarbutton-icon { + margin-inline-end: 0 !important; +} + +.toolbarbutton-1 > .toolbarbutton-icon, +.toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon { + width: 16px; +} + +.toolbarbutton-combined-buttons-dropmarker > .toolbarbutton-icon { + width: 12px; +} + +#navigator-toolbox:not(:hover) #tabbrowser-arrowscrollbox:not([highlight])::part(scrollbutton-down) { + transition: 1s background-color ease-out; +} + +#tabbrowser-arrowscrollbox[highlight]::part(scrollbutton-down) { + background-color: SelectedItem; +} + +toolbar .toolbarbutton-1 { + appearance: none; + margin: 0; + padding: 0 var(--toolbarbutton-outer-padding); + -moz-box-pack: center; +} + +#TabsToolbar .toolbarbutton-1 { + margin: 0 0 var(--tabs-navbar-shadow-size); +} + +#tabbrowser-arrowscrollbox::part(scrollbutton-up), +#tabbrowser-arrowscrollbox::part(scrollbutton-down) { + appearance: none; + background-clip: padding-box; + border: 4px solid transparent; + border-radius: calc(var(--tab-border-radius) + 4px); + margin: 0; + padding: 0 calc(var(--toolbarbutton-inner-padding) - 6px); +} + +/*** Adds padding to end of toolbar while making that space click the first button ***/ +#PanelUI-menu-button { + padding-inline-end: var(--toolbar-start-end-padding); +} + +toolbar .toolbarbutton-1 > .toolbarbutton-icon, +toolbar .toolbarbutton-1 > .toolbarbutton-text, +toolbar .toolbarbutton-1 > .toolbarbutton-badge-stack { + padding: var(--toolbarbutton-inner-padding); + border-radius: var(--toolbarbutton-border-radius); +} + +#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, +#TabsToolbar .toolbarbutton-1 > .toolbarbutton-text, +#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack { + border-radius: var(--tab-border-radius); +} + +toolbar .toolbarbutton-1 > .toolbarbutton-icon { + /* horizontal padding + actual icon width */ + width: calc(2 * var(--toolbarbutton-inner-padding) + 16px); + height: calc(2 * var(--toolbarbutton-inner-padding) + 16px); +} + +toolbar .toolbarbutton-combined-buttons-dropmarker > .toolbarbutton-icon { + /* same height as regular buttons, but narrower, and for a 12x12 image */ + padding-inline: 2px; + padding-block: calc(var(--toolbarbutton-inner-padding) + (16px - 12px) / 2); + width: calc(2 * 2px + 12px); +} + +toolbar .toolbarbutton-1 > .toolbarbutton-text { + padding-top: calc(var(--toolbarbutton-inner-padding) - 1px); + padding-bottom: 0; + /* To make the hover feedback line up with sibling buttons, it needs the same + * height as the button icons and the same vertical padding, but as a minimum, + * because otherwise an increase in text sizes would break things. + */ + min-height: calc(16px + 2 * var(--toolbarbutton-inner-padding)); +} + +@media (-moz-platform: macos) { + toolbar .toolbarbutton-1 > .toolbarbutton-text { + padding-top: calc(var(--toolbarbutton-inner-padding) + 1px); + } +} + +toolbar .toolbaritem-combined-buttons { + margin-inline: 2px; +} + +toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 { + padding-inline: 0; +} + +toolbar .toolbaritem-combined-buttons:not(:hover) > separator { + content: ""; + display: -moz-box; + width: 1px; + height: 16px; + margin-inline-end: -1px; + background-image: linear-gradient(currentColor 0, currentColor 100%); + background-position: center; + background-repeat: no-repeat; + background-size: 1px 16px; + opacity: .2; +} + +toolbar[brighttext] .toolbaritem-combined-buttons > separator { + opacity: .3; +} + +#tabbrowser-arrowscrollbox:not([scrolledtostart=true])::part(scrollbutton-up):hover, +#tabbrowser-arrowscrollbox:not([scrolledtoend=true])::part(scrollbutton-down):hover, +toolbarbutton.bookmark-item:not(.subviewbutton, [disabled=true], [open]):hover, +toolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover > .toolbarbutton-icon, +toolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover > .toolbarbutton-text, +toolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover > .toolbarbutton-badge-stack { + background-color: var(--toolbarbutton-hover-background); + color: inherit; +} + +#tabbrowser-arrowscrollbox:not([scrolledtostart=true])::part(scrollbutton-up):hover:active, +#tabbrowser-arrowscrollbox:not([scrolledtoend=true])::part(scrollbutton-down):hover:active, +toolbarbutton.bookmark-item:hover:active:not(.subviewbutton, [disabled="true"]), +toolbarbutton.bookmark-item[open="true"], +toolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-icon, +toolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-text, +toolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-badge-stack { + background-color: var(--toolbarbutton-active-background); + color: inherit; +} + +/* Keyboard focus styling */ +.titlebar-button:focus-visible, +findbar toolbarbutton.tabbable:focus-visible, +toolbarbutton.bookmark-item:not(.subviewbutton):focus-visible, +toolbar .toolbarbutton-1:focus-visible > .toolbarbutton-icon, +toolbar .toolbarbutton-1:focus-visible > .toolbarbutton-text, +toolbar .toolbarbutton-1:focus-visible > .toolbarbutton-badge-stack { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +toolbar .toolbarbutton-1:focus-visible { + outline: none; +} + +/* bookmarks menu button */ + +/* ::::: bookmark buttons ::::: */ + +#personal-toolbar-empty-description, +toolbarbutton.bookmark-item:not(.subviewbutton) { + margin: 2px; + padding: var(--bookmark-block-padding) 4px; +} + +#PersonalToolbar .toolbarbutton-1 { + /* These should match the sizing of the bookmark-items in the inline axis + * (padding and margin, respectively) */ + --toolbarbutton-inner-padding: 4px; + --toolbarbutton-outer-padding: 2px; + margin-block: 2px; +} + +:root[uidensity=compact] toolbarbutton.bookmark-item:not(.subviewbutton) { + margin-inline: 1px; +} + +:root[uidensity=compact] #PersonalToolbar .toolbarbutton-1 { + --toolbarbutton-outer-padding: 1px; +} + +/* Allow icons to grow with the toolbar to match bookmark item heights + * + * NOTE(emilio): This matches pre-existing behavior but it's inconsistent with + * how e.g. combined items work, and maybe we should just remove this. + */ +#PersonalToolbar .toolbarbutton-1 { + -moz-box-align: stretch; +} +#PersonalToolbar .toolbarbutton-1 > .toolbarbutton-icon { + height: auto; +} +#PersonalToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack { + align-items: center; +} + +toolbarbutton.bookmark-item:not(.subviewbutton) { + border-radius: var(--toolbarbutton-border-radius); +} + +toolbarbutton.bookmark-item:not(.subviewbutton) { + max-width: 13em; + appearance: none; +} + +/** + * Ensure that the description is always at least as big as a bookmarks item, + * where its icon is 16px (which may be more than inline text height); + */ +#personal-toolbar-empty-description { + min-height: calc(16px + 2 * var(--bookmark-block-padding)); +} + +#bookmarks-toolbar-placeholder { + max-width: unset; +} + +.bookmark-item > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +/* Force the display of the label for bookmarks */ +.bookmark-item > .toolbarbutton-text { + display: -moz-box !important; +} + +#personal-bookmarks, +#PlacesToolbar, +#PlacesToolbarItems { + min-width: 0; +} + +#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon { + margin-inline-end: 0; +} + +#managed-bookmarks > .toolbarbutton-icon, +#bookmarks-toolbar-placeholder > .toolbarbutton-icon, +#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label]:not([label=""]), +#PersonalToolbar #import-button > .toolbarbutton-icon, +#OtherBookmarks.bookmark-item[container] > .toolbarbutton-icon { + margin-inline-end: 4px; +} + +/* Separators */ + +/* Override the toolkit styles, and make sure separators are draggable by + * making them wider, and using a pseudo-element for the visual separator. */ +#PlacesToolbarItems > toolbarseparator { + margin: 0; + padding-inline: 4px; + appearance: none; +} + +/* When adjacent to the bookmarks items, give the bookmarks items a leading separator. */ +#PlacesToolbarItems > toolbarseparator::before { + content: ""; + display: block; + border-inline-start: 1px solid; + border-image-source: linear-gradient( + transparent 3.75px, + var(--toolbarseparator-color) 3.75px, + var(--toolbarseparator-color) calc(100% - 3.75px), + transparent calc(100% - 3.75px) ); + border-image-slice: 1; +} + +@media (min-resolution: 2dppx) { + #PlacesToolbarItems > toolbarseparator::before { + border-inline-start-width: 0.5px; + } +} + +/* The bookmarks toolbar is smaller than the other toolbars, so we + * need to override the badge position to not be cut off. */ +#PersonalToolbar .toolbarbutton-badge { + margin-top: -1px !important; +} + +:root[uidensity=touch] #PersonalToolbar .toolbarbutton-badge { + margin-top: -4px !important; +} + +/* Remove a pixel of margin on the end so that the badge doesn't + * overflow the toolbar and push the button into the overflow menu. */ +:root[uidensity=compact] .toolbarbutton-badge { + margin-inline-end: -7px !important; +} + +/* Alternative style for .toolbarbutton-badge used by CFR notifications */ +.toolbarbutton-badge.feature-callout { + width: 14px; + height: 14px; + min-width: auto; + box-shadow: none; + border: none; + padding: 0; + display: block; + margin: -7px 0 0 !important; + margin-inline-end: -6px !important; + background: url(chrome://global/skin/icons/badge-blue.svg); +} diff --git a/browser/themes/shared/translation/infobar.css b/browser/themes/shared/translation/infobar.css new file mode 100644 index 0000000000..7f42cf2939 --- /dev/null +++ b/browser/themes/shared/translation/infobar.css @@ -0,0 +1,95 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +notification[value="translation"] .messageImage { + list-style-image: url(chrome://browser/skin/translation-16.png) !important; + -moz-image-region: rect(0, 32px, 16px, 16px); +} + +@media (min-resolution: 1.25dppx) { + notification[value="translation"] .messageImage { + list-style-image: url(chrome://browser/skin/translation-16@2x.png) !important; + -moz-image-region: rect(0, 64px, 32px, 32px); + } +} + +notification[value="translation"][state="translating"] .messageImage { + list-style-image: url(chrome://browser/skin/translating-16.png) !important; + -moz-image-region: auto; +} + +@media (min-resolution: 1.25dppx) { + notification[value="translation"][state="translating"] .messageImage { + list-style-image: url(chrome://browser/skin/translating-16@2x.png) !important; + } +} + +notification[value="translation"] hbox[anonid="details"] { + overflow: hidden; +} + +notification[value="translation"] menulist::part(dropmarker) { + display: -moz-box; + appearance: none; + width: 12px; + height: 12px; +} + +notification[value="translation"] menulist::part(dropmarker-icon) { + list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg); + -moz-context-properties: fill; + fill: currentColor; +} + +notification[value="translation"] menulist > menupopup { + margin: 0; /* override popup.css */ +} + +.translation-attribution { + cursor: pointer; + -moz-box-align: end; + font-size: small; + padding-block: 5px; +} + +.translation-attribution > label { + margin-bottom: 0; +} + +.translation-attribution > image { + width: 70px; +} + +.translation-welcome-panel { + width: 305px; +} + +.translation-welcome-panel::part(content) { + /* Prevent from stretching logo height */ + -moz-box-align: start; +} + +.translation-welcome-logo { + height: 32px; + width: 32px; + list-style-image: url(chrome://browser/skin/translation-16@2x.png); + -moz-image-region: rect(0, 64px, 32px, 32px); +} + +.translation-welcome-content { + margin-inline-start: 16px; +} + +.translation-welcome-headline { + font-size: larger; + font-weight: bold; + margin-inline-start: 0; +} + +.translation-welcome-body { + padding: 1em 0; + margin: 0 0; +} diff --git a/browser/themes/shared/translation/translating-16.png b/browser/themes/shared/translation/translating-16.png new file mode 100644 index 0000000000..71ca37c22a Binary files /dev/null and b/browser/themes/shared/translation/translating-16.png differ diff --git a/browser/themes/shared/translation/translating-16@2x.png b/browser/themes/shared/translation/translating-16@2x.png new file mode 100644 index 0000000000..ab6184047e Binary files /dev/null and b/browser/themes/shared/translation/translating-16@2x.png differ diff --git a/browser/themes/shared/translation/translation-16.png b/browser/themes/shared/translation/translation-16.png new file mode 100644 index 0000000000..ef17f55271 Binary files /dev/null and b/browser/themes/shared/translation/translation-16.png differ diff --git a/browser/themes/shared/translation/translation-16@2x.png b/browser/themes/shared/translation/translation-16@2x.png new file mode 100644 index 0000000000..c942e5ec09 Binary files /dev/null and b/browser/themes/shared/translation/translation-16@2x.png differ diff --git a/browser/themes/shared/update-badge.svg b/browser/themes/shared/update-badge.svg new file mode 100644 index 0000000000..aac3a5f97c --- /dev/null +++ b/browser/themes/shared/update-badge.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/urlbar-dynamic-results.css b/browser/themes/shared/urlbar-dynamic-results.css new file mode 100644 index 0000000000..c22b6ca9f1 --- /dev/null +++ b/browser/themes/shared/urlbar-dynamic-results.css @@ -0,0 +1,478 @@ +/* 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/. */ + +/** + * UrlbarProviderTabToSearch + */ + +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner { + min-height: 64px !important; /* Overriding :root:not([uidensity=compact]) .urlbarView-row-inner { min-height } in urlbarView.inc.css */ + align-items: center; +} + +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap { + align-items: center; +} + +.urlbarView-row[dynamicType=onboardTabToSearch]:hover > .urlbarView-row-inner { + background-color: var(--arrowpanel-dimmed); +} + +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner[selected] { + background: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); + fill-opacity: 1; +} + +/* Icon */ +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { + min-width: 32px; + height: 32px; + color: var(--urlbar-popup-url-color); + -moz-context-properties: fill; +} + +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner[selected] > .urlbarView-no-wrap > .urlbarView-favicon { + color: inherit; +} + +.urlbarView-dynamic-onboardTabToSearch-text-container { + display: flex; + flex-direction: column; +} + +/* First row of text. */ +.urlbarView-dynamic-onboardTabToSearch-first-row-container { + display: flex; + align-items: end; +} +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container { + flex-wrap: wrap; +} +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > * { + max-width: 100%; + flex-basis: 100%; +} +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > .urlbarView-title-separator { + visibility: collapse; +} +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner[selected] > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > .urlbarView-action { + color: var(--autocomplete-popup-highlight-color); +} +@media (prefers-reduced-motion: no-preference) { + .urlbarView-results:not([wrap]) > .urlbarView-row > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > .urlbarView-action[slide-in] { + animation-name: urlbarView-action-slide-in; + animation-duration: 350ms; + animation-timing-function: var(--animation-easing-function); + } +} + +/* Description text. */ +.urlbarView-dynamic-onboardTabToSearch-description { + margin-block-start: 2px; +} +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-description { + max-width: 100%; + flex-basis: 100%; +} +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner:not([selected]) > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-description { + opacity: 0.6; +} + +/* CSS for Calculator */ +.urlbarView-row[dynamicType=calculator] > .urlbarView-row-inner[selected] { + background-color: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); +} + +.urlbarView-row[dynamicType=calculator] > .urlbarView-row-inner:hover { + background: var(--arrowpanel-dimmed); +} + +.urlbarView-dynamic-calculator-action { + font-size: .85em; + font-weight: normal; + visibility: collapse; +} + +.urlbarView-row[dynamicType=calculator] > .urlbarView-row-inner:hover .urlbarView-dynamic-calculator-action, +.urlbarView-row[dynamicType=calculator] > .urlbarView-row-inner[selected] .urlbarView-dynamic-calculator-action { + visibility: visible; +} + +.urlbarView-dynamic-calculator-action::before { + content: "\2014"; + margin: 0 .4em; + opacity: 0.6; +} + +/** UrlbarProviderUnitConversion **/ +.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner:hover { + background: var(--autocomplete-popup-hover-background); +} + +.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner[selected] { + background: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); + fill-opacity: 1; +} + +.urlbarView-dynamic-unitConversion-action { + font-size: .85em; + font-weight: normal; + visibility: collapse; +} + +.urlbarView-dynamic-unitConversion-action::before { + content: "\2014"; + margin: 0 .4em; + opacity: 0.6; +} + +.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner:hover .urlbarView-dynamic-unitConversion-action, +.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner[selected] .urlbarView-dynamic-unitConversion-action { + visibility: visible; +} + +.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner:hover .urlbarView-dynamic-unitConversion-action { + color: var(--urlbar-popup-action-color); +} + +.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner[selected] .urlbarView-dynamic-unitConversion-action { + color: var(--autocomplete-popup-highlight-color); +} + +.urlbarView-row[dynamicType=quickactions] > .urlbarView-row-inner { + align-items: start; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-dynamic-quickactions-buttons { + display: flex; + flex-grow: 1; + gap: 0.9em 1.8em; + max-width: 100%; +} + +#urlbar[searchmodesource=actions] .urlbarView-row[dynamicType=quickactions] .urlbarView-dynamic-quickactions-buttons { + flex-wrap: wrap; +} + +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=quickactions] > .urlbarView-row-inner { + flex-wrap: unset; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-quickaction-row { + box-shadow: 0px 0px 1px rgba(128, 128, 142, 0.9), 0px 0px 4px rgba(128, 128, 142, 0.5); + border-radius: 4px; + display: flex; + align-items: center; + padding: .5em; + margin-top: 2px; + position: relative; + overflow: hidden; + min-width: 16px; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-quickaction-row[disabled] { + opacity: .4; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-label { + overflow: hidden; + text-overflow: ellipsis; + font-size: 11px; + font-weight: 500; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-favicon { + display: flex; + align-items: center; + justify-content: center; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-favicon-img { + width: 16px; + height: 16px; +} + +.urlbarView-row[dynamicType=quickactions][label]::before { + top: -1em; + margin-inline-start: 6px; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-quickaction-row:hover:not([disabled]):not([selected]) { + background-color: var(--autocomplete-popup-hover-background); +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-quickaction-row[selected] { + background-color: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-title { + display: flex; +} + +/** + * UrlbarProviderContextualSearch + */ + +.urlbarView-row[dynamicType=contextualSearch] .urlbarView-title[overflow] { + mask-image: linear-gradient(to left, transparent, black 2em); +} + +.urlbarView-row[dynamicType=contextualSearch] .urlbarView-title[overflow]:-moz-locale-dir(rtl) { + mask-image: linear-gradient(to right, transparent, black 2em); +} + +.urlbarView-row[dynamicType=contextualSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator.urlbarView-dynamic-contextualSearch-separator { + visibility: visible; +} + +.urlbarView-row[dynamicType=contextualSearch] .urlbarView-dynamic-contextualSearch-description { + font-size: 0.85em; +} + +.urlbarView-row[dynamicType=contextualSearch]:hover > .urlbarView-row-inner { + background-color: var(--autocomplete-popup-hover-background); +} + + +/** + * Weather + * + * All em units used below are based on the spec where 1em is 13px. + * Thus using 13px as a base to calculate the other relative em sizes, either + * a bigger or smaller ratio to 13px. + */ + +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner { + flex-wrap: nowrap; +} + +.urlbarView-dynamic-weather-currentConditions { + background-color: var(--autocomplete-popup-hover-background); + padding: 0.61em 0.61em 0.84em; + margin-inline-end: 0.92em; + border-radius: 2px; + text-align: center; +} + +@media (prefers-color-scheme: dark) { + .urlbarView-dynamic-weather-currentConditions { + background-color: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); + } +} + +.urlbarView-dynamic-weather-currently { + font-size: 0.85em; + margin-bottom: 0.53em; +} + +.urlbarView-dynamic-weather-temperature { + margin-inline-end: 0.3em; + font-weight: 600; + /* The units from the spec: + - 1em is 13px + - temperature is 18px + - We need to figure out the temperature in units of em. + - 18px / 13px = 1.385em + Therefore, the temperature is 1.385em units. + */ + font-size: 1.385em; + vertical-align: middle; +} + +.urlbarView-dynamic-weather-weatherIcon { + vertical-align: middle; +} + +/* Weather Icon color for high contrast mode */ +@media (prefers-contrast) { + .urlbarView-dynamic-weather-weatherIcon { + -moz-context-properties: fill, stroke; + fill: currentColor; + stroke: currentColor; + } +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="1"] { + content: url("chrome://browser/skin/weather/sunny.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="2"] { + content: url("chrome://browser/skin/weather/mostly-sunny.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="3"], +.urlbarView-dynamic-weather-weatherIcon[iconId="4"], +.urlbarView-dynamic-weather-weatherIcon[iconId="6"] { + content: url("chrome://browser/skin/weather/partly-sunny.svg"); +} + + +.urlbarView-dynamic-weather-weatherIcon[iconId="5"] { + content: url("chrome://browser/skin/weather/hazy-sunshine.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="7"], +.urlbarView-dynamic-weather-weatherIcon[iconId="8"] { + content: url("chrome://browser/skin/weather/cloudy.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="11"] { + content: url("chrome://browser/skin/weather/fog.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="12"] { + content: url("chrome://browser/skin/weather/showers.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="13"], +.urlbarView-dynamic-weather-weatherIcon[iconId="14"] { + content: url("chrome://browser/skin/weather/mostly-cloudy-with-showers.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="15"] { + content: url("chrome://browser/skin/weather/thunderstorms.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="16"], +.urlbarView-dynamic-weather-weatherIcon[iconId="17"] { + content: url("chrome://browser/skin/weather/mostly-cloudy-with-thunderstorms.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="18"] { + content: url("chrome://browser/skin/weather/rain.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="19"], +.urlbarView-dynamic-weather-weatherIcon[iconId="20"], +.urlbarView-dynamic-weather-weatherIcon[iconId="25"] { + content: url("chrome://browser/skin/weather/flurries.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="21"] { + content: url("chrome://browser/skin/weather/partly-sunny-with-flurries.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="22"], +.urlbarView-dynamic-weather-weatherIcon[iconId="23"] { + content: url("chrome://browser/skin/weather/snow.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="24"], +.urlbarView-dynamic-weather-weatherIcon[iconId="31"] { + content: url("chrome://browser/skin/weather/ice.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="26"], +.urlbarView-dynamic-weather-weatherIcon[iconId="29"] { + content: url("chrome://browser/skin/weather/freezing-rain.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="30"] { + content: url("chrome://browser/skin/weather/hot.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="32"] { + content: url("chrome://browser/skin/weather/windy.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="33"] { + content: url("chrome://browser/skin/weather/night-clear.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="34"], +.urlbarView-dynamic-weather-weatherIcon[iconId="35"], +.urlbarView-dynamic-weather-weatherIcon[iconId="36"], +.urlbarView-dynamic-weather-weatherIcon[iconId="38"] { + content: url("chrome://browser/skin/weather/night-mostly-clear.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="37"] { + content: url("chrome://browser/skin/weather/night-hazy-moonlight.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="39"], +.urlbarView-dynamic-weather-weatherIcon[iconId="40"] { + content: url("chrome://browser/skin/weather/night-partly-cloudy-with-showers.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="41"], +.urlbarView-dynamic-weather-weatherIcon[iconId="42"] { + content: url("chrome://browser/skin/weather/night-partly-cloudy-with-thunderstorms.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="43"], +.urlbarView-dynamic-weather-weatherIcon[iconId="44"] { + content: url("chrome://browser/skin/weather/night-mostly-cloudy-with-flurries.svg"); +} + +.urlbarView-dynamic-weather-summary { + flex-grow: 1; + flex-shrink: 1; + min-width: 0; +} + +.urlbarView-dynamic-weather-top { + display: flex; + align-items: center; +} + +.urlbarView-dynamic-weather-topNoWrap { + display: inline-flex; + align-items: center; +} + +.urlbarView-dynamic-weather-middle { + font-size: 0.85em; + display: flex; + align-items: center; +} + +.urlbarView-dynamic-weather-middleNoWrap { + display: inline-flex; + align-items: center; +} + +.urlbarView-dynamic-weather-summaryTextSeparator::before { + content: '\00B7'; + margin: 0.25em; +} + +.urlbarView-dynamic-weather-highLow { + /* The 100% width is needed so the highLow wraps at the same time as the URL + when the URL has overflowed. + TODO - In a follow-up patch I will fix it so the highLow will wrap when the + highLow has overflowed, it will wrap separte from the URL.*/ + width: 100%; +} + +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner .urlbarView-dynamic-weather-top, +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner .urlbarView-dynamic-weather-middle { + flex-wrap: wrap; +} + +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner > .urlbarView-dynamic-weather-summary > +.urlbarView-dynamic-weather-top > .urlbarView-dynamic-weather-topNoWrap > .urlbarView-dynamic-weather-titleSeparator, +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner > .urlbarView-dynamic-weather-summary > +.urlbarView-dynamic-weather-middle > .urlbarView-dynamic-weather-middleNoWrap > .urlbarView-dynamic-weather-summaryTextSeparator { + display: none; +} + +.urlbarView-dynamic-weather-bottom { + font-size: 0.85em; + margin-top: 0.40em; + opacity: 0.6; +} + +.urlbarView-row[dynamicType=weather] > .urlbarView-row-inner[selected] > .urlbarView-dynamic-weather-summary > .urlbarView-dynamic-weather-top > .urlbarView-url { + color: inherit; +} + +.urlbarView-row[dynamicType=weather] > .urlbarView-row-inner[selected] > .urlbarView-dynamic-weather-summary > .urlbarView-dynamic-weather-bottom { + opacity: 1; +} diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css new file mode 100644 index 0000000000..b0fe7e7a7b --- /dev/null +++ b/browser/themes/shared/urlbar-searchbar.css @@ -0,0 +1,745 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + --toolbar-field-border-color: hsla(240,5%,5%,.25); + --toolbar-field-focus-border-color: var(--focus-outline-color); + --urlbar-container-padding: 1px; + --urlbar-margin-inline: 5px; + --urlbar-search-button-width: calc(16px + 2 * var(--urlbar-icon-padding)); +} + +@media not (prefers-contrast) { + :root { + --toolbar-field-border-color: transparent; + --toolbar-field-focus-border-color: color-mix(in srgb, var(--focus-outline-color) 50%, transparent); + } +} + +#urlbar-container, +#search-container { + padding-block: 4px; + margin-inline: var(--urlbar-margin-inline); +} + +#search-container[cui-areatype="panel"] { + margin: var(--arrowpanel-menuitem-margin); +} + +:root[uidensity=touch] #urlbar-container, +:root[uidensity=touch] #search-container { + padding-block: 5px; +} + +#urlbar, +#searchbar { + min-height: var(--urlbar-min-height); + text-shadow: none; + color: var(--toolbar-field-color); +} + +/** + * System colors and widgets are set based on toolbar color. Since toolbar + * fields can be styled differently from the toolbar, we need to use the + * correct color scheme in toolbar fields. + */ +#urlbar:-moz-lwtheme, +#searchbar:-moz-lwtheme { + color-scheme: light; +} + +:root[lwt-toolbar-field-brighttext] #urlbar:not([focused="true"]), +:root[lwt-toolbar-field-brighttext] #searchbar:not(:focus-within), +:root[lwt-toolbar-field-focus-brighttext] #urlbar[focused="true"], +:root[lwt-toolbar-field-focus-brighttext] #searchbar:focus-within { + color-scheme: dark; +} + +#urlbar-background, +#searchbar { + background-color: var(--toolbar-field-background-color); + background-clip: border-box; + border: 1px solid var(--toolbar-field-border-color); + border-radius: var(--toolbarbutton-border-radius); +} + +#urlbar-input-container, +#searchbar { + border-radius: var(--toolbarbutton-border-radius); + overflow: clip; +} + +#urlbar-input, +#urlbar-scheme, +.searchbar-textbox { + -moz-box-flex: 1; + background-color: transparent; + color: inherit; + border: none; + margin: 0; + padding: 0; + outline: none; +} + +#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background, +#searchbar:focus-within { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); + /* We used --focus-outline above to inherit its width and style properties, + but we still want to use the theme's border-color. + --toolbar-field-focus-border-color is set equal to --focus-outline-color + on :root, but LWT themes can override this value. */ + outline-color: var(--toolbar-field-focus-border-color); + border-color: transparent; +} + +#urlbar[focused="true"] > #urlbar-background, +#searchbar:focus-within { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23); +} + +#urlbar[open] > #urlbar-background { + border-color: var(--arrowpanel-border-color); + box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13); +} + +#urlbar:is([focused="true"], [open]), +#searchbar:focus-within { + color: var(--toolbar-field-focus-color); +} + +#urlbar:is([focused="true"], [open]) > #urlbar-background, +#searchbar:focus-within { + background-color: var(--toolbar-field-focus-background-color); +} + +#urlbar-input::placeholder, +.searchbar-textbox::placeholder { + opacity: 0.69; +} + +#TabsToolbar #searchbar:not(:focus-within) { + /* The tabs toolbar is usually a different color than the other toolbars, and + we can't predict it, to avoid a transparent field we enforce a border. */ + border-color: color-mix(in srgb, currentColor 20%, transparent); +} + +#urlbar-input:-moz-lwtheme::selection, +.searchbar-textbox:-moz-lwtheme::selection { + background-color: var(--lwt-toolbar-field-highlight, Highlight); + color: var(--lwt-toolbar-field-highlight-text, HighlightText); +} + +#urlbar-input:not(:focus):-moz-lwtheme::selection, +.searchbar-textbox:not(:focus-within):-moz-lwtheme::selection { + background-color: var(--lwt-toolbar-field-highlight, text-select-disabled-background); +} + +#urlbar:not([focused="true"]) { + caret-color: transparent; +} + +#urlbar.searchButton > #urlbar-input-container > #urlbar-search-button { + width: var(--urlbar-search-button-width); + background-image: url(chrome://global/skin/icons/search-glass.svg); + background-repeat: no-repeat; + background-position: center; + -moz-context-properties: fill, fill-opacity; + fill: var(--toolbarbutton-icon-fill); +} + +#urlbar.searchButton > #urlbar-input-container[pageproxystate="invalid"] > #urlbar-search-button { + margin-inline-end: 6px; +} + +/** + * The urlbar background is a separate element so we can animate it + * independently from the content. It's positioned absolutely and stretched to + * the bounds of the urlbar. + */ + +#urlbar, +#urlbar-input-container, +.urlbarView { + position: relative; +} + +#urlbar-background { + display: block; + position: absolute; + inset: 0; +} + +:root:not([chromehidden~="toolbar"]) #urlbar.searchButton:not([breakout]) > #urlbar-background, +:root:not([chromehidden~="toolbar"]) #urlbar.searchButton:not([breakout-extend]) > #urlbar-background { + inset-inline-start: var(--urlbar-search-button-width); +} + +#urlbar-input-container { + /* Match urlbar-background's border. */ + border: 1px solid transparent; + padding: var(--urlbar-container-padding); +} + +#urlbar-container[breakout] { + position: relative; + min-height: var(--urlbar-container-height); +} + +#urlbar[breakout] { + display: block; + position: absolute; + width: 100%; + height: var(--urlbar-height); + top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2); + left: 0; +} + +#urlbar[breakout] > #urlbar-input-container { + width: 100%; + height: 100%; +} + +#urlbar:not([open]) > .urlbarView, +#urlbar:not([breakout]) > .urlbarView { + display: none; +} + +#urlbar[breakout][breakout-extend], +#urlbar[breakout][breakout-extend-disabled][open] { + /* The z-index needs to be big enough to trump other positioned UI pieces + that we want to overlay. 3 is used in the tab bar. */ + z-index: 3; + height: auto; +} + +#urlbar[breakout][breakout-extend] { + top: 0; + left: calc(-1 * var(--urlbar-margin-inline)); + width: calc(100% + 2 * var(--urlbar-margin-inline)); +} + +#urlbar[breakout][breakout-extend] > #urlbar-input-container { + height: var(--urlbar-toolbar-height); + padding-block: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2 + var(--urlbar-container-padding)); + padding-inline: calc(var(--urlbar-margin-inline) + var(--urlbar-container-padding)); +} + +#urlbar.searchButton[breakout][breakout-extend] > #urlbar-input-container > #urlbar-search-button { + fill: currentColor; + fill-opacity: .6; +} + +@keyframes urlbar-grow { + 0% { + transform: scaleX(.99) scaleY(.98); + } + 100% { + transform: scale(1.0); + } +} + +#urlbar[breakout][breakout-extend] > #urlbar-background { + animation-name: urlbar-grow; + animation-duration: 0s; + animation-timing-function: var(--animation-easing-function); +} + +@media (prefers-reduced-motion: no-preference) { + #urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background { + animation-duration: 150ms; + } +} + +:root[chromehidden~="toolbar"] #urlbar-container { + /* Remove excess space between the address bar and the menu button in popups. */ + padding-inline-end: 0; +} + +:root[customizing] .urlbar-input-box { + visibility: hidden; +} + +#urlbar-container { + -moz-box-align: center; +} + +#urlbar-container, +#wrapper-urlbar-container { + -moz-box-flex: 400; +} + +#urlbar-search-splitter { + /* The splitter width should equal the location and search bars' combined + neighboring margin and border width. */ + min-width: 12px; + margin: 0 -6px; + position: relative; + border: none; + background: transparent; + appearance: none; +} + +/* Urlbar search mode indicator */ +#urlbar-search-mode-indicator { + display: none; + background-color: var(--urlbar-box-bgcolor); + color: var(--urlbar-box-text-color); + margin-inline-end: 8px; + align-items: center; + border-radius: var(--urlbar-icon-border-radius); + padding-inline: 8px 6px; +} + +#urlbar[focused="true"] #urlbar-search-mode-indicator { + background-color: var(--urlbar-box-focus-bgcolor); +} + +#urlbar[searchmode] > #urlbar-input-container > #urlbar-search-mode-indicator { + display: inline-flex; +} + +#urlbar[searchmode] > #urlbar-input-container > #urlbar-label-box { + display: none; +} + +#urlbar-search-mode-indicator-close { + background: url(chrome://global/skin/icons/close.svg) no-repeat center; + background-size: 10px 10px; + width: 16px; + height: 16px; + -moz-context-properties: fill, fill-opacity; + fill-opacity: 0.6; + fill: currentColor; + border-radius: var(--urlbar-icon-border-radius); +} + +#urlbar-search-mode-indicator-close:hover { + background-color: var(--urlbar-box-hover-bgcolor); + color: var(--urlbar-box-hover-text-color); +} +#urlbar-search-mode-indicator-close:hover:active { + background-color: var(--urlbar-box-active-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +@media (prefers-contrast) { + #urlbar-search-mode-indicator-close { + fill-opacity: 1.0; + } +} + +#urlbar-search-mode-indicator-title { + padding-inline: 0 3px; +} + +/* Page action panel */ +.pageAction-panel-button > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +#pageAction-panel-bookmark, +#star-button { + list-style-image: url("chrome://browser/skin/bookmark-hollow.svg"); +} +#pageAction-panel-bookmark[starred], +#star-button[starred] { + list-style-image: url("chrome://browser/skin/bookmark.svg"); +} +#star-button[starred] { + fill-opacity: 1; + fill: var(--toolbar-field-icon-fill-attention); +} + +/* URL bar and page action buttons */ + +/* The background can be very dark and if the add-on uses a black-ish svg it + will be barely visible. In the future we should have a standardized SVG + solution we can apply to add-on icons, for now we can only try to make them + visible through some filtering tricks */ +:root[lwt-toolbar-field-brighttext] #urlbar:not([focused="true"]) .urlbar-addon-page-action[style*=".svg"] > .urlbar-icon, +:root[lwt-toolbar-field-focus-brighttext] #urlbar[focused="true"] .urlbar-addon-page-action[style*=".svg"] > .urlbar-icon { + filter: grayscale(100%) brightness(20%) invert(); +} + +@media (prefers-color-scheme: dark) { + /* As above, but for the default theme in dark mode, which suffers from the same issue */ + :root:not(:-moz-lwtheme) .urlbar-addon-page-action[style*=".svg"] > .urlbar-icon { + filter: grayscale(100%) brightness(20%) invert(); + } +} + +#userContext-icons, +#urlbar-zoom-button { + margin-inline: 6px; +} + +.urlbar-icon { + width: 16px; + height: 16px; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: var(--urlbar-icon-fill-opacity); +} + +.urlbar-page-action, +#urlbar-go-button, +.search-go-button { + width: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding)); + height: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding)); + border-radius: var(--urlbar-icon-border-radius); + padding: var(--urlbar-icon-padding); + color: inherit; +} + +.urlbar-page-action:not([disabled]):hover, +#urlbar-go-button:hover, +.search-go-button:hover { + background-color: var(--urlbar-box-hover-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +.urlbar-page-action:not([disabled])[open], +.urlbar-page-action:not([disabled]):hover:active, +#urlbar-go-button:hover:active, +.search-go-button:hover:active { + background-color: var(--urlbar-box-active-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +.urlbar-page-action:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +#urlbar-go-button, +.search-go-button { + list-style-image: url("chrome://browser/skin/forward.svg"); +} + +#urlbar-go-button:-moz-locale-dir(rtl), +.search-go-button:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +#pageActionButton, +.share-more-button { + list-style-image: url("chrome://global/skin/icons/more.svg"); +} + +/** + * Contextual Feature Recommendation + * + * Animate the recommendation icon to expand outwards and display a text label. + * Fake the effect of a smoothly expanding width without animating any widths + * by (continuously) animating only `mask-position-x` and `transform`. + * + * In a few places, transition a property using the timing-function `step-start` + * while collapsed and `step-end` while expanded in order to (discretely) modify + * the value while expanded and while transitioning in either direction. + * + * This UI is part of an experiment launching in LTR locales only. Fixing the + * RTL issues is tracked by Bug 1485725. + */ + +:root { + --cfr-animation-duration: 0.35s; + --cfr-button-addons-icon: url(chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg); + --cfr-button-features-icon: url(chrome://activity-stream/content/data/content/assets/glyph-cfr-feature-16.svg); + --cfr-button-highlights-icon: url(chrome://global/skin/icons/highlights.svg); + --cfr-active-color: #0060df; +} + +#contextual-feature-recommendation { + width: 28px; + margin-inline-start: 0; + transition: margin-inline-start step-end var(--cfr-animation-duration); +} +#urlbar[cfr-recommendation-state="expanded"] #contextual-feature-recommendation { + margin-inline-start: calc(var(--cfr-label-width) * -1); + transition: margin-inline-start step-start var(--cfr-animation-duration); +} + +#cfr-button { + margin: -2px 0; + transition-property: fill, fill-opacity, transform; + transition-timing-function: ease-in-out; + transition-duration: var(--cfr-animation-duration); +} +#contextual-feature-recommendation[data-cfr-icon="webextensions-icon"] #cfr-button { + list-style-image: var(--cfr-button-addons-icon); +} +#contextual-feature-recommendation[data-cfr-icon="recommendations-icon"] #cfr-button { + list-style-image: var(--cfr-button-features-icon); +} +#contextual-feature-recommendation[data-cfr-icon="highlights-icon"] #cfr-button { + list-style-image: var(--cfr-button-highlights-icon); +} +#urlbar[cfr-recommendation-state="expanded"] #cfr-button { + fill: white; + fill-opacity: 1; + background-color: transparent; /* Override hover background-color */ + transform: translateX(calc(var(--cfr-label-width) * -1)); +} +#urlbar[cfr-recommendation-state="expanded"] #cfr-button:-moz-locale-dir(rtl) { + transform: translateX(calc(var(--cfr-label-width))); +} +@keyframes cfr-button-fade-through-active-color { + 33% { + fill-opacity: 1; + fill: var(--cfr-active-color); + } + 67% { + fill-opacity: 1; + fill: var(--cfr-active-color); + } +} +#urlbar[cfr-recommendation-state="collapsed"] #cfr-button { + animation: cfr-button-fade-through-active-color calc(3 * var(--cfr-animation-duration)); +} + +#cfr-label-container { + width: 0; + overflow: hidden; + border-radius: 5px; + padding-inline-start: 28px; + mask-image: linear-gradient(to right, transparent 0, black 0); + mask-position-x: var(--cfr-label-width); + mask-repeat: no-repeat; + transition-property: background-color, mask-position-x, width, margin-inline-end; + transition-timing-function: ease-in-out, ease-in-out, step-end, step-end; + transition-duration: var(--cfr-animation-duration); + -moz-box-align: center; + margin-block: calc((var(--urlbar-min-height) - var(--urlbar-container-padding) - 2px /* border */ - 24px) / 2); +} +#cfr-label-container:-moz-locale-dir(rtl) { + mask-position-x: calc(var(--cfr-label-width) * -1); +} + +#urlbar[cfr-recommendation-state="expanded"] #cfr-label-container { + width: calc(var(--cfr-label-width) + 28px); + background-color: var(--cfr-active-color); + margin-inline-end: -28px; + mask-position-x: 0; + transition-timing-function: ease-in-out, ease-in-out, step-start, step-start; +} + +#cfr-label { + margin: 0; + padding: 3px 5px; + padding-inline-start: 0; + color: white; + mask-image: linear-gradient(to right, transparent 0, black 0); + mask-position-x: var(--cfr-label-width); + mask-repeat: no-repeat; + transition: mask-position-x ease-in-out var(--cfr-animation-duration); +} +#cfr-label:-moz-locale-dir(rtl) { + mask-position-x: calc(var(--cfr-label-width) * -1); +} +#urlbar[cfr-recommendation-state="expanded"] #cfr-label { + mask-position-x: 0; +} + +/* Shift the url-bar text fading to stop the recommendation overlapping */ +#urlbar[cfr-recommendation-state] #urlbar-input { + /* A mask-image is usually only defined for the url bar when text overflows. + We need to re-define the mask image here so that it shows up correctly when + we transition to or from an `expanded` state (in which the right end of the + url bar may be obscured without overflow). */ + mask-image: linear-gradient(to left, transparent, black 3ch); + transition: mask-position-x ease-in-out var(--cfr-animation-duration); +} +#urlbar[cfr-recommendation-state] #urlbar-input:-moz-locale-dir(rtl) { + mask-image: linear-gradient(to right, transparent, black 3ch); +} +#urlbar[cfr-recommendation-state="expanded"] #urlbar-input { + mask-position-x: calc(var(--cfr-label-width) * -1); +} +#urlbar[cfr-recommendation-state="expanded"] #urlbar-input:-moz-locale-dir(rtl) { + mask-position-x: calc(var(--cfr-label-width)); +} + +/* Reader mode icon */ + +#reader-mode-button > .urlbar-icon { + list-style-image: url(chrome://browser/skin/reader-mode.svg); +} + +#reader-mode-button[readeractive] > .urlbar-icon { + fill: var(--toolbar-field-icon-fill-attention); + fill-opacity: 1; +} + +/* Zoom button */ + +#urlbar-zoom-button { + appearance: none; + color: inherit; + font-size: .8em; + padding: 3px 7px; + border-radius: var(--urlbar-icon-border-radius); + background-color: var(--urlbar-box-bgcolor); + color: var(--urlbar-box-text-color); + margin-block: calc((var(--urlbar-min-height) - 20px) / 2 - 1px /* border */ - var(--urlbar-container-padding)); + overflow: hidden; +} + +#urlbar[focused="true"] #urlbar-zoom-button:not(:hover) { + background-color: var(--urlbar-box-focus-bgcolor); +} + +#urlbar-zoom-button:hover { + background-color: var(--urlbar-box-hover-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +#urlbar-zoom-button:hover:active { + background-color: var(--urlbar-box-active-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +@keyframes urlbar-zoom-reset-pulse { + 0% { + transform: scale(0); + } + 75% { + transform: scale(1.5); + } + 100% { + transform: scale(1.0); + } +} + +#urlbar-zoom-button[animate="true"] { + animation-name: urlbar-zoom-reset-pulse; + animation-duration: 250ms; +} + +#urlbar-zoom-button:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +#urlbar-zoom-button > .toolbarbutton-text { + display: -moz-box; +} + +#urlbar-zoom-button > .toolbarbutton-icon { + display: none; +} + +/* Search bar */ + +#search-container { + min-width: 125px; +} + +#search-container, +#wrapper-search-container { + -moz-box-flex: 175; +} + +#search-container[width] { + /* Take something closer to the explicit width when requested */ + -moz-box-flex: 1; +} + +#search-container[cui-areatype="panel"] > #searchbar:-moz-lwtheme { + /* Theme authors usually only consider contrast against the toolbar when + picking a border color for the search bar. Since the search bar can be + dragged into the overflow panel, we need to show a high-contrast border + around the searchbar in case the searchbar and panel background are the + same color. */ + border-color: var(--panel-separator-color); +} + +.search-go-button { + margin-inline: 1px; +} + +.searchbar-search-button { + -moz-box-align: center; + fill: currentColor; +} + +.searchbar-search-icon { + list-style-image: url(chrome://global/skin/icons/search-glass.svg); + -moz-context-properties: fill, fill-opacity; + fill-opacity: var(--urlbar-icon-fill-opacity); + pointer-events: none; + margin-inline: 8px 6px; + width: 16px; +} + +.searchbar-search-icon-overlay { + pointer-events: none; +} + +.searchbar-search-button[addengines=true] > .searchbar-search-icon-overlay { + list-style-image: url(chrome://browser/skin/search-indicator-badge-add.svg); + margin-inline: -15px 4px; + margin-top: -10px; + width: 11px; + height: 11px; +} + +.searchbar-search-button[addengines=true] > .searchbar-search-icon-overlay:-moz-locale-dir(rtl) { + margin-inline: -25px 14px; +} + +.searchbar-search-button:hover:not([addengines=true]) > .searchbar-search-icon-overlay { + list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg); + -moz-context-properties: fill; + margin-inline: -8px 2px; + width: 6px; + height: 6px; +} + +.searchbar-search-button:hover:not([addengines=true]) > .searchbar-search-icon-overlay:-moz-locale-dir(rtl) { + margin-inline: -26px 20px; +} + +.searchbar-engine-one-off-add-engine:not([image]), +moz-input-box > menupopup .context-menu-add-engine:not([image]) { + list-style-image: url("chrome://browser/skin/search-engine-placeholder.png"); +} + +@media (min-resolution: 1.1dppx) { + .searchbar-engine-one-off-add-engine:not([image]), + moz-input-box > menupopup .context-menu-add-engine:not([image]) { + list-style-image: url("chrome://browser/skin/search-engine-placeholder@2x.png"); + } +} + +.searchbar-engine-one-off-add-engine > .button-box::after, +moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left::after { + content: ""; + position: relative; + display: -moz-box; + background: url(chrome://browser/skin/search-indicator-badge-add.svg) no-repeat center; + height: 11px; + width: 11px; + margin-inline: -4px -7px; + margin-top: -13px; +} + +moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left::after { + /* These differ from the urlbar and searchbar because the context menu + may not have enough space */ + margin-inline: -7px -4px; + margin-top: -8px; +} + +/* Fade a little the icon so that the + badge is more evident and the button + is less likely to be visually confused with a normal search shortcut */ +.searchbar-engine-one-off-add-engine[image]:not(:hover) > .button-box > .button-icon { + opacity: 0.7; +} +.searchbar-engine-one-off-add-engine[image]:hover > .button-box > .button-icon { + opacity: 1; +} diff --git a/browser/themes/shared/urlbarView.css b/browser/themes/shared/urlbarView.css new file mode 100644 index 0000000000..ad9065af9d --- /dev/null +++ b/browser/themes/shared/urlbarView.css @@ -0,0 +1,850 @@ +/* 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://browser/skin/urlbar-dynamic-results.css"); + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + --autocomplete-popup-highlight-background: SelectedItem; + --autocomplete-popup-highlight-color: SelectedItemText; + + --urlbar-popup-action-color: hsl(178, 100%, 28%); + + --urlbarView-action-slide-in-distance: 200px; + + --urlbarView-item-inline-padding: var(--urlbar-icon-padding); + + --urlbarView-favicon-width: 16px; + --urlbarView-icon-margin-end: calc(var(--urlbar-icon-padding) + var(--identity-box-margin-inline)); +} + +:root:-moz-lwtheme { + --urlbar-popup-action-color: rgb(91,91,102); + --urlbar-popup-url-color: rgb(0,97,224); + /* Fallback colours for when theme authors don't define lwtheme variables. */ + --autocomplete-popup-highlight-background: rgb(0, 99, 255); + --autocomplete-popup-highlight-color: white; +} + +:root[lwt-toolbar-field-focus-brighttext] { + --urlbar-popup-url-color: var(--lwt-brighttext-url-color); + --urlbar-popup-action-color: #30e60b; +} + +:root[lwt-toolbar-field-brighttext] { + --autocomplete-popup-highlight-background: rgb(0, 99, 225); +} + +:root[lwt-toolbar-field-focus-brighttext] { + --urlbar-popup-action-color: rgb(191,191,201); +} + +:root:-moz-locale-dir(rtl) { + --urlbarView-action-slide-in-distance: -200px; +} + +.urlbarView { + /* Don't handle window drag events in case we are overlapping a toolbar */ + -moz-window-dragging: no-drag; + + display: block; + text-shadow: none; + overflow: clip; + margin-inline: calc(5px + var(--urlbar-container-padding)); + width: calc(100% - 2 * (5px + var(--urlbar-container-padding))); + /* Match urlbar-background's border. */ + border-inline: 1px solid transparent; +} + +.urlbarView-body-inner { + width: 100%; +} + +#urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner { + border-top: 1px solid var(--autocomplete-popup-separator-color); +} + +.urlbarView-results { + padding-block: 4px; + white-space: nowrap; +} + +/* Vertically center the one-offs when no results are present. */ +.urlbarView[noresults] > .urlbarView-body-outer > .urlbarView-body-inner > .urlbarView-results { + padding-block: 0; +} + +.urlbarView-row { + display: flex; + align-items: center; + fill: currentColor; + fill-opacity: var(--urlbar-icon-fill-opacity); + padding-block: 2px; +} + +:root:not([uidensity=compact]) .urlbarView-row:not([type=tip], [type=dynamic]) { + min-height: 32px; +} + +:root[uidensity=touch] .urlbarView-row:not([type=tip], [type=dynamic]) { + padding-block: 11px; +} + +.urlbarView-row-inner { + display: inline-flex; + flex: 1 1; + flex-wrap: nowrap; + overflow: hidden; + border-radius: var(--toolbarbutton-border-radius); + padding-inline: var(--urlbarView-item-inline-padding); + padding-block: 6px; +} + +:root:not([uidensity=compact]) .urlbarView-row-inner { + min-height: 20px; /* row min-height 32px - (2 * padding-block 6px) */ +} + +.urlbarView-row-inner, +.urlbarView-no-wrap { + flex-wrap: nowrap; + align-items: center; + justify-content: start; +} + +.urlbarView-no-wrap { + display: inline-flex; + max-width: 100%; + flex-grow: 0; + flex-shrink: 0; +} + +.urlbarView-url { + flex-grow: 1; + flex-shrink: 1; +} + +.urlbarView[actionoverride] .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-no-wrap, +.urlbarView-row[has-url]:not([type$=tab]) > .urlbarView-row-inner > .urlbarView-no-wrap, +.urlbarView-row[has-url]:is([type=remotetab], [sponsored]):is(:hover, [selected]) > .urlbarView-row-inner > .urlbarView-no-wrap { + /* We prioritize icons + title + action over the url, so they can grow freely, + but the url should never disappear when it's visible */ + flex-shrink: 0; + max-width: calc(70% - 2 * (var(--urlbarView-favicon-width) + (6px + 2px))); +} + +/* Wrap the url to a second line when the window is narrow. Do not wrap when the + window is also short, because fewer results will be shown. */ +@media screen and (min-height: 600px) { + .urlbarView-results[wrap] > .urlbarView-row > .urlbarView-row-inner { + flex-wrap: wrap; + } + .urlbarView-results[wrap] > .urlbarView-row > .urlbarView-row-inner > .urlbarView-no-wrap { + max-width: 100% !important; + flex-basis: 100%; + } + .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url, + .urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-url { + margin-top: 2px; + } + /* urlbarView-url is forced to be LTR for RTL locales, so set the padding based on the browser's directionality. */ + .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(ltr) { + padding-left: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width)); + } + .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(rtl) { + padding-right: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width)); + } + /* Note: switchtab entries show the url only in override mode, + remotetab and sponsored ones only when selected or :hover. */ + .urlbarView[actionoverride] .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator, + .urlbarView-results[wrap] > .urlbarView-row[has-url]:not([type$=tab], [sponsored]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator, + .urlbarView-results[wrap] > .urlbarView-row[has-url]:is([type=remotetab], [sponsored]):is(:hover, [selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator, + .urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap > .urlbarView-title-separator, + .urlbarView-results[wrap] > .urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator { + display: none; + } + .urlbarView-results[wrap] > .urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap { + flex-wrap: wrap; + } + .urlbarView-results[wrap] > .urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action { + flex-basis: 100%; + margin-inline-start: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width)); + } + + .urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top { + flex-wrap: wrap; + } + .urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap { + flex-basis: 100%; + } +} + +.urlbarView-row:not([type=tip], [type=dynamic]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title[overflow], +.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap > .urlbarView-title[overflow], +.urlbarView-tags[overflow], +.urlbarView-url[overflow] { + mask-image: linear-gradient(to left, transparent, black 2em); +} + +.urlbarView-row:not([type=tip], [type=dynamic]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title[overflow]:not([isurl]):-moz-locale-dir(rtl), +.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap > .urlbarView-title[overflow]:-moz-locale-dir(rtl), +.urlbarView-tags[overflow]:-moz-locale-dir(rtl) { + mask-image: linear-gradient(to right, transparent, black 2em); +} + +.urlbarView-title[isurl]:-moz-locale-dir(rtl), +.urlbarView-url:-moz-locale-dir(rtl) { + direction: ltr !important; +} + +.urlbarView-url:-moz-locale-dir(rtl) { + /* .urlbarView-url can grow due to `flex-grow: 1`, so without `text-align: + right`, the URL text would be left-aligned within .urlbarView-url for RTL + due to the `direction: ltr` rule. .urlbarView-title does not have this + problem since it does not have flex. */ + text-align: right; +} + +.urlbarView-row[selectable]:hover > .urlbarView-row-inner, +.urlbarView-row-inner[selectable]:hover { + background-color: var(--autocomplete-popup-hover-background); +} + +.urlbarView-row[selectable][selected] > .urlbarView-row-inner, +.urlbarView-row-inner[selectable][selected] { + background-color: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); +} + +/* Favicon */ + +.urlbarView-favicon { + width: var(--urlbarView-favicon-width); + height: var(--urlbarView-favicon-width); + margin-inline-end: var(--urlbarView-icon-margin-end); + background-repeat: no-repeat; + background-size: contain; + object-fit: contain; + flex-shrink: 0; + -moz-context-properties: fill, fill-opacity; +} + + +.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { + width: 24px; + height: 24px; + margin-inline-end: 12px; + flex-basis: 24px; + flex-grow: 0; +} + +.urlbarView-row[tail-suggestion] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { + visibility: hidden; +} + +.urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { + /* We use the URL color for this icon to inherit its accessibility + properties, like adapting to high contrast modes. We also want to ensure + contrast from the result highlight. */ + color: var(--urlbar-popup-url-color); + -moz-context-properties: fill; +} + +/* Type icon */ + +.urlbarView-type-icon { + position: absolute; + width: 12px; + height: 12px; + margin-top: var(--urlbarView-favicon-width); + margin-inline-start: 8px; + background-repeat: no-repeat; + background-size: contain; + -moz-context-properties: fill, stroke; + stroke: var(--toolbar-field-focus-background-color); +} + +/* Favicon badges have this priority: pinned > bookmark. */ + +.urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon { + background-image: url(chrome://browser/skin/bookmark-12.svg); + fill: var(--toolbar-field-icon-fill-attention); +} + +.urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon { + background-image: url(chrome://browser/skin/pin-12.svg); + fill: rgb(91,91,102); +} + +:root[lwt-toolbar-field-focus-brighttext] .urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon { + fill: rgb(251,251,254); +} + +/* Buttons */ + +.urlbarView-button { + display: inline-block; + min-width: 24px; + min-height: 24px; + vertical-align: middle; + background-size: 16px; + background-position: center; + background-repeat: no-repeat; + margin-inline: 4px; + -moz-context-properties: fill, fill-opacity; + border-radius: var(--toolbarbutton-border-radius); +} + +.urlbarView-button[selected] { + outline: var(--focus-outline); +} + +.urlbarView-button:hover, +.urlbarView-button[open] { + background-color: var(--autocomplete-popup-hover-background); +} + +.urlbarView-button + .urlbarView-button { + margin-inline-start: 0; +} + +.urlbarView-button-block { + background-image: url("chrome://browser/skin/thumb-down.svg"); +} + +.urlbarView-button-help { + background-image: url("chrome://global/skin/icons/help.svg"); +} + +.urlbarView-button-menu { + background-image: url("chrome://global/skin/icons/more.svg"); +} + +.urlbarView-button:not(:empty) { + min-height: 16px; + padding: 7px; +} + +/* The tip button is a Photon default button when unfocused and a + primary button in all other states. */ +.urlbarView-button:not(:empty) { + border-radius: var(--toolbarbutton-border-radius); + font-size: 0.93em; + background-color: var(--button-bgcolor); + font-weight: 600; + background-clip: padding-box; + min-width: 8.75em; + text-align: center; + flex-basis: initial; + flex-shrink: 0; + margin-inline-end: 4px; +} + +.urlbarView-button:not(:empty):hover { + background-color: var(--button-hover-bgcolor); +} + +.urlbarView-button:not(:empty):hover:active { + background-color: var(--button-active-bgcolor); +} + +.urlbarView-button:not(:empty)[selected] { + color: var(--button-primary-color); + background-color: var(--button-primary-bgcolor); + outline: var(--focus-outline); + outline-offset: 2px; +} + +.urlbarView-button:not(:empty)[selected]:hover { + background-color: var(--button-primary-hover-bgcolor); +} + +.urlbarView-button:not(:empty)[selected]:hover:active { + background-color: var(--button-primary-active-bgcolor); +} + +.urlbarView-button:not(:empty) + .urlbarView-button:empty { + /* Add space between a labeled button followed by an unlabeled button. */ + margin-inline-start: 1.8em; +} + +.urlbarView-button:not(:empty):last-child { + /* Add space between a labeled button and the trailing edge of the panel. */ + margin-inline-end: 1.8em; +} + +/* When the last button is unlabeled, vertically align it with the settings icon + in the search shortcuts. */ +.urlbarView-button:empty:last-child { + margin-inline-end: 2px; +} + +/* Tip rows */ + +.urlbarView-row[type=tip] { + padding-block: 18px; +} + +.urlbarView-row[type=tip]:not(:last-child) { + border-bottom: 1px solid var(--panel-separator-color); + margin-bottom: 4px; +} + +.urlbarView-row[type=tip]:not(:first-child) { + border-top: 1px solid var(--panel-separator-color); + margin-top: 4px; +} + +.urlbarView-row[type=tip] > .urlbarView-row-inner { + min-height: 32px; + + /* Add space between the tip title (and the rest of row-inner) and its + button. */ + margin-inline-end: 1.8em; +} + +.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator, +.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-url { + display: none; +} + +.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title { + white-space: normal; +} + +/* Row label (a.k.a. group label) */ + +.urlbarView-row[label]::before { + content: attr(label); + display: block; + /* Remove the label from the document flow so it doesn't affect the row + selection and hover states. */ + position: absolute; + /* `top` controls how far the label is from the main part of the row. */ + top: -1.27em; + margin-inline-start: var(--urlbarView-item-inline-padding); + font-size: 0.8em; + /* The color and opacity of labels is the same as the "This time, search with" + text in the search shortcuts. See `.search-panel-header > label` in + searchbar.inc.css. */ + opacity: 0.6; + pointer-events: none; +} +:root[lwt-toolbar-field-focus-brighttext] .urlbarView-row[label]::before { + /* Same as `.search-panel-header > label` in searchbar.inc.css */ + opacity: 1; +} + +.urlbarView-row[label] { + position: relative; + /* `margin-block-start` controls how far the main part of the row is from the + main part of the previous row. */ + margin-block-start: 1.46em; +} + +/* Title */ + +.urlbarView-title { + overflow: hidden; + white-space: nowrap; + /* Explicitly set line-height to avoid excessively tall rows if the title triggers use of + fallback fonts with extreme metrics. */ + line-height: 1.4; +} + +/* Tail suggestions */ +.urlbarView-tail-prefix { + display: none; + justify-content: flex-end; + white-space: pre; +} + +.urlbarView-row[tail-suggestion] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-tail-prefix { + display: inline-flex; +} + +.urlbarView-tail-prefix > .urlbarView-tail-prefix-string { + visibility: hidden; +} + +.urlbarView-tail-prefix > .urlbarView-tail-prefix-char { + position: absolute; +} + +/* Title separator */ + +.urlbarView-title-separator::before { + content: "\2014"; + margin: 0 .4em; + opacity: 0.6; +} + +.urlbarView-title:empty + .urlbarView-tags:empty + .urlbarView-title-separator { + display: none; +} + +/* URLs, action labels, tags */ + +.urlbarView-tags, +.urlbarView-url, +.urlbarView-title:not(:empty) ~ .urlbarView-action { + font-size: .85em; +} + +.urlbarView-title:not(:empty) ~ .urlbarView-action { + color: var(--urlbar-popup-action-color); +} + +.urlbarView-row[sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action { + color: unset; + opacity: .6; +} + +.urlbarView-row[sponsored][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action, +.urlbarView-row[sponsored] > .urlbarView-row-inner[selected] > .urlbarView-no-wrap > .urlbarView-action { + opacity: 1; +} + +/* Firefox Suggest sponsored results */ + +.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner { + /* 0px of top padding because the space between the favicon/title and the top + edge of the row is determined by the favicon margin-top and we don't want + any extra padding to complicate that. 1px of bottom padding so the bottom + edge of the action isn't touching the bottom edge of the row. The space + between the bottom edge of the favicon and the bottom edge of the row is + determined by this + the action margin-top. */ + padding-block: 0 1px; +} + +.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap { + /* Wrap the action span onto a new row. */ + flex-wrap: wrap; +} + +.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { + /* The favicon should be vertically centered in the row. The action span wraps + below the favicon and title, leaving the favicon centered with the title, + not the row, so we add margin-top. Normally there is 8x between the top + edge of the favicon and the top edge of the row. Here 1em = 13.75px, so + that's 8 / 13.75 =~ 0.58em. */ + margin-top: 0.58em; +} + +.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title { + /* The width of favicon + this title element + help icon is over than total + displayed width, favicon and title will collapse as different row, the style + will be broken. To avoid it, we specify the max displayable width for title + explicitly. */ + flex-basis: calc(100% - var(--urlbarView-favicon-width) - var(--urlbarView-icon-margin-end)); + /* Move the title away from the action a little. This does not affect the + height of the row. */ + margin-top: -0.3em; +} + +.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action { + flex-basis: 100%; + margin-inline-start: calc(var(--urlbarView-favicon-width) + var(--urlbarView-icon-margin-end)); + font-size: 0.73em; + /* This value + the bottom padding control the space between the bottom edge + of the favicon and the bottom edge of the row. The bottom padding is 1px, + leaving 8px - 1px = 7px we need to make up here. Here 1em = 0.73 * 13.75 =~ + 10px, so that's 7 / 10 = 0.7em. However, the action itself takes up some of + that space, so it's not that simple. The value used here was arrived at by + trial and error and is approximately 5px. */ + margin-top: -0.5em; +} + +@media (prefers-reduced-motion: no-preference) { + /* The slide-in effect is delayed ~100ms to reduce motion during result + composition. We set opacity: 0 at the 0% keyframe to ensure the text is not + seen by the user until after the delay. */ + @keyframes urlbarView-action-slide-in { + 0%, 28.6% { + translate: var(--urlbarView-action-slide-in-distance); + opacity: 0; + } + 100% { + translate: 0; + opacity: 1; + } + } + + .urlbarView-results > .urlbarView-row > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title:not(:empty) ~ .urlbarView-action[slide-in] { + animation-name: urlbarView-action-slide-in; + animation-duration: 350ms; + animation-timing-function: var(--animation-easing-function); + } +} + +.urlbarView-url { + overflow: hidden; + color: var(--urlbar-popup-url-color); + /* Increase line-height to avoid cutting overhanging glyphs due to masking on + the element */ + line-height: 1.4; +} + +.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-no-wrap >.urlbarView-action, +.urlbarView-row:hover > .urlbarView-row-inner > .urlbarView-no-wrap >.urlbarView-action, +.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-url, +.urlbarView-row-inner[selected] > .urlbarView-no-wrap >.urlbarView-action, +.urlbarView-row-inner:hover > .urlbarView-no-wrap >.urlbarView-action, +.urlbarView-row-inner[selected] > .urlbarView-url, +.urlbarView-row[type=tabtosearch][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { + color: inherit; +} + +.urlbarView-row:is([type=remotetab], [sponsored]):not([selected], :hover) > .urlbarView-row-inner > .urlbarView-url, +.urlbarView-row:is([type=search], [restyled-search]):not([selected], [show-action-text], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator, +.urlbarView-row:not([has-action], [has-url], [restyled-search]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator, +.urlbarView:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-url { + /* Use visibility:collapse instead of display:none since the latter can + confuse the overflow state of title and url elements when their content + changes while they're hidden. */ + visibility: collapse; +} + +.urlbarView-row[has-url]:is([type=remotetab], [sponsored]):is([selected], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action, +.urlbarView-row:is([type=search], [restyled-search]):not([selected], [show-action-text], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action, +.urlbarView-row:not([has-action], [has-url], [restyled-search]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action, +.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator, +.urlbarView[actionoverride] .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action { + display: none; +} + +/* Switch-to-tab action text is styled as a chiclet. */ +.urlbarView-row:is([type=switchtab], [type=remotetab]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action { + color: var(--urlbar-box-text-color); + background-color: var(--urlbar-box-focus-bgcolor); + border-radius: var(--toolbarbutton-border-radius); + padding: 6px 8px; + margin-block: -6px; + margin-inline-start: 8px; +} + +:root[uidensity=compact] .urlbarView-row:is([type=switchtab], [type=remotetab]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action { + padding: 3px 6px; + margin-block: -3px; +} + +/* On hover and selected the chiclet background would fade into the row style, + thus we invert the background, using the panel color, instead. */ +.urlbarView-row:is([type=switchtab], [type=remotetab]):is([selected], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action { + background-color: var(--toolbar-field-focus-background-color); + color: var(--toolbar-field-focus-color); +} + +.urlbarView-row[type=remotetab]:not([selected], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator::before, +.urlbarView:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator::before { + /* We make the title separator transparent so it stays in the accessibility + tree. We want screen readers to pause between the result title and the + switch-to-tab action text. */ + opacity: 0; + /* -1em for the width of the \2014 character. -.4em to offset the + margin-inline-start already set on this element. */ + margin-inline-end: -1.4em; +} + +/* Tags */ + +.urlbarView-tags { + overflow: hidden; + display: flex; + /* Increase line-height to avoid cutting overhanging glyphs due to masking on + the element */ + line-height: 1.4; +} + +.urlbarView-tag { + border: 1px solid color-mix(in srgb, currentColor 30%, transparent); + padding: 0 4px; + margin-inline-start: .4em; + border-radius: 4px; +} + +/* Best match */ + +.urlbarView-row[type=bestmatch] > .urlbarView-row-inner { + align-items: center; + justify-content: start; +} + +.urlbarView-row[type=bestmatch] > .urlbarView-row-inner, +.urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner { + flex-wrap: nowrap; +} + +.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-favicon { + width: 52px; + height: 52px; + flex-basis: 52px; + flex-shrink: 0; + flex-grow: 0; + border-radius: 2px; +} + +.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body { + flex-grow: 1; + flex-shrink: 1; + min-width: 0; +} + +.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + align-items: center; + justify-content: start; +} + +.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + align-items: center; + justify-content: start; + flex-shrink: 0; + min-width: 0; +} + +.urlbarView-results:not([wrap]) > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap { + /* Limit the title (which is inside .urlbarView-row-body-top-no-wrap) to 70% + of the width so the URL is never completely hidden. */ + max-width: 70%; +} + +.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-bottom { + font-size: 0.73em; + opacity: 0.6; +} + +.urlbarView-row[type=bestmatch][selected] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-bottom, +.urlbarView-row[type=bestmatch] > .urlbarView-row-inner[selected] > .urlbarView-row-body > .urlbarView-row-body-bottom { + opacity: 1; +} + +/* Search one-offs */ + +#urlbar .search-one-offs:not([hidden]) { + display: flex; + align-items: start; + padding-block: 10px; + flex-wrap: wrap; +} + +.urlbarView:not([noresults]) > .search-one-offs:not([hidden]) { + border-top: 1px solid var(--autocomplete-popup-separator-color); +} + +:root[uidensity=touch] #urlbar .search-one-offs:not([hidden]) { + padding-block: 15px; +} + +#urlbar .search-panel-one-offs-container { + /* Make sure horizontally we can fit four buttons, empty space, settings. */ + min-width: calc(4 * /* one-off with end margin */ 40px + /* settings with start margin */ 56px); +} + +#urlbar .search-panel-header { + padding: 0; + min-height: 28px; + display: flex; + flex-direction: column; + justify-content: center; +} + +#urlbar .search-panel-one-offs-header-label { + white-space: nowrap; + margin: 0; + padding-inline: var(--urlbarView-item-inline-padding) 18px; +} + +#urlbar .searchbar-engine-one-off-item { + min-width: 28px; + height: 28px; + margin-inline: 0 12px; + border-radius: var(--toolbarbutton-border-radius); +} + +#urlbar .searchbar-engine-one-off-item:last-child { + /* This applies to both the last one-off and the compact settings button */ + margin-inline-end: 0; +} + +#urlbar .search-setting-button { + /* Force empty space before the button */ + margin-inline-start: calc(32px - /* settings start padding */ 8px ); +} + +.urlbarView-row[source="bookmarks"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon, +#urlbar-engine-one-off-item-bookmarks { + list-style-image: url("chrome://browser/skin/bookmark.svg"); + fill: var(--toolbar-field-icon-fill-attention); + fill-opacity: 1; + -moz-context-properties: fill, fill-opacity; +} + +.urlbarView-row[source="tabs"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon, +#urlbar-engine-one-off-item-tabs { + list-style-image: url("chrome://browser/skin/tab.svg"); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: var(--urlbar-icon-fill-opacity); +} + +.urlbarView-row[source="history"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon, +#urlbar-engine-one-off-item-history { + list-style-image: url("chrome://browser/skin/history.svg"); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: var(--urlbar-icon-fill-opacity); +} + +.urlbarView-row[source="actions"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon, +#urlbar-engine-one-off-item-actions { + list-style-image: url("chrome://browser/skin/quickactions.svg"); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: var(--urlbar-icon-fill-opacity); +} + +/** + * We remove the blue fill from the bookmark icon when it is selected. We use + * a blue color as the selection background-color in some instances (Linux with + * blue system color; fallback for third-party themes) and we want to ensure + * contrast. + */ +.urlbarView-row[source="bookmarks"][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon, +#urlbar-engine-one-off-item-bookmarks[selected] { + fill: currentColor; + fill-opacity: var(--urlbar-icon-fill-opacity); +} + +/* search bar popup */ + +#PopupSearchAutoComplete { + --panel-color: var(--toolbar-field-focus-color); + --panel-background: var(--toolbar-field-focus-background-color); + --panel-border-color: var(--arrowpanel-border-color); +} + +#PopupSearchAutoComplete::part(content) { + --panel-padding: var(--panel-subview-body-padding); + /* NOTE(emilio): Once bug 1551637 is fixed we don't need to use block layout + * for this (though it doesn't really hurt) */ + display: block; +} + +@media not (prefers-contrast) { + #PopupSearchAutoComplete::part(content) { + /* Remove the top border since the panel is flush with the input. */ + border-top-width: 0; + } +} + +#PopupSearchAutoComplete .autocomplete-richlistitem[selected] { + background: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); +} diff --git a/browser/themes/shared/weather/cloudy.svg b/browser/themes/shared/weather/cloudy.svg new file mode 100644 index 0000000000..7f32d9f52f --- /dev/null +++ b/browser/themes/shared/weather/cloudy.svg @@ -0,0 +1,24 @@ + + + + + + diff --git a/browser/themes/shared/weather/flurries.svg b/browser/themes/shared/weather/flurries.svg new file mode 100644 index 0000000000..3c4fe0df38 --- /dev/null +++ b/browser/themes/shared/weather/flurries.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/fog.svg b/browser/themes/shared/weather/fog.svg new file mode 100644 index 0000000000..e567a1ddf4 --- /dev/null +++ b/browser/themes/shared/weather/fog.svg @@ -0,0 +1,26 @@ + + + + + + + + diff --git a/browser/themes/shared/weather/freezing-rain.svg b/browser/themes/shared/weather/freezing-rain.svg new file mode 100644 index 0000000000..447a74914a --- /dev/null +++ b/browser/themes/shared/weather/freezing-rain.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/hazy-sunshine.svg b/browser/themes/shared/weather/hazy-sunshine.svg new file mode 100644 index 0000000000..62cdcb3fc3 --- /dev/null +++ b/browser/themes/shared/weather/hazy-sunshine.svg @@ -0,0 +1,26 @@ + + + + + + + + diff --git a/browser/themes/shared/weather/hot.svg b/browser/themes/shared/weather/hot.svg new file mode 100644 index 0000000000..65caf9975a --- /dev/null +++ b/browser/themes/shared/weather/hot.svg @@ -0,0 +1,39 @@ + + + + + + + + + diff --git a/browser/themes/shared/weather/ice.svg b/browser/themes/shared/weather/ice.svg new file mode 100644 index 0000000000..8b83d83726 --- /dev/null +++ b/browser/themes/shared/weather/ice.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/mostly-cloudy-with-showers.svg b/browser/themes/shared/weather/mostly-cloudy-with-showers.svg new file mode 100644 index 0000000000..3d1b8817d3 --- /dev/null +++ b/browser/themes/shared/weather/mostly-cloudy-with-showers.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/mostly-cloudy-with-thunderstorms.svg b/browser/themes/shared/weather/mostly-cloudy-with-thunderstorms.svg new file mode 100644 index 0000000000..3d5de2b43e --- /dev/null +++ b/browser/themes/shared/weather/mostly-cloudy-with-thunderstorms.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/mostly-sunny.svg b/browser/themes/shared/weather/mostly-sunny.svg new file mode 100644 index 0000000000..c5cd0329ef --- /dev/null +++ b/browser/themes/shared/weather/mostly-sunny.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/night-clear.svg b/browser/themes/shared/weather/night-clear.svg new file mode 100644 index 0000000000..d988b15ba1 --- /dev/null +++ b/browser/themes/shared/weather/night-clear.svg @@ -0,0 +1,17 @@ + + + + + diff --git a/browser/themes/shared/weather/night-hazy-moonlight.svg b/browser/themes/shared/weather/night-hazy-moonlight.svg new file mode 100644 index 0000000000..54ea87b240 --- /dev/null +++ b/browser/themes/shared/weather/night-hazy-moonlight.svg @@ -0,0 +1,30 @@ + + + + + + + + + diff --git a/browser/themes/shared/weather/night-mostly-clear.svg b/browser/themes/shared/weather/night-mostly-clear.svg new file mode 100644 index 0000000000..39cb2c22e3 --- /dev/null +++ b/browser/themes/shared/weather/night-mostly-clear.svg @@ -0,0 +1,24 @@ + + + + + + diff --git a/browser/themes/shared/weather/night-mostly-cloudy-with-flurries.svg b/browser/themes/shared/weather/night-mostly-cloudy-with-flurries.svg new file mode 100644 index 0000000000..2417bf56c8 --- /dev/null +++ b/browser/themes/shared/weather/night-mostly-cloudy-with-flurries.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/night-partly-cloudy-with-showers.svg b/browser/themes/shared/weather/night-partly-cloudy-with-showers.svg new file mode 100644 index 0000000000..e63ae59e72 --- /dev/null +++ b/browser/themes/shared/weather/night-partly-cloudy-with-showers.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/night-partly-cloudy-with-thunderstorms.svg b/browser/themes/shared/weather/night-partly-cloudy-with-thunderstorms.svg new file mode 100644 index 0000000000..d301a02ff0 --- /dev/null +++ b/browser/themes/shared/weather/night-partly-cloudy-with-thunderstorms.svg @@ -0,0 +1,31 @@ + + + + + + + diff --git a/browser/themes/shared/weather/partly-sunny-with-flurries.svg b/browser/themes/shared/weather/partly-sunny-with-flurries.svg new file mode 100644 index 0000000000..aeaf0ac59c --- /dev/null +++ b/browser/themes/shared/weather/partly-sunny-with-flurries.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/partly-sunny.svg b/browser/themes/shared/weather/partly-sunny.svg new file mode 100644 index 0000000000..12a253b11c --- /dev/null +++ b/browser/themes/shared/weather/partly-sunny.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + diff --git a/browser/themes/shared/weather/rain.svg b/browser/themes/shared/weather/rain.svg new file mode 100644 index 0000000000..f581c0f5a3 --- /dev/null +++ b/browser/themes/shared/weather/rain.svg @@ -0,0 +1,26 @@ + + + + + + + + diff --git a/browser/themes/shared/weather/showers.svg b/browser/themes/shared/weather/showers.svg new file mode 100644 index 0000000000..829f65f819 --- /dev/null +++ b/browser/themes/shared/weather/showers.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + diff --git a/browser/themes/shared/weather/snow.svg b/browser/themes/shared/weather/snow.svg new file mode 100644 index 0000000000..3bfccfd250 --- /dev/null +++ b/browser/themes/shared/weather/snow.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/sunny.svg b/browser/themes/shared/weather/sunny.svg new file mode 100644 index 0000000000..7a28d4aedd --- /dev/null +++ b/browser/themes/shared/weather/sunny.svg @@ -0,0 +1,17 @@ + + + + + diff --git a/browser/themes/shared/weather/thunderstorms.svg b/browser/themes/shared/weather/thunderstorms.svg new file mode 100644 index 0000000000..d6e1ce099d --- /dev/null +++ b/browser/themes/shared/weather/thunderstorms.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/windy.svg b/browser/themes/shared/weather/windy.svg new file mode 100644 index 0000000000..bc8dccad7c --- /dev/null +++ b/browser/themes/shared/weather/windy.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + diff --git a/browser/themes/shared/webRTC-indicator.css b/browser/themes/shared/webRTC-indicator.css new file mode 100644 index 0000000000..6e6b1166ee --- /dev/null +++ b/browser/themes/shared/webRTC-indicator.css @@ -0,0 +1,346 @@ +/* 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 xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + appearance: none; + background: transparent; + border: 0; + border-radius: 5px; + --indicator-height: 32px; + --indicator-background-color: rgb(249,249,250); + --indicator-color: rgb(12,12,13); + --indicator-border-color: hsla(0,0%,0%,.32); + --indicator-icon-fill-opacity: 0.8; + --indicator-item-separator: 1px solid hsla(210,4%,10%,.14); + --indicator-stop-button-background-color: rgb(0,96,223); + --indicator-stop-button-hover-background-color: rgb(0,62,170); + --indicator-stop-button-color: rgb(255,255,255); + --minimize-button-background-color: hsla(240,5%,5%,.1); + --minimize-button-hover-background-color: hsla(240,5%,5%,.15); + --minimize-button-active-background-color: hsla(240,5%,5%,.2); + --control-icon-unchecked-hover-background-color: hsla(0,0%,70%,.4); + --control-icon-unchecked-active-background-color: hsla(0,0%,70%,.6); + --control-icon-checked-background-color: hsla(10,100%,50%,.16); + --control-icon-checked-icon-fill: rgb(215,0,34); + --control-icon-checked-hover-background-color: hsla(10,100%,50%,.24); + --control-icon-checked-active-background-color: hsla(10,100%,50%,.32); + max-height: var(--indicator-height); +} + +@media (prefers-color-scheme: dark) { + :root { + --indicator-background-color: hsl(240, 1%, 20%); + --indicator-color: rgb(249, 249, 250); + --indicator-border-color: hsl(240, 1%, 40%); + --indicator-item-separator: 1px solid rgb(249, 249, 250); + --minimize-button-background-color: rgba(249,249,250,0.1); + --minimize-button-hover-background-color: rgba(249,249,250,0.15); + --minimize-button-active-background-color: rgba(249,249,250,0.2); + --control-icon-unchecked-hover-background-color: rgba(249,249,250,0.15); + --control-icon-unchecked-active-background-color: rgba(249,249,250,0.2); + --control-icon-checked-background-color: hsla(343,100%,58%,.16); + --control-icon-checked-icon-fill: rgb(255,40,102); + --control-icon-checked-hover-background-color: hsla(343,100%,58%,.24); + --control-icon-checked-active-background-color: hsla(343,100%,58%,.32); + } +} + +body { + display: inline-flex; + background-color: var(--indicator-background-color); + color: var(--indicator-color); + margin: 0; + user-select: none; + -moz-window-dragging: drag; + /** + * On macOS, for windows with small enough dimensions, we seem to get + * vertical scrollbars on the body, even when the contents initially + * fit the window. We sidestep this by making sure we never display + * scrollbars. + */ + overflow: hidden; + cursor: move; + border: 1px solid; + border-color: var(--indicator-border-color); + /* max-height = indicator height minus top and bottom border */ + max-height: calc(var(--indicator-height) - 2px); +} + +button, +input[type="checkbox"] { + appearance: none; + border-style: none; + margin: 0; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: var(--indicator-icon-fill-opacity); + background-repeat: no-repeat; + -moz-window-dragging: no-drag; + color: inherit; +} + +.row-item { + display: flex; + align-items: center; + min-width: 30px; + margin-block: 5px; + margin-inline: 0 5px; + box-sizing: border-box; + padding: 0 5px; +} + +.separator { + border-inline-end: var(--indicator-item-separator); + min-width: 1px; + padding: 0; +} + +/** + * For display sharing, if we happen to be sharing both + * a window and a screen, we want to show the UI for sharing + * the screen, since that's the more privacy-sensitive one. + */ +:root[sharingwindow]:not([sharingscreen]) > body > #display-share > #screen-share-info, +:root[sharingwindow]:not([sharingbrowserwindow]) > body > #display-share > #browser-window-share-info, +:root[sharingwindow][sharingbrowserwindow] > body > #display-share > #window-share-info, +:root[sharingscreen] > body > #display-share > #window-share-info, +:root[sharingscreen] > body > #display-share > #browser-window-share-info, + +/** + * If we're not sharing either the screen or the window, we can + * hide the entire display sharing section. + */ +:root:not([sharingscreen],[sharingwindow]) > body > #display-share, +:root:not([sharingscreen],[sharingwindow]) > body > #display-share + .separator, +:root:not([sharingvideo]) > body > #device-share > #camera-mute-toggle, +:root:not([sharingaudio]) > body > #device-share > #microphone-mute-toggle, +:root:not([sharingvideo],[sharingaudio]) > body > #device-share, +:root:not([sharingvideo],[sharingaudio]) > body > #device-share + .separator { + display:none; +} + +xul|menu { + overflow: hidden; + min-height: 0 !important; + height: 0 !important; + width: 0 !important; + appearance: none !important; + padding: 0 !important; +} + +.control-icon { + background-position: center; + background-size: 16px; + background-color: transparent; + padding: 10px 16px; + border-radius: 5px; +} + +.control-icon + .control-icon { + margin-inline-start: 6px; +} + +.control-icon:hover { + background-color: var(--control-icon-unchecked-hover-background-color); +} + +.control-icon:active { + background-color: var(--control-icon-unchecked-active-background-color); +} + +.control-icon:checked { + background-color: var(--control-icon-checked-background-color); + -moz-context-properties: fill; + fill: var(--control-icon-checked-icon-fill); +} + +.control-icon:checked:hover { + background-color: var(--control-icon-checked-hover-background-color); +} + +.control-icon:checked:active { + background-color: var(--control-icon-checked-active-background-color); +} + +#display-share-icon { + background-image: url("chrome://browser/skin/notification-icons/screen.svg"); + width: 16px; + height: 16px; + margin-inline: 5px 10px; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: var(--indicator-icon-fill-opacity); +} + +#camera-mute-toggle { + background-image: url("chrome://browser/skin/notification-icons/camera.svg"); +} + +#camera-mute-toggle:checked { + background-image: url("chrome://browser/skin/notification-icons/camera-blocked.svg"); +} + +#microphone-mute-toggle { + background-image: url("chrome://browser/skin/notification-icons/microphone.svg"); +} + +#microphone-mute-toggle:checked { + background-image: url("chrome://browser/skin/notification-icons/microphone-blocked.svg"); +} + +.stop-button { + background-color: var(--indicator-stop-button-background-color); + color: var(--indicator-stop-button-color); + border-radius: 5px; + padding: 3px 5px; + margin-inline-start: 15px; +} + +.stop-button:hover { + background-color: var(--indicator-stop-button-hover-background-color); +} + +#window-controls { + display: flex; + flex-direction: column; + align-items: center; +} + +#minimize { + padding: 10px; + min-width: unset; + background-image: url("chrome://browser/skin/notification-icons/minimize.svg"); + background-color: var(--minimize-button-background-color); +} + +#minimize:hover { + background-color: var(--minimize-button-hover-background-color); +} + +#minimize:active { + background-color: var(--minimize-button-active-background-color); +} + +#drag-indicator { + background-image: url("chrome://browser/skin/notification-icons/drag-indicator.svg"); + background-repeat: no-repeat; + background-position: center; + width: 5px; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.4; + margin: 5px; +} + +#webRTC-sharingCamera-menu, +#webRTC-sharingMicrophone-menu, +#webRTC-sharingScreen-menu { + -moz-context-properties: fill; + fill: currentColor; +} + +#webRTC-sharingCamera-menu { + list-style-image: url("chrome://browser/skin/notification-icons/camera.svg"); +} + +#webRTC-sharingMicrophone-menu { + list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg"); +} + +#webRTC-sharingScreen-menu { + list-style-image: url("chrome://browser/skin/notification-icons/screen.svg"); +} + +#webRTC-sharingCamera-menu > menupopup, +#webRTC-sharingMicrophone-menu > menupopup, +#webRTC-sharingScreen-menu > menupopup { + list-style-image: none; /* don't inherit into menu items */ +} + +@media (-moz-platform: macos) { + /** + * On macOS, the ordering of the drag indicator and window controls is reversed + * to be more native. We re-order all items including their separators so that + * the markup and separator hiding and showing logic in the shared CSS file + * doesn't need to be macOS-specific. + */ + #window-controls { + order: 1; + } + + #display-share + .separator { + order: 2; + } + + #display-share { + order: 3; + } + + #device-share + .separator { + order: 4; + } + + #device-share { + order: 5; + } + + #drag-indicator { + order: 6; + } + + /** + * The minimize button on macOS should be circular, and the icon should be + * centered. The asset we have for the minimize icon puts it along the bottom, + * so we manually offset it here. + */ + #minimize { + background-position: center -5px; + padding: 8px; + border: 1px solid transparent; + border-radius: 1000px; + } +} + +@media (-moz-platform: windows) { + @media (-moz-windows-default-theme: 0) { + :root { + --indicator-background-color: -moz-Dialog; + --indicator-color: -moz-DialogText; + --indicator-border-color: InactiveBorder; + --indicator-item-separator: 1px solid ThreeDShadow; + --indicator-stop-button-background-color: hsla(0,0%,70%,.2); + --indicator-stop-button-hover-background-color: hsla(0,0%,70%,.4); + --indicator-stop-button-color: inherit; + --minimize-button-background-color: hsla(0,0%,70%,.2); + --minimize-button-hover-background-color: hsla(0,0%,70%,.4); + --minimize-button-active-background-color: hsla(0,0%,70%,.6); + --control-icon-unchecked-hover-background-color: hsla(0,0%,70%,.2); + --control-icon-unchecked-active-background-color: hsla(0,0%,70%,.6); + --control-icon-checked-background-color: SelectedItem; + --control-icon-checked-icon-fill: SelectedItemText; + --control-icon-checked-hover-background-color: hsla(0,0%,70%,.2); + --control-icon-checked-active-background-color: hsla(0,0%,70%,.6); + } + + #minimize, + .stop-button { + border: 1px outset ThreeDLightShadow; + } + } + + #webRTC-sharingCamera-menu { + list-style-image: url("chrome://browser/skin/notification-icons/camera.png"); + } + + #webRTC-sharingMicrophone-menu { + list-style-image: url("chrome://browser/skin/notification-icons/microphone.png"); + } + + #webRTC-sharingScreen-menu { + list-style-image: url("chrome://browser/skin/notification-icons/screen.png"); + } +} diff --git a/browser/themes/shared/webRTC-legacy-indicator.css b/browser/themes/shared/webRTC-legacy-indicator.css new file mode 100644 index 0000000000..5c6443fba1 --- /dev/null +++ b/browser/themes/shared/webRTC-legacy-indicator.css @@ -0,0 +1,121 @@ +/* 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/. */ + +window { + border: 1px solid #ff9500; +} + +#audioVideoButton, +#screenShareButton, +#firefoxButton { + height: 29px; + margin: 0; + appearance: none; + border-style: none; +} + +#audioVideoButton, +#screenShareButton { + -moz-context-properties: fill; + fill: white; +} + +#firefoxButton { + background-image: url("chrome://branding/content/icon48.png"); + background-repeat: no-repeat; + background-size: 22px; + background-position: center center; + min-width: 29px; + background-color: white; +} + +#firefoxButton:hover { + background-color: #f2f2f2; +} + +#screenShareButton { + background-image: url("chrome://browser/skin/notification-icons/screen.svg"); + background-position: center center; + background-repeat: no-repeat; + background-size: 16px; + min-width: 27px; + display: none; +} + +window[sharingscreen] > #screenShareButton { + display: -moz-box; +} + +#audioVideoButton { + display: none; + background-repeat: no-repeat; +} + +/* When screen sharing, need to pull in the separator: */ +window[sharingscreen] > #audioVideoButton { + margin-right: -1px; +} + +/* Single icon button: */ +window[sharingvideo] > #audioVideoButton, +window[sharingaudio] > #audioVideoButton { + display: -moz-box; + background-position: center center; + background-size: 16px; + min-width: 26px; +} + +window[sharingvideo] > #audioVideoButton { + background-image: url("chrome://browser/skin/notification-icons/camera.svg"); +} + +window[sharingaudio] > #audioVideoButton { + background-image: url("chrome://browser/skin/notification-icons/microphone.svg"); +} + +/* Multi-icon button: */ +window[sharingaudio][sharingvideo] > #audioVideoButton { + background-image: url("chrome://browser/skin/notification-icons/camera.svg"), + url("chrome://browser/skin/notification-icons/microphone.svg"); + background-position: 6px center, 26px center; + background-size: 16px, 16px; + min-width: 46px; +} + +/* Hover styles */ +#audioVideoButton, +#screenShareButton { + background-color: #ffaa33; +} + +#audioVideoButton:hover, +#screenShareButton:hover { + background-color: #ff9500; +} + +/* Don't show the dropmarker for the type="menu" case */ +#audioVideoButton > .box-inherit > .button-menu-dropmarker, +#screenShareButton > .box-inherit > .button-menu-dropmarker { + display: none; +} + +/* Separator in case of screen sharing + video/audio sharing */ +#shareSeparator { + width: 1px; + margin: 4px -1px 4px 0; + background-color: #FFCA80; + /* Separator needs to show above either button when they're hovered: */ + position: relative; + z-index: 1; + display: none; +} + +window[sharingscreen][sharingvideo] > #shareSeparator, +window[sharingscreen][sharingaudio] > #shareSeparator { + display: -moz-box; +} + +:is(#audioVideoButton, #screenShareButton, #firefoxButton):-moz-focusring { + outline: none; +} diff --git a/browser/themes/shared/webRTC-menubar-indicator.css b/browser/themes/shared/webRTC-menubar-indicator.css new file mode 100644 index 0000000000..0183efdef4 --- /dev/null +++ b/browser/themes/shared/webRTC-menubar-indicator.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/. */ + +#webRTC-sharingCamera-menu, +#webRTC-sharingMicrophone-menu, +#webRTC-sharingScreen-menu { + -moz-context-properties: fill; + fill: currentColor; +} + +#webRTC-sharingCamera-menu { + list-style-image: url("chrome://browser/skin/notification-icons/camera.svg"); +} + +#webRTC-sharingMicrophone-menu { + list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg"); +} + +#webRTC-sharingScreen-menu { + list-style-image: url("chrome://browser/skin/notification-icons/screen.svg"); +} + +#webRTC-sharingCamera-menu > menupopup, +#webRTC-sharingMicrophone-menu > menupopup, +#webRTC-sharingScreen-menu > menupopup { + list-style-image: none; /* don't inherit into menu items */ +} diff --git a/browser/themes/test/browser/browser.ini b/browser/themes/test/browser/browser.ini new file mode 100644 index 0000000000..525f4f8f4b --- /dev/null +++ b/browser/themes/test/browser/browser.ini @@ -0,0 +1,3 @@ +[DEFAULT] + +[browser_expireThemes.js] diff --git a/browser/themes/test/browser/browser_expireThemes.js b/browser/themes/test/browser/browser_expireThemes.js new file mode 100644 index 0000000000..64fef950ae --- /dev/null +++ b/browser/themes/test/browser/browser_expireThemes.js @@ -0,0 +1,111 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +const { sinon } = ChromeUtils.import("resource://testing-common/Sinon.jsm"); + +const { XPCOMUtils } = ChromeUtils.importESModule( + "resource://gre/modules/XPCOMUtils.sys.mjs" +); + +const { AddonTestUtils } = ChromeUtils.import( + "resource://testing-common/AddonTestUtils.jsm" +); + +ChromeUtils.defineESModuleGetters(this, { + BuiltInThemes: "resource:///modules/BuiltInThemes.sys.mjs", +}); + +XPCOMUtils.defineLazyModuleGetters(this, { + AddonManager: "resource://gre/modules/AddonManager.jsm", +}); + +const kLushSoftID = "lush-soft-colorway@mozilla.org"; +const kLushBoldID = "lush-bold-colorway@mozilla.org"; +const kRetainedThemesPref = "browser.theme.retainedExpiredThemes"; + +add_task(async function retainExpiredActiveTheme() { + let today = new Date().toISOString().split("T")[0]; + let tomorrow = new Date(); + tomorrow.setDate(tomorrow.getDate() + 1); + tomorrow = tomorrow.toISOString().split("T")[0]; + let config = new Map([ + [ + kLushSoftID, + { + version: "1.1", + path: "resource://builtin-themes/colorways/2021lush/soft/", + expiry: tomorrow, + }, + ], + [ + kLushBoldID, + { + version: "1.1", + path: "resource://builtin-themes/colorways/2021lush/bold/", + expiry: tomorrow, + }, + ], + ]); + const oldBuiltInThemeMap = BuiltInThemes.builtInThemeMap; + BuiltInThemes.builtInThemeMap = config; + Assert.equal( + Services.prefs.getStringPref(kRetainedThemesPref, "[]"), + "[]", + "There are no retained themes." + ); + + AddonTestUtils.initMochitest(this); + registerCleanupFunction(async function() { + Services.prefs.clearUserPref(kRetainedThemesPref); + BuiltInThemes.builtInThemeMap = oldBuiltInThemeMap; + await BuiltInThemes.ensureBuiltInThemes(); + }); + + // Install our test themes and enable Lush (Soft). + await BuiltInThemes.ensureBuiltInThemes(); + let lushSoft = await AddonManager.getAddonByID(kLushSoftID); + let lushBold = await AddonManager.getAddonByID(kLushBoldID); + await lushSoft.enable(); + Assert.ok( + lushSoft && lushSoft.isActive, + "Sanity check: Lush Soft is the active theme." + ); + Assert.ok( + lushBold && !lushBold.isActive, + "Lush Bold is installed but inactive." + ); + + // Now, change the expiry dates on the themes to simulate the expiry date + // passing. + BuiltInThemes.builtInThemeMap.forEach( + themeInfo => (themeInfo.expiry = today) + ); + // Normally, ensureBuiltInThemes uninstalls expired themes. We + // expect it will not uninstall Lush (Soft) since it is the active theme. + await BuiltInThemes.ensureBuiltInThemes(); + lushSoft = await AddonManager.getAddonByID(kLushSoftID); + lushBold = await AddonManager.getAddonByID(kLushBoldID); + Assert.ok( + lushSoft && lushSoft.isActive, + "Lush Soft is still the active theme." + ); + Assert.ok(!lushBold, "Lush Bold has been uninstalled."); + Assert.equal( + Services.prefs.getStringPref(kRetainedThemesPref, "[]"), + JSON.stringify([kLushSoftID]), + "Lush Soft is set as a retained theme." + ); + + // Disable Lush (Soft) and re-run ensureBuiltInThemes. We're checking that + // Lush Soft is not uninstalled despite being inactive and expired, since it + // is a retained theme. + await lushSoft.disable(); + await BuiltInThemes.ensureBuiltInThemes(); + lushSoft = await AddonManager.getAddonByID(kLushSoftID); + Assert.ok( + lushSoft && !lushSoft.isActive, + "Lush Soft is installed but inactive." + ); + + await lushSoft.uninstall(); +}); diff --git a/browser/themes/test/xpcshell/test_BuiltInThemeConfig.js b/browser/themes/test/xpcshell/test_BuiltInThemeConfig.js new file mode 100644 index 0000000000..b6596014c9 --- /dev/null +++ b/browser/themes/test/xpcshell/test_BuiltInThemeConfig.js @@ -0,0 +1,76 @@ +/* Any copyright is dedicated to the Public Domain. +http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const { _applyColorwayConfig, BuiltInThemeConfig } = ChromeUtils.importESModule( + "resource:///modules/BuiltInThemeConfig.sys.mjs" +); + +add_task(async function test_importConfig() { + Assert.ok( + BuiltInThemeConfig, + "Was able to import BuiltInThemeConfig and it is not empty." + ); +}); + +add_task(function test_recoverEmptyHomepage() { + for (let [id, config] of BuiltInThemeConfig.entries()) { + if (id.endsWith("-colorway@mozilla.org")) { + Assert.ok(config.collection, "Colorway theme has collection property."); + Assert.ok(config.expiry, "Colorway theme has expiry date."); + } + } +}); + +add_task(function test_findActiveColorwayCollection() { + // get valid collection name from config + const id = BuiltInThemeConfig.entries().next().value[1].collection; + let collectionsList = [ + new Date("2012-01-01"), + new Date("2012-02-01"), + new Date("2012-03-01"), + new Date("2012-04-01"), + new Date("2012-04-02"), + ].map((expiry, i) => ({ id, expiry, test_id: i + 1 })); + // set all other collection names as expired + for (const [, { collection }] of BuiltInThemeConfig.entries()) { + if (collection != id) { + collectionsList.push({ id: collection, expiry: new Date(0) }); + } + } + _applyColorwayConfig(collectionsList); + Assert.ok( + BuiltInThemeConfig.findActiveColorwayCollection(new Date("2010-01-01")), + "Found active collection" + ); + Assert.equal( + BuiltInThemeConfig.findActiveColorwayCollection(new Date("2015-01-01")), + null, + "Found no active collection" + ); + Assert.equal( + BuiltInThemeConfig.findActiveColorwayCollection(new Date("2011-12-31")) + .test_id, + 1, + "First collection is active" + ); + Assert.equal( + BuiltInThemeConfig.findActiveColorwayCollection(new Date("2012-02-03")) + .test_id, + 3, + "Middle collection is active" + ); + Assert.equal( + BuiltInThemeConfig.findActiveColorwayCollection(new Date("2012-04-02")) + .test_id, + 5, + "Last collection is active" + ); + Assert.equal( + BuiltInThemeConfig.findActiveColorwayCollection(new Date("2012-01-02")) + .test_id, + 2, + "Second collection is active" + ); +}); diff --git a/browser/themes/test/xpcshell/xpcshell.ini b/browser/themes/test/xpcshell/xpcshell.ini new file mode 100644 index 0000000000..59e0276fbd --- /dev/null +++ b/browser/themes/test/xpcshell/xpcshell.ini @@ -0,0 +1,4 @@ +[DEFAULT] +firefox-appdir = browser + +[test_BuiltInThemeConfig.js] diff --git a/browser/themes/windows/browser-aero.css b/browser/themes/windows/browser-aero.css new file mode 100644 index 0000000000..e5ace71f65 --- /dev/null +++ b/browser/themes/windows/browser-aero.css @@ -0,0 +1,341 @@ +/* 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 { + --glass-active-border-color: rgb(37, 44, 51); + --glass-inactive-border-color: rgb(102, 102, 102); + --glass-shadow-color: hsla(240,5%,5%,0.3); +} + +@media (-moz-platform: windows-win7), + (-moz-platform: windows-win8) { + @media (-moz-windows-classic: 0) { + :root[sizemode="normal"] #toolbar-menubar:not([autohide="true"]) > #menubar-items, + :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { + margin-top: 1px; + } + /** + * Except for Windows 8, Windows 7 Aero and Windows 7 Aero Basic, the + * -moz-window-button-box appearance on the .titlebar-buttonbox adds an + * unwanted margin at the top of the button box. + * + * For Windows 8 and Windows Aero (which both use the compositor): + * We want the -moz-window-button-box applied in the restored case, + * and -moz-window-button-box-maximized in the maximized case. + * + * For Windows Aero Basic: + * The margin is also unwanted in the maximized case, but we want + * it in the restored window case. + */ + :root[sizemode="normal"] .titlebar-buttonbox { + appearance: auto; + -moz-default-appearance: -moz-window-button-box; + } + + @media (-moz-windows-compositor) { + :root[sizemode="maximized"] .titlebar-buttonbox { + appearance: auto; + -moz-default-appearance: -moz-window-button-box-maximized; + } + } + } +} + +@media (-moz-windows-compositor) { + @media not (-moz-platform: windows-win7) { + @media not (-moz-platform: windows-win8) { + @media (-moz-windows-default-theme) { + @media (-moz-windows-accent-color-in-titlebar) { + :root[sizemode=normal][tabsintitlebar] #navigator-toolbox { + border-top: .5px solid AccentColor; + } + } + + :root[sizemode=normal][tabsintitlebar]:-moz-window-inactive #navigator-toolbox { + border-top-color: rgb(57,57,57); + } + + :root[tabsintitlebar] .tab-label:-moz-window-inactive { + /* Calculated to match the opacity change of Windows Explorer + titlebar text change for inactive windows. */ + opacity: .6; + } + + :root[tabsintitlebar] .tab-secondary-label:-moz-window-inactive { + opacity: .6; + } + } + + /* See bug 1715990 about why we do this ourselves on HCM */ + @media (prefers-contrast) { + :root[tabsintitlebar]:not(:-moz-lwtheme) { + background-color: ActiveCaption; + color: CaptionText; + } + + :root[tabsintitlebar]:not(:-moz-lwtheme):-moz-window-inactive { + background-color: InactiveCaption; + color: InactiveCaptionText; + } + } + + .titlebar-buttonbox, + .titlebar-button { + appearance: none !important; + } + + .titlebar-button { + border: none; + margin: 0 !important; + padding: 8px 17px; + -moz-context-properties: stroke; + stroke: currentColor; + } + + .titlebar-button > .toolbarbutton-icon { + width: 12px; + height: 12px; + } + + .titlebar-min { + list-style-image: url(chrome://browser/skin/window-controls/minimize.svg); + } + + .titlebar-max { + list-style-image: url(chrome://browser/skin/window-controls/maximize.svg); + } + + .titlebar-restore { + list-style-image: url(chrome://browser/skin/window-controls/restore.svg); + } + + .titlebar-restore > .toolbarbutton-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); + } + + .titlebar-close { + list-style-image: url(chrome://browser/skin/window-controls/close.svg); + } + + :root[lwtheme-image] .titlebar-button { + -moz-context-properties: unset; + } + :root[lwtheme-image] .titlebar-min { + list-style-image: url(chrome://browser/skin/window-controls/minimize-themes.svg); + } + :root[lwtheme-image] .titlebar-max { + list-style-image: url(chrome://browser/skin/window-controls/maximize-themes.svg); + } + :root[lwtheme-image] .titlebar-restore { + list-style-image: url(chrome://browser/skin/window-controls/restore-themes.svg); + } + :root[lwtheme-image] .titlebar-close { + list-style-image: url(chrome://browser/skin/window-controls/close-themes.svg); + } + + /* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which + * rounds up to 13px, which makes the icon one pixel too big on 1.25dppx. Fix: */ + @media (min-resolution: 1.20dppx) and (max-resolution: 1.45dppx) { + .titlebar-button > .toolbarbutton-icon { + width: 11.5px; + height: 11.5px; + } + } + + /* 175% dpi should result in the same device pixel sizes as 150% dpi. */ + @media (min-resolution: 1.70dppx) and (max-resolution: 1.95dppx) { + .titlebar-button { + padding-inline: 14.1px; + } + + .titlebar-button > .toolbarbutton-icon { + width: 10.8px; + height: 10.8px; + } + } + + /* 225% dpi should result in the same device pixel sizes as 200% dpi. */ + @media (min-resolution: 2.20dppx) and (max-resolution: 2.45dppx) { + .titlebar-button { + padding-inline: 15.3333px; + } + + .titlebar-button > .toolbarbutton-icon { + width: 10.8px; + height: 10.8px; + } + } + + /* 275% dpi should result in the same device pixel sizes as 250% dpi. */ + @media (min-resolution: 2.70dppx) and (max-resolution: 2.95dppx) { + /* NB: todo: this should also change padding on the buttons + * themselves, but without a device to test this on, it's + * impossible to know by how much. */ + .titlebar-button > .toolbarbutton-icon { + width: 10.8px; + height: 10.8px; + } + } + + @media (-moz-windows-default-theme) { + #main-menubar > menu[_moz-menuactive="true"] { + color: inherit; + } + + #main-menubar > menu[_moz-menuactive="true"], + .titlebar-button:hover { + background-color: hsla(0,0%,0%,.12); + } + .titlebar-button:hover:active { + background-color: hsla(0,0%,0%,.22); + } + + #toolbar-menubar[brighttext] > #menubar-items > #main-menubar > menu[_moz-menuactive="true"], + toolbar[brighttext] .titlebar-button:not(.titlebar-close):hover { + background-color: hsla(0,0%,100%,.22); + } + toolbar[brighttext] .titlebar-button:not(.titlebar-close):hover:active { + background-color: hsla(0,0%,100%,.32); + } + + .titlebar-close:hover { + stroke: white; + background-color: hsl(355,86%,49%); + } + .titlebar-close:hover:active { + background-color: hsl(355,82%,69%); + } + + .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive { + opacity: 0.5; + } + } + + @media (-moz-windows-default-theme: 0) { + .titlebar-button { + background-color: -moz-field; + stroke: ButtonText; + } + .titlebar-button:hover { + background-color: SelectedItem; + stroke: SelectedItemText; + } + + .titlebar-min { + list-style-image: url(chrome://browser/skin/window-controls/minimize-highcontrast.svg); + } + + .titlebar-max { + list-style-image: url(chrome://browser/skin/window-controls/maximize-highcontrast.svg); + } + + .titlebar-restore { + list-style-image: url(chrome://browser/skin/window-controls/restore-highcontrast.svg); + } + + .titlebar-close { + list-style-image: url(chrome://browser/skin/window-controls/close-highcontrast.svg); + } + } + } + } + + @media (-moz-platform: windows-win7), + (-moz-platform: windows-win8) { + :root { + background-color: transparent; + appearance: auto; + -moz-default-appearance: -moz-win-borderless-glass; + } + + :root[sizemode="maximized"] .titlebar-buttonbox { + margin-inline-end: 3px; + } + + /* These should be hidden w/ glass enabled. Windows draws its own buttons. */ + .titlebar-button { + display: none; + } + + /* The borders on the glass frame are ours, and inside #browser, and on + * win7 we want to make sure they are "glassy", so we can't use #browser + * as the exclude-glass container. We use #appcontent instead. */ + #appcontent { + appearance: auto; + -moz-default-appearance: -moz-win-exclude-glass; + } + } + + @media (-moz-platform: windows-win8) { + /* Artificially draw window borders that are covered by lwtheme, see bug 591930. + * Borders for win7 are below, win10 only needs something like this when + * drawing in the titlebar (-moz-windows-accent-color-in-titlebar). */ + #main-window[sizemode="normal"] #navigator-toolbox:-moz-lwtheme { + border-top: 1px solid var(--glass-shadow-color); + } + } + + :root[darkwindowframe="true"]:not(:-moz-window-inactive, :-moz-lwtheme) { + color: white; + } + + #appcontent:not(:-moz-lwtheme) { + background-color: -moz-dialog; + } +} + +@media (-moz-windows-glass) { + #toolbar-menubar:not(:-moz-lwtheme) { + text-shadow: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255,255,255,.4); + } + + #main-menubar:not(:-moz-lwtheme, :-moz-window-inactive) { + background-color: rgba(255,255,255,.5); + color: black; + border-radius: 4px; + } + + /* Artificially draw window borders that are covered by lwtheme, see bug 591930. + * We use a different border for win8, and this win10+ only needs this if + * drawing in the titlebar (-moz-windows-accent-color-in-titlebar). */ + #main-window[sizemode="normal"] #navigator-toolbox:-moz-lwtheme { + border-top: 1px solid var(--glass-active-border-color); + padding-top: 1px; + box-shadow: 0 1px 0 rgba(255,255,255,.6) inset; + } + + #main-window[sizemode="normal"] #navigator-toolbox:-moz-lwtheme:-moz-window-inactive { + border-top-color: var(--glass-inactive-border-color); + } +} + +/* Aero Basic */ +@media (-moz-windows-compositor: 0) { + @media (-moz-windows-default-theme) { + :root { + background-color: rgb(185,209,234); + } + :root:-moz-window-inactive { + background-color: rgb(215,228,242); + } + + /* Render a window top border for lwthemes: */ + #main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox:-moz-lwtheme { + background-image: linear-gradient(to bottom, + var(--glass-active-border-color) 0, var(--glass-active-border-color) 1px, + rgba(255,255,255,.6) 1px, rgba(255,255,255,.6) 2px, transparent 2px); + } + + #main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox:-moz-lwtheme:-moz-window-inactive { + background-image: linear-gradient(to bottom, + var(--glass-inactive-border-color) 0, var(--glass-inactive-border-color) 1px, + rgba(255,255,255,.6) 1px, rgba(255,255,255,.6) 2px, transparent 2px); + } + } + + #print-preview-toolbar:not(:-moz-lwtheme) { + appearance: auto; + -moz-default-appearance: -moz-win-browsertabbar-toolbox; + } +} diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css new file mode 100644 index 0000000000..c91b0d3ac6 --- /dev/null +++ b/browser/themes/windows/browser.css @@ -0,0 +1,588 @@ +/* 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://browser/skin/browser-shared.css"); +@import url("chrome://browser/skin/contextmenu.css"); +@import url("chrome://browser/skin/browser-custom-colors.css"); + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + --toolbar-non-lwt-bgcolor: color-mix(in srgb, -moz-dialog 85%, white); + --toolbar-non-lwt-textcolor: -moz-dialogtext; + + --panel-separator-color: ThreeDLightShadow; + + --chrome-content-separator-color: ThreeDShadow; +} + +@media (-moz-windows-default-theme) { + :root { + --toolbar-non-lwt-bgcolor: -moz-dialog; + + --panel-separator-color: hsla(210,4%,10%,.14); + } +} + +:root:-moz-lwtheme { + --chrome-content-separator-color: rgba(0,0,0,.3); + + --panel-separator-color: hsla(210,4%,10%,.14); +} + +:root[lwt-popup-brighttext] { + --panel-separator-color: rgba(249,249,250,.1); +} + +#menubar-items { + -moz-box-orient: vertical; /* for flex hack */ +} + +#main-menubar > menu { + appearance: none; + color: inherit; +} + +#main-menubar > menu[_moz-menuactive="true"] { + background-color: -moz-menuhover; + color: -moz-menuhovertext; +} + +/* Use a different color only on Windows 8 and higher in inactive windows. + * On Win 7, the menubar fog disappears for inactive windows, and renders gray + * illegible. + */ +@media (-moz-windows-default-theme) { + @media not (-moz-platform: windows-win7) { + #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive { + color: ThreeDShadow; + } + } +} + +@media not (-moz-platform: windows-win7) { + @media not (-moz-platform: windows-win8) { + /* On Windows 10, when temporarily showing the menu bar, make it at least as + * tall as the tab bar such that the window controls don't appear to move up. */ + :root[tabsintitlebar] #toolbar-menubar[autohide="true"] { + height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size)); + } + :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] { + height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size)); + } + } +} + +/* Add 4px extra margin on top of the tabs toolbar on Windows 7. */ +@media (-moz-platform: windows-win7) { + :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items, + :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { + padding-top: 4px; + } +} + +#navigator-toolbox, +.browser-toolbar { + appearance: none; +} + +.browser-toolbar:not(.titlebar-color) { + background-color: var(--toolbar-bgcolor); + background-clip: padding-box; + color: var(--toolbar-color); +} + +/* Add a fog for background tabs to be visible on Windows 7 glass window background */ +@media (-moz-platform: windows-win7) { + @media (-moz-windows-default-theme) { + #TabsToolbar:not(:-moz-lwtheme) { + background-image: radial-gradient(ellipse at bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.5) 80%, transparent); + } + } +} + +@media (-moz-windows-compositor: 0), + (-moz-windows-default-theme: 0), + (-moz-platform: windows-win8) { + /* Please keep the menu text colors in this media block in sync with + * light-dark-overrides.css, minus the :not(:-moz-lwtheme) condition - see Bug 1165718. + */ + :root[tabsintitlebar]:not(:-moz-lwtheme) { + color: CaptionText; + } + + :root[tabsintitlebar]:not(:-moz-lwtheme):-moz-window-inactive { + color: InactiveCaptionText; + } +} + +@media (-moz-windows-classic) { + /** + * In the classic themes, the titlebar has a horizontal gradient, which is + * problematic for reading the text of background tabs when they're in the + * titlebar. We side-step this issue by layering our own background underneath + * the tabs. + */ + :root[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar:not(:-moz-lwtheme) { + background-image: linear-gradient(transparent, ActiveCaption); + background-size: auto 200%; + } + + :root[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive { + background-image: linear-gradient(transparent, InactiveCaption); + } + + /* Add a window top border for webextension themes */ + :root[tabsintitlebar][sizemode="normal"] #navigator-toolbox:-moz-lwtheme { + background-image: linear-gradient(to bottom, + ThreeDLightShadow 0, ThreeDLightShadow 1px, + ThreeDHighlight 1px, ThreeDHighlight 2px, + ActiveBorder 2px, ActiveBorder 4px, transparent 4px); + } + + :root[tabsintitlebar] :is(#TabsToolbar, #toolbar-menubar) toolbarbutton:not(:-moz-lwtheme) { + color: inherit; + } +} + +#nav-bar:not([tabs-hidden="true"]) { + /* This is needed for some toolbar button animations. Gross :( */ + position: relative; +} + +@media (-moz-windows-default-theme: 0) { + #nav-bar:not(:-moz-lwtheme) { + box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 ThreeDShadow; + } +} +#nav-bar:-moz-lwtheme { + box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--lwt-tabs-border-color, rgba(0,0,0,.3)); +} +@media (-moz-windows-compositor: 0) { + #nav-bar[tabs-hidden="true"] { + box-shadow: none; + } +} + +#print-preview-toolbar:not(:-moz-lwtheme) { + appearance: auto; + -moz-default-appearance: toolbox; +} + +/* Titlebar */ + +:root[tabsintitlebar][sizemode="normal"] #titlebar { + appearance: auto; + -moz-default-appearance: -moz-window-titlebar; +} + +:root[tabsintitlebar][sizemode="maximized"] #titlebar { + appearance: auto; + -moz-default-appearance: -moz-window-titlebar-maximized; +} + +@media (-moz-windows-compositor: 0) { + /** + * Anytime we're not using the compositor on Windows, the -moz-window-titlebar + * and -moz-window-titlebar-maximized values for -moz-appearance override + * backgrounds supplied by lwthemes. We make the #titlebar itself hidden, but + * it's children visible in order to hide the background but keep the margin and + * padding that comes from those -moz-window-titlebar rules. + */ + :root:not([inFullscreen]) #titlebar:-moz-lwtheme { + visibility: hidden; + } + :root:not([inFullscreen], [chromehidden~="menubar"]) #toolbar-menubar:-moz-lwtheme, + :root:not([inFullscreen], [chromehidden~="toolbar"]) #TabsToolbar:-moz-lwtheme { + visibility: visible; + } +} + +@media (-moz-windows-classic) { + :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar { + margin-top: 4px; + } +} + +.titlebar-buttonbox { + /* For all Windows configurations except for Windows Aero and Windows Aero Basic, + * the default -moz-default-appearance of -moz-window-button-box and + * -moz-window-button-box-maximized adds unwanted margins to the button box. We + * special case Windows Aero and Windows Aero Basic in browser-aero.css. + */ + appearance: none; + /* The button box must appear on top of the navigator-toolbox in order for + * click and hover mouse events to work properly for the button in the restored + * window state. Otherwise, elements in the navigator-toolbox, like the menubar, + * can swallow those events. It will also place the buttons above the fog on + * Windows 7 with Aero Glass. + */ + z-index: 1; +} + +.titlebar-buttonbox-container { + -moz-box-align: stretch; +} + +@media (-moz-platform: windows-win7), + (-moz-platform: windows-win8) { + /* Preserve window control buttons position at the top of the button box. */ + .titlebar-buttonbox-container { + -moz-box-align: start; + } +} + +/* Window control buttons */ + +.titlebar-min { + appearance: auto; + -moz-default-appearance: -moz-window-button-minimize; +} + +.titlebar-max { + appearance: auto; + -moz-default-appearance: -moz-window-button-maximize; +} + +.titlebar-restore { + appearance: auto; + -moz-default-appearance: -moz-window-button-restore; +} + +.titlebar-close { + appearance: auto; + -moz-default-appearance: -moz-window-button-close; +} + +@media (-moz-windows-classic: 0) { + .titlebar-min { + margin-inline-end: 2px; + } +} + +:root[tabletmode] .titlebar-min, +:root[tabletmode] .titlebar-restore, +:root[tabletmode] .titlebar-max { + display: none; +} + +/* Bookmark menus */ + +menu.bookmark-item, +menuitem.bookmark-item { + min-width: 0; + max-width: 32em; +} + +.bookmark-item:not(.subviewbutton) > .menu-iconic-left { + margin-block: 0; +} + +.bookmark-item[cutting] > .toolbarbutton-icon, +.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon { + opacity: 0.5; +} + +.bookmark-item[cutting] > .toolbarbutton-text, +.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text { + opacity: 0.7; +} + + +/* Address bar */ + +@media not (prefers-contrast) { + :root:not(:-moz-lwtheme) #urlbar { + --urlbar-box-bgcolor: white; + } + :root[lwt-default-theme-in-dark-mode] #urlbar { + --urlbar-box-bgcolor: var(--toolbar-field-focus-background-color); + } +} + +#urlbar, +#searchbar { + font-size: 1.15em; +} + +@supports -moz-bool-pref("browser.urlbar.experimental.expandTextOnFocus") { + #urlbar[breakout-extend] { + font-size: 1.25em; + } +} + +@media (-moz-windows-default-theme: 0) { + /* Windows HCM conventions use these colors for chiclets. We can't use them on + other platforms because AccentColor can be shown atop SelectedItem, + which has zero contrast. */ + :root { + --urlbar-box-hover-bgcolor: SelectedItem; + --urlbar-box-active-bgcolor: SelectedItem; + --urlbar-box-hover-text-color: SelectedItemText; + } + + #urlbar:not(:-moz-lwtheme, [focused="true"]) > #urlbar-background, + #searchbar:not(:-moz-lwtheme, :focus-within) { + border-color: ThreeDShadow; + } +} + +/* Address bar results view */ + +@media (-moz-windows-default-theme: 0) { + :root:not(:-moz-lwtheme) { + --urlbar-popup-action-color: -moz-nativehyperlinktext; + } +} + +/* Autocomplete */ + +#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] { + border-top: 1px solid ThreeDShadow; +} + +/* Content area */ + +#browser { + --sidebar-border-color: ThreeDLightShadow; +} + +/* Tabstrip */ + +#TabsToolbar { + min-height: 0; + padding: 0; +} + +@media (-moz-windows-default-theme: 0) { + /* For high contrast themes. */ + #tabbrowser-tabpanels, + :root[privatebrowsingmode=temporary] #tabbrowser-tabpanels { + background-color: -moz-default-background-color; + } +} + +/* All tabs menupopup */ + +.alltabs-item[selected="true"] { + font-weight: bold; +} + +toolbarbutton.bookmark-item[dragover="true"][open="true"] { + appearance: none; + background: SelectedItem !important; + color: SelectedItemText !important; + fill: SelectedItemText; +} + +/* Bookmarks roots menu-items */ + +#bookmarksToolbarFolderMenu, +#BMB_bookmarksToolbar, +#panelMenu_bookmarksToolbar { + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg"); + -moz-image-region: auto; +} + +/* Status panel */ + +#statuspanel-label { + margin: 0; + padding: 2px 4px; + background-color: -moz-dialog; + border: 1px none ThreeDLightShadow; + border-top-style: solid; + color: -moz-dialogText; + text-shadow: none; +} + +@media (-moz-windows-default-theme) { + #statuspanel-label { + background-color: #f9f9fa; + color: #444; + } +} + +@media (-moz-content-prefers-color-scheme: dark) { + #statuspanel-label { + background-color: hsl(240, 1%, 20%); + border-color: hsl(240, 1%, 40%); + color: rgb(249, 249, 250); + } +} + +#statuspanel:not([mirror]) > #statuspanel-label:-moz-locale-dir(ltr), +#statuspanel[mirror] > #statuspanel-label:-moz-locale-dir(rtl) { + border-right-style: solid; + /* disabled for triggering grayscale AA (bug 659213) + border-top-right-radius: .3em; + */ + margin-right: 1em; +} + +#statuspanel:not([mirror]) > #statuspanel-label:-moz-locale-dir(rtl), +#statuspanel[mirror] > #statuspanel-label:-moz-locale-dir(ltr) { + border-left-style: solid; + /* disabled for triggering grayscale AA (bug 659213) + border-top-left-radius: .3em; + */ + margin-left: 1em; +} + +/* Prevent window controls from overlapping the nav bar's shadow on the tab + * bar. */ +#TabsToolbar > .titlebar-buttonbox-container { + margin-bottom: var(--tabs-navbar-shadow-size); +} + +.private-browsing-indicator { + margin-inline: 12px; +} + +#UITourTooltipButtons { + /** + * Override the --arrowpanel-padding so the background extends + * to the sides and bottom of the panel. + */ + margin-inline: -10px; + margin-bottom: -10px; +} + +/* Make menu items larger when opened through touch. */ +panel[touchmode], +menupopup[touchmode] { + --arrowpanel-menuitem-padding-block: 12px; + --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline); +} + +menupopup[touchmode] :is(menu, menuitem, menucaption) { + /* Use the var set in the rule above to increase menu items height in menupopups when + * they are opened through touch. + * Panel menu items already have their padding set in panelUI-shared.css with the same var. */ + padding-block: var(--arrowpanel-menuitem-padding-block); +} + +#contentAreaContextMenu[touchmode] > #context-navigation > menuitem { + /* The navigation menuitems are bigger to begin with because of their inner padding, + * so calculate the padding-block to match normal menuitems height when in touchmode. + * 3.5em is the desired menuitem height (~42px), minus the menuitem actual height devided by 2. */ + padding-block: calc((3.5em - 32px) / 2); +} + +#context-navigation { + background-color: menu; +} + +#context-sep-navigation { + margin-inline-start: -28px; +} + +@media (-moz-windows-non-native-menus) { + /* :not([hidden]) to avoid the display: flex unhiding the item. */ + #context-navigation:not([hidden]) { + /* The Windows 10 version of the navigation area needs the scrollbox's + background color, not the builtin "menu" color. */ + background-color: inherit; + /* Match the inner top padding of the menupopup to center the icons visually. */ + padding-bottom: 4px; + /* Use modern flex box so we can use percentage widths to redistribute + * spacing manually. */ + display: flex; + flex-direction: row; + /* We want the first and last icons to align with the text items which + * have 1em inline padding, and for icons to be centered within their + * hover state, so each icon of 16px needs 1em padding on both sides: + */ + --menuitem-min-width: calc(2em + 16px); + /* The total width of the container should then be at least 4 times that: */ + min-width: calc(4 * var(--menuitem-min-width)); + } + + #context-navigation > .menuitem-iconic { + flex: 1 0 auto; + } + + #context-navigation > .menuitem-iconic[_moz-menuactive="true"] { + /* We only show hover state on the icons. This ensures there is no + * dead space between icons, but the visible hover state is only + * around the icons, and all the icons' hover states match each other. + */ + background-color: transparent; + } + + #context-navigation > .menuitem-iconic > .menu-iconic-left { + margin: 0; + padding: 0; + } + + /* override styles from shared/contextmenu.inc.css */ + #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { + width: var(--menuitem-min-width); + height: 32px; + padding: 8px 1em; + margin: 0; + } + #context-navigation > .menuitem-iconic[_moz-menuactive="true"] > .menu-iconic-left > .menu-iconic-icon { + background-color: -moz-menuhover; + } + + #context-navigation > .menuitem-iconic[_moz-menuactive="true"][disabled="true"] > .menu-iconic-left > .menu-iconic-icon { + background-color: -moz-menuhoverdisabled; + } + + /* If the menu is wider than the icons strictly need, the elements + * will stretch to pick up the extra space. In that case, the outer icons + * should align to the start/end of their containing : */ + #context-navigation > .menuitem-iconic:first-child { + -moz-box-pack: start; + } + + #context-navigation > .menuitem-iconic:last-child { + -moz-box-pack: end; + } + + #context-navigation > .menuitem-iconic:last-child, + #context-navigation > .menuitem-iconic:first-child { + flex-grow: 0; + /* The first and last items start off as 16px + 2em, like the other ones. + * 100% is the width of the parent, which will be at least 4 * the width of + * an individual item (16px + 2em) + * So 100% - 4 item widths gets us the remaining available space if + * #context-navigation is wider than that. + * Then divide by 6 to get the 1/6 of that extra space, and add this space + * to the width of the first/last items. + * This ensures that the 3 visual gaps between the 4 icons are all the same + * size, with each 1/3 of the available space evenly distributed between + * the 2 items on either side of the gap. + */ + width: calc(var(--menuitem-min-width) + calc(100% - 4 * var(--menuitem-min-width)) / 6); + } + + + /* Other menu separators don't extend all the way to the menu edges, but the + one below the navigation buttons in the content context menu should. */ + #context-sep-navigation { + margin-top: 0; + margin-inline: 0; + } +} + +#historySwipeAnimationPreviousArrow { + background: url("chrome://browser/skin/history-swipe-arrow.svg") + center left / 192px 192px no-repeat transparent; + will-change: transform; + -moz-context-properties: fill; +} +#historySwipeAnimationPreviousArrow:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} +#historySwipeAnimationNextArrow { + background: url("chrome://browser/skin/history-swipe-arrow.svg") + center left / 192px 192px no-repeat transparent; + will-change: transform; + -moz-context-properties: fill; +} +#historySwipeAnimationNextArrow:-moz-locale-dir(ltr) { + transform: scaleX(-1); +} diff --git a/browser/themes/windows/customizableui/panelUI.css b/browser/themes/windows/customizableui/panelUI.css new file mode 100644 index 0000000000..fc5f683dbe --- /dev/null +++ b/browser/themes/windows/customizableui/panelUI.css @@ -0,0 +1,26 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import "chrome://browser/skin/customizableui/panelUI-shared.css"; + +/* bookmark panel submenus */ + +menupopup::part(drop-indicator) { + /* To account for the shadow margin + border of the panel */ + margin-inline-start: 5px; +} + +toolbarbutton menupopup[placespopup] { + --nested-margin: calc(-1 * (var(--arrowpanel-menuitem-padding-inline) + var(--panel-shadow-margin))); +} + +@media not (-moz-windows-non-native-menus) { + toolbarbutton menupopup[placespopup] { + --panel-shadow-margin: 4px; + } + + toolbarbutton menupopup[placespopup] menupopup[placespopup] { + margin-inline-start: var(--nested-margin); + } +} diff --git a/browser/themes/windows/downloads/allDownloadsView.css b/browser/themes/windows/downloads/allDownloadsView.css new file mode 100644 index 0000000000..77db61d972 --- /dev/null +++ b/browser/themes/windows/downloads/allDownloadsView.css @@ -0,0 +1,63 @@ +/* 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 "chrome://browser/skin/downloads/allDownloadsView.inc.css"; + +/*** List items ***/ + +@media (-moz-windows-default-theme) { + .downloadProgress::-moz-progress-bar { + background-color: #3c9af8; + } + + .downloadProgress[paused]::-moz-progress-bar { + background-color: #a6a6a6; + } +} + +/*** Highlighted list items ***/ + +@media (-moz-windows-default-theme) { + /* + -moz-default-appearance: menuitem is almost right, but the hover effect is not + transparent and is lighter than desired. + + Copied from the autocomplete richlistbox styling in + toolkit/themes/windows/global/autocomplete.css + + This styling should be kept in sync with the style from the above file. + */ + #downloadsListBox:focus > richlistitem[selected] { + color: inherit; + background-color: transparent; + /* four gradients for the bevel highlights on each edge, one for blue background */ + background-image: + linear-gradient(to bottom, rgba(255,255,255,0.9) 3px, transparent 3px), + linear-gradient(to right, rgba(255,255,255,0.5) 3px, transparent 3px), + linear-gradient(to left, rgba(255,255,255,0.5) 3px, transparent 3px), + linear-gradient(to top, rgba(255,255,255,0.4) 3px, transparent 3px), + linear-gradient(to bottom, rgba(163,196,247,0.3), rgba(122,180,246,0.3)); + background-clip: content-box; + border-radius: 6px; + outline: 1px solid rgb(124,163,206); + outline-offset: -2px; + } +} + +/*** Progress bars ***/ + +@media (prefers-contrast) { + .downloadProgress { + background-color: -moz-Dialog; + border: 1px solid ButtonText; + } + + .downloadProgress::-moz-progress-bar { + --download-progress-fill-color: SelectedItem; + } + + #downloadsListBox richlistitem[selected] .downloadProgress::-moz-progress-bar { + --download-progress-fill-color: ButtonText; + } +} diff --git a/browser/themes/windows/downloads/downloads.css b/browser/themes/windows/downloads/downloads.css new file mode 100644 index 0000000000..2cc4b26195 --- /dev/null +++ b/browser/themes/windows/downloads/downloads.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/. */ + +@import "chrome://browser/skin/downloads/downloads.inc.css"; + +/*** Panel and outer controls ***/ + +#downloadsHistory { + border: 0; +} + +/*** List items and similar elements in the summary ***/ + +:root { + --downloads-item-height: 5.5em; + --downloads-item-font-size-factor: 0.9; + --downloads-item-details-opacity: 0.6; + --downloads-item-disabled-opacity: 0.6; +} + +/*** Progress bars ***/ + +@media (prefers-contrast) { + .downloadProgress { + background-color: -moz-Dialog; + border: 1px solid ButtonText; + } + + .downloadProgress::-moz-progress-bar { + --download-progress-fill-color: SelectedItem; + } +} diff --git a/browser/themes/windows/jar.mn b/browser/themes/windows/jar.mn new file mode 100644 index 0000000000..4c6069180e --- /dev/null +++ b/browser/themes/windows/jar.mn @@ -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/. + +browser.jar: +% skin browser classic/1.0 %skin/classic/browser/ +#include ../shared/jar.inc.mn + skin/classic/browser/sanitizeDialog.css + skin/classic/browser/browser.css + skin/classic/browser/browser-custom-colors.css (../shared/browser-custom-colors.css) + skin/classic/browser/browser-aero.css + skin/classic/browser/contextmenu.css (../shared/contextmenu.css) + skin/classic/browser/monitor-base.png + skin/classic/browser/monitor-border.png + skin/classic/browser/pageInfo.css + skin/classic/browser/pageInfo.png + skin/classic/browser/webRTC-legacy-indicator.css (../shared/webRTC-legacy-indicator.css) + skin/classic/browser/customizableui/panelUI.css (customizableui/panelUI.css) + skin/classic/browser/downloads/allDownloadsView.css (downloads/allDownloadsView.css) + skin/classic/browser/downloads/downloads.css (downloads/downloads.css) + skin/classic/browser/notification-icons/camera.png (notification-icons/camera.png) + skin/classic/browser/notification-icons/microphone.png (notification-icons/microphone.png) + skin/classic/browser/notification-icons/screen.png (notification-icons/screen.png) + skin/classic/browser/places/organizer.css (places/organizer.css) + skin/classic/browser/preferences/alwaysAsk.png (preferences/alwaysAsk.png) + skin/classic/browser/preferences/application.png (preferences/application.png) + skin/classic/browser/preferences/saveFile.png (preferences/saveFile.png) + skin/classic/browser/preferences/applications.css (preferences/applications.css) + skin/classic/browser/window-controls/close.svg (window-controls/close.svg) + skin/classic/browser/window-controls/close-highcontrast.svg (window-controls/close-highcontrast.svg) + skin/classic/browser/window-controls/close-themes.svg (window-controls/close-themes.svg) + skin/classic/browser/window-controls/maximize.svg (window-controls/maximize.svg) + skin/classic/browser/window-controls/maximize-highcontrast.svg (window-controls/maximize-highcontrast.svg) + skin/classic/browser/window-controls/maximize-themes.svg (window-controls/maximize-themes.svg) + skin/classic/browser/window-controls/minimize.svg (window-controls/minimize.svg) + skin/classic/browser/window-controls/minimize-highcontrast.svg (window-controls/minimize-highcontrast.svg) + skin/classic/browser/window-controls/minimize-themes.svg (window-controls/minimize-themes.svg) + skin/classic/browser/window-controls/restore.svg (window-controls/restore.svg) + skin/classic/browser/window-controls/restore-highcontrast.svg (window-controls/restore-highcontrast.svg) + skin/classic/browser/window-controls/restore-themes.svg (window-controls/restore-themes.svg) + skin/classic/browser/e10s-64@2x.png (../shared/e10s-64@2x.png) + skin/classic/browser/history-swipe-arrow.svg (../shared/swipe-gesture-icons/history-swipe-arrow.svg) diff --git a/browser/themes/windows/monitor-base.png b/browser/themes/windows/monitor-base.png new file mode 100644 index 0000000000..45a2410217 Binary files /dev/null and b/browser/themes/windows/monitor-base.png differ diff --git a/browser/themes/windows/monitor-border.png b/browser/themes/windows/monitor-border.png new file mode 100644 index 0000000000..f05dcb7839 Binary files /dev/null and b/browser/themes/windows/monitor-border.png differ diff --git a/browser/themes/windows/moz.build b/browser/themes/windows/moz.build new file mode 100644 index 0000000000..20e4e3af75 --- /dev/null +++ b/browser/themes/windows/moz.build @@ -0,0 +1,9 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +JAR_MANIFESTS += ["jar.mn"] + +DEFINES["MENUBAR_CAN_AUTOHIDE"] = 1 diff --git a/browser/themes/windows/notification-icons/camera.png b/browser/themes/windows/notification-icons/camera.png new file mode 100644 index 0000000000..110f3e4728 Binary files /dev/null and b/browser/themes/windows/notification-icons/camera.png differ diff --git a/browser/themes/windows/notification-icons/microphone.png b/browser/themes/windows/notification-icons/microphone.png new file mode 100644 index 0000000000..e0fceee6f7 Binary files /dev/null and b/browser/themes/windows/notification-icons/microphone.png differ diff --git a/browser/themes/windows/notification-icons/screen.png b/browser/themes/windows/notification-icons/screen.png new file mode 100644 index 0000000000..3620c87135 Binary files /dev/null and b/browser/themes/windows/notification-icons/screen.png differ diff --git a/browser/themes/windows/pageInfo.css b/browser/themes/windows/pageInfo.css new file mode 100644 index 0000000000..265384b2fa --- /dev/null +++ b/browser/themes/windows/pageInfo.css @@ -0,0 +1,178 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import "chrome://global/skin/global.css"; +@namespace html url("http://www.w3.org/1999/xhtml"); + +#topBar { + -moz-window-dragging: drag; + border-bottom: 1px solid ThreeDLightShadow; + padding-inline-start: 10px; + background-color: Field; + color: FieldText; +} + +/* View buttons */ +#viewGroup { + padding-inline-start: 10px; +} + +#viewGroup > radio { + list-style-image: url("chrome://browser/skin/pageInfo.png"); + appearance: none; + min-width: 4.5em; + margin: 0; + padding: 3px; +} + +#viewGroup > radio:hover { + background-color: #E0E8F6; + color: black; +} + +#viewGroup > radio[selected="true"] { + background-color: #C1D2EE; + color: black; +} + +#viewGroup > radio > .radio-label-box { + margin: 0; + padding: 0 6px; +} + +#viewGroup:focus-visible > radio[focused="true"] > .radio-label-box { + outline: var(--default-focusring); +} + +#generalTab { + -moz-image-region: rect(0px, 32px, 32px, 0px) +} + +#generalTab:hover, +#generalTab[selected="true"] { + -moz-image-region: rect(32px, 32px, 64px, 0px) +} + +#mediaTab { + -moz-image-region: rect(0px, 64px, 32px, 32px) +} + +#mediaTab:hover, +#mediaTab[selected="true"] { + -moz-image-region: rect(32px, 64px, 64px, 32px) +} + +#permTab { + -moz-image-region: rect(0px, 128px, 32px, 96px) +} + +#permTab:hover, +#permTab[selected="true"] { + -moz-image-region: rect(32px, 128px, 64px, 96px) +} + +#securityTab { + -moz-image-region: rect(0px, 160px, 32px, 128px) +} + +#securityTab:hover, +#securityTab[selected="true"] { + -moz-image-region: rect(32px, 160px, 64px, 128px) +} + +/* Misc */ +tree { + margin: .5em; +} + +html|input { + background: transparent; + border: none; + padding: 0; +} + +html|input.header { + margin-inline-start: 0; +} + +#imagecontainerbox { + margin: .5em; + background: white; + overflow: auto; + border: 1px solid ThreeDLightShadow; +} + +html|input:disabled { + font-style: italic; +} + +/* General Tab */ + +#securityBox description { + margin-inline-start: 10px; +} + +#general-security-identity { + white-space: pre-wrap; + line-height: 2em; +} + +/* Media Tab */ +#imagetree { + min-height: 10em; + margin-bottom: 0; +} + +#mediaSplitter { + border-style: none; + background: none; + height: .8em; +} + +#mediaTable { + margin-bottom: 2em; +} + +#mediaLabelColumn { + min-width: 10em; +} + +#thepreviewimage { + margin: 1em; +} + +treechildren::-moz-tree-cell-text(broken) { + font-style: italic; + color: graytext; +} + +/* Permissions Tab */ +#permList { + margin: .5em; + overflow: auto; + appearance: auto; + -moz-default-appearance: listbox; + color: FieldText; +} + +.permission { + padding: 6px 7px; + min-height: 25px; + border-bottom: 1px dotted ThreeDShadow; +} + +.permissionLabel { + font-weight: bold; +} + +.permission:hover { + background-color: -moz-dialog; + color: -moz-dialogText; +} + +/* Security Tab */ + +#securityPanel table { + margin-bottom: 1em; +} diff --git a/browser/themes/windows/pageInfo.png b/browser/themes/windows/pageInfo.png new file mode 100644 index 0000000000..684342f451 Binary files /dev/null and b/browser/themes/windows/pageInfo.png differ diff --git a/browser/themes/windows/places/organizer.css b/browser/themes/windows/places/organizer.css new file mode 100644 index 0000000000..86736bcafb --- /dev/null +++ b/browser/themes/windows/places/organizer.css @@ -0,0 +1,401 @@ +/* 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 { + --organizer-color: -moz-DialogText; + --organizer-deemphasized-color: GrayText; + + --organizer-toolbar-background: -moz-Dialog; + --organizer-pane-background: -moz-Dialog; + --organizer-content-background: -moz-Dialog; + + --organizer-hover-background: SelectedItem; + --organizer-hover-color: SelectedItemText; + --organizer-selected-background: SelectedItem; + --organizer-selected-color: SelectedItemText; + --organizer-outline-color: SelectedItem; + + --organizer-separator-color: ThreeDDarkShadow; + --organizer-border-color: ThreeDShadow; + + --organizer-toolbar-field-background: Field; + --organizer-toolbar-field-background-focused: Field; + --organizer-toolbar-field-border-color: ThreeDShadow; + --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color); + --organizer-toolbar-field-focus-box-shadow: unset; + --organizer-pane-field-border-color: ThreeDShadow; +} + +@media not (prefers-contrast) { + :root { + --organizer-color: rgb(21,20,26); + --organizer-deemphasized-color: rgb(91,91,102); + + --organizer-toolbar-background: rgb(249,249,251); + --organizer-pane-background: rgb(240,240,244); + --organizer-content-background: white; + + --organizer-hover-background: rgba(207,207,216,.66); + --organizer-hover-color: var(--organizer-color); + --organizer-selected-background: rgb(207,207,216); + --organizer-selected-color: var(--organizer-color); + --organizer-outline-color: rgb(0,97,224); + + --organizer-separator-color: var(--organizer-pane-field-border-color); + --organizer-border-color: ThreeDLightShadow; + + --organizer-toolbar-field-background: rgb(240,240,244); + --organizer-toolbar-field-background-focused: Field; + --organizer-toolbar-field-border-color: transparent; + --organizer-toolbar-field-focus-border-color: color-mix(in srgb, var(--organizer-outline-color) 50%, transparent); + --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23); + --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent); + } + + @media (prefers-color-scheme: dark) { + :root { + --organizer-color: rgb(251,251,254); + --organizer-deemphasized-color: rgb(191,191,201); + + --organizer-toolbar-background: rgb(43,42,51); + --organizer-pane-background: rgb(35,34,43); + --organizer-content-background: rgb(28,27,34); + + --organizer-hover-background: rgb(82,82,94); + --organizer-selected-background: rgb(91,91,102); + --organizer-outline-color: rgb(0,221,255); + + --organizer-toolbar-field-background: rgb(28,27,34); + --organizer-toolbar-field-background-focused: rgb(66,65,77); + scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3); + } + } +} + +/* Toolbar and menus */ + +#placesToolbar { + appearance: none; + background-color: var(--organizer-toolbar-background); + color: var(--organizer-color); + border-bottom: 1px solid var(--organizer-border-color); + padding: 4px; + padding-inline-end: 6px; +} + +#placesToolbar > toolbarbutton { + appearance: none; + padding: 5px; + border-radius: 4px; +} + +#placesToolbar > toolbarbutton[disabled] { + opacity: .6; +} + +#placesToolbar > toolbarbutton:not([disabled]):hover { + background-color: var(--organizer-hover-background); + color: var(--organizer-hover-color); +} + +#placesToolbar > toolbarbutton:not([disabled]):hover:active { + background-color: var(--organizer-selected-background); +} + +#placesToolbar > toolbarbutton > .toolbarbutton-icon, +#placesMenu > menu > image, +#placesMenu > menu > .menubar-text { + -moz-context-properties: fill; + fill: currentColor; +} + +#placesMenu { + margin-inline-start: 6px; +} + +#placesMenu > menu { + appearance: none; + color: var(--organizer-color); + border-radius: 4px; + padding-block: 5px; + padding-inline-start: 5px; + margin-inline-end: 2px; +} + +#placesMenu > menu:hover { + background-color: var(--organizer-hover-background); + color: var(--organizer-hover-color); +} + +#placesMenu > menu:hover:active, +#placesMenu > menu[open] { + background-color: var(--organizer-selected-background); + color: var(--organizer-selected-color); +} + +#placesMenu > menu > .menubar-text { + margin-block: 0 !important; /* override menu.css */ + padding-inline-end: 8px; + background: url(chrome://global/skin/icons/arrow-down-12.svg) right center no-repeat; + background-size: 6px; +} + +#placesMenu > menu > .menubar-text:-moz-locale-dir(rtl) { + background-position-x: left; +} + +/* Toolbar icons */ + +#back-button { + list-style-image: url("chrome://browser/skin/back.svg"); +} + +#forward-button { + list-style-image: url("chrome://browser/skin/forward.svg"); +} + +#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { + transform: scaleX(-1); +} + +#organizeButton { + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} + +#viewMenu { + list-style-image: url("chrome://browser/skin/sort.svg"); +} + +#maintenanceButton { + list-style-image: url("chrome://browser/skin/import-export.svg"); +} + +/* Search bar */ + +#searchFilter { + appearance: none; + background-color: var(--organizer-toolbar-field-background); + color: var(--organizer-color); + border: 1px solid var(--organizer-toolbar-field-border-color); + border-radius: 4px; + margin: 0; + padding-block: 2px; + min-height: 24px; +} + +#searchFilter[focused] { + box-shadow: var(--organizer-toolbar-field-focus-box-shadow); + background-color: var(--organizer-toolbar-field-background-focused); + border-color: transparent; + outline: 2px solid var(--organizer-toolbar-field-focus-border-color); + outline-offset: -2px; +} + +/* Sidebar and splitter */ + +#placesList { + background-color: var(--organizer-pane-background); +} + +#placesView > splitter { + border: 0; + border-inline-end: 1px solid var(--organizer-border-color); + min-width: 0; + width: 3px; + background-color: transparent; + margin-inline-start: -3px; + position: relative; +} + +/* Downloads pane */ + +#downloadsListBox { + color: var(--organizer-color); + background-color: var(--organizer-content-background); +} + +#clearDownloadsButton:focus-visible { + outline: 2px solid var(--organizer-outline-color); +} + +/* Tree */ + +#contentView treecol { + /* Use box-shadow to draw a bottom border instead of border-bottom + * because otherwise the items on contentView won't be perfectly + * aligned with the items on the sidebar. */ + box-shadow: inset 0 -1px var(--organizer-border-color) +} + +tree { + background-color: var(--organizer-content-background); + color: var(--organizer-color); +} + +treechildren::-moz-tree-row { + background-color: transparent; +} + +treechildren::-moz-tree-row(hover) { + background-color: var(--organizer-hover-background); +} + +treechildren::-moz-tree-row(selected) { + background-color: var(--organizer-selected-background); + color: var(--organizer-selected-color); + border: 1px solid transparent; +} + +treechildren::-moz-tree-image(hover), +treechildren::-moz-tree-twisty(hover), +treechildren::-moz-tree-cell-text(hover) { + color: var(--organizer-hover-color); +} + +treechildren::-moz-tree-image(selected), +treechildren::-moz-tree-twisty(selected), +treechildren::-moz-tree-cell-text(selected) { + color: var(--organizer-selected-color); +} + +treechildren::-moz-tree-separator { + height: 1px; + border-color: var(--organizer-separator-color); +} + +treechildren::-moz-tree-separator(hover) { + border-color: var(--organizer-hover-color); +} + +treechildren::-moz-tree-separator(selected) { + border-color: var(--organizer-selected-color); +} + +/* Info box */ +#infoBox:not([hidden="true"]) { + display: block; +} + +#editBookmarkPanelContent { + grid-template-columns: auto 1fr; +} + +#editBookmarkPanelContent .caption-label:not([hidden="true"]) { + display: block; + grid-column: 2; +} + +#editBookmarkPanelContent label { + align-self: center; +} + +#editBMPanel_itemsCountText { + grid-column: auto / span 2; + justify-self: center; +} + +#editBMPanel_tagsSelectorRow { + grid-column: auto / span 2; +} + +#detailsPane { + background-color: var(--organizer-pane-background); + color: var(--organizer-color); + height: 16em; + padding: 5px; + border-top: 1px solid var(--organizer-border-color); +} + +#editBookmarkPanelContent .expander-up, +#editBookmarkPanelContent .expander-down { + appearance: none; + min-width: 0; + padding: 5px; + margin: 0; + margin-inline-end: 4px; + border: 1px solid var(--organizer-pane-field-border-color); + border-radius: 4px; + color: var(--organizer-color); + background-color: var(--organizer-content-background); + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +#editBookmarkPanelContent .expander-up:hover, +#editBookmarkPanelContent .expander-down:hover { + background-color: var(--organizer-hover-background); + color: var(--organizer-hover-color); +} + +#editBookmarkPanelContent .expander-up:hover:active, +#editBookmarkPanelContent .expander-down:hover:active { + background-color: var(--organizer-selected-background); + color: var(--organizer-selected-color); +} + +#editBookmarkPanelContent .expander-up:focus-visible, +#editBookmarkPanelContent .expander-down:focus-visible { + outline: 2px solid var(--organizer-outline-color); + outline-offset: -1px; +} + +#editBookmarkPanelContent .expander-up { + list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg"); +} + +#editBookmarkPanelContent .expander-up > .button-box, +#editBookmarkPanelContent .expander-down > .button-box { + padding: 0; +} + +#places input { + border: 1px solid var(--organizer-pane-field-border-color); + border-radius: 4px; + background-color: var(--organizer-content-background); + color: var(--organizer-color); + min-height: 20px; + padding-inline: 4px; +} + +#places input:focus { + outline: 2px solid var(--organizer-outline-color); + outline-offset: -1px; +} + +#places input:not(:read-write):focus { + outline: none; +} + +.caption-label { + margin-inline-start: 8px; + color: var(--organizer-deemphasized-color); +} + +#editBookmarkPanelContent input { + margin: 4px; +} + +#editBMPanel_tagsSelector { + appearance: none; + color: var(--organizer-color); + background-color: var(--organizer-content-background); + border: 1px solid var(--organizer-border-color); + border-radius: 4px; +} + +#editBMPanel_tagsSelector > richlistitem { + border: 1px solid transparent; +} + +#editBMPanel_tagsSelector > richlistitem:hover { + background-color: var(--organizer-hover-background); + color: var(--organizer-hover-color); +} + +#editBMPanel_tagsSelector > richlistitem[selected] { + background-color: var(--organizer-selected-background); + color: var(--organizer-selected-color); +} diff --git a/browser/themes/windows/preferences/alwaysAsk.png b/browser/themes/windows/preferences/alwaysAsk.png new file mode 100644 index 0000000000..b394da070b Binary files /dev/null and b/browser/themes/windows/preferences/alwaysAsk.png differ diff --git a/browser/themes/windows/preferences/application.png b/browser/themes/windows/preferences/application.png new file mode 100644 index 0000000000..da3689e917 Binary files /dev/null and b/browser/themes/windows/preferences/application.png differ diff --git a/browser/themes/windows/preferences/applications.css b/browser/themes/windows/preferences/applications.css new file mode 100644 index 0000000000..2ff372d9e7 --- /dev/null +++ b/browser/themes/windows/preferences/applications.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/. */ + +richlistitem[appHandlerIcon="handleInternally"], +menuitem[appHandlerIcon="handleInternally"] { + list-style-image: url("chrome://branding/content/icon32.png"); +} + +richlistitem[appHandlerIcon="ask"], +menuitem[appHandlerIcon="ask"] { + list-style-image: url("chrome://browser/skin/preferences/alwaysAsk.png"); +} + +richlistitem[appHandlerIcon="save"], +menuitem[appHandlerIcon="save"] { + list-style-image: url("chrome://browser/skin/preferences/saveFile.png"); +} + +richlistitem[appHandlerIcon="plugin"], +menuitem[appHandlerIcon="plugin"] { + list-style-image: url("chrome://global/skin/icons/plugin.svg"); +} + +#appList { + min-height: 212px; +} + +#appList > richlistitem { + -moz-box-align: center; +} + +#appList > richlistitem > image { + margin: 5px; + width: 32px; + height: 32px; +} + +#appList > richlistitem > label { + margin: 0px; + padding: 5px; + white-space: nowrap; +} diff --git a/browser/themes/windows/preferences/saveFile.png b/browser/themes/windows/preferences/saveFile.png new file mode 100644 index 0000000000..a1089af09b Binary files /dev/null and b/browser/themes/windows/preferences/saveFile.png differ diff --git a/browser/themes/windows/sanitizeDialog.css b/browser/themes/windows/sanitizeDialog.css new file mode 100644 index 0000000000..dbe51cf157 --- /dev/null +++ b/browser/themes/windows/sanitizeDialog.css @@ -0,0 +1,16 @@ +/* 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/. */ + +#sanitizeDurationChoice { + margin-inline-end: 0; +} + +/* Align the duration label with the warning box and item list */ +#sanitizeDurationLabel { + margin-inline-start: 3px; +} + +#sanitizeEverythingWarningIcon { + list-style-image: url("chrome://global/skin/icons/warning-large.png"); +} diff --git a/browser/themes/windows/window-controls/close-highcontrast.svg b/browser/themes/windows/window-controls/close-highcontrast.svg new file mode 100644 index 0000000000..b37b28a28b --- /dev/null +++ b/browser/themes/windows/window-controls/close-highcontrast.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/windows/window-controls/close-themes.svg b/browser/themes/windows/window-controls/close-themes.svg new file mode 100644 index 0000000000..e6eac2fc55 --- /dev/null +++ b/browser/themes/windows/window-controls/close-themes.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/windows/window-controls/close.svg b/browser/themes/windows/window-controls/close.svg new file mode 100644 index 0000000000..9d0a252357 --- /dev/null +++ b/browser/themes/windows/window-controls/close.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/windows/window-controls/maximize-highcontrast.svg b/browser/themes/windows/window-controls/maximize-highcontrast.svg new file mode 100644 index 0000000000..48ea6166f3 --- /dev/null +++ b/browser/themes/windows/window-controls/maximize-highcontrast.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/windows/window-controls/maximize-themes.svg b/browser/themes/windows/window-controls/maximize-themes.svg new file mode 100644 index 0000000000..5740a992ae --- /dev/null +++ b/browser/themes/windows/window-controls/maximize-themes.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/windows/window-controls/maximize.svg b/browser/themes/windows/window-controls/maximize.svg new file mode 100644 index 0000000000..e9cc939af3 --- /dev/null +++ b/browser/themes/windows/window-controls/maximize.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/windows/window-controls/minimize-highcontrast.svg b/browser/themes/windows/window-controls/minimize-highcontrast.svg new file mode 100644 index 0000000000..2ba29a839d --- /dev/null +++ b/browser/themes/windows/window-controls/minimize-highcontrast.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/windows/window-controls/minimize-themes.svg b/browser/themes/windows/window-controls/minimize-themes.svg new file mode 100644 index 0000000000..d74f16bdbc --- /dev/null +++ b/browser/themes/windows/window-controls/minimize-themes.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/windows/window-controls/minimize.svg b/browser/themes/windows/window-controls/minimize.svg new file mode 100644 index 0000000000..7ffa1fecbb --- /dev/null +++ b/browser/themes/windows/window-controls/minimize.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/windows/window-controls/restore-highcontrast.svg b/browser/themes/windows/window-controls/restore-highcontrast.svg new file mode 100644 index 0000000000..f2cdfa8a9c --- /dev/null +++ b/browser/themes/windows/window-controls/restore-highcontrast.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/windows/window-controls/restore-themes.svg b/browser/themes/windows/window-controls/restore-themes.svg new file mode 100644 index 0000000000..e3c92f58a2 --- /dev/null +++ b/browser/themes/windows/window-controls/restore-themes.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/windows/window-controls/restore.svg b/browser/themes/windows/window-controls/restore.svg new file mode 100644 index 0000000000..80b71b178d --- /dev/null +++ b/browser/themes/windows/window-controls/restore.svg @@ -0,0 +1,7 @@ + + + + + -- cgit v1.2.3