From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 7 Apr 2024 21:33:14 +0200 Subject: Adding upstream version 115.7.0esr. Signed-off-by: Daniel Baumann --- browser/themes/BuiltInThemeConfig.sys.mjs | 490 +++++ browser/themes/BuiltInThemes.sys.mjs | 307 +++ 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 | 414 ++++ 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 | 25 + 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.png | Bin 0 -> 8438 bytes browser/themes/linux/places/organizer.css | 141 ++ 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 | 46 + browser/themes/osx/browser.css | 391 ++++ browser/themes/osx/customizableui/panelUI.css | 68 + browser/themes/osx/downloads/allDownloadsView.css | 15 + browser/themes/osx/downloads/downloads.css | 12 + browser/themes/osx/jar.mn | 23 + 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/places/organizer.css | 232 +++ 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 + 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 | 59 + .../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 | 240 +++ .../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 | 191 ++ browser/themes/shared/blockedSite.css | 71 + browser/themes/shared/browser-custom-colors.css | 63 + browser/themes/shared/browser-shared.css | 1062 +++++++++++ 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 | 846 ++++++++ .../shared/controlcenter/tracking-protection.svg | 6 + browser/themes/shared/ctrlTab.css | 123 ++ .../themes/shared/customizableui/customizeMode.css | 638 +++++++ .../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 | 2016 ++++++++++++++++++++ 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 | 266 +++ browser/themes/shared/downloads/downloads.svg | 7 + browser/themes/shared/downloads/indicator.css | 209 ++ .../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/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/translations.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 | 121 ++ .../themes/shared/incontent-icons/tab-crashed.svg | 13 + browser/themes/shared/jar.inc.mn | 277 +++ browser/themes/shared/light-dark-overrides.css | 110 ++ browser/themes/shared/menupanel.css | 27 + .../shared/migration/migration-dialog-window.css | 9 + .../themes/shared/migration/migration-wizard.css | 334 ++++ browser/themes/shared/migration/progress-mask.svg | 7 + .../themes/shared/migration/safari-icon-3dots.svg | 7 + browser/themes/shared/migration/success.svg | 6 + browser/themes/shared/notification-icons.css | 382 ++++ .../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/pageInfo.css | 237 +++ 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 | 160 ++ browser/themes/shared/places/editBookmarkPanel.css | 212 ++ browser/themes/shared/places/folder-smart.svg | 6 + browser/themes/shared/places/organizer-shared.css | 19 + 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 + .../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 | 1548 +++++++++++++++ browser/themes/shared/preferences/privacy.css | 346 ++++ 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 | 500 +++++ 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/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 | 802 ++++++++ browser/themes/shared/toolbar-drag-indicator.svg | 4 + browser/themes/shared/toolbarbutton-icons.css | 470 +++++ browser/themes/shared/toolbarbuttons.css | 340 ++++ browser/themes/shared/translations/panel.css | 92 + browser/themes/shared/update-badge.svg | 6 + browser/themes/shared/urlbar-dynamic-results.css | 544 ++++++ browser/themes/shared/urlbar-searchbar.css | 837 ++++++++ browser/themes/shared/urlbarView.css | 943 +++++++++ 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 | 106 + browser/themes/windows/browser-aero.css | 341 ++++ browser/themes/windows/browser.css | 569 ++++++ 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 | 40 + 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.png | Bin 0 -> 7850 bytes browser/themes/windows/places/organizer.css | 425 +++++ 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 + 586 files changed, 30460 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.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/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/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/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/translations.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-window.css create mode 100644 browser/themes/shared/migration/migration-wizard.css create mode 100644 browser/themes/shared/migration/progress-mask.svg create mode 100644 browser/themes/shared/migration/safari-icon-3dots.svg create mode 100644 browser/themes/shared/migration/success.svg 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/pageInfo.css 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/organizer-shared.css 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/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/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/translations/panel.css 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/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.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..7cfea4b705 --- /dev/null +++ b/browser/themes/BuiltInThemeConfig.sys.mjs @@ -0,0 +1,490 @@ +/* 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", + }, + }, + ], + [ + "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", + }, + }, + ], + [ + "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", + }, + }, + ], + [ + "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", + }, + }, + ], + [ + "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", + }, + }, + ], + [ + "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", + }, + }, + ], + [ + "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", + }, + }, + ], + [ + "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", + }, + }, + ], + [ + "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", + }, + }, + ], + [ + "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", + }, + }, + ], + [ + "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", + }, + }, + ], + [ + "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", + }, + }, + ], + [ + "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", + }, + }, + ], + [ + "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", + }, + }, + ], + [ + "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", + }, + }, + ], + [ + "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", + }, + }, + ], + [ + "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", + }, + }, + ], + [ + "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", + }, + }, + ], +]); + +const ColorwayCollections = [ + { + id: "life-in-color", + expiry: "2022-02-08", + }, + { + id: "true-colors", + expiry: "2022-05-03", + }, + { + id: "independent-voices", + expiry: "2023-01-17", + }, +]; + +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, + }); + } + } +} + +_applyColorwayConfig(ColorwayCollections); diff --git a/browser/themes/BuiltInThemes.sys.mjs b/browser/themes/BuiltInThemes.sys.mjs new file mode 100644 index 0000000000..b3d634deaa --- /dev/null +++ b/browser/themes/BuiltInThemes.sys.mjs @@ -0,0 +1,307 @@ +/* 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, { + AddonManager: "resource://gre/modules/AddonManager.sys.mjs", + BuiltInThemeConfig: "resource:///modules/BuiltInThemeConfig.sys.mjs", +}); + +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; + } + + /** + * 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(); + 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 + ) + ); + } + } + + 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) { + let shouldRetain = true; + + try { + let addon = await lazy.AddonManager.getAddonByID(id); + if (addon) { + // Only add the id to the retain themes pref if it is + // also a built-in themes (and don't if it was migrated + // xpi files installed in the user profile). + shouldRetain = addon.isBuiltinColorwayTheme; + } + } catch (e) { + console.error( + `Failed to retrieve active theme AddonWrapper ${id}`, + e + ); + } + + if (shouldRetain) { + this._retainLimitedTimeTheme(id); + } + } else { + try { + let addon = await lazy.AddonManager.getAddonByID(id); + // Only uninstall the expired colorways theme if they are not + // migrated builtins (because on migrated to xpi files + // installed in the user profile they are also removed + // from the retainedExpiredThemes pref). + if (addon?.isBuiltinColorwayTheme) { + await addon.uninstall(); + } + } catch (e) { + console.error(`Failed to uninstall expired theme ${id}`, e); + } + } + } + } + + /** + * 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) + ); + } + } + + /** + * 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..05a25e1391 --- /dev/null +++ b/browser/themes/addons/alpenglow/manifest.json @@ -0,0 +1,139 @@ +{ + "manifest_version": 2, + + "browser_specific_settings": { + "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..57e97174ef --- /dev/null +++ b/browser/themes/addons/dark/manifest.json @@ -0,0 +1,97 @@ +{ + "manifest_version": 2, + + "browser_specific_settings": { + "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..a0de205327 --- /dev/null +++ b/browser/themes/addons/light/manifest.json @@ -0,0 +1,98 @@ +{ + "manifest_version": 2, + + "browser_specific_settings": { + "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..9763db72ad --- /dev/null +++ b/browser/themes/linux/browser.css @@ -0,0 +1,414 @@ +/* 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; + + --chrome-content-separator-color: ThreeDShadow; +} + +:root:not(:-moz-lwtheme), +toolbar[brighttext]:not(:-moz-lwtheme) { + --tab-attention-icon-color: AccentColor; +} + +:root:-moz-lwtheme { + --chrome-content-separator-color: rgba(0,0,0,.3); +} + +#menubar-items { + flex-direction: column; /* 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; +} + +#titlebar { + background-color: ActiveCaption; + color: CaptionText; +} + +#titlebar:-moz-window-inactive { + background-color: InactiveCaption; + color: InactiveCaptionText; +} + +#TabsToolbar, +#toolbar-menubar, +#main-menubar, +#titlebar:-moz-lwtheme { + appearance: none; + background-color: transparent; + color: inherit; +} + +#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] #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] #titlebar { + /* Use the toolbox background */ + background-color: transparent; + } + + :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)); + } + + /* 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; + align-items: 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; + order: env(-moz-gtk-csd-minimize-button-position); + } + .titlebar-max { + appearance: auto; + -moz-default-appearance: -moz-window-button-maximize; + order: env(-moz-gtk-csd-maximize-button-position); + } + .titlebar-restore { + appearance: auto; + -moz-default-appearance: -moz-window-button-restore; + order: env(-moz-gtk-csd-maximize-button-position); + } + .titlebar-close { + appearance: auto; + -moz-default-appearance: -moz-window-button-close; + order: 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 { + order: -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..91aca8b853 --- /dev/null +++ b/browser/themes/linux/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/contextmenu.css (../shared/contextmenu.css) + skin/classic/browser/monitor-base.png + skin/classic/browser/monitor-border.png + 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) 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.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..406801b4a6 --- /dev/null +++ b/browser/themes/linux/places/organizer.css @@ -0,0 +1,141 @@ +/* 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/. */ + +#placesList { + width: 200px; + min-width: 100px; + max-width: 400px; +} + +/* Toolbar */ + +@media (-moz-menubar-drag) { + #placesToolbar { + -moz-window-dragging: drag; + } +} + +/* 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 { + display: flex; + 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, +.expander-up, +.expander-down { + 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 { + min-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..ac4e863600 --- /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 { + align-items: 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..ea51211f90 --- /dev/null +++ b/browser/themes/moz.build @@ -0,0 +1,46 @@ +# -*- 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", +] + +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..4c1f29f890 --- /dev/null +++ b/browser/themes/osx/browser.css @@ -0,0 +1,391 @@ +/* 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; + + --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] { + --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: flex; + appearance: auto; + -moz-default-appearance: toolbox; + height: 1px; + margin-top: -1px; + opacity: 0.001; +} + +/** Begin titlebar **/ + +#titlebar { + /* Centrally align content items vertically */ + justify-content: center; +} + +.titlebar-button { + display: none; +} + +.titlebar-buttonbox-container { + align-items: 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; + align-items: 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. */ + +/**** 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 */ + align-items: 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; +} + +#UITourTooltipDescription { + font-size: 1.18rem; + line-height: 2rem; +} + +#UITourTooltipClose { + margin-inline-end: -10px; + margin-top: -14px; +} diff --git a/browser/themes/osx/customizableui/panelUI.css b/browser/themes/osx/customizableui/panelUI.css new file mode 100644 index 0000000000..678343bf1a --- /dev/null +++ b/browser/themes/osx/customizableui/panelUI.css @@ -0,0 +1,68 @@ +/* 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, +#translations-panel, +#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..e7b3760cf6 --- /dev/null +++ b/browser/themes/osx/jar.mn @@ -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/. + +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/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) 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/places/organizer.css b/browser/themes/osx/places/organizer.css new file mode 100644 index 0000000000..b7f85662a7 --- /dev/null +++ b/browser/themes/osx/places/organizer.css @@ -0,0 +1,232 @@ +/* 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; + min-width: 100px; + max-width: 400px; +} + +#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); + min-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..4a483525f6 --- /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 { + align-items: 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/shared/UITour.css b/browser/themes/shared/UITour.css new file mode 100644 index 0000000000..cd8524017f --- /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 { + align-items: flex-start; +} + +#UITourTooltipTitleContainer { + align-items: flex-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 { + justify-content: flex-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..31d4e05fda --- /dev/null +++ b/browser/themes/shared/addon-notification.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"); + +.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; +} + +.addon-webext-perm-text-multiline { + margin-top: 1em; + white-space: pre-line; +} + +.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..029061a7cb --- /dev/null +++ b/browser/themes/shared/addons/unified-extensions.css @@ -0,0 +1,240 @@ +/* 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)); +} + +#unified-extensions-view { + width: var(--menu-panel-width-wide); +} + +/* Align extensions rendered with custom elements. */ +unified-extensions-item { + display: flex; + align-items: center; +} + +unified-extensions-item > .subviewbutton { + flex-shrink: 1; +} + +#unified-extensions-panel .unified-extensions-item { + -moz-context-properties: fill; + fill: currentColor; + /* Have some spacing between items in the panel; mainly useful for when HCM is enabled. */ + margin-block: 2px !important; /* override panelUI-shared.css */ +} + +.unified-extensions-item > .subviewbutton { + margin: 0; +} + +/* 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. */ +.unified-extensions-item[attention] > .unified-extensions-item-action-button.toolbarbutton-1 > .toolbarbutton-badge-stack, +.unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton { + 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, +.unified-extensions-item[attention] > .unified-extensions-item-action-button.toolbarbutton-1 > .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-item[attention] > .unified-extensions-item-action-button.subviewbutton { + 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-item[attention] > .unified-extensions-item-action-button.subviewbutton:-moz-locale-dir(rtl) { + background-position-x: right var(--uei-dot-horizontal-position-in-panel); +} + +.unified-extensions-item-action-button { + flex: 1; + overflow: hidden; +} + +/* 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-icon, +.unified-extensions-item .webextension-browser-action.subviewbutton > .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, +.unified-extensions-item .webextension-browser-action.subviewbutton > .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; + word-break: break-word; +} + +.unified-extensions-item-message { + color: var(--text-color-deemphasized); +} + +.unified-extensions-item-menu-button.subviewbutton { + list-style-image: url("chrome://global/skin/icons/settings.svg"); + /* subtract the child's ~1px border from the block padding */ + padding: calc(var(--arrowpanel-menuitem-margin-inline) - 1px) + var(--arrowpanel-menuitem-margin-inline); + padding-inline-end: 0; + border-radius: 0; + /* override panelUI-shared.css */ + background-color: transparent !important; + box-shadow: none !important; + outline: none !important; +} + +/* Hide subview label. */ +.unified-extensions-item .toolbarbutton-text { + display: none !important; /* override panelUI-shared.css */ +} + +.unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon { + box-sizing: content-box; + padding: var(--arrowpanel-menuitem-padding-inline); + border: 1px solid transparent; + border-radius: var(--arrowpanel-menuitem-border-radius); +} + +/* Background color, outline, and shadow on the icon to allow the clickable + * padding on the button to remain invisible */ +.unified-extensions-item-menu-button.subviewbutton:hover > .toolbarbutton-icon { + background-color: var(--uei-button-hover-bgcolor); +} + +.unified-extensions-item-menu-button.subviewbutton:hover:active > .toolbarbutton-icon { + background-color: var(--uei-button-active-bgcolor); + box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset; +} + +.unified-extensions-item-menu-button.subviewbutton:focus-visible > .toolbarbutton-icon { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +/* --- warning messages --- */ + +#unified-extensions-messages-container { + margin: var(--arrowpanel-menuitem-margin); +} + +.unified-extensions-message-bar { + padding-bottom: 2px; +} + +/* Stack each child in the message bar. */ +.unified-extensions-message-bar > * { + display: inline-block; + padding-block: 1px; +} + +/* Hide the menu button and the unified extensions content when the extension + * item is placed on the toolbar. */ +.unified-extensions-item-menu-button.toolbarbutton-1, +.unified-extensions-item-action-button.toolbarbutton-1 > .unified-extensions-item-contents { + display: none; +} + +/* --- browser action CUI widget styles in the extensions panel --- */ + +@media (prefers-contrast) { + :root:not(:-moz-lwtheme) { + --uei-button-attention-dot-color: ButtonText; + } + + .unified-extensions-item-action-button.subviewbutton:not([disabled], :-moz-lwtheme), + .unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon:not(:-moz-lwtheme) { + 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-item-action-button[disabled].subviewbutton:not(:-moz-lwtheme) { + background-color: Canvas; + color: GrayText !important; /* override panelUI-shared.css */ + opacity: 1 !important; /* override panelUI-shared.css */ + } + + .unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton:hover:not(:-moz-lwtheme) { + --uei-button-attention-dot-color: ButtonFace; + } + + .unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton:hover:active:not(:-moz-lwtheme) { + --uei-button-attention-dot-color: ButtonText; + } + + .unified-extensions-item-message:not(:-moz-lwtheme) { + color: inherit; + } + + .unified-extensions-item > .unified-extensions-item-action-button.subviewbutton:hover:not([disabled], :-moz-lwtheme), + .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:hover > .toolbarbutton-icon:not(:-moz-lwtheme) { + background-color: var(--uei-button-hover-bgcolor); + color: var(--uei-button-hover-color); + border-color: var(--uei-button-hover-bgcolor); + } + + .unified-extensions-item > .unified-extensions-item-action-button.subviewbutton:hover:active:not([disabled], :-moz-lwtheme), + .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:hover:active > .toolbarbutton-icon:not(:-moz-lwtheme) { + background-color: var(--uei-button-active-bgcolor); + color: var(--uei-button-active-color); + border-color: var(--uei-button-active-color); + } + + .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:focus-visible > .toolbarbutton-icon:not(:-moz-lwtheme) { + /* The border would otherwise overlap with the focus outline, causing an + * unsightly anti-aliasing artifact */ + border-color: transparent; + } +} 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..5830e5f528 --- /dev/null +++ b/browser/themes/shared/autocomplete.css @@ -0,0 +1,191 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace 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-login-item { + display: flex; + justify-content: center; + align-items: center; + width: 100%; +} + +#PopupAutoComplete > richlistbox > richlistitem > .ac-login-item > .ac-settings-button { + visibility: hidden; + height: 16px; + width: 16px; + border: 0; + -moz-context-properties: fill; + fill: currentColor; + margin-inline: 8px; + cursor: pointer; + background: url("chrome://global/skin/icons/settings.svg") center no-repeat; +} + +#PopupAutoComplete > richlistbox > richlistitem:is(:hover, [selected]) > .ac-login-item > .ac-settings-button { + visibility: visible; +} + +#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; + gap: 8px; + margin: 0; + min-width: 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; + /* min-width is needed to get the text-overflow: ellipsis to work for the children */ + min-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..b9c336f832 --- /dev/null +++ b/browser/themes/shared/browser-custom-colors.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/. */ + +@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-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..983aae77e5 --- /dev/null +++ b/browser/themes/shared/browser-shared.css @@ -0,0 +1,1062 @@ +/* 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/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-separator-color: color-mix(in srgb, currentColor 25%, transparent); + --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: max(32px, 1.4em); + --urlbar-icon-fill-opacity: 0.9; + --urlbar-icon-padding: calc((var(--urlbar-min-height) - 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); + + user-select: none; +} + +: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); + --panel-separator-color: currentColor; + --urlbar-icon-fill-opacity: 1; + --checkbox-checked-border-color: var(--checkbox-checked-bgcolor); + } +} + +:root[uidensity=compact] { + --urlbar-min-height: max(26px, 1.4em); +} + +:root[uidensity=touch] { + --urlbar-min-height: max(34px, 1.4em); +} + +: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 */ + +:is(toolbar, panel) :is(a, .text-link):-moz-lwtheme { + color: #0060df; +} + +toolbar[brighttext] :is(a, .text-link):-moz-lwtheme, +:root[lwt-popup-brighttext] panel :is(a, .text-link) { + color: var(--lwt-brighttext-url-color); +} + +/* 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. */ + min-width: 0; + min-height: 0; + max-width: 100%; + max-height: 100%; +} + +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-bgcolor); + color: var(--toolbar-color); + border-top-color: var(--chrome-content-separator-color, ThreeDShadow); +} + +.browserContainer > findbar:-moz-lwtheme { + background-color: var(--lwt-accent-color); + background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images); + background-repeat: no-repeat, var(--lwt-background-tiling); + background-position: right bottom, var(--lwt-background-alignment); + background-position-y: bottom !important; +} + +:root:not([lwtheme-image]) .browserContainer > findbar:-moz-lwtheme:-moz-window-inactive { + background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); +} + +:root[lwtheme-image] .browserContainer > findbar { + background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image), var(--lwt-additional-images); + background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling); + background-position: center, right bottom, var(--lwt-background-alignment); +} + +/* 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 { + align-items: 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 { + color-scheme: light; + --arrowpanel-background: Field; + --arrowpanel-color: FieldText; +} + +/* stylelint-disable-next-line media-feature-name-no-unknown */ +@media (-moz-content-prefers-color-scheme: dark) and (not (prefers-contrast)) { + #DateTimePickerPanel { + color-scheme: dark; + } +} + +#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 .cfr-doorhanger-medium-icon { + width: 50px; + height: 50px; + 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; +} + +#contextual-feature-recommendation-notification[data-notification-category="addon_recommendation"] .popup-notification-description > b { + font-weight: 300; + padding-inline-start: 5px; +} + +#contextual-feature-recommendation-notification[data-notification-category="addon_recommendation"] #cfr-notification-footer-learn-more-link { + margin-inline-start: 5px; +} + +#contextual-feature-recommendation-notification[data-notification-category="addon_recommendation"] #cfr-notification-header-image { + display: none; +} + +#contextual-feature-recommendation-notification[data-notification-category="addon_recommendation"] #cfr-notification-header-label { + margin-block-end: 9px; +} + +/* + * `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; +} + +#historySwipeAnimationPreviousArrow, +#historySwipeAnimationNextArrow { + will-change: transform; +} + +#historySwipeAnimationPreviousArrow:-moz-locale-dir(rtl), +#historySwipeAnimationNextArrow:-moz-locale-dir(ltr) { + transform: scaleX(-1); +} + +#historySwipeAnimationPreviousArrow > svg, +#historySwipeAnimationNextArrow > svg { + margin: auto 0; +} + +#historySwipeAnimationPreviousArrow, +#historySwipeAnimationNextArrow { + --swipe-nav-icon-primary-color: #0060DF; + --swipe-nav-icon-accent-color: #FFFFFF; +} + +@media (-moz-content-prefers-color-scheme: dark) { + #historySwipeAnimationPreviousArrow, + #historySwipeAnimationNextArrow { + --swipe-nav-icon-primary-color: #00DDFF; + --swipe-nav-icon-accent-color: #000000; + } +} + +@media (prefers-contrast) { + #historySwipeAnimationPreviousArrow, + #historySwipeAnimationNextArrow { + --swipe-nav-icon-primary-color: SelectedItemText; + --swipe-nav-icon-accent-color: SelectedItem; + } +} + +/* + * Styles for the swipe navigation SVG icon. + */ +.swipe-nav-icon path { + transition: fill 1s; +} + +@media not (-moz-platform: macos) { + /* + * Styles for the swipe navigation SVG icon. + * + * `will-navigate` class name is added to the element when the user's + * swipe gesture reached to the point where history navigation will be + * triggered. It's used for triggering three animations, an arrow color change, + * a circle color change and a glowing effect outer the circle. + */ + .swipe-nav-icon circle { + fill: var(--swipe-nav-icon-accent-color); + stroke: var(--swipe-nav-icon-primary-color); + } + + .swipe-nav-icon circle:first-of-type { + fill: var(--swipe-nav-icon-primary-color); + transition: opacity 1s; + will-change: opacity; /* a workaround for bug 1804189 */ + opacity: 0; + } + + .swipe-nav-icon.will-navigate > circle:not(:first-of-type) { + fill: var(--swipe-nav-icon-primary-color); + } + + .swipe-nav-icon circle:not(:first-of-type) { + transition: fill 1s; + } + + .swipe-nav-icon.will-navigate > circle:first-of-type { + transition-delay: 0.2s; + opacity: 0.2; + } + + .swipe-nav-icon.will-navigate > circle:not(:first-of-type) { + fill: var(--swipe-nav-icon-primary-color); + } + + .swipe-nav-icon path { + fill: var(--swipe-nav-icon-primary-color); + } + + .swipe-nav-icon.will-navigate > path { + fill: var(--swipe-nav-icon-accent-color); + stroke: var(--swipe-nav-icon-accent-color); + } +} + +@media (-moz-platform: macos) { + /* + * Styles for the swipe navigation SVG icon. + * + * `will-navigate` class name is added to the element when the user's + * swipe gesture reached to the point where history navigation will be + * triggered. + */ + .swipe-nav-icon-circle-outline, + .swipe-nav-icon-arrow { + fill: var(--swipe-nav-icon-primary-color); + } + .swipe-nav-icon-circle { + fill: var(--swipe-nav-icon-accent-color); + } + .swipe-nav-icon.will-navigate > .swipe-nav-icon-circle-outline, + .swipe-nav-icon.will-navigate > .swipe-nav-icon-arrow { + fill: var(--swipe-nav-icon-accent-color); + } + .swipe-nav-icon.will-navigate > .swipe-nav-icon-circle { + fill: var(--swipe-nav-icon-primary-color); + } +} + +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; +} + +/* Picture-in-Picture panel */ +#PictureInPicturePanel { + width: var(--menu-panel-width-wide); + font: caption; +} + +#PictureInPicturePanelBody { + gap: 8px; + padding: 8px 16px; +} + +#PictureInPicturePanelFooter { + margin: 8px 16px 16px; +} diff --git a/browser/themes/shared/contextmenu.css b/browser/themes/shared/contextmenu.css new file mode 100644 index 0000000000..41dfb5f6cb --- /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 { + flex: 1; + justify-content: center; + align-items: 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..d2aa77331c --- /dev/null +++ b/browser/themes/shared/controlcenter/panel.css @@ -0,0 +1,846 @@ +/* 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 { + width: 11em; + margin: 0.5em 0; +} + +#identity-popup-security-httpsonlymode-info { + font-size: 0.85em; + color: var(--text-color-deemphasized); +} + +#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); +} + +#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(--text-color-deemphasized); +} + +/* 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 > .identity-popup-warning-box > label { + display: inline-block; +} + +#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); + } +} + +#identity-popup-content-verifier-unknown > label { + display: inline; +} + +/* 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; + resize: vertical; +} + +.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 { + align-items: center; + justify-content: center; +} + +.protections-popup-empty-label { + color: var(--text-color-deemphasized); +} + +.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(--text-color-deemphasized); + 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(--text-color-deemphasized); +} + +.protections-popup-section-header { + color: var(--text-color-deemphasized); +} + +: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(--text-color-deemphasized); +} + +#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; + min-width: auto; + margin: 0; + margin-inline-start: 2px; + border-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(:focus-visible):hover { + background-color: var(--button-hover-bgcolor); +} + +.permission-popup-permission-remove-button:not(:focus-visible):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-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 { + justify-content: center; +} + +.protections-popup-switch-section-header { + min-height: 40px; +} + +.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(--text-color-deemphasized); +} + +.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; +} + +.permission-popup-section { + padding-bottom: 12px; +} + +#permission-popup-menulist { + padding-inline: 12px 6px; +} + +.protections-popup-section-header, +.protections-popup-switch-section-header, +#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(--text-color-deemphasized); +} + +/** 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; +} + +#cookieBannerView-disable-site, +#cookieBannerView-enable-site { + font-weight: 600; +} + +.protections-popup-cookieBannerView-footer { + margin-top: auto; +} + + +/* Cookie banner state toggles for the popup menu item */ + +#protections-popup-cookie-banner-section:not([data-state="detected"]) description#protections-popup-cookie-banner-detected, +#protections-popup-cookie-banner-section:not([data-state="undetected"]) description#protections-popup-cookie-banner-undetected, +#protections-popup-cookie-banner-section:not([data-state="site-disabled"]) description#protections-popup-cookie-banner-site-disabled { + display: none; +} + +/* Cookie banner state toggles for the subview: if the state is detected, show + * the disable controls; if the state is site-disabled, show the enable controls. */ +#protections-popup-cookieBannerView:not([data-state="detected"]) #protections-popup-cookieBannerView-disable-button, +#protections-popup-cookieBannerView:not([data-state="detected"]) description#cookieBannerView-disable-site, +#protections-popup-cookieBannerView:not([data-state="detected"]) description#cookieBannerView-disable-site-warning, +#protections-popup-cookieBannerView:not([data-state="site-disabled"]) #protections-popup-cookieBannerView-enable-button, +#protections-popup-cookieBannerView:not([data-state="site-disabled"]) description#cookieBannerView-enable-site, +#protections-popup-cookieBannerView:not([data-state="site-disabled"]) description#cookieBannerView-enable-site-description { + display: none; +} 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..645467864d --- /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; + justify-content: flex-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 { + flex: 1; + justify-content: 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..1f20a76d53 --- /dev/null +++ b/browser/themes/shared/customizableui/customizeMode.css @@ -0,0 +1,638 @@ +/* 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: var(--toolbarbutton-disabled-opacity); + } + + #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: var(--toolbarbutton-disabled-opacity); + } + } +} + +#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; +} + +#widget-overflow-fixed-list > toolbarpaletteitem { + flex: none; +} + +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 { + align-items: flex-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 { + align-items: flex-start; +} +#wrapper-edit-controls[place="palette"] > #edit-controls > #copy-button { + flex: none; +} + +#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; +} + +/* Special-case the overflow and the hamburger button so they show up disabled + in customize mode. */ +:is(#nav-bar-overflow-button, #PanelUI-menu-button)[disabled] { + fill-opacity: var(--toolbarbutton-disabled-opacity); +} + +/* The overflow button should look both disabled and open. */ +#nav-bar[customizing] > #nav-bar-overflow-button > .toolbarbutton-icon { + background-color: var(--toolbarbutton-active-background); +} + +#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..9b9bc7074b --- /dev/null +++ b/browser/themes/shared/customizableui/panelUI-shared.css @@ -0,0 +1,2016 @@ +/* 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-info-icon-padding: 4px; + --arrowpanel-header-info-icon-full-width: calc(16px + (2 * var(--arrowpanel-header-info-icon-padding))); + --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; + --panel-separator-margin-horizontal: 4px; + --panel-subview-body-padding-block: 4px; +} + +/* The vars in this rule are not on the :root above so that they would + * work in conjunction with when touchmode attribute is set on the panels. */ +panel, +menupopup { + /* The value for the header back icon padding is selected in a way that the + * height of the header and its separator will be equal to the panel inner + * top padding plus standard menuitem, so that the header's separator will + * be located excatly where a normal toolbarseparator would be located after + * the first menuitem, in a menu without a header. */ + --arrowpanel-header-back-icon-padding: 6px; + --arrowpanel-header-back-icon-full-width: calc(16px + (2 * var(--arrowpanel-header-back-icon-padding))); + /* The min-height is calculated with the separator's horizontal margin rather + * than the vertical, to let the back icon have even spacing all around + * while being aligned with the separator. */ + --arrowpanel-header-min-height: calc(var(--arrowpanel-header-back-icon-full-width) + + (var(--panel-separator-margin-horizontal) * 2)); +} + +:root[uidensity=compact] :is(panel, menupopup):not([touchmode]) { + --arrowpanel-header-back-icon-padding: 4px; +} + +#PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: flex; + 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 { + flex-direction: column; + 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; + 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; + 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; +} + +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) { + align-items: 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 { + 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; + flex-direction: column; + 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 { + align-items: flex-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. */ + order: 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: flex; + 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, +#appMenu-fxa-label2 > vbox > label { + margin: 0; +} + +.syncNowBtn { + visibility: collapse; + order: 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; +} + +@supports not -moz-bool-pref("identity.fxaccounts.toolbar.defaultVisible") { + /* 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(--text-color-deemphasized); + font-weight: 600; +} + +#PanelUI-appMenu-fxa-label-last-synced { + font-size: 10px; + font-style: italic; + color: var(--text-color-deemphasized); +} + +#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); +} + +: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(--text-color-deemphasized); + /* 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(--text-color-deemphasized); +} + +/* 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; + flex-shrink: 0; +} + +.subview-subheader { + font-size: 11px; + font-weight: inherit; + color: var(--text-color-deemphasized); + padding-block: 4px; + box-sizing: border-box; +} + +.subviewbutton { + /* toolbarbuttons default to centered, but we don't want that for subviews. */ + justify-content: flex-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: flex; + color: var(--panel-shortcut-color); +} + +#protections-popup-mainView .subviewbutton-nav:not(.notFound)::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: flex; +} + +#protections-popup-mainView .subviewbutton-nav:not(.notFound):-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: flex; + 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 { + align-items: center; + flex-direction: row; + 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 { + flex: 1; + margin: 0; + padding: 4px 0; +} + +.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton { + flex: none; + 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; +} + +.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:where(:not(.unified-extensions-item)):is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] +) > toolbarbutton { + border: 0; + margin: 0; + flex: 1; + padding-block: var(--arrowpanel-menuitem-padding-block); + flex-direction: row; +} + +toolbarpaletteitem[place="panel"], +toolbarpaletteitem[place="panel"] > toolbaritem { + 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 { + display: block; + /* 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; + align-items: 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; +} + +.widget-overflow-list .toolbarbutton-1 { + align-items: center; + flex-direction: row; +} + +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 { + align-items: center; + margin-bottom: 5px; +} + +#PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.subviewradio { + appearance: none; + align-items: 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(--text-color-deemphasized); + 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-min-height); +} + +.panel-header + toolbarseparator { + margin-top: 0 !important; +} + +.panel-header > h1 { + flex: auto; + font-size: inherit; + font-weight: 600; + margin: 0; +} + +.panel-header.panel-header-with-info-button > h1 { + /* Add the size of the info button to center properly. */ + margin-inline-start: var(--arrowpanel-header-info-icon-full-width); +} + +.panel-header:not(.panel-header-with-info-button) > .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.panel-header-with-info-button > .subviewbutton-back + h1 { + margin-inline-start: 0; + margin-inline-end: calc(var(--arrowpanel-header-back-icon-full-width) + - var(--arrowpanel-header-info-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; +} + +#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(--text-color-deemphasized); +} + +#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..66b9c39c3f --- /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; + align-items: 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..22261ac7c3 --- /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(--text-color-deemphasized); +} diff --git a/browser/themes/shared/downloads/download-blockedStates.css b/browser/themes/shared/downloads/download-blockedStates.css new file mode 100644 index 0000000000..cf35fdcac9 --- /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 { + 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..887bb8b60c --- /dev/null +++ b/browser/themes/shared/downloads/downloads.inc.css @@ -0,0 +1,266 @@ +/* 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; +} + +#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..a401126a2f --- /dev/null +++ b/browser/themes/shared/downloads/indicator.css @@ -0,0 +1,209 @@ +/* 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-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 { + --download-progress-pcent: 0%; + + 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..5f44720aa3 --- /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: flex; + 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/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/translations.svg b/browser/themes/shared/icons/translations.svg new file mode 100644 index 0000000000..ef66a88ccf --- /dev/null +++ b/browser/themes/shared/icons/translations.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..c63db1f3e7 --- /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: flex; +} + +/* 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..6960bdf87c --- /dev/null +++ b/browser/themes/shared/identity-credential-notification.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/. */ + +#identity-credential-notification { + --list-item-border: color-mix(in srgb, currentColor 10%, transparent); + --list-item-checked-bgcolor: color-mix(in srgb, var(--button-primary-bgcolor) 6%, transparent); + --list-item-checked-border: color-mix(in srgb, var(--button-primary-bgcolor) 20%, transparent); +} + +@media (prefers-contrast) { + #identity-credential-notification { + --list-item-border: ThreeDShadow; + --list-item-checked-bgcolor: transparent; + --list-item-checked-border: AccentColor; + } +} + +#identity-credential-provider-selector-container, +#identity-credential-account-selector-container { + display: flex; + flex-direction: column; + gap: 12px; + max-height: 540px; + overflow: auto; +} + +#identity-credential-header-text { + font-weight: 600; +} + +.identity-credential-header-container { + margin: 16px 16px -16px 16px; + display: flex; +} + +.identity-credential-header-icon { + width: 16px; + height: 16px; + margin-inline-end: 8px; +} + +.identity-credential-list-item { + display: flex; + gap: 10px; + padding-block: max(calc(var(--arrowpanel-menuitem-padding-block) * 2), 4px); + padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) * 2); + border: 2px solid var(--list-item-border); + border-radius: 4px; +} + +.identity-credential-list-item.checked { + background-color: var(--list-item-checked-bgcolor); + border-color: var(--list-item-checked-border); +} + +.identity-credential-list-item > .identity-credential-list-item-radio { + appearance: none; + background-color: var(--checkbox-unchecked-bgcolor); + background-image: url("chrome://global/skin/icons/radio.svg"); + border: 1px solid var(--checkbox-border-color); + border-radius: 100%; + align-self: center; + outline: none; + -moz-context-properties: fill; + fill: transparent; +} + +.identity-credential-list-item > .identity-credential-list-item-radio:focus-visible { + outline-offset: var(--focus-outline-offset); +} + +.identity-credential-list-item > .identity-credential-list-item-radio:hover { + background-color: var(--checkbox-unchecked-hover-bgcolor); +} + +.identity-credential-list-item > .identity-credential-list-item-radio:hover:active { + background-color: var(--checkbox-unchecked-active-bgcolor); +} + +.identity-credential-list-item > .identity-credential-list-item-radio:checked { + fill: var(--checkbox-checked-color); + background-color: var(--checkbox-checked-bgcolor); + border-color: var(--checkbox-checked-border-color); +} + +.identity-credential-list-item > .identity-credential-list-item-radio:checked:hover { + background-color: var(--checkbox-checked-hover-bgcolor); +} + +.identity-credential-list-item > .identity-credential-list-item-radio:checked:hover:active { + background-color: var(--checkbox-checked-active-bgcolor); +} + +.identity-credential-list-item-icon { + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.6; + clip-path: circle(50%); + width: 32px; + height: 32px; +} + +.identity-credential-list-item > .identity-credential-list-item-label { + align-self: center; + font-weight: 600; +} + +.identity-credential-list-item-label-stack > .identity-credential-list-item-label-name { + font-weight: 600; +} + +.identity-credential-list-item-label-stack > .identity-credential-list-item-label-email { + font-size: 80%; +} + +.identity-credential-list-item > .identity-credential-list-item-label-stack { + display: flex; + flex-direction: column; + gap: 4px; +} 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..8035480df3 --- /dev/null +++ b/browser/themes/shared/jar.inc.mn @@ -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/. + +# 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/pageInfo.css (../shared/pageInfo.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-window.css (../shared/migration/migration-dialog-window.css) + skin/classic/browser/migration/migration-wizard.css (../shared/migration/migration-wizard.css) + skin/classic/browser/migration/success.svg (../shared/migration/success.svg) + skin/classic/browser/migration/progress-mask.svg (../shared/migration/progress-mask.svg) + skin/classic/browser/migration/safari-icon-3dots.svg (../shared/migration/safari-icon-3dots.svg) + 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/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/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/translations/panel.css (../shared/translations/panel.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/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/translations.svg (../shared/icons/translations.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/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/organizer-shared.css (../shared/places/organizer-shared.css) + 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-window.css b/browser/themes/shared/migration/migration-dialog-window.css new file mode 100644 index 0000000000..686f6cfe9c --- /dev/null +++ b/browser/themes/shared/migration/migration-dialog-window.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..31879b0977 --- /dev/null +++ b/browser/themes/shared/migration/migration-wizard.css @@ -0,0 +1,334 @@ +/* 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; + text-align: start; + width: 22.34em; +} + +h1 { + font-size: 1.30em; + font-weight: normal; + margin-block: 0 16px; + min-height: 1em; +} + +ol { + padding-inline-start: 24px; + margin-block: 16px 0; +} + +li:not(:last-child) { + margin-block-end: 16px; +} + +input[type="checkbox"] { + margin-block: 0; +} + +div[name="page-loading"] > .buttons > button { + color: transparent; +} + +.loading-block { + background-color: var(--in-content-button-background); + border-radius: 4px; + opacity: 0.4; + margin-block-start: 16px; +} + +.loading-block.large { + height: 36px; +} + +.loading-block.small { + height: 16px; +} + +.buttons { + margin-block-start: 16px; +} + +.deemphasized-text { + font-size: 0.84em; +} + +@media not (prefers-contrast) { + .deemphasized-text { + color: var(--text-color-deemphasized); + } +} + +fieldset { + border: 0; +} + +label:not([hidden]) { + display: flex; + align-items: center; + width: fit-content; +} + +#wizard-deck > div { + display: flex; + flex-direction: column; +} + +#browser-profile-selector { + display: flex; + align-items: center; + padding: 8px; + margin: 0; + font-weight: unset; +} + +.migrator-icon { + content: url(chrome://global/skin/icons/defaultFavicon.svg); + height: 32px; + width: 32px; + -moz-context-properties: fill; + fill: currentColor; +} + +.migrator-icon, +.migrator-description, +.dropdown-icon { + pointer-events: none; +} + +.dropdown-icon { + content: url("chrome://global/skin/icons/arrow-down.svg"); + -moz-context-properties: fill; + fill: currentColor; + height: 16px; + width: 16px; +} + +.migrator-description { + display: flex; + flex: 1; + flex-direction: column; + justify-content: center; + align-items: start; + margin-inline-start: 11px; +} + +#profile-name:empty { + display: none; +} + +#profile-name { + font-size: 0.73em; + text-transform: uppercase; +} + +/** + * Until we address bug 1823489, it's not that easy to apply styles on + * the panel-list. We work around this by setting the CSS variable for + * the border instead. + */ +slot::slotted(panel-list), +slot::slotted(panel) { + --in-content-box-border-color: transparent; +} + +div[name="page-selection"]:not([show-import-all]) #select-all, +div[name="page-selection"][show-import-all][single-item] #select-all, +div[name="page-selection"]:not([show-import-all]) summary { + display: none; +} + +div[name="page-selection"][show-import-all]:not([single-item]) label:not(#select-all) { + margin-inline-start: 24px; +} + +div[name="page-selection"][show-import-all] #select-all { + display: flex; +} + +div[name="page-selection"][migrator-type="browser"] > .buttons > #import-from-file, +div[name="page-selection"][migrator-type="file"] > .buttons > #import, +div[name="page-selection"][migrator-type="file"] > .resource-selection-details, +div[name="page-selection"][migrator-type="file"] > .resource-selection-preamble, +div[name="page-selection"][show-import-all] .resource-selection-preamble { + display: none; +} + +.resource-selection-preamble { + margin-block-start: 16px; +} + +details[open] .expand-collapse-icon { + content: url("chrome://browser/skin/zoom-out.svg"); +} + +.expand-collapse-icon { + display: inline-block; + width: 16px; + height: 16px; + content: url("chrome://global/skin/icons/plus.svg"); + grid-area: b; + -moz-context-properties: fill; + fill: currentColor; + justify-self: end; + margin-inline-end: 8px; +} + +details:not([open]) summary { + margin-block-end: 16px; +} + +summary { + cursor: pointer; +} + +#resource-type-list { + padding: 0; +} + +#resource-type-list > label { + margin-block-start: 16px; +} + +:host(:not([dialog-mode])) .cancel-close, +:host(:not([dialog-mode])) .done-button, +:host([dialog-mode]) .continue-button { + display: none; +} + +.resource-progress { + display: grid; + gap: 16px; +} + +.resource-progress-group { + display: grid; + grid-template-columns: min-content auto; + grid-template-areas: "icon type" + "icon status"; + align-items: center; + justify-items: start; +} + +.resource-progress-group[hidden] { + display: none; +} + +.success-text { + grid-area: status; +} + +.progress-icon { + display: inline-block; + width: 16px; + height: 16px; + content: url("chrome://browser/skin/migration/success.svg"); + -moz-context-properties: fill; + fill: var(--in-content-success-icon-color); + margin-inline-end: 8px; +} + +.error-icon { + content: url("chrome://global/skin/icons/error.svg"); + -moz-context-properties: fill; + fill: var(--in-content-danger-button-background); + margin-inline-end: 8px; +} + +.page-portrait-icon { + width: 16px; + height: 16px; + content: url("chrome://global/skin/icons/page-portrait.svg"); + -moz-context-properties: fill; + fill: currentColor; + vertical-align: middle; +} + +.safari-icon-3dots { + width: 16px; + height: 16px; + vertical-align: middle; + content: url("chrome://browser/skin/migration/safari-icon-3dots.svg"); + -moz-context-properties: fill, stroke; + fill: currentColor; + stroke: color-mix(in srgb, currentColor 10%, transparent 90%); +} + +.no-browsers-found-message { + display: flex; +} + +.error-message { + display: flex; + align-items: start; +} + +.no-resources-found { + font-size: 0.84em; + margin-block-start: 16px; +} + +div[name="page-selection"]:not([no-resources]) .no-resources-found, +div[name="page-selection"][no-resources] .hide-on-error { + display: none; +} + +/** + * Workaround for bug 1671784, which shows a slight outline around the + * rotating masked element. + */ +.progress-icon-parent { + border-radius: 0.01px; + overflow: hidden; + display: flex; + align-items: center; +} + +div[name="page-selection"][show-import-all] .resource-selection-details { + padding-inline-start: 8px; +} + +.resource-selection-details > summary { + list-style: none; + display: grid; + grid-template-areas: "a b" + "c b"; + margin-block: 16px 0; +} + +@media (prefers-reduced-motion: reduce) { + .progress-icon:not(.completed) { + content: url("chrome://browser/skin/tabbrowser/hourglass.svg"); + fill: var(--text-color-deemphasized); + } +} + +@media (prefers-reduced-motion: no-preference) { + .progress-icon:not(.completed) { + content: ""; + background-image: conic-gradient(rgba(255, 255, 255, 0.31) 0%, rgba(255, 189, 79, 0.57) 38%, rgba(255, 74, 162, 0.79) 70%, rgb(144, 89, 255) 100%); + mask: url("chrome://browser/skin/migration/progress-mask.svg"); + mask-composite: exclude; + } + + .progress-icon:not(.completed) { + animation-name: rotate; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-timing-function: linear; + } +} + +@keyframes rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/browser/themes/shared/migration/progress-mask.svg b/browser/themes/shared/migration/progress-mask.svg new file mode 100644 index 0000000000..41cf8f3805 --- /dev/null +++ b/browser/themes/shared/migration/progress-mask.svg @@ -0,0 +1,7 @@ + + + + diff --git a/browser/themes/shared/migration/safari-icon-3dots.svg b/browser/themes/shared/migration/safari-icon-3dots.svg new file mode 100644 index 0000000000..df255b184f --- /dev/null +++ b/browser/themes/shared/migration/safari-icon-3dots.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/migration/success.svg b/browser/themes/shared/migration/success.svg new file mode 100644 index 0000000000..09f624dd65 --- /dev/null +++ b/browser/themes/shared/migration/success.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/notification-icons.css b/browser/themes/shared/notification-icons.css new file mode 100644 index 0000000000..eafb6929fd --- /dev/null +++ b/browser/themes/shared/notification-icons.css @@ -0,0 +1,382 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@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(--toolbarbutton-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/login.svg); +} + +#permission-popup-menulist { + margin-inline-end: 0; +} + +#webRTC-preview:not([hidden]) { + flex-direction: column; +} + +#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: flex; + visibility: collapse; +} + +#plugins-notification-icon.plugin-blocked[showing] { + animation: pluginBlockedNotification 500ms ease 0s 5 alternate both; +} + +@keyframes pluginBlockedNotification { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +/* 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/pageInfo.css b/browser/themes/shared/pageInfo.css new file mode 100644 index 0000000000..dffa01f757 --- /dev/null +++ b/browser/themes/shared/pageInfo.css @@ -0,0 +1,237 @@ +/* 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"); + +@media (-moz-platform: macos) { + #topBar { + appearance: auto; + -moz-default-appearance: toolbar; + -moz-window-dragging: drag; + align-items: center; + justify-content: center; + } +} + +@media not (-moz-platform: macos) { + #topBar { + border-bottom: 1px solid ThreeDShadow; + padding-inline-start: 10px; + background-color: Field; + color: FieldText; + } +} + +/* View buttons */ +@media not (-moz-platform: macos) { + #viewGroup > radio { + appearance: none; + list-style-image: none; + min-width: 4.5em; + margin: 0; + padding: 3px; + } + + #viewGroup > radio > .radio-label-box { + margin: 0; + padding: 0 6px; + } + + #viewGroup:focus-visible > radio[focused="true"] > .radio-label-box { + outline: var(--default-focusring); + } + + #viewGroup .radio-icon { + background-image: url("chrome://browser/skin/pageInfo.png"); + width: 32px; + height: 32px; + /* Avoid anti-aliasing seams in HiDPI */ + image-rendering: crisp-edges; + } + + #generalTab .radio-icon { + background-position-x: 0; + } + + #mediaTab .radio-icon { + background-position-x: -32px; + } + + #permTab .radio-icon { + background-position-x: -96px; + } + + #securityTab .radio-icon { + background-position-x: -128px; + } +} + +@media (-moz-platform: linux) { + #viewGroup > radio { + color: FieldText; + } + + #viewGroup > radio[selected="true"] { + background-color: SelectedItem; + color: SelectedItemText; + } +} + +@media (-moz-platform: windows) { + #viewGroup { + padding-inline-start: 10px; + } + + #viewGroup > radio:hover { + background-color: #E0E8F6; + color: black; + } + + #viewGroup > radio[selected="true"] { + background-color: #C1D2EE; + color: black; + } + + #viewGroup > radio:is(:hover, [selected="true"]) .radio-icon { + background-position-y: -32px; + } +} + +@media (-moz-platform: macos) { + #viewGroup { + margin: 4px 0 9px; + } + + #viewGroup > radio, + #viewGroup > toolbarbutton { + flex-direction: column; + align-items: 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; +} + +@media (-moz-platform: macos) { + .help-button { + appearance: auto; + -moz-default-appearance: -moz-mac-help-button; + } +} + +/* General Tab */ + +@media (-moz-platform: linux) { + #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 { + background: none; + appearance: none; + border-style: none; +} + +@media not (-moz-platform: macos) { + #mediaSplitter { + height: .8em; + } +} + +#mediaTable { + margin-bottom: 2em; +} + +#mediaLabelColumn { + min-width: 10em; +} + +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; + 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/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..4c00982e62 --- /dev/null +++ b/browser/themes/shared/places/editBookmark.css @@ -0,0 +1,160 @@ +/* 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 { + margin: 0; + height: 12.5em; + flex: 1 auto; + border: 1px solid ThreeDShadow; + border-radius: 4px; +} + +#editBMPanel_folderTree { + appearance: none; + overflow: hidden; +} + +#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: flex; +} + +.folder-icon { + list-style-image: url("chrome://global/skin/icons/folder.svg") !important; + -moz-context-properties: fill; + fill: currentColor; +} + +#editBMPanel_tagsSelector > richlistitem > image { + appearance: auto; + -moz-default-appearance: checkbox; + align-items: 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(--text-color-deemphasized); +} + +.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..e5925c2897 --- /dev/null +++ b/browser/themes/shared/places/editBookmarkPanel.css @@ -0,0 +1,212 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@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; + flex: none; +} + +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; +} + +/* Implements editBookmarkPanel resizing on folderTree un-collapse. */ +#editBMPanel_folderTree { + min-width: 27em; +} + +#editBMPanel_newFolderButton { + appearance: none; + margin: 0; + 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%; +} + +#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) { + padding-top: var(--arrowpanel-padding); +} + +#editBookmarkPanelContent > #editBMPanel_folderTreeRow, +#editBookmarkPanelContent > #editBMPanel_folderTreeRow > #editBMPanel_newFolderBox, +#editBookmarkPanelContent > #editBMPanel_tagsSelectorRow { + padding-top: 4px; +} + +#editBookmarkPanelContent label[control] { + margin: 0; + margin-bottom: 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/organizer-shared.css b/browser/themes/shared/places/organizer-shared.css new file mode 100644 index 0000000000..f0563e695c --- /dev/null +++ b/browser/themes/shared/places/organizer-shared.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/. */ + +#contentView { + flex: 4 4; +} + +#contentView, +#placesView, +#placesViewsBox { + min-width: 0; + min-height: 0; +} + +#placesViewsBox { + min-height: 5em; + overflow: clip; +} diff --git a/browser/themes/shared/places/sidebar.css b/browser/themes/shared/places/sidebar.css new file mode 100644 index 0000000000..7dd005e9d7 --- /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: flex; + 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..36e8dfd8f2 --- /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 { + flex: 1; +} + +.radio-buttons { + flex-direction: row; + 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..8528bf7948 --- /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: flex; + 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..92704439bc --- /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) { + 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) { + min-height: 15em; +} + +.actionButtons { + margin: 3px 0 0; +} + +menulist label { + font-weight: unset; +} 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..668fa2ee4f --- /dev/null +++ b/browser/themes/shared/preferences/preferences.css @@ -0,0 +1,1548 @@ +/* - 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 */ +:root { + user-select: text; +} + +#preferences-root { + text-rendering: optimizeLegibility; +} + +@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: flex; + flex-direction: column; + + --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(--text-color-deemphasized); +} + +button, +treecol, +menulist, +html|select { + /* override the root 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; + color: var(--text-color-deemphasized); +} + +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: flex; +} + +/* 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; + min-height: auto; + 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; +} + +@supports not -moz-bool-pref("browser.migrate.preferences-entrypoint.enabled") { + #dataMigrationGroup { + display: none; + } +} + +#dataMigration { + /* This should really be using baseline, but that doesn't work properly with + * the and XUL