From 43a97878ce14b72f0981164f87f2e35e14151312 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 7 Apr 2024 11:22:09 +0200 Subject: Adding upstream version 110.0.1. Signed-off-by: Daniel Baumann --- browser/themes/shared/UITour.css | 154 ++ browser/themes/shared/aboutFrameCrashed.css | 12 + browser/themes/shared/aboutRestartRequired.css | 19 + browser/themes/shared/aboutSessionRestore.css | 55 + browser/themes/shared/aboutTabCrashed.css | 40 + browser/themes/shared/aboutWelcomeBack.css | 15 + browser/themes/shared/addon-notification.css | 54 + .../themes/shared/addons/addon-install-blocked.svg | 37 + .../shared/addons/addon-install-downloading.svg | 37 + .../shared/addons/addon-install-installed.svg | 37 + .../themes/shared/addons/extension-controlled.css | 32 + .../themes/shared/addons/unified-extensions.css | 255 +++ .../themes/shared/app-marketplace-icons/LICENSE | 1 + .../shared/app-marketplace-icons/Makefile.in | 26 + .../shared/app-marketplace-icons/af/android.png | Bin 0 -> 4576 bytes .../shared/app-marketplace-icons/ar/android.png | Bin 0 -> 4737 bytes .../themes/shared/app-marketplace-icons/ar/ios.svg | 2 + .../shared/app-marketplace-icons/az/android.png | Bin 0 -> 4571 bytes .../themes/shared/app-marketplace-icons/az/ios.svg | 2 + .../shared/app-marketplace-icons/be/android.png | Bin 0 -> 4874 bytes .../shared/app-marketplace-icons/bg/android.png | Bin 0 -> 4845 bytes .../themes/shared/app-marketplace-icons/bg/ios.svg | 2 + .../shared/app-marketplace-icons/bn-BD/android.png | Bin 0 -> 4310 bytes .../shared/app-marketplace-icons/bn-IN/android.png | Bin 0 -> 4310 bytes .../shared/app-marketplace-icons/ca/android.png | Bin 0 -> 4814 bytes .../shared/app-marketplace-icons/cs/android.png | Bin 0 -> 4420 bytes .../themes/shared/app-marketplace-icons/cs/ios.svg | 2 + .../shared/app-marketplace-icons/da/android.png | Bin 0 -> 4257 bytes .../themes/shared/app-marketplace-icons/da/ios.svg | 2 + .../shared/app-marketplace-icons/de/android.png | Bin 0 -> 4430 bytes .../themes/shared/app-marketplace-icons/de/ios.svg | 2 + .../shared/app-marketplace-icons/el/android.png | Bin 0 -> 5095 bytes .../themes/shared/app-marketplace-icons/el/ios.svg | 2 + .../shared/app-marketplace-icons/en-US/android.png | Bin 0 -> 4441 bytes .../shared/app-marketplace-icons/en-US/ios.svg | 2 + .../shared/app-marketplace-icons/es-ES/android.png | Bin 0 -> 4942 bytes .../shared/app-marketplace-icons/es-ES/ios.svg | 2 + .../shared/app-marketplace-icons/et/android.png | Bin 0 -> 4772 bytes .../themes/shared/app-marketplace-icons/et/ios.svg | 2 + .../shared/app-marketplace-icons/eu/android.png | Bin 0 -> 4471 bytes .../shared/app-marketplace-icons/fa/android.png | Bin 0 -> 4404 bytes .../shared/app-marketplace-icons/fi/android.png | Bin 0 -> 4441 bytes .../themes/shared/app-marketplace-icons/fi/ios.svg | 2 + .../shared/app-marketplace-icons/fr/android.png | Bin 0 -> 5054 bytes .../themes/shared/app-marketplace-icons/fr/ios.svg | 2 + .../shared/app-marketplace-icons/gl/android.png | Bin 0 -> 4866 bytes .../shared/app-marketplace-icons/gu-IN/android.png | Bin 0 -> 4233 bytes .../shared/app-marketplace-icons/he/android.png | Bin 0 -> 4415 bytes .../themes/shared/app-marketplace-icons/he/ios.svg | 2 + .../shared/app-marketplace-icons/hi-IN/android.png | Bin 0 -> 4166 bytes .../shared/app-marketplace-icons/hr/android.png | Bin 0 -> 5103 bytes .../shared/app-marketplace-icons/hu/android.png | Bin 0 -> 4835 bytes .../themes/shared/app-marketplace-icons/hu/ios.svg | 2 + .../shared/app-marketplace-icons/hy-AM/android.png | Bin 0 -> 4886 bytes .../shared/app-marketplace-icons/id/android.png | Bin 0 -> 4631 bytes .../themes/shared/app-marketplace-icons/id/ios.svg | 2 + .../shared/app-marketplace-icons/is/android.png | Bin 0 -> 4648 bytes .../shared/app-marketplace-icons/it/android.png | Bin 0 -> 4911 bytes .../themes/shared/app-marketplace-icons/it/ios.svg | 2 + .../shared/app-marketplace-icons/ja/android.png | Bin 0 -> 4633 bytes .../themes/shared/app-marketplace-icons/ja/ios.svg | 2 + browser/themes/shared/app-marketplace-icons/jar.mn | 17 + .../shared/app-marketplace-icons/ka/android.png | Bin 0 -> 5162 bytes .../shared/app-marketplace-icons/kk/android.png | Bin 0 -> 5008 bytes .../shared/app-marketplace-icons/km/android.png | Bin 0 -> 5085 bytes .../shared/app-marketplace-icons/kn/android.png | Bin 0 -> 5339 bytes .../shared/app-marketplace-icons/ko/android.png | Bin 0 -> 4716 bytes .../themes/shared/app-marketplace-icons/ko/ios.svg | 2 + .../shared/app-marketplace-icons/lo/android.png | Bin 0 -> 5084 bytes .../shared/app-marketplace-icons/lt/android.png | Bin 0 -> 4432 bytes .../themes/shared/app-marketplace-icons/lt/ios.svg | 2 + .../shared/app-marketplace-icons/lv/android.png | Bin 0 -> 4588 bytes .../themes/shared/app-marketplace-icons/lv/ios.svg | 2 + .../shared/app-marketplace-icons/mk/android.png | Bin 0 -> 4798 bytes .../shared/app-marketplace-icons/ml/android.png | Bin 0 -> 5554 bytes .../themes/shared/app-marketplace-icons/moz.build | 7 + .../shared/app-marketplace-icons/mr/android.png | Bin 0 -> 4495 bytes .../shared/app-marketplace-icons/ms/android.png | Bin 0 -> 4729 bytes .../themes/shared/app-marketplace-icons/ms/ios.svg | 2 + .../themes/shared/app-marketplace-icons/mt/ios.svg | 2 + .../shared/app-marketplace-icons/my/android.png | Bin 0 -> 4970 bytes .../shared/app-marketplace-icons/nb-NO/android.png | Bin 0 -> 4934 bytes .../shared/app-marketplace-icons/nb-NO/ios.svg | 2 + .../shared/app-marketplace-icons/ne-NP/android.png | Bin 0 -> 4674 bytes .../shared/app-marketplace-icons/nl/android.png | Bin 0 -> 4852 bytes .../themes/shared/app-marketplace-icons/nl/ios.svg | 2 + .../shared/app-marketplace-icons/nn-NO/android.png | Bin 0 -> 4934 bytes .../shared/app-marketplace-icons/nn-NO/ios.svg | 2 + .../shared/app-marketplace-icons/pa-IN/android.png | Bin 0 -> 4856 bytes .../shared/app-marketplace-icons/pl/android.png | Bin 0 -> 4581 bytes .../themes/shared/app-marketplace-icons/pl/ios.svg | 2 + .../shared/app-marketplace-icons/pt-BR/android.png | Bin 0 -> 4907 bytes .../shared/app-marketplace-icons/pt-BR/ios.svg | 2 + .../shared/app-marketplace-icons/pt-PT/android.png | Bin 0 -> 4907 bytes .../shared/app-marketplace-icons/pt-PT/ios.svg | 2 + .../shared/app-marketplace-icons/ro/android.png | Bin 0 -> 4452 bytes .../themes/shared/app-marketplace-icons/ro/ios.svg | 2 + .../shared/app-marketplace-icons/ru/android.png | Bin 0 -> 4774 bytes .../themes/shared/app-marketplace-icons/ru/ios.svg | 2 + .../shared/app-marketplace-icons/si/android.png | Bin 0 -> 5401 bytes .../shared/app-marketplace-icons/sk/android.png | Bin 0 -> 4502 bytes .../themes/shared/app-marketplace-icons/sk/ios.svg | 2 + .../shared/app-marketplace-icons/sl/android.png | Bin 0 -> 4660 bytes .../themes/shared/app-marketplace-icons/sl/ios.svg | 2 + .../shared/app-marketplace-icons/sq/android.png | Bin 0 -> 4507 bytes .../shared/app-marketplace-icons/sr/android.png | Bin 0 -> 4799 bytes .../shared/app-marketplace-icons/sv-SE/android.png | Bin 0 -> 4909 bytes .../shared/app-marketplace-icons/sv-SE/ios.svg | 2 + .../shared/app-marketplace-icons/sw/android.png | Bin 0 -> 4824 bytes .../shared/app-marketplace-icons/ta/android.png | Bin 0 -> 4682 bytes .../shared/app-marketplace-icons/te/android.png | Bin 0 -> 4897 bytes .../shared/app-marketplace-icons/th/android.png | Bin 0 -> 5133 bytes .../themes/shared/app-marketplace-icons/th/ios.svg | 2 + .../shared/app-marketplace-icons/tr/android.png | Bin 0 -> 4263 bytes .../themes/shared/app-marketplace-icons/tr/ios.svg | 2 + .../shared/app-marketplace-icons/uk/android.png | Bin 0 -> 5065 bytes .../shared/app-marketplace-icons/ur/android.png | Bin 0 -> 4321 bytes .../shared/app-marketplace-icons/uz/android.png | Bin 0 -> 4505 bytes .../shared/app-marketplace-icons/vi/android.png | Bin 0 -> 5117 bytes .../themes/shared/app-marketplace-icons/vi/ios.svg | 2 + .../shared/app-marketplace-icons/zh-CN/android.png | Bin 0 -> 4962 bytes .../shared/app-marketplace-icons/zh-CN/ios.svg | 2 + .../shared/app-marketplace-icons/zh-TW/android.png | Bin 0 -> 4280 bytes .../shared/app-marketplace-icons/zh-TW/ios.svg | 2 + .../shared/app-marketplace-icons/zu/android.png | Bin 0 -> 4648 bytes browser/themes/shared/autocomplete.css | 167 ++ browser/themes/shared/blockedSite.css | 71 + browser/themes/shared/browser-custom-colors.css | 64 + browser/themes/shared/browser-shared.css | 897 +++++++++ browser/themes/shared/contextmenu.css | 59 + .../shared/controlcenter/3rdpartycookies.svg | 6 + .../themes/shared/controlcenter/cryptominers.svg | 6 + browser/themes/shared/controlcenter/dashboard.svg | 4 + .../themes/shared/controlcenter/etp-milestone.svg | 4 + .../controlcenter/hero-message-background.svg | 4 + .../themes/shared/controlcenter/mcb-disabled.svg | 7 + browser/themes/shared/controlcenter/panel.css | 825 ++++++++ .../shared/controlcenter/tracking-protection.svg | 6 + browser/themes/shared/ctrlTab.css | 123 ++ .../themes/shared/customizableui/customizeMode.css | 631 ++++++ .../shared/customizableui/density-compact.svg | 21 + .../shared/customizableui/density-normal.svg | 18 + .../themes/shared/customizableui/density-touch.svg | 14 + .../shared/customizableui/empty-overflow-panel.png | Bin 0 -> 13890 bytes .../customizableui/empty-overflow-panel@2x.png | Bin 0 -> 34090 bytes .../shared/customizableui/panelUI-shared.css | 2033 ++++++++++++++++++++ browser/themes/shared/customizableui/whimsy.png | Bin 0 -> 5990 bytes .../shared/downloads/allDownloadsView.inc.css | 98 + .../shared/downloads/contentAreaDownloadsView.css | 27 + .../shared/downloads/download-blockedStates.css | 62 + .../themes/shared/downloads/download-summary.svg | 11 + browser/themes/shared/downloads/downloads.inc.css | 271 +++ browser/themes/shared/downloads/downloads.svg | 7 + browser/themes/shared/downloads/indicator.css | 211 ++ .../downloads/notification-finish-animation.svg | 193 ++ .../downloads/notification-start-animation.svg | 144 ++ browser/themes/shared/downloads/progressmeter.css | 95 + browser/themes/shared/drm-icon.svg | 8 + browser/themes/shared/e10s-64@2x.png | Bin 0 -> 3785 bytes browser/themes/shared/fullscreen/warning.css | 50 + browser/themes/shared/fxa/add-device.svg | 4 + browser/themes/shared/fxa/avatar-color.svg | 11 + browser/themes/shared/fxa/avatar-empty.svg | 8 + browser/themes/shared/fxa/avatar.svg | 6 + browser/themes/shared/fxa/fxa-spinner.svg | 28 + browser/themes/shared/fxa/monitor.svg | 4 + browser/themes/shared/fxa/send-to-device.svg | 4 + browser/themes/shared/fxa/send.svg | 4 + browser/themes/shared/fxa/sync-devices.svg | 49 + .../themes/shared/fxa/sync-illustration-issue.svg | 52 + browser/themes/shared/fxa/sync-illustration.svg | 50 + browser/themes/shared/icons/add-circle-fill.svg | 7 + browser/themes/shared/icons/back.svg | 6 + browser/themes/shared/icons/bookmark-12.svg | 7 + browser/themes/shared/icons/bookmark-hollow.svg | 6 + .../themes/shared/icons/bookmark-star-on-tray.svg | 7 + browser/themes/shared/icons/bookmark.svg | 6 + browser/themes/shared/icons/bookmarks-toolbar.svg | 7 + browser/themes/shared/icons/canvas-blocked.svg | 8 + browser/themes/shared/icons/canvas.svg | 8 + browser/themes/shared/icons/characterEncoding.svg | 6 + browser/themes/shared/icons/chevron-animation.svg | 391 ++++ browser/themes/shared/icons/customize.svg | 6 + browser/themes/shared/icons/device-desktop.svg | 6 + browser/themes/shared/icons/device-phone.svg | 6 + browser/themes/shared/icons/device-tablet.svg | 6 + browser/themes/shared/icons/device-tv.svg | 6 + browser/themes/shared/icons/device-vr.svg | 7 + browser/themes/shared/icons/edit-cut.svg | 6 + browser/themes/shared/icons/edit-paste.svg | 6 + browser/themes/shared/icons/fingerprint.svg | 8 + browser/themes/shared/icons/forget.svg | 6 + browser/themes/shared/icons/forward.svg | 6 + browser/themes/shared/icons/fullscreen-exit.svg | 7 + browser/themes/shared/icons/fullscreen.svg | 6 + browser/themes/shared/icons/history.svg | 7 + browser/themes/shared/icons/home.svg | 6 + browser/themes/shared/icons/import-export.svg | 7 + browser/themes/shared/icons/import.svg | 7 + browser/themes/shared/icons/ion.svg | 4 + browser/themes/shared/icons/library.svg | 9 + browser/themes/shared/icons/login.svg | 6 + browser/themes/shared/icons/logo-android.svg | 6 + browser/themes/shared/icons/logo-ios.svg | 6 + browser/themes/shared/icons/mail.svg | 7 + browser/themes/shared/icons/menu-badged.svg | 8 + browser/themes/shared/icons/menu.svg | 8 + browser/themes/shared/icons/new-tab.svg | 6 + .../themes/shared/icons/notification-fill-12.svg | 6 + browser/themes/shared/icons/open.svg | 6 + browser/themes/shared/icons/pin-12.svg | 6 + browser/themes/shared/icons/privateBrowsing.svg | 6 + browser/themes/shared/icons/quickactions.svg | 6 + browser/themes/shared/icons/reader-mode.svg | 9 + browser/themes/shared/icons/reload-to-stop.svg | 138 ++ browser/themes/shared/icons/save.svg | 7 + browser/themes/shared/icons/screenshot.svg | 4 + browser/themes/shared/icons/sidebars-right.svg | 9 + browser/themes/shared/icons/sidebars.svg | 9 + browser/themes/shared/icons/sort.svg | 11 + browser/themes/shared/icons/stop-to-reload.svg | 173 ++ .../themes/shared/icons/subtract-circle-fill.svg | 7 + browser/themes/shared/icons/success-animation.svg | 107 ++ browser/themes/shared/icons/sync.svg | 7 + browser/themes/shared/icons/synced-tabs.svg | 12 + browser/themes/shared/icons/tab.svg | 6 + browser/themes/shared/icons/thumb-down.svg | 7 + browser/themes/shared/icons/topsites.svg | 9 + browser/themes/shared/icons/trending.svg | 6 + browser/themes/shared/icons/window.svg | 6 + browser/themes/shared/icons/zoom-out.svg | 6 + .../shared/identity-block/identity-block.css | 277 +++ .../themes/shared/identity-block/permissions.svg | 9 + .../tracking-protection-active-brighttext.svg | 12 + .../identity-block/tracking-protection-active.svg | 12 + .../tracking-protection-disabled.svg | 7 + .../shared/identity-block/tracking-protection.svg | 6 + .../shared/identity-credential-notification.css | 13 + .../themes/shared/incontent-icons/tab-crashed.svg | 13 + browser/themes/shared/jar.inc.mn | 279 +++ browser/themes/shared/light-dark-overrides.css | 110 ++ browser/themes/shared/menupanel.css | 27 + .../themes/shared/migration/migration-dialog.css | 9 + .../themes/shared/migration/migration-wizard.css | 29 + browser/themes/shared/notification-icons.css | 404 ++++ .../notification-icons/autoplay-media-blocked.svg | 9 + .../shared/notification-icons/autoplay-media.svg | 7 + .../shared/notification-icons/camera-blocked.svg | 7 + .../themes/shared/notification-icons/camera.svg | 6 + .../desktop-notification-blocked.svg | 8 + .../notification-icons/desktop-notification.svg | 8 + .../shared/notification-icons/drag-indicator.svg | 4 + .../shared/notification-icons/geo-blocked.svg | 8 + browser/themes/shared/notification-icons/geo.svg | 7 + .../notification-icons/microphone-blocked.svg | 8 + .../shared/notification-icons/microphone.svg | 7 + browser/themes/shared/notification-icons/midi.svg | 6 + .../themes/shared/notification-icons/minimize.svg | 4 + .../persistent-storage-blocked.svg | 8 + .../notification-icons/persistent-storage.svg | 7 + .../shared/notification-icons/plugin-badge.svg | 7 + browser/themes/shared/notification-icons/popup.svg | 7 + .../shared/notification-icons/screen-blocked.svg | 7 + .../themes/shared/notification-icons/screen.svg | 7 + .../shared/notification-icons/xr-blocked.svg | 8 + browser/themes/shared/notification-icons/xr.svg | 7 + browser/themes/shared/panic-panel/header.png | Bin 0 -> 1880 bytes browser/themes/shared/panic-panel/header@2x.png | Bin 0 -> 4327 bytes browser/themes/shared/panic-panel/icons.png | Bin 0 -> 670 bytes browser/themes/shared/panic-panel/icons@2x.png | Bin 0 -> 1364 bytes browser/themes/shared/places/bookmarksMenu.svg | 9 + browser/themes/shared/places/bookmarksToolbar.svg | 8 + browser/themes/shared/places/editBookmark.css | 161 ++ browser/themes/shared/places/editBookmarkPanel.css | 218 +++ browser/themes/shared/places/folder-smart.svg | 6 + browser/themes/shared/places/sidebar.css | 216 +++ browser/themes/shared/places/tag.svg | 8 + browser/themes/shared/places/tree-icons.css | 95 + browser/themes/shared/preferences/android-menu.svg | 6 + .../themes/shared/preferences/category-general.svg | 7 + .../preferences/category-privacy-security.svg | 6 + .../themes/shared/preferences/category-search.svg | 6 + .../themes/shared/preferences/category-sync.svg | 7 + .../shared/preferences/containers-dialog.css | 50 + browser/themes/shared/preferences/containers.css | 54 + browser/themes/shared/preferences/dialog.css | 42 + browser/themes/shared/preferences/face-sad.svg | 9 + browser/themes/shared/preferences/face-smile.svg | 14 + .../themes/shared/preferences/fxaPairDevice.css | 122 ++ browser/themes/shared/preferences/ios-menu.svg | 6 + browser/themes/shared/preferences/mozilla-logo.svg | 5 + .../themes/shared/preferences/no-search-bar.svg | 20 + browser/themes/shared/preferences/preferences.css | 1471 ++++++++++++++ browser/themes/shared/preferences/privacy.css | 364 ++++ browser/themes/shared/preferences/relay-logo.svg | 7 + .../shared/preferences/search-arrow-indicator.svg | 13 + browser/themes/shared/preferences/search-bar.svg | 25 + browser/themes/shared/preferences/search.css | 100 + .../themes/shared/preferences/siteDataSettings.css | 64 + browser/themes/shared/preferences/vpn-logo.svg | 4 + .../privatebrowsing/aboutPrivateBrowsing.css | 458 +++++ browser/themes/shared/privatebrowsing/favicon.svg | 9 + browser/themes/shared/profiler-popup-backdrop.png | Bin 0 -> 8455 bytes .../shared/protections/breached-password.svg | 6 + browser/themes/shared/protections/new-feature.svg | 10 + .../shared/protections/resolved-breach-gray.svg | 9 + .../themes/shared/protections/resolved-breach.svg | 9 + .../shared/search/search-engine-placeholder.png | Bin 0 -> 252 bytes .../shared/search/search-engine-placeholder@2x.png | Bin 0 -> 461 bytes .../shared/search/search-indicator-badge-add.svg | 8 + browser/themes/shared/searchbar.css | 180 ++ browser/themes/shared/setDesktopBackground.css | 23 + browser/themes/shared/sidebar.css | 135 ++ browser/themes/shared/spotlight.css | 85 + .../swipe-gesture-icons/history-swipe-arrow.svg | 15 + browser/themes/shared/syncedtabs/sidebar.css | 371 ++++ browser/themes/shared/tab-list-tree.css | 50 + browser/themes/shared/tabbrowser/connecting.png | Bin 0 -> 8540 bytes browser/themes/shared/tabbrowser/connecting@2x.png | Bin 0 -> 30143 bytes browser/themes/shared/tabbrowser/crashed.svg | 14 + browser/themes/shared/tabbrowser/hourglass.svg | 9 + browser/themes/shared/tabbrowser/loading-burst.svg | 6 + browser/themes/shared/tabbrowser/loading.svg | 98 + browser/themes/shared/tabbrowser/pendingpaint.png | Bin 0 -> 12955 bytes .../shared/tabbrowser/tab-audio-blocked-small.svg | 7 + .../shared/tabbrowser/tab-audio-muted-small.svg | 7 + .../shared/tabbrowser/tab-audio-playing-small.svg | 7 + .../themes/shared/tabbrowser/tab-connecting.png | Bin 0 -> 5617 bytes .../themes/shared/tabbrowser/tab-connecting@2x.png | Bin 0 -> 7254 bytes .../shared/tabbrowser/tab-drag-indicator.svg | 4 + .../shared/tabbrowser/tab-loading-inverted.png | Bin 0 -> 5598 bytes .../shared/tabbrowser/tab-loading-inverted@2x.png | Bin 0 -> 7216 bytes browser/themes/shared/tabbrowser/tab-loading.png | Bin 0 -> 5598 bytes .../themes/shared/tabbrowser/tab-loading@2x.png | Bin 0 -> 7222 bytes browser/themes/shared/tabs.css | 790 ++++++++ browser/themes/shared/toolbar-drag-indicator.svg | 4 + browser/themes/shared/toolbarbutton-icons.css | 486 +++++ browser/themes/shared/toolbarbuttons.css | 350 ++++ browser/themes/shared/translation/infobar.css | 95 + .../themes/shared/translation/translating-16.png | Bin 0 -> 21270 bytes .../shared/translation/translating-16@2x.png | Bin 0 -> 29889 bytes .../themes/shared/translation/translation-16.png | Bin 0 -> 865 bytes .../shared/translation/translation-16@2x.png | Bin 0 -> 2023 bytes browser/themes/shared/update-badge.svg | 6 + browser/themes/shared/urlbar-dynamic-results.css | 478 +++++ browser/themes/shared/urlbar-searchbar.css | 745 +++++++ browser/themes/shared/urlbarView.css | 850 ++++++++ browser/themes/shared/weather/cloudy.svg | 24 + browser/themes/shared/weather/flurries.svg | 30 + browser/themes/shared/weather/fog.svg | 26 + browser/themes/shared/weather/freezing-rain.svg | 38 + browser/themes/shared/weather/hazy-sunshine.svg | 26 + browser/themes/shared/weather/hot.svg | 39 + browser/themes/shared/weather/ice.svg | 52 + .../shared/weather/mostly-cloudy-with-showers.svg | 41 + .../weather/mostly-cloudy-with-thunderstorms.svg | 36 + browser/themes/shared/weather/mostly-sunny.svg | 32 + browser/themes/shared/weather/night-clear.svg | 17 + .../themes/shared/weather/night-hazy-moonlight.svg | 30 + .../themes/shared/weather/night-mostly-clear.svg | 24 + .../weather/night-mostly-cloudy-with-flurries.svg | 34 + .../weather/night-partly-cloudy-with-showers.svg | 36 + .../night-partly-cloudy-with-thunderstorms.svg | 31 + .../shared/weather/partly-sunny-with-flurries.svg | 42 + browser/themes/shared/weather/partly-sunny.svg | 31 + browser/themes/shared/weather/rain.svg | 26 + browser/themes/shared/weather/showers.svg | 29 + browser/themes/shared/weather/snow.svg | 33 + browser/themes/shared/weather/sunny.svg | 17 + browser/themes/shared/weather/thunderstorms.svg | 31 + browser/themes/shared/weather/windy.svg | 25 + browser/themes/shared/webRTC-indicator.css | 346 ++++ browser/themes/shared/webRTC-legacy-indicator.css | 121 ++ browser/themes/shared/webRTC-menubar-indicator.css | 28 + 374 files changed, 19468 insertions(+) create mode 100644 browser/themes/shared/UITour.css create mode 100644 browser/themes/shared/aboutFrameCrashed.css create mode 100644 browser/themes/shared/aboutRestartRequired.css create mode 100644 browser/themes/shared/aboutSessionRestore.css create mode 100644 browser/themes/shared/aboutTabCrashed.css create mode 100644 browser/themes/shared/aboutWelcomeBack.css create mode 100644 browser/themes/shared/addon-notification.css create mode 100644 browser/themes/shared/addons/addon-install-blocked.svg create mode 100644 browser/themes/shared/addons/addon-install-downloading.svg create mode 100644 browser/themes/shared/addons/addon-install-installed.svg create mode 100644 browser/themes/shared/addons/extension-controlled.css create mode 100644 browser/themes/shared/addons/unified-extensions.css create mode 100644 browser/themes/shared/app-marketplace-icons/LICENSE create mode 100644 browser/themes/shared/app-marketplace-icons/Makefile.in create mode 100644 browser/themes/shared/app-marketplace-icons/af/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ar/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ar/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/az/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/az/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/be/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/bg/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/bg/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/bn-BD/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/bn-IN/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ca/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/cs/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/cs/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/da/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/da/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/de/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/de/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/el/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/el/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/en-US/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/en-US/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/es-ES/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/es-ES/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/et/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/et/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/eu/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/fa/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/fi/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/fi/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/fr/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/fr/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/gl/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/gu-IN/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/he/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/he/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/hi-IN/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/hr/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/hu/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/hu/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/hy-AM/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/id/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/id/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/is/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/it/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/it/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/ja/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ja/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/jar.mn create mode 100644 browser/themes/shared/app-marketplace-icons/ka/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/kk/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/km/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/kn/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ko/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ko/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/lo/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/lt/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/lt/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/lv/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/lv/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/mk/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ml/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/moz.build create mode 100644 browser/themes/shared/app-marketplace-icons/mr/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ms/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ms/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/mt/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/my/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/nb-NO/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/nb-NO/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/ne-NP/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/nl/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/nl/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/nn-NO/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/nn-NO/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/pa-IN/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/pl/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/pl/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/pt-BR/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/pt-BR/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/pt-PT/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/pt-PT/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/ro/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ro/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/ru/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ru/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/si/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/sk/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/sk/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/sl/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/sl/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/sq/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/sr/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/sv-SE/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/sv-SE/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/sw/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ta/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/te/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/th/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/th/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/tr/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/tr/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/uk/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/ur/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/uz/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/vi/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/vi/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/zh-CN/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/zh-CN/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/zh-TW/android.png create mode 100644 browser/themes/shared/app-marketplace-icons/zh-TW/ios.svg create mode 100644 browser/themes/shared/app-marketplace-icons/zu/android.png create mode 100644 browser/themes/shared/autocomplete.css create mode 100644 browser/themes/shared/blockedSite.css create mode 100644 browser/themes/shared/browser-custom-colors.css create mode 100644 browser/themes/shared/browser-shared.css create mode 100644 browser/themes/shared/contextmenu.css create mode 100644 browser/themes/shared/controlcenter/3rdpartycookies.svg create mode 100644 browser/themes/shared/controlcenter/cryptominers.svg create mode 100644 browser/themes/shared/controlcenter/dashboard.svg create mode 100644 browser/themes/shared/controlcenter/etp-milestone.svg create mode 100644 browser/themes/shared/controlcenter/hero-message-background.svg create mode 100644 browser/themes/shared/controlcenter/mcb-disabled.svg create mode 100644 browser/themes/shared/controlcenter/panel.css create mode 100644 browser/themes/shared/controlcenter/tracking-protection.svg create mode 100644 browser/themes/shared/ctrlTab.css create mode 100644 browser/themes/shared/customizableui/customizeMode.css create mode 100644 browser/themes/shared/customizableui/density-compact.svg create mode 100644 browser/themes/shared/customizableui/density-normal.svg create mode 100644 browser/themes/shared/customizableui/density-touch.svg create mode 100644 browser/themes/shared/customizableui/empty-overflow-panel.png create mode 100644 browser/themes/shared/customizableui/empty-overflow-panel@2x.png create mode 100644 browser/themes/shared/customizableui/panelUI-shared.css create mode 100644 browser/themes/shared/customizableui/whimsy.png create mode 100644 browser/themes/shared/downloads/allDownloadsView.inc.css create mode 100644 browser/themes/shared/downloads/contentAreaDownloadsView.css create mode 100644 browser/themes/shared/downloads/download-blockedStates.css create mode 100644 browser/themes/shared/downloads/download-summary.svg create mode 100644 browser/themes/shared/downloads/downloads.inc.css create mode 100644 browser/themes/shared/downloads/downloads.svg create mode 100644 browser/themes/shared/downloads/indicator.css create mode 100644 browser/themes/shared/downloads/notification-finish-animation.svg create mode 100644 browser/themes/shared/downloads/notification-start-animation.svg create mode 100644 browser/themes/shared/downloads/progressmeter.css create mode 100644 browser/themes/shared/drm-icon.svg create mode 100644 browser/themes/shared/e10s-64@2x.png create mode 100644 browser/themes/shared/fullscreen/warning.css create mode 100644 browser/themes/shared/fxa/add-device.svg create mode 100644 browser/themes/shared/fxa/avatar-color.svg create mode 100644 browser/themes/shared/fxa/avatar-empty.svg create mode 100644 browser/themes/shared/fxa/avatar.svg create mode 100644 browser/themes/shared/fxa/fxa-spinner.svg create mode 100644 browser/themes/shared/fxa/monitor.svg create mode 100644 browser/themes/shared/fxa/send-to-device.svg create mode 100644 browser/themes/shared/fxa/send.svg create mode 100644 browser/themes/shared/fxa/sync-devices.svg create mode 100644 browser/themes/shared/fxa/sync-illustration-issue.svg create mode 100644 browser/themes/shared/fxa/sync-illustration.svg create mode 100644 browser/themes/shared/icons/add-circle-fill.svg create mode 100644 browser/themes/shared/icons/back.svg create mode 100644 browser/themes/shared/icons/bookmark-12.svg create mode 100644 browser/themes/shared/icons/bookmark-hollow.svg create mode 100644 browser/themes/shared/icons/bookmark-star-on-tray.svg create mode 100644 browser/themes/shared/icons/bookmark.svg create mode 100644 browser/themes/shared/icons/bookmarks-toolbar.svg create mode 100644 browser/themes/shared/icons/canvas-blocked.svg create mode 100644 browser/themes/shared/icons/canvas.svg create mode 100644 browser/themes/shared/icons/characterEncoding.svg create mode 100644 browser/themes/shared/icons/chevron-animation.svg create mode 100644 browser/themes/shared/icons/customize.svg create mode 100644 browser/themes/shared/icons/device-desktop.svg create mode 100644 browser/themes/shared/icons/device-phone.svg create mode 100644 browser/themes/shared/icons/device-tablet.svg create mode 100644 browser/themes/shared/icons/device-tv.svg create mode 100644 browser/themes/shared/icons/device-vr.svg create mode 100644 browser/themes/shared/icons/edit-cut.svg create mode 100644 browser/themes/shared/icons/edit-paste.svg create mode 100644 browser/themes/shared/icons/fingerprint.svg create mode 100644 browser/themes/shared/icons/forget.svg create mode 100644 browser/themes/shared/icons/forward.svg create mode 100644 browser/themes/shared/icons/fullscreen-exit.svg create mode 100644 browser/themes/shared/icons/fullscreen.svg create mode 100644 browser/themes/shared/icons/history.svg create mode 100644 browser/themes/shared/icons/home.svg create mode 100644 browser/themes/shared/icons/import-export.svg create mode 100644 browser/themes/shared/icons/import.svg create mode 100644 browser/themes/shared/icons/ion.svg create mode 100644 browser/themes/shared/icons/library.svg create mode 100644 browser/themes/shared/icons/login.svg create mode 100644 browser/themes/shared/icons/logo-android.svg create mode 100644 browser/themes/shared/icons/logo-ios.svg create mode 100644 browser/themes/shared/icons/mail.svg create mode 100644 browser/themes/shared/icons/menu-badged.svg create mode 100644 browser/themes/shared/icons/menu.svg create mode 100644 browser/themes/shared/icons/new-tab.svg create mode 100644 browser/themes/shared/icons/notification-fill-12.svg create mode 100644 browser/themes/shared/icons/open.svg create mode 100644 browser/themes/shared/icons/pin-12.svg create mode 100644 browser/themes/shared/icons/privateBrowsing.svg create mode 100644 browser/themes/shared/icons/quickactions.svg create mode 100644 browser/themes/shared/icons/reader-mode.svg create mode 100644 browser/themes/shared/icons/reload-to-stop.svg create mode 100644 browser/themes/shared/icons/save.svg create mode 100644 browser/themes/shared/icons/screenshot.svg create mode 100644 browser/themes/shared/icons/sidebars-right.svg create mode 100644 browser/themes/shared/icons/sidebars.svg create mode 100644 browser/themes/shared/icons/sort.svg create mode 100644 browser/themes/shared/icons/stop-to-reload.svg create mode 100644 browser/themes/shared/icons/subtract-circle-fill.svg create mode 100644 browser/themes/shared/icons/success-animation.svg create mode 100644 browser/themes/shared/icons/sync.svg create mode 100644 browser/themes/shared/icons/synced-tabs.svg create mode 100644 browser/themes/shared/icons/tab.svg create mode 100644 browser/themes/shared/icons/thumb-down.svg create mode 100644 browser/themes/shared/icons/topsites.svg create mode 100644 browser/themes/shared/icons/trending.svg create mode 100644 browser/themes/shared/icons/window.svg create mode 100644 browser/themes/shared/icons/zoom-out.svg create mode 100644 browser/themes/shared/identity-block/identity-block.css create mode 100644 browser/themes/shared/identity-block/permissions.svg create mode 100644 browser/themes/shared/identity-block/tracking-protection-active-brighttext.svg create mode 100644 browser/themes/shared/identity-block/tracking-protection-active.svg create mode 100644 browser/themes/shared/identity-block/tracking-protection-disabled.svg create mode 100644 browser/themes/shared/identity-block/tracking-protection.svg create mode 100644 browser/themes/shared/identity-credential-notification.css create mode 100644 browser/themes/shared/incontent-icons/tab-crashed.svg create mode 100644 browser/themes/shared/jar.inc.mn create mode 100644 browser/themes/shared/light-dark-overrides.css create mode 100644 browser/themes/shared/menupanel.css create mode 100644 browser/themes/shared/migration/migration-dialog.css create mode 100644 browser/themes/shared/migration/migration-wizard.css create mode 100644 browser/themes/shared/notification-icons.css create mode 100644 browser/themes/shared/notification-icons/autoplay-media-blocked.svg create mode 100644 browser/themes/shared/notification-icons/autoplay-media.svg create mode 100644 browser/themes/shared/notification-icons/camera-blocked.svg create mode 100644 browser/themes/shared/notification-icons/camera.svg create mode 100644 browser/themes/shared/notification-icons/desktop-notification-blocked.svg create mode 100644 browser/themes/shared/notification-icons/desktop-notification.svg create mode 100644 browser/themes/shared/notification-icons/drag-indicator.svg create mode 100644 browser/themes/shared/notification-icons/geo-blocked.svg create mode 100644 browser/themes/shared/notification-icons/geo.svg create mode 100644 browser/themes/shared/notification-icons/microphone-blocked.svg create mode 100644 browser/themes/shared/notification-icons/microphone.svg create mode 100644 browser/themes/shared/notification-icons/midi.svg create mode 100644 browser/themes/shared/notification-icons/minimize.svg create mode 100644 browser/themes/shared/notification-icons/persistent-storage-blocked.svg create mode 100644 browser/themes/shared/notification-icons/persistent-storage.svg create mode 100644 browser/themes/shared/notification-icons/plugin-badge.svg create mode 100644 browser/themes/shared/notification-icons/popup.svg create mode 100644 browser/themes/shared/notification-icons/screen-blocked.svg create mode 100644 browser/themes/shared/notification-icons/screen.svg create mode 100644 browser/themes/shared/notification-icons/xr-blocked.svg create mode 100644 browser/themes/shared/notification-icons/xr.svg create mode 100644 browser/themes/shared/panic-panel/header.png create mode 100644 browser/themes/shared/panic-panel/header@2x.png create mode 100644 browser/themes/shared/panic-panel/icons.png create mode 100644 browser/themes/shared/panic-panel/icons@2x.png create mode 100644 browser/themes/shared/places/bookmarksMenu.svg create mode 100644 browser/themes/shared/places/bookmarksToolbar.svg create mode 100644 browser/themes/shared/places/editBookmark.css create mode 100644 browser/themes/shared/places/editBookmarkPanel.css create mode 100644 browser/themes/shared/places/folder-smart.svg create mode 100644 browser/themes/shared/places/sidebar.css create mode 100644 browser/themes/shared/places/tag.svg create mode 100644 browser/themes/shared/places/tree-icons.css create mode 100644 browser/themes/shared/preferences/android-menu.svg create mode 100644 browser/themes/shared/preferences/category-general.svg create mode 100644 browser/themes/shared/preferences/category-privacy-security.svg create mode 100644 browser/themes/shared/preferences/category-search.svg create mode 100644 browser/themes/shared/preferences/category-sync.svg create mode 100644 browser/themes/shared/preferences/containers-dialog.css create mode 100644 browser/themes/shared/preferences/containers.css create mode 100644 browser/themes/shared/preferences/dialog.css create mode 100644 browser/themes/shared/preferences/face-sad.svg create mode 100644 browser/themes/shared/preferences/face-smile.svg create mode 100644 browser/themes/shared/preferences/fxaPairDevice.css create mode 100644 browser/themes/shared/preferences/ios-menu.svg create mode 100644 browser/themes/shared/preferences/mozilla-logo.svg create mode 100644 browser/themes/shared/preferences/no-search-bar.svg create mode 100644 browser/themes/shared/preferences/preferences.css create mode 100644 browser/themes/shared/preferences/privacy.css create mode 100644 browser/themes/shared/preferences/relay-logo.svg create mode 100644 browser/themes/shared/preferences/search-arrow-indicator.svg create mode 100644 browser/themes/shared/preferences/search-bar.svg create mode 100644 browser/themes/shared/preferences/search.css create mode 100644 browser/themes/shared/preferences/siteDataSettings.css create mode 100644 browser/themes/shared/preferences/vpn-logo.svg create mode 100644 browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css create mode 100644 browser/themes/shared/privatebrowsing/favicon.svg create mode 100644 browser/themes/shared/profiler-popup-backdrop.png create mode 100644 browser/themes/shared/protections/breached-password.svg create mode 100644 browser/themes/shared/protections/new-feature.svg create mode 100644 browser/themes/shared/protections/resolved-breach-gray.svg create mode 100644 browser/themes/shared/protections/resolved-breach.svg create mode 100644 browser/themes/shared/search/search-engine-placeholder.png create mode 100644 browser/themes/shared/search/search-engine-placeholder@2x.png create mode 100644 browser/themes/shared/search/search-indicator-badge-add.svg create mode 100644 browser/themes/shared/searchbar.css create mode 100644 browser/themes/shared/setDesktopBackground.css create mode 100644 browser/themes/shared/sidebar.css create mode 100644 browser/themes/shared/spotlight.css create mode 100644 browser/themes/shared/swipe-gesture-icons/history-swipe-arrow.svg create mode 100644 browser/themes/shared/syncedtabs/sidebar.css create mode 100644 browser/themes/shared/tab-list-tree.css create mode 100644 browser/themes/shared/tabbrowser/connecting.png create mode 100644 browser/themes/shared/tabbrowser/connecting@2x.png create mode 100644 browser/themes/shared/tabbrowser/crashed.svg create mode 100644 browser/themes/shared/tabbrowser/hourglass.svg create mode 100644 browser/themes/shared/tabbrowser/loading-burst.svg create mode 100644 browser/themes/shared/tabbrowser/loading.svg create mode 100644 browser/themes/shared/tabbrowser/pendingpaint.png create mode 100644 browser/themes/shared/tabbrowser/tab-audio-blocked-small.svg create mode 100644 browser/themes/shared/tabbrowser/tab-audio-muted-small.svg create mode 100644 browser/themes/shared/tabbrowser/tab-audio-playing-small.svg create mode 100644 browser/themes/shared/tabbrowser/tab-connecting.png create mode 100644 browser/themes/shared/tabbrowser/tab-connecting@2x.png create mode 100644 browser/themes/shared/tabbrowser/tab-drag-indicator.svg create mode 100644 browser/themes/shared/tabbrowser/tab-loading-inverted.png create mode 100644 browser/themes/shared/tabbrowser/tab-loading-inverted@2x.png create mode 100644 browser/themes/shared/tabbrowser/tab-loading.png create mode 100644 browser/themes/shared/tabbrowser/tab-loading@2x.png create mode 100644 browser/themes/shared/tabs.css create mode 100644 browser/themes/shared/toolbar-drag-indicator.svg create mode 100644 browser/themes/shared/toolbarbutton-icons.css create mode 100644 browser/themes/shared/toolbarbuttons.css create mode 100644 browser/themes/shared/translation/infobar.css create mode 100644 browser/themes/shared/translation/translating-16.png create mode 100644 browser/themes/shared/translation/translating-16@2x.png create mode 100644 browser/themes/shared/translation/translation-16.png create mode 100644 browser/themes/shared/translation/translation-16@2x.png create mode 100644 browser/themes/shared/update-badge.svg create mode 100644 browser/themes/shared/urlbar-dynamic-results.css create mode 100644 browser/themes/shared/urlbar-searchbar.css create mode 100644 browser/themes/shared/urlbarView.css create mode 100644 browser/themes/shared/weather/cloudy.svg create mode 100644 browser/themes/shared/weather/flurries.svg create mode 100644 browser/themes/shared/weather/fog.svg create mode 100644 browser/themes/shared/weather/freezing-rain.svg create mode 100644 browser/themes/shared/weather/hazy-sunshine.svg create mode 100644 browser/themes/shared/weather/hot.svg create mode 100644 browser/themes/shared/weather/ice.svg create mode 100644 browser/themes/shared/weather/mostly-cloudy-with-showers.svg create mode 100644 browser/themes/shared/weather/mostly-cloudy-with-thunderstorms.svg create mode 100644 browser/themes/shared/weather/mostly-sunny.svg create mode 100644 browser/themes/shared/weather/night-clear.svg create mode 100644 browser/themes/shared/weather/night-hazy-moonlight.svg create mode 100644 browser/themes/shared/weather/night-mostly-clear.svg create mode 100644 browser/themes/shared/weather/night-mostly-cloudy-with-flurries.svg create mode 100644 browser/themes/shared/weather/night-partly-cloudy-with-showers.svg create mode 100644 browser/themes/shared/weather/night-partly-cloudy-with-thunderstorms.svg create mode 100644 browser/themes/shared/weather/partly-sunny-with-flurries.svg create mode 100644 browser/themes/shared/weather/partly-sunny.svg create mode 100644 browser/themes/shared/weather/rain.svg create mode 100644 browser/themes/shared/weather/showers.svg create mode 100644 browser/themes/shared/weather/snow.svg create mode 100644 browser/themes/shared/weather/sunny.svg create mode 100644 browser/themes/shared/weather/thunderstorms.svg create mode 100644 browser/themes/shared/weather/windy.svg create mode 100644 browser/themes/shared/webRTC-indicator.css create mode 100644 browser/themes/shared/webRTC-legacy-indicator.css create mode 100644 browser/themes/shared/webRTC-menubar-indicator.css (limited to 'browser/themes/shared') diff --git a/browser/themes/shared/UITour.css b/browser/themes/shared/UITour.css new file mode 100644 index 0000000000..3380e7d4a0 --- /dev/null +++ b/browser/themes/shared/UITour.css @@ -0,0 +1,154 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* UI Tour */ + +#UITourHighlightContainer { + appearance: none; + + /* Resets the native styles in windows and macOS */ + border: none; + background-color: transparent; + -moz-window-shadow: none; + + --panel-border-color: transparent; + --panel-background: transparent; + /* This is a buffer to compensate for the movement in the "wobble" effect, + and for the box-shadow of #UITourHighlight. */ + --panel-padding: 4px; + /* Compensate the displacement caused by padding. */ + margin: -4px; +} + +#UITourHighlight { + background-color: rgba(0, 200, 215, 0.3); + min-height: 24px; + min-width: 24px; +} + +#UITourHighlight.rounded-highlight { + border-radius: 4px; +} + +#UITourTooltipBody { + -moz-box-align: start; +} + +#UITourTooltipTitleContainer { + -moz-box-align: start; + margin-bottom: 10px; +} + +#UITourTooltipIcon { + width: 48px; + height: 48px; + margin-inline-end: 10px; +} + +#UITourTooltipTitle, +#UITourTooltipDescription { + max-width: 20rem; +} + +#UITourTooltipTitle { + font-size: 1.45rem; + font-weight: bold; + margin: 0; +} + +#UITourTooltipDescription { + margin-inline: 0; + font-size: 1.15rem; + line-height: 1.8rem; + margin-bottom: 0; /* Override global.css */ +} + +#UITourTooltipClose { + position: relative; + appearance: none; + border: none; + background-color: transparent; + min-width: 0; + margin-inline-start: 4px; + margin-top: -2px; +} + +#UITourTooltipClose > .toolbarbutton-text { + display: none; +} + +#UITourTooltipButtons { + -moz-box-pack: end; + background-color: var(--arrowpanel-dimmed); + border-top: 1px solid var(--panel-separator-color); + margin: 10px -16px -16px; + padding: 16px; +} + +#UITourTooltipButtons > label, +#UITourTooltipButtons > button { + margin: 0 15px; +} + +#UITourTooltipButtons > label:first-child, +#UITourTooltipButtons > button:first-child { + margin-inline-start: 0; +} + +#UITourTooltipButtons > label:last-child, +#UITourTooltipButtons > button:last-child { + margin-inline-end: 0; +} + +#UITourTooltipButtons > button[image] > .button-box > .button-icon { + width: 16px; + height: 16px; + margin-inline-end: 5px; +} + +#UITourTooltipButtons > label, +#UITourTooltipButtons > button .button-text { + font-size: 1.15rem; +} + +#UITourTooltipButtons > button:not(.button-link) { + appearance: none; + background-color: rgb(251,251,251); + border-radius: 3px; + border: 1px solid; + border-color: rgb(192,192,192); + color: rgb(71,71,71); + padding: 4px 30px; + transition-property: background-color, border-color; + transition-duration: 150ms; +} + +#UITourTooltipButtons > button:not(.button-link, :active):hover { + background-color: hsla(210,4%,10%,.15); + border-color: hsla(210,4%,10%,.15); + box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset; +} + +#UITourTooltipButtons > label, +#UITourTooltipButtons > button.button-link:not(:hover) { + appearance: none; + background: transparent; + border: none; + box-shadow: none; + color: var(--panel-disabled-color); + padding-inline: 10px; +} + +/* The primary button gets the same color as the customize button. */ +#UITourTooltipButtons > button.button-primary { + background-color: rgb(116,191,67); + color: white; + padding-inline: 30px; +} + +#UITourTooltipButtons > button.button-primary:not(:active):hover { + background-color: rgb(105,173,61); +} diff --git a/browser/themes/shared/aboutFrameCrashed.css b/browser/themes/shared/aboutFrameCrashed.css new file mode 100644 index 0000000000..f15a4cf10e --- /dev/null +++ b/browser/themes/shared/aboutFrameCrashed.css @@ -0,0 +1,12 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +body { + background-image: url("chrome://browser/skin/tab-crashed.svg"); + background-position: center, center; + background-repeat: no-repeat; + height: 100%; + width: 100%; + background-size: 1.6em; +} diff --git a/browser/themes/shared/aboutRestartRequired.css b/browser/themes/shared/aboutRestartRequired.css new file mode 100644 index 0000000000..1b7c0e595a --- /dev/null +++ b/browser/themes/shared/aboutRestartRequired.css @@ -0,0 +1,19 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/error-pages.css"); + +#header { + background: none; + padding-inline-start: 0; + margin-inline-start: 0; +} + +#text-container { + margin: auto; +} + +#restart { + margin-top: 1.2em; +} diff --git a/browser/themes/shared/aboutSessionRestore.css b/browser/themes/shared/aboutSessionRestore.css new file mode 100644 index 0000000000..4bc69b0122 --- /dev/null +++ b/browser/themes/shared/aboutSessionRestore.css @@ -0,0 +1,55 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://browser/skin/tab-list-tree.css"); + +#tabsToggle { + cursor: pointer; + /* Override button background-color and color from common.css */ + background-color: transparent; + color: var(--in-content-link-color); + -moz-context-properties: fill; + fill: currentColor; + border: none; + padding: 0; + margin: 0; + padding-inline-end: 45px; + position: relative; +} + +#tabsToggle::after { + content: ""; + position: absolute; + width: 100%; + height: 100%; + top: 0; + inset-inline-start: 0; + background-image: url("chrome://global/skin/icons/arrow-down.svg"); + background-repeat: no-repeat; + background-size: 20px; + background-position: right center; +} + +#tabsToggle:dir(rtl)::after { + background-position-x: left; +} + +#tabsToggle:not(.tabs-hidden)::after { + background-image: url("chrome://global/skin/icons/arrow-up.svg"); +} + +#tabsToggle.tabs-hidden > #hideTabs, +#tabsToggle:not(.tabs-hidden) > #showTabs { + display: none; +} + +#tabList { + flex: 1; + min-height: 12em; + margin-top: 1.2em; +} + +.button-container { + text-align: end; +} diff --git a/browser/themes/shared/aboutTabCrashed.css b/browser/themes/shared/aboutTabCrashed.css new file mode 100644 index 0000000000..264e064f6d --- /dev/null +++ b/browser/themes/shared/aboutTabCrashed.css @@ -0,0 +1,40 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +#reportSent { + font-weight: bold; +} + +#reportBox { + background-color: var(--in-content-box-info-background); + margin: 24px 0; + padding: 14px; + border: 1px solid var(--in-content-box-border-color); + border-radius: 2px; +} + +#reportBox > h2:first-child { + margin-top: 0; +} + +input[type="text"], +textarea { + width: 100%; + box-sizing: border-box; + resize: none; +} + +input[type="text"] { + margin-inline-start: 0; +} + +#options { + list-style: none; + margin-inline-start: 0; +} + +#options > li, +#email { + margin-top: 11px; +} diff --git a/browser/themes/shared/aboutWelcomeBack.css b/browser/themes/shared/aboutWelcomeBack.css new file mode 100644 index 0000000000..d9ac643c2a --- /dev/null +++ b/browser/themes/shared/aboutWelcomeBack.css @@ -0,0 +1,15 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://browser/skin/tab-list-tree.css"); + +.radioRestoreContainer:not(:last-child) { + margin-bottom: 0.3em; +} + +#tabList { + flex: 1; + min-height: 12em; + margin-top: 1.2em; +} diff --git a/browser/themes/shared/addon-notification.css b/browser/themes/shared/addon-notification.css new file mode 100644 index 0000000000..0436c3985a --- /dev/null +++ b/browser/themes/shared/addon-notification.css @@ -0,0 +1,54 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +.popup-notification-body[popupid="addon-progress"], +.popup-notification-body[popupid="addon-install-confirmation"] { + width: 28em; + max-width: 28em; +} + +.addon-install-confirmation-name { + font-weight: bold; +} + +html|*.addon-webext-perm-list { + margin-block-end: 0; + padding-inline-start: 10px; +} + +.addon-webext-perm-single-entry { + margin-top: 11px; +} + +.addon-webext-perm-text, +.addon-webext-perm-single-entry { + margin-inline-start: 0; +} + +.popup-notification-description[popupid="addon-webext-permissions"], +.popup-notification-description[popupid="addon-webext-permissions-notification"] { + margin-inline-start: -1px; +} + +.addon-webext-perm-notification-content, +.addon-installed-notification-content { + margin-top: 0; +} + +.addon-installed-notification-content > checkbox { + margin: 8px 4px 2px; +} + +.addon-webext-name { + display: inline; + font-weight: bold; + margin: 0; +} + +.addon-warning-icon { + -moz-context-properties: fill; + fill: #FFBF00; +} diff --git a/browser/themes/shared/addons/addon-install-blocked.svg b/browser/themes/shared/addons/addon-install-blocked.svg new file mode 100644 index 0000000000..b2f739a868 --- /dev/null +++ b/browser/themes/shared/addons/addon-install-blocked.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/addons/addon-install-downloading.svg b/browser/themes/shared/addons/addon-install-downloading.svg new file mode 100644 index 0000000000..2b8ba7cb86 --- /dev/null +++ b/browser/themes/shared/addons/addon-install-downloading.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/addons/addon-install-installed.svg b/browser/themes/shared/addons/addon-install-installed.svg new file mode 100644 index 0000000000..86ebe4975d --- /dev/null +++ b/browser/themes/shared/addons/addon-install-installed.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/addons/extension-controlled.css b/browser/themes/shared/addons/extension-controlled.css new file mode 100644 index 0000000000..69d78373fc --- /dev/null +++ b/browser/themes/shared/addons/extension-controlled.css @@ -0,0 +1,32 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +.extension-controlled-notification > .popup-notification-body-container > .popup-notification-body { + width: 30em; +} + +.extension-controlled-notification > .popup-notification-body-container > .popup-notification-body > hbox > vbox > .popup-notification-description { + font-weight: 600; +} + +.extension-controlled-notification { + margin-bottom: 0; +} + +.extension-controlled-notification popupnotificationcontent > description > .extension-controlled-icon { + height: 16px; + width: 16px; + vertical-align: bottom; +} + +.extension-controlled-icon.alltabs-icon { + background: url("chrome://global/skin/icons/arrow-down.svg"); + /* This icon has a lot of extra space to the sides, reduce that a little. */ + margin: 0 -1px 1px; +} + +.extension-controlled-notification > .popup-notification-body-container > .popup-notification-body > .popup-notification-bottom-content > .popup-notification-warning, +.extension-controlled-notification > .popup-notification-body-container > .popup-notification-icon { + display: none; +} diff --git a/browser/themes/shared/addons/unified-extensions.css b/browser/themes/shared/addons/unified-extensions.css new file mode 100644 index 0000000000..3356695e1e --- /dev/null +++ b/browser/themes/shared/addons/unified-extensions.css @@ -0,0 +1,255 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +:root { + /* uei = unified extensions item */ + --uei-icon-size: 32px; + --uei-attention-dot-size: 8px; + --uei-button-hover-bgcolor: var(--panel-item-hover-bgcolor); + --uei-button-hover-color: inherit; + --uei-button-active-bgcolor: var(--panel-item-active-bgcolor); + --uei-button-active-color: inherit; + --uei-button-attention-dot-color: var(--tab-attention-icon-color); +} + +:root[uidensity="compact"] { + --uei-icon-size: 24px; +} + +#unified-extensions-panel { + --uei-dot-horizontal-position-in-panel: calc(var(--uei-icon-size) / 2 + var(--arrowpanel-menuitem-padding-inline) - var(--uei-attention-dot-size) / 2); + --uei-dot-vertical-position-in-panel: max(0px, calc(var(--arrowpanel-menuitem-padding-block) / 2 - var(--uei-attention-dot-size) / 2)); +} + +/* Align extensions rendered with custom elements. */ +unified-extensions-item { + display: flex; + align-items: center; +} + +#unified-extensions-panel .unified-extensions-item { + /* Have some spacing between items in the panel; mainly useful for when HCM is enabled. */ + padding-block: 2px; +} + +/* The "attention UI" for the unified extensions is based on: + * https://searchfox.org/mozilla-central/rev/560b7b1b17/browser/themes/shared/tabs.css#624 */ + +/* On the main unified extensions button, we draw the attention on the icon element. */ +#unified-extensions-button[attention] > .toolbarbutton-icon, +/* For extension widgets placed in a toolbar, we use the stack element (containing the icon) + * of the action button to draw the attention dot. + * Otherwise (in the extensions panel), we use the action button itself. */ +toolbar .unified-extensions-item[attention] > .unified-extensions-item-action-button > .toolbarbutton-badge-stack, +#unified-extensions-panel .unified-extensions-item[attention] > .unified-extensions-item-action-button, +.widget-overflow-list .unified-extensions-item[attention][unified-extensions="false"] > .unified-extensions-item-action-button { + background-image: radial-gradient(circle, var(--uei-button-attention-dot-color), var(--uei-button-attention-dot-color) 2px, transparent 2px); + background-size: var(--uei-attention-dot-size) var(--uei-attention-dot-size); + background-repeat: no-repeat; +} + +/* Adjust attention dots position in the toolbar. */ +#unified-extensions-button[attention] > .toolbarbutton-icon, +toolbar .unified-extensions-item[attention] > .unified-extensions-item-action-button > .toolbarbutton-badge-stack { + background-position: center bottom calc(var(--toolbarbutton-inner-padding) / 2 - var(--uei-attention-dot-size) / 2); +} + +/* Adjust attention dots position in the unified extensions panel. */ +#unified-extensions-panel .unified-extensions-item[attention] > .unified-extensions-item-action-button { + background-position: left var(--uei-dot-horizontal-position-in-panel) bottom var(--uei-dot-vertical-position-in-panel); +} + +/* Adjust attention dots position in the unified extensions panel for RTL. */ +#unified-extensions-panel .unified-extensions-item[attention] > .unified-extensions-item-action-button:-moz-locale-dir(rtl) { + background-position-x: right var(--uei-dot-horizontal-position-in-panel); +} + +/* Adjust attention dots position in the overflow panel. */ +.widget-overflow-list .unified-extensions-item[attention][unified-extensions="false"] > .unified-extensions-item-action-button { + background-position-x: left calc(16px / 2 + var(--arrowpanel-menuitem-padding-inline) - var(--uei-attention-dot-size) / 2); + background-position-y: bottom calc(var(--arrowpanel-menuitem-padding-block) / 2 - var(--uei-attention-dot-size) / 2); +} + +:root[uidensity="compact"] .widget-overflow-list .unified-extensions-item[attention][unified-extensions="false"] > .unified-extensions-item-action-button { + background-position-y: bottom -2px; +} + +/* Adjust attention dots position in the overflow panel for RTL. */ +.widget-overflow-list toolbaritem.unified-extensions-item[attention][unified-extensions="false"] > .unified-extensions-item-action-button:-moz-locale-dir(rtl) { + background-position-x: right calc(16px / 2 + var(--arrowpanel-menuitem-padding-inline) - var(--uei-attention-dot-size) / 2); +} + +.unified-extensions-item-action-button { + overflow: hidden; + background-color: transparent; +} + +/* The padding-block for menuitems is set to 0 in compact mode which, with the + * extension icon being 32px in this case, makes the item look crowded even for + * compact mode. */ +:root[uidensity="compact"] panel:not([touchmode]) .unified-extensions-item-action-button { + padding-block: 4px; +} + +.unified-extensions-item-action-button[disabled].subviewbutton { + color: var(--panel-description-color); +} + +.unified-extensions-item-action-button[disabled] .unified-extensions-item-icon { + opacity: 0.5; +} + +.unified-extensions-item-icon, +/* When the unified extensions pref is enabled, we also want to increase the + * size of the icons in the extension CUI widgets. */ +panel .unified-extensions-item[unified-extensions="true"] .webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-icon { + height: var(--uei-icon-size); + width: var(--uei-icon-size); +} + +/* The first selector is for the custom elements icon, which appears only in the UEP. */ +.unified-extensions-item-icon, +panel .unified-extensions-item[unified-extensions="true"] .webextension-browser-action > .toolbarbutton-badge-stack { + margin-inline-end: 6px; +} + +.unified-extensions-item-icon, +.unified-extensions-item-contents { + pointer-events: none; +} + +.unified-extensions-item-name, +.unified-extensions-item-message { + margin: 0; + padding-inline-start: .5em; + width: 22em; + word-break: break-word; +} + +.unified-extensions-item-message { + color: var(--panel-description-color); +} + +.unified-extensions-item-menu-button.subviewbutton { + list-style-image: url("chrome://global/skin/icons/settings.svg"); + margin: 0; + margin-inline-end: var(--arrowpanel-menuitem-margin-inline); + /* Have the icon even padding all around by default */ + padding: var(--arrowpanel-menuitem-padding-inline); + border: 1px solid transparent; + background-color: transparent; +} + +.unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-text { + display: none; +} + +/* --- browser action CUI widget styles --- */ + +/* Hide secondary (menu) button when the widget is in the list of widgets in + * customization mode. */ +toolbaritem.unified-extensions-item:not([cui-areatype="panel"], [overflowedItem=true]) .unified-extensions-item-menu-button { + display: none; +} + +/* Hide subviewbutton label by default, it should only be shown in the old + * overflow panel and the palette. */ +toolbaritem.unified-extensions-item[cui-areatype="toolbar"] .toolbarbutton-text, +#unified-extensions-area > toolbaritem.unified-extensions-item .toolbarbutton-text { + display: none; +} + +/* Hide unified extensions content by default, unless the item is overflowed or in + * a panel. Also hide this content if the item is visible in customize mode. */ +toolbaritem.unified-extensions-item:not([overflowedItem="true"], [cui-areatype="panel"]) .unified-extensions-item-contents, +toolbarpaletteitem > toolbaritem.unified-extensions-item .unified-extensions-item-contents { + display: none; +} + +toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton { + -moz-box-flex: 0; + margin-inline-start: var(--arrowpanel-menuitem-margin-inline); + padding: var(--arrowpanel-menuitem-padding); + border: 1px solid transparent; +} + +/* When the unified extensions pref is set, we want to always have a "large" + * menu button, even on compact mode since each extension has two lines of text + * anyway (extension name and message). */ +toolbaritem.unified-extensions-item[unified-extensions="true"] .unified-extensions-item-menu-button.subviewbutton { + padding: 8px; +} + +/* --- browser action CUI widget styles in the overflow/unified extensions panel --- */ + +/* Align CUI widgets with the custom elements in the unified extensions panel. */ +#unified-extensions-panel toolbaritem.unified-extensions-item { + max-width: max-content; +} + +/* Show CUI widget label in overflow panel when the unified extensions pref is + * not set. */ +.widget-overflow-list toolbaritem.unified-extensions-item[unified-extensions="false"] .unified-extensions-item-action-button .toolbarbutton-text { + text-align: start; + display: block; +} + +@media (prefers-contrast) { + :root { + --uei-button-attention-dot-color: ButtonText; + } + + #unified-extensions-panel :is( + .unified-extensions-item-action-button:not([disabled]).subviewbutton, + .unified-extensions-item-menu-button.subviewbutton, + toolbaritem.unified-extensions-item .unified-extensions-item-action-button:not([disabled]).subviewbutton, + toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton + ) { + border-color: currentColor; + background-color: ButtonFace; + color: ButtonText; + --uei-button-hover-bgcolor: SelectedItem; + --uei-button-hover-color: SelectedItemText; + --uei-button-active-bgcolor: ButtonFace; + --uei-button-active-color: ButtonText; + } + + #unified-extensions-panel .unified-extensions-item-action-button[disabled].subviewbutton { + background-color: Canvas; + color: GrayText; + } + + .unified-extensions-item-action-button[disabled] .unified-extensions-item-message { + color: GrayText; + } + + .unified-extensions-item-action-button:not([disabled]) .unified-extensions-item-message { + color: ButtonText; + } + + .unified-extensions-item-action-button:not([disabled]):hover .unified-extensions-item-message { + color: inherit; + } + + #unified-extensions-panel :is( + .unified-extensions-item-action-button:not([disabled]).subviewbutton, + .unified-extensions-item-menu-button.subviewbutton, + toolbaritem.unified-extensions-item .unified-extensions-item-action-button:not([disabled]).subviewbutton, + toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton + ):hover:not(:active) { + background-color: var(--uei-button-hover-bgcolor); + color: var(--uei-button-hover-color); + border-color: var(--uei-button-hover-bgcolor); + } + + #unified-extensions-panel :is( + .unified-extensions-item-action-button:not([disabled]).subviewbutton, + .unified-extensions-item-menu-button.subviewbutton, + toolbaritem.unified-extensions-item .unified-extensions-item-action-button:not([disabled]).subviewbutton, + toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton + ):hover:active { + background-color: var(--uei-button-active-bgcolor); + color: var(--uei-button-active-color); + } +} diff --git a/browser/themes/shared/app-marketplace-icons/LICENSE b/browser/themes/shared/app-marketplace-icons/LICENSE new file mode 100644 index 0000000000..6efe8a3cc9 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/LICENSE @@ -0,0 +1 @@ +Files in this folder include material that may be protected as a trademark in some jurisdictions. diff --git a/browser/themes/shared/app-marketplace-icons/Makefile.in b/browser/themes/shared/app-marketplace-icons/Makefile.in new file mode 100644 index 0000000000..0e7114ca06 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/Makefile.in @@ -0,0 +1,26 @@ +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +include $(topsrcdir)/config/rules.mk + +# Note: `Makefile.in` is not allowed to modify `DEFINES`, so we modify +# `MAKE_JAR_FLAGS` directly. + +# Note: we use 'es-ES' badge for all Spanish locales like in Bedrock. +# See https://github.com/mozilla/bedrock/blob/67fd925b4d621dde0e48e27738c4b9c397ac5169/bedrock/mozorg/templatetags/misc.py#L58. + +# Note: it's probably possible to format these lists so they're easier to +# modify. + +ifneq (,$(filter es%,$(AB_CD))) +MAKE_JARS_FLAGS += -DANDROID_MARKETPLACE_AB_CD=es-ES +MAKE_JARS_FLAGS += -DIOS_MARKETPLACE_AB_CD=es-ES +else +ifneq (,$(filter $(AB_CD),af ar az be bg bn-BD bn-IN ca cs da de el es-ES et eu fa fi fr gl gu-IN he hi-IN hr hu hy-AM id is it ja ka kk km kn ko lo lt lv mk ml mr ms my nb-NO ne-NP nl nn-NO pa-IN pl pt-BR pt-PT ro ru si sk sl sq sr sv-SE sw ta te th tr uk ur uz vi zh-CN zh-TW zu)) +MAKE_JARS_FLAGS += -DANDROID_MARKETPLACE_AB_CD=$(AB_CD) +endif # Android, does not start with es. +ifneq (,$(filter $(AB_CD),ar az bg cs da de el es-ES et fi fr he hu id it ja ko lt lv ms mt nb-NO nl nn-NO pl pt-BR pt-PT ro ru sk sl sv-SE th tr vi zh-CN zh-TW)) +MAKE_JARS_FLAGS += -DIOS_MARKETPLACE_AB_CD=$(AB_CD) +endif # iOS, does not start with es. +endif # starts with es. diff --git a/browser/themes/shared/app-marketplace-icons/af/android.png b/browser/themes/shared/app-marketplace-icons/af/android.png new file mode 100644 index 0000000000..beb0f90228 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/af/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ar/android.png b/browser/themes/shared/app-marketplace-icons/ar/android.png new file mode 100644 index 0000000000..32541d672f Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ar/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ar/ios.svg b/browser/themes/shared/app-marketplace-icons/ar/ios.svg new file mode 100644 index 0000000000..8bcd76a996 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/ar/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/az/android.png b/browser/themes/shared/app-marketplace-icons/az/android.png new file mode 100644 index 0000000000..0f3a854c74 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/az/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/az/ios.svg b/browser/themes/shared/app-marketplace-icons/az/ios.svg new file mode 100644 index 0000000000..46bf593543 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/az/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/be/android.png b/browser/themes/shared/app-marketplace-icons/be/android.png new file mode 100644 index 0000000000..fc0ff894db Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/be/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/bg/android.png b/browser/themes/shared/app-marketplace-icons/bg/android.png new file mode 100644 index 0000000000..204b3e4303 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/bg/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/bg/ios.svg b/browser/themes/shared/app-marketplace-icons/bg/ios.svg new file mode 100644 index 0000000000..df80f3c5e1 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/bg/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/bn-BD/android.png b/browser/themes/shared/app-marketplace-icons/bn-BD/android.png new file mode 100644 index 0000000000..4e2b6da628 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/bn-BD/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/bn-IN/android.png b/browser/themes/shared/app-marketplace-icons/bn-IN/android.png new file mode 100644 index 0000000000..4e2b6da628 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/bn-IN/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ca/android.png b/browser/themes/shared/app-marketplace-icons/ca/android.png new file mode 100644 index 0000000000..a184cebc00 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ca/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/cs/android.png b/browser/themes/shared/app-marketplace-icons/cs/android.png new file mode 100644 index 0000000000..2fbe5e7e9d Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/cs/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/cs/ios.svg b/browser/themes/shared/app-marketplace-icons/cs/ios.svg new file mode 100644 index 0000000000..a3baabc173 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/cs/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/da/android.png b/browser/themes/shared/app-marketplace-icons/da/android.png new file mode 100644 index 0000000000..b6bab10959 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/da/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/da/ios.svg b/browser/themes/shared/app-marketplace-icons/da/ios.svg new file mode 100644 index 0000000000..1a47f8bca8 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/da/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/de/android.png b/browser/themes/shared/app-marketplace-icons/de/android.png new file mode 100644 index 0000000000..eef59de69a Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/de/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/de/ios.svg b/browser/themes/shared/app-marketplace-icons/de/ios.svg new file mode 100644 index 0000000000..523e8114b1 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/de/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/el/android.png b/browser/themes/shared/app-marketplace-icons/el/android.png new file mode 100644 index 0000000000..9161f086b6 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/el/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/el/ios.svg b/browser/themes/shared/app-marketplace-icons/el/ios.svg new file mode 100644 index 0000000000..82505aa3f4 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/el/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/en-US/android.png b/browser/themes/shared/app-marketplace-icons/en-US/android.png new file mode 100644 index 0000000000..ce3f0f4933 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/en-US/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/en-US/ios.svg b/browser/themes/shared/app-marketplace-icons/en-US/ios.svg new file mode 100644 index 0000000000..e525da53e4 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/en-US/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/es-ES/android.png b/browser/themes/shared/app-marketplace-icons/es-ES/android.png new file mode 100644 index 0000000000..7589829d5d Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/es-ES/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/es-ES/ios.svg b/browser/themes/shared/app-marketplace-icons/es-ES/ios.svg new file mode 100644 index 0000000000..8311e5e714 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/es-ES/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/et/android.png b/browser/themes/shared/app-marketplace-icons/et/android.png new file mode 100644 index 0000000000..1a65656d60 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/et/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/et/ios.svg b/browser/themes/shared/app-marketplace-icons/et/ios.svg new file mode 100644 index 0000000000..da2884ae78 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/et/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/eu/android.png b/browser/themes/shared/app-marketplace-icons/eu/android.png new file mode 100644 index 0000000000..db991b0ca8 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/eu/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/fa/android.png b/browser/themes/shared/app-marketplace-icons/fa/android.png new file mode 100644 index 0000000000..086832e42a Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/fa/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/fi/android.png b/browser/themes/shared/app-marketplace-icons/fi/android.png new file mode 100644 index 0000000000..ce3f0f4933 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/fi/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/fi/ios.svg b/browser/themes/shared/app-marketplace-icons/fi/ios.svg new file mode 100644 index 0000000000..b843470b72 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/fi/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/fr/android.png b/browser/themes/shared/app-marketplace-icons/fr/android.png new file mode 100644 index 0000000000..7b8372b203 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/fr/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/fr/ios.svg b/browser/themes/shared/app-marketplace-icons/fr/ios.svg new file mode 100644 index 0000000000..676e7cbc86 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/fr/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/gl/android.png b/browser/themes/shared/app-marketplace-icons/gl/android.png new file mode 100644 index 0000000000..0da16b89bb Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/gl/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/gu-IN/android.png b/browser/themes/shared/app-marketplace-icons/gu-IN/android.png new file mode 100644 index 0000000000..7dc446f58b Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/gu-IN/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/he/android.png b/browser/themes/shared/app-marketplace-icons/he/android.png new file mode 100644 index 0000000000..9177c5469f Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/he/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/he/ios.svg b/browser/themes/shared/app-marketplace-icons/he/ios.svg new file mode 100644 index 0000000000..4994a2682b --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/he/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/hi-IN/android.png b/browser/themes/shared/app-marketplace-icons/hi-IN/android.png new file mode 100644 index 0000000000..eafcb92ad7 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/hi-IN/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/hr/android.png b/browser/themes/shared/app-marketplace-icons/hr/android.png new file mode 100644 index 0000000000..3e8f2b5b84 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/hr/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/hu/android.png b/browser/themes/shared/app-marketplace-icons/hu/android.png new file mode 100644 index 0000000000..c965eaa058 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/hu/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/hu/ios.svg b/browser/themes/shared/app-marketplace-icons/hu/ios.svg new file mode 100644 index 0000000000..f01e689a1e --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/hu/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/hy-AM/android.png b/browser/themes/shared/app-marketplace-icons/hy-AM/android.png new file mode 100644 index 0000000000..c383a8ce9d Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/hy-AM/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/id/android.png b/browser/themes/shared/app-marketplace-icons/id/android.png new file mode 100644 index 0000000000..9f603f02a1 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/id/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/id/ios.svg b/browser/themes/shared/app-marketplace-icons/id/ios.svg new file mode 100644 index 0000000000..a6a69865cc --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/id/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/is/android.png b/browser/themes/shared/app-marketplace-icons/is/android.png new file mode 100644 index 0000000000..1e4d7478eb Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/is/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/it/android.png b/browser/themes/shared/app-marketplace-icons/it/android.png new file mode 100644 index 0000000000..85b5df99df Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/it/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/it/ios.svg b/browser/themes/shared/app-marketplace-icons/it/ios.svg new file mode 100644 index 0000000000..6e1e4394e5 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/it/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/ja/android.png b/browser/themes/shared/app-marketplace-icons/ja/android.png new file mode 100644 index 0000000000..5ed3cadd17 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ja/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ja/ios.svg b/browser/themes/shared/app-marketplace-icons/ja/ios.svg new file mode 100644 index 0000000000..2385a32c1c --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/ja/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/jar.mn b/browser/themes/shared/app-marketplace-icons/jar.mn new file mode 100644 index 0000000000..e201dad135 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/jar.mn @@ -0,0 +1,17 @@ +#filter substitution +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +browser.jar: +% locale app-marketplace-icons @AB_CD@ %locale/@AB_CD@/app-marketplace-icons/ +#if defined(ANDROID_MARKETPLACE_AB_CD) + locale/@AB_CD@/app-marketplace-icons/android.png (@ANDROID_MARKETPLACE_AB_CD@/android.png) +#else + locale/@AB_CD@/app-marketplace-icons/android.png (en-US/android.png) +#endif +#if defined(IOS_MARKETPLACE_AB_CD) + locale/@AB_CD@/app-marketplace-icons/ios.svg (@IOS_MARKETPLACE_AB_CD@/ios.svg) +#else + locale/@AB_CD@/app-marketplace-icons/ios.svg (en-US/ios.svg) +#endif diff --git a/browser/themes/shared/app-marketplace-icons/ka/android.png b/browser/themes/shared/app-marketplace-icons/ka/android.png new file mode 100644 index 0000000000..4717fffd19 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ka/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/kk/android.png b/browser/themes/shared/app-marketplace-icons/kk/android.png new file mode 100644 index 0000000000..36266d750c Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/kk/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/km/android.png b/browser/themes/shared/app-marketplace-icons/km/android.png new file mode 100644 index 0000000000..4529924e7d Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/km/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/kn/android.png b/browser/themes/shared/app-marketplace-icons/kn/android.png new file mode 100644 index 0000000000..0b57399581 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/kn/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ko/android.png b/browser/themes/shared/app-marketplace-icons/ko/android.png new file mode 100644 index 0000000000..b0c0c496bf Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ko/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ko/ios.svg b/browser/themes/shared/app-marketplace-icons/ko/ios.svg new file mode 100644 index 0000000000..aba6865915 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/ko/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/lo/android.png b/browser/themes/shared/app-marketplace-icons/lo/android.png new file mode 100644 index 0000000000..ea2eaa3ffb Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/lo/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/lt/android.png b/browser/themes/shared/app-marketplace-icons/lt/android.png new file mode 100644 index 0000000000..7ad323fb97 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/lt/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/lt/ios.svg b/browser/themes/shared/app-marketplace-icons/lt/ios.svg new file mode 100644 index 0000000000..dc3e080ee2 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/lt/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/lv/android.png b/browser/themes/shared/app-marketplace-icons/lv/android.png new file mode 100644 index 0000000000..828f6bd659 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/lv/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/lv/ios.svg b/browser/themes/shared/app-marketplace-icons/lv/ios.svg new file mode 100644 index 0000000000..45aa7eb35e --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/lv/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/mk/android.png b/browser/themes/shared/app-marketplace-icons/mk/android.png new file mode 100644 index 0000000000..e3f7f0a856 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/mk/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ml/android.png b/browser/themes/shared/app-marketplace-icons/ml/android.png new file mode 100644 index 0000000000..5debb8c1a1 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ml/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/moz.build b/browser/themes/shared/app-marketplace-icons/moz.build new file mode 100644 index 0000000000..d988c0ff9b --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/moz.build @@ -0,0 +1,7 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +JAR_MANIFESTS += ["jar.mn"] diff --git a/browser/themes/shared/app-marketplace-icons/mr/android.png b/browser/themes/shared/app-marketplace-icons/mr/android.png new file mode 100644 index 0000000000..ca00f14064 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/mr/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ms/android.png b/browser/themes/shared/app-marketplace-icons/ms/android.png new file mode 100644 index 0000000000..e6c25272c0 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ms/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ms/ios.svg b/browser/themes/shared/app-marketplace-icons/ms/ios.svg new file mode 100644 index 0000000000..b8e2904aa7 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/ms/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/mt/ios.svg b/browser/themes/shared/app-marketplace-icons/mt/ios.svg new file mode 100644 index 0000000000..3f68a2fe59 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/mt/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/my/android.png b/browser/themes/shared/app-marketplace-icons/my/android.png new file mode 100644 index 0000000000..0f90e2d8e4 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/my/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/nb-NO/android.png b/browser/themes/shared/app-marketplace-icons/nb-NO/android.png new file mode 100644 index 0000000000..1bf3d31a1e Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/nb-NO/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/nb-NO/ios.svg b/browser/themes/shared/app-marketplace-icons/nb-NO/ios.svg new file mode 100644 index 0000000000..5a3831467f --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/nb-NO/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/ne-NP/android.png b/browser/themes/shared/app-marketplace-icons/ne-NP/android.png new file mode 100644 index 0000000000..ac4d645359 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ne-NP/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/nl/android.png b/browser/themes/shared/app-marketplace-icons/nl/android.png new file mode 100644 index 0000000000..3521f86305 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/nl/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/nl/ios.svg b/browser/themes/shared/app-marketplace-icons/nl/ios.svg new file mode 100644 index 0000000000..1d11155096 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/nl/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/nn-NO/android.png b/browser/themes/shared/app-marketplace-icons/nn-NO/android.png new file mode 100644 index 0000000000..1bf3d31a1e Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/nn-NO/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/nn-NO/ios.svg b/browser/themes/shared/app-marketplace-icons/nn-NO/ios.svg new file mode 100644 index 0000000000..5a3831467f --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/nn-NO/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/pa-IN/android.png b/browser/themes/shared/app-marketplace-icons/pa-IN/android.png new file mode 100644 index 0000000000..12ccc49e4a Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/pa-IN/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/pl/android.png b/browser/themes/shared/app-marketplace-icons/pl/android.png new file mode 100644 index 0000000000..2229bade13 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/pl/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/pl/ios.svg b/browser/themes/shared/app-marketplace-icons/pl/ios.svg new file mode 100644 index 0000000000..1af1327869 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/pl/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/pt-BR/android.png b/browser/themes/shared/app-marketplace-icons/pt-BR/android.png new file mode 100644 index 0000000000..951cd7457f Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/pt-BR/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/pt-BR/ios.svg b/browser/themes/shared/app-marketplace-icons/pt-BR/ios.svg new file mode 100644 index 0000000000..6e27d3f95e --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/pt-BR/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/pt-PT/android.png b/browser/themes/shared/app-marketplace-icons/pt-PT/android.png new file mode 100644 index 0000000000..951cd7457f Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/pt-PT/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/pt-PT/ios.svg b/browser/themes/shared/app-marketplace-icons/pt-PT/ios.svg new file mode 100644 index 0000000000..685deb4e01 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/pt-PT/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/ro/android.png b/browser/themes/shared/app-marketplace-icons/ro/android.png new file mode 100644 index 0000000000..ee3b5be037 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ro/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ro/ios.svg b/browser/themes/shared/app-marketplace-icons/ro/ios.svg new file mode 100644 index 0000000000..a573bdd50d --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/ro/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/ru/android.png b/browser/themes/shared/app-marketplace-icons/ru/android.png new file mode 100644 index 0000000000..427d8701b4 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ru/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ru/ios.svg b/browser/themes/shared/app-marketplace-icons/ru/ios.svg new file mode 100644 index 0000000000..c7494a14d7 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/ru/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/si/android.png b/browser/themes/shared/app-marketplace-icons/si/android.png new file mode 100644 index 0000000000..397e9ff7c4 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/si/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/sk/android.png b/browser/themes/shared/app-marketplace-icons/sk/android.png new file mode 100644 index 0000000000..6efaf531f7 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/sk/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/sk/ios.svg b/browser/themes/shared/app-marketplace-icons/sk/ios.svg new file mode 100644 index 0000000000..bbb4c21551 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/sk/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/sl/android.png b/browser/themes/shared/app-marketplace-icons/sl/android.png new file mode 100644 index 0000000000..817e823f25 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/sl/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/sl/ios.svg b/browser/themes/shared/app-marketplace-icons/sl/ios.svg new file mode 100644 index 0000000000..854a63d4f1 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/sl/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/sq/android.png b/browser/themes/shared/app-marketplace-icons/sq/android.png new file mode 100644 index 0000000000..f3340e74aa Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/sq/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/sr/android.png b/browser/themes/shared/app-marketplace-icons/sr/android.png new file mode 100644 index 0000000000..b91d2c0749 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/sr/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/sv-SE/android.png b/browser/themes/shared/app-marketplace-icons/sv-SE/android.png new file mode 100644 index 0000000000..b6e1693169 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/sv-SE/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/sv-SE/ios.svg b/browser/themes/shared/app-marketplace-icons/sv-SE/ios.svg new file mode 100644 index 0000000000..243486903e --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/sv-SE/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/sw/android.png b/browser/themes/shared/app-marketplace-icons/sw/android.png new file mode 100644 index 0000000000..75cb4991fd Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/sw/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ta/android.png b/browser/themes/shared/app-marketplace-icons/ta/android.png new file mode 100644 index 0000000000..6f5f900b22 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ta/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/te/android.png b/browser/themes/shared/app-marketplace-icons/te/android.png new file mode 100644 index 0000000000..49a74c3082 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/te/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/th/android.png b/browser/themes/shared/app-marketplace-icons/th/android.png new file mode 100644 index 0000000000..81443611e6 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/th/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/th/ios.svg b/browser/themes/shared/app-marketplace-icons/th/ios.svg new file mode 100644 index 0000000000..ec16f437ca --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/th/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/tr/android.png b/browser/themes/shared/app-marketplace-icons/tr/android.png new file mode 100644 index 0000000000..93d6731d93 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/tr/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/tr/ios.svg b/browser/themes/shared/app-marketplace-icons/tr/ios.svg new file mode 100644 index 0000000000..ea44575d42 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/tr/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/uk/android.png b/browser/themes/shared/app-marketplace-icons/uk/android.png new file mode 100644 index 0000000000..5c113c3082 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/uk/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ur/android.png b/browser/themes/shared/app-marketplace-icons/ur/android.png new file mode 100644 index 0000000000..2e8e12539b Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ur/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/uz/android.png b/browser/themes/shared/app-marketplace-icons/uz/android.png new file mode 100644 index 0000000000..2cc63078d0 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/uz/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/vi/android.png b/browser/themes/shared/app-marketplace-icons/vi/android.png new file mode 100644 index 0000000000..c9db5debfb Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/vi/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/vi/ios.svg b/browser/themes/shared/app-marketplace-icons/vi/ios.svg new file mode 100644 index 0000000000..37b674202c --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/vi/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/zh-CN/android.png b/browser/themes/shared/app-marketplace-icons/zh-CN/android.png new file mode 100644 index 0000000000..02c6d7345c Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/zh-CN/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/zh-CN/ios.svg b/browser/themes/shared/app-marketplace-icons/zh-CN/ios.svg new file mode 100644 index 0000000000..d997375067 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/zh-CN/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/zh-TW/android.png b/browser/themes/shared/app-marketplace-icons/zh-TW/android.png new file mode 100644 index 0000000000..d292082e96 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/zh-TW/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/zh-TW/ios.svg b/browser/themes/shared/app-marketplace-icons/zh-TW/ios.svg new file mode 100644 index 0000000000..b5956135de --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/zh-TW/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/zu/android.png b/browser/themes/shared/app-marketplace-icons/zu/android.png new file mode 100644 index 0000000000..3526174e04 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/zu/android.png differ diff --git a/browser/themes/shared/autocomplete.css b/browser/themes/shared/autocomplete.css new file mode 100644 index 0000000000..f7c0721635 --- /dev/null +++ b/browser/themes/shared/autocomplete.css @@ -0,0 +1,167 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* General popup rules */ + +#PopupAutoComplete > richlistbox > richlistitem { + min-height: 20px; + border: 0; + border-radius: 0; + padding: 0 1px; +} + +#PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon { + margin-inline: 4px 0; +} + +#PopupAutoComplete > richlistbox > richlistitem > .ac-title { + font: icon; + margin-inline-start: 4px; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="importableLearnMore"] { + padding-bottom: 2px; + padding-inline-start: 21px; +} + +#PopupAutoComplete > richlistbox { + padding: 0; +} + +/* Popup states */ + +.autocomplete-richlistitem:hover { + background-color: var(--arrowpanel-dimmed); +} + +.autocomplete-richlistitem[selected] { + background-color: SelectedItem; + color: SelectedItemText; +} + +/* Autocomplete richlistitem support for a two-line label display */ + +#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper { + box-sizing: border-box; + display: flex; + flex-direction: row; + margin: 0; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="possible-username"] > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper > .ac-site-icon { + display: block; + margin-inline: 4px; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="possible-username"] > .ac-site-icon { + visibility: hidden; +} + +#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper > .labels-wrapper { + /* The text should flex while the icon should not */ + flex: 1; + /* width/min-width are needed to get the text-overflow: ellipsis to work for the children */ + min-width: 0; + width: 0; +} + +#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper > .labels-wrapper > .label-row { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .labels-wrapper > .generated-password-autosave, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="importableLearnMore"] > .ac-title, +#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper > .labels-wrapper > .line2-label { + padding-top: 2px !important; + opacity: .6; +} + +/* Login form autocompletion (with and without origin showing) and generated passwords */ +#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon { + fill: GrayText; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="importableLogins"] > .two-line-wrapper > .ac-site-icon { + fill: GrayText; + list-style-image: url(chrome://browser/skin/import.svg); +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"][selected] > .two-line-wrapper > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="importableLogins"][selected] > .two-line-wrapper > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"][selected] > .two-line-wrapper > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] { + fill: SelectedItemText; +} + +/* Login form autocompletion */ +#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper { + padding: 4px; + padding-inline-start: 0; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"]:not([collapsed="true"]) { + /* Workaround bug 451997 and/or bug 492645 */ + display: block; +} + + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .labels-wrapper > .line2-label > span { + /* The font-family is only adjusted on the inner span so that the + line-height of .line2-label matches that of .line1-label */ + font-family: monospace; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .labels-wrapper > .generated-password-autosave > span { + /* The font-* properties are only adjusted on the inner span so that the + line-height of .generated-password-autosave matches that of .line1-label */ + font-style: italic; + font-size: 0.85em; + white-space: normal; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] + richlistitem[originaltype="generatedPassword"], +#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] + richlistitem[originaltype="generatedPassword"] { + /* Separator between logins and generated passwords. This uses --panel-separator-color from default + * themes since autocomplete doesn't yet switch to dark. */ + border-top: 1px solid hsla(210,4%,10%,.14); +} + +/* Insecure field warning */ +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] { + background-color: var(--arrowpanel-dimmed); + border-bottom: 1px solid var(--panel-separator-color); + padding-block: 4px; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] { + background-color: var(--arrowpanel-dimmed-further); + color: -moz-DialogText; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title { + color: var(--grey-60); + font-size: 1em; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title .ac-emphasize-text-title { + font-weight: 600; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title { + color: inherit; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon { + list-style-image: url(chrome://global/skin/icons/security-broken.svg); + -moz-context-properties: fill; + fill: var(--grey-60); +} diff --git a/browser/themes/shared/blockedSite.css b/browser/themes/shared/blockedSite.css new file mode 100644 index 0000000000..568ae6c2c8 --- /dev/null +++ b/browser/themes/shared/blockedSite.css @@ -0,0 +1,71 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/error-pages.css"); + +@media not (prefers-contrast) { + :root { + --in-content-page-background: #A4000F; + --in-content-page-color: white; + --in-content-text-color: white; + --in-content-primary-button-text-color: black; + --in-content-button-background: transparent; + --in-content-button-background-hover: #5a0002; + --in-content-button-background-active: #3e0200; + --in-content-primary-button-background: white; + --in-content-primary-button-background-hover: rgba(255, 255, 255, 0.8); + --in-content-primary-button-background-active: rgba(255, 255, 255, 0.7); + } +} + +.title { + background-image: url("chrome://global/skin/icons/blocked.svg"); +} + +.button-container button { + border: 1px solid white; + margin-inline-end: 0; + margin-top: 1.5em; +} + +#advisory_provider { + text-decoration: underline; +} + +#errorDescriptionContainer { + position: absolute; + margin: 48px auto; +} + +.error-description { + min-width: var(--in-content-container-min-width); + max-width: var(--in-content-container-max-width); + color: black; + background-color: white; +} + +.error-description > p:first-child { + padding: 3.5em 3.5em 1em; +} + +.error-description > p:last-child { + padding: 0 3.5em 3.5em; +} + +.error-description #ignore_warning_link, +.error-description a:is(:link, :visited) { + cursor: pointer; + text-decoration: underline; + color: black; +} + +a:not(:link) { + color: black; + text-decoration: none; + cursor: auto; +} + +.sitename { + font-weight: bold; +} diff --git a/browser/themes/shared/browser-custom-colors.css b/browser/themes/shared/browser-custom-colors.css new file mode 100644 index 0000000000..ef472da578 --- /dev/null +++ b/browser/themes/shared/browser-custom-colors.css @@ -0,0 +1,64 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +@media not (prefers-contrast) { + :root:not(:-moz-lwtheme) { + --button-primary-bgcolor: rgb(0,97,224); + --button-primary-hover-bgcolor: rgb(2,80,187); + --button-primary-active-bgcolor: rgb(5,62,148); + --button-primary-color: rgb(251,251,254); + --button-bgcolor: rgba(207,207,216,.33); + --button-hover-bgcolor: rgba(207,207,216,.66); + --button-active-bgcolor: rgb(207,207,216); + --button-color: rgb(21,20,26); + + --focus-outline-color: var(--button-primary-bgcolor); + + --checkbox-border-color: var(--input-border-color); + --checkbox-unchecked-bgcolor: var(--button-bgcolor); + --checkbox-unchecked-hover-bgcolor: var(--button-hover-bgcolor); + --checkbox-unchecked-active-bgcolor: var(--button-active-bgcolor); + --checkbox-checked-border-color: transparent; + --checkbox-checked-bgcolor: var(--button-primary-bgcolor); + --checkbox-checked-color: var(--button-primary-color); + --checkbox-checked-hover-bgcolor: var(--button-primary-hover-bgcolor); + --checkbox-checked-active-bgcolor: var(--button-primary-active-bgcolor); + + --arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent); + --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent); + --panel-disabled-color: color-mix(in srgb, currentColor 40%, transparent); + --panel-shortcut-color: rgb(91,91,102); + + --input-color: rgb(21,20,26); + --input-bgcolor: rgb(255,255,255); + --input-border-color: color-mix(in srgb, currentColor 41%, transparent); + + --tab-selected-bgcolor: rgb(255,255,255); + --tab-icon-overlay-stroke: rgb(255,255,255); + --tab-icon-overlay-fill: rgb(91,91,102); + --toolbar-color: rgb(21,20,26); + --toolbar-non-lwt-bgcolor: #f9f9fb; + --toolbar-non-lwt-textcolor: rgb(21, 20, 26); + --toolbarbutton-icon-fill: rgb(91,91,102); + --toolbarbutton-icon-fill-attention: rgb(0,97,224); + + --urlbar-popup-action-color: rgb(91,91,102); + --urlbar-popup-url-color: rgb(0,97,224); + --urlbar-icon-fill-opacity: 0.72; + + --autocomplete-popup-separator-color: rgb(240,240,244); + --toolbar-field-border-color: transparent; + --arrowpanel-border-color: rgb(240,240,244); + --chrome-content-separator-color: rgb(204,204,204); + + --toolbar-field-background-color: rgb(240,240,244); + --toolbar-field-color: rgb(21,20,26); + + --autocomplete-popup-highlight-background: #e0e0e6; + --autocomplete-popup-highlight-color: rgb(21,20,26); + --autocomplete-popup-hover-background: rgb(240,240,244); + } +} diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css new file mode 100644 index 0000000000..b5d7f54d7e --- /dev/null +++ b/browser/themes/shared/browser-shared.css @@ -0,0 +1,897 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://browser/skin/downloads/indicator.css"); +@import url("chrome://browser/skin/addons/extension-controlled.css"); +@import url("chrome://browser/skin/addons/unified-extensions.css"); +@import url("chrome://browser/skin/toolbarbuttons.css"); +@import url("chrome://browser/skin/toolbarbutton-icons.css"); +@import url("chrome://browser/skin/menupanel.css"); +@import url("chrome://browser/skin/urlbar-searchbar.css"); +@import url("chrome://browser/skin/identity-block/identity-block.css"); +@import url("chrome://browser/skin/notification-icons.css"); +@import url("chrome://browser/skin/addon-notification.css"); +@import url("chrome://browser/skin/identity-credential-notification.css"); +@import url("chrome://browser/skin/urlbarView.css"); +@import url("chrome://browser/skin/translation/infobar.css"); +@import url("chrome://browser/skin/autocomplete.css"); +@import url("chrome://browser/skin/places/editBookmarkPanel.css"); +@import url("chrome://browser/skin/sidebar.css"); +@import url("chrome://browser/skin/tabs.css"); +@import url("chrome://browser/skin/fullscreen/warning.css"); +@import url("chrome://browser/skin/ctrlTab.css"); +@import url("chrome://browser/skin/customizableui/customizeMode.css"); +@import url("chrome://browser/skin/UITour.css"); + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor); + --toolbar-color: var(--toolbar-non-lwt-textcolor); + --toolbarbutton-border-radius: 4px; + + --tabs-navbar-shadow-size: 1px; + + --panel-shortcut-color: inherit; + --panelui-subview-transition-duration: 150ms; + + --short-notification-background: #0250BB; + --short-notification-gradient: #9059FF; + + --button-bgcolor: color-mix(in srgb, currentColor 13%, transparent); + --button-hover-bgcolor: color-mix(in srgb, currentColor 17%, transparent); + --button-active-bgcolor: color-mix(in srgb, currentColor 30%, transparent); + --button-color: currentColor; + --button-primary-bgcolor: AccentColor; + --button-primary-hover-bgcolor: color-mix(in srgb, black 10%, AccentColor); + --button-primary-active-bgcolor: color-mix(in srgb, black 20%, AccentColor); + --button-primary-color: AccentColorText; + + --buttons-destructive-bgcolor: #e22850; + --buttons-destructive-hover-bgcolor: #c50042; + --buttons-destructive-active-bgcolor: #810220; + --buttons-destructive-color: #fbfbfe; + + --checkbox-unchecked-bgcolor: var(--button-bgcolor); + --checkbox-unchecked-hover-bgcolor: var(--button-hover-bgcolor); + --checkbox-unchecked-active-bgcolor: var(--button-active-bgcolor); + --checkbox-checked-border-color: transparent; + --checkbox-checked-bgcolor: var(--button-primary-bgcolor); + --checkbox-checked-color: var(--button-primary-color); + --checkbox-checked-hover-bgcolor: var(--button-primary-hover-bgcolor); + --checkbox-checked-active-bgcolor: var(--button-primary-active-bgcolor); + + --autocomplete-popup-hover-background: var(--arrowpanel-dimmed); + --autocomplete-popup-separator-color: color-mix(in srgb, currentColor 14%, transparent); + + --identity-box-margin-inline: 4px; + --urlbar-box-bgcolor: var(--button-bgcolor); + --urlbar-box-focus-bgcolor: var(--button-bgcolor); + --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor); + --urlbar-box-active-bgcolor: var(--button-active-bgcolor); + --urlbar-box-text-color: inherit; + --urlbar-box-hover-text-color: var(--urlbar-box-text-color); + --urlbar-min-height: 32px; + --urlbar-icon-fill-opacity: 0.9; + --urlbar-icon-padding: 6px; /* (32px - 2px border - 2px padding - 16px icon) / 2 */ + /* This should be used for icons and chiclets inside the input field. It makes + the gap around them more uniform when they are close to the field edges */ + --urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) - 1px); + --urlbar-popup-url-color: -moz-nativehyperlinktext; + + --lwt-additional-images: none; + --lwt-background-alignment: right top; + --lwt-background-tiling: no-repeat; + --lwt-brighttext-url-color: #00ddff; + + --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67); + + -moz-box-layout: flex; +} + +:root:-moz-lwtheme { + --checkbox-border-color: color-mix(in srgb, currentColor 41%, transparent); +} + +@media (prefers-contrast) { + :root { + --autocomplete-popup-separator-color: color-mix(in srgb, currentColor 86%, transparent); + --urlbar-icon-fill-opacity: 1; + --checkbox-checked-border-color: var(--checkbox-checked-bgcolor); + } +} + +:root[uidensity=compact] { + --urlbar-min-height: 26px; + --urlbar-icon-padding: 3px; /* (26px - 2px border - 2px padding - 16px icon) / 2 */ +} + +:root[uidensity=touch] { + --urlbar-min-height: 34px; + --urlbar-icon-padding: 7px; /* (34px - 2px border - 2px padding - 16px icon) / 2 */ +} + +:root:-moz-lwtheme { + --toolbar-bgcolor: rgba(255,255,255,.4); + --toolbar-color: var(--lwt-text-color, inherit); + + color: var(--lwt-text-color); +} + +@media not (prefers-contrast) { + :root:-moz-lwtheme { + --focus-outline-color: #0061E0; + } + + @media (prefers-color-scheme: dark) { + :root:-moz-lwtheme { + --focus-outline-color: #00DDFF; + } + } +} + +/* Increase the contrast of urlbar boxes in dark mode. + In practice these are bumped-up --button(-hover)-bgcolor rules */ +@media (prefers-color-scheme: dark) { + :root { + --urlbar-box-bgcolor: color-mix(in srgb, currentColor 16%, transparent); + --urlbar-box-focus-bgcolor: color-mix(in srgb, currentColor 16%, transparent); + --urlbar-box-hover-bgcolor: color-mix(in srgb, currentColor 22%, transparent); + } +} + +@media (min-resolution: 1.5dppx) { + :root { + --tabs-navbar-shadow-size: 0.5px; + } +} + +@media (min-resolution: 3dppx) { + :root { + --tabs-navbar-shadow-size: 0.33px; + } +} + +/* Set link color with proper contrast for WebExt themes */ + +toolbar .text-link:-moz-lwtheme, +panel .text-link:-moz-lwtheme { + color: #0060df; +} + +toolbar[brighttext] .text-link:-moz-lwtheme, +:root[lwt-popup-brighttext] panel .text-link { + color: var(--lwt-brighttext-url-color); +} + +toolbar .text-link:-moz-lwtheme:not(:hover), +panel .text-link:-moz-lwtheme:not(:hover) { + text-decoration: none; +} + +/* Toolbar / content area border */ + +#navigator-toolbox { + border-bottom: 1px solid var(--chrome-content-separator-color); +} + +:root[customizing] #navigator-toolbox { + border-bottom-style: none; +} + +/* Add space to beginning of toolbar and make that space click the first */ +#nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child, +#nav-bar-customization-target > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) { + padding-inline-start: var(--toolbar-start-end-padding); +} + +:root[sessionrestored] #nav-bar:-moz-lwtheme { + transition: var(--ext-theme-background-transition); +} + +/* Bookmark toolbar */ + +#PersonalToolbar { + overflow: clip; + max-height: 4em; + padding-inline: 6px; +} + +:root[uidensity=compact] #PersonalToolbar { + padding-inline: 2px; +} + +:root[sessionrestored] #PersonalToolbar:not(.instant) { + transition: min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition); +} + +#PersonalToolbar[collapsed=true] { + min-height: 0; + max-height: 0; +} + +:root[sessionrestored] #PersonalToolbar:not(.instant)[collapsed=true] { + transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear; +} + +#PersonalToolbar[collapsed=false]:not([initialized]) > #personal-toolbar-empty { + visibility: hidden; +} + +/* + * Make the empty bookmarks toolbar message take up no horizontal space. + * This avoids two issues: + * 1) drag/drop of urls/bookmarks to the toolbar not working, because they land + * on the personal-toolbar-empty element. + * 2) buttons in the toolbar moving horizontally while the window opens, + * because the element is first shown at full width and then completely + * hidden. + * TODO(emilio): The comment above was never quite true (the message did take + * horizontal space, see bug 1812636). Figure out how much of this rule is + * really needed. + */ +#PersonalToolbar[collapsed=false] > #personal-toolbar-empty[nowidth] > #personal-toolbar-empty-description { + margin-inline: 0; + min-width: 0; + white-space: nowrap; + position: relative; + z-index: 1; +} + +#PersonalToolbar[collapsed=true].instant { + visibility: collapse; +} + +#PersonalToolbar[customizing] { + outline: 1px dashed; + outline-offset: -3px; +} + +#PersonalToolbar[customizing]:empty { + /* Avoid the toolbar having no height when there's no items in it */ + min-height: 22px; +} + +#PlacesToolbarDropIndicator { + list-style-image: url(chrome://browser/skin/toolbar-drag-indicator.svg); + pointer-events: none; +} + +/* rules for menupopup drop indicators */ +menupopup::part(drop-indicator-container) { + /* TODO(emilio): When menupopups get ported to modern flex layout we can + * probably simplify this substantially, by making the indicator position: + * absolute or so (which was never properly supported in XUL). The container + * should become completely unnecessary then. */ + -moz-box-flex: 1; + min-width: 0; + min-height: 0; +} + +menupopup::part(drop-indicator-bar) { + position: relative; + /* these two margins must together compensate the indicator's height */ + margin-block: -1px; +} + +menupopup::part(drop-indicator) { + list-style-image: none; + height: 2px; + margin-inline-end: -4em; + background-color: SelectedItem; + pointer-events: none; +} + +/* Back / Forward context menu */ + +.unified-nav-back, +.unified-nav-forward { + -moz-context-properties: fill; + fill: currentColor; +} + +.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr), +.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) { + list-style-image: url("chrome://browser/skin/back.svg") !important; +} + +.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr), +.unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) { + list-style-image: url("chrome://browser/skin/forward.svg") !important; +} + +/* Find bar */ + +.browserContainer > findbar { + background-color: var(--toolbar-non-lwt-bgcolor); + color: var(--toolbar-non-lwt-textcolor); + text-shadow: none; +} + +:root:not([lwtheme-image]) .browserContainer > findbar:-moz-lwtheme { + background-color: var(--lwt-accent-color); + background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)); + border-top-color: var(--chrome-content-separator-color); + color: var(--toolbar-color); +} + +:root:not([lwtheme-image]) .browserContainer > findbar:-moz-lwtheme:-moz-window-inactive { + background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); +} + +/* Private browsing indicator */ + +.private-browsing-indicator { + background-image: url("chrome://global/skin/icons/indicator-private-browsing.svg"); + background-repeat: no-repeat; + background-size: 100% auto; + background-position: center; + width: 24px; + margin-inline: 7px; + position: relative; + /* Need to ensure this gets positioned on top of the position:relative #navigator-toolbox + * in case the dark/light themes give that item a background. */ + z-index: 1; +} + +/* New Private Browsing Indicator */ + +#private-browsing-indicator-with-label { + -moz-box-align: center; + margin-inline: 7px; +} + +.private-browsing-indicator-icon { + list-style-image: url("chrome://global/skin/icons/indicator-private-browsing.svg"); + width: 16px; + height: 16px; +} + +:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator, +:root[privatebrowsingnewindicator] .private-browsing-indicator, +:root:not([privatebrowsingnewindicator]) #private-browsing-indicator-with-label, +:root:not([privatebrowsingmode=temporary]) #private-browsing-indicator-with-label { + display: none; +} + +/* End private browsing indicator */ + +/* Override theme colors since the picker uses extra colors that + themes cannot set */ +#DateTimePickerPanel { + --arrowpanel-background: Field; + --arrowpanel-color: FieldText; + --arrowpanel-border-color: ThreeDShadow; +} + +#DateTimePickerPanel[side="top"], +#DateTimePickerPanel[side="bottom"] { + margin-inline: 0; +} + +#widget-overflow .webextension-popup-browser { + background: #fff; + + /* height set via JS can be lower than the stack min-height, + ensure the browser takes up at least that min-height */ + min-height: 100%; +} + +#addon-progress-notification-progressmeter { + margin: 2px 4px; +} + +/* Contextual Feature Recommendation popup-notification */ + +#cfr-notification-header { + width: 100%; + display: block; + text-align: center; + box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2); +} + +#cfr-notification-header-stack { + width: 100%; +} + +#cfr-notification-header-label { + margin: 9px; + font-weight: 600; +} + +#cfr-notification-header-link { + margin: 7px; + color: inherit; + cursor: default; + justify-self: end; +} + +#cfr-notification-header-image { + width: 19px; + height: 19px; + padding: 2px; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.6; + list-style-image: url(chrome://global/skin/icons/help.svg); +} + +#cfr-notification-header-image:hover { + background-color: hsla(0,0%,70%,.2); + border-radius: 2px; +} + +#contextual-feature-recommendation-notification { + width: 400px; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] { + background: radial-gradient(circle farthest-side at top right, var(--short-notification-gradient), var(--short-notification-background)); + width: unset; + max-width: 700px; + overflow-wrap: break-word; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"]:-moz-locale-dir(rtl) { + background: radial-gradient(circle farthest-side at top left, var(--short-notification-gradient), var(--short-notification-background)); +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-body-container, +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-footer-container, +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] #cfr-notification-header-link { + display: none; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] #cfr-notification-header { + box-shadow: none; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] description { + font-weight: 400; + margin: unset; + margin-inline: 12px; + transform: translateY(50%); +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-button-container, +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-header-container { + display: inline-flex; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-button-container { + float: inline-end; + background-color: transparent; + flex-direction: row-reverse; + /* Override proton-doorhanger default styles that increase the size of the button */ + margin: 0; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-primary-button { + background-color: rgba(216, 216, 216, 0.2); + color: white; + border: none; + border-radius: 2px; + margin: 4px; + padding: 3px 12px; + flex: 1; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-primary-button:after { + content: url(chrome://global/skin/icons/arrow-left-12.svg); + -moz-context-properties: fill; + fill: currentColor; + transform: translateY(2px); + float: inline-end; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"]:-moz-locale-dir(ltr) .popup-notification-primary-button:after { + content: url(chrome://global/skin/icons/arrow-right-12.svg); +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-primary-button:hover { + background-color: rgba(216, 216, 216, 0.4); +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-primary-button:active { + background-color: rgba(216, 216, 216, 0.5); +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-secondary-button { + margin: 3px; + border: none; + border-radius: 2px; + background-image: url(chrome://global/skin/icons/close.svg); + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + background-size: 10px; + -moz-context-properties: fill; + fill: white; + height: 22px; + width: 22px; + padding: 0; + align-self: center; + flex: none; + font-size: 0; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-secondary-button:hover { + background-color: rgba(216, 216, 216, 0.4); +} + + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-header-container { + color: white; + max-width: unset; +} + +#contextual-feature-recommendation-notification[data-notification-bucket="CFR_SOCIAL_TRACKING_PROTECTION"] { + width: 386px; +} + +#contextual-feature-recommendation-notification .popup-notification-icon { + margin-inline-end: 4px; +} + +#contextual-feature-recommendation-notification .cfr-doorhanger-large-icon { + width: 64px; + height: 64px; + margin-inline-end: 12px; +} + +#contextual-feature-recommendation-notification .popup-notification-body-container { + width: 100%; + padding-bottom: 2px; +} + +#contextual-feature-recommendation-notification popupnotificationcontent { + margin-top: 0; +} + +#contextual-feature-recommendation-notification description { + margin-bottom: 0; +} + +#cfr-notification-footer-text-and-addon-info { + display: block; + padding: 10px var(--arrowpanel-padding); +} + +#contextual-feature-recommendation-notification[data-notification-category="addon_recommendation"] #cfr-notification-feature-steps, +#contextual-feature-recommendation-notification[data-notification-category="icon_and_message"] .popup-notification-footer-container { + display: none; +} + +/* + * `icon_and_message` CFR doorhanger with: icon, title and subtitle. + * No panel header is shown + */ +#contextual-feature-recommendation-notification[data-notification-category="icon_and_message"] #cfr-notification-header { + display: none; +} + +#contextual-feature-recommendation-notification[data-notification-category="icon_and_message"] .popup-notification-description { + font-weight: 600; + margin-bottom: 15px; +} + +#contextual-feature-recommendation-notification[data-notification-category="icon_and_message"] popupnotificationcontent { + display: block; /* This forces the subtitle content to wrap */ +} + + +#cfr-notification-feature-steps { + display: flex; + flex-direction: column; + margin-top: 10px; +} + +#cfr-notification-feature-steps li { + margin-inline-start: 10px; + position: relative; + display: list-item; +} + +#cfr-notification-feature-steps li:not(:last-child) { + margin-bottom: 5px; +} + +#cfr-notification-footer-text, +#cfr-notification-footer-users, +#cfr-notification-footer-learn-more-link { + margin: 0; +} + +#cfr-notification-footer-addon-info { + align-items: center; + display: flex; + margin-block: 10px 6px; +} + +#cfr-notification-footer-filled-stars, +#cfr-notification-footer-empty-stars { + -moz-context-properties: fill, fill-opacity; + background-image: url(chrome://browser/skin/bookmark.svg); + fill: currentColor; + fill-opacity: 0.7; + height: 16px; +} + +#cfr-notification-footer-filled-stars:-moz-locale-dir(rtl), +#cfr-notification-footer-empty-stars { + background-position-x: right; +} + +#cfr-notification-footer-filled-stars, +#cfr-notification-footer-empty-stars:-moz-locale-dir(rtl) { + background-position-x: left; +} + +#cfr-notification-footer-empty-stars[tooltiptext] { + margin-inline-end: 6px; + opacity: 0.3; +} + +#cfr-notification-footer-users { + opacity: 0.7; +} + +#cfr-notification-footer-spacer { + flex-grow: 1; +} + +#content-mask { + background: rgba(0, 0, 0, 0.5); +} + +/* nhnt11: Workaround to insert a linebreak after the DoH doorhanger's title. + * The title uses the inline html|b that usually contains the hostname for + * permission prompts to achieve bold formatting. This is always the 2nd child. + */ +.popup-notification-description[popupid="doh-first-time"] > html|b:first-of-type { + display: block; + margin-bottom: 4px; /* matches the margin-bottom on description elements */ +} + +/* Password Manager Doorhanger */ + +.ac-dropmarker { + appearance: none; + justify-self: end; + margin-inline-end: 8px; + align-self: center; +} + +.ac-dropmarker::part(icon) { + list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg); + -moz-context-properties: fill; + fill: var(--input-color, -moz-DialogText); +} + +.ac-has-end-icon { + text-overflow: ellipsis; + overflow: hidden; +} + +/* ENABLE DEVTOOLS POPUP */ +@media (-moz-platform: macos), (-moz-platform: windows) { + #enable-devtools-popup { + font-size: 1.18em; + } +} + +#sharing-tabs-warning-panel > hbox[type="window"] > vbox > label > #sharing-warning-screen-panel-header, +#sharing-tabs-warning-panel > hbox[type="screen"] > vbox > label > #sharing-warning-window-panel-header { + display: none; +} + +#sharing-tabs-warning-panel { + max-width: 400px; +} + +#sharing-warning-proceed-to-tab { + appearance: none; + border-style: none; + margin: 0; + background-color: rgb(0,96,223); + color: rgb(255,255,255); + border-radius: 5px; + padding: 10px; + margin-top: 15px; + margin-bottom: 10px; +} + +#sharing-warning-proceed-to-tab:hover { + background-color: rgb(0,62,170); +} + +.webRTC-selectDevice-selector-container { + display: flex; + align-items: center; +} + +.webRTC-selectDevice-selector-container > menulist { + flex: 1; + min-width: 0; +} + +popupnotificationcontent { + margin-block-start: 8px; +} + +/** + * Our OS integration code toggles whether system colors should return light or + * dark values based on the luminosity of the toolbar background. Because themes + * can style panels to have a different background color than the toolbar, we + * need specific overrides for system colors used in light or dark themes. + */ +.popup-notification-body:-moz-lwtheme { + color-scheme: light; +} + +:root[lwt-popup-brighttext] .popup-notification-body { + color-scheme: dark; +} + +.popup-notification-body menulist { + margin: 0; +} + +.popup-notification-checkbox { + margin-block: 12px 0; +} + +.popup-notification-body-container { + padding-block-end: 0; +} + +#webRTC-selectCamera-label, +#webRTC-selectMicrophone-label { + display: none; +} + +.webRTC-selectDevice-icon { + -moz-context-properties: fill; + fill: currentColor; + margin-inline-end: 8px; + /* Setting width explicitly so it's still visible if the device label is very long */ + width: 16px; +} + +#webRTC-selectCamera-icon { + list-style-image: url("chrome://browser/skin/notification-icons/camera.svg"); +} + +#webRTC-selectMicrophone-icon { + list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg"); +} + +#webRTC-selectSpeaker-icon { + list-style-image: url("chrome://global/skin/media/audio.svg"); +} + +.popup-notification-body :is(description, label:not(.learnMore), checkbox, input) { + margin-inline: 0; +} + +.popup-notification-body input { + padding: 8px; + border-radius: 4px; + border: 0; + outline: 1px solid var(--input-border-color, ThreeDShadow); + outline-offset: -1px; + background-color: var(--input-bgcolor, Field); + color: var(--input-color, FieldText); +} + +.popup-notification-body input.ac-has-end-icon { + --input-padding-from-arrow-side: calc(8px + 16px + 8px); /* spacing from the end + arrow element width + extra spacing) */ + padding-inline-end: var(--input-padding-from-arrow-side); +} + +/* Avoid overlapping the text on the arrow icon when switching input text direction */ +.popup-notification-body:-moz-locale-dir(rtl) input.ac-has-end-icon:dir(ltr) { + padding-left: var(--input-padding-from-arrow-side); + padding-right: 8px; +} +.popup-notification-body:-moz-locale-dir(ltr) input.ac-has-end-icon:dir(rtl) { + padding-right: var(--input-padding-from-arrow-side); + padding-left: 8px; +} + +.popup-notification-body input:focus-visible { + outline: 2px solid var(--focus-outline-color); +} + +/** + * There's already a margin-block-start of 8px on popupnotificationcontent, + * so the first label only needs 8px of margin-block-start to match the + * spec. + */ +.password-notification-label:first-of-type { + margin-block-start: 8px; +} + +.password-notification-label:not(:first-of-type) { + margin-block-start: 16px; +} + +#password-notification-visibilityToggle { + margin-block-start: 14px; +} + +#password-notification-visibilityToggle > .checkbox-label-box > .checkbox-label { + opacity: 0.7; +} + +.popup-notification-description > b { + font-weight: inherit; +} + +.popup-notification-description { + font-weight: 600; + margin-top: 0; +} + +#tab-notification-deck { + display: block; +} + +.relay-integration-header { + display: flex; + align-items: center; + font-size: 2em; +} + +.relay-integration-header > div { + width: 32px; + height: 32px; + background-image: url("chrome://browser/content/logos/relay.svg"); + background-repeat: no-repeat; +} + +.relay-integration-header > span:first-of-type { + font-weight: bold; + margin-inline-start: 8px; +} + +.relay-integration-header > span:last-of-type { + font-weight: normal; + white-space: pre; +} + +.popup-notification-description[popupid="relay-integration-offer-notification"] > html|div:first-of-type { + font-weight: normal; + display: grid; + grid-template-columns: auto; + grid-template-rows: auto auto auto auto; +} + +#relay-integration-reuse-masks-notification > popupnotificationcontent > div { + font-weight: normal; + display: grid; + grid-template-columns: auto; + grid-template-rows: auto auto auto auto; +} + +.reusable-relay-masks { + display: flex; + flex-direction: column; +} + +.reusable-relay-masks > button { + padding: 4px; + margin: 4px; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.reusable-relay-masks > button > span:first-child { + margin-inline-end: 20px; +} + +.reusable-relay-masks > button > span:last-child { + opacity: 0.6; +} diff --git a/browser/themes/shared/contextmenu.css b/browser/themes/shared/contextmenu.css new file mode 100644 index 0000000000..b0ace28d12 --- /dev/null +++ b/browser/themes/shared/contextmenu.css @@ -0,0 +1,59 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +#context-navigation > .menuitem-iconic { + -moz-box-flex: 1; + -moz-box-pack: center; + -moz-box-align: center; +} + +#context-navigation > .menuitem-iconic > .menu-iconic-left { + appearance: none; +} + +#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { + width: 1.25em; + height: auto; + margin: 7px; + -moz-context-properties: fill; + fill: currentColor; +} + +#context-back { + list-style-image: url("chrome://browser/skin/back.svg"); +} + +#context-forward { + list-style-image: url("chrome://browser/skin/forward.svg"); +} + +#context-reload { + list-style-image: url("chrome://global/skin/icons/reload.svg"); +} + +#context-stop { + list-style-image: url("chrome://global/skin/icons/close.svg"); +} + +#context-bookmarkpage { + list-style-image: url("chrome://browser/skin/bookmark-hollow.svg"); +} + +#context-bookmarkpage[starred=true] { + list-style-image: url("chrome://browser/skin/bookmark.svg"); +} + +#context-back:-moz-locale-dir(rtl), +#context-forward:-moz-locale-dir(rtl), +#context-reload:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +#context-media-eme-learnmore { + list-style-image: url("chrome://browser/skin/drm-icon.svg"); + -moz-context-properties: fill; + fill: currentColor; +} diff --git a/browser/themes/shared/controlcenter/3rdpartycookies.svg b/browser/themes/shared/controlcenter/3rdpartycookies.svg new file mode 100644 index 0000000000..4477d1b43e --- /dev/null +++ b/browser/themes/shared/controlcenter/3rdpartycookies.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/controlcenter/cryptominers.svg b/browser/themes/shared/controlcenter/cryptominers.svg new file mode 100644 index 0000000000..9486ae76de --- /dev/null +++ b/browser/themes/shared/controlcenter/cryptominers.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/controlcenter/dashboard.svg b/browser/themes/shared/controlcenter/dashboard.svg new file mode 100644 index 0000000000..e2908d9485 --- /dev/null +++ b/browser/themes/shared/controlcenter/dashboard.svg @@ -0,0 +1,4 @@ + + diff --git a/browser/themes/shared/controlcenter/etp-milestone.svg b/browser/themes/shared/controlcenter/etp-milestone.svg new file mode 100644 index 0000000000..c9dd70954a --- /dev/null +++ b/browser/themes/shared/controlcenter/etp-milestone.svg @@ -0,0 +1,4 @@ + + diff --git a/browser/themes/shared/controlcenter/hero-message-background.svg b/browser/themes/shared/controlcenter/hero-message-background.svg new file mode 100644 index 0000000000..d54f1cbc4a --- /dev/null +++ b/browser/themes/shared/controlcenter/hero-message-background.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/controlcenter/mcb-disabled.svg b/browser/themes/shared/controlcenter/mcb-disabled.svg new file mode 100644 index 0000000000..b9396a8e2a --- /dev/null +++ b/browser/themes/shared/controlcenter/mcb-disabled.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/controlcenter/panel.css b/browser/themes/shared/controlcenter/panel.css new file mode 100644 index 0000000000..2c24550951 --- /dev/null +++ b/browser/themes/shared/controlcenter/panel.css @@ -0,0 +1,825 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* Hide all conditional elements by default. */ +:is([when-connection],[when-customroot],[when-mixedcontent],[when-ciphers],[when-httpsonlystatus]) { + display: none; +} + +#identity-popup, +#permission-popup, +#protections-popup { + --popup-width: 30.81em; + /* Set default fill for icons in the identity popup. + Individual icons can override this. */ + fill: currentColor; + --horizontal-padding: calc(var(--arrowpanel-menuitem-padding-inline) * 2); + --vertical-section-padding: 0.9em; + --height-offset: 0px; + font: menu; +} + +#protections-popup[toast] { + --popup-width: 27.12em; +} + +#protections-popup[infoMessageShowing] { + --height-offset: 260px; +} + +/* This is used by screenshots tests to hide intermittently different + * identity popup shadows (see bug 1425253). */ +#identity-popup.no-shadow, +#permission-popup.no-shadow { + -moz-window-shadow: none; +} + +/* Show the right elements for the right connection states. */ +#identity-popup[customroot=true] [when-customroot=true], +#identity-popup[connection=not-secure] [when-connection~=not-secure], +#identity-popup[connection=secure-cert-user-overridden] [when-connection~=secure-cert-user-overridden], +#identity-popup[connection=secure-ev] [when-connection~=secure-ev], +#identity-popup[connection=secure] [when-connection~=secure], +#identity-popup[connection=chrome] [when-connection~=chrome], +#identity-popup[connection=file] [when-connection~=file], +#identity-popup[connection=extension] [when-connection~=extension], +#identity-popup[connection=cert-error-page] [when-connection~=cert-error-page], +#identity-popup[connection=net-error-page] [when-connection~=net-error-page], +#identity-popup[connection=https-only-error-page] [when-connection~=https-only-error-page], +/* Show weak cipher messages when needed. */ +#identity-popup[ciphers=weak] [when-ciphers~=weak], +/* Show mixed content warnings when needed */ +#identity-popup[mixedcontent~=active-loaded] [when-mixedcontent=active-loaded], +#identity-popup[mixedcontent~=passive-loaded]:not([mixedcontent~=active-loaded]) [when-mixedcontent=passive-loaded], +#identity-popup[mixedcontent~=active-blocked]:not([mixedcontent~=passive-loaded]) [when-mixedcontent=active-blocked], +/* Show the right elements when there is mixed passive content loaded and active blocked. */ +#identity-popup[mixedcontent~=active-blocked][mixedcontent~=passive-loaded] [when-mixedcontent~=active-blocked][when-mixedcontent~=passive-loaded], +/* HTTPS-Only Mode */ +#identity-popup[httpsonlystatus=exception] [when-httpsonlystatus~=exception], +#identity-popup[httpsonlystatus=upgraded] [when-httpsonlystatus~=upgraded], +#identity-popup[httpsonlystatus=failed-top] [when-httpsonlystatus~=failed-top], +#identity-popup[httpsonlystatus=failed-sub] [when-httpsonlystatus~=failed-sub], +/* Show 'disable MCB' button always when there is mixed active content blocked. */ +#identity-popup-securityView-extended-info[mixedcontent~=active-blocked] > button[when-mixedcontent=active-blocked] { + display: revert; +} + +/* Hide 'not secure' message in subview when weak cipher or mixed content messages are shown. */ +#identity-popup-securityView-extended-info:is([mixedcontent],[ciphers]) > description[when-connection=not-secure], +/* Hide 'passive-loaded (only)' message when there is mixed passive content loaded and active blocked. */ +#identity-popup-securityView-extended-info[mixedcontent~=passive-loaded][mixedcontent~=active-blocked] > description[when-mixedcontent=passive-loaded] { + display: none; +} + +/* Make sure hidden elements don't accidentally become visible from one of the + above selectors (see Bug 1194258) */ +#identity-popup [hidden] { + display: none !important; +} + +#identity-popup-mainView, +#permission-popup-mainView, +#protections-popup-mainView { + min-width: var(--popup-width); + max-width: var(--popup-width); +} + +#protections-popup[toast] #protections-popup-mainView > :not(#protections-popup-mainView-panel-header-section), +#protections-popup[toast] #protections-popup-mainView-panel-header-section > :not(#protections-popup-mainView-panel-header), +#protections-popup[toast] #protections-popup-mainView-panel-header > :is(.panel-info-button, #protections-popup-main-header-label) { + /* Hide all elements in the panel except for the toast descriptions */ + display: none; +} + +#protections-popup[toast] #protections-popup-mainView-panel-header { + min-height: unset; /* revert panelUI-shared.css */ +} + +#identity-popup-security-description > description { + font-weight: 600; + margin-top: 0.5em; +} + +#identity-popup-security-httpsonlymode { + margin-top: 1em; +} + +#identity-popup-security-httpsonlymode-menulist { + text-overflow: ellipsis; + overflow: hidden; + width: 11em; + margin: 0.5em 0; +} + +#identity-popup-security-httpsonlymode-info { + font-size: 0.85em; + color: var(--panel-description-color); +} + +#identity-popup-security-httpsonlymode-info > description { + margin-bottom: 0.5em; +} + +#permission-popup-permissions-content { + padding-inline: 1.25em; + min-width: 0; +} + +/* CONTENT */ + +:where(#protections-popup, #identity-popup) :is(description, label) { + margin: 0; +} + +#protections-popup .panel-header > h1 > span, +#permission-popup .panel-header > h1 > span, +#identity-popup .panel-header > h1 > span { + /* This is needed for the overflow-wrap to work correctly when the domain name is really long. */ + max-width: calc(var(--popup-width) - 2 * var(--arrowpanel-menuitem-margin-inline)); + overflow-wrap: break-word; +} + +#protections-popup .panel-header > h1 > span { + /* The protections popup panel header text needs a different calculation because it contains an info button. + * icon-full-width and icon-margin are included twice to compensate for the margin-inline-start of the text, + * used to center it even if the header includes a info button. See .panel-header-with-info-button */ + max-width: calc(var(--popup-width) + - var(--arrowpanel-menuitem-margin-inline) * 2 + - var(--arrowpanel-header-info-icon-full-width) * 2 + - var(--arrowpanel-header-info-icon-margin-inline-end) * 2); +} + +#identity-popup .panel-header > .subviewbutton-back + h1 > span { + /* Same idea as above, but in the identity popup when there's a back button. */ + max-width: calc(var(--popup-width) + - var(--arrowpanel-menuitem-margin-inline) * 2 + - var(--arrowpanel-header-back-icon-full-width) * 2); +} + +#protections-popup:not([infoMessageShowing]) #protections-popup-mainView-panel-header-section + toolbarseparator { + display: none; +} + +#protections-popup-mainView-panel-header-section { + /* Don't display the info message on top of the panel content while it fades in and out */ + overflow: hidden; +} + +#permission-popup-permissions-content > description, +#protections-popup-content > description { + color: var(--panel-description-color); +} + +/* This element needs the pre-wrap because we add newlines to it in the code. */ +#identity-popup-content-supplemental { + white-space: pre-wrap; +} + +/* SECURITY */ + +#identity-popup[mixedcontent~=active-loaded] .identity-popup-connection-not-secure, +#identity-popup:not([mixedcontent]) .identity-popup-connection-not-secure { + font-weight: bold; +} + +#identity-popup-mainView > .panel-subview-body { + padding-bottom: var(--panel-subview-body-padding-block); +} + +#identity-popup-mainView[footerVisible="true"] > .panel-subview-body { + padding-bottom: 0; +} + +.identity-popup-section { + margin-inline: var(--arrowpanel-menuitem-margin-inline); + padding-inline: var(--arrowpanel-menuitem-padding-inline); +} + +.identity-popup-section.indented { + /* Align with the text displayed following the lock icon, in the connection status button above. + 16px is the icon size and 8px is the inline-start padding of the text. */ + padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + 16px + 8px); +} + +.identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/security-broken.svg); + margin: var(--arrowpanel-menuitem-margin); + padding: var(--arrowpanel-menuitem-padding); + -moz-context-properties: fill; + min-height: 24px; +} + +#identity-popup[connection=chrome] .identity-popup-security-connection { + list-style-image: url(chrome://branding/content/icon48.png); +} + +#identity-popup[connection=file] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/page-portrait.svg); +} + +#identity-popup[connection^=secure] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/security.svg); +} + +/* Use [isbroken] to make sure we don't show a warning lock on an http page. See Bug 1192162. */ +#identity-popup[ciphers=weak] .identity-popup-security-connection, +#identity-popup[mixedcontent~=passive-loaded][isbroken] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/security-warning.svg); + -moz-context-properties: fill, fill-opacity; +} + +#identity-popup[connection=secure-cert-user-overridden] .identity-popup-security-connection, +#identity-popup[connection=cert-error-page] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/security-warning.svg); + fill: unset; +} + +#identity-popup[connection=net-error-page] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/info.svg); + fill: unset; +} + +#identity-popup[mixedcontent~=active-loaded][isbroken] .identity-popup-security-connection { + list-style-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg); +} + +#identity-popup[connection=extension] .identity-popup-security-connection { + list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); +} + +.identity-popup-security-connection-icon { + width: 16px; + height: 16px; +} + +.identity-popup-connection-secure.security-view, +.identity-popup-connection-secure.upgraded, +.identity-popup-connection-not-secure.security-view { + padding-inline-start: 8px; +} + +#identity-popup-securityView-extended-info > button, +#identity-popup-securityView-extended-info > hbox > .text-link, +#identity-popup-content-verifier, +#identity-popup-content-verifier ~ description, +#identity-popup-content-owner-label { + margin-block: 0.5em; +} + +#identity-popup-securityView-extended-info > .identity-popup-warning-box { + font-weight: 600; +} + +#identity-popup-securityView-extended-info > button { + margin-inline: 0; +} + +@media (-moz-platform: macos) { + #identity-popup-securityView-extended-info > button { + min-height: 30px; + } + + #identity-popup-securityView-extended-info > button:focus-visible { + outline: var(--focus-outline); + } +} + +/* CONTENT BLOCKING / TRACKING PROTECTION */ + +#protections-popup-sendReportView-heading, +#protections-popup-sendReportView-body, +#protections-popup-siteNotWorkingView-body { + padding: var(--vertical-section-padding) var(--horizontal-padding); +} + +.protections-popup-sendReportView-collection-section { + margin-bottom: 16px; +} + +#protections-popup-sendReportView-collection-url { + appearance: none; + border: none; + margin: 4px 0; +} + +#protections-popup-sendReportView-collection-comments { + height: 120px; +} + +.protections-popup-sendReportView-collection-section label { + margin-bottom: 2px; +} + +#protections-popup-sendReportView-report-error { + margin-bottom: 24px; + color: #d74345; +} + +#protections-popup-not-blocking-section-why:hover, +#protections-popup-show-report-stack:hover > .protections-popup-footer-button { + background-color: var(--panel-item-hover-bgcolor); +} + +#protections-popup-show-report-stack:hover:active > .protections-popup-footer-button { + background-color: var(--panel-item-active-bgcolor); +} + +/* This subview could get filled with a lot of trackers, set a maximum size + * and allow it to scroll vertically.*/ +#protections-popup-socialblockView, +#protections-popup-cookiesView, +#protections-popup-trackersView { + max-height: calc(600px + var(--height-offset)); +} + +#protections-popup-trackersView-list.empty { + -moz-box-align: center; + -moz-box-pack: center; +} + +.protections-popup-empty-label { + color: var(--panel-description-color); +} + +.protections-popup-trackersView-empty-image { + width: 48px; + height: 48px; + -moz-context-properties: fill; + margin-bottom: 16px; +} + +#protections-popup-cookiesView .protections-popup-empty-label { + margin-inline-start: 24px; + margin-block: 2px 4px; +} + +.protections-popup-cookiesView-list-header { + color: var(--panel-description-color); + margin: 5px 0; +} + +#protections-popup-cookiesView-list > .protections-popup-cookiesView-list-section:only-of-type > .protections-popup-cookiesView-list-header { + display: none; +} + +.protections-popup-list { + padding: 5px 16px !important; /* override panelUI-shared.css */ +} + +.protections-popup-list-item { + display: flex; + margin: 5px 0; +} + +.protections-popup-list-host-label { + direction: ltr; + text-align: match-parent; +} + +/* Special alignment for items which include a state label (e.g. "Allowed") */ +.protections-popup-list-item-with-state > label { + margin: auto 0; +} +.protections-popup-list-item-with-state { + justify-content: space-between; +} + +/* Content Blocking categories */ + +#protections-popup-no-trackers-found-description { + margin: 4.85em 7.25em; + font-size: 1.1em; + text-align: center; + color: var(--panel-description-color); +} + +.protections-popup-section-header { + color: var(--panel-description-color); +} + +:root[uidensity="compact"] .protections-popup-section-header { + margin-block: 4px; +} + +#tracking-protection-container > tooltip { + max-width: var(--popup-width); +} +/* + * The category list is split into two sections: "Blocking" and "Not Blocking", + * with five different category items distributed between them at runtime. + * To achieve this, we use a grid layout with 12 rows: one row for each header + * label and five rows in each section for the items. + * Items with the "blocked" class are assigned rows 2-6, and those without + * are assigned rows 8-12, with the headers taking rows 1 and 7. + */ + +#protections-popup-no-trackers-found-description:not([hidden]) ~ #protections-popup-content { + display: none; +} + +#protections-popup-not-blocking-section-why { + border-radius: 2px; +} + +#protections-popup-not-blocking-section-why:hover { + outline: 4px solid var(--panel-item-hover-bgcolor); +} + +.trackers-icon { + list-style-image: url(chrome://browser/skin/canvas.svg); +} + +.socialblock-icon { + list-style-image: url(chrome://browser/skin/thumb-down.svg); +} + +.thirdpartycookies-icon { + list-style-image: url(chrome://browser/skin/controlcenter/3rdpartycookies.svg); +} + +.cryptominers-icon { + list-style-image: url(chrome://browser/skin/controlcenter/cryptominers.svg); +} + +.fingerprinters-icon { + list-style-image: url(chrome://browser/skin/fingerprint.svg); +} + +/* PERMISSIONS */ + +.permission-popup-permission-item { + min-height: 24px; +} + +.protections-popup-category[uidisabled] { + display: none; +} + +#permission-popup-storage-access-permission-list-header { + padding-inline-end: 8px; +} + +.permission-popup-permission-item, +#permission-popup-storage-access-permission-list-header { + margin-block: 0.25em; +} + +#permission-popup-permission-reload-hint, +#permission-popup-permission-empty-hint { + margin-top: 8px; +} + +.permission-popup-permission-list-anchor[anchorfor="3rdPartyStorage"] > vbox:only-child { + display: none; +} + +#permission-popup-storage-access-permission-list-hint { + margin-top: 0.25em; + color: var(--panel-description-color); +} + +#permission-popup-storage-access-permission-list-hint, +#permission-popup-storage-access-permission-learn-more { + /* Matches offset for items - 16px icon + 8px margin */ + margin-inline-start: calc(16px + 8px); +} + +.permission-popup-permission-icon { + width: 16px; + height: 16px; +} + +.permission-popup-permission-label, +.permission-popup-permission-header-label { + margin-inline-start: 8px; +} + +.permission-popup-permission-label-subitem { + /* Align label with other labels with icon. */ + /* icon width + icon inline margin + label inline margin */ + margin-inline-start: calc(16px + 3px + 10px); +} + +.permission-popup-permission-state-label { + margin-inline-end: 5px; + text-align: end; +} + +.permission-popup-permission-remove-button { + appearance: none; + margin: 0; + margin-inline-start: 2px; + border-width: 0; + min-width: 0; + padding: 2px; + padding-inline-end: 6px; + background-color: var(--button-bgcolor); + color: var(--button-color); + border-radius: 4px; +} + +.permission-popup-permission-remove-button > .button-box > .button-icon { + margin: 0; + width: 12px; + height: 12px; + list-style-image: url(chrome://global/skin/icons/close.svg); + -moz-context-properties: fill; + fill: currentColor; +} + +.permission-popup-permission-remove-button > .button-box > .button-text { + display: none; +} + +.permission-popup-permission-remove-button:not(:-moz-focusring):hover { + background-color: var(--button-hover-bgcolor); +} + +.permission-popup-permission-remove-button:not(:-moz-focusring):hover:active { + background-color: var(--button-active-bgcolor) +} + +#protections-popup[hasException] .protections-popup-tp-switch-on-header, +#protections-popup:not([hasException]) .protections-popup-tp-switch-off-header { + display: none; +} + +#protections-popup-cookie-banner-section[hasException] .protections-popup-cookie-banner-switch-on-header, +#protections-popup-cookie-banner-section:not([hasException]) .protections-popup-cookie-banner-switch-off-header { + display: none; +} + +#protections-popup-cookie-banner-section[uiDisabled], +#protections-popup-cookie-banner-section-separator[uiDisabled]{ + display: none; +} + +#protections-popup-toast-panel-tp-on-desc, +#protections-popup-toast-panel-tp-off-desc { + display: none; +} + +#protections-popup:not([hasException])[toast] #protections-popup-toast-panel-tp-on-desc, +#protections-popup[hasException][toast] #protections-popup-toast-panel-tp-off-desc { + display: revert; +} + +.protections-popup-tp-switch-label-box, +.protections-popup-tp-switch-box { + min-height: 40px; + -moz-box-pack: center; +} + +/* This is needed in order to show a correct height if the 'Site not working?' + link is not displaying. */ +.protections-popup-switch-section[short] > .protections-popup-tp-switch-label-box, +.protections-popup-switch-section[short] > .protections-popup-tp-switch-box { + min-height: 30px; +} + +.protections-popup-switch-header { + font-weight: 600; +} + +.protections-popup-tp-switch { + appearance: none; + box-sizing: border-box; + min-width: 30px; + border-radius: 10px; + background-color: var(--button-bgcolor); + border: 1px solid hsla(210,4%,10%,.14); + margin-block: 4px; + margin-inline-start: 1px; + padding: 2px; + padding-inline-end: 0; + transition: padding .2s ease; +} + +.protections-popup-tp-switch::before { + position: relative; + display: block; + content: ""; + width: 10px; + height: 10px; + border-radius: 10px; + background: white; + outline: 1px solid var(--panel-separator-color); +} + +.protections-popup-tp-switch[enabled] { + background-color: var(--button-primary-bgcolor); + border-color: var(--button-primary-hover-bgcolor); + /* Push the toggle to the right. */ + padding-inline-start: 16px; +} + +.protections-popup-tp-switch[enabled]:hover { + background-color: var(--button-primary-hover-bgcolor); + border-color: var(--button-primary-active-bgcolor); +} + +.protections-popup-tp-switch[enabled]:hover:active { + background-color: var(--button-primary-active-bgcolor); + border-color: var(--button-primary-active-bgcolor); +} + +.protections-popup-tp-switch:not([enabled]):hover { + background-color: var(--button-hover-bgcolor); +} + +.protections-popup-tp-switch:not([enabled]):hover:active { + background-color: var(--button-active-bgcolor); +} + +#protections-popup-siteNotWorkingView-body-issue-list { + padding-inline-start: 1em; +} + +/* Protection popup footer categories */ + +#protections-popup-trackers-blocked-counter-box { + margin: var(--arrowpanel-menuitem-margin); + padding: var(--arrowpanel-menuitem-padding); + visibility: hidden; + opacity: 0; + transition: opacity 200ms linear; + justify-self: end; +} + +#protections-popup-trackers-blocked-counter-box[showing] { + visibility: visible; + opacity: 1; +} + +#protections-popup-trackers-blocked-counter-description, +#protections-popup-footer-protection-type-label { + color: var(--panel-description-color); +} + +.protections-popup-description > description { + margin: 10px 16px; +} + +#protections-popup:not([milestone]) #protections-popup-milestones, +#protections-popup:not([milestone]) #protections-popup-milestones-separator { + display: none; +} + +#protections-popup-milestones-content { + background-color: var(--panel-banner-item-background-color); +} + +/* The padding-block for menuitems is set to 0 in compact mode which, with the + * shield icon being bigger than a usual menuitem, makes the item look crowded + * even for compact mode. */ +:root[uidensity="compact"] #protections-popup-milestones-content { + padding-block: 4px; +} + +#protections-popup-milestones-content:hover { + background-color: var(--panel-banner-item-hover-bgcolor); +} + +#protections-popup-milestones-content:hover:active { + background-color: var(--panel-banner-item-active-bgcolor); +} + +#protections-popup-milestones-text { + font-weight: 600; +} + +#protections-popup-milestones-illustration { + list-style-image: url(chrome://browser/skin/controlcenter/etp-milestone.svg); + -moz-context-properties: fill, stroke; + margin-inline-start: var(--horizontal-padding); + margin-inline-end: 4px; + height: 40px; + width: 32px; +} + +#protections-popup[milestone] #protections-popup-milestones-illustration { + fill: #45278d; + stroke: #321c64; +} + +#protections-popup[milestone="5000"] #protections-popup-milestones-illustration { + fill: #5a29cb; + stroke: #45278d; +} + +#protections-popup[milestone="10000"] #protections-popup-milestones-illustration { + fill: #7641e5; + stroke: #5a29cb; +} + +#protections-popup[milestone="25000"] #protections-popup-milestones-illustration { + fill: #e31587; + stroke: #c60084; +} + +#protections-popup[milestone="50000"] #protections-popup-milestones-illustration { + fill: #ff298a; + stroke: #e31587; +} + +#protections-popup[milestone="100000"] #protections-popup-milestones-illustration { + fill: #ffa436; + stroke: #e27f2e; +} + +#protections-popup[milestone="500000"] #protections-popup-milestones-illustration { + fill: #ffd567; + stroke: #ffbd4f; +} + +#protections-popup-tp-switch-breakage-link, +#protections-popup-tp-switch-breakage-fixed-link { + text-decoration: underline; +} + +.permission-popup-section { + padding-bottom: 12px; +} + +#permission-popup-menulist { + padding-inline: 12px 6px; +} + +.protections-popup-section-header, +.protections-popup-switch-section, +#protections-popup-siteNotWorkingView-header { + padding: var(--arrowpanel-menuitem-padding); + margin: var(--arrowpanel-menuitem-margin); +} + +.identity-popup-expander:focus-visible, +.permission-popup-permission-remove-button:focus-visible { + outline: var(--focus-outline); +} + +@media (-moz-platform: linux) { + .identity-popup-expander > .button-box, + .permission-popup-permission-remove-button > .button-box { + appearance: none; + } +} + +.protections-popup-tp-switch:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +#blocked-popup-indicator-item, +#geo-access-indicator-item { + margin-top: -2px; + margin-inline-start: 16px; +} + +#geo-access-indicator-item { + font-size: 0.8em; + color: var(--panel-description-color); +} + +/** Shim-allow warning and indicator icons **/ + +.protections-popup-shim-allow-hint { + padding: 0 2em; + margin-block-end: 10px; +} + +.protections-popup-shim-allow-hint-icon, +.protections-popup-list-host-shim-allow-indicator { + -moz-context-properties: fill; + background-image: url("chrome://global/skin/icons/info-filled.svg"); + background-repeat: no-repeat; + background-position: center; + + fill: #0090ED; +} + +.protections-popup-shim-allow-hint-icon { + width: 24px; + height: 24px; + + background-size: contain; + margin-inline-end: 0.5em; +} + +.protections-popup-list-host-shim-allow-indicator { + width: 16px; +} + +:root[lwt-popup-brighttext] .protections-popup-shim-allow-hint-icon, +:root[lwt-popup-brighttext] .protections-popup-list-host-shim-allow-indicator { + fill: #80EBFF; +} + +.protections-popup-shim-allow-hint-icon { + margin-inline-end: 0.5em; +} + +.protections-popup-list-host-shim-allow-indicator { + margin-inline-start: 0.5em; + min-width: 16px; +} diff --git a/browser/themes/shared/controlcenter/tracking-protection.svg b/browser/themes/shared/controlcenter/tracking-protection.svg new file mode 100644 index 0000000000..341e44fa6d --- /dev/null +++ b/browser/themes/shared/controlcenter/tracking-protection.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/ctrlTab.css b/browser/themes/shared/ctrlTab.css new file mode 100644 index 0000000000..0f78e09a52 --- /dev/null +++ b/browser/themes/shared/ctrlTab.css @@ -0,0 +1,123 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* Ctrl-Tab */ + +#ctrlTab-panel { + appearance: none; + --panel-background: hsla(0,0%,40%,.85); + --panel-color: white; + --panel-border-color: transparent; + --panel-padding: 20px 10px 10px; +} + +@media (-moz-platform: macos) { + #ctrlTab-panel { + -moz-window-shadow: none; + } +} + +@media not (-moz-platform: macos) { + #ctrlTab-panel { + font-weight: bold; + } +} + +.ctrlTab-preview, +#ctrlTab-showAll { + appearance: none; + color: inherit; + /* remove the :-moz-focusring outline from button.css on Windows */ + outline: none !important; + margin: 0; + text-shadow: 0 0 1px hsl(0,0%,12%), 0 0 2px hsl(0,0%,12%); + border: none; + background-color: transparent; +} + +.ctrlTab-preview > .button-box { + display: none; +} + +.ctrlTab-canvas > html|img, +.ctrlTab-canvas > html|canvas { + min-width: inherit; + max-width: inherit; + min-height: inherit; + max-height: inherit; +} + +.ctrlTab-favicon-container { + position: relative; + -moz-box-pack: end; +} + +.ctrlTab-favicon[src] { + width: 42px; + height: 42px; + margin-top: -44px; + margin-bottom: 2px; + margin-inline-end: -6px; + padding: 5px; + background-color: #F9F9FA; + border-radius: 6px; + box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); +} + +.ctrlTab-canvas { + color-scheme: light; + background-color: Canvas; + color: CanvasText; + box-shadow: 1px 1px 2px hsl(0,0%,12%); + margin-bottom: 8px; +} + +@media (-moz-content-prefers-color-scheme: dark) { + .ctrlTab-canvas { + /* Make the blank canvas match the default content background. */ + color-scheme: dark; + } +} + +.ctrlTab-preview:not([hidden]) .ctrlTab-canvas:empty::before { + content: ""; + display: block; + width: 100%; + height: 100%; + background: url("chrome://global/skin/icons/defaultFavicon.svg") center/20% no-repeat; + -moz-context-properties: fill; + fill: currentColor; + filter: drop-shadow(0 0 2px hsla(0,0%,0%,0.5)); +} + +.ctrlTab-preview-inner, +#ctrlTab-showAll { + padding: 8px; + border: 2px solid transparent; + border-radius: .5em; +} + +.ctrlTab-preview-inner { + margin-top: -10px; +} + +#ctrlTab-showAll { + background-color: rgba(255,255,255,.2); + margin-top: .5em; +} + +.ctrlTab-preview:focus > .ctrlTab-preview-inner, +#ctrlTab-showAll:focus { + background-color: rgba(0,0,0,.75); + text-shadow: none; + border-color: #45a1ff; +} + +.ctrlTab-label { + -moz-box-flex: 1; + -moz-box-pack: center; + contain: inline-size; +} diff --git a/browser/themes/shared/customizableui/customizeMode.css b/browser/themes/shared/customizableui/customizeMode.css new file mode 100644 index 0000000000..60248d811c --- /dev/null +++ b/browser/themes/shared/customizableui/customizeMode.css @@ -0,0 +1,631 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* Customization mode */ + +:root { + --drag-drop-transition-duration: .3s; +} + +@media (prefers-reduced-motion: reduce) { + :root { + --drag-drop-transition-duration: 0s; + } +} + +:root[customizing] .customization-target:not(#widget-overflow-fixed-list) { + min-width: 100px; +} + +#customization-container { + background-color: var(--toolbar-non-lwt-bgcolor); + color: var(--toolbar-color); +} + +#customization-container:-moz-lwtheme { + /* Ensure this displays on top of the non-lwt bgcolor, to make sure it's not + * semi-transparent */ + background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)); +} + +:root[lwtheme-image] #customization-container { + background-image: none; + color: var(--toolbar-non-lwt-textcolor); + text-shadow: none; +} + +:root[lwtheme-image] #customization-palette .toolbarbutton-1 { + fill: currentColor; +} + +#customization-palette { + padding: 5px 20px 20px; +} + +#customization-header { + font-weight: 600; + font-size: 1.2em; + margin: 20px 20px 15px; +} + +#customization-panel-container { + --customization-panel-padding: 20px; + padding: 0 var(--customization-panel-padding) 25px; +} + +#customization-footer { + border-top: 1px solid rgba(0,0,0,.15); + padding: 10px; +} + +@media (-moz-platform: macos), + (-moz-platform: windows) { + @media not (prefers-contrast) { + .customizationmode-button { + border: 1px solid #b1b1b1; + border-radius: 2px; + background-color: #fcfcfd; + appearance: none; + } + + .customizationmode-checkbox, + .customizationmode-button { + margin: 6px 10px; + padding: 2px 5px; + } + + .customizationmode-checkbox:not(:-moz-lwtheme, [disabled]), + .customizationmode-button { + color: rgb(71, 71, 71); + } + + .customizationmode-checkbox[disabled]:-moz-lwtheme { + color: inherit; + opacity: 0.4; + } + + #customization-reset-button, + #customization-undo-reset-button, + #customization-done-button { + min-width: 10em; + } + + #customization-done-button { + color: #fff !important; + font-weight: 700; + border-color: #0060df; + background-color: #0a84ff; + } + + .customizationmode-button > .box-inherit { + border-width: 0; + padding: 3px 0; + } + + /* We use a smaller padding to ensure images don't have padding. + * We can't detect whether a button has an image. This button doesn't + * so it needs more padding, so we unfortunately hardcode the extra + * padding in here: + */ + #customization-toolbar-visibility-button { + padding-inline-start: 8px; + } + + .customizationmode-button[type=menu] > .box-inherit > .box-inherit > .button-text { + padding-inline-end: 10px; + } + + .customizationmode-button > .button-icon { + margin-inline-start: 0; + } + + .customizationmode-button:not([type=menu]) > .button-text { + margin-inline-end: 0; + } + + .customizationmode-button > .box-inherit > .button-menu-dropmarker { + margin-inline-end: 0; + padding-inline-end: 0; + list-style-image: url(chrome://global/skin/icons/arrow-down.svg); + } + + .customizationmode-button:is(:active,:hover):not([disabled]), + .customizationmode-button[open], + .customizationmode-button[checked] { + background-color: #e1e1e5; + } + + #customization-done-button:is(:active,:hover):not([disabled]) { + background-color: #0060df; + } + + .customizationmode-button[disabled="true"] { + opacity: .5; + } + } +} + +#customization-lwtheme-link { + display: flex; + align-items: center; +} + +#widget-overflow-fixed-list > toolbarpaletteitem:not([notransition])[place="panel"], +toolbarpaletteitem:not([notransition])[place="toolbar"] { + transition: border-width var(--drag-drop-transition-duration) ease-in-out; +} + +toolbarpaletteitem[mousedown] { + cursor: -moz-grabbing; +} + +toolbarpaletteitem:not([notransition])[place="palette"], +toolbarpaletteitem:not([notransition])[place="panel"] { + transition: transform var(--drag-drop-transition-duration) ease-in-out; +} + +#customization-palette { + transition: opacity .3s ease-in-out; + opacity: 0; +} + +#customization-palette[showing="true"] { + opacity: 1; +} + +#customization-palette #firefox-view-button[attention] { + background-position: center bottom 8%; +} + +toolbarpaletteitem toolbarbutton[disabled] { + color: inherit !important; +} + +#PersonalToolbar toolbarpaletteitem toolbarbutton[checked="true"], +toolbar toolbarpaletteitem toolbarbutton[checked="true"] + > :where(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) { + background-color: revert !important; +} + +toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, +toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, +toolbarpaletteitem > #search-container, +toolbarpaletteitem > toolbaritem.toolbaritem-combined-buttons { + transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important; +} + +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon { + transform: scale(1.3); +} + +toolbarpaletteitem[mousedown] > #search-container, +toolbarpaletteitem[mousedown] > toolbaritem.toolbaritem-combined-buttons { + transform: scale(1.1); +} + +toolbarpaletteitem[mousedown] > #search-container > #searchbar, +toolbarpaletteitem[mousedown] > #urlbar-container > #urlbar > #urlbar-background +{ + outline: 1px solid color-mix(in srgb, currentColor 60%, transparent); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.13); +} + +/* Override the toolkit styling for items being dragged over. */ +toolbarpaletteitem[place="toolbar"] { + border-inline-width: 0; + margin-inline: 0; +} +#widget-overflow-fixed-list > toolbarpaletteitem[place="panel"] { + border-block: 0 solid transparent; +} + +#customization-palette:not([hidden]) { + margin-bottom: 20px; +} + + +toolbarpaletteitem[place="palette"]:-moz-focusring, +toolbarpaletteitem[place="panel"]:-moz-focusring, +toolbarpaletteitem[place="toolbar"]:-moz-focusring { + outline-width: 0; +} + +toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring, +toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring, +toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { + /* Delay adding the focusring back until after the transform transition completes. */ + transition: outline-width .01s linear var(--drag-drop-transition-duration); + outline: var(--default-focusring); +} + +toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { + outline-offset: calc(-1 * var(--default-focusring-width) - 4px); +} + +toolbarpaletteitem[place=palette]::after { + content: attr(title); + display: block; + text-align: center; +} + +toolbarpaletteitem[place=palette] > toolbarspring { + width: 7em; + min-width: 7em; + outline: 1px solid; + outline-offset: -8px; + opacity: .6; + min-height: 37px; + max-height: 37px; +} + +toolbarpaletteitem[place=toolbar] > toolbarspring { + outline: 1px solid; + outline-offset: -2px; + opacity: .6; + margin-block: 5px; +} + +toolbarpaletteitem > #search-container > #searchbar > .searchbar-textbox { + visibility: hidden; /* Hide searchbar placeholder text in customize mode */ +} + +#wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon { + opacity: 1; /* To ensure these buttons always look enabled in customize mode */ +} + +#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button, +#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator { + display: none; +} + +/* Squeeze together the multi-button toolbarpaletteitems: */ +#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-out-button, +#wrapper-edit-controls[place="palette"] > #edit-controls > #cut-button, +#wrapper-profiler-button[place="palette"] > #profiler-button > #profiler-button-button { + -moz-box-align: end; +} +#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-in-button, +#wrapper-edit-controls[place="palette"] > #edit-controls > #paste-button, +#wrapper-profiler-button[place="palette"] > #profiler-button > #profiler-button-dropmarker { + -moz-box-align: start; +} +#wrapper-edit-controls[place="palette"] > #edit-controls > #copy-button { + -moz-box-flex: 0; +} + +#customization-uidensity-touch-spacer { + border-top: 1px solid var(--panel-separator-color); + margin: 6px calc(-1 * var(--arrowpanel-padding)) 9px; +} + +#customization-uidensity-autotouchmode-checkbox { + margin-bottom: var(--arrowpanel-padding); +} + +#customization-uidensity-menu { + font: menu; + margin-inline: 0; + + /* Make the panel padding uniform across all platforms due to the + styling of the section headers and footer. */ + --arrowpanel-padding: 8px; +} + +.customization-uidensity-menuitem > .menu-iconic-left > .menu-iconic-icon { + width: 32px; + height: 32px; + margin: 5px; +} + +.customization-uidensity-menuitem { + appearance: none; + color: inherit; + border: 1px solid transparent; + border-radius: 4px; + padding-block: 0; + padding-inline: 0 5px; + margin: 2px 0; +} + +#customization-uidensity-menuitem-normal { + list-style-image: url("chrome://browser/skin/customizableui/density-normal.svg"); +} + +#customization-uidensity-menuitem-compact { + list-style-image: url("chrome://browser/skin/customizableui/density-compact.svg"); +} + +#customization-uidensity-menuitem-touch { + list-style-image: url("chrome://browser/skin/customizableui/density-touch.svg"); +} + +.customization-uidensity-menuitem:is(:hover, :focus-visible) { + background-color: var(--button-hover-bgcolor); +} + +.customization-uidensity-menuitem:is(:hover:active, [active="true"]) { + background-color: var(--button-active-bgcolor); +} + +.customization-uidensity-menuitem > .menu-iconic-text { + text-align: start; +} + +.customization-uidensity-menuitem > .menu-iconic-left > .menu-iconic-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +#customization-uidensity-button > .box-inherit > .box-inherit > .button-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +#customization-panelWrapper > .panel-arrowcontent { + color: var(--arrowpanel-color); + background: var(--arrowpanel-background); + background-clip: padding-box; + max-width: 29em; +} + +@media (-moz-platform: macos) { + #customization-panelWrapper > .panel-arrowcontent { + /* Native styling adds more 'oompf' to the popup box-shadow, so simulate that + * as best as we can here: */ + box-shadow: 0 0 1px hsla(0,0%,0%,.3), 0 4px 10px hsla(0,0%,0%,.3); + appearance: none; + border-radius: var(--arrowpanel-border-radius); + } +} + +@media not (-moz-platform: macos) { + #customization-panelWrapper > .panel-arrowcontent { + border: 1px solid var(--arrowpanel-border-color); + margin: 0; + box-shadow: 0 0 4px hsla(0,0%,0%,.2); + } +} + +#customization-panelWrapper > .panel-arrowbox { + display: block; + position: relative; + height: 10px; + margin-bottom: -1px; +} + +/* In customize mode, the overflow button should look both 'disabled' and 'open'. + * So we make the button fully opaque but fill the icon semi-transparent. */ +#nav-bar[customizing] > .overflow-button > .toolbarbutton-icon { + background-color: var(--toolbarbutton-active-background); + opacity: 1; + fill-opacity: 0.4; +} + +#customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] { + list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg"); + -moz-context-properties: fill, stroke; + fill: var(--arrowpanel-background); + stroke: var(--arrowpanel-border-color); + /* JS code sets --panel-arrow-offset to the distance between the middle of the + * overflow button and the end of the window. We subtract the padding of our + * container (#customization-panel-container) and half our own width: + */ + margin-inline-end: calc(var(--panel-arrow-offset) - var(--customization-panel-padding) - 10px); + vertical-align: top; +} + +@media (-moz-platform: macos) { + #customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] { + /* The OS X image is 2px narrower than the windows/linux one. + * Add padding to compensate: */ + padding: 0 1px; + /* specify width for hidpi image to fit correctly */ + width: 20px; + } +} + +#customization-panelDescription { + font-size: 1.1em; + padding: 2px 12px 10px; + margin: 0; +} + +#customization-panelHeader { + font-size: 1.3em; + font-weight: 600; + padding: 2px 12px; + margin: 0; +} + +#customization-panelHolder > #widget-overflow-fixed-list { + padding-top: 10px; +} + +/** + * We create a ::before pseudoelement that contains a background image to show the + * drop dragon. This element fades in and out depending on whether the containing + * panel list is empty and unhovered, or not. + */ +#customization-panelHolder > #widget-overflow-fixed-list:not(:empty) { + padding-bottom: 50px; /* Make sure there's always space to drop stuff. */ + border-top: 1px solid var(--panel-separator-color); +} + +#customization-panelHolder > #widget-overflow-fixed-list::before { + display: block; + content: ""; + background-image: url("chrome://browser/skin/customizableui/empty-overflow-panel.png"); + background-position: center bottom 10px; + background-size: 218px 134px; + background-repeat: no-repeat; + opacity: 0; + transition: opacity 300ms ease-out; + padding-bottom: 154px; /* 154 = 134 for the image, 10px space on either side. */ + margin-bottom: -154px; /* don't affect positioning of the actual contents */ + pointer-events: none; +} + +@media (min-resolution: 1.1dppx) { + #customization-panelHolder > #widget-overflow-fixed-list::before { + background-image: url("chrome://browser/skin/customizableui/empty-overflow-panel@2x.png"); + } +} + +#customization-panelHolder > #widget-overflow-fixed-list:empty::before { + opacity: 1; +} +#customization-panelHolder > #widget-overflow-fixed-list[draggingover]:empty::before { + opacity: 0; +} + +#downloads-button-autohide-panel { + --arrowpanel-padding: 5px 12px; +} + +#downloads-button-autohide-checkbox { + margin: 0; + padding: 0; +} + +#whimsy-button { + /* Don't need HiDPI versions since the size used will be scaled down to 20x20. */ + list-style-image: url("chrome://browser/skin/customizableui/whimsy.png"); +} + +#whimsy-button > .button-box > .button-icon { + width: 16px; + height: 16px; +} + +#customization-palette[whimsypong] { + /* Keep the palette in the render tree but invisible + so -moz-element() will work. */ + padding: 0; + min-height: 0; + max-height: 0; +} + +#customization-palette[whimsypong] > toolbarpaletteitem > toolbarspring { + margin: 0 -7px; +} + +@media (-moz-platform: linux) { + #customization-palette[whimsypong] > toolbarpaletteitem[id^="wrapper-customizableui-special-spring"] { + font-size: 12px; + } +} + +#wp-lives, +#wp-ball { + /* Don't need HiDPI versions since the size used will be scaled down to 20x20. */ + background-image: url("chrome://browser/skin/customizableui/whimsy.png"); + background-size: contain; + width: 20px; +} + +#customization-pong-arena { + width: 300px; + height: 300px; + border-inline: 1px solid currentColor; + margin: 16px auto 0; + box-sizing: content-box; +} + +#customization-palette[whimsypong] > toolbarpaletteitem[kcode], +#customization-pong-arena[kcode] { + animation-name: kcode; + animation-timing-function: steps(5); + animation-duration: 1s; + animation-iteration-count: infinite; +} + +#wp-ball { + margin-inline-start: -10px; + margin-top: -10px; + height: 20px; +} + +#wp-player1, +#wp-player2 { + width: 84px; + height: calc(39px + 3em); +} + +#wp-player1, +#wp-player2, +#wp-ball, +#wp-score { + display: block; + position: fixed; +} + +#wp-score { + transform: translateX(-4ch); +} + +#wp-score:-moz-locale-dir(rtl) { + transform: translateX(4ch); +} + +#wp-lives { + transform: translate(-4ch, 1ch); +} + +#wp-lives:-moz-locale-dir(rtl) { + transform: translate(4ch, 1ch); +} + +#wp-lives[lives="5"] { + height: 100px; +} + +#wp-lives[lives="4"] { + height: 80px; +} + +#wp-lives[lives="3"] { + height: 60px; +} + +#wp-lives[lives="2"] { + height: 40px; +} + +#wp-lives[lives="1"] { + height: 20px; +} + +#customization-pong-arena[lives="0"] > #wp-ball { + animation: game-over 4s forwards ease; +} + +@keyframes game-over { + 0% { + transform: scale(1) translateY(0) rotateZ(0); + opacity: 1; + } + 15% { + transform: scale(2) translateY(-10px) rotateZ(-90deg); + } + 35% { + opacity: 1; + } + 65% { + opacity: 0; + } + 100% { + transform: scale(2) translateY(300px) rotateZ(-2.5turn); + opacity: 0; + } +} + +@keyframes kcode { + 0% { border-color: rgb(195,17,206); color: rgb(195,17,206); } + 20% { border-color: rgb(252,82,27); color: rgb(252,82,27); } + 40% { border-color: rgb(251,179,0); color: rgb(251,179,0); } + 60% { border-color: rgb(105,211,0); color: rgb(105,211,0); } + 80% { border-color: rgb(20,155,249); color: rgb(20,155,249); } + 100% { border-color: rgb(195,17,206); color: rgb(195,17,206); } +} diff --git a/browser/themes/shared/customizableui/density-compact.svg b/browser/themes/shared/customizableui/density-compact.svg new file mode 100644 index 0000000000..8d6bf1e7cd --- /dev/null +++ b/browser/themes/shared/customizableui/density-compact.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/customizableui/density-normal.svg b/browser/themes/shared/customizableui/density-normal.svg new file mode 100644 index 0000000000..8298a571be --- /dev/null +++ b/browser/themes/shared/customizableui/density-normal.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/customizableui/density-touch.svg b/browser/themes/shared/customizableui/density-touch.svg new file mode 100644 index 0000000000..62963a5b0e --- /dev/null +++ b/browser/themes/shared/customizableui/density-touch.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/browser/themes/shared/customizableui/empty-overflow-panel.png b/browser/themes/shared/customizableui/empty-overflow-panel.png new file mode 100644 index 0000000000..6bad10f5c2 Binary files /dev/null and b/browser/themes/shared/customizableui/empty-overflow-panel.png differ diff --git a/browser/themes/shared/customizableui/empty-overflow-panel@2x.png b/browser/themes/shared/customizableui/empty-overflow-panel@2x.png new file mode 100644 index 0000000000..f2c7e5a418 Binary files /dev/null and b/browser/themes/shared/customizableui/empty-overflow-panel@2x.png differ diff --git a/browser/themes/shared/customizableui/panelUI-shared.css b/browser/themes/shared/customizableui/panelUI-shared.css new file mode 100644 index 0000000000..055a0e5a7e --- /dev/null +++ b/browser/themes/shared/customizableui/panelUI-shared.css @@ -0,0 +1,2033 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +:root { + --panel-item-hover-bgcolor: var(--button-hover-bgcolor); + --panel-item-active-bgcolor: var(--button-active-bgcolor); + --panel-banner-item-color: var(--button-color); + --panel-banner-item-background-color: var(--button-bgcolor); + --panel-banner-item-hover-bgcolor: var(--button-hover-bgcolor); + --panel-banner-item-active-bgcolor: var(--button-active-bgcolor); + --panel-banner-item-update-supported-bgcolor: #2AC3A2; + --panel-banner-item-info-icon-bgcolor: #0090ED; + + --menu-panel-width: 22.35em; + --menu-panel-width-wide: 29em; + + --arrowpanel-menuitem-margin-block: 0; + --arrowpanel-menuitem-margin-inline: 8px; + --arrowpanel-menuitem-margin: var(--arrowpanel-menuitem-margin-block) var(--arrowpanel-menuitem-margin-inline); + --arrowpanel-menuitem-padding-block: 8px; + --arrowpanel-menuitem-padding-inline: 8px; + --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline); + --arrowpanel-menuitem-border-radius: 4px; + --arrowpanel-header-back-icon-padding: 8px; + --arrowpanel-header-back-icon-full-width: calc(16px + (2 * var(--arrowpanel-header-back-icon-padding))); + --arrowpanel-header-info-icon-padding: 4px; + --arrowpanel-header-info-icon-margin-inline-end: 4px; + --arrowpanel-header-info-icon-full-width: calc(16px + (2 * var(--arrowpanel-header-info-icon-padding))); + --arrowpanel-header-height: calc(16px + (var(--arrowpanel-header-back-icon-padding) * 2) + (var(--panel-separator-margin-horizontal) * 2)); + --panel-separator-margin-vertical: 4px; + --panel-separator-margin-horizontal: 8px; + --panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal); + --panel-subview-body-padding-block: 8px; + --panel-subview-body-padding-inline: 0; + --panel-subview-body-padding: var(--panel-subview-body-padding-block) var(--panel-subview-body-padding-inline); + + --panel-and-palette-icon-size: 16px; +} + +:root:not(:-moz-lwtheme) { + --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%); +} + +:root[uidensity=compact] { + --arrowpanel-menuitem-margin-inline: 4px; + --arrowpanel-menuitem-padding-block: 0px; + --arrowpanel-header-back-icon-padding: 4px; + --arrowpanel-header-info-icon-margin-inline-end: 0px; + --panel-separator-margin-horizontal: 4px; + --panel-subview-body-padding-block: 4px; +} + +#PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: -moz-box; + height: 10px; + width: 10px; + background-size: contain; + border: none; +} + +#PanelUI-menu-button[badge-status="extension-new-tab"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="download-success"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: none; +} + +#PanelUI-menu-button[badge-status="update-available"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-downloading"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-manual"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-other-instance"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-unsupported"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + box-shadow: none; + /* "!important" is necessary to override the rule in toolbarbutton.css */ + margin: -5px 0 0 !important; + margin-inline-end: -3px !important; + min-width: 12px; + min-height: 12px; + -moz-context-properties: fill; + background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center; + background-size: 12px; +} + +#PanelUI-menu-button[badge-status="update-available"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-downloading"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-manual"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-other-instance"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + fill: var(--panel-banner-item-update-supported-bgcolor); +} + +#PanelUI-menu-button[badge-status="update-unsupported"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: url(chrome://global/skin/icons/warning-fill-12.svg) no-repeat center; + fill: var(--warning-icon-bgcolor); +} + +.panel-banner-item[notificationid="update-available"] > .toolbarbutton-icon, +.panel-banner-item[notificationid="update-downloading"] > .toolbarbutton-icon, +.panel-banner-item[notificationid="update-manual"] > .toolbarbutton-icon, +.panel-banner-item[notificationid="update-other-instance"] > .toolbarbutton-icon, +.panel-banner-item[notificationid="update-restart"] > .toolbarbutton-icon { + background-image: url(chrome://browser/skin/update-badge.svg); + background-repeat: no-repeat; + background-position: center; + -moz-context-properties: fill; + fill: var(--panel-banner-item-update-supported-bgcolor); +} + +.panel-banner-item[notificationid="update-unsupported"] > .toolbarbutton-icon { + background: url(chrome://global/skin/icons/warning.svg) no-repeat center; + -moz-context-properties: stroke, fill; + stroke: var(--arrowpanel-background); + fill: var(--warning-icon-bgcolor); +} + +#PanelUI-menu-button[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#fxa-toolbar-menu-button[badge-status="login_failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + height: 13px; + background: url(chrome://global/skin/icons/warning-fill-12.svg) center / contain no-repeat transparent; + box-shadow: none; + border-radius: 0; + -moz-context-properties: fill; + fill: var(--warning-icon-bgcolor); +} + +#fxa-toolbar-menu-button[badge-status="login_failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: flex; +} + +#PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive { + filter: grayscale(100%); +} + +.cui-widget-panel, +#widget-overflow, +#unified-extensions-panel { + font: menu; +} + +panelview { + -moz-box-orient: vertical; + background: var(--arrowpanel-background); + padding: 0; +} + +/* Prevent a scrollbar from appearing while the animation for transitioning from + one view to another runs, which would otherwise happen if the new view has + more height than the old one because that would mean that during the + animation the height of the multiview will be too short for the new view. */ +panelmultiview[transitioning] > .panel-viewcontainer > .panel-viewstack > panelview > .panel-subview-body { + overflow-y: hidden; +} + +.panel-subview-body { + overflow-y: auto; + overflow-x: hidden; + -moz-box-flex: 1; + padding: var(--panel-subview-body-padding); +} + +.panel-subview-body:not(:last-child) { + padding-bottom: 0; +} + +toolbarseparator + .panel-subview-body { + padding-top: 0; +} + +.panel-view-body-unscrollable { + overflow: hidden; + -moz-box-flex: 1; +} + +.panel-info-button { + appearance: none; + color: inherit; + padding: 0; + border-radius: var(--toolbarbutton-border-radius); + flex-shrink: 0; +} + +.panel-info-button[disabled=true] { + visibility: hidden; +} + +.panel-info-button:hover { + background-color: var(--panel-item-hover-bgcolor); +} + +.panel-info-button:not(:hover)[checked], +.panel-info-button:hover:active { + background-color: var(--panel-item-active-bgcolor); +} + +.panel-info-button:focus-visible { + outline: var(--focus-outline); +} + +.panel-info-button > image { + list-style-image: url(chrome://global/skin/icons/info.svg); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + padding: var(--arrowpanel-header-info-icon-padding); +} + +#wrapper-edit-controls:is([place="palette"],[place="panel"]) > #edit-controls, +#wrapper-zoom-controls:is([place="palette"],[place="panel"]) > #zoom-controls, +:is(panelview, #widget-overflow-fixed-list) .toolbaritem-combined-buttons { + margin: var(--arrowpanel-menuitem-margin); +} + +/* Bookmark-related menupopup tweaks to make them feel like standard panels */ + +toolbarbutton menupopup[placespopup] { + appearance: none; + border: none; + font: menu; + background-color: transparent; + --panel-background: var(--arrowpanel-background); + --panel-color: var(--arrowpanel-color); + --panel-border-color: var(--arrowpanel-border-color); + --panel-border-radius: var(--arrowpanel-border-radius); + --panel-padding: var(--panel-subview-body-padding); +} + +toolbarbutton menupopup[placespopup] menupopup[placespopup] { + /* Align non top-level menupopup's first menuitem with the menuitem that opened it. + * The 1px is for the menupopup's border. */ + margin-top: calc(-1 * (var(--panel-subview-body-padding-block) + var(--panel-shadow-margin) + 1px)); +} + +toolbarbutton menupopup[placespopup] > :is(menu, menuitem)[disabled] { + color: var(--panel-disabled-color); +} + +toolbarbutton menupopup[placespopup] > :is(menu, menuitem):not([disabled])[_moz-menuactive] { + color: inherit; + background-color: var(--panel-item-hover-bgcolor); +} + +toolbarbutton menupopup[placespopup] > :is(menu, menuitem):not([disabled])[_moz-menuactive]:active { + color: inherit; + background-color: var(--panel-item-active-bgcolor); +} + +toolbarbutton menupopup[placespopup] > :is(menu, menuitem) :is( + .menu-text, + .menu-iconic-text, + .menu-iconic-icon, + .menu-iconic-left, + .menu-iconic-accel, + .menu-accel-container, + .menu-accel, + .menu-right +) { + /* Reset every spacing and appearance set by the platforms' menu.css + * and set the ones we need in the following rules. */ + margin: 0 !important; + padding: 0 !important; + appearance: none !important; +} + +toolbarbutton menupopup[placespopup] > :is(.menu-iconic, .menuitem-iconic) > .menu-iconic-left { + margin-inline-end: 8px !important; +} + +toolbarbutton menupopup[placespopup] > :is(menu, menuitem) > .menu-accel-container > :is(.menu-accel, .menu-iconic-accel) { + margin-inline-start: 16px !important; + color: var(--panel-shortcut-color); +} + +toolbarbutton menupopup[placespopup][emptyplacesresult] > menuitem > .menu-accel-container > .menu-accel { + margin: 0 !important; +} + +toolbarbutton menupopup[placespopup] > menu > .menu-right { + list-style-image: url(chrome://global/skin/icons/arrow-right.svg); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.6; + width: unset; + height: unset; + /* Reset the rect we inherit from the button */ + -moz-image-region: auto; +} + +toolbarbutton menupopup[placespopup] > menu > .menu-right:-moz-locale-dir(rtl) { + list-style-image: url(chrome://global/skin/icons/arrow-left.svg); +} + +/* menuseparators in bookmark-related menupopups are styled differently + * to allow for user interaction with them (e.g. drag, right click ...) */ +toolbarbutton menupopup[placespopup] menuseparator { + position: relative; + appearance: none; + border: none; + min-height: 0; + margin: 0 var(--panel-separator-margin-horizontal); + padding-inline: 0; + padding-top: var(--panel-separator-margin-vertical); + padding-bottom: calc(var(--panel-separator-margin-vertical) + 1px); +} + +toolbarbutton menupopup[placespopup] menuseparator::before { + content: ''; + position: absolute; + width: 100%; + border-top: 1px solid var(--panel-separator-color); + border-bottom: none; +} + +#BMB_bookmarksPopup { + max-width: 30em; +} + +#confirmation-hint { + --arrowpanel-background: #0060df; + --arrowpanel-border-color: #0060df; + --arrowpanel-color: #fff; + --arrowpanel-padding: 6px 10px; + font-weight: 400; + font-size: 1.1rem; +} + +#confirmation-hint::part(content) { + -moz-box-align: center; +} + +#confirmation-hint-checkmark-animation-container { + position: relative; + overflow: hidden; + width: 14px; + height: 14px; +} + +/* Don't show the checkmark if there is a description */ +#confirmation-hint.with-description #confirmation-hint-checkmark-animation-container { + display: none; +} + +#confirmation-hint-checkmark-animation-container[animate] > #confirmation-hint-checkmark-image { + display: block; + position: absolute; + background-image: url(chrome://browser/skin/success-animation.svg); + background-repeat: no-repeat; + /* frames are 16px wide by 14px high */ + min-width: 304px; + max-width: 304px; + min-height: 14px; + max-height: 14px; + animation-name: confirmation-hint-checkmark-animation; + animation-fill-mode: forwards; + animation-timing-function: steps(18); + -moz-context-properties: fill; + fill: currentColor; +} + +#confirmation-hint[data-message-id="loginRemoved"] #confirmation-hint-checkmark-image { + background-image: url("chrome://global/skin/icons/delete.svg"); + background-size: contain; + -moz-context-properties: fill; + fill: #FFF; + animation: none; +} + +#confirmation-hint-checkmark-animation-container[animate] > #confirmation-hint-checkmark-image:-moz-locale-dir(rtl) { + animation-name: confirmation-hint-checkmark-animation-rtl; + transform: translateX(288px); +} + +@media (prefers-reduced-motion: no-preference) { + #confirmation-hint-checkmark-animation-container[animate] > #confirmation-hint-checkmark-image { + animation-duration: 300ms; + animation-delay: 60ms; + } +} + +@keyframes confirmation-hint-checkmark-animation { + from { + transform: translateX(0); + } + to { + transform: translateX(-288px); + } +} + +@keyframes confirmation-hint-checkmark-animation-rtl { + from { + transform: translateX(288px); + } + to { + transform: translateX(0); + } +} + +#confirmation-hint-message { + margin-inline: 7px 0; +} + +#confirmation-hint.with-description #confirmation-hint-message { + font-size: 1.2em; + font-weight: 600; +} + +@media (prefers-reduced-motion: no-preference) { + #confirmation-hint-message-container { + transform: scale(.8); + opacity: 0; + transition: transform 120ms cubic-bezier(.25,1.27,.35,1.18), + opacity 60ms linear; + } + + #confirmation-hint-checkmark-animation-container[animate] + #confirmation-hint-message-container { + transform: scale(1); + opacity: 1; + } +} + +panelview[id^=PanelUI-webext-] { + overflow: hidden; +} + +.cui-widget-panel { + --arrowpanel-padding: var(--panel-subview-body-padding); +} + +#appMenu-popup panelview, +#PanelUI-fxa { + width: 22.5em; +} + +#customizationui-widget-multiview panelview:not([extension]) { + min-width: var(--menu-panel-width); + max-width: 35em; +} + +#customizationui-widget-multiview #appMenu-libraryView, +#pageActionPanel panelview, +#widget-overflow panelview { + min-width: var(--menu-panel-width-wide); + max-width: var(--menu-panel-width-wide); +} + +/* Add 2 * 16px extra width for touch mode button padding. */ +#appMenu-popup[touchmode] panelview { + min-width: calc(var(--menu-panel-width) + 32px); +} + +.toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] +) > toolbarbutton > .toolbarbutton-icon { + min-width: 0; + min-height: 0; + margin: 0; +} + +.animate-out { + animation-name: widget-animate-out; + animation-fill-mode: forwards; + animation-duration: 500ms; + animation-timing-function: var(--animation-easing-function); +} + +@keyframes widget-animate-out { + 0% { + opacity: 1; + transform: scale(1); + } + 100% { + opacity: 0 ; + transform: scale(.5); + } +} + +toolbarpaletteitem[place="panel"] > .toolbarbutton-1 { + -moz-box-flex: 1; +} + +/* Help webextension buttons fit in. */ +toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon, +toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon, +toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-icon, +toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { + height: var(--panel-and-palette-icon-size); + width: var(--panel-and-palette-icon-size); +} + +#customization-palette .toolbarbutton-1 { + appearance: none; + -moz-box-orient: vertical; + padding: 12px 0 9px; + margin: 0; +} + +/* above we treat the container as the icon for the margins, that is so the +/* badge itself is positioned correctly. Here we make sure that the icon itself +/* has the minimum size we want, but no padding/margin. */ +.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon { + width: var(--panel-and-palette-icon-size); + height: var(--panel-and-palette-icon-size); + min-width: var(--panel-and-palette-icon-size); + min-height: var(--panel-and-palette-icon-size); + margin: 0; + padding: 0; +} + +#zoom-in-button > .toolbarbutton-text, +#zoom-out-button > .toolbarbutton-text, +#zoom-reset-button > .toolbarbutton-icon { + display: none; +} + +/* Main menu banner menuitems */ + +#appMenu-popup .panel-banner-item, +#appMenu-popup .addon-banner-item { + -moz-box-align: start; + color: var(--panel-banner-item-color); + background-color: var(--panel-banner-item-background-color); + margin-bottom: 4px; + font-weight: 600; +} + +:root[uidensity="compact"] .panel-banner-item, +:root[uidensity="compact"] .addon-banner-item { + /* Without some padding the button gets too crowded even for compact mode + when the text wraps to a newline. */ + padding-block: 4px; +} + +#appMenu-popup .panel-banner-item:not([disabled]):hover, +#appMenu-popup .addon-banner-item:not([disabled]):hover { + background-color: var(--panel-banner-item-hover-bgcolor); +} + +#appMenu-popup .panel-banner-item:not([disabled]):hover:active, +#appMenu-popup .addon-banner-item:not([disabled]):hover:active { + background-color: var(--panel-banner-item-active-bgcolor); +} + +#appMenu-popup .panel-banner-item > .toolbarbutton-text, +#appMenu-popup .addon-banner-item > .toolbarbutton-text { + display: inline-block; + padding: 0; +} + +.panel-banner-item > .toolbarbutton-icon { + width: 16px; + height: 16px; + /* Move the icon to appear after the text label. */ + -moz-box-ordinal-group: 2; +} + +.addon-banner-item > .toolbarbutton-icon { + display: none; +} + +/* Addon banners use that one for the addon's icon and need a content element + added to put their generic notification in. */ +.addon-banner-item::after { + content: ""; + display: -moz-box; + background: url(chrome://global/skin/icons/warning.svg) no-repeat center; + width: 16px; + height: 16px; + -moz-context-properties: fill; + fill: var(--warning-icon-bgcolor); + margin-inline-start: 10px; +} + +/* FxAccount indicator bits. */ + +@keyframes syncRotate { + from { transform: rotate(0); } + to { transform: rotate(360deg); } +} + +@media (prefers-reduced-motion: no-preference) { +#PanelUI-fxa-menu-syncnow-button[syncstatus="active"] > .toolbarbutton-icon, +#PanelUI-remotetabs-syncnow[syncstatus="active"] > .toolbarbutton-icon, +.syncNowBtn[syncstatus="active"] { + animation: syncRotate 0.8s linear infinite; + -moz-context-properties: fill; + fill: var(--toolbarbutton-icon-fill-attention); + visibility: visible; +} +} + +.syncNowBtn { + -moz-context-properties: fill; + fill: currentColor; + height: 16px; + width: 16px; + list-style-image: url("chrome://browser/skin/sync.svg"); +} + +#fxa-menu-account-fxa-avatar { + pointer-events: none; + list-style-image: var(--avatar-image-url); + -moz-context-properties: fill; + fill: currentColor; +} + +/* Handle different UI states. */ + +:root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-syncnow-button { + display: none; +} + +/* Error states */ + +#appMenu-fxa-status2 { + display: flex; +} + +#appMenu-fxa-text, +#appMenu-fxa-status2[fxastatus] > #appMenu-fxa-label2 { + flex: 1; + align-self: center; +} + +#appMenu-fxa-status2[fxastatus] { + margin: 0; + padding: 0; +} + +#appMenu-fxa-status2:not([fxastatus]) { + padding-block: 0 2px; +} + +#appMenu-fxa-status2[fxastatus] > #appMenu-fxa-label2 > vbox > #appMenu-header-description, +#appMenu-fxa-text { + font-weight: 600; +} + +#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2 { + padding: 6px 12px; + background-color: var(--button-bgcolor); + font-size: 0.8em; + font-weight: 600; +} + +#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2:hover { + background-color: var(--button-hover-bgcolor); +} + +#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2:active { + background-color: var(--button-active-bgcolor); +} + +:root[fxadisabled=true] #appMenu-fxa-status2, +:root[fxadisabled=true] #appMenu-fxa-separator { + display: none; +} + +#fxa-manage-account-button > vbox > label, +#PanelUI-fxa-menu-syncnow-button > hbox > label, +#PanelUI-remotetabs-syncnow > hbox > label { + margin-inline-start: 0; +} + +#appMenu-fxa-label2 > vbox > label { + margin-inline: 0; +} + +.syncNowBtn { + visibility: collapse; + -moz-box-ordinal-group: 2; +} + +.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] { + font-size: 11px; +} + +#appMenu-fxa-status2[fxastatus="login-failed"] #appMenu-fxa-label2::after { + content: url("chrome://global/skin/icons/warning.svg"); + -moz-context-properties: fill; + fill: var(--warning-icon-bgcolor); +} + +#appMenu-fxa-status2[fxastatus="unverified"] #appMenu-fxa-label2::after { + content: url("chrome://global/skin/icons/info-filled.svg"); + -moz-context-properties: fill; + fill: var(--panel-banner-item-info-icon-bgcolor); +} + +/* Firefox Account Toolbar Panel */ + +#fxa-avatar-image { + width: 16px; + height: 16px; +} + +:root { + --avatar-image-url: url(chrome://browser/skin/fxa/avatar.svg); +} + +:root[fxastatus="not_configured"] { + --avatar-image-url: url(chrome://browser/skin/fxa/avatar-empty.svg); +} + +:root:not([fxatoolbarmenu]) #fxa-toolbar-menu-button { + display: none; +} + +/* Hide the FxA toolbar button when its in the nav-bar, until in use */ +:root[fxastatus="not_configured"] #widget-overflow-list > #fxa-toolbar-menu-button, +:root[fxastatus="not_configured"] #nav-bar-customization-target > #fxa-toolbar-menu-button { + display: none; +} + +#fxa-avatar-image, +#PanelUI-fxa-menu-account-settings-button { + list-style-image: var(--avatar-image-url); +} + +/* Non-signedin statuses icons are not totally round. */ +:root[fxastatus="signedin"] #fxa-avatar-image { + border-radius: 50%; +} + +.PanelUI-fxa-service-description-label, +.PanelUI-remotetabs-instruction-label { + /* Use 'lighter' font for this to de-emphasize it compared to the title. */ + font-weight: lighter; +} + +@media (-moz-platform: linux) { + .PanelUI-fxa-service-description-label, + .PanelUI-remotetabs-instruction-label { + /* Use 300 on Linux because 100 is too light (lacks contrast with + * the background) for some fonts in combination with anti-aliasing. */ + font-weight: 300; + } +} + +#fxa-menu-header-title { + color: var(--arrowpanel-color); +} + +#fxa-menu-header-description { + color: var(--panel-description-color); + font-weight: 600; +} + +#PanelUI-appMenu-fxa-label-last-synced { + font-size: 10px; + font-style: italic; + color: var(--panel-description-color); +} + +#PanelUI-fxa-menu-send-button { + list-style-image: url(chrome://browser/skin/fxa/send.svg); +} + +#PanelUI-fxa-menu-monitor-button { + list-style-image: url(chrome://browser/skin/fxa/monitor.svg); +} + +#PanelUI-fxa-menu-connect-device-button { + list-style-image: url(chrome://browser/skin/fxa/add-device.svg); +} + +:root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-connect-device-button { + color: var(--panel-disabled-color); +} + +/* From the FxA menu -> synced tabs, we don't need to clutter the view with + redundant buttons because these are accessible from the main menu */ +panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow { + display: none; +} + +#PanelUI-sendTabToDevice > .panel-subview-body:not([state]) > #PanelUI-sendTabToDevice-syncingDevices { + display: none; +} + +#PanelUI-fxa-menu-sendtab-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { + transform: scaleX(-1); +} + +.fxaSendLogo, +.fxaMonitorLogo { + margin-top: 15px; + height: 80px; + width: 80px; +} + +.fxaSendToDeviceLogo { + margin-top: 15px; + height: 119px; + width: 164px; + list-style-image: url(chrome://browser/skin/fxa/send-to-device.svg); +} + +.fxaSendLogo { + list-style-image: url(chrome://browser/content/logos/send.svg); +} + +.fxaMonitorLogo { + list-style-image: url(chrome://browser/content/logos/monitor.svg); +} + +#PanelUI-remotetabs { + --panel-ui-sync-illustration-height: 141px; +} + +.sendToDevice-device[clientType=phone] { + list-style-image: url("chrome://browser/skin/device-phone.svg"); +} + +.sendToDevice-device[clientType=tablet] { + list-style-image: url("chrome://browser/skin/device-tablet.svg"); +} + +.sendToDevice-device[clientType=desktop] { + list-style-image: url("chrome://browser/skin/device-desktop.svg"); +} + +.sendToDevice-device[clientType=tv] { + list-style-image: url("chrome://browser/skin/device-tv.svg"); +} + +.sendToDevice-device[clientType=vr] { + list-style-image: url("chrome://browser/skin/device-vr.svg"); +} + +.sendToDevice-device.signintosync { + list-style-image: url("chrome://browser/skin/sync.svg"); +} + +.PanelUI-fxa-service-description-label, +.PanelUI-remotetabs-instruction-label { + /* If you change the margin here, the min-height of the synced tabs panel + (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may + need adjusting (see bug 1248506) */ + margin: 0; + text-align: center; + text-shadow: none; + max-width: 15em; +} + +.PanelUI-fxa-service-description-label, +.PanelUI-remotetabs-instruction-label { + margin-top: 10px; +} + +.PanelUI-fxa-signin-button, +.PanelUI-remotetabs-button { + appearance: none; + background-color: #0060df; + /* !important for the color as an OSX specific rule when a lightweight theme + is used for buttons in the toolbox overrides. See bug 1238531 for details */ + color: white !important; + border-radius: 2px; + /* If you change the margin or padding below, the min-height of the synced tabs + panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, + etc) may need adjusting (see bug 1248506) */ + margin-block: 15px; + padding: 8px; + text-shadow: none; + min-width: 200px; +} + +.PanelUI-fxa-signin-button, +.PanelUI-remotetabs-button { + padding: 1em; +} + +.PanelUI-fxa-signin-button:hover, +.PanelUI-remotetabs-button:hover { + background-color: #003eaa; +} + +.PanelUI-fxa-signin-button:hover:active, +.PanelUI-remotetabs-button:hover:active { + background-color: #002275; +} + +.remotetabs-promo-link { + margin: 0; +} + +.PanelUI-remotetabs-notabsforclient-label { + color: var(--panel-description-color); + /* This margin is to line this label up with the labels in toolbarbuttons. */ + margin-inline-start: 28px; +} + +#PanelUI-remotetabs[mainview] .PanelUI-remotetabs-notabsforclient-label { + margin-inline-start: 32px; +} + +.fxaSyncIllustration, +.fxaSyncIllustrationIssue { + /* If you change the margin here, the min-height of the synced tabs panel + (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may + need adjusting (see bug 1248506) */ + width: 204px; + height: var(--panel-ui-sync-illustration-height); + -moz-context-properties: fill; + fill: #cdcdcd; +} + +.fxaSyncIllustration { + list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg); +} + +.fxaSyncIllustrationIssue { + list-style-image: url(chrome://browser/skin/fxa/sync-illustration-issue.svg); +} + +.PanelUI-fxa-signin-button > .toolbarbutton-text, +.PanelUI-remotetabs-button > .toolbarbutton-text { + /* Overrides toolbar[mode="icons"] from xul.css */ + display: block; +} + +#PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */ + min-width: 19em; +} + +/* Work around bug 1224412 - these boxes will cause scrollbars to appear when + the panel is anchored to a toolbar button. +*/ +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-syncdisabled, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-unverified, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane { + min-height: calc(var(--panel-ui-sync-illustration-height) + + 15px + /* margin of .fxaSyncIllustration */ + 30px + /* margin of .PanelUI-remotetabs-button */ + 8px + /* padding of .PanelUI-remotetabs-button */ + 1em); +} + +.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] { + color: var(--panel-description-color); +} + +/* Collapse the non-active vboxes in the remotetabs deck to use only the + height the active box needs */ +#PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane, +#PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching, +#PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane { + visibility: collapse; +} + +#PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons { + display: none; +} + +#PanelUI-fxa-remotetabs-deck:not([syncingtabs]) { + display: none; +} + +#customization-palette .toolbarbutton-text { + display: none; +} + +toolbarbutton menupopup[placespopup] > :is(menu, menuitem), +.subview-subheader, +panelview .toolbarbutton-1, +.subviewbutton, +.widget-overflow-list .toolbarbutton-1 { + appearance: none; + margin: var(--arrowpanel-menuitem-margin); + min-height: 24px; + padding: var(--arrowpanel-menuitem-padding); + border-radius: var(--arrowpanel-menuitem-border-radius); + background-color: transparent; +} + +.subview-subheader { + font-size: 11px; + font-weight: inherit; + color: var(--panel-description-color); + padding-block: 4px; + box-sizing: border-box; +} + +.subviewbutton { + /* toolbarbuttons default to centered, but we don't want that for subviews. */ + -moz-box-pack: start; +} + +.subviewbutton[disabled="true"] { + color: var(--panel-disabled-color); +} + +.subviewbutton-iconic > .toolbarbutton-text, +.subviewbutton[image] > .toolbarbutton-text, +.subviewbutton[targetURI] > .toolbarbutton-text, +.subviewbutton.bookmark-item > .toolbarbutton-text, +.subviewbutton[checked="true"] > .toolbarbutton-text { + padding-inline-start: 8px; +} + +.subviewbutton-iconic > .toolbarbutton-icon { + width: 16px; + height: 16px; + -moz-context-properties: fill; + fill: currentColor; +} + +/* Adjust the Zoom toolbaritem padding to have its height the same as other toolbarbuttons, + * also in compact density and touch mode. */ +#appMenu-zoom-controls { + padding-block: max(0px, var(--arrowpanel-menuitem-padding-block) - 4px); +} + +#appMenu-zoom-controls > .subviewbutton { + margin-inline-start: 2px; + padding: 4px; +} + +/* hover and active color changes are applied to child elements not the button itself */ +#appMenu-zoom-controls > .subviewbutton:not([disabled]):is(:hover, :hover:active) { + color: unset; + background-color: unset; +} + +#appMenu-zoom-controls > .subviewbutton:focus-visible { + outline: none; +} + +#appMenu-zoom-controls > .subviewbutton-iconic:focus-visible > .toolbarbutton-icon, +#appMenu-zoomReset-button2:focus-visible > .toolbarbutton-text { + outline: var(--focus-outline); +} + +#appMenu-zoomReduce-button2 > .toolbarbutton-icon, +#appMenu-zoomEnlarge-button2 > .toolbarbutton-icon { + -moz-context-properties: fill, stroke; + fill: var(--button-color); + /* the stroke color is used to fill the circle in the icon */ + stroke: var(--button-bgcolor); + border-radius: 50%; + padding: 0; +} + +#appMenu-zoomReset-button2 > .toolbarbutton-text, +#appMenu-fullscreen-button2 > .toolbarbutton-icon { + border-radius: 2px; +} + +#appMenu-fullscreen-button2 > .toolbarbutton-icon { + padding: 1px; + background-color: var(--button-bgcolor); +} + +#appMenu-zoomReset-button2:not([disabled]):hover > .toolbarbutton-text, +#appMenu-fullscreen-button2:not([disabled]):hover > .toolbarbutton-icon { + background-color: var(--panel-item-hover-bgcolor); +} +#appMenu-zoomReduce-button2:not([disabled]):hover > .toolbarbutton-icon, +#appMenu-zoomEnlarge-button2:not([disabled]):hover > .toolbarbutton-icon { + stroke: var(--panel-item-hover-bgcolor); +} + +#appMenu-zoomReset-button2:not([disabled]):active:hover > .toolbarbutton-text, +#appMenu-fullscreen-button2:not([disabled]):active:hover > .toolbarbutton-icon { + background-color: var(--panel-item-active-bgcolor); +} +#appMenu-zoomReduce-button2:not([disabled]):active:hover > .toolbarbutton-icon, +#appMenu-zoomEnlarge-button2:not([disabled]):active:hover > .toolbarbutton-icon { + stroke: var(--panel-item-active-bgcolor); +} + +/** + * When the Zoom Reset button is disabled, we don't want the zoom-level + * indicator to be so hard to read, so we override the disabled text + * style on it. + */ +#appMenu-zoomReset-button2[disabled], +#zoom-reset-button[disabled] { + opacity: 1; +} + +/* We don't always display: none this item, and if it has forced width (like above) + * or margin, that impacts the position of the label. Fix: + */ +.subviewbutton > .toolbarbutton-icon { + margin: 0; +} + +.subviewbutton > .toolbarbutton-text { + text-align: start; + display: block; +} + +.panel-subview-footer-button { + /* Set the footer's bottom margin according to menuitems inline margin + to make sure the footer's margin is even from all sides. */ + margin-bottom: var(--arrowpanel-menuitem-margin-inline); +} + +.subviewbutton[shortcut]::after { + content: attr(shortcut); + display: -moz-box; + color: var(--panel-shortcut-color); +} + +#protections-popup-mainView .subviewbutton-nav:not(.notFound)::after, +#identity-credential-notification .subviewbutton-nav::after, +.widget-overflow-list .subviewbutton-nav::after, +.PanelUI-subView .subviewbutton-nav::after { + -moz-context-properties: fill, fill-opacity; + content: url(chrome://global/skin/icons/arrow-right.svg); + fill: currentColor; + fill-opacity: 0.6; + display: -moz-box; +} + +#protections-popup-mainView .subviewbutton-nav:not(.notFound):-moz-locale-dir(rtl)::after, +#identity-credential-notification .subviewbutton-nav:-moz-locale-dir(rtl)::after, +.widget-overflow-list .subviewbutton-nav:-moz-locale-dir(rtl)::after, +.PanelUI-subView .subviewbutton-nav:-moz-locale-dir(rtl)::after { + content: url(chrome://global/skin/icons/arrow-left.svg); +} + +.PanelUI-subView .subviewbutton-nav-down::after { + content: url(chrome://global/skin/icons/arrow-down.svg); +} + +.subviewbutton[shortcut]::after, +.widget-overflow-list .subviewbutton-nav::after, +.PanelUI-subView .subviewbutton-nav::after { + margin-inline-start: 10px; +} + +.subviewbutton[checked="true"] { + list-style-image: url(chrome://global/skin/icons/check.svg); + -moz-context-properties: fill; + fill: currentColor; + color: inherit; +} + +.subviewbutton[type="open-to-new"]::after { + content: url(chrome://global/skin/icons/open-in-new.svg); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.6; + display: -moz-box; + height: 12px; + width: 12px; +} + +.subviewbutton[type="open-to-new"]:-moz-locale-dir(rtl)::after { + transform: scaleX(-1); +} + +/* A menu item with some buttons at the end. */ +.toolbaritem-menu-buttons { + /* Use the same margin at the start as at the end (other margin set below). */ + margin-inline-start: 8px; +} + +.toolbaritem-menu-buttons > .subviewbutton { + min-width: auto; + padding-inline: 5px; +} + +.toolbaritem-menu-buttons > .subviewbutton-iconic:not([flex]) > .toolbarbutton-text { + display: none; +} + +.toolbaritem-combined-buttons, +.toolbaritem-menu-buttons { + -moz-box-align: center; + -moz-box-orient: horizontal; + border: 0; + border-radius: 0; +} + +.toolbaritem-combined-buttons:not([widget-type="button-and-view"], [widget-type="custom"]), +.toolbaritem-menu-buttons { + margin-inline-end: 8px; +} + +panelmultiview .toolbaritem-combined-buttons > label { + -moz-box-flex: 1; + margin: 0; + padding: 4px 0; +} + +.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton { + -moz-box-flex: 0; + height: auto; + margin-inline-start: 18px; + min-width: auto; + padding: 4px 5px; +} + +#appMenu-zoomReset-button2 > .toolbarbutton-text { + min-width: calc(4ch + 8px); + text-align: center; +} + +.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton-iconic > .toolbarbutton-text, +.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-icon { + display: none; +} + +.toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text { + padding-inline-start: 0; +} + +panelview .toolbarbutton-1 { + margin-top: 6px; +} + +:is( + panelview .toolbarbutton-1, + toolbarbutton.subviewbutton, + .widget-overflow-list .toolbarbutton-1, + .toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] + ) > toolbarbutton +):focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +/* hover styles for not-disabled, not-active buttons */ +:is( + panelview .toolbarbutton-1, + toolbarbutton.subviewbutton, + .widget-overflow-list .toolbarbutton-1, + .toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] + ) > toolbarbutton +):not([disabled]):hover { + color: inherit; + background-color: var(--panel-item-hover-bgcolor); +} + +/* hovered-and-active styles for not-disabled buttons */ +:is( + panelview .toolbarbutton-1, + toolbarbutton.subviewbutton, + .widget-overflow-list .toolbarbutton-1, + .toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] + ) > toolbarbutton +):not([disabled]):hover:active { + color: inherit; + background-color: var(--panel-item-active-bgcolor); + box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset; +} + +#widget-overflow-mainView > toolbarseparator, +#widget-overflow-mainView > .panel-subview-body > toolbarseparator, +.PanelUI-subView toolbarseparator, +#unified-extensions-panel toolbarseparator, +#permission-popup-mainView > toolbarseparator, +#editBookmarkPanel toolbarseparator, +#downloadsFooterButtons > toolbarseparator, +.cui-widget-panel toolbarseparator { + appearance: none; + min-height: 0; + border-top: 1px solid var(--panel-separator-color); + border-bottom: none; + margin: var(--panel-separator-margin); + padding: 0; +} + +.PanelUI-subView toolbarseparator.proton-zap { + border-image: var(--panel-separator-zap-gradient, none) 1; +} + +.PanelUI-remotetabs-clientcontainer > toolbarbutton[itemtype="tab"], +#PanelUI-historyItems > toolbarbutton { + list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +#fxa-menu-account-fxa-avatar, +#appMenu-fxa-label > .toolbarbutton-icon, +#PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon, +.PanelUI-remotetabs-clientcontainer > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon, +#PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon, +#PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon, +#PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +#PanelUI-fxa-remotetabs-tabspane { + min-width: 0; +} + +#PanelUI-fxa-menu-account-settings-button > .toolbarbutton-icon { + border-radius: 50%; +} + +toolbarpaletteitem[place="palette"] > #search-container { + min-width: 7em; + width: 7em; + min-height: 37px; + max-height: 37px; +} + +.toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] +) > toolbarbutton { + border: 0; + margin: 0; + -moz-box-flex: 1; + padding-block: var(--arrowpanel-menuitem-padding-block); + -moz-box-orient: horizontal; +} + +toolbarpaletteitem[place="panel"], +toolbarpaletteitem[place="panel"] > toolbaritem { + -moz-box-flex: 1; +} + +.toolbaritem-combined-buttons[cui-areatype="panel"] > .toolbarbutton-combined-buttons-dropmarker, +.toolbaritem-combined-buttons[overflowedItem] > .toolbarbutton-combined-buttons-dropmarker { + display: none; +} + +.toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] +) > toolbarbutton:not(.toolbarbutton-1)[disabled] { + opacity: 0.4; + /* Override toolbarbutton.css which sets the color to GrayText */ + color: inherit; +} + +#zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text { + /* 4 chars max, but `ch` is the width of the `0` glyph, so account for larger glyphs by adding 1ch */ + min-width: calc(5ch + var(--toolbarbutton-inner-padding) * 2); +} + +.toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] +) > separator { + appearance: none; + -moz-box-align: stretch; + margin: .5em 0; + width: 1px; + height: auto; + background: var(--panel-separator-color); + transition-property: margin; + transition-duration: 10ms; + transition-timing-function: ease; +} + +.toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] +):hover > separator { + margin: 0; +} + +toolbaritem[overflowedItem=true], +.widget-overflow-list .toolbarbutton-1 { + max-width: var(--menu-panel-width-wide); + background-repeat: no-repeat; + background-position: 0 center; +} + +.widget-overflow-list .toolbarbutton-1 { + -moz-box-align: center; + -moz-box-orient: horizontal; +} + +toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after { + opacity: 0.5; +} + +.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text { + text-align: start; + padding-inline-start: .5em; +} + +#PanelUI-panicView > .panel-subview-body, +#PanelUI-panicView { + overflow: visible; +} + +#PanelUI-panicView.cui-widget-panelview { + min-width: 280px; +} + +#PanelUI-panic-timeframe { + padding: 15px; + border-bottom: 1px solid var(--panel-separator-color); +} + +#panic-button-success-icon, +#PanelUI-panic-timeframe-icon { + background-color: transparent; + margin-inline-end: 10px; +} + +#panic-button-success-icon, +#PanelUI-panic-timeframe-icon { + list-style-image: url(chrome://browser/skin/panic-panel/header.png); + max-height: 48px; + width: 48px; +} + +#panic-button-success-header { + -moz-box-align: center; + margin-bottom: 5px; +} + +#PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.subviewradio { + appearance: none; + -moz-box-align: center; + padding: 3px; + margin: 0 0 2px; + background-color: transparent; + border-radius: 4px; + border: 1px solid transparent; +} + +.subviewradio:hover { + background-color: var(--button-hover-bgcolor); +} + +.subviewradio:is([selected], [selected]:hover, :hover:active) { + background-color: var(--button-active-bgcolor); +} + +radiogroup:focus-visible > .subviewradio[focused="true"] { + outline: var(--focus-outline); +} + +radiogroup:focus-visible > .subviewradio[focused="true"] > .radio-label-box { + outline: none; +} + +.subviewradio > .radio-check { + appearance: none; + width: 16px; + height: 16px; + border: 1px solid rgba(110, 110, 110, 0.4); + border-radius: 50%; + margin: 1px 5px; + background-color: rgba(150,150,150,0.2); +} + +.subviewradio > .radio-check[selected] { + background-color: #fff; + border: 4px solid #177ee6; +} + +:root[lwt-popup-brighttext] .subviewradio > .radio-check[selected] { + background-color: transparent; + border: 4px solid #00ddff; +} + +#PanelUI-panic-explanations { + padding: 10px 10px 0; +} + +#PanelUI-panic-actionlist-main-label { + color: var(--panel-description-color); + font-size: 0.9em; +} + +.PanelUI-panic-actionlist { + padding-block: 2px; + padding-inline-start: 20px; + background-size: 16px 16px; + background-repeat: no-repeat; + background-color: transparent; + background-position: left center; +} + +.PanelUI-panic-actionlist:-moz-locale-dir(rtl) { + background-position-x: right; +} + +#PanelUI-panic-actionlist-cookies { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0); +} + +#PanelUI-panic-actionlist-history { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16); +} + +#PanelUI-panic-actionlist-windows { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32); +} + +#PanelUI-panic-actionlist-newwindow { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48); +} + +#PanelUI-panic-warning { + color: #d74345; + text-align: center; + width: 100%; + margin-top: 20px; +} + +#PanelUI-panic-view-button { + appearance: none; + background-color: var(--buttons-destructive-bgcolor); + color: var(--buttons-destructive-color); + margin: 5px 15px 11px; + border: 1px solid transparent; + border-radius: 4px; + font-weight: 600; + padding: 10px; +} + +#PanelUI-panic-view-button:hover { + background-color: var(--buttons-destructive-hover-bgcolor); +} + +#PanelUI-panic-view-button:hover:active { + background-color: var(--buttons-destructive-active-bgcolor); +} + +#PanelUI-panic-view-button:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +#PanelUI-panic-view-button > .toolbarbutton-text { + text-align: center; + text-shadow: none; +} + +#panic-button-success-closebutton { + background-color: var(--button-bgcolor); + color: var(--button-color); + margin: 5px 0 0; + border: 1px solid transparent; + border-radius: 4px; + padding: 10px; + font-weight: 600; + appearance: none; +} + +#panic-button-success-closebutton:hover { + background-color: var(--button-hover-bgcolor); +} + +#panic-button-success-closebutton:hover:active { + background-color: var(--button-active-bgcolor); +} + +@media (min-resolution: 1.1dppx) { + #panic-button-success-icon, + #PanelUI-panic-timeframe-icon { + list-style-image: url(chrome://browser/skin/panic-panel/header@2x.png); + } + + #PanelUI-panic-actionlist-cookies { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 32, 32, 0); + } + + #PanelUI-panic-actionlist-history { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 64, 32, 32); + } + + #PanelUI-panic-actionlist-windows { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 96, 32, 64); + } + + #PanelUI-panic-actionlist-newwindow { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 128, 32, 96); + } +} + +.panel-header { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + /* Set the header's padding according to menuitems horizontal padding + to make sure they are even from all sides and aligned according to that padding. */ + padding: var(--arrowpanel-menuitem-margin-inline); + /* Calculate the header's height assuming it includes an icon even if it doesn't, + to make sure all headers are the same height (assuming their text is a one liner). */ + min-height: var(--arrowpanel-header-height); +} + +.panel-header + toolbarseparator { + margin-top: 0 !important; +} + +.panel-header > h1 { + display: inline; + flex: auto; + font-size: inherit; + font-weight: 600; + margin: 0; +} + +.panel-header.panel-header-with-info-button > .panel-info-button { + margin-inline-end: var(--arrowpanel-header-info-icon-margin-inline-end); +} + +.panel-header.panel-header-with-info-button > h1 { + /* Add the size of the info button to center properly. */ + margin-inline-start: calc(var(--arrowpanel-header-info-icon-full-width) + var(--arrowpanel-header-info-icon-margin-inline-end)); +} + +.panel-header > .subviewbutton-back + h1 { + /* Add the size of the back button to center properly. */ + margin-inline-end: var(--arrowpanel-header-back-icon-full-width); +} + +.panel-header > h1 > span { + display: inline-block; + white-space: pre-wrap; +} + +.panel-header > .subviewbutton-back { + -moz-context-properties: fill; + fill: var(--arrowpanel-color); + list-style-image: url(chrome://global/skin/icons/arrow-left.svg); + padding: var(--arrowpanel-header-back-icon-padding); +} + +.panel-header > .subviewbutton-back:-moz-locale-dir(rtl) { + list-style-image: url(chrome://global/skin/icons/arrow-right.svg); +} + +.subviewbutton-back { + margin: 0; +} + +.subviewbutton-back > .toolbarbutton-text { + display: none; +} + +/* What's New panel */ +#customizationui-widget-multiview #PanelUI-whatsNew { + max-width: var(--menu-panel-width); +} + +#protections-popup #messaging-system-message-container { + height: 260px; + overflow: hidden; + transition: margin-bottom .25s; +} + +#protections-popup #messaging-system-message-container[disabled] { + /* Offset the height when hidden. This makes the panel content + * cover the info message and reveal it as it slides down, rather + * than the info message growing in height. */ + margin-bottom: -260px; + pointer-events: none; +} + +#protections-popup #messaging-system-message-container[disabled] #protections-popup-message { + opacity: 0; +} + +#protections-popup-message { + display: flex; + align-items: flex-end; + height: calc(100% - 20px); + margin: 10px; + transition: opacity .25s; + opacity: 1; + background-image: url(chrome://browser/skin/controlcenter/hero-message-background.svg); + background-repeat: no-repeat; + background-position: top right; + -moz-context-properties: fill; +} + +#protections-popup-message:-moz-locale-dir(rtl) { + background-position-x: left; +} + +#protections-popup-message .protections-popup-content { + display: block; + margin: 12px 0; +} + +panelview[mainview] #PanelUI-whatsNew-content { + height: 43em; +} + +/* Hide the What's New header when the panel is a subview */ +panelview:not([mainview]) #PanelUI-whatsNew-title { + display: none; +} + +#PanelUI-whatsNew .panelMenu-toggleWhatsNew-checkbox { + padding-inline-start: 16px; + min-height: 41px; +} + +#PanelUI-whatsNew .whatsNew-message { + cursor: pointer; + margin: 0; + padding: 0; +} + +/* The following 2 rules show a 1 pixel line separator between What's New + * messages while at the same time ensuring that the first message (which has + * a date header) will not show the separator + */ +#PanelUI-whatsNew .whatsNew-message-body::before { + content: ""; + display: block; + height: 1px; + width: 104%; + margin-inline-start: -2%; + background: var(--panel-separator-color); +} + +#PanelUI-whatsNew .has-icon::before { + /* the width of the icon + the grid margin */ + width: calc(104% + 40px); +} + +#PanelUI-whatsNew .whatsNew-message-date + .whatsNew-message-body::before { + display: none; +} + +#PanelUI-whatsNew .whatsNew-message-date { + font-size: .85em; + margin: -12px; + margin-top: 0; + margin-inline-start: 0; + padding: 6px 16px; + background: var(--arrowpanel-dimmed); +} + +#PanelUI-whatsNew .whatsNew-message-body { + padding: 5px 0 10px; + margin: 10px 16px; + text-align: inherit; + text-decoration: none; + color: inherit; + background: none; + border: none; + cursor: pointer; +} + +#protections-popup-message .whatsNew-message-body { + /* -10px to compensate for the margin on the container. We can't get rid of that + because it helps position the background image. */ + margin: 0 calc(-10px + var(--horizontal-padding)) var(--vertical-section-padding); + margin-inline: 6px; +} + +#PanelUI-whatsNew .whatsNew-message-body.has-icon { + display: grid; + grid-template-columns: auto 32px; + grid-template-rows: 0; + grid-gap: 0 8px; +} + +#PanelUI-whatsNew .whatsNew-message-icon { + height: 32px; + width: 32px; + margin: 14px auto; + display: grid; + grid-column-start: 2; +} + +#PanelUI-whatsNew .whatsNew-message-title, +#protections-popup-message .whatsNew-message-title { + display: grid; + font-size: 1.3em; + font-weight: 600; + line-height: 1.4em; + margin: 14px 0 0; + grid-column-start: 1; +} + +#PanelUI-whatsNew .whatsNew-message-title-large { + font-size: 2.1em; + margin: 2px 0; + font-weight: 300; + grid-column-start: 1; +} + +#PanelUI-whatsNew .whatsNew-message-subtitle { + margin: 2px 0; + font-size: .8em; + color: #949494; + font-weight: normal; + grid-column-start: 1; +} + +#PanelUI-whatsNew .whatsNew-message-content { + display: grid; + margin: 5px 0 10px; + grid-column-start: 1; +} + +#PanelUI-whatsNew .text-link { + background: none; + border: 0; + color: #45a1ff; + cursor: pointer; + font-size: .9em; + grid-column-start: 1; +} + +#protections-popup-message .text-link { + color: inherit; + font-weight: 600; +} + +#PanelUI-whatsNew .text-link:hover { + color: #0a84ff; + text-decoration: underline; +} + +#PanelUI-whatsNew .text-link:hover:active { + color: #0060df; +} + +/* In the next two rules the panel's width is set according to the + * profiler backdrop image when not opened from the overflow panel. */ +#customizationui-widget-panel #PanelUI-profiler { + min-width: 319px; + max-width: 319px; +} + +#customizationui-widget-panel[viewId="PanelUI-profiler"] { + --panel-width: 319px; + } + +:where(#PanelUI-profiler) :is(description, label) { + margin: 0; +} + +#widget-overflow #PanelUI-profiler-header { + display: none; +} + +#PanelUI-profiler-header[isinfocollapsed="false"] { + background: radial-gradient(circle farthest-side at top right, #03b1f4, #0556cd); + color: #fff; + /* Set custom hover/focus/active states on the info button, + to make them more visible on the header background */ + --panel-item-hover-bgcolor: #0005; + --panel-item-active-bgcolor: #0007; +} + +#PanelUI-profiler-header[isinfocollapsed="false"]:-moz-locale-dir(rtl) { + background: radial-gradient(circle farthest-side at top left, #03b1f4, #0556cd); +} + +#PanelUI-profiler-header[isinfocollapsed="false"] :is(button, toolbarbutton):focus-visible { + outline-color: currentColor; +} + +#PanelUI-profiler-header[isinfocollapsed="false"] toolbarseparator { + border-color: #0003; +} + +#PanelUI-profiler-header[isinfocollapsed="true"] #PanelUI-profiler-info { + opacity: 0; + pointer-events: none; +} + +#PanelUI-profiler-info { + min-height: 180px; + padding: 0 15px 15px; + background: top 10px right no-repeat + url("chrome://browser/skin/profiler-popup-backdrop.png"); + opacity: 1; +} + +/* The header has an attribute "animationready" that is either set to "true" or to + "false". When the DOM is being initialized it is set to "false" so that animations + do not run. */ +#PanelUI-profiler-header[animationready="true"] #PanelUI-profiler-info { + transition: margin-block-end 250ms, opacity 250ms; +} + +/* Override themes for the Pocket panel, because the Pocket + panel currently only supports dark and light themes. */ +@media not (prefers-color-scheme: dark){ + #customizationui-widget-panel[viewId="PanelUI-savetopocket"] { + --arrowpanel-background: #fbfbfb; + } +} + +#PanelUI-profiler-content { + position: relative; + padding: calc(15px - var(--panel-separator-margin-vertical)) 15px 15px; +} + +.PanelUI-profiler-description-title { + font-size: 1.3em; + font-weight: 600; + margin-block: 2px; +} + +.PanelUI-profiler-description { + margin-block: 4px; +} + +#PanelUI-profiler-learn-more { + margin-top: 4px; + color: #fff; + text-decoration: underline; +} + +#PanelUI-profiler-learn-more:hover:active { + color: #fffc; +} + +#PanelUI-profiler-presets { + margin: 8px 0; +} + +#PanelUI-profiler-content-edit-settings { + font-size: .9em; +} + +.PanelUI-profiler-content-label { + font-weight: 600; +} + +#PanelUI-profiler-content-description { + margin-block: 4px; + font-size: .9em; + color: var(--panel-description-color); +} + +#PanelUI-profiler-content-recording:not([hidden]) { + display: flex; + place-items: center; + place-content: center; + gap: 13px; + padding-block: 28px; + font-size: 1.3em; +} + +.PanelUI-profiler-recording-icon { + width: 42px; + list-style-image: url(chrome://devtools/skin/images/tool-profiler.svg); + -moz-context-properties: fill; + fill: currentColor; + opacity: 0.3; +} + +.PanelUI-profiler-button { + appearance: none; + background-color: var(--button-bgcolor); + border-radius: 4px; + color: var(--button-color); + padding: 8px; + margin: 0 5px; +} + +.PanelUI-profiler-button:hover { + background-color: var(--button-hover-bgcolor); +} + +.PanelUI-profiler-button:hover:active { + background-color: var(--button-active-bgcolor); +} + +.PanelUI-profiler-button:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +.PanelUI-profiler-button-primary { + background-color: var(--button-primary-bgcolor); + color: var(--button-primary-color); +} + +.PanelUI-profiler-button-primary:hover { + background-color: var(--button-primary-hover-bgcolor); +} + +.PanelUI-profiler-button-primary:hover:active { + background-color: var(--button-primary-active-bgcolor); +} + +.PanelUI-profiler-shortcut { + padding-block-start: 5px; + opacity: 0.5; + text-align: center; +} + +.PanelUI-profiler-buttons { + margin: 7px 10px 0; +} + +.PanelUI-profiler-info-icon { + margin-inline-end: 10px; + margin-block-start: 25px; + width: 50px; + list-style-image: url(chrome://devtools/skin/images/tool-profiler.svg); + -moz-context-properties: fill; + fill: #fff; +} + +#PanelUI-profiler-presets[disabled="true"]::part(label-box) { + opacity: 0.5; +} + +/* Web-extension pop-ups */ + +.cui-widget-panelview[id^=PanelUI-webext-] { + border-radius: var(--arrowpanel-border-radius); +} + +.webextension-popup-browser, +.webextension-popup-stack { + border-radius: inherit; +} + +.webextension-popup-stack { + position: relative; +} diff --git a/browser/themes/shared/customizableui/whimsy.png b/browser/themes/shared/customizableui/whimsy.png new file mode 100644 index 0000000000..ba53aa98ef Binary files /dev/null and b/browser/themes/shared/customizableui/whimsy.png differ diff --git a/browser/themes/shared/downloads/allDownloadsView.inc.css b/browser/themes/shared/downloads/allDownloadsView.inc.css new file mode 100644 index 0000000000..bbe678fde9 --- /dev/null +++ b/browser/themes/shared/downloads/allDownloadsView.inc.css @@ -0,0 +1,98 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import "chrome://browser/skin/downloads/progressmeter.css"; +@import "chrome://browser/skin/downloads/download-blockedStates.css"; + +/*** View and outer controls ***/ + +#downloadsListBox { + margin: 0; +} + +/*** List items ***/ + +#downloadsListBox > richlistitem { + min-height: 4.5em; +} + +.downloadTypeIcon { + margin: 8px 13px; + width: 32px; + height: 32px; +} + +.downloadTarget { + margin: 0; +} + +.downloadDetails { + opacity: 0.7; + font-size: 95%; + /* Use calc() to keep the height consistent with .downloadTarget, so that the + progress bar can be vertically centered. */ + margin: 4px 0 calc(1em / 0.95 - 1em); +} + +.downloadDetailsHover, +.downloadDetailsButtonHover { + display: none; +} + +.downloadButton { + appearance: none; + -moz-box-align: center; + background: transparent; + min-width: 0; + min-height: 0; + margin: 0; + border: none; + color: inherit; + padding: 0 12px; +} + +.downloadButton > .button-box { + padding: 8px; + border-radius: 4px; +} + +.downloadButton > .button-box > .button-icon { + width: 16px; + height: 16px; + margin: 0; + -moz-context-properties: fill; + fill: currentColor; +} + +.downloadButton > .button-box > .button-text { + display: none; +} + +.downloadButton:hover > .button-box { + background-color: color-mix(in srgb, currentColor 15%, transparent); +} + +.downloadButton:hover:active > .button-box { + background-color: color-mix(in srgb, currentColor 30%, transparent); +} + +/*** Button icons ***/ + +.downloadIconCancel > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/close.svg"); +} + +.downloadIconShow > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +@media (-moz-platform: macos) { + .downloadIconShow > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); + } +} + +.downloadIconRetry > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/reload.svg"); +} diff --git a/browser/themes/shared/downloads/contentAreaDownloadsView.css b/browser/themes/shared/downloads/contentAreaDownloadsView.css new file mode 100644 index 0000000000..c2e27b1d08 --- /dev/null +++ b/browser/themes/shared/downloads/contentAreaDownloadsView.css @@ -0,0 +1,27 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/in-content/common.css"); + +#contentAreaDownloadsView { + padding: 18px; +} + +#downloadsListBox:empty { + border-color: transparent; + background-color: transparent; +} + +.downloadButton:not([disabled="true"]):hover, +.downloadButton:not([disabled="true"]):hover:active, +.downloadButton:not([disabled]):hover:active { + background: transparent; + border: none; +} + +#downloadsListEmptyDescription { + margin: 1em; + text-align: center; + color: var(--in-content-deemphasized-text); +} diff --git a/browser/themes/shared/downloads/download-blockedStates.css b/browser/themes/shared/downloads/download-blockedStates.css new file mode 100644 index 0000000000..7a68a381c0 --- /dev/null +++ b/browser/themes/shared/downloads/download-blockedStates.css @@ -0,0 +1,62 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +.downloadBlockedBadge { + background-repeat: no-repeat; + width: 16px; + height: 16px; + margin: 0; + margin-inline: 16px; +} + +#downloadsPanel-blockedSubview[verdict="Insecure"] .downloadsPanel-blockedSubview-image, +#downloadsPanel-blockedSubview[verdict="Malware"] .downloadsPanel-blockedSubview-image, +#downloadsListBox > richlistitem[verdict="Insecure"] .downloadBlockedBadge, +#downloadsListBox > richlistitem[verdict="Malware"] .downloadBlockedBadge { + background-image: url("chrome://global/skin/icons/error.svg"); + -moz-context-properties: fill; + fill: #e22850; +} + +:root[lwt-popup-brighttext] #downloadsPanel-blockedSubview[verdict="Insecure"] .downloadsPanel-blockedSubview-image, +:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Insecure"] .downloadBlockedBadge, +:root[lwt-popup-brighttext] #downloadsPanel-blockedSubview[verdict="Malware"] .downloadsPanel-blockedSubview-image, +:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Malware"] .downloadBlockedBadge { + fill: #FF9AA2; +} + +#downloadsPanel-blockedSubview[verdict="Uncommon"] .downloadsPanel-blockedSubview-image, +#downloadsListBox > richlistitem[verdict="Uncommon"] .downloadBlockedBadge { + -moz-context-properties: fill; + fill: #0090ED; + background-image: url("chrome://global/skin/icons/info-filled.svg"); +} + +:root[lwt-popup-brighttext] #downloadsPanel-blockedSubview[verdict="Uncommon"] .downloadsPanel-blockedSubview-image, +:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Uncommon"] .downloadBlockedBadge { + fill: #80EBFF; +} + +.downloadsPanel-blockedSubview-image { + width: 16px; + background-repeat: no-repeat; + margin-inline-end: 25px; +} + +.downloadsPanel-blockedSubview-title-box { + margin-block: 21.5px 0; +} + +#downloadsPanel-blockedSubview-title { + -moz-box-flex: 1; +} + +#downloadsPanel-blockedSubview[verdict="PotentiallyUnwanted"] .downloadsPanel-blockedSubview-image, +#downloadsPanel-blockedSubview[verdict="DownloadSpam"] .downloadsPanel-blockedSubview-image, +#downloadsListBox > richlistitem[verdict="PotentiallyUnwanted"] .downloadBlockedBadge, +#downloadsListBox > richlistitem[verdict="DownloadSpam"] .downloadBlockedBadge { + -moz-context-properties: fill; + fill: #ffbf00; + background-image: url("chrome://global/skin/icons/warning.svg"); +} diff --git a/browser/themes/shared/downloads/download-summary.svg b/browser/themes/shared/downloads/download-summary.svg new file mode 100644 index 0000000000..c10ee95fcb --- /dev/null +++ b/browser/themes/shared/downloads/download-summary.svg @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/browser/themes/shared/downloads/downloads.inc.css b/browser/themes/shared/downloads/downloads.inc.css new file mode 100644 index 0000000000..64c3253bfb --- /dev/null +++ b/browser/themes/shared/downloads/downloads.inc.css @@ -0,0 +1,271 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import "chrome://browser/skin/downloads/progressmeter.css"; +@import "chrome://browser/skin/downloads/download-blockedStates.css"; + +/*** Panel and outer controls ***/ + +#downloadsListBox { + background: transparent; + color: inherit; + appearance: none; + border: 0; + margin: 0; + /* We have an explicit width set by l10n, but we still want to fill our + * container if it's wider. */ + min-width: 100%; +} + +@media not (prefers-contrast) { + #downloadsListBox[disabled] { + opacity: var(--downloads-item-disabled-opacity) !important; + } +} + +@media (prefers-contrast) { + #downloadsListBox[disabled] { + color: GrayText; + } +} + +#emptyDownloads { + padding: 1.5em 8px 2.1em; + margin: 0; + pointer-events: none; +} + +#downloadsListBox > richlistitem { + /* Leave space for the 32x32 icon with 16px vertical padding, and/or + * the text in the item, with the same padding, whichever is bigger: */ + min-height: max(48px, calc(16px + 2em)); + padding-inline-end: 4px; + margin: 0 0 8px; + border-radius: 4px; +} + +.downloadMainArea { + padding-block: 8px; + padding-inline-start: 4px; + border-radius: 4px; + min-width: 0; +} + +.downloadContainer { + min-width: 0; +} + +#downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover, +#downloadsListBox > richlistitem.openWhenFinished.hoveringMainArea:hover, +#downloadsListBox > richlistitem[verdict]:hover, +#downloadsListBox > richlistitem.openWhenFinished:hover, +.downloadsPanelFooterButton:hover { + background-color: var(--panel-item-hover-bgcolor); +} + +#downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover:active, +#downloadsListBox > richlistitem.openWhenFinished.hoveringMainArea:hover:active, +#downloadsListBox > richlistitem[verdict]:hover:active, +.downloadsPanelFooterButton[open="true"] { + background-color: var(--panel-item-active-bgcolor); +} + +#downloadsListBox:focus-visible > richlistitem[selected], +#downloadsListBox[force-focus-visible]:focus > richlistitem[selected], +.downloadButton:focus-visible, +#downloadsSummary:focus-visible, +.downloadsPanelFooterButton:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +#downloadsListBox > richlistitem[verdict="Insecure"] .downloadDetails, +#downloadsListBox > richlistitem[verdict="Malware"] .downloadDetails { + color: #C50042; + /* The details text usually gets an opacity reduction, but for the error + states we disable that, because it would reduce the contrast too much. */ + opacity: inherit; +} + +:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Insecure"] .downloadDetails, +:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Malware"] .downloadDetails { + color: #FF848B; +} + +.downloadTypeIcon { + margin-inline-end: 0.7em; +} + +#downloadsPanel-blockedSubview-buttons { + margin-top: 1.5em; +} + +#downloadsSummary { + background: var(--arrowpanel-dimmed); + border-top: 1px solid var(--panel-separator-color); + /* Reserve the same space as the button and separator in download items. */ + padding-inline-end: 59px; + -moz-user-focus: normal; +} + +#downloadsSummary > .downloadTypeIcon { + list-style-image: url("chrome://browser/skin/downloads/download-summary.svg"); +} + +#downloadsSummaryDescription { + color: -moz-nativehyperlinktext; +} + +:root[lwt-popup-brighttext] #downloadsSummaryDescription { + color: #75baff; /* --blue-30 */ +} + +/*** List items and similar elements in the summary ***/ +#downloadsSummary { + min-height: var(--downloads-item-height); +} + +#downloadsListBox > richlistitem { + background: transparent; + color: inherit; +} + +#downloadsListBox > richlistitem:last-child { + margin-bottom: 0; +} + +.downloadTypeIcon { + width: 32px; + height: 32px; +} + +#downloadsSummaryDescription, +.downloadTarget { + margin: 0; +} + +#downloadsSummaryDetails, +.downloadDetails { + font-size: calc(100% * var(--downloads-item-font-size-factor)); + opacity: var(--downloads-item-details-opacity); + /* Use calc() to keep the height consistent with .downloadTarget, so that the + progress bar can be vertically centered. */ + margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em); +} + +/* When hovering the mouse pointer over the item, instead of the normal message + we display a more detailed one. For blocked downloads the entire area shows + the hover message, for other downloads only the main area does. */ +#downloadsListBox > richlistitem[verdict]:hover > .downloadMainArea > .downloadContainer > .downloadDetailsNormal, +#downloadsListBox > richlistitem[verdict]:not(:hover) > .downloadMainArea > .downloadContainer > .downloadDetailsHover, +.downloadMainArea:hover > .downloadContainer > .downloadDetailsNormal, +#downloadsListBox > richlistitem:not([verdict]) > .downloadMainArea:not(:hover) > .downloadContainer > .downloadDetailsHover { + display: none; +} + +/* When hovering the action button in particular, instead of the usual hover + message we display the command associated with the button. */ +#downloadsListBox > richlistitem.downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsNormal, +#downloadsListBox > richlistitem.downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsHover, +#downloadsListBox > richlistitem:not(.downloadHoveringButton) > .downloadMainArea > .downloadContainer > .downloadDetailsButtonHover { + display: none; +} + +.downloadButton { + appearance: none; + min-width: 32px; + height: 32px; + margin: 0; + margin-inline-start: 4px; + border: 1px solid transparent; + padding: 0; + background: transparent; + color: inherit; + border-radius: 4px; + --button-hover-bgcolor: var(--panel-item-hover-bgcolor); + --button-hover-color: inherit; + --button-active-bgcolor: var(--panel-item-active-bgcolor); + --button-active-color: inherit; +} + +.downloadButton > .button-box > .button-icon { + width: 16px; + height: 16px; + margin: 1px; + -moz-context-properties: fill; + fill: currentColor; +} + +.downloadButton > .button-box > .button-text { + margin: 0 !important; + padding: 0; +} + +@media (prefers-contrast) { + .downloadButton { + background-color: ButtonFace; + color: ButtonText; + border-color: currentColor; + --button-hover-bgcolor: SelectedItem; + --button-hover-color: SelectedItemText; + --button-active-bgcolor: ButtonFace; + --button-active-color: ButtonText; + } +} + +.downloadButton:hover:not(:active) { + background-color: var(--button-hover-bgcolor); + color: var(--button-hover-color); + border-color: var(--button-hover-bgcolor); +} +.downloadButton:hover:active { + background-color: var(--button-active-bgcolor); + color: var(--button-active-color); +} + +/*** Button icons ***/ + +.downloadIconCancel > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/close.svg"); +} + +.downloadIconShow > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +@media (-moz-platform: macos) { + .downloadIconShow > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); + } +} + +.downloadIconRetry > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/reload.svg"); +} + +.downloadIconSubviewArrow > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/arrow-left.svg"); +} + +.downloadIconSubviewArrow > .button-box > .button-icon:-moz-locale-dir(ltr) { + list-style-image: url("chrome://global/skin/icons/arrow-right.svg"); +} + +/*** Blocked subview ***/ +#downloadsPanel-blockedSubview-title { + font-size: calc(100% * var(--downloads-item-font-size-factor)); + margin-bottom: 1.5em; +} + +#downloadsPanel-blockedSubview-details1, +#downloadsPanel-blockedSubview-details2 { + font-size: calc(100% * var(--downloads-item-font-size-factor)); + margin-bottom: 0.5em; + opacity: var(--downloads-item-details-opacity); +} + +/*** Toolbarseparator ***/ +#downloadsFooterButtons > toolbarseparator { + margin-inline: 0; +} diff --git a/browser/themes/shared/downloads/downloads.svg b/browser/themes/shared/downloads/downloads.svg new file mode 100644 index 0000000000..a62f31b7e7 --- /dev/null +++ b/browser/themes/shared/downloads/downloads.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/downloads/indicator.css b/browser/themes/shared/downloads/indicator.css new file mode 100644 index 0000000000..875023f841 --- /dev/null +++ b/browser/themes/shared/downloads/indicator.css @@ -0,0 +1,211 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/*** Status and progress indicator ***/ +#downloads-button { + --download-progress-pcent: 0%; +} + +#downloads-indicator-anchor { + min-width: 16px; + min-height: 16px; + -moz-context-properties: fill, fill-opacity; + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} + +#downloads-button[progress] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon, +#downloads-button[animate][notification] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon { + visibility: hidden; +} + +#wrapper-downloads-button > #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon { + visibility: visible; +} + +#downloads-button[attention="success"] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon { + fill: var(--toolbarbutton-icon-fill-attention); + fill-opacity: 1; +} + +#downloads-button > .toolbarbutton-badge-stack > .toolbarbutton-animatable-box { + pointer-events: none; + -moz-context-properties: fill, fill-opacity, stroke; + grid-area: initial; + top: calc(50% - 10px); /* Vertically center the 20px tall animatable image */ + left: calc(50% - 10px); /* Horizontally center the 20px wide animatable image */ + width: 20px; /* Width of each frame within the SVG sprite */ + height: 20px; /* Height of each frame within the SVG sprite */ + /* Animation is not directional and shouldn't be reversed in RTL */ + direction: ltr; + /* Revert to the xul.css user agent stylesheet's z-index value (auto) for + stack children, to ensure the badge (the last child of the stack) appears in + front of the animatable boxes */ + z-index: revert; +} + +/* Hide progress and state animations in customize mode */ +toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > .toolbarbutton-animatable-box, +toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer { + display: none; +} + +#downloads-indicator-start-box > .toolbarbutton-animatable-image, +#downloads-indicator-finish-box > .toolbarbutton-animatable-image { + visibility: hidden; +} + +/* Button progress indication */ +#downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer { + visibility: hidden; + top: calc(50% - 9px); /* Vertically center the 18px tall animatable image */ + left: calc(50% - 9px); /* Horizontally center the 18px wide animatable image */ + width: 18px; + height: 18px; + border-radius: 50%; + border: 1px solid currentColor; + display: flex; + align-items: center; + justify-content: center; +} + +#downloads-button[progress]:not([notification]) > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer { + visibility: visible; +} + +#downloads-indicator-progress-inner { + width: 14px; + height: 14px; + /* + From javascript side we update the --download-progress-pcent variable to show the current progress + */ + background: conic-gradient(var(--toolbarbutton-icon-fill-attention) var(--download-progress-pcent), transparent var(--download-progress-pcent)); + border-radius: 50%; +} + +/*** Status badges ***/ + +#downloads-button[attention="info"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: block; + box-shadow: none; + /* "!important" is necessary to override the rule in toolbarbutton.css */ + margin: -7px 0 0 !important; + margin-inline-end: -4px !important; + min-width: 12px; + min-height: 12px; + -moz-context-properties: fill; + background-size: 12px; +} + +#downloads-button[attention="info"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center; + fill: var(--panel-banner-item-info-icon-bgcolor); +} + +#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: url(chrome://global/skin/icons/warning-fill-12.svg) no-repeat center; + fill: var(--warning-icon-bgcolor); +} + +#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center; + fill: rgb(226,40,80); +} + +toolbar[brighttext] #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + fill: rgb(255,132,138); +} + +#downloads-button[animate] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + /* Don't display the badge until after the animation has cleared. */ + display: none; +} + +/*** Download notifications (transitions between downloading states) ***/ + +#downloads-indicator-start-image { + --anim-steps: 16; + + list-style-image: url("chrome://browser/skin/downloads/notification-start-animation.svg"); + width: calc(20px * (var(--anim-steps) + 1)); + height: 20px; + + fill: currentColor; + fill-opacity: 1; + stroke: currentColor; + + /* initial state for animation */ + transform: translateX(0); +} +#downloads-button[attention="success"] > .toolbarbutton-badge-stack > #downloads-indicator-start-box > #downloads-indicator-start-image { + /* Match the download icon color in the initial animation frames + to the current color of the indicator */ + stroke: var(--toolbarbutton-icon-fill-attention); +} +#downloads-button[washidden] > .toolbarbutton-badge-stack > #downloads-indicator-start-box > #downloads-indicator-start-image { + /* Hide the download icon in the first few animation frames, when the button was just un-hidden */ + stroke: transparent; +} + +#downloads-button[animate][notification="start"] > .toolbarbutton-badge-stack > #downloads-indicator-start-box > #downloads-indicator-start-image { + visibility: visible; + /* Upon changing the animation-duration below, please keep the + setTimeout() identical in indicator.js#_showNotification. + */ + animation-name: downloadsButtonNotification; + animation-duration: calc(var(--anim-steps) * 16.667ms); + animation-timing-function: steps(var(--anim-steps)); + + /* end state for animation: */ + transform: translateX(calc(var(--anim-steps) * -20px)); +} + +#downloads-indicator-finish-image { + --anim-frames: 26; + --anim-steps: calc(var(--anim-frames) + 100); /* Add 100 frames for doing the pause in the middle */ + + fill: var(--toolbarbutton-icon-fill-attention); + fill-opacity: 1; + stroke: var(--toolbarbutton-icon-fill-attention); + + list-style-image: url("chrome://browser/skin/downloads/notification-finish-animation.svg"); + width: calc(20px * (var(--anim-frames) + 1)); + height: 20px; + + /* initial state for animation */ + transform: translateX(0); +} +#downloads-button[open] > .toolbarbutton-badge-stack > #downloads-indicator-finish-box > #downloads-indicator-finish-image { + stroke: currentColor; +} + +#downloads-button[animate][notification="finish"] > .toolbarbutton-badge-stack > #downloads-indicator-finish-box > #downloads-indicator-finish-image { + visibility: visible; + animation-name: downloadsButtonFinishedNotification; + animation-duration: calc(var(--anim-steps) * 16.667ms); + + /* end state for animation: */ + transform: translateX(calc(var(--anim-frames) * -20px)); +} + +@keyframes downloadsButtonNotification { + from { + transform: translateX(0); + } +} + +@keyframes downloadsButtonFinishedNotification { + from { + animation-timing-function: steps(18); + transform: translateX(0); + } + 14.28% { /* 18th frame (18/126) */ + transform: translateX(calc(18 * -20px)); + } + 93.65% { /* Wait 100 frames of time, but resume from 18th frame (118/126) */ + animation-timing-function: steps(8); + transform: translateX(calc(18 * -20px)); + } +} diff --git a/browser/themes/shared/downloads/notification-finish-animation.svg b/browser/themes/shared/downloads/notification-finish-animation.svg new file mode 100644 index 0000000000..cef56f13f8 --- /dev/null +++ b/browser/themes/shared/downloads/notification-finish-animation.svg @@ -0,0 +1,193 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/downloads/notification-start-animation.svg b/browser/themes/shared/downloads/notification-start-animation.svg new file mode 100644 index 0000000000..14e3061657 --- /dev/null +++ b/browser/themes/shared/downloads/notification-start-animation.svg @@ -0,0 +1,144 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/downloads/progressmeter.css b/browser/themes/shared/downloads/progressmeter.css new file mode 100644 index 0000000000..892cea7135 --- /dev/null +++ b/browser/themes/shared/downloads/progressmeter.css @@ -0,0 +1,95 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/*** Common-styled progressmeter ***/ + +:root { + --download-progress-fill-color: AccentColor; + --download-progress-paused-color: GrayText; + --download-progress-flare-color: rgba(255,255,255,0.75); +} + +/* download progress bar is used in contexts which are not LightweightThemeConsumers and + do not get the lwt- theme variables. So we duplicate the fallbacks here. */ +:root:-moz-lwtheme { + --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,97,224)); +} + +@media (prefers-color-scheme: dark) { + :root:-moz-lwtheme { + --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,221,255)); + } + #contentAreaDownloadsView { + --download-progress-fill-color: var(--in-content-item-selected); + } +} + +:root[lwt-popup-brighttext] panel, +toolbar[brighttext]:-moz-lwtheme { + --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,221,255)); +} + +/* + * Styling "html:progress" is limited by the fact that a number of properties + * are intentionally locked at the UA stylesheet level. We have to use a border + * instead of an outline because the latter would be drawn over the progress + * bar and we cannot change its z-index. This means we have to use a negative + * margin, except when the value is zero, and adjust the width calculation for + * the indeterminate state. + */ + +.downloadProgress { + appearance: none; + display: -moz-box; + margin-block: 5px 1px; + /* This value is kinda odd, it's used to align with the edge of the badge, + * if shown, which is inside the edge of the image (the image gets 16px + * margin). */ + margin-inline-end: 18px; + border: none; + height: 4px; + border-radius: 2px; + background-color: color-mix(in srgb, currentColor 15%, transparent); +} + +/* Ensure we have contrast in selected download items */ +#downloadsListBox.allDownloadsListBox richlistitem[selected] .downloadProgress::-moz-progress-bar { + --download-progress-fill-color: currentColor; + --download-progress-flare-color: AccentColor; +} + +.downloadProgress::-moz-progress-bar { + appearance: none; + background-color: var(--download-progress-fill-color); + border-radius: 2px; +} + +.downloadProgress[paused]::-moz-progress-bar { + background-color: var(--download-progress-paused-color); +} + +.downloadProgress:indeterminate::-moz-progress-bar { + width: calc(100% + 2px); + /* Make a white reflecting animation. + Create a gradient with 2 identical patterns, and enlarge the size to 200%. + This allows us to animate background-position with percentage. */ + background-color: var(--download-progress-fill-color); + background-image: linear-gradient(90deg, transparent 0%, + var(--download-progress-flare-color) 25%, + transparent 50%, + var(--download-progress-flare-color) 75%, + transparent 100%); + background-blend-mode: normal; + background-size: 200% 100%; + animation: downloadProgressSlideX 1.5s linear infinite; +} + +@keyframes downloadProgressSlideX { + 0% { + background-position: 0 0; + } + 100% { + background-position: -100% 0; + } +} diff --git a/browser/themes/shared/drm-icon.svg b/browser/themes/shared/drm-icon.svg new file mode 100644 index 0000000000..8b510a1c53 --- /dev/null +++ b/browser/themes/shared/drm-icon.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/e10s-64@2x.png b/browser/themes/shared/e10s-64@2x.png new file mode 100644 index 0000000000..7bc8a60e18 Binary files /dev/null and b/browser/themes/shared/e10s-64@2x.png differ diff --git a/browser/themes/shared/fullscreen/warning.css b/browser/themes/shared/fullscreen/warning.css new file mode 100644 index 0000000000..fc1c203a78 --- /dev/null +++ b/browser/themes/shared/fullscreen/warning.css @@ -0,0 +1,50 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +html|*.pointerlockfswarning { + align-items: center; + background: rgba(45, 62, 72, 0.9); + border: 2px solid currentColor; + box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5); + border-radius: 8px; + color: #fafafa; + padding: 24px 16px; + font: message-box; +} + +html|*.pointerlockfswarning:is([data-identity="verifiedDomain"], [data-identity="unknownIdentity"])::before { + content: ""; + background-size: cover; + margin: 0; + width: 24px; + height: 24px; + -moz-context-properties: fill; + fill: currentColor; +} + +html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before { + background-image: url("chrome://global/skin/icons/security.svg"); +} + +html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before { + background-image: url("chrome://global/skin/icons/security-broken.svg"); +} + +html|*.pointerlockfswarning-domain-text, +html|*.pointerlockfswarning-generic-text { + font-size: 21px; + font-weight: lighter; + margin: 0 16px; +} + +html|*.pointerlockfswarning-domain { + font-weight: bold; + margin: 0; +} + +html|*#fullscreen-exit-button { + margin: 0; +} diff --git a/browser/themes/shared/fxa/add-device.svg b/browser/themes/shared/fxa/add-device.svg new file mode 100644 index 0000000000..361095bae7 --- /dev/null +++ b/browser/themes/shared/fxa/add-device.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/fxa/avatar-color.svg b/browser/themes/shared/fxa/avatar-color.svg new file mode 100644 index 0000000000..5a87586b35 --- /dev/null +++ b/browser/themes/shared/fxa/avatar-color.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/browser/themes/shared/fxa/avatar-empty.svg b/browser/themes/shared/fxa/avatar-empty.svg new file mode 100644 index 0000000000..9f7a8266f7 --- /dev/null +++ b/browser/themes/shared/fxa/avatar-empty.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/fxa/avatar.svg b/browser/themes/shared/fxa/avatar.svg new file mode 100644 index 0000000000..9391f57540 --- /dev/null +++ b/browser/themes/shared/fxa/avatar.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/fxa/fxa-spinner.svg b/browser/themes/shared/fxa/fxa-spinner.svg new file mode 100644 index 0000000000..1c3c739cf5 --- /dev/null +++ b/browser/themes/shared/fxa/fxa-spinner.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/fxa/monitor.svg b/browser/themes/shared/fxa/monitor.svg new file mode 100644 index 0000000000..04df0e0029 --- /dev/null +++ b/browser/themes/shared/fxa/monitor.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/fxa/send-to-device.svg b/browser/themes/shared/fxa/send-to-device.svg new file mode 100644 index 0000000000..0d6e6a4253 --- /dev/null +++ b/browser/themes/shared/fxa/send-to-device.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/fxa/send.svg b/browser/themes/shared/fxa/send.svg new file mode 100644 index 0000000000..e5c36eace8 --- /dev/null +++ b/browser/themes/shared/fxa/send.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/fxa/sync-devices.svg b/browser/themes/shared/fxa/sync-devices.svg new file mode 100644 index 0000000000..9d4f3fb97d --- /dev/null +++ b/browser/themes/shared/fxa/sync-devices.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/fxa/sync-illustration-issue.svg b/browser/themes/shared/fxa/sync-illustration-issue.svg new file mode 100644 index 0000000000..9fdfb1e65d --- /dev/null +++ b/browser/themes/shared/fxa/sync-illustration-issue.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/fxa/sync-illustration.svg b/browser/themes/shared/fxa/sync-illustration.svg new file mode 100644 index 0000000000..155d2a4009 --- /dev/null +++ b/browser/themes/shared/fxa/sync-illustration.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/icons/add-circle-fill.svg b/browser/themes/shared/icons/add-circle-fill.svg new file mode 100644 index 0000000000..4732d4f63c --- /dev/null +++ b/browser/themes/shared/icons/add-circle-fill.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/back.svg b/browser/themes/shared/icons/back.svg new file mode 100644 index 0000000000..b52c06b776 --- /dev/null +++ b/browser/themes/shared/icons/back.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/bookmark-12.svg b/browser/themes/shared/icons/bookmark-12.svg new file mode 100644 index 0000000000..96a8f82355 --- /dev/null +++ b/browser/themes/shared/icons/bookmark-12.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/bookmark-hollow.svg b/browser/themes/shared/icons/bookmark-hollow.svg new file mode 100644 index 0000000000..23c8a48dd3 --- /dev/null +++ b/browser/themes/shared/icons/bookmark-hollow.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/bookmark-star-on-tray.svg b/browser/themes/shared/icons/bookmark-star-on-tray.svg new file mode 100644 index 0000000000..49b83232ca --- /dev/null +++ b/browser/themes/shared/icons/bookmark-star-on-tray.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/bookmark.svg b/browser/themes/shared/icons/bookmark.svg new file mode 100644 index 0000000000..47ba62c026 --- /dev/null +++ b/browser/themes/shared/icons/bookmark.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/bookmarks-toolbar.svg b/browser/themes/shared/icons/bookmarks-toolbar.svg new file mode 100644 index 0000000000..2840b5dffc --- /dev/null +++ b/browser/themes/shared/icons/bookmarks-toolbar.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/canvas-blocked.svg b/browser/themes/shared/icons/canvas-blocked.svg new file mode 100644 index 0000000000..636b6f8fa8 --- /dev/null +++ b/browser/themes/shared/icons/canvas-blocked.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/icons/canvas.svg b/browser/themes/shared/icons/canvas.svg new file mode 100644 index 0000000000..4a3e99094f --- /dev/null +++ b/browser/themes/shared/icons/canvas.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/icons/characterEncoding.svg b/browser/themes/shared/icons/characterEncoding.svg new file mode 100644 index 0000000000..6cd4f56dd1 --- /dev/null +++ b/browser/themes/shared/icons/characterEncoding.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/chevron-animation.svg b/browser/themes/shared/icons/chevron-animation.svg new file mode 100644 index 0000000000..0cf17dcc46 --- /dev/null +++ b/browser/themes/shared/icons/chevron-animation.svg @@ -0,0 +1,391 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/icons/customize.svg b/browser/themes/shared/icons/customize.svg new file mode 100644 index 0000000000..f0da3a385b --- /dev/null +++ b/browser/themes/shared/icons/customize.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/device-desktop.svg b/browser/themes/shared/icons/device-desktop.svg new file mode 100644 index 0000000000..51c7bf0a74 --- /dev/null +++ b/browser/themes/shared/icons/device-desktop.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/device-phone.svg b/browser/themes/shared/icons/device-phone.svg new file mode 100644 index 0000000000..81094ef961 --- /dev/null +++ b/browser/themes/shared/icons/device-phone.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/device-tablet.svg b/browser/themes/shared/icons/device-tablet.svg new file mode 100644 index 0000000000..58e61faa11 --- /dev/null +++ b/browser/themes/shared/icons/device-tablet.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/device-tv.svg b/browser/themes/shared/icons/device-tv.svg new file mode 100644 index 0000000000..ed65b4a229 --- /dev/null +++ b/browser/themes/shared/icons/device-tv.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/device-vr.svg b/browser/themes/shared/icons/device-vr.svg new file mode 100644 index 0000000000..1a60279c88 --- /dev/null +++ b/browser/themes/shared/icons/device-vr.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/edit-cut.svg b/browser/themes/shared/icons/edit-cut.svg new file mode 100644 index 0000000000..e0e685c4c1 --- /dev/null +++ b/browser/themes/shared/icons/edit-cut.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/edit-paste.svg b/browser/themes/shared/icons/edit-paste.svg new file mode 100644 index 0000000000..64b77646c8 --- /dev/null +++ b/browser/themes/shared/icons/edit-paste.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/fingerprint.svg b/browser/themes/shared/icons/fingerprint.svg new file mode 100644 index 0000000000..320d516b07 --- /dev/null +++ b/browser/themes/shared/icons/fingerprint.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/icons/forget.svg b/browser/themes/shared/icons/forget.svg new file mode 100644 index 0000000000..8dc744849d --- /dev/null +++ b/browser/themes/shared/icons/forget.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/forward.svg b/browser/themes/shared/icons/forward.svg new file mode 100644 index 0000000000..2eac6f3ed7 --- /dev/null +++ b/browser/themes/shared/icons/forward.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/fullscreen-exit.svg b/browser/themes/shared/icons/fullscreen-exit.svg new file mode 100644 index 0000000000..227ba4229e --- /dev/null +++ b/browser/themes/shared/icons/fullscreen-exit.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/fullscreen.svg b/browser/themes/shared/icons/fullscreen.svg new file mode 100644 index 0000000000..b525df0668 --- /dev/null +++ b/browser/themes/shared/icons/fullscreen.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/history.svg b/browser/themes/shared/icons/history.svg new file mode 100644 index 0000000000..3772c8f76d --- /dev/null +++ b/browser/themes/shared/icons/history.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/home.svg b/browser/themes/shared/icons/home.svg new file mode 100644 index 0000000000..a9c2ced8e8 --- /dev/null +++ b/browser/themes/shared/icons/home.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/import-export.svg b/browser/themes/shared/icons/import-export.svg new file mode 100644 index 0000000000..b92beabc8d --- /dev/null +++ b/browser/themes/shared/icons/import-export.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/import.svg b/browser/themes/shared/icons/import.svg new file mode 100644 index 0000000000..cc6232af51 --- /dev/null +++ b/browser/themes/shared/icons/import.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/ion.svg b/browser/themes/shared/icons/ion.svg new file mode 100644 index 0000000000..870914287b --- /dev/null +++ b/browser/themes/shared/icons/ion.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/icons/library.svg b/browser/themes/shared/icons/library.svg new file mode 100644 index 0000000000..26bf1ef985 --- /dev/null +++ b/browser/themes/shared/icons/library.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/icons/login.svg b/browser/themes/shared/icons/login.svg new file mode 100644 index 0000000000..51a8f285fc --- /dev/null +++ b/browser/themes/shared/icons/login.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/logo-android.svg b/browser/themes/shared/icons/logo-android.svg new file mode 100644 index 0000000000..b8b0ab040b --- /dev/null +++ b/browser/themes/shared/icons/logo-android.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/logo-ios.svg b/browser/themes/shared/icons/logo-ios.svg new file mode 100644 index 0000000000..dcd70b5588 --- /dev/null +++ b/browser/themes/shared/icons/logo-ios.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/mail.svg b/browser/themes/shared/icons/mail.svg new file mode 100644 index 0000000000..62fd0e0875 --- /dev/null +++ b/browser/themes/shared/icons/mail.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/menu-badged.svg b/browser/themes/shared/icons/menu-badged.svg new file mode 100644 index 0000000000..bbfce72776 --- /dev/null +++ b/browser/themes/shared/icons/menu-badged.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/icons/menu.svg b/browser/themes/shared/icons/menu.svg new file mode 100644 index 0000000000..39628990ce --- /dev/null +++ b/browser/themes/shared/icons/menu.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/icons/new-tab.svg b/browser/themes/shared/icons/new-tab.svg new file mode 100644 index 0000000000..2d475aada0 --- /dev/null +++ b/browser/themes/shared/icons/new-tab.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/notification-fill-12.svg b/browser/themes/shared/icons/notification-fill-12.svg new file mode 100644 index 0000000000..6af8d91526 --- /dev/null +++ b/browser/themes/shared/icons/notification-fill-12.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/open.svg b/browser/themes/shared/icons/open.svg new file mode 100644 index 0000000000..b7682227bf --- /dev/null +++ b/browser/themes/shared/icons/open.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/pin-12.svg b/browser/themes/shared/icons/pin-12.svg new file mode 100644 index 0000000000..2c354bdfa4 --- /dev/null +++ b/browser/themes/shared/icons/pin-12.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/privateBrowsing.svg b/browser/themes/shared/icons/privateBrowsing.svg new file mode 100644 index 0000000000..c896922d7e --- /dev/null +++ b/browser/themes/shared/icons/privateBrowsing.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/quickactions.svg b/browser/themes/shared/icons/quickactions.svg new file mode 100644 index 0000000000..9631efd296 --- /dev/null +++ b/browser/themes/shared/icons/quickactions.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/browser/themes/shared/icons/reader-mode.svg b/browser/themes/shared/icons/reader-mode.svg new file mode 100644 index 0000000000..5454f63ad9 --- /dev/null +++ b/browser/themes/shared/icons/reader-mode.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/icons/reload-to-stop.svg b/browser/themes/shared/icons/reload-to-stop.svg new file mode 100644 index 0000000000..fe7635f1d9 --- /dev/null +++ b/browser/themes/shared/icons/reload-to-stop.svg @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/icons/save.svg b/browser/themes/shared/icons/save.svg new file mode 100644 index 0000000000..0207fb6045 --- /dev/null +++ b/browser/themes/shared/icons/save.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/screenshot.svg b/browser/themes/shared/icons/screenshot.svg new file mode 100644 index 0000000000..92b1473b61 --- /dev/null +++ b/browser/themes/shared/icons/screenshot.svg @@ -0,0 +1,4 @@ + + diff --git a/browser/themes/shared/icons/sidebars-right.svg b/browser/themes/shared/icons/sidebars-right.svg new file mode 100644 index 0000000000..5bf51e168b --- /dev/null +++ b/browser/themes/shared/icons/sidebars-right.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/icons/sidebars.svg b/browser/themes/shared/icons/sidebars.svg new file mode 100644 index 0000000000..e116c9e2d0 --- /dev/null +++ b/browser/themes/shared/icons/sidebars.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/icons/sort.svg b/browser/themes/shared/icons/sort.svg new file mode 100644 index 0000000000..15d68af6d5 --- /dev/null +++ b/browser/themes/shared/icons/sort.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/browser/themes/shared/icons/stop-to-reload.svg b/browser/themes/shared/icons/stop-to-reload.svg new file mode 100644 index 0000000000..fd9b30d86c --- /dev/null +++ b/browser/themes/shared/icons/stop-to-reload.svg @@ -0,0 +1,173 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/icons/subtract-circle-fill.svg b/browser/themes/shared/icons/subtract-circle-fill.svg new file mode 100644 index 0000000000..63a30033f8 --- /dev/null +++ b/browser/themes/shared/icons/subtract-circle-fill.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/success-animation.svg b/browser/themes/shared/icons/success-animation.svg new file mode 100644 index 0000000000..1faa6eb7e6 --- /dev/null +++ b/browser/themes/shared/icons/success-animation.svg @@ -0,0 +1,107 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/icons/sync.svg b/browser/themes/shared/icons/sync.svg new file mode 100644 index 0000000000..888e593abf --- /dev/null +++ b/browser/themes/shared/icons/sync.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/synced-tabs.svg b/browser/themes/shared/icons/synced-tabs.svg new file mode 100644 index 0000000000..deea09780b --- /dev/null +++ b/browser/themes/shared/icons/synced-tabs.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/shared/icons/tab.svg b/browser/themes/shared/icons/tab.svg new file mode 100644 index 0000000000..7585b1987f --- /dev/null +++ b/browser/themes/shared/icons/tab.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/thumb-down.svg b/browser/themes/shared/icons/thumb-down.svg new file mode 100644 index 0000000000..f110985fc0 --- /dev/null +++ b/browser/themes/shared/icons/thumb-down.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/topsites.svg b/browser/themes/shared/icons/topsites.svg new file mode 100644 index 0000000000..6381606fb2 --- /dev/null +++ b/browser/themes/shared/icons/topsites.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/icons/trending.svg b/browser/themes/shared/icons/trending.svg new file mode 100644 index 0000000000..3268e65cf6 --- /dev/null +++ b/browser/themes/shared/icons/trending.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/window.svg b/browser/themes/shared/icons/window.svg new file mode 100644 index 0000000000..1c3e1b24d4 --- /dev/null +++ b/browser/themes/shared/icons/window.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/zoom-out.svg b/browser/themes/shared/icons/zoom-out.svg new file mode 100644 index 0000000000..282a728f3f --- /dev/null +++ b/browser/themes/shared/icons/zoom-out.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/identity-block/identity-block.css b/browser/themes/shared/identity-block/identity-block.css new file mode 100644 index 0000000000..c30d70b8f9 --- /dev/null +++ b/browser/themes/shared/identity-block/identity-block.css @@ -0,0 +1,277 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +#identity-box { + margin-inline-end: var(--identity-box-margin-inline); +} + +#identity-box, +#tracking-protection-icon-container { + /* Set default fill for icons in the identity block. + Individual icons can override this. */ + fill: currentColor; + fill-opacity: var(--urlbar-icon-fill-opacity); +} + +#urlbar.searchButton > #urlbar-input-container > #identity-box[pageproxystate="invalid"], +#identity-box[pageproxystate="invalid"] > #identity-permission-box, +#identity-box[pageproxystate="invalid"] > #notification-popup-box, +#identity-box[pageproxystate="invalid"] #identity-icon-label { + display: none; +} + +#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"] { + pointer-events: none; + -moz-user-focus: ignore; +} + +.identity-box-button:hover:not([open=true]), +#tracking-protection-icon-container:hover:not([open=true]) { + background-color: var(--urlbar-box-hover-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +.identity-box-button:hover:active, +.identity-box-button[open=true], +#tracking-protection-icon-container:hover:active, +#tracking-protection-icon-container[open=true] { + background-color: var(--urlbar-box-active-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +.identity-box-button:focus-visible, +#tracking-protection-icon-container:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +.identity-box-button { + padding-inline: var(--urlbar-icon-padding); + border-radius: var(--urlbar-icon-border-radius); +} + +#identity-icon-label { + padding-inline-start: 4px; +} + +#identity-box[pageproxystate="valid"].notSecureText, +#identity-box[pageproxystate="valid"].chromeUI, +#identity-box[pageproxystate="valid"].extensionPage, +#urlbar-label-box { + margin-inline-end: 8px; +} + +#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button, +#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button, +#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button, +#urlbar-label-box { + background-color: var(--urlbar-box-bgcolor); + color: var(--urlbar-box-text-color); + padding-inline: 8px; + border-radius: var(--urlbar-icon-border-radius); +} + +#urlbar[focused="true"] #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:not(:hover, [open=true]), +#urlbar[focused="true"] #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:not(:hover, [open=true]), +#urlbar[focused="true"] #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:not(:hover, [open=true]), +#urlbar[focused="true"] #urlbar-label-box { + background-color: var(--urlbar-box-focus-bgcolor); +} + +#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:hover:not([open]), +#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:hover:not([open]), +#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:hover:not([open]) { + background-color: var(--urlbar-box-hover-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:hover:active, +#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button[open=true], +#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:hover:active, +#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button[open=true], +#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:hover:active, +#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button[open=true] { + background-color: var(--urlbar-box-active-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +#urlbar[searchmode]:not([focused="true"]) > #urlbar-input-container > #urlbar-search-mode-indicator, +#urlbar[searchmode]:not([focused="true"]) > #urlbar-input-container > #urlbar-label-box { + pointer-events: none; +} + +#urlbar[searchmode]:not([focused="true"]) > #urlbar-input-container > #urlbar-search-mode-indicator > #urlbar-search-mode-indicator-close { + pointer-events: initial; +} + +.urlbar-label { + margin: 0; +} + +.sharing-icon, +#identity-icon, +#permissions-granted-icon, +#tracking-protection-icon, +.notification-anchor-icon, +#blocked-permissions-container > .blocked-permission-icon { + -moz-context-properties: fill, fill-opacity; +} + +.sharing-icon, +#identity-icon, +#permissions-granted-icon, +#tracking-protection-icon, +#blocked-permissions-container > .blocked-permission-icon { + width: 16px; + height: 16px; +} + +.sharing-icon, +#identity-icon, +#tracking-protection-icon, +#blocked-permissions-container > .blocked-permission-icon { + margin-inline-start: 4px; +} + +#tracking-protection-icon { + margin-inline-start: 0; +} + +/* MAIN IDENTITY ICON */ +#identity-icon { + margin-inline-start: 0; + list-style-image: url(chrome://global/skin/icons/info.svg); +} + +#identity-box[pageproxystate="valid"].chromeUI #identity-icon { + list-style-image: url(chrome://branding/content/icon16.png); +} +@media (min-resolution: 1.1dppx) { + #identity-box[pageproxystate="valid"].chromeUI #identity-icon { + list-style-image: url(chrome://branding/content/icon32.png); + } +} + +#identity-box[pageproxystate="valid"].localResource #identity-icon { + list-style-image: url(chrome://global/skin/icons/page-portrait.svg); +} + +#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"] #identity-icon { + list-style-image: url(chrome://global/skin/icons/search-glass.svg); +} + +#urlbar[actiontype="extension"] > #urlbar-input-container > #identity-box #identity-icon { + list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); +} + +#identity-box[pageproxystate="valid"].extensionPage #identity-icon { + list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); +} + +#identity-box[pageproxystate="valid"].verifiedDomain #identity-icon, +#identity-box[pageproxystate="valid"].mixedActiveBlocked #identity-icon { + list-style-image: url(chrome://global/skin/icons/security.svg); +} + +#identity-box[pageproxystate="valid"].weakCipher #identity-icon, +#identity-box[pageproxystate="valid"].mixedDisplayContent #identity-icon, +#identity-box[pageproxystate="valid"].mixedDisplayContentLoadedActiveBlocked #identity-icon, +#identity-box[pageproxystate="valid"].certUserOverridden #identity-icon, +#identity-box[pageproxystate="valid"].certErrorPage #identity-icon { + list-style-image: url(chrome://global/skin/icons/security-warning.svg); + fill: unset; +} + + +#identity-box[pageproxystate="valid"].notSecure #identity-icon, +#identity-box[pageproxystate="valid"].mixedActiveContent #identity-icon, +#identity-box[pageproxystate="valid"].httpsOnlyErrorPage #identity-icon { + list-style-image: url(chrome://global/skin/icons/security-broken.svg); +} + +#permissions-granted-icon { + list-style-image: url(chrome://browser/skin/permissions.svg); +} + +#identity-permission-box { + display: none; +} + +#identity-permission-box[open=true], +#identity-permission-box[hasPermissions], +#identity-permission-box[hasSharingIcon] { + display: -moz-box; +} + +/* SHARING ICON */ + +#webrtc-sharing-icon[sharing="camera"] { + list-style-image: url("chrome://browser/skin/notification-icons/camera.svg"); +} + +#webrtc-sharing-icon[sharing="microphone"] { + list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg"); +} + +#webrtc-sharing-icon[sharing="screen"] { + list-style-image: url("chrome://browser/skin/notification-icons/screen.svg"); +} + +#geo-sharing-icon[sharing] { + list-style-image: url("chrome://browser/skin/notification-icons/geo.svg"); +} + +.sharing-icon:not([sharing]) { + display: none; +} + +#webrtc-sharing-icon[sharing]:not([paused]) { + -moz-context-properties: fill; + fill: rgb(224, 41, 29); +} + +/* TRACKING PROTECTION ICON */ + +#tracking-protection-icon-container { + padding-inline: var(--urlbar-icon-padding); + border-radius: var(--urlbar-icon-border-radius); + /* This is needed in order to position the blue dot indicator. */ + position: relative; +} + +#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container.chromeUI { + display: none; +} + +#tracking-protection-icon-box { + overflow: hidden; + width: 16px; + height: 16px; +} + +#tracking-protection-icon-tooltip { + max-width: 500px; +} + +#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box > #tracking-protection-icon { + list-style-image: url(chrome://browser/skin/tracking-protection.svg); +} + +#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box[hasException] > #tracking-protection-icon { + list-style-image: url(chrome://browser/skin/tracking-protection-disabled.svg); +} + +#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon { + list-style-image: url(chrome://browser/skin/tracking-protection-active.svg); +} + +:root[lwt-toolbar-field-brighttext] #urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon { + list-style-image: url(chrome://browser/skin/tracking-protection-active-brighttext.svg); +} + +#urlbar-input-container[pageproxystate="invalid"] > #tracking-protection-icon-container { + visibility: collapse; +} diff --git a/browser/themes/shared/identity-block/permissions.svg b/browser/themes/shared/identity-block/permissions.svg new file mode 100644 index 0000000000..0237c34e44 --- /dev/null +++ b/browser/themes/shared/identity-block/permissions.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/identity-block/tracking-protection-active-brighttext.svg b/browser/themes/shared/identity-block/tracking-protection-active-brighttext.svg new file mode 100644 index 0000000000..c7de8d017c --- /dev/null +++ b/browser/themes/shared/identity-block/tracking-protection-active-brighttext.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/shared/identity-block/tracking-protection-active.svg b/browser/themes/shared/identity-block/tracking-protection-active.svg new file mode 100644 index 0000000000..591c0b0990 --- /dev/null +++ b/browser/themes/shared/identity-block/tracking-protection-active.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/shared/identity-block/tracking-protection-disabled.svg b/browser/themes/shared/identity-block/tracking-protection-disabled.svg new file mode 100644 index 0000000000..f34f1cd8de --- /dev/null +++ b/browser/themes/shared/identity-block/tracking-protection-disabled.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/identity-block/tracking-protection.svg b/browser/themes/shared/identity-block/tracking-protection.svg new file mode 100644 index 0000000000..09cdb83ecf --- /dev/null +++ b/browser/themes/shared/identity-block/tracking-protection.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/identity-credential-notification.css b/browser/themes/shared/identity-credential-notification.css new file mode 100644 index 0000000000..61ebdd2db4 --- /dev/null +++ b/browser/themes/shared/identity-credential-notification.css @@ -0,0 +1,13 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +#identity-credential-notification .subviewbutton { + width: 100%; + margin-inline: 0; +} + +#credential-provider-explanation, +#credential-account-explanation { + margin-top: 1em; +} diff --git a/browser/themes/shared/incontent-icons/tab-crashed.svg b/browser/themes/shared/incontent-icons/tab-crashed.svg new file mode 100644 index 0000000000..db19117370 --- /dev/null +++ b/browser/themes/shared/incontent-icons/tab-crashed.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + diff --git a/browser/themes/shared/jar.inc.mn b/browser/themes/shared/jar.inc.mn new file mode 100644 index 0000000000..e874e39777 --- /dev/null +++ b/browser/themes/shared/jar.inc.mn @@ -0,0 +1,279 @@ +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +# This is not a complete / proper jar manifest. It is included by the +# actual theme-specific manifests, so that shared resources need only +# be specified once. As a result, the source file paths are relative +# to the location of the actual manifest. + + skin/classic/browser/aboutFrameCrashed.css (../shared/aboutFrameCrashed.css) + skin/classic/browser/aboutRestartRequired.css (../shared/aboutRestartRequired.css) + skin/classic/browser/aboutSessionRestore.css (../shared/aboutSessionRestore.css) + skin/classic/browser/aboutTabCrashed.css (../shared/aboutTabCrashed.css) + skin/classic/browser/aboutWelcomeBack.css (../shared/aboutWelcomeBack.css) + skin/classic/browser/tab-list-tree.css (../shared/tab-list-tree.css) + skin/classic/browser/addon-notification.css (../shared/addon-notification.css) + skin/classic/browser/autocomplete.css (../shared/autocomplete.css) + skin/classic/browser/blockedSite.css (../shared/blockedSite.css) + skin/classic/browser/browser-shared.css (../shared/browser-shared.css) + skin/classic/browser/ctrlTab.css (../shared/ctrlTab.css) + skin/classic/browser/identity-credential-notification.css (../shared/identity-credential-notification.css) + skin/classic/browser/light-dark-overrides.css (../shared/light-dark-overrides.css) + skin/classic/browser/menupanel.css (../shared/menupanel.css) + skin/classic/browser/notification-icons.css (../shared/notification-icons.css) + skin/classic/browser/searchbar.css (../shared/searchbar.css) + skin/classic/browser/setDesktopBackground.css (../shared/setDesktopBackground.css) + skin/classic/browser/sidebar.css (../shared/sidebar.css) + skin/classic/browser/tabs.css (../shared/tabs.css) + skin/classic/browser/toolbarbuttons.css (../shared/toolbarbuttons.css) + skin/classic/browser/toolbarbutton-icons.css (../shared/toolbarbutton-icons.css) + skin/classic/browser/urlbar-dynamic-results.css (../shared/urlbar-dynamic-results.css) + skin/classic/browser/urlbar-searchbar.css (../shared/urlbar-searchbar.css) + skin/classic/browser/urlbarView.css (../shared/urlbarView.css) + skin/classic/browser/UITour.css (../shared/UITour.css) + skin/classic/browser/webRTC-indicator.css (../shared/webRTC-indicator.css) + skin/classic/browser/addons/addon-install-blocked.svg (../shared/addons/addon-install-blocked.svg) + skin/classic/browser/addons/addon-install-downloading.svg (../shared/addons/addon-install-downloading.svg) + skin/classic/browser/addons/addon-install-installed.svg (../shared/addons/addon-install-installed.svg) + skin/classic/browser/addons/extension-controlled.css (../shared/addons/extension-controlled.css) + skin/classic/browser/addons/unified-extensions.css (../shared/addons/unified-extensions.css) + skin/classic/browser/controlcenter/3rdpartycookies.svg (../shared/controlcenter/3rdpartycookies.svg) + skin/classic/browser/controlcenter/cryptominers.svg (../shared/controlcenter/cryptominers.svg) + skin/classic/browser/controlcenter/dashboard.svg (../shared/controlcenter/dashboard.svg) + skin/classic/browser/controlcenter/mcb-disabled.svg (../shared/controlcenter/mcb-disabled.svg) + skin/classic/browser/controlcenter/etp-milestone.svg (../shared/controlcenter/etp-milestone.svg) + skin/classic/browser/controlcenter/panel.css (../shared/controlcenter/panel.css) + skin/classic/browser/controlcenter/tracking-protection.svg (../shared/controlcenter/tracking-protection.svg) + skin/classic/browser/controlcenter/hero-message-background.svg (../shared/controlcenter/hero-message-background.svg) + skin/classic/browser/customizableui/customizeMode.css (../shared/customizableui/customizeMode.css) + skin/classic/browser/customizableui/panelUI-shared.css (../shared/customizableui/panelUI-shared.css) + + skin/classic/browser/customizableui/empty-overflow-panel.png (../shared/customizableui/empty-overflow-panel.png) + skin/classic/browser/customizableui/empty-overflow-panel@2x.png (../shared/customizableui/empty-overflow-panel@2x.png) + skin/classic/browser/customizableui/density-compact.svg (../shared/customizableui/density-compact.svg) + skin/classic/browser/customizableui/density-normal.svg (../shared/customizableui/density-normal.svg) + skin/classic/browser/customizableui/density-touch.svg (../shared/customizableui/density-touch.svg) + skin/classic/browser/customizableui/whimsy.png (../shared/customizableui/whimsy.png) + skin/classic/browser/downloads/allDownloadsView.inc.css (../shared/downloads/allDownloadsView.inc.css) + skin/classic/browser/downloads/contentAreaDownloadsView.css (../shared/downloads/contentAreaDownloadsView.css) + skin/classic/browser/downloads/download-blockedStates.css (../shared/downloads/download-blockedStates.css) + skin/classic/browser/downloads/download-summary.svg (../shared/downloads/download-summary.svg) + skin/classic/browser/downloads/downloads.inc.css (../shared/downloads/downloads.inc.css) + skin/classic/browser/downloads/downloads.svg (../shared/downloads/downloads.svg) + skin/classic/browser/downloads/indicator.css (../shared/downloads/indicator.css) + skin/classic/browser/downloads/notification-finish-animation.svg (../shared/downloads/notification-finish-animation.svg) + skin/classic/browser/downloads/notification-start-animation.svg (../shared/downloads/notification-start-animation.svg) + skin/classic/browser/downloads/progressmeter.css (../shared/downloads/progressmeter.css) + skin/classic/browser/drm-icon.svg (../shared/drm-icon.svg) + skin/classic/browser/identity-block/identity-block.css (../shared/identity-block/identity-block.css) + skin/classic/browser/permissions.svg (../shared/identity-block/permissions.svg) + skin/classic/browser/migration/migration-dialog.css (../shared/migration/migration-dialog.css) + skin/classic/browser/migration/migration-wizard.css (../shared/migration/migration-wizard.css) + skin/classic/browser/notification-icons/autoplay-media.svg (../shared/notification-icons/autoplay-media.svg) + skin/classic/browser/notification-icons/autoplay-media-blocked.svg (../shared/notification-icons/autoplay-media-blocked.svg) + skin/classic/browser/notification-icons/camera-blocked.svg (../shared/notification-icons/camera-blocked.svg) + skin/classic/browser/notification-icons/camera.svg (../shared/notification-icons/camera.svg) + skin/classic/browser/notification-icons/desktop-notification-blocked.svg (../shared/notification-icons/desktop-notification-blocked.svg) + skin/classic/browser/notification-icons/desktop-notification.svg (../shared/notification-icons/desktop-notification.svg) + skin/classic/browser/notification-icons/drag-indicator.svg (../shared/notification-icons/drag-indicator.svg) + skin/classic/browser/notification-icons/geo.svg (../shared/notification-icons/geo.svg) + skin/classic/browser/notification-icons/geo-blocked.svg (../shared/notification-icons/geo-blocked.svg) + skin/classic/browser/notification-icons/microphone-blocked.svg (../shared/notification-icons/microphone-blocked.svg) + skin/classic/browser/notification-icons/microphone.svg (../shared/notification-icons/microphone.svg) + skin/classic/browser/notification-icons/minimize.svg (../shared/notification-icons/minimize.svg) + skin/classic/browser/notification-icons/persistent-storage-blocked.svg (../shared/notification-icons/persistent-storage-blocked.svg) + skin/classic/browser/notification-icons/persistent-storage.svg (../shared/notification-icons/persistent-storage.svg) + skin/classic/browser/notification-icons/plugin-badge.svg (../shared/notification-icons/plugin-badge.svg) + skin/classic/browser/notification-icons/popup.svg (../shared/notification-icons/popup.svg) + skin/classic/browser/notification-icons/screen-blocked.svg (../shared/notification-icons/screen-blocked.svg) + skin/classic/browser/notification-icons/screen.svg (../shared/notification-icons/screen.svg) + skin/classic/browser/notification-icons/xr-blocked.svg (../shared/notification-icons/xr-blocked.svg) + skin/classic/browser/notification-icons/xr.svg (../shared/notification-icons/xr.svg) + skin/classic/browser/notification-icons/midi.svg (../shared/notification-icons/midi.svg) + + skin/classic/browser/tracking-protection.svg (../shared/identity-block/tracking-protection.svg) + skin/classic/browser/tracking-protection-disabled.svg (../shared/identity-block/tracking-protection-disabled.svg) + skin/classic/browser/tracking-protection-active.svg (../shared/identity-block/tracking-protection-active.svg) + skin/classic/browser/tracking-protection-active-brighttext.svg (../shared/identity-block/tracking-protection-active-brighttext.svg) + skin/classic/browser/translation/infobar.css (../shared/translation/infobar.css) + + skin/classic/browser/toolbar-drag-indicator.svg (../shared/toolbar-drag-indicator.svg) + + skin/classic/browser/protections/resolved-breach.svg (../shared/protections/resolved-breach.svg) + skin/classic/browser/protections/resolved-breach-gray.svg (../shared/protections/resolved-breach-gray.svg) + skin/classic/browser/protections/breached-password.svg (../shared/protections/breached-password.svg) + skin/classic/browser/protections/new-feature.svg (../shared/protections/new-feature.svg) + + skin/classic/browser/preferences/android-menu.svg (../shared/preferences/android-menu.svg) + skin/classic/browser/preferences/category-general.svg (../shared/preferences/category-general.svg) + skin/classic/browser/preferences/category-privacy-security.svg (../shared/preferences/category-privacy-security.svg) + skin/classic/browser/preferences/category-search.svg (../shared/preferences/category-search.svg) + skin/classic/browser/preferences/category-sync.svg (../shared/preferences/category-sync.svg) + skin/classic/browser/preferences/containers.css (../shared/preferences/containers.css) + skin/classic/browser/preferences/containers-dialog.css (../shared/preferences/containers-dialog.css) + skin/classic/browser/preferences/dialog.css (../shared/preferences/dialog.css) + skin/classic/browser/preferences/face-sad.svg (../shared/preferences/face-sad.svg) + skin/classic/browser/preferences/face-smile.svg (../shared/preferences/face-smile.svg) + skin/classic/browser/preferences/fxaPairDevice.css (../shared/preferences/fxaPairDevice.css) + skin/classic/browser/preferences/ios-menu.svg (../shared/preferences/ios-menu.svg) + skin/classic/browser/preferences/mozilla-logo.svg (../shared/preferences/mozilla-logo.svg) + skin/classic/browser/preferences/no-search-bar.svg (../shared/preferences/no-search-bar.svg) + skin/classic/browser/preferences/preferences.css (../shared/preferences/preferences.css) + skin/classic/browser/preferences/privacy.css (../shared/preferences/privacy.css) + skin/classic/browser/preferences/relay-logo.svg (../shared/preferences/relay-logo.svg) + skin/classic/browser/preferences/search-arrow-indicator.svg (../shared/preferences/search-arrow-indicator.svg) + skin/classic/browser/preferences/search-bar.svg (../shared/preferences/search-bar.svg) + skin/classic/browser/preferences/vpn-logo.svg (../shared/preferences/vpn-logo.svg) + skin/classic/browser/preferences/search.css (../shared/preferences/search.css) + skin/classic/browser/preferences/siteDataSettings.css (../shared/preferences/siteDataSettings.css) + skin/classic/browser/spotlight.css (../shared/spotlight.css) + skin/classic/browser/fxa/fxa-spinner.svg (../shared/fxa/fxa-spinner.svg) + skin/classic/browser/fxa/sync-illustration.svg (../shared/fxa/sync-illustration.svg) + skin/classic/browser/fxa/sync-illustration-issue.svg (../shared/fxa/sync-illustration-issue.svg) + skin/classic/browser/fxa/send-to-device.svg (../shared/fxa/send-to-device.svg) + + skin/classic/browser/fxa/avatar.svg (../shared/fxa/avatar.svg) + skin/classic/browser/fxa/avatar-color.svg (../shared/fxa/avatar-color.svg) + skin/classic/browser/fxa/avatar-empty.svg (../shared/fxa/avatar-empty.svg) + skin/classic/browser/fxa/sync-devices.svg (../shared/fxa/sync-devices.svg) + skin/classic/browser/fxa/send.svg (../shared/fxa/send.svg) + skin/classic/browser/fxa/monitor.svg (../shared/fxa/monitor.svg) + skin/classic/browser/fxa/add-device.svg (../shared/fxa/add-device.svg) + + skin/classic/browser/fullscreen/warning.css (../shared/fullscreen/warning.css) + + skin/classic/browser/add-circle-fill.svg (../shared/icons/add-circle-fill.svg) + skin/classic/browser/back.svg (../shared/icons/back.svg) + skin/classic/browser/bookmark.svg (../shared/icons/bookmark.svg) + skin/classic/browser/bookmark-12.svg (../shared/icons/bookmark-12.svg) + skin/classic/browser/bookmark-hollow.svg (../shared/icons/bookmark-hollow.svg) + skin/classic/browser/bookmark-star-on-tray.svg (../shared/icons/bookmark-star-on-tray.svg) + skin/classic/browser/bookmarks-toolbar.svg (../shared/icons/bookmarks-toolbar.svg) + skin/classic/browser/canvas.svg (../shared/icons/canvas.svg) + skin/classic/browser/canvas-blocked.svg (../shared/icons/canvas-blocked.svg) + skin/classic/browser/characterEncoding.svg (../shared/icons/characterEncoding.svg) + skin/classic/browser/chevron-animation.svg (../shared/icons/chevron-animation.svg) + skin/classic/browser/customize.svg (../shared/icons/customize.svg) + skin/classic/browser/device-phone.svg (../shared/icons/device-phone.svg) + skin/classic/browser/device-tablet.svg (../shared/icons/device-tablet.svg) + skin/classic/browser/device-desktop.svg (../shared/icons/device-desktop.svg) + skin/classic/browser/device-tv.svg (../shared/icons/device-tv.svg) + skin/classic/browser/device-vr.svg (../shared/icons/device-vr.svg) + skin/classic/browser/edit-cut.svg (../shared/icons/edit-cut.svg) + skin/classic/browser/edit-paste.svg (../shared/icons/edit-paste.svg) + skin/classic/browser/fingerprint.svg (../shared/icons/fingerprint.svg) + skin/classic/browser/forget.svg (../shared/icons/forget.svg) + skin/classic/browser/forward.svg (../shared/icons/forward.svg) + skin/classic/browser/fullscreen.svg (../shared/icons/fullscreen.svg) + skin/classic/browser/fullscreen-exit.svg (../shared/icons/fullscreen-exit.svg) + skin/classic/browser/history.svg (../shared/icons/history.svg) + skin/classic/browser/home.svg (../shared/icons/home.svg) + skin/classic/browser/import.svg (../shared/icons/import.svg) +#ifndef MOZ_WIDGET_GTK + skin/classic/browser/import-export.svg (../shared/icons/import-export.svg) +#endif + skin/classic/browser/library.svg (../shared/icons/library.svg) + skin/classic/browser/login.svg (../shared/icons/login.svg) + skin/classic/browser/logo-android.svg (../shared/icons/logo-android.svg) + skin/classic/browser/logo-ios.svg (../shared/icons/logo-ios.svg) + skin/classic/browser/mail.svg (../shared/icons/mail.svg) + skin/classic/browser/menu.svg (../shared/icons/menu.svg) + skin/classic/browser/menu-badged.svg (../shared/icons/menu-badged.svg) + skin/classic/browser/new-tab.svg (../shared/icons/new-tab.svg) + skin/classic/browser/notification-fill-12.svg (../shared/icons/notification-fill-12.svg) + skin/classic/browser/open.svg (../shared/icons/open.svg) + skin/classic/browser/pin-12.svg (../shared/icons/pin-12.svg) + skin/classic/browser/privateBrowsing.svg (../shared/icons/privateBrowsing.svg) + skin/classic/browser/quickactions.svg (../shared/icons/quickactions.svg) + skin/classic/browser/reader-mode.svg (../shared/icons/reader-mode.svg) + skin/classic/browser/reload-to-stop.svg (../shared/icons/reload-to-stop.svg) + skin/classic/browser/save.svg (../shared/icons/save.svg) + skin/classic/browser/screenshot.svg (../shared/icons/screenshot.svg) + skin/classic/browser/sidebars.svg (../shared/icons/sidebars.svg) + skin/classic/browser/sidebars-right.svg (../shared/icons/sidebars-right.svg) +#ifndef MOZ_WIDGET_GTK + skin/classic/browser/sort.svg (../shared/icons/sort.svg) +#endif + skin/classic/browser/stop-to-reload.svg (../shared/icons/stop-to-reload.svg) + skin/classic/browser/subtract-circle-fill.svg (../shared/icons/subtract-circle-fill.svg) + skin/classic/browser/success-animation.svg (../shared/icons/success-animation.svg) + skin/classic/browser/sync.svg (../shared/icons/sync.svg) + skin/classic/browser/synced-tabs.svg (../shared/icons/synced-tabs.svg) + skin/classic/browser/tab.svg (../shared/icons/tab.svg) + skin/classic/browser/thumb-down.svg (../shared/icons/thumb-down.svg) + skin/classic/browser/topsites.svg (../shared/icons/topsites.svg) + skin/classic/browser/trending.svg (../shared/icons/trending.svg) + skin/classic/browser/window.svg (../shared/icons/window.svg) + skin/classic/browser/zoom-out.svg (../shared/icons/zoom-out.svg) + skin/classic/browser/ion.svg (../shared/icons/ion.svg) + + + skin/classic/browser/search-engine-placeholder.png (../shared/search/search-engine-placeholder.png) + skin/classic/browser/search-engine-placeholder@2x.png (../shared/search/search-engine-placeholder@2x.png) + skin/classic/browser/search-indicator-badge-add.svg (../shared/search/search-indicator-badge-add.svg) + + skin/classic/browser/tabbrowser/crashed.svg (../shared/tabbrowser/crashed.svg) + skin/classic/browser/tabbrowser/hourglass.svg (../shared/tabbrowser/hourglass.svg) + skin/classic/browser/tabbrowser/loading.svg (../shared/tabbrowser/loading.svg) + skin/classic/browser/tabbrowser/loading-burst.svg (../shared/tabbrowser/loading-burst.svg) + skin/classic/browser/tabbrowser/pendingpaint.png (../shared/tabbrowser/pendingpaint.png) + skin/classic/browser/tabbrowser/tab-audio-playing-small.svg (../shared/tabbrowser/tab-audio-playing-small.svg) + skin/classic/browser/tabbrowser/tab-audio-muted-small.svg (../shared/tabbrowser/tab-audio-muted-small.svg) + skin/classic/browser/tabbrowser/tab-audio-blocked-small.svg (../shared/tabbrowser/tab-audio-blocked-small.svg) + skin/classic/browser/tabbrowser/tab-connecting.png (../shared/tabbrowser/tab-connecting.png) + skin/classic/browser/tabbrowser/tab-connecting@2x.png (../shared/tabbrowser/tab-connecting@2x.png) + skin/classic/browser/tabbrowser/tab-drag-indicator.svg (../shared/tabbrowser/tab-drag-indicator.svg) + skin/classic/browser/tabbrowser/tab-loading.png (../shared/tabbrowser/tab-loading.png) + skin/classic/browser/tabbrowser/tab-loading@2x.png (../shared/tabbrowser/tab-loading@2x.png) + skin/classic/browser/tabbrowser/tab-loading-inverted.png (../shared/tabbrowser/tab-loading-inverted.png) + skin/classic/browser/tabbrowser/tab-loading-inverted@2x.png (../shared/tabbrowser/tab-loading-inverted@2x.png) + + skin/classic/browser/translating-16.png (../shared/translation/translating-16.png) + skin/classic/browser/translating-16@2x.png (../shared/translation/translating-16@2x.png) + skin/classic/browser/translation-16.png (../shared/translation/translation-16.png) + skin/classic/browser/translation-16@2x.png (../shared/translation/translation-16@2x.png) + skin/classic/browser/update-badge.svg (../shared/update-badge.svg) + skin/classic/browser/profiler-popup-backdrop.png (../shared/profiler-popup-backdrop.png) + skin/classic/browser/tab-crashed.svg (../shared/incontent-icons/tab-crashed.svg) + skin/classic/browser/panic-panel/header.png (../shared/panic-panel/header.png) + skin/classic/browser/panic-panel/header@2x.png (../shared/panic-panel/header@2x.png) + skin/classic/browser/panic-panel/icons.png (../shared/panic-panel/icons.png) + skin/classic/browser/panic-panel/icons@2x.png (../shared/panic-panel/icons@2x.png) + skin/classic/browser/places/sidebar.css (../shared/places/sidebar.css) + skin/classic/browser/places/bookmarksMenu.svg (../shared/places/bookmarksMenu.svg) + skin/classic/browser/places/bookmarksToolbar.svg (../shared/places/bookmarksToolbar.svg) + skin/classic/browser/places/editBookmark.css (../shared/places/editBookmark.css) + skin/classic/browser/places/editBookmarkPanel.css (../shared/places/editBookmarkPanel.css) + skin/classic/browser/places/folder-smart.svg (../shared/places/folder-smart.svg) + skin/classic/browser/places/tag.svg (../shared/places/tag.svg) + skin/classic/browser/places/tree-icons.css (../shared/places/tree-icons.css) + skin/classic/browser/privatebrowsing/aboutPrivateBrowsing.css (../shared/privatebrowsing/aboutPrivateBrowsing.css) + skin/classic/browser/privatebrowsing/favicon.svg (../shared/privatebrowsing/favicon.svg) + + skin/classic/browser/syncedtabs/sidebar.css (../shared/syncedtabs/sidebar.css) + + skin/classic/browser/weather/sunny.svg (../shared/weather/sunny.svg) + skin/classic/browser/weather/mostly-sunny.svg (../shared/weather/mostly-sunny.svg) + skin/classic/browser/weather/partly-sunny.svg (../shared/weather/partly-sunny.svg) + skin/classic/browser/weather/hazy-sunshine.svg (../shared/weather/hazy-sunshine.svg) + skin/classic/browser/weather/cloudy.svg (../shared/weather/cloudy.svg) + skin/classic/browser/weather/fog.svg (../shared/weather/fog.svg) + skin/classic/browser/weather/showers.svg (../shared/weather/showers.svg) + skin/classic/browser/weather/mostly-cloudy-with-showers.svg (../shared/weather/mostly-cloudy-with-showers.svg) + skin/classic/browser/weather/thunderstorms.svg (../shared/weather/thunderstorms.svg) + skin/classic/browser/weather/mostly-cloudy-with-thunderstorms.svg (../shared/weather/mostly-cloudy-with-thunderstorms.svg) + skin/classic/browser/weather/rain.svg (../shared/weather/rain.svg) + skin/classic/browser/weather/flurries.svg (../shared/weather/flurries.svg) + skin/classic/browser/weather/partly-sunny-with-flurries.svg (../shared/weather/partly-sunny-with-flurries.svg) + skin/classic/browser/weather/snow.svg (../shared/weather/snow.svg) + skin/classic/browser/weather/ice.svg (../shared/weather/ice.svg) + skin/classic/browser/weather/freezing-rain.svg (../shared/weather/freezing-rain.svg) + skin/classic/browser/weather/hot.svg (../shared/weather/hot.svg) + skin/classic/browser/weather/windy.svg (../shared/weather/windy.svg) + skin/classic/browser/weather/night-clear.svg (../shared/weather/night-clear.svg) + skin/classic/browser/weather/night-mostly-clear.svg (../shared/weather/night-mostly-clear.svg) + skin/classic/browser/weather/night-hazy-moonlight.svg (../shared/weather/night-hazy-moonlight.svg) + skin/classic/browser/weather/night-partly-cloudy-with-showers.svg (../shared/weather/night-partly-cloudy-with-showers.svg) + skin/classic/browser/weather/night-partly-cloudy-with-thunderstorms.svg (../shared/weather/night-partly-cloudy-with-thunderstorms.svg) + skin/classic/browser/weather/night-mostly-cloudy-with-flurries.svg (../shared/weather/night-mostly-cloudy-with-flurries.svg) diff --git a/browser/themes/shared/light-dark-overrides.css b/browser/themes/shared/light-dark-overrides.css new file mode 100644 index 0000000000..5fa24219f5 --- /dev/null +++ b/browser/themes/shared/light-dark-overrides.css @@ -0,0 +1,110 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +#urlbar { + --urlbar-box-bgcolor: var(--toolbar-field-focus-background-color); + --urlbar-box-focus-bgcolor: var(--button-bgcolor); + --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor); +} + +@media (-moz-platform: windows) { + /* The window background is white due to no accentcolor in the lightweight + theme. It can't be changed to transparent when there is no compositor + (Win 7 in classic / basic theme), or else dragging and focus become + broken. So instead just show the normal titlebar in that case, and override + the window color as transparent when the compositor is available. */ + @media (-moz-windows-compositor: 0) { + :root[tabsintitlebar]:not([inDOMFullscreen]) #titlebar:-moz-lwtheme { + visibility: visible; + } + + /* Prevent accent color overriding the window background for + * light and dark theme on Aero Basic. This is copied from browser-aero.css. */ + @media (-moz-windows-default-theme) { + :root { + background-color: rgb(185,209,234) !important; + } + :root:-moz-window-inactive { + background-color: rgb(215,228,242) !important; + } + } + } + + /* Add a fog for background tabs to be visible on Windows 7 glass window background */ + @media (-moz-platform: windows-win7) { + @media (-moz-windows-default-theme) { + #TabsToolbar { + background-image: radial-gradient(ellipse at bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.5) 80%, transparent); + color: black; + --toolbarbutton-icon-fill: currentColor; + } + } + } + + @media (-moz-windows-glass) { + /* Make the menubar text readable on aero glass (copied from browser-aero.css). */ + #toolbar-menubar { + text-shadow: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255,255,255,.4); + } + + #main-menubar:not(:-moz-window-inactive) { + background-color: rgba(255,255,255,.5); + color: black; + border-radius: 4px; + } + } + + @media (-moz-platform: windows-win7), + (-moz-platform: windows-win8) { + @media (-moz-windows-compositor) { + :root { + background: transparent !important; + } + + /* Remove lwtheme borders from toolbars in non-maximized windows. */ + #toolbar-menubar, + #TabsToolbar { + border-inline-style: none !important; + } + } + + /* Use proper menu text styling in Win7 classic mode. On Windows 8, we use + these colors so tabs and menus are legible against the window accent color. + These colors are copied from browser.css. */ + @media (-moz-windows-compositor: 0), + (-moz-windows-default-theme: 0), + (-moz-platform: windows-win8) { + :root[tabsintitlebar] { + color: CaptionText; + } + + :root[tabsintitlebar]:-moz-window-inactive { + color: InactiveCaptionText; + } + } + } + + /* Restored windows get an artificial border on windows, because the lwtheme background + * overlaps the regular window border. That isn't the case for us, so we avoid painting + * over the native border with our custom borders. These are !important to avoid + * specificity-wars with the selectors that add these borders. */ + @media (-moz-windows-classic), + (-moz-windows-compositor: 0) and (-moz-windows-default-theme) { + #navigator-toolbox { + background-image: none !important; + } + } + @media (-moz-windows-glass) { + #navigator-toolbox { + border-top: none !important; + box-shadow: none !important; + padding-top: 0 !important; + } + } + @media (-moz-platform: windows-win8) { + #navigator-toolbox { + border-top: none !important; + } + } +} diff --git a/browser/themes/shared/menupanel.css b/browser/themes/shared/menupanel.css new file mode 100644 index 0000000000..e20b3cfaa4 --- /dev/null +++ b/browser/themes/shared/menupanel.css @@ -0,0 +1,27 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* Menu panel and palette styles */ + +/** + * These are placeholder icons until we get the proper Proton + * assets for zoom/fullscreen/sync. + */ +#appMenu-zoomEnlarge-button2 { + list-style-image: url(chrome://browser/skin/add-circle-fill.svg); +} + +#appMenu-zoomReduce-button2 { + list-style-image: url(chrome://browser/skin/subtract-circle-fill.svg); +} + +#appMenu-fullscreen-button2 { + list-style-image: url(chrome://browser/skin/fullscreen.svg); +} + +#appMenu-fullscreen-button2[checked] { + list-style-image: url(chrome://browser/skin/fullscreen-exit.svg); +} diff --git a/browser/themes/shared/migration/migration-dialog.css b/browser/themes/shared/migration/migration-dialog.css new file mode 100644 index 0000000000..686f6cfe9c --- /dev/null +++ b/browser/themes/shared/migration/migration-dialog.css @@ -0,0 +1,9 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/in-content/common.css"); + +body { + padding: 24px; +} diff --git a/browser/themes/shared/migration/migration-wizard.css b/browser/themes/shared/migration/migration-wizard.css new file mode 100644 index 0000000000..0140bd5795 --- /dev/null +++ b/browser/themes/shared/migration/migration-wizard.css @@ -0,0 +1,29 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/in-content/common.css"); + +:host { + display: flex; + flex-direction: column; +} + +h3 { + font-weight: normal; + margin-block-start: 0; + min-height: 1em; +} + +fieldset { + border: 0; +} + +label { + display: flex; + align-items: center; +} + +button { + margin-block-end: 0; +} diff --git a/browser/themes/shared/notification-icons.css b/browser/themes/shared/notification-icons.css new file mode 100644 index 0000000000..bd6271f4b9 --- /dev/null +++ b/browser/themes/shared/notification-icons.css @@ -0,0 +1,404 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +#notification-popup-box { + height: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding)); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: var(--urlbar-icon-fill-opacity); + color: inherit; + border-radius: var(--urlbar-icon-border-radius); +} +#notification-popup-box:hover { + background-color: hsla(0,0%,70%,.2); +} +#notification-popup-box:hover:active, +#notification-popup-box[open] { + background-color: hsla(0,0%,70%,.3); +} + +.popup-notification-icon, +.permission-popup-permission-icon { + -moz-context-properties: fill, fill-opacity; + fill: currentColor; +} + +.notification-anchor-icon:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); + border-radius: var(--urlbar-icon-border-radius); +} + +.blocked-permission-icon:focus-visible { + outline: var(--focus-outline); + outline-offset: calc(var(--urlbar-icon-padding) + var(--focus-outline-inset)); + border-radius: 1px; +} + +/* This class can be used alone or in combination with the class defining the + type of icon displayed. This rule must be defined before the others in order + for its list-style-image to be overridden. */ +.notification-anchor-icon { + list-style-image: url(chrome://global/skin/icons/info-filled.svg); + padding: var(--urlbar-icon-padding); +} + +/* INDIVIDUAL NOTIFICATIONS */ + +.focus-tab-by-prompt-icon { + list-style-image: url(chrome://global/skin/icons/info.svg); +} + +.storage-access-icon { + list-style-image: url(chrome://browser/skin/controlcenter/3rdpartycookies.svg); +} + +.persistent-storage-icon { + list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage.svg); +} + +.persistent-storage-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage-blocked.svg); +} + +.desktop-notification-icon { + list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification.svg); +} + +.desktop-notification-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification-blocked.svg); +} + +.geo-icon { + list-style-image: url(chrome://browser/skin/notification-icons/geo.svg); +} + +.geo-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/geo-blocked.svg); +} + +.open-protocol-handler-icon { + list-style-image: url(chrome://global/skin/icons/open-in-new.svg); +} + +.open-protocol-handler-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.xr-icon { + list-style-image: url(chrome://browser/skin/notification-icons/xr.svg); +} + +.xr-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/xr-blocked.svg); +} + +.autoplay-media-icon { + list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media.svg); +} + +.autoplay-media-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media-blocked.svg); +} + +.storage-access-notification-content { + color: var(--panel-disabled-color); + font-style: italic; + margin-top: 15px; +} + +.storage-access-notification-content .text-link { + color: -moz-nativehyperlinktext; +} + +.storage-access-notification-content .text-link:hover { + text-decoration: underline; +} + +#storage-access-notification .popup-notification-body-container { + padding: 20px; +} + +.indexedDB-icon { + list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage.svg); +} + +#password-notification-icon { + list-style-image: url(chrome://browser/skin/login.svg); +} + +#password-notification-icon[extraAttr="attention"] { + fill: var(--toolbar-field-icon-fill-attention); + fill-opacity: 1; +} + +.camera-icon { + list-style-image: url(chrome://browser/skin/notification-icons/camera.svg); +} + +.camera-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons/camera.svg); +} + +.camera-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/camera-blocked.svg); +} + +.microphone-icon { + list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); +} + +.microphone-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); +} + +.microphone-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/microphone-blocked.svg); +} + +.popup-notification-icon.microphone-icon { + list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); +} + +.screen-icon { + list-style-image: url(chrome://browser/skin/notification-icons/screen.svg); +} + +.screen-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons/screen.svg); +} + +.screen-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/screen-blocked.svg); +} + +.speaker-icon { + list-style-image: url(chrome://global/skin/media/audio.svg); +} + +.midi-icon, +.midi-sysex-icon { + list-style-image: url(chrome://browser/skin/notification-icons/midi.svg); +} + +#canvas-notification-icon, +.canvas-icon { + list-style-image: url(chrome://browser/skin/canvas.svg); +} + +.canvas-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/canvas-blocked.svg); +} + +#webauthn-notification-icon, +.popup-notification-icon[popupid^="webauthn-prompt-"] { + list-style-image: url(chrome://browser/skin/fingerprint.svg); +} + +#identity-credential-notification-icon { + list-style-image: url(chrome://browser/skin/fingerprint.svg); +} + +#permission-popup-menulist { + margin-inline-end: 0; +} + +#webRTC-preview:not([hidden]) { + -moz-box-orient: vertical; +} + +#webRTC-previewVideo { + border-radius: 4px; + border: 1px solid var(--panel-separator-color); + min-width: 0; + min-height: 10em; + max-height: 250px; +} + +#webRTC-all-windows-shared, +#webRTC-previewWarning { + font-size: 0.8em; +} + +@media not (prefers-contrast) { + #webRTC-all-windows-shared, + #webRTC-previewWarning { + opacity: 0.6; + } +} + +#webRTC-previewWarning { + margin-block-start: 14px; +} + +/** + * All learn-more links tend to have an !important margin-top, but + * the small one below the WebRTC preview warning is special and + * doesn't have one by design. + */ +#webRTC-previewWarning-learnMore { + margin-top: 0 !important; + font-size: 0.75em; +} + +#webRTC-previewWarningBox:-moz-locale-dir(rtl) { + background-position: calc(100% - .75em) .75em; +} + +#webRTC-previewWarning > .text-link { + margin-inline-start: 0; +} + +/* This icon has a block sign in it, so we don't need a blocked version. */ +.popup-icon { + list-style-image: url("chrome://browser/skin/notification-icons/popup.svg"); +} + +/** + * Bug 1708716: The blocked popup icon is just slightly vertically offset from + * the other icons that can appear alongside it in the URL bar due to how it's + * placed in the SVG file. We nudge it a little here to make it line up in a + * more aesthetically pleasing way. + */ +#blocked-permissions-container > .popup-icon { + transform: translateY(1px); +} + +#permission-popup-menulist, +#permission-popup-menulist > menupopup { + min-width: 6.5em; +} + +/* EME */ + +.drm-icon { + list-style-image: url("chrome://browser/skin/drm-icon.svg"); +} + +.notification-anchor-icon[animate=true], +#eme-notification-icon[firstplay=true] { + animation: emeTeachingMoment 0.2s linear 0s 5 normal; +} + +@keyframes emeTeachingMoment { + 0% {transform: translateX(0); } + 25% {transform: translateX(3px) } + 75% {transform: translateX(-3px) } + 100% { transform: translateX(0); } +} + +/* INSTALL ADDONS */ + +.install-icon { + list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); +} + +.install-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); +} + +/* PLUGINS */ + +.plugin-icon { + list-style-image: url(chrome://global/skin/icons/plugin.svg); + transition: fill 1.5s; +} + +#plugin-icon-badge { + list-style-image: url(chrome://browser/skin/notification-icons/plugin-badge.svg); + width: 16px; + height: 16px; + opacity: 0; + transition: opacity 1.5s; +} + +#plugins-notification-icon:not(.plugin-blocked)[extraAttr="inactive"] > .plugin-icon { + fill-opacity: 0.25; +} + +#plugins-notification-icon[extraAttr="inactive"] > #plugin-icon-badge { + opacity: 1; +} + +#plugins-notification-icon[extraAttr="inactive"] > #plugin-icon-badge[animate] { + animation: blink-badge 1000ms ease 0s 5 alternate both; +} + +@keyframes blink-badge { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.plugin-blocked > .plugin-icon { + list-style-image: url(chrome://global/skin/icons/plugin-blocked.svg); + fill: #d92215 !important; +} + +.plugin-blocked > #plugin-icon-badge { + visibility: collapse; +} + +#notification-popup-box[hidden] { + /* Override display:none to make the pluginBlockedNotification animation work + when showing the notification repeatedly. */ + display: -moz-box; + visibility: collapse; +} + +#plugins-notification-icon.plugin-blocked[showing] { + animation: pluginBlockedNotification 500ms ease 0s 5 alternate both; +} + +@keyframes pluginBlockedNotification { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +/* TRANSLATION */ + +.translation-icon { + list-style-image: url(chrome://browser/skin/translation-16.png); + -moz-image-region: rect(0px, 16px, 16px, 0px); +} + +.translation-icon.in-use { + -moz-image-region: rect(0px, 32px, 16px, 16px); +} + +@media (-moz-platform: macos) and (min-resolution: 1.1dppx) { + .translation-icon { + list-style-image: url(chrome://browser/skin/translation-16@2x.png); + -moz-image-region: rect(0px, 32px, 32px, 0px); + } + + .translation-icon.in-use { + -moz-image-region: rect(0px, 64px, 32px, 32px); + } +} + +/* UPDATE */ +.popup-notification-icon[popupid="update-available"], +.popup-notification-icon[popupid="update-manual"], +.popup-notification-icon[popupid="update-other-instance"], +.popup-notification-icon[popupid="update-restart"] { + background: url(chrome://browser/skin/update-badge.svg) no-repeat center; + -moz-context-properties: fill; + fill: var(--panel-banner-item-update-supported-bgcolor); +} + +.popup-notification-icon[popupid="update-unsupported"] { + background: url(chrome://global/skin/icons/warning.svg) no-repeat center; + -moz-context-properties: fill; + fill: var(--warning-icon-bgcolor); +} diff --git a/browser/themes/shared/notification-icons/autoplay-media-blocked.svg b/browser/themes/shared/notification-icons/autoplay-media-blocked.svg new file mode 100644 index 0000000000..8710280b1f --- /dev/null +++ b/browser/themes/shared/notification-icons/autoplay-media-blocked.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/notification-icons/autoplay-media.svg b/browser/themes/shared/notification-icons/autoplay-media.svg new file mode 100644 index 0000000000..3ee92bcfc4 --- /dev/null +++ b/browser/themes/shared/notification-icons/autoplay-media.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/notification-icons/camera-blocked.svg b/browser/themes/shared/notification-icons/camera-blocked.svg new file mode 100644 index 0000000000..fdb7bf27d9 --- /dev/null +++ b/browser/themes/shared/notification-icons/camera-blocked.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/notification-icons/camera.svg b/browser/themes/shared/notification-icons/camera.svg new file mode 100644 index 0000000000..f653b3bcc7 --- /dev/null +++ b/browser/themes/shared/notification-icons/camera.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/notification-icons/desktop-notification-blocked.svg b/browser/themes/shared/notification-icons/desktop-notification-blocked.svg new file mode 100644 index 0000000000..d2f97a166c --- /dev/null +++ b/browser/themes/shared/notification-icons/desktop-notification-blocked.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/notification-icons/desktop-notification.svg b/browser/themes/shared/notification-icons/desktop-notification.svg new file mode 100644 index 0000000000..41d5fa9b40 --- /dev/null +++ b/browser/themes/shared/notification-icons/desktop-notification.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/notification-icons/drag-indicator.svg b/browser/themes/shared/notification-icons/drag-indicator.svg new file mode 100644 index 0000000000..78265cd155 --- /dev/null +++ b/browser/themes/shared/notification-icons/drag-indicator.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/notification-icons/geo-blocked.svg b/browser/themes/shared/notification-icons/geo-blocked.svg new file mode 100644 index 0000000000..53b7d3ed14 --- /dev/null +++ b/browser/themes/shared/notification-icons/geo-blocked.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/notification-icons/geo.svg b/browser/themes/shared/notification-icons/geo.svg new file mode 100644 index 0000000000..fcfd085dcd --- /dev/null +++ b/browser/themes/shared/notification-icons/geo.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/notification-icons/microphone-blocked.svg b/browser/themes/shared/notification-icons/microphone-blocked.svg new file mode 100644 index 0000000000..1f299eb9d6 --- /dev/null +++ b/browser/themes/shared/notification-icons/microphone-blocked.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/notification-icons/microphone.svg b/browser/themes/shared/notification-icons/microphone.svg new file mode 100644 index 0000000000..183793d25c --- /dev/null +++ b/browser/themes/shared/notification-icons/microphone.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/notification-icons/midi.svg b/browser/themes/shared/notification-icons/midi.svg new file mode 100644 index 0000000000..34e6ef569e --- /dev/null +++ b/browser/themes/shared/notification-icons/midi.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/notification-icons/minimize.svg b/browser/themes/shared/notification-icons/minimize.svg new file mode 100644 index 0000000000..9a5144ddf5 --- /dev/null +++ b/browser/themes/shared/notification-icons/minimize.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/notification-icons/persistent-storage-blocked.svg b/browser/themes/shared/notification-icons/persistent-storage-blocked.svg new file mode 100644 index 0000000000..bd804c6976 --- /dev/null +++ b/browser/themes/shared/notification-icons/persistent-storage-blocked.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/notification-icons/persistent-storage.svg b/browser/themes/shared/notification-icons/persistent-storage.svg new file mode 100644 index 0000000000..dd80c09cf8 --- /dev/null +++ b/browser/themes/shared/notification-icons/persistent-storage.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/notification-icons/plugin-badge.svg b/browser/themes/shared/notification-icons/plugin-badge.svg new file mode 100644 index 0000000000..1646dac7e1 --- /dev/null +++ b/browser/themes/shared/notification-icons/plugin-badge.svg @@ -0,0 +1,7 @@ + + + + diff --git a/browser/themes/shared/notification-icons/popup.svg b/browser/themes/shared/notification-icons/popup.svg new file mode 100644 index 0000000000..093fa952da --- /dev/null +++ b/browser/themes/shared/notification-icons/popup.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/notification-icons/screen-blocked.svg b/browser/themes/shared/notification-icons/screen-blocked.svg new file mode 100644 index 0000000000..a9fd846e51 --- /dev/null +++ b/browser/themes/shared/notification-icons/screen-blocked.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/notification-icons/screen.svg b/browser/themes/shared/notification-icons/screen.svg new file mode 100644 index 0000000000..bccfda43c7 --- /dev/null +++ b/browser/themes/shared/notification-icons/screen.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/notification-icons/xr-blocked.svg b/browser/themes/shared/notification-icons/xr-blocked.svg new file mode 100644 index 0000000000..a023bb46d2 --- /dev/null +++ b/browser/themes/shared/notification-icons/xr-blocked.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/notification-icons/xr.svg b/browser/themes/shared/notification-icons/xr.svg new file mode 100644 index 0000000000..d9a870902f --- /dev/null +++ b/browser/themes/shared/notification-icons/xr.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/panic-panel/header.png b/browser/themes/shared/panic-panel/header.png new file mode 100644 index 0000000000..1646804e43 Binary files /dev/null and b/browser/themes/shared/panic-panel/header.png differ diff --git a/browser/themes/shared/panic-panel/header@2x.png b/browser/themes/shared/panic-panel/header@2x.png new file mode 100644 index 0000000000..dd1d07087e Binary files /dev/null and b/browser/themes/shared/panic-panel/header@2x.png differ diff --git a/browser/themes/shared/panic-panel/icons.png b/browser/themes/shared/panic-panel/icons.png new file mode 100644 index 0000000000..436ce8e7d6 Binary files /dev/null and b/browser/themes/shared/panic-panel/icons.png differ diff --git a/browser/themes/shared/panic-panel/icons@2x.png b/browser/themes/shared/panic-panel/icons@2x.png new file mode 100644 index 0000000000..99b33184dd Binary files /dev/null and b/browser/themes/shared/panic-panel/icons@2x.png differ diff --git a/browser/themes/shared/places/bookmarksMenu.svg b/browser/themes/shared/places/bookmarksMenu.svg new file mode 100644 index 0000000000..97154aadb6 --- /dev/null +++ b/browser/themes/shared/places/bookmarksMenu.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/places/bookmarksToolbar.svg b/browser/themes/shared/places/bookmarksToolbar.svg new file mode 100644 index 0000000000..2b031295be --- /dev/null +++ b/browser/themes/shared/places/bookmarksToolbar.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/places/editBookmark.css b/browser/themes/shared/places/editBookmark.css new file mode 100644 index 0000000000..54cd75548a --- /dev/null +++ b/browser/themes/shared/places/editBookmark.css @@ -0,0 +1,161 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +#editBookmarkPanelContent { + display: grid; + grid-template-columns: auto; +} + +#editBMPanel_folderTree, +#editBMPanel_tagsSelector { + height: 12.5em; +} + +#editBMPanel_folderMenuList::part(icon) { + width: 16px; + height: 16px; +} + +@media (-moz-platform: macos) { + /* FIXME(emilio): Is this rule needed at all? */ + .folder-icon > .menu-iconic-left > .menu-iconic-icon { + width: 16px; + height: 16px; + } +} + +.folder-icon > .menu-iconic-left { + display: -moz-box; +} + +.folder-icon { + list-style-image: url("chrome://global/skin/icons/folder.svg") !important; + -moz-context-properties: fill; + fill: currentColor; +} + +#editBMPanel_folderTree { + margin-block: 2px; +} + +@media (-moz-platform: macos) { + #editBMPanel_folderTree { + margin: 6px 4px 0; + } +} + +#editBMPanel_tagsSelector > richlistitem > image { + appearance: auto; + -moz-default-appearance: checkbox; + -moz-box-align: center; + margin: 0 2px; + min-width: 13px; + min-height: 13px; +} + +@media (-moz-platform: windows) { + #editBMPanel_tagsSelector > richlistitem > image { + border: 1px solid -moz-DialogText; + background: Field no-repeat 50% 50%; + } +} + +#bookmarkpropertiesdialog #editBMPanel_tagsSelector { + border-color: var(--in-content-border-color); + padding: 12px; +} + +/* Reset default margins for tags so we can apply custom ones */ +#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem > image, +#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem > label { + margin: 0; +} + +/* Set spacing between tags */ +#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem:not(:last-child) { + margin-bottom: 8px; +} + +#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem > image { + margin-inline-end: 8px; +} + +/* Bookmark panel dropdown icons */ + +#editBMPanel_folderMenuList[selectedGuid="toolbar_____"], +#editBMPanel_toolbarFolderItem { + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important; +} + +#editBMPanel_folderMenuList[selectedGuid="menu________"], +#editBMPanel_bmRootItem { + list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important; +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent > label:not(.editBMPanel_nameRow), +#bookmarkpropertiesdialog #editBookmarkPanelContent > #editBMPanel_folderTreeRow, +#bookmarkpropertiesdialog #editBookmarkPanelContent > #editBMPanel_tagsSelectorRow { + padding-block: var(--editbookmarkdialog-padding) 0; +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent label[control] { + margin-inline-start: 0; + margin-block: 0 4px; +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent { + padding: calc(var(--editbookmarkdialog-padding) / 2) var(--editbookmarkdialog-padding) var(--editbookmarkdialog-padding); +} + +#bookmarkpropertiesdialog .expander-up, +#bookmarkpropertiesdialog .expander-down { + appearance: none; + -moz-context-properties: fill; + fill: currentColor; + margin: 0; + min-width: 32px; + min-height: 32px; + padding: 0; +} + +#bookmarkpropertiesdialog .expander-up { + list-style-image: url("chrome://global/skin/icons/arrow-up.svg"); +} + +#bookmarkpropertiesdialog .expander-down { + list-style-image: url("chrome://global/skin/icons/arrow-down.svg"); +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent > input, +#bookmarkpropertiesdialog #editBookmarkPanelContent > hbox > input, +#bookmarkpropertiesdialog #editBMPanel_folderMenuList { + margin: 0; +} + +/* dialog-specific #editBookmarkPanel styles */ + +#bookmarkpropertiesdialog #editBookmarkPanelContent { + padding-inline: 0; + margin-inline: 4px; +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent, +#bookmarkpropertiesdialog vbox#editBMPanel_nameRow { + padding-top: 0; +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent #editBMPanel_tagsField, +#bookmarkpropertiesdialog #editBookmarkPanelContent #editBMPanel_folderMenuList { + margin-inline-end: 16px; +} + +#bookmarkpropertiesdialog .caption-label { + margin: 4px; + color: var(--in-content-deemphasized-text); +} + +.caption-label { + font-size: 0.9em; + margin: 2px 4px; +} diff --git a/browser/themes/shared/places/editBookmarkPanel.css b/browser/themes/shared/places/editBookmarkPanel.css new file mode 100644 index 0000000000..1250f1e1c1 --- /dev/null +++ b/browser/themes/shared/places/editBookmarkPanel.css @@ -0,0 +1,218 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +/** + * Our OS integration code toggles whether system colors should return light or + * dark values based on the luminosity of the toolbar background. Because themes + * can style panels to have a different background color than the toolbar, we + * need specific overrides for system colors used in light or dark themes. + */ +#editBookmarkPanel:-moz-lwtheme { + color-scheme: light; +} + +:root[lwt-popup-brighttext] #editBookmarkPanel { + color-scheme: dark; +} + +#editBookmarkPanel > .panel-subview-body { + padding-bottom: 0; +} + +html|div#editBookmarkPanelFaviconContainer { + display: flex; +} + +#editBookmarkPanelInfoArea { + overflow: hidden; + padding: 4px var(--arrowpanel-padding) 0; +} + +html|img#editBookmarkPanelFavicon[src] { + box-sizing: content-box; + width: 32px; + height: 32px; + padding: 5px; + background-color: #F9F9FA; + box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); + border-radius: 6px; + margin-top: 10px; + margin-inline-start: 10px; + margin-bottom: -52px; /* margin-top + paddings + height */ +} + +#editBookmarkPanelImage { + border-radius: 4px; + height: 150px; + background-image: -moz-element(#editBookmarkPanelImageCanvas); + background-repeat: no-repeat; + background-size: cover; + margin: 0; +} + +#editBookmarkPanelContent, +#editBookmarkPanelBottomContent { + padding: var(--arrowpanel-padding); +} + +#editBookmarkPanelContent { + padding-bottom: 0; +} + +/* Implements editBookmarkPanel resizing on folderTree un-collapse. */ +#editBMPanel_folderTree { + min-width: 27em; +} + +#editBMPanel_newFolderButton { + appearance: none; + border: 0; + border-radius: 4px; + background-color: var(--button-bgcolor); + color: var(--button-color, inherit); + font-weight: 600; + min-width: 0; + padding: 8px 16px; + + /* This button is deeper in the visual hierarchy than others (notably the + buttons at the bottom of the panel), so it should be slightly smaller. */ + font-size: 90%; + + /* This button needs to align with the tree above it. */ + margin-inline-start: 4px; +} + +#editBMPanel_newFolderButton:hover { + background-color: var(--button-hover-bgcolor); +} + +#editBMPanel_newFolderButton:hover:active { + background-color: var(--button-active-bgcolor); +} + +#editBookmarkPanel > #editBookmarkHeaderSeparator, +#editBookmarkPanel > .panel-subview-body > #editBookmarkSeparator { + margin-bottom: 0; + margin-inline: 16px; +} + +#editBookmarkPanel { + font: caption; +} + +#editBookmarkPanelContent > label:not(.editBMPanel_nameRow), +#editBookmarkPanelContent > #editBMPanel_folderTreeRow, +#editBookmarkPanelContent > #editBMPanel_tagsSelectorRow { + padding-block: var(--arrowpanel-padding) 0; +} + +#editBookmarkPanelContent label[control] { + margin-inline-start: 0; + margin-block: 0 4px; +} + +#editBookmarkPanel .caption-label { + display: none; +} + +#editBookmarkPanelContent { + padding: 0.8em var(--arrowpanel-padding) var(--arrowpanel-padding); +} + +#editBMPanel_selectionCount { + padding-top: 0.8em; +} + +#editBookmarkPanelBottomContent { + padding: 0 var(--arrowpanel-padding) calc(var(--arrowpanel-padding) / 2); +} + +#editBookmarkPanelBottomContent > checkbox { + margin-inline-start: 0; +} + +#editBookmarkPanel_showForNewBookmarks > .checkbox-label-box > .checkbox-label { + opacity: 0.7; +} + +#editBookmarkPanelBottomButtons > button { + margin-top: 0; +} + +#editBookmarkPanel .expander-up > .button-box > .button-text, +#editBookmarkPanel .expander-down > .button-box > .button-text { + display: none; +} + +#editBookmarkPanel .expander-up, +#editBookmarkPanel .expander-down { + appearance: none; /* override button.css */ + -moz-context-properties: fill; + fill: currentColor; + margin: 0; + margin-inline-start: 4px; + min-width: 32px; + min-height: 32px; + color: var(--button-color); + background-color: var(--button-bgcolor); + border-radius: 4px; +} + +#editBookmarkPanel .expander-up:hover, +#editBookmarkPanel .expander-down:hover { + background-color: var(--button-hover-bgcolor); +} + +#editBookmarkPanel .expander-up:hover:active, +#editBookmarkPanel .expander-down:hover:active { + /** + * We override the colour here because on macOS, buttons default to + * having :hover:active buttons have color -moz-buttonactivetext + */ + color: var(--button-color); + background-color: var(--button-active-bgcolor); +} + +#editBookmarkPanel .expander-up { + list-style-image: url("chrome://global/skin/icons/arrow-up.svg"); +} + +#editBookmarkPanel .expander-down { + list-style-image: url("chrome://global/skin/icons/arrow-down.svg"); +} + +#editBMPanel_folderMenuList { + margin: 0; +} + +#editBookmarkPanelContent > html|input, +#editBookmarkPanelContent > hbox > html|input { + appearance: none; + padding: 8px; + border-radius: 4px; + border: 1px solid var(--input-border-color, ThreeDShadow); + background-color: var(--input-bgcolor, Field); + color: var(--input-color, FieldText); + margin: 0; +} + +/* Focus outlines */ + +#editBookmarkPanel .expander-up:focus-visible, +#editBookmarkPanel .expander-down:focus-visible, +#editBMPanel_newFolderButton:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +#editBMPanel_folderTree:focus-visible, +#editBMPanel_tagsSelector:focus-visible, +#editBookmarkPanelContent > html|input:focus-visible, +#editBookmarkPanelContent > hbox > html|input:focus-visible { + border-color: transparent; + outline: var(--focus-outline); + outline-offset: -1px; +} diff --git a/browser/themes/shared/places/folder-smart.svg b/browser/themes/shared/places/folder-smart.svg new file mode 100644 index 0000000000..c38c606efc --- /dev/null +++ b/browser/themes/shared/places/folder-smart.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/places/sidebar.css b/browser/themes/shared/places/sidebar.css new file mode 100644 index 0000000000..c4c7db5701 --- /dev/null +++ b/browser/themes/shared/places/sidebar.css @@ -0,0 +1,216 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +.sidebar-panel { + appearance: none; + background-color: transparent; +} + +/* Themed sidebars */ + +.sidebar-panel[lwt-sidebar] { + background-color: var(--lwt-sidebar-background-color); + color: var(--lwt-sidebar-text-color); + scrollbar-color: rgba(204,204,204,.5) rgba(230,230,235,.5); + color-scheme: light; +} + +.sidebar-panel[lwt-sidebar-brighttext] { + scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3); + color-scheme: dark; +} + +.sidebar-panel[lwt-sidebar] .sidebar-placesTreechildren::-moz-tree-row(selected) { + background-color: hsla(0,0%,80%,.3); +} + +.sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-row(selected) { + background-color: rgba(249,249,250,.1); +} + +.sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-image(selected), +.sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-twisty(selected), +.sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-cell-text(selected) { + color: var(--lwt-sidebar-text-color); +} + +.sidebar-panel[lwt-sidebar-highlight] .sidebar-placesTreechildren::-moz-tree-row(selected,focus) { + background-color: var(--lwt-sidebar-highlight-background-color); +} + +.sidebar-panel[lwt-sidebar-highlight] .sidebar-placesTreechildren::-moz-tree-image(selected, focus), +.sidebar-panel[lwt-sidebar-highlight] .sidebar-placesTreechildren::-moz-tree-twisty(selected, focus), +.sidebar-panel[lwt-sidebar-highlight] .sidebar-placesTreechildren::-moz-tree-cell-text(selected, focus) { + color: var(--lwt-sidebar-highlight-text-color, var(--lwt-sidebar-text-color, var(--sidebar-text-color))); +} + +/* Sidebar tree */ + +.sidebar-placesTree { + appearance: none; + background-color: transparent; + color: inherit; + border: 0; + margin: 0; +} + +/* View button */ + +#viewButton { + appearance: none; + border-radius: 4px; + padding: 2px 4px; + color: inherit; +} + +#viewButton:hover { + /* Matches --toolbarbutton-hover-background: */ + background-color: color-mix(in srgb, currentColor 17%, transparent); +} + +#viewButton[open] { + /* Matches --toolbarbutton-active-background: */ + background-color: color-mix(in srgb, currentColor 30%, transparent); +} + +#viewButton:focus-visible { + outline: var(--focus-outline); +} + +#viewButton > .button-box > .button-menu-dropmarker { + appearance: none !important; + display: -moz-box; + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + width: 12px; + height: 12px; + -moz-context-properties: fill; + fill: currentColor; +} + +@media (-moz-platform: windows) { + :root[uidensity=touch] #search-box, + :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row { + min-height: 32px; + } + + .sidebar-placesTreechildren::-moz-tree-cell, + .sidebar-placesTreechildren::-moz-tree-twisty { + padding: 0 4px; + } + + .sidebar-placesTreechildren::-moz-tree-cell(leaf) , + .sidebar-placesTreechildren::-moz-tree-image(leaf) { + cursor: pointer; + } + + .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) { + cursor: pointer; + text-decoration: underline; + } + + .sidebar-placesTreechildren::-moz-tree-cell(separator) { + cursor: default; + } + + @media (-moz-windows-default-theme) { + .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) { + text-decoration: none; + } + } + + /* Default button vert. margins are 1px/2px, and this can cause misalignment */ + #viewButton { + margin: 0; + margin-inline-start: 4px; + border-radius: 2px; + } + + #sidebar-search-container { + padding: 8px; + } + + #search-box { + margin: 0; + } +} + +@media (-moz-platform: linux) { + #sidebar-search-container { + padding: 8px; + } + + #search-box { + margin: 0; + } + + #viewButton { + margin: 1px 0; + margin-inline-start: 4px; + } + + :root[uidensity=touch] #search-box, + :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row { + min-height: 32px; + } + + .sidebar-placesTreechildren::-moz-tree-cell(leaf) , + .sidebar-placesTreechildren::-moz-tree-image(leaf) { + cursor: pointer; + } + + .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) { + cursor: pointer; + text-decoration: underline; + } + + .sidebar-placesTreechildren::-moz-tree-cell(separator) { + cursor: default; + } +} + +@media (-moz-platform: macos) { + .sidebar-placesTree { + margin: 0; + /* Default font size is 11px on mac, so this is 12px */ + font-size: 1.0909rem; + } + + :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row { + min-height: 32px; + } + + .sidebar-placesTreechildren::-moz-tree-separator { + border-top: 1px solid #505d6d; + margin: 0 10px; + } + + .sidebar-panel:not([lwt-sidebar]) .sidebar-placesTreechildren::-moz-tree-row(selected,blur) { + appearance: auto; + -moz-default-appearance: -moz-mac-source-list-selection; + -moz-font-smoothing-background-color: -moz-mac-source-list-selection; + } + + .sidebar-panel:not([lwt-sidebar-highlight]) .sidebar-placesTreechildren::-moz-tree-row(selected,focus) { + appearance: auto; + -moz-default-appearance: -moz-mac-active-source-list-selection; + -moz-font-smoothing-background-color: -moz-mac-active-source-list-selection; + } + + .sidebar-placesTreechildren::-moz-tree-cell-text { + margin-inline-end: 6px; + } + + #sidebar-search-container { + /* Native searchbar styling already adds 4px margin on Mac, so + * adding 4px padding results in 8px of total whitespace. */ + padding: 4px; + } + + #viewButton { + margin: 4px 0; + margin-inline-end: 4px; + /* Default font size is 11px on mac, so this is 12px */ + font-size: 1.0909rem; + } +} diff --git a/browser/themes/shared/places/tag.svg b/browser/themes/shared/places/tag.svg new file mode 100644 index 0000000000..3be1d0e1be --- /dev/null +++ b/browser/themes/shared/places/tag.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/places/tree-icons.css b/browser/themes/shared/places/tree-icons.css new file mode 100644 index 0000000000..38df3ea4d1 --- /dev/null +++ b/browser/themes/shared/places/tree-icons.css @@ -0,0 +1,95 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +treechildren::-moz-tree-image { + -moz-context-properties: fill, fill-opacity; + fill-opacity: 0.7; +} + +treechildren::-moz-tree-image(title) { + list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); + padding-inline-end: 2px; + margin: 0 2px; + width: 16px; + height: 16px; +} + +treechildren::-moz-tree-image(title, container), +treechildren::-moz-tree-image(title, open) { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +treechildren::-moz-tree-image(title, separator) { + list-style-image: none; + width: 0 !important; + height: 0 !important; + margin: 0; +} + +treechildren::-moz-tree-image(container, queryFolder_toolbar_____) { + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg"); +} + +treechildren::-moz-tree-image(container, queryFolder_menu________) { + list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg"); +} + +/* query-nodes should be styled even if they're not expandable */ +treechildren::-moz-tree-image(query) { + list-style-image: url("chrome://browser/skin/places/folder-smart.svg"); +} + +treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) { + list-style-image: url("chrome://browser/skin/bookmark.svg"); +} + +treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) { + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} + +treechildren::-moz-tree-image(title, query, tagContainer), +treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) { + list-style-image: url("chrome://browser/skin/places/tag.svg"); +} + +/* calendar icon for folders grouping items by date */ +treechildren::-moz-tree-image(title, query, dayContainer) { + list-style-image: url("chrome://browser/skin/history.svg"); +} + +treechildren::-moz-tree-image(title, query, hostContainer) { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +treechildren::-moz-tree-image(query, OrganizerQuery_history____v) { + list-style-image: url("chrome://browser/skin/history.svg"); +} + +/* We want some queries to look like ordinary folders. This must come + after the (title, query) selector, or it would get overridden. */ +treechildren::-moz-tree-image(title, query, folder) { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +treechildren::-moz-tree-cell-text(title, separator) { + color: ThreeDShadow; + margin: 0 5px; +} + +treechildren::-moz-tree-cell-text(title, separator, selected, focus) { + color: SelectedItemText; +} + +/* Remove tiny spacing in separators appearing after the twisty column */ +treechildren::-moz-tree-twisty(title, separator) { + padding: 0; +} + +treechildren::-moz-tree-image(cutting) { + opacity: 0.5; +} + +treechildren::-moz-tree-cell-text(cutting) { + opacity: 0.7; +} diff --git a/browser/themes/shared/preferences/android-menu.svg b/browser/themes/shared/preferences/android-menu.svg new file mode 100644 index 0000000000..1084f264a8 --- /dev/null +++ b/browser/themes/shared/preferences/android-menu.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/preferences/category-general.svg b/browser/themes/shared/preferences/category-general.svg new file mode 100644 index 0000000000..952164e863 --- /dev/null +++ b/browser/themes/shared/preferences/category-general.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/preferences/category-privacy-security.svg b/browser/themes/shared/preferences/category-privacy-security.svg new file mode 100644 index 0000000000..deecf8702f --- /dev/null +++ b/browser/themes/shared/preferences/category-privacy-security.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/preferences/category-search.svg b/browser/themes/shared/preferences/category-search.svg new file mode 100644 index 0000000000..942846b673 --- /dev/null +++ b/browser/themes/shared/preferences/category-search.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/preferences/category-sync.svg b/browser/themes/shared/preferences/category-sync.svg new file mode 100644 index 0000000000..0af29ec1e1 --- /dev/null +++ b/browser/themes/shared/preferences/category-sync.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/preferences/containers-dialog.css b/browser/themes/shared/preferences/containers-dialog.css new file mode 100644 index 0000000000..870c4141eb --- /dev/null +++ b/browser/themes/shared/preferences/containers-dialog.css @@ -0,0 +1,50 @@ +/* Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://browser/content/usercontext/usercontext.css"); + +#name { + -moz-box-flex: 1; +} + +.radio-buttons { + -moz-box-orient: horizontal; + margin-inline-start: 0.35rem; +} + +.radio-buttons > radio { + user-select: none; + outline: 2px solid transparent; + outline-offset: 4px; + min-block-size: 24px; + min-inline-size: 24px; + border-radius: 50%; + padding: 2px; + margin: 9px; +} + +.icon-buttons > radio > .userContext-icon { + fill: var(--in-content-text-color); +} + +.radio-buttons > radio { + padding-inline-start: 2px; +} + +radio > .userContext-icon { + inline-size: 22px; + block-size: 22px; +} + +.radio-buttons > radio[selected=true] { + outline-color: var(--in-content-text-color); +} + +.radio-buttons > radio[focused=true] { + outline-color: var(--in-content-accent-color); +} + +.radio-buttons > radio:hover:active { + outline-color: var(--in-content-accent-color-active); +} diff --git a/browser/themes/shared/preferences/containers.css b/browser/themes/shared/preferences/containers.css new file mode 100644 index 0000000000..43081ce8a4 --- /dev/null +++ b/browser/themes/shared/preferences/containers.css @@ -0,0 +1,54 @@ +/* Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://browser/content/usercontext/usercontext.css"); + +#category-containers { + display: none; +} + +.container-header-links { + margin-block-end: 15px; +} + +[data-identity-icon] { + margin: 0; + margin-inline-end: 16px; +} + +#containersView { + border: 0; + background: transparent; + margin-block-end: 8px; +} + +#containersView richlistitem { + padding-block: 4px; + border-block-end: 1px solid var(--in-content-border-color); +} + +#containersView richlistitem > .container-buttons { + margin-inline-end: 4px; +} + +/* Crop the label at the end using CSS. This isn't using XUL crop + * and a value attribute because those labels cannot be highlighted + * by the prefs' find-in-page feature. + */ +.userContext-label-inprefs { + display: -moz-box; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.userContext-icon-inprefs { + margin-inline: 4px 10px; + width: 24px; + height: 24px; +} + +#containersView richlistitem:last-of-type { + border-block-end: 0; +} diff --git a/browser/themes/shared/preferences/dialog.css b/browser/themes/shared/preferences/dialog.css new file mode 100644 index 0000000000..dcd7783cca --- /dev/null +++ b/browser/themes/shared/preferences/dialog.css @@ -0,0 +1,42 @@ +/* - This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this file, + - You can obtain one at http://mozilla.org/MPL/2.0/. */ + +window, +dialog { + appearance: none; + background-color: var(--in-content-page-background); + color: var(--in-content-page-color); + margin: 0; + padding: 0; +} + +/* Add some padding around the contents of the dialog */ +dialog { + padding: 6px; +} + +.contentPane, +dialog::part(content-box) { + -moz-box-flex: 1; + /* This allows the focus ring to display fully when scrolling is enabled. */ + padding: 4px; +} + +.contentPane.doScroll, +dialog.doScroll::part(content-box) { + overflow-y: auto; + contain: size; +} + +tree:not(#rejectsTree) { + height: 15em; +} + +.actionButtons { + margin: 3px 0 0; +} + +menulist label { + font-weight: unset; +} diff --git a/browser/themes/shared/preferences/face-sad.svg b/browser/themes/shared/preferences/face-sad.svg new file mode 100644 index 0000000000..7e50710648 --- /dev/null +++ b/browser/themes/shared/preferences/face-sad.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/preferences/face-smile.svg b/browser/themes/shared/preferences/face-smile.svg new file mode 100644 index 0000000000..6ab7f26131 --- /dev/null +++ b/browser/themes/shared/preferences/face-smile.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/browser/themes/shared/preferences/fxaPairDevice.css b/browser/themes/shared/preferences/fxaPairDevice.css new file mode 100644 index 0000000000..51183b84c7 --- /dev/null +++ b/browser/themes/shared/preferences/fxaPairDevice.css @@ -0,0 +1,122 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +#fxaPairDeviceDialog { + padding-bottom: 2em; +} + +#pairTitle { + font-size: 2.1rem; + font-weight: bold; + padding-top: 12px; + text-align: center; +} + +.pairHeading { + font-size: 1.08em; +} + +.menu-icon { + width: 20px; + height: 20px; + vertical-align: middle; + -moz-context-properties: fill; + fill: currentColor; +} + +#qrCodeDisplay { + width: 450px; + margin: auto; +} + +#qrWrapper { + position: relative; + width: 200px; + height: 200px; + margin: auto; + margin-top: 28px; +} + +#qrContainer { + height: 200px; + width: 200px; + background-size: contain; + image-rendering: -moz-crisp-edges; + transition: filter 250ms cubic-bezier(.07,.95,0,1); +} + +#qrWrapper:not([pairing-status="ready"]) #qrContainer { + opacity: 0.05; + filter: blur(3px); +} + +#qrWrapper:not([pairing-status="loading"]) #qrSpinner { + opacity: 0; +} + +#qrSpinner { + display: block; + position: absolute; + height: 250px; + width: 250px; +} + +#qrSpinner::before { + background-image: url("chrome://browser/skin/fxa/fxa-spinner.svg"); + animation: 0.9s spin infinite linear; + background-size: 36px; + background-repeat: no-repeat; + background-position: center; + display: block; + position: absolute; + height: 200px; + width: 200px; + content: ""; + transition: opacity 250ms cubic-bezier(.07,.95,0,1); + will-change: transform; + margin-inline: auto; +} + +#qrWrapper:not([pairing-status="error"]) #qrError { + display: none; +} + +#qrError { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 200px; /* Same as #qrContainer */ + position: absolute; + inset: 0; + margin-inline: auto; + transition: opacity 250ms cubic-bezier(.07,.95,0,1); + cursor: pointer; +} + +.qr-error-text { + text-align: center; + user-select: none; + display: block; + color: #2484C6; + cursor: pointer; +} + +#refresh-qr { + width: 36px; + height: 36px; + background-image: url("chrome://global/skin/icons/reload.svg"); + background-size: contain; + -moz-context-properties: fill; + fill: #2484C6; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/browser/themes/shared/preferences/ios-menu.svg b/browser/themes/shared/preferences/ios-menu.svg new file mode 100644 index 0000000000..15183a814d --- /dev/null +++ b/browser/themes/shared/preferences/ios-menu.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/preferences/mozilla-logo.svg b/browser/themes/shared/preferences/mozilla-logo.svg new file mode 100644 index 0000000000..af66da5135 --- /dev/null +++ b/browser/themes/shared/preferences/mozilla-logo.svg @@ -0,0 +1,5 @@ + + diff --git a/browser/themes/shared/preferences/no-search-bar.svg b/browser/themes/shared/preferences/no-search-bar.svg new file mode 100644 index 0000000000..b5c17b5f26 --- /dev/null +++ b/browser/themes/shared/preferences/no-search-bar.svg @@ -0,0 +1,20 @@ + + + + + + + + diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css new file mode 100644 index 0000000000..12beaa7e01 --- /dev/null +++ b/browser/themes/shared/preferences/preferences.css @@ -0,0 +1,1471 @@ +/* - This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this file, + - You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html "http://www.w3.org/1999/xhtml"; + +/* Global rules */ +* { + user-select: text; +} + +#preferences-root { + text-rendering: optimizeLegibility; + -moz-box-layout: flex; +} + +@media not print { + #preferences-root, + #preferences-body { + height: 100%; + overflow: hidden; + } +} + +#preferences-root, +#preferences-body { + margin: 0; + padding: 0; + width: 100%; +} + +#preferences-body { + vertical-align: top; /* See bug 1606130 */ + display: -moz-box; + -moz-box-orient: vertical; + + --main-pane-width: 664px; +} + +/* + The stack has some very tall content but it shouldn't be taller than the + viewport (and we know the tall content will still be accessible via scrollbars + regardless if the stack has a shorter height). So we use min-height: 0 to allow + the stack to be smaller than its content height so it can fit the viewport size. +*/ +#preferences-stack { + min-height: 0; +} + +.main-content { + padding-top: 0; + /* the 32px min-height, plus 20+30px margin below, plus some leeway: */ + scroll-padding-top: 90px; + contain: inline-size; +} + +.pane-container { + /* A workaround to keep the container always float on the `top: 0` (Bug 1377009) */ + display: block; + width: min(100%, var(--main-pane-width)); + min-width: min-content; +} + +#mainPrefPane { + width: 100%; + padding: 0; +} + +groupbox[data-category] { + margin: 0 0 32px; +} + +html|h1 { + margin: 0 0 8px; + font-size: 1.46em; + font-weight: 300; + line-height: 1.3em; +} + +html|h2 { + margin: 16px 0 4px; + font-size: 1.14em; + line-height: normal; +} + +description.indent, +.indent:not(#browserPrivateEngineSelection) > description { + color: var(--in-content-deemphasized-text); +} + +button, +treecol, +html|option { + /* override the * rule */ + user-select: none; +} + +/* Buttons get a default min-width in XUL. When they also have flex, they will + * be large enough anyway, and we don't want them to become smaller than their inner + * text which would then overflow the button. Set min-width back to auto for that: + */ +button[flex] { + min-width: auto; +} + +description, +label { + line-height: 1.8em; + margin: 0; +} + +.tip-caption { + font-size: .9em; +} + +menulist::part(label), +menuitem > label, +button > hbox > label { + line-height: unset; +} + +.indent { + /* This should match the checkboxes/radiobuttons' width and inline margin, + such that when we have a toggle with a label followed by another element + with this class, the other element's text aligns with the toggle label. */ + margin-inline-start: 22px !important; +} + +checkbox { + margin-inline: 0; +} + +.tail-with-learn-more { + margin-inline: 0 10px; +} + +/* Add a bit of space to the end of descriptions to + * leave margin with e.g. additional buttons on the side. */ +.description-with-side-element { + margin-inline-end: 10px !important; +} + +.learnMore { + margin-inline-start: 0; + font-weight: normal; + white-space: nowrap; +} + +.accessory-button { + min-width: 150px; + margin: 4px 0; +} + +.spotlight { + background-color: color-mix(in srgb, var(--in-content-accent-color) 15%, transparent); + outline: var(--in-content-accent-color) 1px dotted; + animation: fade-out 0.5s ease-out 2s forwards; + /* Show the border to spotlight the components in high-contrast mode. */ + border: 1px solid transparent; + border-radius: 2px; +} + +@keyframes fade-out { + 100% { + background-color: transparent; + outline-color: transparent; + } +} + +[data-subcategory] { + margin-inline: -4px; + padding-inline: 4px; +} + +.ac-site-icon { + display: -moz-box; +} + +/* Subcategory title */ + +/** + * The first subcategory title for each category should not have margin-top. + */ + +.subcategory:not([hidden]) ~ .subcategory { + margin-top: 16px; + padding-top: 16px; + border-top: 1px solid var(--in-content-border-color); +} + +/* Category List */ + +#categories { + overflow: visible !important; /* Cancel scrollbar and do not clip overflow content when window size goes very small */ + padding: 1px; /* Adding padding around richlistitem in order to make entire keyboard focusing outline visible */ +} + +#category-general > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/category-general.svg"); +} + +#category-home > .category-icon { + list-style-image: url("chrome://browser/skin/home.svg"); +} + +#category-search > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/category-search.svg"); +} + +#category-privacy > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/category-privacy-security.svg"); +} + +#category-sync > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/category-sync.svg"); +} + +#category-experimental > .category-icon { + list-style-image: url("chrome://global/skin/icons/experiments.svg"); +} + +#category-more-from-mozilla > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/mozilla-logo.svg"); +} + +/* All panes */ + +.info-icon, +.androidIcon, +.iOSIcon { + -moz-context-properties: fill; + fill: currentColor; +} + +/* General Pane */ + +.is-default > #isNotDefaultPane, +:not(.is-default) > #isDefaultPane { + visibility: hidden; +} + +#isDefaultLabel, +#isNotDefaultLabel { + font-weight: 600; +} + +#browserContainersExtensionContent { + padding-block: 5px; +} + +.extension-controlled { + margin-block: 18px; +} + +.extension-controlled-icon { + height: 20px; + margin: 2px 0 6px; + vertical-align: middle; + width: 20px; + -moz-context-properties: fill; + fill: currentColor; +} + +.extension-controlled-disabled { + -moz-context-properties: fill; + color: GrayText; + fill: currentColor; +} + +.extension-controlled-disabled > .extension-controlled-button { + display: none; +} + +.extension-controlled-icon.close-icon { + height: 30px; + width: 30px; + margin-inline-start: 5px; +} + +#getStarted { + font-size: 90%; +} + +#colors { + margin-inline-start: 5px; +} + +#FontsDialog menulist:empty { + /* When there's no menupopup, while the font builder is running, + * the height of the menulist would otherwise shrink. This throws + * off the height determination SubDialog.sys.mjs does, which then + * leads to content being cut off. Fix by enforcing a minimum height + * when there's no content: */ + min-height: max(32px, calc(1.4em + 16px)); +} + +#useDocumentColors { + margin: 4px 0; +} + +#translationAttributionImage { + width: 70px; + cursor: pointer; +} + +#activeLanguages > richlistitem { + padding: 0.3em; +} + +#saveWhere { + -moz-box-align: center; +} + +#saveTo { + margin-inline-end: 1em; +} + +#downloadFolder { + -moz-box-flex: 1; + margin-block: 4px; + margin-inline-start: 0; + padding-inline-start: 30px; + background-repeat: no-repeat; + background-size: 16px; + background-position: center left 8px; +} + +#downloadFolder:-moz-locale-dir(rtl) { + background-position-x: right 8px; +} + +#updateBox { + margin-block: 4px 32px; +} + +/* Work around bug 560067 - animated images in visibility: hidden + * still eat CPU. */ +#updateDeck > *:not(.deck-selected) > .update-throbber { + display: none; +} + +#updateDeck > hbox > button { + margin-block: 0; + margin-inline-end: 0; +} + +#updateDeck > hbox > label { + -moz-box-flex: 1; +} + +.manualLink { + margin-inline-start: 6px !important; +} + +#updateRadioGroup > radio { + min-height: 30px; + margin: 2px 0; +} + +#filter { + margin: 4px 0 8px; +} + +#handlersView { + height: 25em; + margin-inline-end: 0; +} + +#handlersView > richlistitem { + min-height: 30px; +} + +#handlersViewHeader > treecol, +#handlersView > richlistitem > hbox { + width: 50%; +} + +#handlersView .actionsMenu { + margin: 0; + min-height: 0; + padding: 0; + border: none; + padding-inline-end: 8px; +} + +#handlersView .actionsMenu::part(label) { + margin: 0; +} + +.typeIcon, +.actionIcon, +.actionsMenu::part(icon) { + height: 16px; + width: 16px; +} + +.typeIcon { + margin-inline: 10px 9px !important; +} + +#handlersView .actionsMenu::part(icon), +.actionIcon { + margin-inline: 11px 8px !important; +} + +.actionsMenu > menupopup > menuitem { + padding-inline-start: 10px !important; +} + +.actionsMenu > menupopup > menuitem > .menu-iconic-left { + margin-inline-end: 8px !important; +} + +/* Increase the specifity to override common.inc.css */ +richlistitem[selected] .actionsMenu:focus-visible { + outline-offset: -3px; +} + +/* Home Pane */ + +#homepageGroup menulist, +#homepageGroup html|input { + margin: 5px 0; +} + +#homepageGroup html|input { + text-align: match-parent; +} + +#homepageGroup:-moz-locale-dir(rtl) html|input { + unicode-bidi: plaintext; +} + +#homepageAndNewWindowsOption { + margin-top: 20px; +} + +#homepageGroup:-moz-locale-dir(rtl) panel[type="autocomplete-richlistbox"] { + direction: rtl; +} + +.homepage-button:first-of-type { + margin-inline-start: 0; +} + +.homepage-button:last-of-type { + margin-inline-end: 0; +} + +#homeContentsGroup .checkbox-icon[src] { + -moz-context-properties: fill; + fill: currentColor; + margin-inline: 2px 8px; + width: 16px; +} + +#homeContentsGroup [data-subcategory] { + margin-top: 14px; +} + +#homeContentsGroup [data-subcategory] .section-checkbox { + font-weight: 600; +} + +#homeContentsGroup [data-subcategory] > vbox menulist { + margin-block: 0; +} + +.addon-with-favicon .menu-iconic-icon { + margin-inline-start: 0; +} + +/* Search Pane */ + +#engineList { + margin: 2px 0 5px; +} + +#engineList > treechildren::-moz-tree-image(engineShown, checked), +#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked) { + list-style-image: url("chrome://global/skin/icons/check.svg"); + -moz-context-properties: fill, stroke; + fill: var(--in-content-accent-color); +} + +#engineList > treechildren::-moz-tree-image(engineShown, checked, selected), +#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked, selected) { + fill: var(--in-content-item-selected-text); + stroke: var(--in-content-item-selected); +} + +@media (prefers-contrast) { + #engineList > treechildren::-moz-tree-image(hover), + #blocklistsTree > treechildren::-moz-tree-image(hover) { + fill: var(--in-content-item-hover-text); + stroke: var(--in-content-item-hover); + } +} + +#engineList > treechildren::-moz-tree-row, +#blocklistsTree > treechildren::-moz-tree-row { + min-height: 36px; +} + +#selectionCol { + min-width: 26px; +} + +#addEnginesBox { + margin: 4px 0 0; +} + +/* Privacy Pane */ + +#allowSmartSize { + margin-block: 0 4px; +} + +#doNotTrackLearnMoreBox { + margin-top: 32px; +} + +#historyPane { + margin-top: 4px; +} + +#historyButtons { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +#blockCookies, +#keepRow { + margin-top: 1.5em; +} + +/* Collapse the non-active vboxes in decks to use only the height the + active vbox needs */ +#historyPane:not([selectedIndex="1"]) > #historyDontRememberPane, +#historyPane:not([selectedIndex="2"]) > #historyCustomPane, +#weavePrefsDeck:not([selectedIndex="1"]) > #hasFxaAccount, +#fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified, +#fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected, +#syncStatus:not([selectedIndex="1"]) > #syncConfigured { + visibility: collapse; +} + +#tabsElement { + margin-inline-end: 4px; /* add the 4px end-margin of other elements */ +} + +.text-link { + margin-bottom: 0; +} + +.text-link[disabled="true"] { + pointer-events: none; +} + +#showUpdateHistory { + margin-inline-start: 0; +} + +@media (-moz-platform: windows-win7), + (-moz-platform: windows-win8) { + #windows-sso, + #windows-sso-caption { + display: none; + } +} + +/** + * Dialog + */ + +.dialogOverlay { + visibility: hidden; +} + +.dialogOverlay[topmost="true"] { + background-color: rgba(0,0,0,0.5); +} + +.dialogBox { + background-color: var(--in-content-page-background); + background-clip: content-box; + color: var(--in-content-page-color); + /* `transparent` will use the dialogText color in high-contrast themes and + when page colors are disabled */ + border: 1px solid transparent; + border-radius: 8px; + box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3); + display: -moz-box; + margin: 0; + padding: 0; + overflow-x: auto; +} + +@media (prefers-color-scheme: dark) { + @media not (prefers-contrast) { + .dialogBox { + --in-content-page-background: #42414d; + } + } +} + +.dialogBox[resizable="true"] { + resize: both; + overflow: hidden; + min-height: 20em; + min-width: 66ch; +} + +.dialogTitleBar { + padding: .4em .2em; + border-bottom: 1px solid var(--in-content-border-color); +} + +.dialogTitle { + font-weight: 600; + text-align: center; + user-select: none; +} + +.fxaPairDeviceIcon { + background-image: url("chrome://browser/content/logos/fxa-logo.svg"); + background-position: center center; + background-repeat: no-repeat; + position: relative; + height: 80px; + padding-top: 42px; + margin-top: -40px; +} + +.fxaPairDeviceIcon .close-icon { + margin-top: 10px; +} + +.close-icon { + border: none; + background-color: transparent; /* override common.css, but keep hover/active states */ + min-width: 0; + min-height: auto; + width: 20px; + height: 20px; + padding: 0; + margin-inline: 0 8px; +} + +.dialogFrame { + margin: 10px; + -moz-box-flex: 1; + /* Default dialog dimensions */ + min-width: 66ch; +} + +/** + * End Dialog + */ + +/** + * Font group and font dialog menulist fixes + */ + +#font-chooser-group { + display: grid; + grid-template-columns: max-content 1fr max-content max-content; +} + +#defaultFont { + width: 25ch; +} + +#defaultFontType, +#serif, +#sans-serif, +#monospace { + width: 0; /* Might be able to be removed */ + min-width: 30ch; +} + +/** + * Sync + */ + +.fxaProfileImage { + width: 80px; + height: 80px; + border-radius: 50%; + border: 1px solid transparent; + list-style-image: url(chrome://browser/skin/fxa/avatar-color.svg); + margin-inline-end: 24px; + -moz-user-focus: normal; +} + +.fxaProfileImage.actionable { + cursor: pointer; +} + +.fxaProfileImage.actionable:hover { + border-color: #0095DD; +} + +.fxaProfileImage.actionable:hover:active { + border-color: #ff9500; +} + +#useFirefoxSync { + font-size: 90%; + margin-inline-end: 8px !important; +} + +#fxaNoLoginStatus { + margin-block: 46px 64px; +} + +#fxaSyncComputerName { + -moz-box-flex: 1; + margin-block: 4px; + margin-inline-start: 0; +} + +#fxaChangeDeviceName { + margin-block: 4px; + margin-inline-end: 0; +} + +#noFxaAccount { + line-height: 1.2em; +} + +#noFxaAccount > label:first-child { + margin-bottom: 0.6em; +} + +#noFxaCaption { + line-height: 30px; + margin-block: 0 4px; +} + +#noFxaSignIn { + margin-inline-start: 8px; +} + +.fxaSyncIllustration { + list-style-image: url(chrome://browser/skin/fxa/sync-devices.svg); + width: 312px; + height: 136px; +} + +#noFxaDescription { + padding-inline-end: 52px; +} + +.separator { + border-bottom: 1px solid var(--in-content-box-border-color); +} + +#fxaGroup { + margin-bottom: 32px; +} + +.openLink { + line-height: 30px; + cursor: pointer; +} + +.openLink:visited { + color: var(--in-content-link-color); +} + +#fxaDisplayName { + margin-inline-end: 10px !important; +} + +.fxaLoginRejectedWarning { + list-style-image: url(chrome://global/skin/icons/warning.svg); + -moz-context-properties: fill; + fill: #FFBF00; + margin-inline: 4px 8px; +} + +#syncStatus { + margin-top: 32px; +} + +.sync-group { + margin-block: 16px; + border: 1px solid var(--in-content-border-color); +} + +.sync-configured { + display: block; +} + +.sync-engines-list > div, +.sync-engines-list + hbox { + margin-top: 0; + padding-top: 16px; + max-width: 300px; + height: auto; +} + +dialog > .sync-engines-list > div, +dialog > .sync-engines-list + hbox { + padding-top: 0; +} + +.sync-engines-list checkbox .checkbox-icon, +.sync-engine-image { + margin-inline: 2px 8px; + width: 16px; + height: 16px; + -moz-context-properties: fill; + fill: currentColor; + align-self: center; +} + +.sync-engines-list checkbox { + min-width: max-content; + max-width: calc(50vw - 10px); +} + +.sync-engines-list .checkbox-label-box { + -moz-box-align: center; +} + +.sync-engines-list { + column-count: 2; + column-fill: balance; +} + +.sync-engines-list > div:not([hidden]) { + display: flex; +} + +.sync-engine-bookmarks .checkbox-icon, +.sync-engine-bookmarks.sync-engine-image { + list-style-image: url("chrome://browser/skin/bookmark.svg"); +} + +.sync-engine-history .checkbox-icon, +.sync-engine-history.sync-engine-image { + list-style-image: url("chrome://browser/skin/history.svg"); +} + +.sync-engine-tabs .checkbox-icon, +.sync-engine-tabs.sync-engine-image { + list-style-image: url("chrome://browser/skin/synced-tabs.svg"); +} + +.sync-engine-passwords .checkbox-icon, +.sync-engine-passwords.sync-engine-image { + list-style-image: url("chrome://browser/skin/login.svg"); +} + +.sync-engine-addons .checkbox-icon, +.sync-engine-addons.sync-engine-image { + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} + +.sync-engine-prefs .checkbox-icon, +.sync-engine-prefs.sync-engine-image { + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} + +.sync-engine-addresses .checkbox-icon, +.sync-engine-addresses.sync-engine-image { + list-style-image: url("chrome://formautofill/content/formfill-anchor.svg"); +} + +.sync-engine-creditcards .checkbox-icon, +.sync-engine-creditcards.sync-engine-image { + list-style-image: url("chrome://formautofill/content/icon-credit-card-generic.svg"); +} + +.fxaMobilePromo { + margin-top: 2px !important; +} + +.androidIcon, +.iOSIcon { + margin-inline: 2px 4px; + width: 20px; + height: 20px; + vertical-align: text-bottom; +} + +#updateDeck > hbox > label { + margin-inline-end: 5px ! important; +} + +.update-throbber { + width: 16px; + min-height: 16px; + margin-block: 7px; + margin-inline-end: 8px; +} + +html|img.update-throbber { + vertical-align: middle; +} + +image.update-throbber { + list-style-image: url("chrome://global/skin/icons/loading.png"); +} + +@media (min-resolution: 1.1dppx) { + .update-throbber { + list-style-image: url("chrome://global/skin/icons/loading@2x.png"); + } +} + +.navigation { + overflow-x: hidden; + overflow-y: auto; + position: relative; +} + +@media (prefers-reduced-motion) { + /* Setting border-inline-end on .navigation makes it a focusable element */ + .navigation::after { + content: ""; + width: 1px; + height: 100%; + background-color: var(--in-content-border-color); + top: 0; + inset-inline-end: 0; + position: absolute; + } +} + +.face-sad { + list-style-image: url("chrome://browser/skin/preferences/face-sad.svg"); + width: 20px; + height: 20px; + margin-block: 5px; + margin-inline-end: 8px; +} + +.face-smile { + list-style-image: url("chrome://browser/skin/preferences/face-smile.svg"); + width: 20px; + height: 20px; + margin-block: 5px; + margin-inline-end: 8px; +} + +#policies-container, +#searchInput { + min-height: 32px; + margin: 20px 0 30px; +} + +#policies-container { + margin-inline-end: 16px; + /* Make sure the container is at least the same height as the searchbox. + This is needed in addition to the min-height above to make the info icon + the same height as the first line in the policies label. + Searchbox's height - line-height - border top and bottom */ + padding-block: max(0px, calc((32px - 1.8em - 2px) / 2)); +} + +.info-box-container { + background-color: var(--in-content-box-info-background); + padding: 9px; + border: 1px solid transparent; + border-radius: 4px; +} + +.info-box-container.smaller-font-size { + font-size: 85%; +} + +.info-icon-container { + display: flex; +} + +.info-icon { + list-style-image: url("chrome://global/skin/icons/info.svg"); + width: 16px; + height: 16px; + margin-inline-end: 6px; + align-self: start; + margin-top: 0.4em; + flex-shrink: 0; +} + +.info-box-container.smaller-font-size .info-icon { + margin-top: 0.3em; +} + +.sticky-container { + position: sticky; + background-color: var(--in-content-page-background); + top: 0; + z-index: 1; + /* The sticky-container should have the capability to cover all spotlight area. */ + width: calc(100% + 8px); + margin-inline: -4px; + padding-inline: 4px; +} + +.sticky-inner-container { + -moz-box-flex: 1; + max-width: var(--main-pane-width); +} + +.search-tooltip { + max-width: 10em; + font-size: 1rem; + position: absolute; + padding: 0 .7em; + background-color: #ffe900; + color: #000; + border: 1px solid #d7b600; + margin-top: -18px; + opacity: .85; +} + +.search-tooltip:hover { + opacity: .1; +} + +.search-tooltip::before { + position: absolute; + content: ""; + border: 7px solid transparent; + border-top-color: #d7b600; + top: 100%; + inset-inline-start: calc(50% - 7px); +} + +.search-tooltip::after { + position: absolute; + content: ""; + border: 6px solid transparent; + border-top-color: #ffe900; + top: 100%; + inset-inline-start: calc(50% - 6px); +} + +.search-tooltip-parent { + position: relative; +} + +.search-tooltip > span { + display: block; + user-select: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.visually-hidden { + visibility: collapse; +} + +menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left { + display: -moz-box; + min-width: auto; /* Override the min-width defined in menu.css */ + margin-inline-end: 6px; +} + +menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left > .menu-iconic-icon { + width: 8px; + height: 10px; + margin: 0; +} + +menulist[indicator=true] > menupopup menuitem[indicator=true]:not([image]) > .menu-iconic-left > .menu-iconic-icon { + list-style-image: url(chrome://browser/skin/preferences/search-arrow-indicator.svg); +} + +menulist[indicator=true] > menupopup menuitem[indicator=true]:not([image]) > .menu-iconic-left > .menu-iconic-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.menu-iconic-highlightable-text { + margin: 0; /* Align with the margin of xul:label.menu-iconic-text */ +} + +#no-results-message > label { + margin: 2px 0; + line-height: 30px; +} + +/* Proxy port input */ + +.proxy-port-input { + width: calc(5ch + 18px); /* 5 chars + (8px padding + 1px border) on both sides */ + margin-inline-start: 4px; +} + +#primaryBrowserLocale { + margin-inline-start: 0; + min-width: 20em; +} + +#availableLanguages, +#availableLocales { + margin-inline-start: 0; +} + +#availableLanguages, +#availableLocales, +#activeLanguages, +#selectedLocales { + margin-inline-end: 4px; +} + +#selectedLocales > richlistitem { + padding-inline-start: 13px; +} + +#warning-message > .message-bar-description { + width: 32em; +} + +#warning-message { + margin-top: 8px; +} + +.action-button { + margin-inline-end: 0; +} + +/* Menulist styles */ +.label-item { + font-size: 0.8em; +} + +.updateSettingCrossUserWarningContainer { + margin-block-end: 17px; +} + +#updateSettingCrossUserWarningDesc { + padding-inline-start: calc(16px + 6px); /* radio-check's width + margin-inline-end */ + margin-block-start: 20px; +} + +richlistitem .text-link { + color: inherit; + text-decoration: underline; +} + +richlistitem .text-link:hover { + color: inherit; +} + +#proxy-grid, +#dnsOverHttps-grid { + display: grid; + grid-template-columns: auto 1fr; + align-items: center; +} + +.proxy-grid-row:not([hidden]), +.dnsOverHttps-grid-row:not([hidden]) { + display: contents; +} + +#proxy-grid > .thin { + grid-column: span 2; + height: 20px; +} + +#pane-experimental-search-results-header, +#pane-experimental-subtitle { + background-image: url("chrome://global/skin/icons/warning.svg"); + background-repeat: no-repeat; + background-position: 0 center; + background-size: contain; + min-height: 30px; + padding-inline-start: 38px; + display: flex; + align-items: center; + -moz-context-properties: fill; + fill: #FFBF00; +} + +#pane-experimental-search-results-header:-moz-locale-dir(rtl), +#pane-experimental-subtitle:-moz-locale-dir(rtl) { + background-position-x: right; +} + +#pane-experimental-featureGates { + margin-top: 16px; +} + +.featureGate { + margin-bottom: 16px; +} + +.featureGateCheckbox { + font-size: 1.14em; + -moz-box-align: center; +} + +.featureGateCheckbox > .checkbox-label-box { + -moz-box-align: center; +} + +.featureGateDescription { + margin-inline-start: 28px; +} + +.checkbox-row { + display: flex; + align-items: baseline; +} + +.checkbox-row input[type=checkbox] { + translate: 0 2px +} + +.checkbox-row a { + margin-inline-start: 6px; +} + +#moreFromMozillaCategory-header .title { + margin-block-end: 4px; +} + +#moreFromMozillaCategory-header .subtitle { + color: var(--in-content-text-color); + margin-block-end: 24px; + line-height: 1.4em; +} + +#moreFromMozillaCategory:not([hidden]) { + display: flex; + flex-direction: column; +} + +#moreFromMozillaCategory .mozilla-product-item { + margin-top: 30px; +} + +#moreFromMozillaCategory .product-title { + margin: 4px 0 3px; + background-repeat: no-repeat; + background-size: contain; + padding-inline-start: 30px; + -moz-context-properties: fill; + fill: currentColor; +} + +#moreFromMozillaCategory .product-title:-moz-locale-dir(rtl) { + background-position-x: right; +} + +#moreFromMozillaCategory .product-description-box { + padding-inline-start: 30px; + margin: 2px 0; + line-height: 1.4em; +} + +#moreFromMozillaCategory .description { + display: inline; +} + +#moreFromMozillaCategory .small-button { + margin-block: 14px 2px; + margin-inline: 30px 0; +} + +#firefox-mobile { + background-image: url("chrome://browser/skin/device-phone.svg"); +} + +#mozilla-vpn { + background-image: url("chrome://browser/skin/preferences/vpn-logo.svg"); +} + +#firefox-relay { + background-image: url("chrome://browser/skin/preferences/relay-logo.svg"); +} + +/* + * The :not clause is required because hiding an element with `display: flex` only + * partially hides it. + */ +.qr-code-box:not([hidden="true"]) { + max-width: 320px; /* a unit better than px for this & next? */ + min-height: 204px; + margin-block: 10px 0; + margin-inline-start: 30px; + background-color: var(--in-content-box-info-background); + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + border-radius: 4px; +} + +@media (prefers-contrast) { + .qr-code-box:not([hidden="true"]) { + border: 1px solid currentColor; + } +} + +.qr-code-box-image { + border-radius: 4px; + padding: 2px; + width: 80px; + flex: 0 0 auto; + -moz-context-properties: fill; + fill: currentColor; +} + +.qr-code-title-label { + flex: 1 1 auto; +} + +.qr-code-box-title { + font-size: .87em; + font-weight: normal; + line-height: 1.42em; + + text-align: center; + + margin-block: 20px 0; + margin-inline: 40px; +} + +.simple .qr-code-box-title { + margin-block: 0; + width: 296px; +} + +.simple .qr-code-box { + padding-inline: 24px; + padding-block: 20px +} + +.simple .qr-code-box-image { + padding: 10px; +} + +#moreFromMozillaCategory .qr-code-link { + font-size: .87em; + line-height: 1.42em; +} + +@media (prefers-color-scheme: dark) { + .qr-code-box:not([hidden="true"]) { + background-color: rgba(91,91,102,0.45); + } + + .qr-code-box-title { + color: #fbfbfe; + } +} + +#websiteAppearanceGroup { + display: block; +} + +#web-appearance-chooser { + display: flex; + justify-content: space-between; + gap: 16px; +} + +#web-appearance-chooser, +#web-appearance-override-warning { + margin: 12px 0; +} + +#web-appearance-override-warning:not([hidden]) { + display: flex; +} + +.web-appearance-choice { + width: 100%; + border: 1px solid var(--in-content-box-border-color); + background-color: var(--in-content-box-background-color); + color: var(--in-content-text-color); + border-radius: 4px; + overflow: clip; +} + +.web-appearance-choice-image-container { + background-color: var(--in-content-button-background); + padding: 12px 0; +} + +.web-appearance-choice:hover > .web-appearance-choice-image-container { + background-color: var(--in-content-button-background-hover); +} + +.web-appearance-choice:hover:active > .web-appearance-choice-image-container { + background-color: var(--in-content-button-background-active); +} + +.web-appearance-choice img { + display: block; + margin: 0 auto; + + border: 1px solid var(--in-content-box-border-color); + border-radius: 4px; + box-shadow: 0 0 2px 0 rgba(0,0,0,0.2); + + transform: scaleX(1); + content: url("chrome://browser/content/preferences/web-appearance-light.svg") +} + +.web-appearance-choice.dark img { + content: url("chrome://browser/content/preferences/web-appearance-dark.svg") +} + +.web-appearance-choice img:dir(rtl) { + transform: scaleX(-1); +} + +.web-appearance-choice-footer { + border-top: 1px solid var(--in-content-box-border-color); + padding: 4px 8px; + overflow-wrap: anywhere; + display: flex; +} + +.web-appearance-choice input { + margin-top: 0.4em; +} + +/* Platform-specific tweaks & overrides */ + +@media (-moz-platform: macos) { + tabpanels { + padding: 20px 7px 7px; + } + + #browserUseCurrent, + #browserUseBookmark, + #browserUseBlank { + margin-top: 10px; + } + + #privacyPrefs { + padding: 0 4px; + } + + #privacyPrefs > tabpanels { + padding: 18px 10px 10px; + } + + #OCSPDialogPane { + font: message-box !important; + } + + /** + * Update Preferences + */ + #autoInstallOptions { + margin-inline-start: 20px; + } + + .updateControls { + margin-inline-start: 10px; + } +} + +@media (-moz-platform: linux) { + .treecol-sortdirection { + /* override the Linux only toolkit rule */ + appearance: none; + } +} diff --git a/browser/themes/shared/preferences/privacy.css b/browser/themes/shared/preferences/privacy.css new file mode 100644 index 0000000000..69342135b6 --- /dev/null +++ b/browser/themes/shared/preferences/privacy.css @@ -0,0 +1,364 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* Permissions */ + +#trackingGroup { + --section-highlight-background-color: color-mix(in srgb, var(--in-content-accent-color) 20%, transparent); +} + +.permission-icon { + width: 20px; + height: 20px; + vertical-align: middle; + margin-inline-end: 0.2em; +} + +.permission-icon, +.content-blocking-category .checkbox-label-box, +.extra-information-label > image, +.arrowhead, +.reload-tabs-button, +.content-blocking-warning-image { + -moz-context-properties: fill; + fill: currentColor; +} + +.geo-icon { + list-style-image: url(chrome://browser/skin/notification-icons/geo.svg); +} + +.xr-icon { + list-style-image: url(chrome://browser/skin/notification-icons/xr.svg); +} + +.camera-icon { + list-style-image: url(chrome://browser/skin/notification-icons/camera.svg); +} + +.microphone-icon { + list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); +} + +.desktop-notification-icon { + list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification.svg); +} + +.autoplay-icon { + list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media.svg); +} + +.midi-icon { + list-style-image: url(chrome://browser/skin/notification-icons/midi.svg); +} + +/* Content Blocking */ + +/* Override styling that sets descriptions as grey */ +#trackingGroup description.indent, +#trackingGroup .indent > description { + color: inherit; +} + +[data-subcategory="trackingprotection"] { + margin-top: 10px; +} + +#trackingProtectionShield { + list-style-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg"); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.5; + width: 64px; + height: 64px; + margin-inline-end: 10px; +} + +.content-blocking-category, +#fpiIncompatibilityWarning { + margin: 3px 0; +} + +#fpiIncompatibilityWarning { + background-color: var(--section-highlight-background-color); +} + +#fpiIncompatibilityWarning, +#contentBlockingCategories { + margin-top: 16px; +} + +.content-blocking-category { + border-color: var(--in-content-box-border-color); +} + +.content-blocking-category.disabled { + opacity: 0.5; +} + +.content-blocking-category.disabled .radio-check { + opacity: 1; +} + +.content-blocking-category > .indent { + margin-inline-end: 22px; +} + +.arrowhead { + border-radius: 2px; + min-height: 20px; + min-width: 20px; + max-height: 20px; + max-width: 20px; + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + background-color: transparent; + padding: 3px; +} + +.arrowhead:not([disabled]):hover { + cursor: pointer; +} + +.arrowhead.up { + list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg"); +} + +.content-blocking-category.expanded:not(.selected) .reload-tabs { + display: none; +} + +.content-blocking-warning.reload-tabs:not([hidden]) { + display: flex; + flex-wrap: wrap; +} + +.content-blocking-reload-desc-container { + /* 345px is enough for (almost) twice the size of the default English + * string at default font sizes. If this and the button do not fit + * on one line, the button will get wrapped to the next line and this + * item will stretch to fill all available space. */ + flex: 1 1 345px; + display: flex; + align-self: center; +} + +.content-blocking-reload-description { + line-height: 1.8em; + margin-inline-end: 5px; +} + +.reload-tabs-button { + max-height: 30px; + min-height: 30px; + padding: 0 20px; + list-style-image: url("chrome://global/skin/icons/reload.svg"); + align-self: center; +} + +.reload-tabs-button .button-icon { + margin: 0 6px; + color: inherit; +} + +.reload-tabs-button .button-text { + color: inherit; +} + +.content-blocking-category.selected .content-blocking-warning { + background-color: var(--section-highlight-background-color); +} + +.content-blocking-category.selected .arrowhead { + display: none; +} + +.content-blocking-category.selected { + border-color: var(--in-content-accent-color); +} + +@media (prefers-contrast) { + .content-blocking-category.selected { + outline: 2px solid var(--in-content-accent-color); + } +} + +@media not (prefers-contrast) { + .content-blocking-category { + background-color: rgba(215, 215, 219, 0.1); + } + + .content-blocking-category.selected { + background-color: var(--section-highlight-background-color); + } +} + +.content-blocking-warning-title, +.content-blocking-category .radio-label-box { + font-weight: bold; +} + +.content-blocking-category:not(.expanded, .selected) .content-blocking-extra-information { + visibility: collapse; +} + +.extra-information-label { + margin-top: 18px; +} + +/* Apply display: block to the containers of all the category information, as + * without this the flex-wrapped blocks inside don't stretch vertically to + * enclose their content. */ +.content-blocking-category > .indent { + display: block; +} + +.content-blocking-category.expanded .content-blocking-extra-information, +.content-blocking-category.selected .content-blocking-extra-information { + display: flex; + flex-direction: column; + align-content: stretch; +} + +.content-blocking-extra-information > .indent { + margin-bottom: 18px; +} + +.content-blocking-extra-information > .custom-option { + margin: 10px 0; +} + +.content-blocking-warning { + /* Match .indent's horizontal padding, minus the border added via .info-box-container: */ + padding-inline: calc(22px - 1px); + margin: 10px 0; +} + +.content-blocking-warning:not([hidden]) + .content-blocking-warning { + margin-top: 0; +} + +.content-blocking-extra-blocking-desc { + margin-inline-start: 0.5em; + position: relative; + top: 0.65em; +} + +.content-blocking-label { + display: list-item; + line-height: 1.2em; +} + +.content-blocking-warning-image { + list-style-image: url("chrome://global/skin/icons/warning.svg"); + margin-inline-end: 6px; +} + +#blockCookiesMenu { + width: 450px; +} + +#blockCookiesMenu, +#trackingProtectionMenu { + margin: 0; +} + +#changeBlockListLink { + margin-inline-start: 56px; +} + +#telemetry-container { + margin-block: 4px; + line-height: 1.8em; + width: 100%; +} + +.content-blocking-category-description { + font-size: 90%; + opacity: 0.6; +} + +.warning-description { + background: url(chrome://global/skin/icons/warning.svg) no-repeat 0 5px; + opacity: 0.6; + -moz-context-properties: fill, stroke; + fill: #d7b600; + stroke: white; + padding-inline-start: 20px; +} + +.reject-trackers-warning-icon:-moz-locale-dir(rtl) { + background-position-x: right 0; +} + +#contentBlockingChangeCookieSettings { + padding: 0.25em 0.75em; + margin: 4px 8px; +} + +#deleteOnCloseNote { + margin-top: 8px; + margin-inline-end: 32px; +} + +#submitHealthReportBox { + display: -moz-inline-box; +} + +/* Address bar */ + +.firefoxSuggestOptionBox { + /* With this value we're trying to keep the apparent vertical space between + option boxes the same as the apparent vertical space between the labels of + the checkboxes above the Firefox Suggest subsection. */ + margin-block-start: 11px; +} + +.firefoxSuggestOptionBox:first-of-type { + /* Similar here: Make the apparent vertical space between the last checkbox + and first option box the same as elsewhere. */ + margin-block-start: 5px; +} + +.firefoxSuggestToggle { + /* These variables and comments are copied from and override + toggle-button.css. We include values for all variables, even those that are + the same at the time this comment was written, for sanity and locality of + reference. */ + --button-height: 16px !important; + --button-half-height: 8px !important; + --button-width: 32px !important; + --button-border-width: 1px !important; + /* dot-size = button-height - 2*dot-margin - 2*button-border-width */ + --dot-size: 14px !important; + --dot-margin: 0px !important; + /* --dot-transform-x = button-width - 2*dot-margin - dot-size - 2*button-border-width */ + --dot-transform-x: 16px !important; +} + +.firefoxSuggestOptionDescription { + /* Prevent the description from flowing under the toggle button. + 32px = toggle button width + 1em = a little extra */ + padding-inline-end: calc(32px + 1em); + color: var(--in-content-deemphasized-text); +} + +#firefoxSuggestInfoBox { + margin-block-start: 16px; + padding: 12px; +} + +#firefoxSuggestInfoBox > description { + margin-inline-start: 2px; + margin-block: 2px; +} + +#openSearchEnginePreferences { + margin-block-start: 6px; + line-height: 30px; +} + +#openSearchEnginePreferences.extraMargin { + margin-block-start: 24px; +} diff --git a/browser/themes/shared/preferences/relay-logo.svg b/browser/themes/shared/preferences/relay-logo.svg new file mode 100644 index 0000000000..bf99230a1f --- /dev/null +++ b/browser/themes/shared/preferences/relay-logo.svg @@ -0,0 +1,7 @@ + + + + diff --git a/browser/themes/shared/preferences/search-arrow-indicator.svg b/browser/themes/shared/preferences/search-arrow-indicator.svg new file mode 100644 index 0000000000..8ac83df260 --- /dev/null +++ b/browser/themes/shared/preferences/search-arrow-indicator.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + diff --git a/browser/themes/shared/preferences/search-bar.svg b/browser/themes/shared/preferences/search-bar.svg new file mode 100644 index 0000000000..0f592bf476 --- /dev/null +++ b/browser/themes/shared/preferences/search-bar.svg @@ -0,0 +1,25 @@ + + + + + + + + + + diff --git a/browser/themes/shared/preferences/search.css b/browser/themes/shared/preferences/search.css new file mode 100644 index 0000000000..65651e5583 --- /dev/null +++ b/browser/themes/shared/preferences/search.css @@ -0,0 +1,100 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +.searchBarImage { + height: 36px; + width: 631px; + -moz-context-properties: fill, stroke; + fill: var(--in-content-box-background); + stroke: var(--in-content-box-border-color); +} + +.searchBarImage, +#searchShowSearchTermCheckbox { + margin-inline-start: 33px; +} + +.searchBarImage:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.searchBarHiddenImage { + list-style-image: url("chrome://browser/skin/preferences/no-search-bar.svg"); +} + +#searchBarShownRadio { + /* Allow a little visual space to separate the radio from the image above it. */ + margin-top: 10px; +} + +.searchBarShownImage { + list-style-image: url("chrome://browser/skin/preferences/search-bar.svg"); +} + +#defaultEngine, +#defaultPrivateEngine { + margin-inline-start: 0; +} + +#defaultEngine::part(icon), +#defaultPrivateEngine::part(icon) { + height: 16px; + width: 16px; +} + +/* work around a display: none in Linux's menu.css, see bug 1112310 */ +.searchengine-menuitem > .menu-iconic-left { + display: -moz-box; +} + +#engineList { + margin: .5em 0; +} + +#engineList treechildren::-moz-tree-image(engineName) { + margin-inline: 1px 10px; + width: 16px; + height: 16px; +} + +#engineList treechildren::-moz-tree-drop-feedback { + background-color: SelectedItem; + width: 10000px; /* 100% doesn't work; 10k is hopefully larger than any window + we may have, overflow isn't visible. */ + height: 2px; + margin-inline-start: 0; +} + +#engineList treechildren::-moz-tree-image(bookmarks), +#engineList treechildren::-moz-tree-image(tabs), +#engineList treechildren::-moz-tree-image(history) { + -moz-context-properties: fill; +} + +/* Local search shortcut icon colors. These should match the values in + urlbarView.inc.css. */ +#engineList treechildren::-moz-tree-image(bookmarks) { + fill: #0060df; /* Blue-60 */ +} +#engineList treechildren::-moz-tree-image(tabs) { + fill: #008eaf; /* Teal-70 */ +} +#engineList treechildren::-moz-tree-image(history), +#engineList treechildren::-moz-tree-image(bookmarks, selected), +#engineList treechildren::-moz-tree-image(tabs, selected) { + fill: currentColor; +} + +#engineShown { + min-width: 26px; +} + +#addEnginesBox { + margin-bottom: 1em; +} + +#removeEngineButton, +#restoreDefaultSearchEngines { + margin-inline: 0; +} diff --git a/browser/themes/shared/preferences/siteDataSettings.css b/browser/themes/shared/preferences/siteDataSettings.css new file mode 100644 index 0000000000..c793fb740a --- /dev/null +++ b/browser/themes/shared/preferences/siteDataSettings.css @@ -0,0 +1,64 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/** + * Site Data - Settings dialog + */ +#sitesList { + height: 20em; +} + +/* Show selected items in high contrast mode. */ +#sitesList > richlistitem[selected] { + outline: 1px solid transparent; +} + +#sitesList > richlistitem > hbox, +.item-box > label { + -moz-box-flex: 1; +} + +.item-box { + padding: 5px 8px; + -moz-box-align: center; + width: 50px; +} + +/** + * Confirmation dialog of removing sites selected + */ +#SiteDataRemoveSelectedDialog { + -moz-box-layout: flex; + padding: 16px; + min-width: 50px; +} + +#SiteDataRemoveSelectedDialog.single-entry { + min-height: 8em; +} + +#SiteDataRemoveSelectedDialog.single-entry .multi-site { + display: none; +} + +#SiteDataRemoveSelectedDialog.multi-entry #removalList { + max-height: 20em; +} + +#SiteDataRemoveSelectedDialog > dialog { + padding: 0; /* override dialog.css */ +} + +#contentContainer { + font-size: 1.2em; + margin-bottom: 10px; +} + +.question-icon { + margin: 6px; +} + +#removing-label { + font-weight: bold; +} diff --git a/browser/themes/shared/preferences/vpn-logo.svg b/browser/themes/shared/preferences/vpn-logo.svg new file mode 100644 index 0000000000..5300d3bf5c --- /dev/null +++ b/browser/themes/shared/preferences/vpn-logo.svg @@ -0,0 +1,4 @@ + + diff --git a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css new file mode 100644 index 0000000000..3af748c9cc --- /dev/null +++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css @@ -0,0 +1,458 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/in-content/info-pages.css"); + +@media not (prefers-contrast) { +html.private { + --in-content-page-color: white; + --in-content-text-color: white; + --in-content-page-background: #25003e; + --in-content-link-color-hover: white; + --in-content-link-color-active: white; + --in-content-banner-background: #f9f9fe; + --in-content-banner-text-color: #0c0c0d; + --in-content-button-background-hover: rgba(12,12,13,.1); + --in-content-button-background-active: rgba(12,12,13,.15); +} +} + +/** + * When the showBanner class is applied, the banner is displayed at the top + * of the page, and we need to adjust the padding, so that the banner is + * spread across the full page width. + */ +body.showBanner { + padding: 0 0 40px; + min-height: 0; +} + +.showBanner > .showPrivate { + padding: 40px 48px 0; +} + +a:link { + color: inherit; + text-decoration: underline; +} + +a:link:hover { + color: inherit; +} + +.container { + max-width: 768px; +} + +p { + line-height: 1.5em; +} + +.logo-and-wordmark { + align-items: center; + display: flex; + justify-content: center; + margin-bottom: 50px; +} + +.logo { + /* The new private browsing logo, shown for + "browser.privatebrowsing.enable-new-logo" == true */ + background: url("chrome://branding/content/about-logo-private.png") no-repeat center center; + background-size: 96px; + display: inline-block; + height: 96px; + width: 96px; +} + +.logo[legacy] { + /* The legacy private browsing logo, shown for + "browser.privatebrowsing.enable-new-logo" == false */ + background-image: url("chrome://branding/content/about-logo.png"); +} + +@media (min-resolution: 2x) { + .logo { + background-image: url('chrome://branding/content/about-logo-private@2x.png'); + } + .logo[legacy] { + background-image: url('chrome://branding/content/about-logo@2x.png'); + } +} + +.wordmark { + display: inline-block; + background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center; + background-size: 172px; + margin-inline-start: 15px; + -moz-context-properties: fill; + fill: currentColor; + height: 96px; + width: 172px; +} + +.search-inner-wrapper { + display: flex; + height: 48px; + padding: 0 22px; + min-width: 70vw; +} + +.promo-image-large { + margin-inline-end: 6px; + min-width: 160px; +} + +.promo-image-small { + display: none; +} + +.promo.top { + background: rgba(255, 255, 255, .2); + position: absolute; + top: 0; + left: 0; + right: 0; + border-bottom: 1px solid rgba(255, 255, 255, .3); +} + +.promo.top .promo-image-large { + min-width: 100px; + margin-inline: 6px; +} + +.promo.top ~ .container { + margin-top: 120px; +} + +@media (min-width: 764px) { + .search-inner-wrapper { + min-width: 680px; + } + + .promo-image-large { + margin-inline-end: 36px; + min-width: 200px; + } + + .promo-image-small { + display: block; + } + + .promo.top { + padding: 10px 22%; + } + + .promo.top .promo-image-large { + min-width: 120px; + } + + .promo.top .vpn-promo { + margin: 10px 0; + } +} + +@media (max-height: 780px) { + /* On screens with not enough height we need to push down the content + * to make room for the banner */ + .promo.top ~ .container { + margin-top: 140px; + } +} + +.search-handoff-button, +.search-handoff-button:active, +.search-handoff-button:enabled:hover:active { + background: #fff var(--newtab-search-icon) 12px center no-repeat; + background-size: 24px; + border: solid 1px rgba(249, 249, 250, 0.2); + border-radius: 3px; + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15); + cursor: text; + font-size: 15px; + font-weight: normal; + margin: 0; + padding-block: 0; + padding-inline: 46px 48px; + position: relative; + opacity: 1; + width: 100%; + -moz-context-properties: fill; + fill: rgba(12, 12, 13, 0.4); +} + +.search-handoff-button.focused:not(.disabled) { + border: solid 1px #0060df; + box-shadow: 0 0 0 1px #0060df, 0 0 0 4px rgba(0, 96, 223, 0.3); +} + +.search-handoff-button.disabled { + opacity: 0.5; + box-shadow: none; +} + +.search-handoff-button:dir(rtl), +.search-handoff-button:active:dir(rtl), +.search-handoff-button:enabled:hover:active:dir(rtl) { + background-position-x: right 12px; +} + +.search-inner-wrapper .search-handoff-button:hover, +.search-inner-wrapper .search-handoff-button:hover:active { + background-color: #fff; + color: inherit; +} + +.search-handoff-button.focused:not(.disabled) .fake-caret { + display: block; +} + +.fake-editable:focus { + outline: none; + caret-color: transparent; +} + +.fake-editable { + border: 0; + height: 100%; + top: 0; + inset-inline-start: 0; + opacity: 0; + padding: 0; + position: absolute; + width: 100%; +} + +.fake-textbox { + color: rgb(12, 12, 13); + opacity: 0.54; + text-align: start; +} + +@keyframes caret-animation { + to { + visibility: hidden; + } +} + +.fake-caret { + animation: caret-animation 1.3s steps(5, start) infinite; + background-color: rgb(12, 12, 13); + display: none; + inset-inline-start: 47px; + height: 17px; + position: absolute; + top: 16px; + width: 1px; +} + +@media (prefers-contrast) { + .fake-caret { + background-color: ButtonText; + } +} + +.search-banner { + width: 100%; + background-color: var(--in-content-banner-background); + color: var(--in-content-banner-text-color); +} + +.banner-body { + margin: auto; + width: max-content; + background-image: url("chrome://global/skin/icons/settings.svg"); + background-position: left 0 top 50px; + background-repeat: no-repeat; + background-size: 32px; + letter-spacing: -.2px; + padding: 50px 0; + padding-inline-start: 44px; +} + +.banner-body:dir(rtl) { + background-position-x: right; +} + +.banner-body h1 { + font-size: 18px; + font-weight: bold; + color: var(--in-content-banner-text-color); + line-height: 1em; + margin: 7px 0; +} + +.banner-body p { + font-size: 15px; + line-height: 1em; + margin: 4px 0; +} + +.info { + margin-top: 64px; + background-color: rgba(0, 0, 0, 0.2); + background-image: url("chrome://global/skin/icons/indicator-private-browsing.svg"); + background-position: left 32px top 20px; + background-repeat: no-repeat; + background-size: 32px; + border: 1px solid transparent; + border-radius: 6px; + letter-spacing: -0.2px; + padding: 20px; + padding-inline-start: 76px; +} + +.info:dir(rtl) { + background-position-x: right 32px; +} + +.info h1, +.promo h1 { + font-size: 18px; + font-weight: bold; + line-height: 28px; +} + +.info p { + margin-top: 0; + font-size: 15px; + line-height: 25px; +} + +.info #info-title + p { + margin-top: 15px; +} + +.search-banner-close-button { + float: inline-end; + /* min-width and min-height override values set on button elements. */ + min-width: 28px; + min-height: 28px; + /* Forcing height and line-height ensure the button hover is displayed correctly + as a square box (and focus box). No text gets displayed here so that's ok. */ + height: 28px; + line-height: 0; + margin: 16px; + padding: 0; + background-color: inherit; + border: 0; +} + +.search-banner-close-image { + -moz-context-properties: fill; + fill: currentColor; + width: 22px; +} + +.promo { + text-align: center; + align-items: center; +} + +.promo-visible { + display: flex; + border: 1px solid transparent; + border-radius: 6px; + background-color: rgba(0, 0, 0, 0.2); +} + +.promo-dismiss { + padding: 10px; + min-width: 16px; + min-height: 16px; + display: inline flow-root; + background: url("chrome://global/skin/icons/close.svg") center no-repeat; + cursor: pointer; + -moz-context-properties: fill; + fill: currentColor; + position: relative; + top: -90px; +} + +@media not (prefers-contrast) { + .promo-dismiss { + opacity: 0.6; + } + + .promo-dismiss:hover { + background-color: color-mix(in srgb, currentColor 10%, transparent) !important; + } + + .promo-dismiss:hover:active { + background-color: color-mix(in srgb, currentColor 20%, transparent) !important; + } +} + +.promo-content { + width: 100%; +} + +.promo-image-large img { + width: 100%; +} + +.promo-cta { + display: flex; + justify-content: space-between; + align-items: center; +} + +.promo-cta .primary { + padding-block: 11px; + margin: 8px 0; + font-weight: 600; + cursor: pointer; +} + +.promo.bottom .promo-cta { + display: unset; +} + +.promo.bottom h1 { + margin-bottom: 1em; +} + +.promo a { + color: inherit; + text-decoration: underline; + flex: 1; +} + +.promo.top a, +.promo.below-search a { + flex: unset; +} + +.promo.top, +.promo.below-search { + text-align: start; +} + +.promo.below-search { + padding: 25px 22px 10px; + margin-top: 25px; +} + +.promo.bottom { + margin-top: 30px; +} + +.promo.bottom .promo-image-small { + margin-top: 40px; +} + +.promo.bottom .promo-image-small img { + height: 40px; +} + +.promo.top > .promo-content { + padding: 10px 6px; +} + +.promo-link { + margin: 0; + cursor: pointer; + color: var(--in-content-link-color-active); + text-decoration: underline; +} diff --git a/browser/themes/shared/privatebrowsing/favicon.svg b/browser/themes/shared/privatebrowsing/favicon.svg new file mode 100644 index 0000000000..9a6acd3b16 --- /dev/null +++ b/browser/themes/shared/privatebrowsing/favicon.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/profiler-popup-backdrop.png b/browser/themes/shared/profiler-popup-backdrop.png new file mode 100644 index 0000000000..675b49a234 Binary files /dev/null and b/browser/themes/shared/profiler-popup-backdrop.png differ diff --git a/browser/themes/shared/protections/breached-password.svg b/browser/themes/shared/protections/breached-password.svg new file mode 100644 index 0000000000..d080744740 --- /dev/null +++ b/browser/themes/shared/protections/breached-password.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/protections/new-feature.svg b/browser/themes/shared/protections/new-feature.svg new file mode 100644 index 0000000000..00ae3843a6 --- /dev/null +++ b/browser/themes/shared/protections/new-feature.svg @@ -0,0 +1,10 @@ + + + + + + + + diff --git a/browser/themes/shared/protections/resolved-breach-gray.svg b/browser/themes/shared/protections/resolved-breach-gray.svg new file mode 100644 index 0000000000..0bfda007fa --- /dev/null +++ b/browser/themes/shared/protections/resolved-breach-gray.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/protections/resolved-breach.svg b/browser/themes/shared/protections/resolved-breach.svg new file mode 100644 index 0000000000..274cd570c8 --- /dev/null +++ b/browser/themes/shared/protections/resolved-breach.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/search/search-engine-placeholder.png b/browser/themes/shared/search/search-engine-placeholder.png new file mode 100644 index 0000000000..bff355bf48 Binary files /dev/null and b/browser/themes/shared/search/search-engine-placeholder.png differ diff --git a/browser/themes/shared/search/search-engine-placeholder@2x.png b/browser/themes/shared/search/search-engine-placeholder@2x.png new file mode 100644 index 0000000000..1565fc55df Binary files /dev/null and b/browser/themes/shared/search/search-engine-placeholder@2x.png differ diff --git a/browser/themes/shared/search/search-indicator-badge-add.svg b/browser/themes/shared/search/search-indicator-badge-add.svg new file mode 100644 index 0000000000..eef74b2c72 --- /dev/null +++ b/browser/themes/shared/search/search-indicator-badge-add.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/searchbar.css b/browser/themes/shared/searchbar.css new file mode 100644 index 0000000000..9afb692ddd --- /dev/null +++ b/browser/themes/shared/searchbar.css @@ -0,0 +1,180 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +.searchbar-engine-image { + width: 16px; + height: 16px; + list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +.search-one-offs:not([hidden]) { + display: block; + width: 100%; +} + +.search-panel-one-offs-header { + display: block; +} + +.search-panel-header { + font-weight: normal; + margin: 0; +} + +.search-panel-header > label { + margin-top: 2px; + margin-bottom: 1px; + opacity: .6; +} + +/* Make the contrast stronger in dark mode */ +:root[lwt-toolbar-field-focus-brighttext] .search-panel-header > label { + opacity: 1; +} + +/** + * The borders of the various elements are specified as follows. + * + * The current engine always has a bottom border. + * The search results never have a border. + * + * When the search results are not collapsed: + * - The elements underneath the search results all have a top border. + * + * When the search results are collapsed: + * - The elements underneath the search results all have a bottom border. + */ + +.search-panel-current-engine { + -moz-box-align: center; + border-top: none !important; + padding-inline: 8px; +} + +.search-panel-one-offs:not([hidden]), +.search-panel-one-offs-container { + display: flex; + flex-direction: row; + flex-grow: 1; +} + +.search-panel-one-offs { + margin: 0 !important; + /* Bug 1108841: prevent font-size from affecting the layout */ + line-height: 0; + flex-wrap: wrap; +} + +.searchbar-engine-one-off-item { + appearance: none; + display: -moz-inline-box; + background-color: transparent; + border: none; + min-width: 32px; + height: 32px; + margin-inline-end: 8px; + margin-block: 0; + padding: 0; + color: inherit; + border-radius: var(--toolbarbutton-border-radius); +} + +@media (-moz-platform: windows) { + .searchbar-engine-one-off-item:focus-visible { + outline: none; + } +} + +/* We don't handle `:active` because it doesn't work on the search or settings + buttons due to event.preventDefault() in SearchOneOffs._on_mousedown(). */ +.searchbar-engine-one-off-item:not([selected]):hover { + background-color: var(--autocomplete-popup-hover-background); + color: inherit; +} + +.searchbar-engine-one-off-item[selected] { + background-color: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); +} + +.searchbar-engine-one-off-item > .button-box > .button-text { + display: none; +} + +.searchbar-engine-one-off-item > .button-box > .button-icon { + margin-inline: 0; + width: 16px; + height: 16px; +} + +.search-panel-tree { + background: transparent; + color: inherit; +} + +.search-panel-tree > .autocomplete-richlistitem { + padding: 1px 3px; +} + +.search-panel-tree > .autocomplete-richlistitem:hover { + background-color: var(--autocomplete-popup-hover-background); +} + +.search-panel-tree > .autocomplete-richlistitem > .ac-type-icon { + display: -moz-box; + width: 14px; + height: 14px; + margin-inline-end: 7px; +} + +.search-panel-tree > .autocomplete-richlistitem[originaltype="fromhistory"] > .ac-type-icon { + list-style-image: url("chrome://browser/skin/history.svg"); + -moz-context-properties: fill; + fill: currentColor; + fill-opacity: 0.6; +} + +.search-panel-tree > .autocomplete-richlistitem[originaltype="fromhistory"][selected] > .ac-type-icon { + fill-opacity: 1; +} + +.searchbar-separator { + appearance: none; + margin: var(--panel-separator-margin); + padding: 0; + border: 0; + border-top: 1px solid var(--autocomplete-popup-separator-color); + color: inherit; +} + +.search-panel-tree[collapsed=true] + .searchbar-separator { + display: none; +} + +.search-setting-button { + max-height: 32px; + align-self: end; + margin-inline: 0; +} + +.search-setting-button > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/settings.svg"); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: var(--urlbar-icon-fill-opacity); +} + +@media (-moz-platform: windows-win10) { + #PopupSearchAutoComplete { + --panel-border-radius: var(--arrowpanel-border-radius); + } +} + +@media (-moz-platform: macos) { + #PopupSearchAutoComplete { + border-radius: 4px; + } +} diff --git a/browser/themes/shared/setDesktopBackground.css b/browser/themes/shared/setDesktopBackground.css new file mode 100644 index 0000000000..768bc7c949 --- /dev/null +++ b/browser/themes/shared/setDesktopBackground.css @@ -0,0 +1,23 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +html|canvas#screen { + border-style: solid; + border-width: 12px 11px; + border-image: url("chrome://browser/skin/monitor-border.png") 12 11 stretch; +} + +#monitor-base { + list-style-image: url("chrome://browser/skin/monitor-base.png"); +} + +html|p#preview-unavailable { + margin: 12px 11px; + text-align: center; + color: #9B2423; + font-weight: bold; +} diff --git a/browser/themes/shared/sidebar.css b/browser/themes/shared/sidebar.css new file mode 100644 index 0000000000..fb879bc73f --- /dev/null +++ b/browser/themes/shared/sidebar.css @@ -0,0 +1,135 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +#sidebar-box { + --sidebar-background-color: Field; + --sidebar-text-color: FieldText; + background-color: var(--sidebar-background-color); + color: var(--sidebar-text-color); + text-shadow: none; +} + +#sidebar-header { + font-size: 1.333em; + padding: 8px; + border-bottom: 1px solid var(--sidebar-border-color); +} + +#sidebar-spacer { + /* To ensure the button doesn't expand unnecessarily for short labels, the + spacer should significantly out-flex the button. */ + -moz-box-flex: 1000; +} + +#sidebar { + -moz-box-flex: 1; +} + +@media not (-moz-platform: linux) { + /* We don't let the splitter overlap the sidebar on Linux since the sidebar's + scrollbar is too narrow on Linux. */ + .sidebar-splitter { + appearance: none; + border: 0 solid; + border-inline-end-width: 1px; + border-color: var(--sidebar-border-color); + min-width: 1px; + width: 4px; + background-image: none !important; + background-color: transparent; + margin-inline-start: -4px; + position: relative; + } + + #sidebar-box[positionend] + .sidebar-splitter { + border-inline-width: 1px 0; + margin-inline: 0 -4px; + } +} + +#sidebar-throbber[loading="true"] { + list-style-image: url("chrome://global/skin/icons/loading.png"); +} + +@media (min-resolution: 2dppx) { + #sidebar-throbber[loading="true"] { + list-style-image: url("chrome://global/skin/icons/loading@2x.png"); + width: 16px; + } +} + +#sidebar-title { + margin: 0; + padding: 0; + padding-inline: 8px 4px; + -moz-box-flex: 1; +} + +#sidebar-switcher-arrow { + -moz-context-properties: fill; + fill: currentColor; + opacity: 0.8; +} + +#sidebar-switcher-arrow { + list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg); + width: 12px; + height: 12px; +} + +#sidebar-switcher-target { + appearance: none; + color: inherit; + margin-inline-end: 4px; + border-radius: var(--toolbarbutton-border-radius); + border: 1px solid transparent; + padding: 2px 4px; + -moz-box-flex: 1; +} + +#sidebar-switcher-target:hover { + background-color: var(--toolbarbutton-hover-background); +} + +#sidebar-switcher-target:hover:active, +#sidebar-switcher-target.active { + background-color: var(--toolbarbutton-active-background); +} + +#sidebar-switcher-target:focus-visible, +#sidebar-close:focus-visible { + outline: var(--focus-outline); + outline-offset: 0; +} + +#sidebarMenu-popup .subviewbutton { + min-width: 190px; +} + +toolbarseparator + #sidebar-extensions-separator { + display: none; +} + +#sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { + list-style-image: url(chrome://browser/skin/bookmark.svg); + -moz-context-properties: fill; + fill: currentColor; + opacity: 0.8; +} + +#sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { + list-style-image: url(chrome://browser/skin/history.svg); + -moz-context-properties: fill; + fill: currentColor; + opacity: 0.8; +} + +#sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { + list-style-image: url(chrome://browser/skin/synced-tabs.svg); + -moz-context-properties: fill; + fill: currentColor; + opacity: 0.8; +} diff --git a/browser/themes/shared/spotlight.css b/browser/themes/shared/spotlight.css new file mode 100644 index 0000000000..8f09943238 --- /dev/null +++ b/browser/themes/shared/spotlight.css @@ -0,0 +1,85 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* Whether this is actually still required + * is not totally clear, but better to be safe than sorry: + * + * For some reason SubDialog browser sizing can result in scrollbars, so just + * hide the horizontal scrollbar that would have then required vertical + * scrollbar. This should be okay as we wrap content for this fixed width + * dialog unless the window is actually narrow and really does need + * horizontal scrollbars. */ +@media (min-width: 544px) { +body { + overflow-x: hidden; +} +} + +body { + padding: 20px 40px; + /* Keep as multiple of 4px. Match min-width media query above + padding. */ + width: 464px; +} + +#dialog-content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + text-align: center; +} + +.logo { + width: 100px; + height: 100px; + object-fit: contain; + margin-bottom: 8px; +} + +#title { + font-weight: 500; + font-size: 26px; + margin-bottom: 0; + white-space: pre-wrap; +} + +#content { + font-weight: 400; + font-size: 13px; + margin-block: 10px 18px; +} + +#learn-more-toggle::after { + background: url("chrome://global/skin/icons/arrow-right.svg") center / 12px no-repeat; + content: ""; + -moz-context-properties: fill; + fill: currentColor; + padding-inline: .5em; +} + +#learn-more-toggle:dir(rtl)::after { + background-image: url("chrome://global/skin/icons/arrow-left.svg"); +} + +#learn-more-toggle[aria-expanded="true"]::after { + background-image: url("chrome://global/skin/icons/arrow-down.svg"); +} + +#learn-more-toggle[aria-expanded="false"] + .expanded { + visibility: hidden; +} + +.expanded { + margin-bottom: 0; +} + +#primary { + font-size: 13px; +} + +#secondary { + /* make the font look like the mock */ + font-size: 13px; + padding: 4px; +} diff --git a/browser/themes/shared/swipe-gesture-icons/history-swipe-arrow.svg b/browser/themes/shared/swipe-gesture-icons/history-swipe-arrow.svg new file mode 100644 index 0000000000..db91aff0c8 --- /dev/null +++ b/browser/themes/shared/swipe-gesture-icons/history-swipe-arrow.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + diff --git a/browser/themes/shared/syncedtabs/sidebar.css b/browser/themes/shared/syncedtabs/sidebar.css new file mode 100644 index 0000000000..406bfc71e4 --- /dev/null +++ b/browser/themes/shared/syncedtabs/sidebar.css @@ -0,0 +1,371 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* These styles are intended to mimic XUL trees and the XUL search box. */ + +html { + height: 100%; + box-sizing: border-box; +} + +body { + height: 100%; + margin: 0; + font: message-box; + background-color: Field; + color: FieldText; + user-select: none; +} + +/* The content-container holds the non-scrollable header and the scrollable + content area. +*/ +.content-container { + display: flex; + flex-flow: column; + height: 100%; +} + +/* The content header is not scrollable */ +.content-header { + flex: 0 1 auto; +} + +/* The main content area is scrollable and fills the rest of the area */ +.content-scrollable { + flex: 1 1 auto; + overflow: auto; +} + +.emptyListInfo { + cursor: default; + padding: 3em 1em; + text-align: center; +} + +.list, +.item-tabs-list { + display: flex; + flex-flow: column; + flex-grow: 1; +} + +.item.client { + opacity: 1; + max-height: unset; + display: unset; +} + +.item.client.closed .item-tabs-list { + display: none; +} + +.item { + display: inline-block; + opacity: 1; + flex: 1; + min-width: 0; + white-space: nowrap; + overflow: hidden; + outline: none; +} + +.item.selected > .item-title-container { + background-color: -moz-cellhighlight; + color: -moz-cellhighlighttext; +} + +.item.selected:focus > .item-title-container { + background-color: SelectedItem; + color: SelectedItemText; +} + +.item.client .item-twisty-container { + min-width: 12px; + height: 12px; + background-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 1; +} + +.item.client.closed .item-twisty-container { + background-image: url("chrome://global/skin/icons/arrow-right-12.svg"); +} + +.item.client.closed .item-twisty-container:dir(rtl) { + background-image: url("chrome://global/skin/icons/arrow-left-12.svg"); +} + +.client .item.tab > .item-title-container { + padding-inline-start: 35px; +} + +.item.tab > .item-title-container { + padding-inline-start: 20px; +} + +.item.client[clientType] > .item-title-container > .item-icon-container { + -moz-context-properties: fill; + fill: currentColor; +} + +.item.client[clientType=phone] > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/device-phone.svg"); +} + +.item.client[clientType=tablet] > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/device-tablet.svg"); +} + +.item.client[clientType=desktop] > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/device-desktop.svg"); +} + +.item.client[clientType=tv] > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/device-tv.svg"); +} + +.item.client[clientType=vr] > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/device-vr.svg"); +} + +.item.tab > .item-title-container > .item-icon-container { + background-image: url("chrome://global/skin/icons/defaultFavicon.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +.item-icon-container { + min-width: 16px; + max-width: 16px; + min-height: 16px; + max-height: 16px; + margin-inline: 5px; + background-size: 16px 16px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +.item-title-container { + display: flex; + flex-flow: row; + overflow: hidden; + flex-grow: 1; + align-items: center; + padding: 4px; +} + +.item-title { + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + margin: 1px 0 0; + margin-inline-end: 6px; + line-height: 1.3; + cursor: default; +} + +.item[hidden] { + opacity: 0; + max-height: 0; + transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms; +} + +.item.empty .item-title-container { + color: #aeaeae; +} + +.client .item.empty > .item-title-container { + padding-inline-start: 35px; +} + +.sync-state > p { + padding-inline: 10px; +} + +.text-link { + color: rgb(0, 149, 221); + cursor: pointer; +} + +.text-link:hover { + text-decoration: underline; +} + +.text-link, +.text-link:focus { + margin: 0; + padding: 0; + border: 0; +} + +.deck .sync-state { + display: none; + opacity: 0; + transition: opacity 1.5s; + border-top: 1px solid #bdbdbd; +} + +.deck .sync-state.tabs-container { + border-top: 0; +} + +.deck .sync-state.selected { + display: unset; + opacity: 100; +} + +.deck .syncIllustration, +.deck .syncIllustrationIssue { + height: 174px; + margin: 38px 8px 15px; + background-position: center; + background-repeat: no-repeat; + background-size: contain; +} + +.deck .syncIllustration { + background-image: url(chrome://browser/skin/fxa/sync-illustration.svg); +} + +.deck .syncIllustrationIssue { + background-image: url(chrome://browser/skin/fxa/sync-illustration-issue.svg); +} + +.deck .instructions { + text-align: center; + color: GrayText; + padding: 0 11px; + max-width: 15em; + margin: 0 auto; +} + +body[lwt-sidebar] .deck .instructions { + color: inherit; + opacity: .6; +} + +.deck .button { + display: block; + background-color: #0060df; + color: white; + border: 0; + border-radius: 2px; + margin: 15px auto; + padding: 8px; + text-shadow: none; + width: calc(100% - 22px); + max-width: 200px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.deck .button:hover { + background-color: #003eaa; +} + +.deck .button:hover:active { + background-color: #002275; +} + +.sidebar-search-container { + display: flex; + padding: 4px; +} + +.sidebar-search-container:not(.selected) { + display: none; +} + +.tabsFilter { + flex-grow: 1; +} + +/* Themed sidebars */ + +body[lwt-sidebar] { + background-color: var(--lwt-sidebar-background-color); + color: var(--lwt-sidebar-text-color); + scrollbar-color: rgba(204,204,204,.5) rgba(230,230,235,.5); +} + +body[lwt-sidebar-brighttext] { + scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3); +} + +body[lwt-sidebar] .item.selected > .item-title-container { + background-color: hsla(0,0%,80%,.3); + color: inherit; +} + +body[lwt-sidebar-brighttext] .item.selected > .item-title-container { + background-color: rgba(249,249,250,.1); +} + +body[lwt-sidebar-highlight] .item.selected:focus > .item-title-container { + background-color: var(--lwt-sidebar-highlight-background-color); + color: var(--lwt-sidebar-highlight-text-color); +} + +/* Apply crisp rendering for favicons at exactly 2dppx resolution */ +@media (resolution: 2dppx) { + .tabs-container .item-tabs-list .item-icon-container { + image-rendering: -moz-crisp-edges; + } +} + +/* Platform specific styling */ +@media (-moz-platform: macos) { + body { + /* let the -moz-appearance of the sidebar shine through */ + background-color: transparent; + } + + .item-title-container { + box-sizing: border-box; + align-items: center; + height: 24px; + font-size: 12px; + } + + .item-title { + margin: 0; + } + + body:not([lwt-sidebar]) .item.selected:not(:focus) > .item-title-container { + appearance: auto; + -moz-default-appearance: -moz-mac-source-list-selection; + -moz-font-smoothing-background-color: -moz-mac-source-list-selection; + } + + body:not([lwt-sidebar-highlight]) .item.selected:focus > .item-title-container { + appearance: auto; + -moz-default-appearance: -moz-mac-active-source-list-selection; + -moz-font-smoothing-background-color: -moz-mac-active-source-list-selection; + } +} + +@media (-moz-platform: windows) { + .client .item.tab > .item-title-container { + padding-inline-start: 26px; + } + + .item.tab > .item-title-container { + padding-inline-start: 14px; + } + + .item-icon-container { + min-width: 16px; + max-width: 16px; + min-height: 16px; + max-height: 16px; + margin-inline-end: 5px; + background-size: 16px 16px; + background-repeat: no-repeat; + background-position: center; + } +} diff --git a/browser/themes/shared/tab-list-tree.css b/browser/themes/shared/tab-list-tree.css new file mode 100644 index 0000000000..ed60f26df1 --- /dev/null +++ b/browser/themes/shared/tab-list-tree.css @@ -0,0 +1,50 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* This file is used by both about:sessionrestore and about:welcomeback */ + +.tab-list-tree-container { + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: center; +} + +treechildren::-moz-tree-image(icon), +treechildren::-moz-tree-image(noicon) { + -moz-context-properties: fill; + fill: currentColor; + padding-inline-end: 2px; + margin: 0 2px; + width: 16px; + height: 16px; +} + +treechildren::-moz-tree-image(noicon) { + list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); +} + +treechildren::-moz-tree-image(container, noicon) { + list-style-image: url("chrome://browser/skin/window.svg"); +} + +treechildren::-moz-tree-image(checked), +treechildren::-moz-tree-image(partial) { + -moz-context-properties: fill, stroke; + fill: var(--in-content-accent-color); +} + +treechildren::-moz-tree-image(checked, selected), +treechildren::-moz-tree-image(partial, selected) { + fill: var(--in-content-item-selected-text); + stroke: var(--in-content-item-selected); +} + +treechildren::-moz-tree-image(checked) { + list-style-image: url("chrome://global/skin/icons/check.svg"); +} + +treechildren::-moz-tree-image(partial) { + list-style-image: url("chrome://global/skin/icons/check-partial.svg"); +} diff --git a/browser/themes/shared/tabbrowser/connecting.png b/browser/themes/shared/tabbrowser/connecting.png new file mode 100644 index 0000000000..e564fb5708 Binary files /dev/null and b/browser/themes/shared/tabbrowser/connecting.png differ diff --git a/browser/themes/shared/tabbrowser/connecting@2x.png b/browser/themes/shared/tabbrowser/connecting@2x.png new file mode 100644 index 0000000000..97e2b2eb67 Binary files /dev/null and b/browser/themes/shared/tabbrowser/connecting@2x.png differ diff --git a/browser/themes/shared/tabbrowser/crashed.svg b/browser/themes/shared/tabbrowser/crashed.svg new file mode 100644 index 0000000000..85f3d85141 --- /dev/null +++ b/browser/themes/shared/tabbrowser/crashed.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/browser/themes/shared/tabbrowser/hourglass.svg b/browser/themes/shared/tabbrowser/hourglass.svg new file mode 100644 index 0000000000..4687846c91 --- /dev/null +++ b/browser/themes/shared/tabbrowser/hourglass.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/tabbrowser/loading-burst.svg b/browser/themes/shared/tabbrowser/loading-burst.svg new file mode 100644 index 0000000000..cd4aeec314 --- /dev/null +++ b/browser/themes/shared/tabbrowser/loading-burst.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/tabbrowser/loading.svg b/browser/themes/shared/tabbrowser/loading.svg new file mode 100644 index 0000000000..1bc5843781 --- /dev/null +++ b/browser/themes/shared/tabbrowser/loading.svg @@ -0,0 +1,98 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/tabbrowser/pendingpaint.png b/browser/themes/shared/tabbrowser/pendingpaint.png new file mode 100644 index 0000000000..1a97feeeb3 Binary files /dev/null and b/browser/themes/shared/tabbrowser/pendingpaint.png differ diff --git a/browser/themes/shared/tabbrowser/tab-audio-blocked-small.svg b/browser/themes/shared/tabbrowser/tab-audio-blocked-small.svg new file mode 100644 index 0000000000..14a59803f3 --- /dev/null +++ b/browser/themes/shared/tabbrowser/tab-audio-blocked-small.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/tabbrowser/tab-audio-muted-small.svg b/browser/themes/shared/tabbrowser/tab-audio-muted-small.svg new file mode 100644 index 0000000000..89795c27fc --- /dev/null +++ b/browser/themes/shared/tabbrowser/tab-audio-muted-small.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/tabbrowser/tab-audio-playing-small.svg b/browser/themes/shared/tabbrowser/tab-audio-playing-small.svg new file mode 100644 index 0000000000..68ee22e398 --- /dev/null +++ b/browser/themes/shared/tabbrowser/tab-audio-playing-small.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/tabbrowser/tab-connecting.png b/browser/themes/shared/tabbrowser/tab-connecting.png new file mode 100644 index 0000000000..3f948c37cb Binary files /dev/null and b/browser/themes/shared/tabbrowser/tab-connecting.png differ diff --git a/browser/themes/shared/tabbrowser/tab-connecting@2x.png b/browser/themes/shared/tabbrowser/tab-connecting@2x.png new file mode 100644 index 0000000000..4bffc9e063 Binary files /dev/null and b/browser/themes/shared/tabbrowser/tab-connecting@2x.png differ diff --git a/browser/themes/shared/tabbrowser/tab-drag-indicator.svg b/browser/themes/shared/tabbrowser/tab-drag-indicator.svg new file mode 100644 index 0000000000..d195802641 --- /dev/null +++ b/browser/themes/shared/tabbrowser/tab-drag-indicator.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/tabbrowser/tab-loading-inverted.png b/browser/themes/shared/tabbrowser/tab-loading-inverted.png new file mode 100644 index 0000000000..029dccfe94 Binary files /dev/null and b/browser/themes/shared/tabbrowser/tab-loading-inverted.png differ diff --git a/browser/themes/shared/tabbrowser/tab-loading-inverted@2x.png b/browser/themes/shared/tabbrowser/tab-loading-inverted@2x.png new file mode 100644 index 0000000000..45166f3226 Binary files /dev/null and b/browser/themes/shared/tabbrowser/tab-loading-inverted@2x.png differ diff --git a/browser/themes/shared/tabbrowser/tab-loading.png b/browser/themes/shared/tabbrowser/tab-loading.png new file mode 100644 index 0000000000..02117c589e Binary files /dev/null and b/browser/themes/shared/tabbrowser/tab-loading.png differ diff --git a/browser/themes/shared/tabbrowser/tab-loading@2x.png b/browser/themes/shared/tabbrowser/tab-loading@2x.png new file mode 100644 index 0000000000..779ecc4344 Binary files /dev/null and b/browser/themes/shared/tabbrowser/tab-loading@2x.png differ diff --git a/browser/themes/shared/tabs.css b/browser/themes/shared/tabs.css new file mode 100644 index 0000000000..b02787360b --- /dev/null +++ b/browser/themes/shared/tabs.css @@ -0,0 +1,790 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + --tab-min-height: 36px; + --inline-tab-padding: 8px; + /* Value for --in-content-page-background in in-content/common.inc.css */ + --tabpanel-background-color: #f9f9fa; + --tab-border-radius: 4px; + --tab-shadow-max-size: 6px; + --tab-block-margin: 4px; + /* --tabpanel-background-color matches $in-content-page-background in newtab + (browser/components/newtab/content-src/styles/_variables.scss) */ + --tabpanel-background-color: #F9F9FB; + --tab-attention-icon-color: var(--lwt-tab-attention-icon-color, rgb(42,195,162)); +} + +#tabbrowser-tabpanels browser[type=content] { + color-scheme: env(-moz-content-preferred-color-scheme); +} + +@media (-moz-content-prefers-color-scheme: dark) { + :root { + /* --tabpanel-background-color matches $in-content-page-background in newtab + (browser/components/newtab/content-src/styles/_variables.scss) */ + --tabpanel-background-color: #2B2A33; + } +} + +:root[privatebrowsingmode=temporary] { + /* Value for --in-content-page-background in aboutPrivateBrowsing.css. + !important overrides the direct setting of this variable in + ThemeVariableMap.sys.mjs when the user has a theme that defines + ntp_background. */ + --tabpanel-background-color: #25003e !important; +} + +:root[uidensity=compact] { + --tab-min-height: 29px; +} + +:root[uidensity=touch] { + --tab-min-height: 41px; +} + +#tabbrowser-tabs { + --tab-min-width: 76px; + --tab-loading-fill: #0A84FF; + --tab-overflow-pinned-tabs-width: 0px; + padding-inline: var(--tab-overflow-pinned-tabs-width) 0; +} + +#tabbrowser-tabpanels { + appearance: none; + padding: 0; + color-scheme: unset; + background-color: var(--tabpanel-background-color); +} + +#tabbrowser-tabs, +#tabbrowser-arrowscrollbox, +#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { + min-height: var(--tab-min-height); +} + +.tab-background, +.tab-stack { + min-height: inherit; +} + +#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox::part(scrollbox) { + /* Add padding to match the shadow's blur radius so the + shadow doesn't get clipped when either the first or + last tab is selected */ + padding-inline: var(--tab-shadow-max-size); +} + +#tabbrowser-arrowscrollbox::part(scrollbox-clip) { + /* Needed to prevent tabstrip from growing as wide as the sum of the tabs' + page-title widths when emulating XUL with modern flexbox. */ + contain: inline-size; +} + +.tabbrowser-tab { + appearance: none; + background-color: transparent; + color-scheme: unset; + border-radius: 0; + border-width: 0; + margin: 0; + padding: 0 2px; + -moz-box-align: stretch; + /* Needed so that overflowing content overflows towards the end rather than + getting centered. That prevents tab opening animation from looking off at + the start, see bug 1759221. */ + -moz-box-pack: start; + overflow: clip; + /* Needed to avoid clipping the tab-background shadow, which has a 4px blur + * (we only have 2px padding in the inline direction) */ + overflow-clip-margin: 2px; + min-height: var(--tab-min-height); +} + +/* tabbrowser-tab keyboard focus */ +.keyboard-focused-tab > .tab-stack > .tab-background, +.tabbrowser-tab:focus:not([aria-activedescendant]) > .tab-stack > .tab-background { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +.tab-content { + padding: 0 var(--inline-tab-padding); + min-width: 0; +} + +:root:not([uidensity=compact]) .tab-content[pinned] { + padding: 0 10px; +} + +@media (prefers-reduced-motion: no-preference) { + .tab-loading-burst { + border-radius: inherit; + position: relative; + overflow: hidden; + } + + .tab-loading-burst::before { + position: absolute; + content: ""; + /* We set the width to be a percentage of the tab's width so that we can use + the `scale` transform to scale it up to the full size of the tab when the + burst occurs. We also need to set the margin-inline-start so that the + center of the burst matches the center of the favicon. */ + width: 5%; + height: 100%; + /* Center the burst over the .tab-loading-burst; it's 9px from the edge thanks + to .tab-content, plus 8px more since .tab-loading-burst is 16px wide. */ + margin-inline-start: calc(17px - 2.5%); + } + + .tab-loading-burst[pinned]::before { + /* This is like the margin-inline-start rule above, except that icons for + pinned tabs are 12px from the edge. */ + margin-inline-start: calc(20px - 2.5%); + } + + .tab-loading-burst[bursting]::before { + background-image: url("chrome://browser/skin/tabbrowser/loading-burst.svg"); + background-position: center center; + background-size: 100% auto; + background-repeat: no-repeat; + animation: tab-burst-animation 375ms cubic-bezier(0,0,.58,1); + -moz-context-properties: fill; + fill: var(--tab-loading-fill); + } + + .tab-loading-burst[bursting][notselectedsinceload]::before { + animation-name: tab-burst-animation-light; + } + + @keyframes tab-burst-animation { + 0% { + opacity: 0.4; + transform: scale(1); + } + 100% { + opacity: 0; + transform: scale(40); + } + } + + @keyframes tab-burst-animation-light { + 0% { + opacity: 0.2; + transform: scale(1); + } + 100% { + opacity: 0; + transform: scale(40); + } + } +} + +/* Width/height & margins apply on tab icon stack children */ +.tab-throbber-tabslist, +.tab-throbber, +.tab-icon-pending, +.tab-icon-image, +.tab-sharing-icon-overlay, +.tab-icon-overlay { + height: 16px; + width: 16px; +} + +.tab-throbber:not([pinned]), +.tab-icon-pending:not([pinned]), +.tab-icon-image:not([pinned]), +.tab-sharing-icon-overlay:not([pinned]), +.tab-icon-overlay:not([pinned]) { + margin-inline-end: 5.5px; +} + +@media (prefers-reduced-motion: reduce) { + .tab-throbber[busy] { + background-image: url("chrome://browser/skin/tabbrowser/hourglass.svg"); + background-position: center; + background-repeat: no-repeat; + -moz-context-properties: fill; + fill: currentColor; + opacity: 0.4; + } + + .tab-throbber[progress] { + opacity: 0.8; + } +} + +@media (prefers-reduced-motion: no-preference) { + :root[sessionrestored] .tab-throbber[busy] { + position: relative; + overflow: hidden; + } + + :root[sessionrestored] .tab-throbber[busy]::before { + content: ""; + position: absolute; + background-image: url("chrome://browser/skin/tabbrowser/loading.svg"); + background-position: left center; + background-repeat: no-repeat; + width: 480px; + height: 100%; + animation: tab-throbber-animation 1.05s steps(30) infinite; + -moz-context-properties: fill; + + /* XXX: It would be nice to transition between the "connecting" color and the + "loading" color (see the `.tab-throbber[progress]::before` rule below); + however, that currently forces main thread painting. When this is fixed + (after WebRender lands), we can do something like + `transition: fill 0.333s, opacity 0.333s;` */ + + fill: currentColor; + opacity: 0.7; + } + + :root[sessionrestored] .tab-throbber[busy]:-moz-locale-dir(rtl)::before { + animation-name: tab-throbber-animation-rtl; + } + + @keyframes tab-throbber-animation { + 0% { transform: translateX(0); } + 100% { transform: translateX(-100%); } + } + + @keyframes tab-throbber-animation-rtl { + 0% { transform: translateX(0); } + 100% { transform: translateX(100%); } + } + + :root[sessionrestored] .tab-throbber[progress]::before { + fill: var(--tab-loading-fill); + opacity: 1; + } + + #TabsToolbar[brighttext] .tab-throbber[progress]:not([selected=true])::before { + fill: var(--lwt-tab-loading-fill-inactive, #84c1ff); + } +} + +.tab-icon-image { + -moz-context-properties: fill; + fill: currentColor; +} + +.tab-icon-image:not([src]), +.tab-icon-image:-moz-broken { + content: url("chrome://global/skin/icons/defaultFavicon.svg"); +} + +.tab-icon-image[sharing]:not([selected]), +.tab-sharing-icon-overlay { + animation: 3s linear tab-sharing-icon-pulse infinite; +} + +@keyframes tab-sharing-icon-pulse { + 0%, 16.66%, 83.33%, 100% { + opacity: 0; + } + 33.33%, 66.66% { + opacity: 1; + } +} + +.tab-icon-image[sharing]:not([selected]) { + animation-delay: -1.5s; +} + +.tab-sharing-icon-overlay { + position: relative; + -moz-context-properties: fill; + fill: rgb(224, 41, 29); +} + +.tab-sharing-icon-overlay[sharing="camera"] { + list-style-image: url("chrome://browser/skin/notification-icons/camera.svg"); +} + +.tab-sharing-icon-overlay[sharing="microphone"] { + list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg"); +} + +.tab-sharing-icon-overlay[sharing="screen"] { + list-style-image: url("chrome://browser/skin/notification-icons/screen.svg"); +} + +.tab-icon-overlay { + width: 16px; + height: 16px; + position: relative; +} + +.tab-icon-overlay:not([crashed]):is([pinned], [sharing]) { + top: -5.5px; + inset-inline-end: -6px; + z-index: 1; /* Overlay tab title */ + padding: 2px; +} + +:root[uidensity=compact] .tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay), +#tabbrowser-tabs[secondarytext-unsupported] .tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay), +:root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) .tab-icon-overlay[indicator-replaces-favicon], +:root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover .tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay) { + opacity: 0; +} + +.tab-icon-overlay[soundplaying]:not([crashed]), +.tab-icon-overlay[muted]:not([crashed]), +.tab-icon-overlay[activemedia-blocked]:not([crashed]) { + border-radius: 10px; + -moz-context-properties: fill, fill-opacity, stroke; + fill: currentColor; + stroke: transparent; +} + +.tab-icon-overlay:is([pinned], [sharing]):not([crashed]) { + stroke: var(--tab-icon-overlay-stroke, white); + color: var(--tab-icon-overlay-fill, black); +} + +.tab-icon-overlay:is([pinned], [sharing]):not([crashed])[soundplaying]:hover, +.tab-icon-overlay:is([pinned], [sharing]):not([crashed])[muted]:hover, +.tab-icon-overlay:is([pinned], [sharing]):not([crashed])[activemedia-blocked]:hover { + background-color: var(--tab-icon-overlay-stroke, white); +} + +#TabsToolbar[brighttext] .tab-icon-overlay:is([pinned], [sharing]):not([crashed]) { + stroke: var(--tab-icon-overlay-stroke, black); + color: var(--tab-icon-overlay-fill, white); +} + +#TabsToolbar[brighttext] .tab-icon-overlay:is([pinned], [sharing]):not([crashed])[soundplaying]:hover, +#TabsToolbar[brighttext] .tab-icon-overlay:is([pinned], [sharing]):not([crashed])[muted]:hover, +#TabsToolbar[brighttext] .tab-icon-overlay:is([pinned], [sharing]):not([crashed])[activemedia-blocked]:hover { + background-color: var(--tab-icon-overlay-stroke, black); +} + +.tab-icon-overlay[indicator-replaces-favicon] { + border-radius: 2px; + fill-opacity: 0.75; + padding: 2px; +} +.tab-icon-overlay[indicator-replaces-favicon]:hover { + background-color: color-mix(in srgb, currentColor 15%, transparent); + fill-opacity: 0.95; +} +.tab-icon-overlay[indicator-replaces-favicon]:hover:active { + background-color: color-mix(in srgb, currentColor 30%, transparent); +} + +.tab-icon-overlay[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); +} + +.tab-icon-overlay[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); +} + +.tab-icon-overlay[activemedia-blocked] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg"); +} + +.tab-icon-overlay[crashed] { + list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg"); +} + +@media (prefers-reduced-motion: reduce) { + .tab-throbber-tabslist[busy] { + list-style-image: url("chrome://browser/skin/tabbrowser/hourglass.svg"); + -moz-context-properties: fill; + fill: currentColor; + opacity: 0.4; + } + + .tab-throbber-tabslist[progress] { + opacity: 0.8; + } +} + +@media (prefers-reduced-motion: no-preference) { + .tab-throbber-tabslist[busy] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-connecting.png"); + } + + .tab-throbber-tabslist[progress] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading.png"); + } + + :root[lwt-popup-brighttext] .tab-throbber-tabslist[progress]:not([selected=true]) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading-inverted.png"); + } + + @media (min-resolution: 1.1dppx) { + .tab-throbber-tabslist[busy] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-connecting@2x.png"); + } + + .tab-throbber-tabslist[progress] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading@2x.png"); + } + + :root[lwt-popup-brighttext] .tab-throbber-tabslist[progress]:not([selected=true]) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading-inverted@2x.png"); + } + } +} + +.tab-label { + margin-inline: 0; +} + +.tab-close-button { + -moz-context-properties: fill, fill-opacity; + margin-inline-end: calc(var(--inline-tab-padding) / -2); + width: 24px; + height: 24px; + padding: 7px; + border-radius: var(--tab-border-radius); +} + +/* The following rulesets allow showing more of the tab title */ +.tabbrowser-tab:not([labelendaligned],:hover) > .tab-stack > .tab-content > .tab-close-button { + padding-inline-start: 0; + width: 17px; +} + +.tabbrowser-tab[visuallyselected=true]:not([labelendaligned]):hover, +#tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true],[labelendaligned]):hover { + --tab-label-mask-size: 1em; +} + + +#tabbrowser-tabs[secondarytext-unsupported] .tab-secondary-label { + display: none; +} + +#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container { + height: 2.7em; +} + +.tab-secondary-label { + font-size: .75em; + opacity: .8; +} + +.tab-icon-sound-label { + /* Set height back to equivalent of parent's 1em based + on the .tab-icon-sound having a reduced font-size */ + height: 1.3333em; + white-space: nowrap; + margin: 0; +} + +.tab-secondary-label[soundplaying-scheduledremoval]:not([muted]):not(:hover) { + transition: opacity .3s linear var(--soundplaying-removal-delay); + opacity: 0; +} + +/* Tab Overflow */ +#tabbrowser-arrowscrollbox:not([scrolledtostart])::part(overflow-start-indicator), +#tabbrowser-arrowscrollbox:not([scrolledtoend])::part(overflow-end-indicator) { + width: 7px; /* The width is the sum of the inline margins */ + background-image: radial-gradient(ellipse at bottom, + rgba(0,0,0,0.1) 0%, + rgba(0,0,0,0.1) 7.6%, + rgba(0,0,0,0) 87.5%); + background-repeat: no-repeat; + background-position: -3px; + border-left: .5px solid rgba(255,255,255,.2); + pointer-events: none; + position: relative; + border-bottom: .5px solid transparent; +} + +#tabbrowser-arrowscrollbox:not([scrolledtostart])::part(overflow-start-indicator) { + margin-inline: -.5px -6.5px; +} + +#tabbrowser-arrowscrollbox:not([scrolledtoend])::part(overflow-end-indicator) { + margin-inline: -6.5px -.5px; +} + +#tabbrowser-arrowscrollbox:-moz-locale-dir(rtl)::part(overflow-start-indicator), +#tabbrowser-arrowscrollbox:-moz-locale-dir(ltr)::part(overflow-end-indicator) { + transform: scaleX(-1); +} + +#tabbrowser-arrowscrollbox[scrolledtostart]::part(overflow-start-indicator), +#tabbrowser-arrowscrollbox[scrolledtoend]::part(overflow-end-indicator) { + opacity: 0; +} + +#tabbrowser-arrowscrollbox::part(overflow-start-indicator), +#tabbrowser-arrowscrollbox::part(overflow-end-indicator) { + transition: opacity 150ms ease; +} + +.tabbrowser-tab:not([visuallyselected=true], [multiselected]), +.tabbrowser-tab:-moz-lwtheme { + color: inherit; +} + +.tab-background { + border-radius: var(--tab-border-radius); + margin-block: var(--tab-block-margin); +} + +/* Selected tab and tab hover */ + +#TabsToolbar #firefox-view-button:hover:not([open]) > .toolbarbutton-icon, +.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) { + background-color: color-mix(in srgb, currentColor 11%, transparent); +} + +#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon, +#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { + box-shadow: 0 0 4px rgba(0,0,0,.4); +} + +#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon, +.tab-background:is([selected], [multiselected]) { + background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + background-origin: border-box; + background-repeat: repeat-x; +} + +.tabbrowser-tab:is([selected], [multiselected]):-moz-lwtheme { + color: var(--lwt-tab-text, var(--toolbar-color)); +} + +@media (prefers-contrast) { + #TabsToolbar #firefox-view-button:is([open], :hover):not(:focus-visible) > .toolbarbutton-icon, + .tab-background[selected], + .tabbrowser-tab:hover > .tab-stack > .tab-background { + outline: 1px solid currentColor; + outline-offset: -1px; + } +} + +@media not (prefers-contrast) { + #TabsToolbar #firefox-view-button[open]:not(:focus-visible) > .toolbarbutton-icon:-moz-lwtheme, + .tab-background[selected]:not([multiselected=true]):-moz-lwtheme { + outline: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor)); + outline-offset: -1px; + } +} + +/* Add a focus outline on top of the multiselected tabs, with the currently selected + tab getting a slightly thicker outline. */ +.tab-background[multiselected=true] { + outline: 1px solid var(--focus-outline-color); + outline-offset: -1px; +} + +.tab-background[multiselected=true][selected=true] { + outline-width: 2px; + outline-offset: -2px; +} + +/* + * LightweightThemeConsumer will set the current lightweight theme's header + * image to the lwt-header-image variable, used in each of the following rulesets. + */ +#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon:-moz-lwtheme, +#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected=true]:-moz-lwtheme, +#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected=true]:-moz-lwtheme { + background-attachment: scroll, scroll, fixed; + background-color: transparent; + background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), + linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), + var(--lwt-header-image, none); + background-position: 0 0, 0 0, right top; + background-repeat: repeat-x, repeat-x, no-repeat; + background-size: auto 100%, auto 100%, auto auto; +} + +/* Pinned tabs */ + +toolbar[brighttext] { + --tab-attention-icon-color: var(--lwt-tab-attention-icon-color, rgb(84,255,189)); +} + +.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), +.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]), +#firefox-view-button[attention] { + background-image: radial-gradient(circle, var(--tab-attention-icon-color), var(--tab-attention-icon-color) 2px, transparent 2px); + background-position: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); + background-size: 4px 4px; + background-repeat: no-repeat; +} + +.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned], [selected="true"]) { + background-position-x: left 14px; +} + +.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned], [selected="true"]):-moz-locale-dir(rtl) { + background-position-x: right 14px; +} + +#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { + /* Add a gap between the last pinned tab and the first visible tab */ + margin-inline-start: 12px !important; /* .tabbrowser-tab sets margin: 0 !important; */ +} + +.tab-label[attention]:not([selected="true"]) { + font-weight: bold; +} + +/* Tab drag and drop */ + +.tab-drop-indicator { + width: 12px; + margin-inline-start: -12px; + background: url(chrome://browser/skin/tabbrowser/tab-drag-indicator.svg) no-repeat center; + position: relative; + z-index: 2; +} + +/* Drag space */ + +.titlebar-spacer[type="pre-tabs"], +.titlebar-spacer[type="post-tabs"] { + width: 40px; +} + +@media (max-width: 500px) { + .titlebar-spacer[type="post-tabs"] { + display: none; + } +} + +/* Firefox View button and menu item */ + +:root:not([privatebrowsingmode=temporary], [firefoxviewhidden]) :is(toolbarbutton, toolbarpaletteitem) + #tabbrowser-tabs, +:root[privatebrowsingmode=temporary]:not([firefoxviewhidden]) :is( + toolbarbutton:not(#firefox-view-button), + toolbarpaletteitem:not(#wrapper-firefox-view-button) +) + #tabbrowser-tabs { + border-inline-start: 1px solid color-mix(in srgb, currentColor 25%, transparent); + padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 2px); + margin-inline-start: 2px; +} + +:root[privatebrowsingmode=temporary] :is(#firefox-view-button, #menu_openFirefoxView) { + display: none; +} + +toolbar:not(#TabsToolbar) #firefox-view-button { + background-position: top 25% right 25%; +} + +:is(#widget-overflow-mainView, #widget-overflow-fixed-list) #firefox-view-button { + background-position: top 25% left 22px; +} + +/* RTL notification dot */ +toolbar:not(#TabsToolbar) #firefox-view-button:-moz-locale-dir(rtl) { + background-position-x: left 25%; +} + +:is(#widget-overflow-mainView, #widget-overflow-fixed-list) #firefox-view-button:-moz-locale-dir(rtl) { + background-position-x: right 22px; +} + +/* Tab bar scroll arrows */ + +#tabbrowser-arrowscrollbox::part(scrollbutton-up), +#tabbrowser-arrowscrollbox::part(scrollbutton-down) { + fill: var(--toolbarbutton-icon-fill); +} + +/* New tab button */ + +#tabs-newtab-button, +#TabsToolbar #new-tab-button { + list-style-image: url(chrome://global/skin/icons/plus.svg); +} + +/* All tabs button and menupopup */ + +#alltabs-button { + list-style-image: url(chrome://global/skin/icons/arrow-down.svg); +} + +#tabbrowser-tabs[hiddensoundplaying] ~ #alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: transparent url(chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg); + box-shadow: none; + /* Match the color of the button, rather than label default. */ + color: inherit; + display: block; + -moz-context-properties: fill, fill-opacity, stroke; + fill: currentColor; + stroke: transparent; + /* "!important" is necessary to override the rule in toolbarbutton.css */ + margin: -7px 0 0 !important; + margin-inline-end: -4px !important; + min-width: 12px; + min-height: 12px; +} + +/* The list of tabs is in its own panel-subview-body which will scroll. We don't + want any padding below the scrollbar, so remove the bottom padding + from the outer panel-subview-body. */ +#allTabsMenu-allTabsView > .panel-subview-body { + padding-bottom: 0; +} + +#allTabsMenu-allTabsView-tabs { + padding-top: 0; +} + +.all-tabs-item { + margin-inline: var(--arrowpanel-menuitem-margin-inline); + border-radius: var(--arrowpanel-menuitem-border-radius); +} + +.all-tabs-item:hover { + background-color: var(--panel-item-hover-bgcolor); +} + +.all-tabs-item:hover:active { + background-color: var(--panel-item-active-bgcolor); +} + +.all-tabs-item[selected] { + font-weight: bold; +} + +.all-tabs-item > toolbarbutton { + margin: 0; + /* Since the background is set on the item, don't set it on the children. */ + background-color: transparent !important; +} + +.all-tabs-button { + list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); +} + +.all-tabs-secondary-button { + opacity: .8; + -moz-context-properties: fill; + fill: currentColor; +} + +.all-tabs-secondary-button[soundplaying] { + list-style-image: url(chrome://global/skin/media/audio.svg); +} + +.all-tabs-secondary-button[muted] { + list-style-image: url(chrome://global/skin/media/audio-muted.svg); +} + +.all-tabs-secondary-button:hover { + opacity: 1; +} + +.all-tabs-secondary-button > label { + display: none !important; /* override panelUI-shared.css */ +} diff --git a/browser/themes/shared/toolbar-drag-indicator.svg b/browser/themes/shared/toolbar-drag-indicator.svg new file mode 100644 index 0000000000..ebcef29690 --- /dev/null +++ b/browser/themes/shared/toolbar-drag-indicator.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/toolbarbutton-icons.css b/browser/themes/shared/toolbarbutton-icons.css new file mode 100644 index 0000000000..c8cc0e9a1b --- /dev/null +++ b/browser/themes/shared/toolbarbutton-icons.css @@ -0,0 +1,486 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + --toolbarbutton-icon-fill-attention: AccentColor; + --warning-icon-bgcolor: #FFA436; +} + +:root:-moz-lwtheme { + --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,97,224)); +} + +:root[lwt-popup-brighttext] panel, +toolbar[brighttext]:-moz-lwtheme { + --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,221,255)); + --warning-icon-bgcolor: #FFBD4F; +} + +:root, +/* Pick up the panel- and toolbar-specific --toolbarbutton-icon-fill-attention + values from above. */ +panel, +toolbar { + --toolbar-field-icon-fill-attention: var(--lwt-toolbar-field-icon-fill-attention, var(--toolbarbutton-icon-fill-attention)); +} + +.toolbarbutton-animatable-box, +.toolbarbutton-1 { + color: inherit; + -moz-context-properties: fill, fill-opacity; + fill: var(--toolbarbutton-icon-fill); +} + +.toolbarbutton-animatable-box { + display: block; + position: absolute; + overflow: hidden; + z-index: 2; + pointer-events: none; +} + +.toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + animation-fill-mode: forwards; + animation-iteration-count: 1; + list-style-image: none; + /* Height must be equal to height of toolbarbutton padding-box. --toolbarbutton-height + is calculated and set during runtime by BrowserUIUtils.setToolbarButtonHeightProperty() + before the animation begins. */ + height: var(--toolbarbutton-height); +} + +#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image, +#stop-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image, +#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image, +#PlacesChevron:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#PanelUI-menu-button:-moz-locale-dir(rtl) > .toolbarbutton-badge-stack > .toolbarbutton-icon { + scale: -1 1; +} + +#back-button { + list-style-image: url("chrome://browser/skin/back.svg"); +} + +#forward-button { + list-style-image: url("chrome://browser/skin/forward.svg"); +} + +/* The animations for the reload-button and stop-button are disabled + outside of the nav-bar due to bug 1382894. */ +:is(#reload-button, #stop-button) > .toolbarbutton-animatable-box { + display: none; +} +#nav-bar-customization-target > #stop-reload-button > :is(#reload-button, #stop-button) > .toolbarbutton-animatable-box { + display: block; +} + +#stop-reload-button[animate] > #reload-button > .toolbarbutton-icon, +#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-icon { + fill: transparent; +} + +@keyframes stop-to-reload { + /* pause on the first frame (step 0) for 6 frames of time */ + from { + /* 0 */ + transform: translateX(0); + } + /* resume at 7/35 and animate across the next 14 frames */ + 17.14% { + animation-timing-function: steps(14); + transform: translateX(calc(0 * -20px)); + } + /* pause on the last frame for the remainder of the duration */ + 54.29% { + transform: translateX(calc(14 * -20px)); + } + to { + /* end state for animation: */ + transform: translateX(calc(var(--anim-frames) * -20px)); + } +} + +@keyframes reload-to-stop { + /* pause on the first frame (step 0) for 6 frames of time */ + from { + /* 0 */ + transform: translateX(0); + animation-timing-function: steps(12); + } + /* pause at 13/15 for 3 frames */ + 86.67% { + transform: translateX(calc(var(--anim-frames) * -20px)); + } + to { + /* end state for animation: */ + transform: translateX(calc(var(--anim-frames) * -20px)); + } +} + +#stop-reload-button[animate] > #reload-button, +#stop-reload-button[animate] > #stop-button { + position: relative; +} + +#nav-bar-customization-target :where(#reload-button, #stop-button) > .toolbarbutton-icon { + padding: calc(var(--toolbarbutton-inner-padding) + 1px) var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 1px ) !important; /* The animation is 18px but the other icons are 16px, lower it by 1px so it is vertically centered */ +} + +#reload-button > .toolbarbutton-animatable-box, +#stop-button > .toolbarbutton-animatable-box { + top: calc(50% - 9px); /* Vertically center the 20px tall animatable image, which is 1px higher than other icons */ + /* Since .toolbarbutton-icon uses a different width than the animatable-box, + we need to set a padding relative to the difference in widths. */ + margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 20px) / 2); + width: 20px; /* Width of each frame within the SVG sprite */ + height: 20px; /* Height of each frame within the SVG sprite */ +} + +#stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + background-image: url("chrome://browser/skin/stop-to-reload.svg"); + /* + transition from stop icon to reload icon + pause at frame 0 for 6 ticks, + pause at frame 15 for 16 ticks + total 35 steps*/ + --anim-frames: 14; + --anim-steps: calc(var(--anim-frames) + 21); /* Add steps for doing the pause at the start and end */ + width: calc(20px * (var(--anim-frames) + 1)); + height: 20px; + + /* initial state for animation */ + transform: translateX(0); +} + +#stop-reload-button[animate] > #reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + animation-name: stop-to-reload; +} + +#reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + animation-duration: calc(var(--anim-steps) * 16.667ms); +} + +#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + background-image: url("chrome://browser/skin/reload-to-stop.svg"); + /* + transition from reload icon to stop icon + pause at end for 3 frames of time + pause at ... + total 15 steps*/ + --anim-frames: 12; + --anim-steps: calc(var(--anim-frames) + 3); /* Add steps for doing the pause at the start and end */ + width: calc(20px * (var(--anim-frames) + 1)); + height: 20px; + + /* initial state for animation */ + transform: translateX(0); +} + +#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + animation-name: reload-to-stop; + animation-duration: calc(var(--anim-steps) * 16.667ms); +} + +#reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + animation-timing-function: steps(15); + animation-duration: 0.25s; +} + +#reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + transform: translateX(-700px); +} + +#reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + transform: translateX(-300px); +} + +#reload-button { + list-style-image: url("chrome://global/skin/icons/reload.svg"); +} + +#stop-button { + list-style-image: url("chrome://global/skin/icons/close.svg"); +} + +#home-button { + list-style-image: url("chrome://browser/skin/home.svg"); +} + +#bookmarks-toolbar-button, +#bookmarks-toolbar-placeholder { + list-style-image: url("chrome://browser/skin/bookmarks-toolbar.svg"); +} + +#bookmarks-menu-button { + list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); +} + +#history-panelmenu { + list-style-image: url("chrome://browser/skin/history.svg"); +} + +#downloads-button { + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} + +#add-ons-button { + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} + +#open-file-button { + list-style-image: url("chrome://browser/skin/open.svg"); +} + +#screenshot-button { + list-style-image: url("chrome://browser/skin/screenshot.svg"); +} + +#save-page-button { + list-style-image: url("chrome://browser/skin/save.svg"); +} + +#sync-button { + list-style-image: url("chrome://browser/skin/synced-tabs.svg"); +} + +#characterencoding-button { + list-style-image: url("chrome://browser/skin/characterEncoding.svg"); +} + +#new-window-button { + list-style-image: url("chrome://browser/skin/window.svg"); +} + +#new-tab-button { + list-style-image: url("chrome://browser/skin/new-tab.svg"); +} + +#privatebrowsing-button { + list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); +} + +#find-button { + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); +} + +#print-button { + list-style-image: url("chrome://global/skin/icons/print.svg"); +} + +#fullscreen-button { + list-style-image: url("chrome://browser/skin/fullscreen.svg"); +} + +#developer-button { + list-style-image: url("chrome://global/skin/icons/developer.svg"); +} + +#profiler-button-button > .toolbarbutton-icon { + list-style-image: url("chrome://devtools/skin/images/tool-profiler.svg"); +} + +#profiler-button-button:not(.profiler-active) > image { + transform: scaleX(-1); +} + +#profiler-button-button.profiler-active > image { + fill: #0060df; + fill-opacity: 1; + background-color: #0060df33; +} + +#profiler-button-button.profiler-active:hover > image { + background-color: #0060df22; +} + +#profiler-button-button.profiler-paused > image { + opacity: 0.4; +} + +#preferences-button { + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} + +#PanelUI-menu-button { + list-style-image: url("chrome://browser/skin/menu.svg"); +} + +#PanelUI-menu-button[badge-status="update-available"], +#PanelUI-menu-button[badge-status="update-downloading"], +#PanelUI-menu-button[badge-status="update-manual"], +#PanelUI-menu-button[badge-status="update-other-instance"], +#PanelUI-menu-button[badge-status="update-restart"], +#PanelUI-menu-button[badge-status="update-unsupported"], +#PanelUI-menu-button[badge-status="addon-alert"], +#PanelUI-menu-button[badge-status="fxa-needs-authentication"] { + list-style-image: url("chrome://browser/skin/menu-badged.svg"); +} + +#cut-button { + list-style-image: url("chrome://browser/skin/edit-cut.svg"); +} + +#copy-button { + list-style-image: url("chrome://global/skin/icons/edit-copy.svg"); +} + +#paste-button { + list-style-image: url("chrome://browser/skin/edit-paste.svg"); +} + +#zoom-out-button { + list-style-image: url("chrome://browser/skin/zoom-out.svg"); +} + +#zoom-in-button { + list-style-image: url("chrome://global/skin/icons/plus.svg"); +} + +#PlacesChevron, +#nav-bar-overflow-button { + list-style-image: url("chrome://global/skin/icons/chevron.svg"); +} + +#nav-bar-overflow-button[animate] > .toolbarbutton-icon { + fill: transparent; +} + +@keyframes overflow-animation { + from { + transform: translateX(0); + } + from { + transform: translateX(-832px); + } +} + +#nav-bar-overflow-button > .toolbarbutton-animatable-box { + visibility: hidden; + top: calc(50% - 8px); /* Vertically center the 16px tall animatable image */ + /* Since .toolbarbutton-icon uses a different width than the animatable box, + we need to set a padding relative to the difference in widths. */ + margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 16px) / 2); + width: 16px; /* Width of each frame within the SVG sprite */ + height: 16px; /* Height of each frame within the SVG sprite */ + -moz-context-properties: fill, stroke; + fill: var(--toolbarbutton-icon-fill); + stroke: var(--toolbarbutton-icon-fill-attention); +} +#nav-bar-overflow-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + background-image: url("chrome://browser/skin/chevron-animation.svg"); + width: 848px; + height: 16px; + transform: translateX(0); +} + +#nav-bar-overflow-button[animate] > .toolbarbutton-animatable-box { + visibility: visible; +} +#nav-bar-overflow-button[animate] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + animation-name: overflow-animation; + animation-timing-function: steps(52); + animation-duration: calc(52 * 16.667ms); +} + +#unified-extensions-button { + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} + +#email-link-button { + list-style-image: url("chrome://browser/skin/mail.svg"); +} + +#sidebar-button { + list-style-image: url("chrome://browser/skin/sidebars-right.svg"); +} + +#sidebar-button:-moz-locale-dir(ltr):not([positionend]), +#sidebar-button:-moz-locale-dir(rtl)[positionend] { + list-style-image: url("chrome://browser/skin/sidebars.svg"); +} + +#panic-button { + list-style-image: url("chrome://browser/skin/forget.svg"); +} + +#panic-button[open] { + fill: rgb(213, 32, 20); +} + +toolbar[brighttext] #panic-button[open] { + fill: #ff848b; +} + +#library-button { + list-style-image: url("chrome://browser/skin/library.svg"); +} + +#save-to-pocket-button { + list-style-image: url("chrome://global/skin/icons/pocket-outline.svg"); + fill: var(--toolbarbutton-icon-fill); +} + +#save-to-pocket-button[open="true"], +#save-to-pocket-button[pocketed="true"] { + list-style-image: url("chrome://global/skin/icons/pocket.svg"); + fill: #ef4056; +} + +/* ----- BOOKMARK BUTTONS ----- */ + +.bookmark-item { + list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +toolbarbutton.bookmark-item { + -moz-context-properties: fill, fill-opacity; + fill: var(--toolbarbutton-icon-fill); +} + +.bookmark-item[container] { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +.bookmark-item[container][query] { + list-style-image: url("chrome://browser/skin/places/folder-smart.svg"); +} + +.bookmark-item[query][tagContainer] { + list-style-image: url("chrome://browser/skin/places/tag.svg"); + -moz-image-region: auto; +} + +.bookmark-item[query][dayContainer] { + list-style-image: url("chrome://browser/skin/history.svg"); + -moz-image-region: auto; +} + +.bookmark-item[query][hostContainer] { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +#whats-new-menu-button { + list-style-image: url("chrome://global/skin/icons/whatsnew.svg"); +} + +#ion-button { + list-style-image: url("chrome://browser/skin/ion.svg"); +} + +#import-button { + list-style-image: url("chrome://browser/skin/import.svg"); +} + +#firefox-view-button { + list-style-image: url("chrome://branding/content/icon32.png"); +} diff --git a/browser/themes/shared/toolbarbuttons.css b/browser/themes/shared/toolbarbuttons.css new file mode 100644 index 0000000000..0a51e9a19e --- /dev/null +++ b/browser/themes/shared/toolbarbuttons.css @@ -0,0 +1,350 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + --toolbar-start-end-padding: 8px; + --toolbarbutton-outer-padding: 2px; + --toolbarbutton-inner-padding: 8px; + + --toolbarbutton-hover-background: var(--button-hover-bgcolor); + --toolbarbutton-active-background: var(--button-active-bgcolor); + + --toolbarseparator-color: color-mix(in srgb, currentColor 60%, transparent); + + --bookmark-block-padding: 4px; + + /* This default value of --toolbarbutton-height is defined to prevent + CSS errors for an invalid variable. The value should not get used, + as a more specific value should be set when the value will be used. */ + --toolbarbutton-height: 0; +} + +:root[uidensity=compact] { + --toolbarbutton-outer-padding: 3px; + --toolbarbutton-inner-padding: 6px; + --bookmark-block-padding: 1px; +} + +:root[uidensity=touch] { + --toolbarbutton-inner-padding: 9px; + --bookmark-block-padding: 7px; +} + +#TabsToolbar { + /* Override the inner padding to ensure the dimensions match the tabs, but also making sure + different types of buttons (combined-buttons-dropmarker or text) still look correct. */ + --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2); +} + +/* ::::: primary toolbar buttons ::::: */ + +#tabbrowser-arrowscrollbox[scrolledtostart=true]::part(scrollbutton-up), +#tabbrowser-arrowscrollbox[scrolledtoend=true]::part(scrollbutton-down), +:root:not([customizing]) .toolbarbutton-1[disabled=true], +/* specialcase the overflow and the hamburger button so they show up disabled in customize mode. */ +#nav-bar-overflow-button[disabled=true], +#PanelUI-menu-button[disabled=true] { + opacity: 0.4; +} + +.toolbarbutton-1 > .toolbarbutton-icon { + margin-inline-end: 0 !important; +} + +.toolbarbutton-1 > .toolbarbutton-icon, +.toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon { + width: 16px; +} + +.toolbarbutton-combined-buttons-dropmarker > .toolbarbutton-icon { + width: 12px; +} + +#navigator-toolbox:not(:hover) #tabbrowser-arrowscrollbox:not([highlight])::part(scrollbutton-down) { + transition: 1s background-color ease-out; +} + +#tabbrowser-arrowscrollbox[highlight]::part(scrollbutton-down) { + background-color: SelectedItem; +} + +toolbar .toolbarbutton-1 { + appearance: none; + margin: 0; + padding: 0 var(--toolbarbutton-outer-padding); + -moz-box-pack: center; +} + +#TabsToolbar .toolbarbutton-1 { + margin: 0 0 var(--tabs-navbar-shadow-size); +} + +#tabbrowser-arrowscrollbox::part(scrollbutton-up), +#tabbrowser-arrowscrollbox::part(scrollbutton-down) { + appearance: none; + background-clip: padding-box; + border: 4px solid transparent; + border-radius: calc(var(--tab-border-radius) + 4px); + margin: 0; + padding: 0 calc(var(--toolbarbutton-inner-padding) - 6px); +} + +/*** Adds padding to end of toolbar while making that space click the first button ***/ +#PanelUI-menu-button { + padding-inline-end: var(--toolbar-start-end-padding); +} + +toolbar .toolbarbutton-1 > .toolbarbutton-icon, +toolbar .toolbarbutton-1 > .toolbarbutton-text, +toolbar .toolbarbutton-1 > .toolbarbutton-badge-stack { + padding: var(--toolbarbutton-inner-padding); + border-radius: var(--toolbarbutton-border-radius); +} + +#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, +#TabsToolbar .toolbarbutton-1 > .toolbarbutton-text, +#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack { + border-radius: var(--tab-border-radius); +} + +toolbar .toolbarbutton-1 > .toolbarbutton-icon { + /* horizontal padding + actual icon width */ + width: calc(2 * var(--toolbarbutton-inner-padding) + 16px); + height: calc(2 * var(--toolbarbutton-inner-padding) + 16px); +} + +toolbar .toolbarbutton-combined-buttons-dropmarker > .toolbarbutton-icon { + /* same height as regular buttons, but narrower, and for a 12x12 image */ + padding-inline: 2px; + padding-block: calc(var(--toolbarbutton-inner-padding) + (16px - 12px) / 2); + width: calc(2 * 2px + 12px); +} + +toolbar .toolbarbutton-1 > .toolbarbutton-text { + padding-top: calc(var(--toolbarbutton-inner-padding) - 1px); + padding-bottom: 0; + /* To make the hover feedback line up with sibling buttons, it needs the same + * height as the button icons and the same vertical padding, but as a minimum, + * because otherwise an increase in text sizes would break things. + */ + min-height: calc(16px + 2 * var(--toolbarbutton-inner-padding)); +} + +@media (-moz-platform: macos) { + toolbar .toolbarbutton-1 > .toolbarbutton-text { + padding-top: calc(var(--toolbarbutton-inner-padding) + 1px); + } +} + +toolbar .toolbaritem-combined-buttons { + margin-inline: 2px; +} + +toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 { + padding-inline: 0; +} + +toolbar .toolbaritem-combined-buttons:not(:hover) > separator { + content: ""; + display: -moz-box; + width: 1px; + height: 16px; + margin-inline-end: -1px; + background-image: linear-gradient(currentColor 0, currentColor 100%); + background-position: center; + background-repeat: no-repeat; + background-size: 1px 16px; + opacity: .2; +} + +toolbar[brighttext] .toolbaritem-combined-buttons > separator { + opacity: .3; +} + +#tabbrowser-arrowscrollbox:not([scrolledtostart=true])::part(scrollbutton-up):hover, +#tabbrowser-arrowscrollbox:not([scrolledtoend=true])::part(scrollbutton-down):hover, +toolbarbutton.bookmark-item:not(.subviewbutton, [disabled=true], [open]):hover, +toolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover > .toolbarbutton-icon, +toolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover > .toolbarbutton-text, +toolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover > .toolbarbutton-badge-stack { + background-color: var(--toolbarbutton-hover-background); + color: inherit; +} + +#tabbrowser-arrowscrollbox:not([scrolledtostart=true])::part(scrollbutton-up):hover:active, +#tabbrowser-arrowscrollbox:not([scrolledtoend=true])::part(scrollbutton-down):hover:active, +toolbarbutton.bookmark-item:hover:active:not(.subviewbutton, [disabled="true"]), +toolbarbutton.bookmark-item[open="true"], +toolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-icon, +toolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-text, +toolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-badge-stack { + background-color: var(--toolbarbutton-active-background); + color: inherit; +} + +/* Keyboard focus styling */ +.titlebar-button:focus-visible, +findbar toolbarbutton.tabbable:focus-visible, +toolbarbutton.bookmark-item:not(.subviewbutton):focus-visible, +toolbar .toolbarbutton-1:focus-visible > .toolbarbutton-icon, +toolbar .toolbarbutton-1:focus-visible > .toolbarbutton-text, +toolbar .toolbarbutton-1:focus-visible > .toolbarbutton-badge-stack { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +toolbar .toolbarbutton-1:focus-visible { + outline: none; +} + +/* bookmarks menu button */ + +/* ::::: bookmark buttons ::::: */ + +#personal-toolbar-empty-description, +toolbarbutton.bookmark-item:not(.subviewbutton) { + margin: 2px; + padding: var(--bookmark-block-padding) 4px; +} + +#PersonalToolbar .toolbarbutton-1 { + /* These should match the sizing of the bookmark-items in the inline axis + * (padding and margin, respectively) */ + --toolbarbutton-inner-padding: 4px; + --toolbarbutton-outer-padding: 2px; + margin-block: 2px; +} + +:root[uidensity=compact] toolbarbutton.bookmark-item:not(.subviewbutton) { + margin-inline: 1px; +} + +:root[uidensity=compact] #PersonalToolbar .toolbarbutton-1 { + --toolbarbutton-outer-padding: 1px; +} + +/* Allow icons to grow with the toolbar to match bookmark item heights + * + * NOTE(emilio): This matches pre-existing behavior but it's inconsistent with + * how e.g. combined items work, and maybe we should just remove this. + */ +#PersonalToolbar .toolbarbutton-1 { + -moz-box-align: stretch; +} +#PersonalToolbar .toolbarbutton-1 > .toolbarbutton-icon { + height: auto; +} +#PersonalToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack { + align-items: center; +} + +toolbarbutton.bookmark-item:not(.subviewbutton) { + border-radius: var(--toolbarbutton-border-radius); +} + +toolbarbutton.bookmark-item:not(.subviewbutton) { + max-width: 13em; + appearance: none; +} + +/** + * Ensure that the description is always at least as big as a bookmarks item, + * where its icon is 16px (which may be more than inline text height); + */ +#personal-toolbar-empty-description { + min-height: calc(16px + 2 * var(--bookmark-block-padding)); +} + +#bookmarks-toolbar-placeholder { + max-width: unset; +} + +.bookmark-item > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +/* Force the display of the label for bookmarks */ +.bookmark-item > .toolbarbutton-text { + display: -moz-box !important; +} + +#personal-bookmarks, +#PlacesToolbar, +#PlacesToolbarItems { + min-width: 0; +} + +#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon { + margin-inline-end: 0; +} + +#managed-bookmarks > .toolbarbutton-icon, +#bookmarks-toolbar-placeholder > .toolbarbutton-icon, +#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label]:not([label=""]), +#PersonalToolbar #import-button > .toolbarbutton-icon, +#OtherBookmarks.bookmark-item[container] > .toolbarbutton-icon { + margin-inline-end: 4px; +} + +/* Separators */ + +/* Override the toolkit styles, and make sure separators are draggable by + * making them wider, and using a pseudo-element for the visual separator. */ +#PlacesToolbarItems > toolbarseparator { + margin: 0; + padding-inline: 4px; + appearance: none; +} + +/* When adjacent to the bookmarks items, give the bookmarks items a leading separator. */ +#PlacesToolbarItems > toolbarseparator::before { + content: ""; + display: block; + border-inline-start: 1px solid; + border-image-source: linear-gradient( + transparent 3.75px, + var(--toolbarseparator-color) 3.75px, + var(--toolbarseparator-color) calc(100% - 3.75px), + transparent calc(100% - 3.75px) ); + border-image-slice: 1; +} + +@media (min-resolution: 2dppx) { + #PlacesToolbarItems > toolbarseparator::before { + border-inline-start-width: 0.5px; + } +} + +/* The bookmarks toolbar is smaller than the other toolbars, so we + * need to override the badge position to not be cut off. */ +#PersonalToolbar .toolbarbutton-badge { + margin-top: -1px !important; +} + +:root[uidensity=touch] #PersonalToolbar .toolbarbutton-badge { + margin-top: -4px !important; +} + +/* Remove a pixel of margin on the end so that the badge doesn't + * overflow the toolbar and push the button into the overflow menu. */ +:root[uidensity=compact] .toolbarbutton-badge { + margin-inline-end: -7px !important; +} + +/* Alternative style for .toolbarbutton-badge used by CFR notifications */ +.toolbarbutton-badge.feature-callout { + width: 14px; + height: 14px; + min-width: auto; + box-shadow: none; + border: none; + padding: 0; + display: block; + margin: -7px 0 0 !important; + margin-inline-end: -6px !important; + background: url(chrome://global/skin/icons/badge-blue.svg); +} diff --git a/browser/themes/shared/translation/infobar.css b/browser/themes/shared/translation/infobar.css new file mode 100644 index 0000000000..7f42cf2939 --- /dev/null +++ b/browser/themes/shared/translation/infobar.css @@ -0,0 +1,95 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +notification[value="translation"] .messageImage { + list-style-image: url(chrome://browser/skin/translation-16.png) !important; + -moz-image-region: rect(0, 32px, 16px, 16px); +} + +@media (min-resolution: 1.25dppx) { + notification[value="translation"] .messageImage { + list-style-image: url(chrome://browser/skin/translation-16@2x.png) !important; + -moz-image-region: rect(0, 64px, 32px, 32px); + } +} + +notification[value="translation"][state="translating"] .messageImage { + list-style-image: url(chrome://browser/skin/translating-16.png) !important; + -moz-image-region: auto; +} + +@media (min-resolution: 1.25dppx) { + notification[value="translation"][state="translating"] .messageImage { + list-style-image: url(chrome://browser/skin/translating-16@2x.png) !important; + } +} + +notification[value="translation"] hbox[anonid="details"] { + overflow: hidden; +} + +notification[value="translation"] menulist::part(dropmarker) { + display: -moz-box; + appearance: none; + width: 12px; + height: 12px; +} + +notification[value="translation"] menulist::part(dropmarker-icon) { + list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg); + -moz-context-properties: fill; + fill: currentColor; +} + +notification[value="translation"] menulist > menupopup { + margin: 0; /* override popup.css */ +} + +.translation-attribution { + cursor: pointer; + -moz-box-align: end; + font-size: small; + padding-block: 5px; +} + +.translation-attribution > label { + margin-bottom: 0; +} + +.translation-attribution > image { + width: 70px; +} + +.translation-welcome-panel { + width: 305px; +} + +.translation-welcome-panel::part(content) { + /* Prevent from stretching logo height */ + -moz-box-align: start; +} + +.translation-welcome-logo { + height: 32px; + width: 32px; + list-style-image: url(chrome://browser/skin/translation-16@2x.png); + -moz-image-region: rect(0, 64px, 32px, 32px); +} + +.translation-welcome-content { + margin-inline-start: 16px; +} + +.translation-welcome-headline { + font-size: larger; + font-weight: bold; + margin-inline-start: 0; +} + +.translation-welcome-body { + padding: 1em 0; + margin: 0 0; +} diff --git a/browser/themes/shared/translation/translating-16.png b/browser/themes/shared/translation/translating-16.png new file mode 100644 index 0000000000..71ca37c22a Binary files /dev/null and b/browser/themes/shared/translation/translating-16.png differ diff --git a/browser/themes/shared/translation/translating-16@2x.png b/browser/themes/shared/translation/translating-16@2x.png new file mode 100644 index 0000000000..ab6184047e Binary files /dev/null and b/browser/themes/shared/translation/translating-16@2x.png differ diff --git a/browser/themes/shared/translation/translation-16.png b/browser/themes/shared/translation/translation-16.png new file mode 100644 index 0000000000..ef17f55271 Binary files /dev/null and b/browser/themes/shared/translation/translation-16.png differ diff --git a/browser/themes/shared/translation/translation-16@2x.png b/browser/themes/shared/translation/translation-16@2x.png new file mode 100644 index 0000000000..c942e5ec09 Binary files /dev/null and b/browser/themes/shared/translation/translation-16@2x.png differ diff --git a/browser/themes/shared/update-badge.svg b/browser/themes/shared/update-badge.svg new file mode 100644 index 0000000000..aac3a5f97c --- /dev/null +++ b/browser/themes/shared/update-badge.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/urlbar-dynamic-results.css b/browser/themes/shared/urlbar-dynamic-results.css new file mode 100644 index 0000000000..c22b6ca9f1 --- /dev/null +++ b/browser/themes/shared/urlbar-dynamic-results.css @@ -0,0 +1,478 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/** + * UrlbarProviderTabToSearch + */ + +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner { + min-height: 64px !important; /* Overriding :root:not([uidensity=compact]) .urlbarView-row-inner { min-height } in urlbarView.inc.css */ + align-items: center; +} + +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap { + align-items: center; +} + +.urlbarView-row[dynamicType=onboardTabToSearch]:hover > .urlbarView-row-inner { + background-color: var(--arrowpanel-dimmed); +} + +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner[selected] { + background: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); + fill-opacity: 1; +} + +/* Icon */ +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { + min-width: 32px; + height: 32px; + color: var(--urlbar-popup-url-color); + -moz-context-properties: fill; +} + +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner[selected] > .urlbarView-no-wrap > .urlbarView-favicon { + color: inherit; +} + +.urlbarView-dynamic-onboardTabToSearch-text-container { + display: flex; + flex-direction: column; +} + +/* First row of text. */ +.urlbarView-dynamic-onboardTabToSearch-first-row-container { + display: flex; + align-items: end; +} +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container { + flex-wrap: wrap; +} +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > * { + max-width: 100%; + flex-basis: 100%; +} +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > .urlbarView-title-separator { + visibility: collapse; +} +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner[selected] > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > .urlbarView-action { + color: var(--autocomplete-popup-highlight-color); +} +@media (prefers-reduced-motion: no-preference) { + .urlbarView-results:not([wrap]) > .urlbarView-row > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > .urlbarView-action[slide-in] { + animation-name: urlbarView-action-slide-in; + animation-duration: 350ms; + animation-timing-function: var(--animation-easing-function); + } +} + +/* Description text. */ +.urlbarView-dynamic-onboardTabToSearch-description { + margin-block-start: 2px; +} +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-description { + max-width: 100%; + flex-basis: 100%; +} +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner:not([selected]) > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-description { + opacity: 0.6; +} + +/* CSS for Calculator */ +.urlbarView-row[dynamicType=calculator] > .urlbarView-row-inner[selected] { + background-color: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); +} + +.urlbarView-row[dynamicType=calculator] > .urlbarView-row-inner:hover { + background: var(--arrowpanel-dimmed); +} + +.urlbarView-dynamic-calculator-action { + font-size: .85em; + font-weight: normal; + visibility: collapse; +} + +.urlbarView-row[dynamicType=calculator] > .urlbarView-row-inner:hover .urlbarView-dynamic-calculator-action, +.urlbarView-row[dynamicType=calculator] > .urlbarView-row-inner[selected] .urlbarView-dynamic-calculator-action { + visibility: visible; +} + +.urlbarView-dynamic-calculator-action::before { + content: "\2014"; + margin: 0 .4em; + opacity: 0.6; +} + +/** UrlbarProviderUnitConversion **/ +.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner:hover { + background: var(--autocomplete-popup-hover-background); +} + +.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner[selected] { + background: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); + fill-opacity: 1; +} + +.urlbarView-dynamic-unitConversion-action { + font-size: .85em; + font-weight: normal; + visibility: collapse; +} + +.urlbarView-dynamic-unitConversion-action::before { + content: "\2014"; + margin: 0 .4em; + opacity: 0.6; +} + +.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner:hover .urlbarView-dynamic-unitConversion-action, +.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner[selected] .urlbarView-dynamic-unitConversion-action { + visibility: visible; +} + +.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner:hover .urlbarView-dynamic-unitConversion-action { + color: var(--urlbar-popup-action-color); +} + +.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner[selected] .urlbarView-dynamic-unitConversion-action { + color: var(--autocomplete-popup-highlight-color); +} + +.urlbarView-row[dynamicType=quickactions] > .urlbarView-row-inner { + align-items: start; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-dynamic-quickactions-buttons { + display: flex; + flex-grow: 1; + gap: 0.9em 1.8em; + max-width: 100%; +} + +#urlbar[searchmodesource=actions] .urlbarView-row[dynamicType=quickactions] .urlbarView-dynamic-quickactions-buttons { + flex-wrap: wrap; +} + +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=quickactions] > .urlbarView-row-inner { + flex-wrap: unset; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-quickaction-row { + box-shadow: 0px 0px 1px rgba(128, 128, 142, 0.9), 0px 0px 4px rgba(128, 128, 142, 0.5); + border-radius: 4px; + display: flex; + align-items: center; + padding: .5em; + margin-top: 2px; + position: relative; + overflow: hidden; + min-width: 16px; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-quickaction-row[disabled] { + opacity: .4; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-label { + overflow: hidden; + text-overflow: ellipsis; + font-size: 11px; + font-weight: 500; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-favicon { + display: flex; + align-items: center; + justify-content: center; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-favicon-img { + width: 16px; + height: 16px; +} + +.urlbarView-row[dynamicType=quickactions][label]::before { + top: -1em; + margin-inline-start: 6px; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-quickaction-row:hover:not([disabled]):not([selected]) { + background-color: var(--autocomplete-popup-hover-background); +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-quickaction-row[selected] { + background-color: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-title { + display: flex; +} + +/** + * UrlbarProviderContextualSearch + */ + +.urlbarView-row[dynamicType=contextualSearch] .urlbarView-title[overflow] { + mask-image: linear-gradient(to left, transparent, black 2em); +} + +.urlbarView-row[dynamicType=contextualSearch] .urlbarView-title[overflow]:-moz-locale-dir(rtl) { + mask-image: linear-gradient(to right, transparent, black 2em); +} + +.urlbarView-row[dynamicType=contextualSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator.urlbarView-dynamic-contextualSearch-separator { + visibility: visible; +} + +.urlbarView-row[dynamicType=contextualSearch] .urlbarView-dynamic-contextualSearch-description { + font-size: 0.85em; +} + +.urlbarView-row[dynamicType=contextualSearch]:hover > .urlbarView-row-inner { + background-color: var(--autocomplete-popup-hover-background); +} + + +/** + * Weather + * + * All em units used below are based on the spec where 1em is 13px. + * Thus using 13px as a base to calculate the other relative em sizes, either + * a bigger or smaller ratio to 13px. + */ + +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner { + flex-wrap: nowrap; +} + +.urlbarView-dynamic-weather-currentConditions { + background-color: var(--autocomplete-popup-hover-background); + padding: 0.61em 0.61em 0.84em; + margin-inline-end: 0.92em; + border-radius: 2px; + text-align: center; +} + +@media (prefers-color-scheme: dark) { + .urlbarView-dynamic-weather-currentConditions { + background-color: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); + } +} + +.urlbarView-dynamic-weather-currently { + font-size: 0.85em; + margin-bottom: 0.53em; +} + +.urlbarView-dynamic-weather-temperature { + margin-inline-end: 0.3em; + font-weight: 600; + /* The units from the spec: + - 1em is 13px + - temperature is 18px + - We need to figure out the temperature in units of em. + - 18px / 13px = 1.385em + Therefore, the temperature is 1.385em units. + */ + font-size: 1.385em; + vertical-align: middle; +} + +.urlbarView-dynamic-weather-weatherIcon { + vertical-align: middle; +} + +/* Weather Icon color for high contrast mode */ +@media (prefers-contrast) { + .urlbarView-dynamic-weather-weatherIcon { + -moz-context-properties: fill, stroke; + fill: currentColor; + stroke: currentColor; + } +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="1"] { + content: url("chrome://browser/skin/weather/sunny.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="2"] { + content: url("chrome://browser/skin/weather/mostly-sunny.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="3"], +.urlbarView-dynamic-weather-weatherIcon[iconId="4"], +.urlbarView-dynamic-weather-weatherIcon[iconId="6"] { + content: url("chrome://browser/skin/weather/partly-sunny.svg"); +} + + +.urlbarView-dynamic-weather-weatherIcon[iconId="5"] { + content: url("chrome://browser/skin/weather/hazy-sunshine.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="7"], +.urlbarView-dynamic-weather-weatherIcon[iconId="8"] { + content: url("chrome://browser/skin/weather/cloudy.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="11"] { + content: url("chrome://browser/skin/weather/fog.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="12"] { + content: url("chrome://browser/skin/weather/showers.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="13"], +.urlbarView-dynamic-weather-weatherIcon[iconId="14"] { + content: url("chrome://browser/skin/weather/mostly-cloudy-with-showers.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="15"] { + content: url("chrome://browser/skin/weather/thunderstorms.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="16"], +.urlbarView-dynamic-weather-weatherIcon[iconId="17"] { + content: url("chrome://browser/skin/weather/mostly-cloudy-with-thunderstorms.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="18"] { + content: url("chrome://browser/skin/weather/rain.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="19"], +.urlbarView-dynamic-weather-weatherIcon[iconId="20"], +.urlbarView-dynamic-weather-weatherIcon[iconId="25"] { + content: url("chrome://browser/skin/weather/flurries.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="21"] { + content: url("chrome://browser/skin/weather/partly-sunny-with-flurries.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="22"], +.urlbarView-dynamic-weather-weatherIcon[iconId="23"] { + content: url("chrome://browser/skin/weather/snow.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="24"], +.urlbarView-dynamic-weather-weatherIcon[iconId="31"] { + content: url("chrome://browser/skin/weather/ice.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="26"], +.urlbarView-dynamic-weather-weatherIcon[iconId="29"] { + content: url("chrome://browser/skin/weather/freezing-rain.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="30"] { + content: url("chrome://browser/skin/weather/hot.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="32"] { + content: url("chrome://browser/skin/weather/windy.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="33"] { + content: url("chrome://browser/skin/weather/night-clear.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="34"], +.urlbarView-dynamic-weather-weatherIcon[iconId="35"], +.urlbarView-dynamic-weather-weatherIcon[iconId="36"], +.urlbarView-dynamic-weather-weatherIcon[iconId="38"] { + content: url("chrome://browser/skin/weather/night-mostly-clear.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="37"] { + content: url("chrome://browser/skin/weather/night-hazy-moonlight.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="39"], +.urlbarView-dynamic-weather-weatherIcon[iconId="40"] { + content: url("chrome://browser/skin/weather/night-partly-cloudy-with-showers.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="41"], +.urlbarView-dynamic-weather-weatherIcon[iconId="42"] { + content: url("chrome://browser/skin/weather/night-partly-cloudy-with-thunderstorms.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="43"], +.urlbarView-dynamic-weather-weatherIcon[iconId="44"] { + content: url("chrome://browser/skin/weather/night-mostly-cloudy-with-flurries.svg"); +} + +.urlbarView-dynamic-weather-summary { + flex-grow: 1; + flex-shrink: 1; + min-width: 0; +} + +.urlbarView-dynamic-weather-top { + display: flex; + align-items: center; +} + +.urlbarView-dynamic-weather-topNoWrap { + display: inline-flex; + align-items: center; +} + +.urlbarView-dynamic-weather-middle { + font-size: 0.85em; + display: flex; + align-items: center; +} + +.urlbarView-dynamic-weather-middleNoWrap { + display: inline-flex; + align-items: center; +} + +.urlbarView-dynamic-weather-summaryTextSeparator::before { + content: '\00B7'; + margin: 0.25em; +} + +.urlbarView-dynamic-weather-highLow { + /* The 100% width is needed so the highLow wraps at the same time as the URL + when the URL has overflowed. + TODO - In a follow-up patch I will fix it so the highLow will wrap when the + highLow has overflowed, it will wrap separte from the URL.*/ + width: 100%; +} + +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner .urlbarView-dynamic-weather-top, +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner .urlbarView-dynamic-weather-middle { + flex-wrap: wrap; +} + +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner > .urlbarView-dynamic-weather-summary > +.urlbarView-dynamic-weather-top > .urlbarView-dynamic-weather-topNoWrap > .urlbarView-dynamic-weather-titleSeparator, +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner > .urlbarView-dynamic-weather-summary > +.urlbarView-dynamic-weather-middle > .urlbarView-dynamic-weather-middleNoWrap > .urlbarView-dynamic-weather-summaryTextSeparator { + display: none; +} + +.urlbarView-dynamic-weather-bottom { + font-size: 0.85em; + margin-top: 0.40em; + opacity: 0.6; +} + +.urlbarView-row[dynamicType=weather] > .urlbarView-row-inner[selected] > .urlbarView-dynamic-weather-summary > .urlbarView-dynamic-weather-top > .urlbarView-url { + color: inherit; +} + +.urlbarView-row[dynamicType=weather] > .urlbarView-row-inner[selected] > .urlbarView-dynamic-weather-summary > .urlbarView-dynamic-weather-bottom { + opacity: 1; +} diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css new file mode 100644 index 0000000000..b0fe7e7a7b --- /dev/null +++ b/browser/themes/shared/urlbar-searchbar.css @@ -0,0 +1,745 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + --toolbar-field-border-color: hsla(240,5%,5%,.25); + --toolbar-field-focus-border-color: var(--focus-outline-color); + --urlbar-container-padding: 1px; + --urlbar-margin-inline: 5px; + --urlbar-search-button-width: calc(16px + 2 * var(--urlbar-icon-padding)); +} + +@media not (prefers-contrast) { + :root { + --toolbar-field-border-color: transparent; + --toolbar-field-focus-border-color: color-mix(in srgb, var(--focus-outline-color) 50%, transparent); + } +} + +#urlbar-container, +#search-container { + padding-block: 4px; + margin-inline: var(--urlbar-margin-inline); +} + +#search-container[cui-areatype="panel"] { + margin: var(--arrowpanel-menuitem-margin); +} + +:root[uidensity=touch] #urlbar-container, +:root[uidensity=touch] #search-container { + padding-block: 5px; +} + +#urlbar, +#searchbar { + min-height: var(--urlbar-min-height); + text-shadow: none; + color: var(--toolbar-field-color); +} + +/** + * System colors and widgets are set based on toolbar color. Since toolbar + * fields can be styled differently from the toolbar, we need to use the + * correct color scheme in toolbar fields. + */ +#urlbar:-moz-lwtheme, +#searchbar:-moz-lwtheme { + color-scheme: light; +} + +:root[lwt-toolbar-field-brighttext] #urlbar:not([focused="true"]), +:root[lwt-toolbar-field-brighttext] #searchbar:not(:focus-within), +:root[lwt-toolbar-field-focus-brighttext] #urlbar[focused="true"], +:root[lwt-toolbar-field-focus-brighttext] #searchbar:focus-within { + color-scheme: dark; +} + +#urlbar-background, +#searchbar { + background-color: var(--toolbar-field-background-color); + background-clip: border-box; + border: 1px solid var(--toolbar-field-border-color); + border-radius: var(--toolbarbutton-border-radius); +} + +#urlbar-input-container, +#searchbar { + border-radius: var(--toolbarbutton-border-radius); + overflow: clip; +} + +#urlbar-input, +#urlbar-scheme, +.searchbar-textbox { + -moz-box-flex: 1; + background-color: transparent; + color: inherit; + border: none; + margin: 0; + padding: 0; + outline: none; +} + +#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background, +#searchbar:focus-within { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); + /* We used --focus-outline above to inherit its width and style properties, + but we still want to use the theme's border-color. + --toolbar-field-focus-border-color is set equal to --focus-outline-color + on :root, but LWT themes can override this value. */ + outline-color: var(--toolbar-field-focus-border-color); + border-color: transparent; +} + +#urlbar[focused="true"] > #urlbar-background, +#searchbar:focus-within { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23); +} + +#urlbar[open] > #urlbar-background { + border-color: var(--arrowpanel-border-color); + box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13); +} + +#urlbar:is([focused="true"], [open]), +#searchbar:focus-within { + color: var(--toolbar-field-focus-color); +} + +#urlbar:is([focused="true"], [open]) > #urlbar-background, +#searchbar:focus-within { + background-color: var(--toolbar-field-focus-background-color); +} + +#urlbar-input::placeholder, +.searchbar-textbox::placeholder { + opacity: 0.69; +} + +#TabsToolbar #searchbar:not(:focus-within) { + /* The tabs toolbar is usually a different color than the other toolbars, and + we can't predict it, to avoid a transparent field we enforce a border. */ + border-color: color-mix(in srgb, currentColor 20%, transparent); +} + +#urlbar-input:-moz-lwtheme::selection, +.searchbar-textbox:-moz-lwtheme::selection { + background-color: var(--lwt-toolbar-field-highlight, Highlight); + color: var(--lwt-toolbar-field-highlight-text, HighlightText); +} + +#urlbar-input:not(:focus):-moz-lwtheme::selection, +.searchbar-textbox:not(:focus-within):-moz-lwtheme::selection { + background-color: var(--lwt-toolbar-field-highlight, text-select-disabled-background); +} + +#urlbar:not([focused="true"]) { + caret-color: transparent; +} + +#urlbar.searchButton > #urlbar-input-container > #urlbar-search-button { + width: var(--urlbar-search-button-width); + background-image: url(chrome://global/skin/icons/search-glass.svg); + background-repeat: no-repeat; + background-position: center; + -moz-context-properties: fill, fill-opacity; + fill: var(--toolbarbutton-icon-fill); +} + +#urlbar.searchButton > #urlbar-input-container[pageproxystate="invalid"] > #urlbar-search-button { + margin-inline-end: 6px; +} + +/** + * The urlbar background is a separate element so we can animate it + * independently from the content. It's positioned absolutely and stretched to + * the bounds of the urlbar. + */ + +#urlbar, +#urlbar-input-container, +.urlbarView { + position: relative; +} + +#urlbar-background { + display: block; + position: absolute; + inset: 0; +} + +:root:not([chromehidden~="toolbar"]) #urlbar.searchButton:not([breakout]) > #urlbar-background, +:root:not([chromehidden~="toolbar"]) #urlbar.searchButton:not([breakout-extend]) > #urlbar-background { + inset-inline-start: var(--urlbar-search-button-width); +} + +#urlbar-input-container { + /* Match urlbar-background's border. */ + border: 1px solid transparent; + padding: var(--urlbar-container-padding); +} + +#urlbar-container[breakout] { + position: relative; + min-height: var(--urlbar-container-height); +} + +#urlbar[breakout] { + display: block; + position: absolute; + width: 100%; + height: var(--urlbar-height); + top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2); + left: 0; +} + +#urlbar[breakout] > #urlbar-input-container { + width: 100%; + height: 100%; +} + +#urlbar:not([open]) > .urlbarView, +#urlbar:not([breakout]) > .urlbarView { + display: none; +} + +#urlbar[breakout][breakout-extend], +#urlbar[breakout][breakout-extend-disabled][open] { + /* The z-index needs to be big enough to trump other positioned UI pieces + that we want to overlay. 3 is used in the tab bar. */ + z-index: 3; + height: auto; +} + +#urlbar[breakout][breakout-extend] { + top: 0; + left: calc(-1 * var(--urlbar-margin-inline)); + width: calc(100% + 2 * var(--urlbar-margin-inline)); +} + +#urlbar[breakout][breakout-extend] > #urlbar-input-container { + height: var(--urlbar-toolbar-height); + padding-block: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2 + var(--urlbar-container-padding)); + padding-inline: calc(var(--urlbar-margin-inline) + var(--urlbar-container-padding)); +} + +#urlbar.searchButton[breakout][breakout-extend] > #urlbar-input-container > #urlbar-search-button { + fill: currentColor; + fill-opacity: .6; +} + +@keyframes urlbar-grow { + 0% { + transform: scaleX(.99) scaleY(.98); + } + 100% { + transform: scale(1.0); + } +} + +#urlbar[breakout][breakout-extend] > #urlbar-background { + animation-name: urlbar-grow; + animation-duration: 0s; + animation-timing-function: var(--animation-easing-function); +} + +@media (prefers-reduced-motion: no-preference) { + #urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background { + animation-duration: 150ms; + } +} + +:root[chromehidden~="toolbar"] #urlbar-container { + /* Remove excess space between the address bar and the menu button in popups. */ + padding-inline-end: 0; +} + +:root[customizing] .urlbar-input-box { + visibility: hidden; +} + +#urlbar-container { + -moz-box-align: center; +} + +#urlbar-container, +#wrapper-urlbar-container { + -moz-box-flex: 400; +} + +#urlbar-search-splitter { + /* The splitter width should equal the location and search bars' combined + neighboring margin and border width. */ + min-width: 12px; + margin: 0 -6px; + position: relative; + border: none; + background: transparent; + appearance: none; +} + +/* Urlbar search mode indicator */ +#urlbar-search-mode-indicator { + display: none; + background-color: var(--urlbar-box-bgcolor); + color: var(--urlbar-box-text-color); + margin-inline-end: 8px; + align-items: center; + border-radius: var(--urlbar-icon-border-radius); + padding-inline: 8px 6px; +} + +#urlbar[focused="true"] #urlbar-search-mode-indicator { + background-color: var(--urlbar-box-focus-bgcolor); +} + +#urlbar[searchmode] > #urlbar-input-container > #urlbar-search-mode-indicator { + display: inline-flex; +} + +#urlbar[searchmode] > #urlbar-input-container > #urlbar-label-box { + display: none; +} + +#urlbar-search-mode-indicator-close { + background: url(chrome://global/skin/icons/close.svg) no-repeat center; + background-size: 10px 10px; + width: 16px; + height: 16px; + -moz-context-properties: fill, fill-opacity; + fill-opacity: 0.6; + fill: currentColor; + border-radius: var(--urlbar-icon-border-radius); +} + +#urlbar-search-mode-indicator-close:hover { + background-color: var(--urlbar-box-hover-bgcolor); + color: var(--urlbar-box-hover-text-color); +} +#urlbar-search-mode-indicator-close:hover:active { + background-color: var(--urlbar-box-active-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +@media (prefers-contrast) { + #urlbar-search-mode-indicator-close { + fill-opacity: 1.0; + } +} + +#urlbar-search-mode-indicator-title { + padding-inline: 0 3px; +} + +/* Page action panel */ +.pageAction-panel-button > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +#pageAction-panel-bookmark, +#star-button { + list-style-image: url("chrome://browser/skin/bookmark-hollow.svg"); +} +#pageAction-panel-bookmark[starred], +#star-button[starred] { + list-style-image: url("chrome://browser/skin/bookmark.svg"); +} +#star-button[starred] { + fill-opacity: 1; + fill: var(--toolbar-field-icon-fill-attention); +} + +/* URL bar and page action buttons */ + +/* The background can be very dark and if the add-on uses a black-ish svg it + will be barely visible. In the future we should have a standardized SVG + solution we can apply to add-on icons, for now we can only try to make them + visible through some filtering tricks */ +:root[lwt-toolbar-field-brighttext] #urlbar:not([focused="true"]) .urlbar-addon-page-action[style*=".svg"] > .urlbar-icon, +:root[lwt-toolbar-field-focus-brighttext] #urlbar[focused="true"] .urlbar-addon-page-action[style*=".svg"] > .urlbar-icon { + filter: grayscale(100%) brightness(20%) invert(); +} + +@media (prefers-color-scheme: dark) { + /* As above, but for the default theme in dark mode, which suffers from the same issue */ + :root:not(:-moz-lwtheme) .urlbar-addon-page-action[style*=".svg"] > .urlbar-icon { + filter: grayscale(100%) brightness(20%) invert(); + } +} + +#userContext-icons, +#urlbar-zoom-button { + margin-inline: 6px; +} + +.urlbar-icon { + width: 16px; + height: 16px; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: var(--urlbar-icon-fill-opacity); +} + +.urlbar-page-action, +#urlbar-go-button, +.search-go-button { + width: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding)); + height: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding)); + border-radius: var(--urlbar-icon-border-radius); + padding: var(--urlbar-icon-padding); + color: inherit; +} + +.urlbar-page-action:not([disabled]):hover, +#urlbar-go-button:hover, +.search-go-button:hover { + background-color: var(--urlbar-box-hover-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +.urlbar-page-action:not([disabled])[open], +.urlbar-page-action:not([disabled]):hover:active, +#urlbar-go-button:hover:active, +.search-go-button:hover:active { + background-color: var(--urlbar-box-active-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +.urlbar-page-action:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +#urlbar-go-button, +.search-go-button { + list-style-image: url("chrome://browser/skin/forward.svg"); +} + +#urlbar-go-button:-moz-locale-dir(rtl), +.search-go-button:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +#pageActionButton, +.share-more-button { + list-style-image: url("chrome://global/skin/icons/more.svg"); +} + +/** + * Contextual Feature Recommendation + * + * Animate the recommendation icon to expand outwards and display a text label. + * Fake the effect of a smoothly expanding width without animating any widths + * by (continuously) animating only `mask-position-x` and `transform`. + * + * In a few places, transition a property using the timing-function `step-start` + * while collapsed and `step-end` while expanded in order to (discretely) modify + * the value while expanded and while transitioning in either direction. + * + * This UI is part of an experiment launching in LTR locales only. Fixing the + * RTL issues is tracked by Bug 1485725. + */ + +:root { + --cfr-animation-duration: 0.35s; + --cfr-button-addons-icon: url(chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg); + --cfr-button-features-icon: url(chrome://activity-stream/content/data/content/assets/glyph-cfr-feature-16.svg); + --cfr-button-highlights-icon: url(chrome://global/skin/icons/highlights.svg); + --cfr-active-color: #0060df; +} + +#contextual-feature-recommendation { + width: 28px; + margin-inline-start: 0; + transition: margin-inline-start step-end var(--cfr-animation-duration); +} +#urlbar[cfr-recommendation-state="expanded"] #contextual-feature-recommendation { + margin-inline-start: calc(var(--cfr-label-width) * -1); + transition: margin-inline-start step-start var(--cfr-animation-duration); +} + +#cfr-button { + margin: -2px 0; + transition-property: fill, fill-opacity, transform; + transition-timing-function: ease-in-out; + transition-duration: var(--cfr-animation-duration); +} +#contextual-feature-recommendation[data-cfr-icon="webextensions-icon"] #cfr-button { + list-style-image: var(--cfr-button-addons-icon); +} +#contextual-feature-recommendation[data-cfr-icon="recommendations-icon"] #cfr-button { + list-style-image: var(--cfr-button-features-icon); +} +#contextual-feature-recommendation[data-cfr-icon="highlights-icon"] #cfr-button { + list-style-image: var(--cfr-button-highlights-icon); +} +#urlbar[cfr-recommendation-state="expanded"] #cfr-button { + fill: white; + fill-opacity: 1; + background-color: transparent; /* Override hover background-color */ + transform: translateX(calc(var(--cfr-label-width) * -1)); +} +#urlbar[cfr-recommendation-state="expanded"] #cfr-button:-moz-locale-dir(rtl) { + transform: translateX(calc(var(--cfr-label-width))); +} +@keyframes cfr-button-fade-through-active-color { + 33% { + fill-opacity: 1; + fill: var(--cfr-active-color); + } + 67% { + fill-opacity: 1; + fill: var(--cfr-active-color); + } +} +#urlbar[cfr-recommendation-state="collapsed"] #cfr-button { + animation: cfr-button-fade-through-active-color calc(3 * var(--cfr-animation-duration)); +} + +#cfr-label-container { + width: 0; + overflow: hidden; + border-radius: 5px; + padding-inline-start: 28px; + mask-image: linear-gradient(to right, transparent 0, black 0); + mask-position-x: var(--cfr-label-width); + mask-repeat: no-repeat; + transition-property: background-color, mask-position-x, width, margin-inline-end; + transition-timing-function: ease-in-out, ease-in-out, step-end, step-end; + transition-duration: var(--cfr-animation-duration); + -moz-box-align: center; + margin-block: calc((var(--urlbar-min-height) - var(--urlbar-container-padding) - 2px /* border */ - 24px) / 2); +} +#cfr-label-container:-moz-locale-dir(rtl) { + mask-position-x: calc(var(--cfr-label-width) * -1); +} + +#urlbar[cfr-recommendation-state="expanded"] #cfr-label-container { + width: calc(var(--cfr-label-width) + 28px); + background-color: var(--cfr-active-color); + margin-inline-end: -28px; + mask-position-x: 0; + transition-timing-function: ease-in-out, ease-in-out, step-start, step-start; +} + +#cfr-label { + margin: 0; + padding: 3px 5px; + padding-inline-start: 0; + color: white; + mask-image: linear-gradient(to right, transparent 0, black 0); + mask-position-x: var(--cfr-label-width); + mask-repeat: no-repeat; + transition: mask-position-x ease-in-out var(--cfr-animation-duration); +} +#cfr-label:-moz-locale-dir(rtl) { + mask-position-x: calc(var(--cfr-label-width) * -1); +} +#urlbar[cfr-recommendation-state="expanded"] #cfr-label { + mask-position-x: 0; +} + +/* Shift the url-bar text fading to stop the recommendation overlapping */ +#urlbar[cfr-recommendation-state] #urlbar-input { + /* A mask-image is usually only defined for the url bar when text overflows. + We need to re-define the mask image here so that it shows up correctly when + we transition to or from an `expanded` state (in which the right end of the + url bar may be obscured without overflow). */ + mask-image: linear-gradient(to left, transparent, black 3ch); + transition: mask-position-x ease-in-out var(--cfr-animation-duration); +} +#urlbar[cfr-recommendation-state] #urlbar-input:-moz-locale-dir(rtl) { + mask-image: linear-gradient(to right, transparent, black 3ch); +} +#urlbar[cfr-recommendation-state="expanded"] #urlbar-input { + mask-position-x: calc(var(--cfr-label-width) * -1); +} +#urlbar[cfr-recommendation-state="expanded"] #urlbar-input:-moz-locale-dir(rtl) { + mask-position-x: calc(var(--cfr-label-width)); +} + +/* Reader mode icon */ + +#reader-mode-button > .urlbar-icon { + list-style-image: url(chrome://browser/skin/reader-mode.svg); +} + +#reader-mode-button[readeractive] > .urlbar-icon { + fill: var(--toolbar-field-icon-fill-attention); + fill-opacity: 1; +} + +/* Zoom button */ + +#urlbar-zoom-button { + appearance: none; + color: inherit; + font-size: .8em; + padding: 3px 7px; + border-radius: var(--urlbar-icon-border-radius); + background-color: var(--urlbar-box-bgcolor); + color: var(--urlbar-box-text-color); + margin-block: calc((var(--urlbar-min-height) - 20px) / 2 - 1px /* border */ - var(--urlbar-container-padding)); + overflow: hidden; +} + +#urlbar[focused="true"] #urlbar-zoom-button:not(:hover) { + background-color: var(--urlbar-box-focus-bgcolor); +} + +#urlbar-zoom-button:hover { + background-color: var(--urlbar-box-hover-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +#urlbar-zoom-button:hover:active { + background-color: var(--urlbar-box-active-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +@keyframes urlbar-zoom-reset-pulse { + 0% { + transform: scale(0); + } + 75% { + transform: scale(1.5); + } + 100% { + transform: scale(1.0); + } +} + +#urlbar-zoom-button[animate="true"] { + animation-name: urlbar-zoom-reset-pulse; + animation-duration: 250ms; +} + +#urlbar-zoom-button:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +#urlbar-zoom-button > .toolbarbutton-text { + display: -moz-box; +} + +#urlbar-zoom-button > .toolbarbutton-icon { + display: none; +} + +/* Search bar */ + +#search-container { + min-width: 125px; +} + +#search-container, +#wrapper-search-container { + -moz-box-flex: 175; +} + +#search-container[width] { + /* Take something closer to the explicit width when requested */ + -moz-box-flex: 1; +} + +#search-container[cui-areatype="panel"] > #searchbar:-moz-lwtheme { + /* Theme authors usually only consider contrast against the toolbar when + picking a border color for the search bar. Since the search bar can be + dragged into the overflow panel, we need to show a high-contrast border + around the searchbar in case the searchbar and panel background are the + same color. */ + border-color: var(--panel-separator-color); +} + +.search-go-button { + margin-inline: 1px; +} + +.searchbar-search-button { + -moz-box-align: center; + fill: currentColor; +} + +.searchbar-search-icon { + list-style-image: url(chrome://global/skin/icons/search-glass.svg); + -moz-context-properties: fill, fill-opacity; + fill-opacity: var(--urlbar-icon-fill-opacity); + pointer-events: none; + margin-inline: 8px 6px; + width: 16px; +} + +.searchbar-search-icon-overlay { + pointer-events: none; +} + +.searchbar-search-button[addengines=true] > .searchbar-search-icon-overlay { + list-style-image: url(chrome://browser/skin/search-indicator-badge-add.svg); + margin-inline: -15px 4px; + margin-top: -10px; + width: 11px; + height: 11px; +} + +.searchbar-search-button[addengines=true] > .searchbar-search-icon-overlay:-moz-locale-dir(rtl) { + margin-inline: -25px 14px; +} + +.searchbar-search-button:hover:not([addengines=true]) > .searchbar-search-icon-overlay { + list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg); + -moz-context-properties: fill; + margin-inline: -8px 2px; + width: 6px; + height: 6px; +} + +.searchbar-search-button:hover:not([addengines=true]) > .searchbar-search-icon-overlay:-moz-locale-dir(rtl) { + margin-inline: -26px 20px; +} + +.searchbar-engine-one-off-add-engine:not([image]), +moz-input-box > menupopup .context-menu-add-engine:not([image]) { + list-style-image: url("chrome://browser/skin/search-engine-placeholder.png"); +} + +@media (min-resolution: 1.1dppx) { + .searchbar-engine-one-off-add-engine:not([image]), + moz-input-box > menupopup .context-menu-add-engine:not([image]) { + list-style-image: url("chrome://browser/skin/search-engine-placeholder@2x.png"); + } +} + +.searchbar-engine-one-off-add-engine > .button-box::after, +moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left::after { + content: ""; + position: relative; + display: -moz-box; + background: url(chrome://browser/skin/search-indicator-badge-add.svg) no-repeat center; + height: 11px; + width: 11px; + margin-inline: -4px -7px; + margin-top: -13px; +} + +moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left::after { + /* These differ from the urlbar and searchbar because the context menu + may not have enough space */ + margin-inline: -7px -4px; + margin-top: -8px; +} + +/* Fade a little the icon so that the + badge is more evident and the button + is less likely to be visually confused with a normal search shortcut */ +.searchbar-engine-one-off-add-engine[image]:not(:hover) > .button-box > .button-icon { + opacity: 0.7; +} +.searchbar-engine-one-off-add-engine[image]:hover > .button-box > .button-icon { + opacity: 1; +} diff --git a/browser/themes/shared/urlbarView.css b/browser/themes/shared/urlbarView.css new file mode 100644 index 0000000000..ad9065af9d --- /dev/null +++ b/browser/themes/shared/urlbarView.css @@ -0,0 +1,850 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://browser/skin/urlbar-dynamic-results.css"); + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + --autocomplete-popup-highlight-background: SelectedItem; + --autocomplete-popup-highlight-color: SelectedItemText; + + --urlbar-popup-action-color: hsl(178, 100%, 28%); + + --urlbarView-action-slide-in-distance: 200px; + + --urlbarView-item-inline-padding: var(--urlbar-icon-padding); + + --urlbarView-favicon-width: 16px; + --urlbarView-icon-margin-end: calc(var(--urlbar-icon-padding) + var(--identity-box-margin-inline)); +} + +:root:-moz-lwtheme { + --urlbar-popup-action-color: rgb(91,91,102); + --urlbar-popup-url-color: rgb(0,97,224); + /* Fallback colours for when theme authors don't define lwtheme variables. */ + --autocomplete-popup-highlight-background: rgb(0, 99, 255); + --autocomplete-popup-highlight-color: white; +} + +:root[lwt-toolbar-field-focus-brighttext] { + --urlbar-popup-url-color: var(--lwt-brighttext-url-color); + --urlbar-popup-action-color: #30e60b; +} + +:root[lwt-toolbar-field-brighttext] { + --autocomplete-popup-highlight-background: rgb(0, 99, 225); +} + +:root[lwt-toolbar-field-focus-brighttext] { + --urlbar-popup-action-color: rgb(191,191,201); +} + +:root:-moz-locale-dir(rtl) { + --urlbarView-action-slide-in-distance: -200px; +} + +.urlbarView { + /* Don't handle window drag events in case we are overlapping a toolbar */ + -moz-window-dragging: no-drag; + + display: block; + text-shadow: none; + overflow: clip; + margin-inline: calc(5px + var(--urlbar-container-padding)); + width: calc(100% - 2 * (5px + var(--urlbar-container-padding))); + /* Match urlbar-background's border. */ + border-inline: 1px solid transparent; +} + +.urlbarView-body-inner { + width: 100%; +} + +#urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner { + border-top: 1px solid var(--autocomplete-popup-separator-color); +} + +.urlbarView-results { + padding-block: 4px; + white-space: nowrap; +} + +/* Vertically center the one-offs when no results are present. */ +.urlbarView[noresults] > .urlbarView-body-outer > .urlbarView-body-inner > .urlbarView-results { + padding-block: 0; +} + +.urlbarView-row { + display: flex; + align-items: center; + fill: currentColor; + fill-opacity: var(--urlbar-icon-fill-opacity); + padding-block: 2px; +} + +:root:not([uidensity=compact]) .urlbarView-row:not([type=tip], [type=dynamic]) { + min-height: 32px; +} + +:root[uidensity=touch] .urlbarView-row:not([type=tip], [type=dynamic]) { + padding-block: 11px; +} + +.urlbarView-row-inner { + display: inline-flex; + flex: 1 1; + flex-wrap: nowrap; + overflow: hidden; + border-radius: var(--toolbarbutton-border-radius); + padding-inline: var(--urlbarView-item-inline-padding); + padding-block: 6px; +} + +:root:not([uidensity=compact]) .urlbarView-row-inner { + min-height: 20px; /* row min-height 32px - (2 * padding-block 6px) */ +} + +.urlbarView-row-inner, +.urlbarView-no-wrap { + flex-wrap: nowrap; + align-items: center; + justify-content: start; +} + +.urlbarView-no-wrap { + display: inline-flex; + max-width: 100%; + flex-grow: 0; + flex-shrink: 0; +} + +.urlbarView-url { + flex-grow: 1; + flex-shrink: 1; +} + +.urlbarView[actionoverride] .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-no-wrap, +.urlbarView-row[has-url]:not([type$=tab]) > .urlbarView-row-inner > .urlbarView-no-wrap, +.urlbarView-row[has-url]:is([type=remotetab], [sponsored]):is(:hover, [selected]) > .urlbarView-row-inner > .urlbarView-no-wrap { + /* We prioritize icons + title + action over the url, so they can grow freely, + but the url should never disappear when it's visible */ + flex-shrink: 0; + max-width: calc(70% - 2 * (var(--urlbarView-favicon-width) + (6px + 2px))); +} + +/* Wrap the url to a second line when the window is narrow. Do not wrap when the + window is also short, because fewer results will be shown. */ +@media screen and (min-height: 600px) { + .urlbarView-results[wrap] > .urlbarView-row > .urlbarView-row-inner { + flex-wrap: wrap; + } + .urlbarView-results[wrap] > .urlbarView-row > .urlbarView-row-inner > .urlbarView-no-wrap { + max-width: 100% !important; + flex-basis: 100%; + } + .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url, + .urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-url { + margin-top: 2px; + } + /* urlbarView-url is forced to be LTR for RTL locales, so set the padding based on the browser's directionality. */ + .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(ltr) { + padding-left: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width)); + } + .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(rtl) { + padding-right: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width)); + } + /* Note: switchtab entries show the url only in override mode, + remotetab and sponsored ones only when selected or :hover. */ + .urlbarView[actionoverride] .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator, + .urlbarView-results[wrap] > .urlbarView-row[has-url]:not([type$=tab], [sponsored]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator, + .urlbarView-results[wrap] > .urlbarView-row[has-url]:is([type=remotetab], [sponsored]):is(:hover, [selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator, + .urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap > .urlbarView-title-separator, + .urlbarView-results[wrap] > .urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator { + display: none; + } + .urlbarView-results[wrap] > .urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap { + flex-wrap: wrap; + } + .urlbarView-results[wrap] > .urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action { + flex-basis: 100%; + margin-inline-start: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width)); + } + + .urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top { + flex-wrap: wrap; + } + .urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap { + flex-basis: 100%; + } +} + +.urlbarView-row:not([type=tip], [type=dynamic]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title[overflow], +.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap > .urlbarView-title[overflow], +.urlbarView-tags[overflow], +.urlbarView-url[overflow] { + mask-image: linear-gradient(to left, transparent, black 2em); +} + +.urlbarView-row:not([type=tip], [type=dynamic]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title[overflow]:not([isurl]):-moz-locale-dir(rtl), +.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap > .urlbarView-title[overflow]:-moz-locale-dir(rtl), +.urlbarView-tags[overflow]:-moz-locale-dir(rtl) { + mask-image: linear-gradient(to right, transparent, black 2em); +} + +.urlbarView-title[isurl]:-moz-locale-dir(rtl), +.urlbarView-url:-moz-locale-dir(rtl) { + direction: ltr !important; +} + +.urlbarView-url:-moz-locale-dir(rtl) { + /* .urlbarView-url can grow due to `flex-grow: 1`, so without `text-align: + right`, the URL text would be left-aligned within .urlbarView-url for RTL + due to the `direction: ltr` rule. .urlbarView-title does not have this + problem since it does not have flex. */ + text-align: right; +} + +.urlbarView-row[selectable]:hover > .urlbarView-row-inner, +.urlbarView-row-inner[selectable]:hover { + background-color: var(--autocomplete-popup-hover-background); +} + +.urlbarView-row[selectable][selected] > .urlbarView-row-inner, +.urlbarView-row-inner[selectable][selected] { + background-color: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); +} + +/* Favicon */ + +.urlbarView-favicon { + width: var(--urlbarView-favicon-width); + height: var(--urlbarView-favicon-width); + margin-inline-end: var(--urlbarView-icon-margin-end); + background-repeat: no-repeat; + background-size: contain; + object-fit: contain; + flex-shrink: 0; + -moz-context-properties: fill, fill-opacity; +} + + +.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { + width: 24px; + height: 24px; + margin-inline-end: 12px; + flex-basis: 24px; + flex-grow: 0; +} + +.urlbarView-row[tail-suggestion] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { + visibility: hidden; +} + +.urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { + /* We use the URL color for this icon to inherit its accessibility + properties, like adapting to high contrast modes. We also want to ensure + contrast from the result highlight. */ + color: var(--urlbar-popup-url-color); + -moz-context-properties: fill; +} + +/* Type icon */ + +.urlbarView-type-icon { + position: absolute; + width: 12px; + height: 12px; + margin-top: var(--urlbarView-favicon-width); + margin-inline-start: 8px; + background-repeat: no-repeat; + background-size: contain; + -moz-context-properties: fill, stroke; + stroke: var(--toolbar-field-focus-background-color); +} + +/* Favicon badges have this priority: pinned > bookmark. */ + +.urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon { + background-image: url(chrome://browser/skin/bookmark-12.svg); + fill: var(--toolbar-field-icon-fill-attention); +} + +.urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon { + background-image: url(chrome://browser/skin/pin-12.svg); + fill: rgb(91,91,102); +} + +:root[lwt-toolbar-field-focus-brighttext] .urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon { + fill: rgb(251,251,254); +} + +/* Buttons */ + +.urlbarView-button { + display: inline-block; + min-width: 24px; + min-height: 24px; + vertical-align: middle; + background-size: 16px; + background-position: center; + background-repeat: no-repeat; + margin-inline: 4px; + -moz-context-properties: fill, fill-opacity; + border-radius: var(--toolbarbutton-border-radius); +} + +.urlbarView-button[selected] { + outline: var(--focus-outline); +} + +.urlbarView-button:hover, +.urlbarView-button[open] { + background-color: var(--autocomplete-popup-hover-background); +} + +.urlbarView-button + .urlbarView-button { + margin-inline-start: 0; +} + +.urlbarView-button-block { + background-image: url("chrome://browser/skin/thumb-down.svg"); +} + +.urlbarView-button-help { + background-image: url("chrome://global/skin/icons/help.svg"); +} + +.urlbarView-button-menu { + background-image: url("chrome://global/skin/icons/more.svg"); +} + +.urlbarView-button:not(:empty) { + min-height: 16px; + padding: 7px; +} + +/* The tip button is a Photon default button when unfocused and a + primary button in all other states. */ +.urlbarView-button:not(:empty) { + border-radius: var(--toolbarbutton-border-radius); + font-size: 0.93em; + background-color: var(--button-bgcolor); + font-weight: 600; + background-clip: padding-box; + min-width: 8.75em; + text-align: center; + flex-basis: initial; + flex-shrink: 0; + margin-inline-end: 4px; +} + +.urlbarView-button:not(:empty):hover { + background-color: var(--button-hover-bgcolor); +} + +.urlbarView-button:not(:empty):hover:active { + background-color: var(--button-active-bgcolor); +} + +.urlbarView-button:not(:empty)[selected] { + color: var(--button-primary-color); + background-color: var(--button-primary-bgcolor); + outline: var(--focus-outline); + outline-offset: 2px; +} + +.urlbarView-button:not(:empty)[selected]:hover { + background-color: var(--button-primary-hover-bgcolor); +} + +.urlbarView-button:not(:empty)[selected]:hover:active { + background-color: var(--button-primary-active-bgcolor); +} + +.urlbarView-button:not(:empty) + .urlbarView-button:empty { + /* Add space between a labeled button followed by an unlabeled button. */ + margin-inline-start: 1.8em; +} + +.urlbarView-button:not(:empty):last-child { + /* Add space between a labeled button and the trailing edge of the panel. */ + margin-inline-end: 1.8em; +} + +/* When the last button is unlabeled, vertically align it with the settings icon + in the search shortcuts. */ +.urlbarView-button:empty:last-child { + margin-inline-end: 2px; +} + +/* Tip rows */ + +.urlbarView-row[type=tip] { + padding-block: 18px; +} + +.urlbarView-row[type=tip]:not(:last-child) { + border-bottom: 1px solid var(--panel-separator-color); + margin-bottom: 4px; +} + +.urlbarView-row[type=tip]:not(:first-child) { + border-top: 1px solid var(--panel-separator-color); + margin-top: 4px; +} + +.urlbarView-row[type=tip] > .urlbarView-row-inner { + min-height: 32px; + + /* Add space between the tip title (and the rest of row-inner) and its + button. */ + margin-inline-end: 1.8em; +} + +.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator, +.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-url { + display: none; +} + +.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title { + white-space: normal; +} + +/* Row label (a.k.a. group label) */ + +.urlbarView-row[label]::before { + content: attr(label); + display: block; + /* Remove the label from the document flow so it doesn't affect the row + selection and hover states. */ + position: absolute; + /* `top` controls how far the label is from the main part of the row. */ + top: -1.27em; + margin-inline-start: var(--urlbarView-item-inline-padding); + font-size: 0.8em; + /* The color and opacity of labels is the same as the "This time, search with" + text in the search shortcuts. See `.search-panel-header > label` in + searchbar.inc.css. */ + opacity: 0.6; + pointer-events: none; +} +:root[lwt-toolbar-field-focus-brighttext] .urlbarView-row[label]::before { + /* Same as `.search-panel-header > label` in searchbar.inc.css */ + opacity: 1; +} + +.urlbarView-row[label] { + position: relative; + /* `margin-block-start` controls how far the main part of the row is from the + main part of the previous row. */ + margin-block-start: 1.46em; +} + +/* Title */ + +.urlbarView-title { + overflow: hidden; + white-space: nowrap; + /* Explicitly set line-height to avoid excessively tall rows if the title triggers use of + fallback fonts with extreme metrics. */ + line-height: 1.4; +} + +/* Tail suggestions */ +.urlbarView-tail-prefix { + display: none; + justify-content: flex-end; + white-space: pre; +} + +.urlbarView-row[tail-suggestion] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-tail-prefix { + display: inline-flex; +} + +.urlbarView-tail-prefix > .urlbarView-tail-prefix-string { + visibility: hidden; +} + +.urlbarView-tail-prefix > .urlbarView-tail-prefix-char { + position: absolute; +} + +/* Title separator */ + +.urlbarView-title-separator::before { + content: "\2014"; + margin: 0 .4em; + opacity: 0.6; +} + +.urlbarView-title:empty + .urlbarView-tags:empty + .urlbarView-title-separator { + display: none; +} + +/* URLs, action labels, tags */ + +.urlbarView-tags, +.urlbarView-url, +.urlbarView-title:not(:empty) ~ .urlbarView-action { + font-size: .85em; +} + +.urlbarView-title:not(:empty) ~ .urlbarView-action { + color: var(--urlbar-popup-action-color); +} + +.urlbarView-row[sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action { + color: unset; + opacity: .6; +} + +.urlbarView-row[sponsored][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action, +.urlbarView-row[sponsored] > .urlbarView-row-inner[selected] > .urlbarView-no-wrap > .urlbarView-action { + opacity: 1; +} + +/* Firefox Suggest sponsored results */ + +.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner { + /* 0px of top padding because the space between the favicon/title and the top + edge of the row is determined by the favicon margin-top and we don't want + any extra padding to complicate that. 1px of bottom padding so the bottom + edge of the action isn't touching the bottom edge of the row. The space + between the bottom edge of the favicon and the bottom edge of the row is + determined by this + the action margin-top. */ + padding-block: 0 1px; +} + +.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap { + /* Wrap the action span onto a new row. */ + flex-wrap: wrap; +} + +.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { + /* The favicon should be vertically centered in the row. The action span wraps + below the favicon and title, leaving the favicon centered with the title, + not the row, so we add margin-top. Normally there is 8x between the top + edge of the favicon and the top edge of the row. Here 1em = 13.75px, so + that's 8 / 13.75 =~ 0.58em. */ + margin-top: 0.58em; +} + +.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title { + /* The width of favicon + this title element + help icon is over than total + displayed width, favicon and title will collapse as different row, the style + will be broken. To avoid it, we specify the max displayable width for title + explicitly. */ + flex-basis: calc(100% - var(--urlbarView-favicon-width) - var(--urlbarView-icon-margin-end)); + /* Move the title away from the action a little. This does not affect the + height of the row. */ + margin-top: -0.3em; +} + +.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action { + flex-basis: 100%; + margin-inline-start: calc(var(--urlbarView-favicon-width) + var(--urlbarView-icon-margin-end)); + font-size: 0.73em; + /* This value + the bottom padding control the space between the bottom edge + of the favicon and the bottom edge of the row. The bottom padding is 1px, + leaving 8px - 1px = 7px we need to make up here. Here 1em = 0.73 * 13.75 =~ + 10px, so that's 7 / 10 = 0.7em. However, the action itself takes up some of + that space, so it's not that simple. The value used here was arrived at by + trial and error and is approximately 5px. */ + margin-top: -0.5em; +} + +@media (prefers-reduced-motion: no-preference) { + /* The slide-in effect is delayed ~100ms to reduce motion during result + composition. We set opacity: 0 at the 0% keyframe to ensure the text is not + seen by the user until after the delay. */ + @keyframes urlbarView-action-slide-in { + 0%, 28.6% { + translate: var(--urlbarView-action-slide-in-distance); + opacity: 0; + } + 100% { + translate: 0; + opacity: 1; + } + } + + .urlbarView-results > .urlbarView-row > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title:not(:empty) ~ .urlbarView-action[slide-in] { + animation-name: urlbarView-action-slide-in; + animation-duration: 350ms; + animation-timing-function: var(--animation-easing-function); + } +} + +.urlbarView-url { + overflow: hidden; + color: var(--urlbar-popup-url-color); + /* Increase line-height to avoid cutting overhanging glyphs due to masking on + the element */ + line-height: 1.4; +} + +.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-no-wrap >.urlbarView-action, +.urlbarView-row:hover > .urlbarView-row-inner > .urlbarView-no-wrap >.urlbarView-action, +.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-url, +.urlbarView-row-inner[selected] > .urlbarView-no-wrap >.urlbarView-action, +.urlbarView-row-inner:hover > .urlbarView-no-wrap >.urlbarView-action, +.urlbarView-row-inner[selected] > .urlbarView-url, +.urlbarView-row[type=tabtosearch][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { + color: inherit; +} + +.urlbarView-row:is([type=remotetab], [sponsored]):not([selected], :hover) > .urlbarView-row-inner > .urlbarView-url, +.urlbarView-row:is([type=search], [restyled-search]):not([selected], [show-action-text], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator, +.urlbarView-row:not([has-action], [has-url], [restyled-search]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator, +.urlbarView:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-url { + /* Use visibility:collapse instead of display:none since the latter can + confuse the overflow state of title and url elements when their content + changes while they're hidden. */ + visibility: collapse; +} + +.urlbarView-row[has-url]:is([type=remotetab], [sponsored]):is([selected], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action, +.urlbarView-row:is([type=search], [restyled-search]):not([selected], [show-action-text], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action, +.urlbarView-row:not([has-action], [has-url], [restyled-search]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action, +.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator, +.urlbarView[actionoverride] .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action { + display: none; +} + +/* Switch-to-tab action text is styled as a chiclet. */ +.urlbarView-row:is([type=switchtab], [type=remotetab]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action { + color: var(--urlbar-box-text-color); + background-color: var(--urlbar-box-focus-bgcolor); + border-radius: var(--toolbarbutton-border-radius); + padding: 6px 8px; + margin-block: -6px; + margin-inline-start: 8px; +} + +:root[uidensity=compact] .urlbarView-row:is([type=switchtab], [type=remotetab]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action { + padding: 3px 6px; + margin-block: -3px; +} + +/* On hover and selected the chiclet background would fade into the row style, + thus we invert the background, using the panel color, instead. */ +.urlbarView-row:is([type=switchtab], [type=remotetab]):is([selected], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action { + background-color: var(--toolbar-field-focus-background-color); + color: var(--toolbar-field-focus-color); +} + +.urlbarView-row[type=remotetab]:not([selected], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator::before, +.urlbarView:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator::before { + /* We make the title separator transparent so it stays in the accessibility + tree. We want screen readers to pause between the result title and the + switch-to-tab action text. */ + opacity: 0; + /* -1em for the width of the \2014 character. -.4em to offset the + margin-inline-start already set on this element. */ + margin-inline-end: -1.4em; +} + +/* Tags */ + +.urlbarView-tags { + overflow: hidden; + display: flex; + /* Increase line-height to avoid cutting overhanging glyphs due to masking on + the element */ + line-height: 1.4; +} + +.urlbarView-tag { + border: 1px solid color-mix(in srgb, currentColor 30%, transparent); + padding: 0 4px; + margin-inline-start: .4em; + border-radius: 4px; +} + +/* Best match */ + +.urlbarView-row[type=bestmatch] > .urlbarView-row-inner { + align-items: center; + justify-content: start; +} + +.urlbarView-row[type=bestmatch] > .urlbarView-row-inner, +.urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner { + flex-wrap: nowrap; +} + +.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-favicon { + width: 52px; + height: 52px; + flex-basis: 52px; + flex-shrink: 0; + flex-grow: 0; + border-radius: 2px; +} + +.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body { + flex-grow: 1; + flex-shrink: 1; + min-width: 0; +} + +.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + align-items: center; + justify-content: start; +} + +.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + align-items: center; + justify-content: start; + flex-shrink: 0; + min-width: 0; +} + +.urlbarView-results:not([wrap]) > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap { + /* Limit the title (which is inside .urlbarView-row-body-top-no-wrap) to 70% + of the width so the URL is never completely hidden. */ + max-width: 70%; +} + +.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-bottom { + font-size: 0.73em; + opacity: 0.6; +} + +.urlbarView-row[type=bestmatch][selected] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-bottom, +.urlbarView-row[type=bestmatch] > .urlbarView-row-inner[selected] > .urlbarView-row-body > .urlbarView-row-body-bottom { + opacity: 1; +} + +/* Search one-offs */ + +#urlbar .search-one-offs:not([hidden]) { + display: flex; + align-items: start; + padding-block: 10px; + flex-wrap: wrap; +} + +.urlbarView:not([noresults]) > .search-one-offs:not([hidden]) { + border-top: 1px solid var(--autocomplete-popup-separator-color); +} + +:root[uidensity=touch] #urlbar .search-one-offs:not([hidden]) { + padding-block: 15px; +} + +#urlbar .search-panel-one-offs-container { + /* Make sure horizontally we can fit four buttons, empty space, settings. */ + min-width: calc(4 * /* one-off with end margin */ 40px + /* settings with start margin */ 56px); +} + +#urlbar .search-panel-header { + padding: 0; + min-height: 28px; + display: flex; + flex-direction: column; + justify-content: center; +} + +#urlbar .search-panel-one-offs-header-label { + white-space: nowrap; + margin: 0; + padding-inline: var(--urlbarView-item-inline-padding) 18px; +} + +#urlbar .searchbar-engine-one-off-item { + min-width: 28px; + height: 28px; + margin-inline: 0 12px; + border-radius: var(--toolbarbutton-border-radius); +} + +#urlbar .searchbar-engine-one-off-item:last-child { + /* This applies to both the last one-off and the compact settings button */ + margin-inline-end: 0; +} + +#urlbar .search-setting-button { + /* Force empty space before the button */ + margin-inline-start: calc(32px - /* settings start padding */ 8px ); +} + +.urlbarView-row[source="bookmarks"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon, +#urlbar-engine-one-off-item-bookmarks { + list-style-image: url("chrome://browser/skin/bookmark.svg"); + fill: var(--toolbar-field-icon-fill-attention); + fill-opacity: 1; + -moz-context-properties: fill, fill-opacity; +} + +.urlbarView-row[source="tabs"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon, +#urlbar-engine-one-off-item-tabs { + list-style-image: url("chrome://browser/skin/tab.svg"); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: var(--urlbar-icon-fill-opacity); +} + +.urlbarView-row[source="history"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon, +#urlbar-engine-one-off-item-history { + list-style-image: url("chrome://browser/skin/history.svg"); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: var(--urlbar-icon-fill-opacity); +} + +.urlbarView-row[source="actions"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon, +#urlbar-engine-one-off-item-actions { + list-style-image: url("chrome://browser/skin/quickactions.svg"); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: var(--urlbar-icon-fill-opacity); +} + +/** + * We remove the blue fill from the bookmark icon when it is selected. We use + * a blue color as the selection background-color in some instances (Linux with + * blue system color; fallback for third-party themes) and we want to ensure + * contrast. + */ +.urlbarView-row[source="bookmarks"][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon, +#urlbar-engine-one-off-item-bookmarks[selected] { + fill: currentColor; + fill-opacity: var(--urlbar-icon-fill-opacity); +} + +/* search bar popup */ + +#PopupSearchAutoComplete { + --panel-color: var(--toolbar-field-focus-color); + --panel-background: var(--toolbar-field-focus-background-color); + --panel-border-color: var(--arrowpanel-border-color); +} + +#PopupSearchAutoComplete::part(content) { + --panel-padding: var(--panel-subview-body-padding); + /* NOTE(emilio): Once bug 1551637 is fixed we don't need to use block layout + * for this (though it doesn't really hurt) */ + display: block; +} + +@media not (prefers-contrast) { + #PopupSearchAutoComplete::part(content) { + /* Remove the top border since the panel is flush with the input. */ + border-top-width: 0; + } +} + +#PopupSearchAutoComplete .autocomplete-richlistitem[selected] { + background: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); +} diff --git a/browser/themes/shared/weather/cloudy.svg b/browser/themes/shared/weather/cloudy.svg new file mode 100644 index 0000000000..7f32d9f52f --- /dev/null +++ b/browser/themes/shared/weather/cloudy.svg @@ -0,0 +1,24 @@ + + + + + + diff --git a/browser/themes/shared/weather/flurries.svg b/browser/themes/shared/weather/flurries.svg new file mode 100644 index 0000000000..3c4fe0df38 --- /dev/null +++ b/browser/themes/shared/weather/flurries.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/fog.svg b/browser/themes/shared/weather/fog.svg new file mode 100644 index 0000000000..e567a1ddf4 --- /dev/null +++ b/browser/themes/shared/weather/fog.svg @@ -0,0 +1,26 @@ + + + + + + + + diff --git a/browser/themes/shared/weather/freezing-rain.svg b/browser/themes/shared/weather/freezing-rain.svg new file mode 100644 index 0000000000..447a74914a --- /dev/null +++ b/browser/themes/shared/weather/freezing-rain.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/hazy-sunshine.svg b/browser/themes/shared/weather/hazy-sunshine.svg new file mode 100644 index 0000000000..62cdcb3fc3 --- /dev/null +++ b/browser/themes/shared/weather/hazy-sunshine.svg @@ -0,0 +1,26 @@ + + + + + + + + diff --git a/browser/themes/shared/weather/hot.svg b/browser/themes/shared/weather/hot.svg new file mode 100644 index 0000000000..65caf9975a --- /dev/null +++ b/browser/themes/shared/weather/hot.svg @@ -0,0 +1,39 @@ + + + + + + + + + diff --git a/browser/themes/shared/weather/ice.svg b/browser/themes/shared/weather/ice.svg new file mode 100644 index 0000000000..8b83d83726 --- /dev/null +++ b/browser/themes/shared/weather/ice.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/mostly-cloudy-with-showers.svg b/browser/themes/shared/weather/mostly-cloudy-with-showers.svg new file mode 100644 index 0000000000..3d1b8817d3 --- /dev/null +++ b/browser/themes/shared/weather/mostly-cloudy-with-showers.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/mostly-cloudy-with-thunderstorms.svg b/browser/themes/shared/weather/mostly-cloudy-with-thunderstorms.svg new file mode 100644 index 0000000000..3d5de2b43e --- /dev/null +++ b/browser/themes/shared/weather/mostly-cloudy-with-thunderstorms.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/mostly-sunny.svg b/browser/themes/shared/weather/mostly-sunny.svg new file mode 100644 index 0000000000..c5cd0329ef --- /dev/null +++ b/browser/themes/shared/weather/mostly-sunny.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/night-clear.svg b/browser/themes/shared/weather/night-clear.svg new file mode 100644 index 0000000000..d988b15ba1 --- /dev/null +++ b/browser/themes/shared/weather/night-clear.svg @@ -0,0 +1,17 @@ + + + + + diff --git a/browser/themes/shared/weather/night-hazy-moonlight.svg b/browser/themes/shared/weather/night-hazy-moonlight.svg new file mode 100644 index 0000000000..54ea87b240 --- /dev/null +++ b/browser/themes/shared/weather/night-hazy-moonlight.svg @@ -0,0 +1,30 @@ + + + + + + + + + diff --git a/browser/themes/shared/weather/night-mostly-clear.svg b/browser/themes/shared/weather/night-mostly-clear.svg new file mode 100644 index 0000000000..39cb2c22e3 --- /dev/null +++ b/browser/themes/shared/weather/night-mostly-clear.svg @@ -0,0 +1,24 @@ + + + + + + diff --git a/browser/themes/shared/weather/night-mostly-cloudy-with-flurries.svg b/browser/themes/shared/weather/night-mostly-cloudy-with-flurries.svg new file mode 100644 index 0000000000..2417bf56c8 --- /dev/null +++ b/browser/themes/shared/weather/night-mostly-cloudy-with-flurries.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/night-partly-cloudy-with-showers.svg b/browser/themes/shared/weather/night-partly-cloudy-with-showers.svg new file mode 100644 index 0000000000..e63ae59e72 --- /dev/null +++ b/browser/themes/shared/weather/night-partly-cloudy-with-showers.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/night-partly-cloudy-with-thunderstorms.svg b/browser/themes/shared/weather/night-partly-cloudy-with-thunderstorms.svg new file mode 100644 index 0000000000..d301a02ff0 --- /dev/null +++ b/browser/themes/shared/weather/night-partly-cloudy-with-thunderstorms.svg @@ -0,0 +1,31 @@ + + + + + + + diff --git a/browser/themes/shared/weather/partly-sunny-with-flurries.svg b/browser/themes/shared/weather/partly-sunny-with-flurries.svg new file mode 100644 index 0000000000..aeaf0ac59c --- /dev/null +++ b/browser/themes/shared/weather/partly-sunny-with-flurries.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/partly-sunny.svg b/browser/themes/shared/weather/partly-sunny.svg new file mode 100644 index 0000000000..12a253b11c --- /dev/null +++ b/browser/themes/shared/weather/partly-sunny.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + diff --git a/browser/themes/shared/weather/rain.svg b/browser/themes/shared/weather/rain.svg new file mode 100644 index 0000000000..f581c0f5a3 --- /dev/null +++ b/browser/themes/shared/weather/rain.svg @@ -0,0 +1,26 @@ + + + + + + + + diff --git a/browser/themes/shared/weather/showers.svg b/browser/themes/shared/weather/showers.svg new file mode 100644 index 0000000000..829f65f819 --- /dev/null +++ b/browser/themes/shared/weather/showers.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + diff --git a/browser/themes/shared/weather/snow.svg b/browser/themes/shared/weather/snow.svg new file mode 100644 index 0000000000..3bfccfd250 --- /dev/null +++ b/browser/themes/shared/weather/snow.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/sunny.svg b/browser/themes/shared/weather/sunny.svg new file mode 100644 index 0000000000..7a28d4aedd --- /dev/null +++ b/browser/themes/shared/weather/sunny.svg @@ -0,0 +1,17 @@ + + + + + diff --git a/browser/themes/shared/weather/thunderstorms.svg b/browser/themes/shared/weather/thunderstorms.svg new file mode 100644 index 0000000000..d6e1ce099d --- /dev/null +++ b/browser/themes/shared/weather/thunderstorms.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + diff --git a/browser/themes/shared/weather/windy.svg b/browser/themes/shared/weather/windy.svg new file mode 100644 index 0000000000..bc8dccad7c --- /dev/null +++ b/browser/themes/shared/weather/windy.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + diff --git a/browser/themes/shared/webRTC-indicator.css b/browser/themes/shared/webRTC-indicator.css new file mode 100644 index 0000000000..6e6b1166ee --- /dev/null +++ b/browser/themes/shared/webRTC-indicator.css @@ -0,0 +1,346 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + appearance: none; + background: transparent; + border: 0; + border-radius: 5px; + --indicator-height: 32px; + --indicator-background-color: rgb(249,249,250); + --indicator-color: rgb(12,12,13); + --indicator-border-color: hsla(0,0%,0%,.32); + --indicator-icon-fill-opacity: 0.8; + --indicator-item-separator: 1px solid hsla(210,4%,10%,.14); + --indicator-stop-button-background-color: rgb(0,96,223); + --indicator-stop-button-hover-background-color: rgb(0,62,170); + --indicator-stop-button-color: rgb(255,255,255); + --minimize-button-background-color: hsla(240,5%,5%,.1); + --minimize-button-hover-background-color: hsla(240,5%,5%,.15); + --minimize-button-active-background-color: hsla(240,5%,5%,.2); + --control-icon-unchecked-hover-background-color: hsla(0,0%,70%,.4); + --control-icon-unchecked-active-background-color: hsla(0,0%,70%,.6); + --control-icon-checked-background-color: hsla(10,100%,50%,.16); + --control-icon-checked-icon-fill: rgb(215,0,34); + --control-icon-checked-hover-background-color: hsla(10,100%,50%,.24); + --control-icon-checked-active-background-color: hsla(10,100%,50%,.32); + max-height: var(--indicator-height); +} + +@media (prefers-color-scheme: dark) { + :root { + --indicator-background-color: hsl(240, 1%, 20%); + --indicator-color: rgb(249, 249, 250); + --indicator-border-color: hsl(240, 1%, 40%); + --indicator-item-separator: 1px solid rgb(249, 249, 250); + --minimize-button-background-color: rgba(249,249,250,0.1); + --minimize-button-hover-background-color: rgba(249,249,250,0.15); + --minimize-button-active-background-color: rgba(249,249,250,0.2); + --control-icon-unchecked-hover-background-color: rgba(249,249,250,0.15); + --control-icon-unchecked-active-background-color: rgba(249,249,250,0.2); + --control-icon-checked-background-color: hsla(343,100%,58%,.16); + --control-icon-checked-icon-fill: rgb(255,40,102); + --control-icon-checked-hover-background-color: hsla(343,100%,58%,.24); + --control-icon-checked-active-background-color: hsla(343,100%,58%,.32); + } +} + +body { + display: inline-flex; + background-color: var(--indicator-background-color); + color: var(--indicator-color); + margin: 0; + user-select: none; + -moz-window-dragging: drag; + /** + * On macOS, for windows with small enough dimensions, we seem to get + * vertical scrollbars on the body, even when the contents initially + * fit the window. We sidestep this by making sure we never display + * scrollbars. + */ + overflow: hidden; + cursor: move; + border: 1px solid; + border-color: var(--indicator-border-color); + /* max-height = indicator height minus top and bottom border */ + max-height: calc(var(--indicator-height) - 2px); +} + +button, +input[type="checkbox"] { + appearance: none; + border-style: none; + margin: 0; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: var(--indicator-icon-fill-opacity); + background-repeat: no-repeat; + -moz-window-dragging: no-drag; + color: inherit; +} + +.row-item { + display: flex; + align-items: center; + min-width: 30px; + margin-block: 5px; + margin-inline: 0 5px; + box-sizing: border-box; + padding: 0 5px; +} + +.separator { + border-inline-end: var(--indicator-item-separator); + min-width: 1px; + padding: 0; +} + +/** + * For display sharing, if we happen to be sharing both + * a window and a screen, we want to show the UI for sharing + * the screen, since that's the more privacy-sensitive one. + */ +:root[sharingwindow]:not([sharingscreen]) > body > #display-share > #screen-share-info, +:root[sharingwindow]:not([sharingbrowserwindow]) > body > #display-share > #browser-window-share-info, +:root[sharingwindow][sharingbrowserwindow] > body > #display-share > #window-share-info, +:root[sharingscreen] > body > #display-share > #window-share-info, +:root[sharingscreen] > body > #display-share > #browser-window-share-info, + +/** + * If we're not sharing either the screen or the window, we can + * hide the entire display sharing section. + */ +:root:not([sharingscreen],[sharingwindow]) > body > #display-share, +:root:not([sharingscreen],[sharingwindow]) > body > #display-share + .separator, +:root:not([sharingvideo]) > body > #device-share > #camera-mute-toggle, +:root:not([sharingaudio]) > body > #device-share > #microphone-mute-toggle, +:root:not([sharingvideo],[sharingaudio]) > body > #device-share, +:root:not([sharingvideo],[sharingaudio]) > body > #device-share + .separator { + display:none; +} + +xul|menu { + overflow: hidden; + min-height: 0 !important; + height: 0 !important; + width: 0 !important; + appearance: none !important; + padding: 0 !important; +} + +.control-icon { + background-position: center; + background-size: 16px; + background-color: transparent; + padding: 10px 16px; + border-radius: 5px; +} + +.control-icon + .control-icon { + margin-inline-start: 6px; +} + +.control-icon:hover { + background-color: var(--control-icon-unchecked-hover-background-color); +} + +.control-icon:active { + background-color: var(--control-icon-unchecked-active-background-color); +} + +.control-icon:checked { + background-color: var(--control-icon-checked-background-color); + -moz-context-properties: fill; + fill: var(--control-icon-checked-icon-fill); +} + +.control-icon:checked:hover { + background-color: var(--control-icon-checked-hover-background-color); +} + +.control-icon:checked:active { + background-color: var(--control-icon-checked-active-background-color); +} + +#display-share-icon { + background-image: url("chrome://browser/skin/notification-icons/screen.svg"); + width: 16px; + height: 16px; + margin-inline: 5px 10px; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: var(--indicator-icon-fill-opacity); +} + +#camera-mute-toggle { + background-image: url("chrome://browser/skin/notification-icons/camera.svg"); +} + +#camera-mute-toggle:checked { + background-image: url("chrome://browser/skin/notification-icons/camera-blocked.svg"); +} + +#microphone-mute-toggle { + background-image: url("chrome://browser/skin/notification-icons/microphone.svg"); +} + +#microphone-mute-toggle:checked { + background-image: url("chrome://browser/skin/notification-icons/microphone-blocked.svg"); +} + +.stop-button { + background-color: var(--indicator-stop-button-background-color); + color: var(--indicator-stop-button-color); + border-radius: 5px; + padding: 3px 5px; + margin-inline-start: 15px; +} + +.stop-button:hover { + background-color: var(--indicator-stop-button-hover-background-color); +} + +#window-controls { + display: flex; + flex-direction: column; + align-items: center; +} + +#minimize { + padding: 10px; + min-width: unset; + background-image: url("chrome://browser/skin/notification-icons/minimize.svg"); + background-color: var(--minimize-button-background-color); +} + +#minimize:hover { + background-color: var(--minimize-button-hover-background-color); +} + +#minimize:active { + background-color: var(--minimize-button-active-background-color); +} + +#drag-indicator { + background-image: url("chrome://browser/skin/notification-icons/drag-indicator.svg"); + background-repeat: no-repeat; + background-position: center; + width: 5px; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.4; + margin: 5px; +} + +#webRTC-sharingCamera-menu, +#webRTC-sharingMicrophone-menu, +#webRTC-sharingScreen-menu { + -moz-context-properties: fill; + fill: currentColor; +} + +#webRTC-sharingCamera-menu { + list-style-image: url("chrome://browser/skin/notification-icons/camera.svg"); +} + +#webRTC-sharingMicrophone-menu { + list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg"); +} + +#webRTC-sharingScreen-menu { + list-style-image: url("chrome://browser/skin/notification-icons/screen.svg"); +} + +#webRTC-sharingCamera-menu > menupopup, +#webRTC-sharingMicrophone-menu > menupopup, +#webRTC-sharingScreen-menu > menupopup { + list-style-image: none; /* don't inherit into menu items */ +} + +@media (-moz-platform: macos) { + /** + * On macOS, the ordering of the drag indicator and window controls is reversed + * to be more native. We re-order all items including their separators so that + * the markup and separator hiding and showing logic in the shared CSS file + * doesn't need to be macOS-specific. + */ + #window-controls { + order: 1; + } + + #display-share + .separator { + order: 2; + } + + #display-share { + order: 3; + } + + #device-share + .separator { + order: 4; + } + + #device-share { + order: 5; + } + + #drag-indicator { + order: 6; + } + + /** + * The minimize button on macOS should be circular, and the icon should be + * centered. The asset we have for the minimize icon puts it along the bottom, + * so we manually offset it here. + */ + #minimize { + background-position: center -5px; + padding: 8px; + border: 1px solid transparent; + border-radius: 1000px; + } +} + +@media (-moz-platform: windows) { + @media (-moz-windows-default-theme: 0) { + :root { + --indicator-background-color: -moz-Dialog; + --indicator-color: -moz-DialogText; + --indicator-border-color: InactiveBorder; + --indicator-item-separator: 1px solid ThreeDShadow; + --indicator-stop-button-background-color: hsla(0,0%,70%,.2); + --indicator-stop-button-hover-background-color: hsla(0,0%,70%,.4); + --indicator-stop-button-color: inherit; + --minimize-button-background-color: hsla(0,0%,70%,.2); + --minimize-button-hover-background-color: hsla(0,0%,70%,.4); + --minimize-button-active-background-color: hsla(0,0%,70%,.6); + --control-icon-unchecked-hover-background-color: hsla(0,0%,70%,.2); + --control-icon-unchecked-active-background-color: hsla(0,0%,70%,.6); + --control-icon-checked-background-color: SelectedItem; + --control-icon-checked-icon-fill: SelectedItemText; + --control-icon-checked-hover-background-color: hsla(0,0%,70%,.2); + --control-icon-checked-active-background-color: hsla(0,0%,70%,.6); + } + + #minimize, + .stop-button { + border: 1px outset ThreeDLightShadow; + } + } + + #webRTC-sharingCamera-menu { + list-style-image: url("chrome://browser/skin/notification-icons/camera.png"); + } + + #webRTC-sharingMicrophone-menu { + list-style-image: url("chrome://browser/skin/notification-icons/microphone.png"); + } + + #webRTC-sharingScreen-menu { + list-style-image: url("chrome://browser/skin/notification-icons/screen.png"); + } +} diff --git a/browser/themes/shared/webRTC-legacy-indicator.css b/browser/themes/shared/webRTC-legacy-indicator.css new file mode 100644 index 0000000000..5c6443fba1 --- /dev/null +++ b/browser/themes/shared/webRTC-legacy-indicator.css @@ -0,0 +1,121 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +window { + border: 1px solid #ff9500; +} + +#audioVideoButton, +#screenShareButton, +#firefoxButton { + height: 29px; + margin: 0; + appearance: none; + border-style: none; +} + +#audioVideoButton, +#screenShareButton { + -moz-context-properties: fill; + fill: white; +} + +#firefoxButton { + background-image: url("chrome://branding/content/icon48.png"); + background-repeat: no-repeat; + background-size: 22px; + background-position: center center; + min-width: 29px; + background-color: white; +} + +#firefoxButton:hover { + background-color: #f2f2f2; +} + +#screenShareButton { + background-image: url("chrome://browser/skin/notification-icons/screen.svg"); + background-position: center center; + background-repeat: no-repeat; + background-size: 16px; + min-width: 27px; + display: none; +} + +window[sharingscreen] > #screenShareButton { + display: -moz-box; +} + +#audioVideoButton { + display: none; + background-repeat: no-repeat; +} + +/* When screen sharing, need to pull in the separator: */ +window[sharingscreen] > #audioVideoButton { + margin-right: -1px; +} + +/* Single icon button: */ +window[sharingvideo] > #audioVideoButton, +window[sharingaudio] > #audioVideoButton { + display: -moz-box; + background-position: center center; + background-size: 16px; + min-width: 26px; +} + +window[sharingvideo] > #audioVideoButton { + background-image: url("chrome://browser/skin/notification-icons/camera.svg"); +} + +window[sharingaudio] > #audioVideoButton { + background-image: url("chrome://browser/skin/notification-icons/microphone.svg"); +} + +/* Multi-icon button: */ +window[sharingaudio][sharingvideo] > #audioVideoButton { + background-image: url("chrome://browser/skin/notification-icons/camera.svg"), + url("chrome://browser/skin/notification-icons/microphone.svg"); + background-position: 6px center, 26px center; + background-size: 16px, 16px; + min-width: 46px; +} + +/* Hover styles */ +#audioVideoButton, +#screenShareButton { + background-color: #ffaa33; +} + +#audioVideoButton:hover, +#screenShareButton:hover { + background-color: #ff9500; +} + +/* Don't show the dropmarker for the type="menu" case */ +#audioVideoButton > .box-inherit > .button-menu-dropmarker, +#screenShareButton > .box-inherit > .button-menu-dropmarker { + display: none; +} + +/* Separator in case of screen sharing + video/audio sharing */ +#shareSeparator { + width: 1px; + margin: 4px -1px 4px 0; + background-color: #FFCA80; + /* Separator needs to show above either button when they're hovered: */ + position: relative; + z-index: 1; + display: none; +} + +window[sharingscreen][sharingvideo] > #shareSeparator, +window[sharingscreen][sharingaudio] > #shareSeparator { + display: -moz-box; +} + +:is(#audioVideoButton, #screenShareButton, #firefoxButton):-moz-focusring { + outline: none; +} diff --git a/browser/themes/shared/webRTC-menubar-indicator.css b/browser/themes/shared/webRTC-menubar-indicator.css new file mode 100644 index 0000000000..0183efdef4 --- /dev/null +++ b/browser/themes/shared/webRTC-menubar-indicator.css @@ -0,0 +1,28 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +#webRTC-sharingCamera-menu, +#webRTC-sharingMicrophone-menu, +#webRTC-sharingScreen-menu { + -moz-context-properties: fill; + fill: currentColor; +} + +#webRTC-sharingCamera-menu { + list-style-image: url("chrome://browser/skin/notification-icons/camera.svg"); +} + +#webRTC-sharingMicrophone-menu { + list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg"); +} + +#webRTC-sharingScreen-menu { + list-style-image: url("chrome://browser/skin/notification-icons/screen.svg"); +} + +#webRTC-sharingCamera-menu > menupopup, +#webRTC-sharingMicrophone-menu > menupopup, +#webRTC-sharingScreen-menu > menupopup { + list-style-image: none; /* don't inherit into menu items */ +} -- cgit v1.2.3