From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 02:47:55 +0200 Subject: Adding upstream version 124.0.1. Signed-off-by: Daniel Baumann --- browser/themes/shared/UITour.css | 154 ++ browser/themes/shared/aboutFrameCrashed.css | 12 + browser/themes/shared/aboutRestartRequired.css | 19 + browser/themes/shared/aboutSessionRestore.css | 55 + browser/themes/shared/aboutTabCrashed.css | 40 + browser/themes/shared/aboutWelcomeBack.css | 15 + browser/themes/shared/addon-notification.css | 59 + .../themes/shared/addons/addon-install-blocked.svg | 6 + .../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 | 234 +++ .../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 | 201 ++ browser/themes/shared/blockedSite.css | 71 + browser/themes/shared/browser-custom-colors.css | 92 + browser/themes/shared/browser-shared.css | 1212 +++++++++++ browser/themes/shared/contextmenu.css | 69 + .../controlcenter/3rdpartycookies-blocked.svg | 6 + .../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 | 781 +++++++ .../shared/controlcenter/tracking-protection.svg | 6 + browser/themes/shared/ctrlTab.css | 123 ++ .../themes/shared/customizableui/customizeMode.css | 549 +++++ .../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 | 2213 ++++++++++++++++++++ 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 | 50 + .../themes/shared/downloads/download-summary.svg | 11 + browser/themes/shared/downloads/downloads.inc.css | 257 +++ browser/themes/shared/downloads/downloads.svg | 7 + browser/themes/shared/downloads/indicator.css | 205 ++ .../downloads/notification-finish-animation.svg | 193 ++ .../downloads/notification-start-animation.svg | 144 ++ browser/themes/shared/downloads/progressmeter.css | 87 + browser/themes/shared/drm-icon.svg | 8 + .../themes/shared/formautofill-notification.css | 209 ++ .../shared/formautofill/icon-address-edit.svg | 6 + .../formautofill/icon-capture-address-fields.svg | 6 + .../formautofill/icon-capture-email-fields.svg | 6 + .../shared/formautofill/icon-doorhanger-menu.svg | 8 + browser/themes/shared/fullscreen/warning.css | 49 + 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/firefox-view.svg | 14 + browser/themes/shared/icons/flame.svg | 6 + browser/themes/shared/icons/forget.svg | 6 + browser/themes/shared/icons/forward.svg | 6 + browser/themes/shared/icons/fullscreen-exit.svg | 7 + browser/themes/shared/icons/fullscreen.svg | 6 + browser/themes/shared/icons/history.svg | 7 + browser/themes/shared/icons/home.svg | 6 + browser/themes/shared/icons/import-export.svg | 7 + browser/themes/shared/icons/import.svg | 7 + browser/themes/shared/icons/ion.svg | 4 + browser/themes/shared/icons/library.svg | 9 + browser/themes/shared/icons/login.svg | 6 + browser/themes/shared/icons/logo-android.svg | 6 + browser/themes/shared/icons/logo-ios.svg | 6 + browser/themes/shared/icons/mail.svg | 7 + browser/themes/shared/icons/menu-badged.svg | 8 + browser/themes/shared/icons/menu.svg | 8 + browser/themes/shared/icons/new-tab.svg | 6 + .../themes/shared/icons/notification-fill-12.svg | 6 + browser/themes/shared/icons/open.svg | 6 + browser/themes/shared/icons/pin-12.svg | 6 + browser/themes/shared/icons/privateBrowsing.svg | 6 + browser/themes/shared/icons/quickactions.svg | 6 + browser/themes/shared/icons/reader-mode.svg | 9 + browser/themes/shared/icons/reload-to-stop.svg | 138 ++ browser/themes/shared/icons/save.svg | 7 + browser/themes/shared/icons/screenshot.svg | 4 + browser/themes/shared/icons/sidebars-right.svg | 9 + browser/themes/shared/icons/sidebars.svg | 9 + browser/themes/shared/icons/sort.svg | 11 + browser/themes/shared/icons/stop-to-reload.svg | 173 ++ .../themes/shared/icons/subtract-circle-fill.svg | 7 + browser/themes/shared/icons/success-animation.svg | 107 + browser/themes/shared/icons/sync.svg | 7 + browser/themes/shared/icons/synced-tabs.svg | 12 + browser/themes/shared/icons/tab.svg | 6 + browser/themes/shared/icons/thumb-down.svg | 7 + browser/themes/shared/icons/topsites.svg | 9 + browser/themes/shared/icons/translations.svg | 10 + 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 | 273 +++ .../themes/shared/identity-block/permissions.svg | 9 + .../identity-block/tracking-protection-active.svg | 12 + .../tracking-protection-disabled.svg | 7 + .../shared/identity-block/tracking-protection.svg | 6 + .../shared/identity-credential-notification.css | 86 + .../themes/shared/incontent-icons/tab-crashed.svg | 13 + browser/themes/shared/jar.inc.mn | 287 +++ browser/themes/shared/light-dark-overrides.css | 9 + browser/themes/shared/menupanel.css | 27 + .../shared/migration/migration-dialog-window.css | 9 + .../themes/shared/migration/migration-wizard.css | 384 ++++ browser/themes/shared/migration/progress-mask.svg | 7 + .../themes/shared/migration/safari-icon-3dots.svg | 7 + browser/themes/shared/migration/success.svg | 6 + browser/themes/shared/notification-icons.css | 317 +++ .../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 + browser/themes/shared/notification-icons/popup.svg | 7 + .../shared/notification-icons/screen-blocked.svg | 7 + .../themes/shared/notification-icons/screen.svg | 7 + .../themes/shared/notification-icons/speaker.svg | 8 + .../shared/notification-icons/xr-blocked.svg | 8 + browser/themes/shared/notification-icons/xr.svg | 7 + browser/themes/shared/pageInfo.css | 242 +++ browser/themes/shared/panic-panel/header.png | Bin 0 -> 1880 bytes browser/themes/shared/panic-panel/header@2x.png | Bin 0 -> 4327 bytes browser/themes/shared/panic-panel/icons.png | Bin 0 -> 670 bytes browser/themes/shared/panic-panel/icons@2x.png | Bin 0 -> 1364 bytes browser/themes/shared/places/bookmarksMenu.svg | 9 + browser/themes/shared/places/bookmarksToolbar.svg | 8 + browser/themes/shared/places/editBookmark.css | 160 ++ browser/themes/shared/places/editBookmarkPanel.css | 156 ++ browser/themes/shared/places/folder-smart.svg | 6 + browser/themes/shared/places/organizer-shared.css | 19 + browser/themes/shared/places/sidebar.css | 210 ++ 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 | 50 + browser/themes/shared/preferences/dialog.css | 42 + .../themes/shared/preferences/fxaPairDevice.css | 122 ++ browser/themes/shared/preferences/ios-menu.svg | 6 + browser/themes/shared/preferences/monitor-logo.svg | 4 + browser/themes/shared/preferences/mozilla-logo.svg | 5 + browser/themes/shared/preferences/preferences.css | 1528 ++++++++++++++ browser/themes/shared/preferences/privacy.css | 345 +++ browser/themes/shared/preferences/relay-logo.svg | 7 + .../shared/preferences/search-arrow-indicator.svg | 13 + browser/themes/shared/preferences/search.css | 77 + .../themes/shared/preferences/siteDataSettings.css | 64 + browser/themes/shared/preferences/translations.css | 41 + browser/themes/shared/preferences/vpn-logo.svg | 4 + .../privatebrowsing/aboutPrivateBrowsing.css | 622 ++++++ 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 + browser/themes/shared/sanitizeDialog_v2.css | 98 + .../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 | 139 ++ browser/themes/shared/syncedtabs/sidebar.css | 364 ++++ 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 | 807 +++++++ browser/themes/shared/toolbar-drag-indicator.svg | 4 + browser/themes/shared/toolbarbutton-icons.css | 469 +++++ browser/themes/shared/toolbarbuttons.css | 329 +++ browser/themes/shared/translations/beta.svg | 10 + browser/themes/shared/translations/panel.css | 118 ++ browser/themes/shared/update-badge.svg | 6 + browser/themes/shared/urlbar-dynamic-results.css | 460 ++++ browser/themes/shared/urlbar-searchbar.css | 881 ++++++++ browser/themes/shared/urlbarView.css | 1013 +++++++++ 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-menubar-indicator.css | 28 + 378 files changed, 20852 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-blocked.svg 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/formautofill-notification.css create mode 100644 browser/themes/shared/formautofill/icon-address-edit.svg create mode 100644 browser/themes/shared/formautofill/icon-capture-address-fields.svg create mode 100644 browser/themes/shared/formautofill/icon-capture-email-fields.svg create mode 100644 browser/themes/shared/formautofill/icon-doorhanger-menu.svg create mode 100644 browser/themes/shared/fullscreen/warning.css create mode 100644 browser/themes/shared/fxa/avatar-color.svg create mode 100644 browser/themes/shared/fxa/avatar-empty.svg create mode 100644 browser/themes/shared/fxa/avatar.svg create mode 100644 browser/themes/shared/fxa/fxa-spinner.svg create mode 100644 browser/themes/shared/fxa/monitor.svg create mode 100644 browser/themes/shared/fxa/send-to-device.svg create mode 100644 browser/themes/shared/fxa/send.svg create mode 100644 browser/themes/shared/fxa/sync-devices.svg create mode 100644 browser/themes/shared/fxa/sync-illustration-issue.svg create mode 100644 browser/themes/shared/fxa/sync-illustration.svg create mode 100644 browser/themes/shared/icons/add-circle-fill.svg create mode 100644 browser/themes/shared/icons/back.svg create mode 100644 browser/themes/shared/icons/bookmark-12.svg create mode 100644 browser/themes/shared/icons/bookmark-hollow.svg create mode 100644 browser/themes/shared/icons/bookmark-star-on-tray.svg create mode 100644 browser/themes/shared/icons/bookmark.svg create mode 100644 browser/themes/shared/icons/bookmarks-toolbar.svg create mode 100644 browser/themes/shared/icons/canvas-blocked.svg create mode 100644 browser/themes/shared/icons/canvas.svg create mode 100644 browser/themes/shared/icons/characterEncoding.svg create mode 100644 browser/themes/shared/icons/chevron-animation.svg create mode 100644 browser/themes/shared/icons/customize.svg create mode 100644 browser/themes/shared/icons/device-desktop.svg create mode 100644 browser/themes/shared/icons/device-phone.svg create mode 100644 browser/themes/shared/icons/device-tablet.svg create mode 100644 browser/themes/shared/icons/device-tv.svg create mode 100644 browser/themes/shared/icons/device-vr.svg create mode 100644 browser/themes/shared/icons/edit-cut.svg create mode 100644 browser/themes/shared/icons/edit-paste.svg create mode 100644 browser/themes/shared/icons/fingerprint.svg create mode 100644 browser/themes/shared/icons/firefox-view.svg create mode 100644 browser/themes/shared/icons/flame.svg create mode 100644 browser/themes/shared/icons/forget.svg create mode 100644 browser/themes/shared/icons/forward.svg create mode 100644 browser/themes/shared/icons/fullscreen-exit.svg create mode 100644 browser/themes/shared/icons/fullscreen.svg create mode 100644 browser/themes/shared/icons/history.svg create mode 100644 browser/themes/shared/icons/home.svg create mode 100644 browser/themes/shared/icons/import-export.svg create mode 100644 browser/themes/shared/icons/import.svg create mode 100644 browser/themes/shared/icons/ion.svg create mode 100644 browser/themes/shared/icons/library.svg create mode 100644 browser/themes/shared/icons/login.svg create mode 100644 browser/themes/shared/icons/logo-android.svg create mode 100644 browser/themes/shared/icons/logo-ios.svg create mode 100644 browser/themes/shared/icons/mail.svg create mode 100644 browser/themes/shared/icons/menu-badged.svg create mode 100644 browser/themes/shared/icons/menu.svg create mode 100644 browser/themes/shared/icons/new-tab.svg create mode 100644 browser/themes/shared/icons/notification-fill-12.svg create mode 100644 browser/themes/shared/icons/open.svg create mode 100644 browser/themes/shared/icons/pin-12.svg create mode 100644 browser/themes/shared/icons/privateBrowsing.svg create mode 100644 browser/themes/shared/icons/quickactions.svg create mode 100644 browser/themes/shared/icons/reader-mode.svg create mode 100644 browser/themes/shared/icons/reload-to-stop.svg create mode 100644 browser/themes/shared/icons/save.svg create mode 100644 browser/themes/shared/icons/screenshot.svg create mode 100644 browser/themes/shared/icons/sidebars-right.svg create mode 100644 browser/themes/shared/icons/sidebars.svg create mode 100644 browser/themes/shared/icons/sort.svg create mode 100644 browser/themes/shared/icons/stop-to-reload.svg create mode 100644 browser/themes/shared/icons/subtract-circle-fill.svg create mode 100644 browser/themes/shared/icons/success-animation.svg create mode 100644 browser/themes/shared/icons/sync.svg create mode 100644 browser/themes/shared/icons/synced-tabs.svg create mode 100644 browser/themes/shared/icons/tab.svg create mode 100644 browser/themes/shared/icons/thumb-down.svg create mode 100644 browser/themes/shared/icons/topsites.svg create mode 100644 browser/themes/shared/icons/translations.svg create mode 100644 browser/themes/shared/icons/trending.svg create mode 100644 browser/themes/shared/icons/window.svg create mode 100644 browser/themes/shared/icons/zoom-out.svg create mode 100644 browser/themes/shared/identity-block/identity-block.css create mode 100644 browser/themes/shared/identity-block/permissions.svg create mode 100644 browser/themes/shared/identity-block/tracking-protection-active.svg create mode 100644 browser/themes/shared/identity-block/tracking-protection-disabled.svg create mode 100644 browser/themes/shared/identity-block/tracking-protection.svg create mode 100644 browser/themes/shared/identity-credential-notification.css create mode 100644 browser/themes/shared/incontent-icons/tab-crashed.svg create mode 100644 browser/themes/shared/jar.inc.mn create mode 100644 browser/themes/shared/light-dark-overrides.css create mode 100644 browser/themes/shared/menupanel.css create mode 100644 browser/themes/shared/migration/migration-dialog-window.css create mode 100644 browser/themes/shared/migration/migration-wizard.css create mode 100644 browser/themes/shared/migration/progress-mask.svg create mode 100644 browser/themes/shared/migration/safari-icon-3dots.svg create mode 100644 browser/themes/shared/migration/success.svg create mode 100644 browser/themes/shared/notification-icons.css create mode 100644 browser/themes/shared/notification-icons/autoplay-media-blocked.svg create mode 100644 browser/themes/shared/notification-icons/autoplay-media.svg create mode 100644 browser/themes/shared/notification-icons/camera-blocked.svg create mode 100644 browser/themes/shared/notification-icons/camera.svg create mode 100644 browser/themes/shared/notification-icons/desktop-notification-blocked.svg create mode 100644 browser/themes/shared/notification-icons/desktop-notification.svg create mode 100644 browser/themes/shared/notification-icons/drag-indicator.svg create mode 100644 browser/themes/shared/notification-icons/geo-blocked.svg create mode 100644 browser/themes/shared/notification-icons/geo.svg create mode 100644 browser/themes/shared/notification-icons/microphone-blocked.svg create mode 100644 browser/themes/shared/notification-icons/microphone.svg create mode 100644 browser/themes/shared/notification-icons/midi.svg create mode 100644 browser/themes/shared/notification-icons/minimize.svg create mode 100644 browser/themes/shared/notification-icons/persistent-storage-blocked.svg create mode 100644 browser/themes/shared/notification-icons/persistent-storage.svg create mode 100644 browser/themes/shared/notification-icons/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/speaker.svg create mode 100644 browser/themes/shared/notification-icons/xr-blocked.svg create mode 100644 browser/themes/shared/notification-icons/xr.svg create mode 100644 browser/themes/shared/pageInfo.css create mode 100644 browser/themes/shared/panic-panel/header.png create mode 100644 browser/themes/shared/panic-panel/header@2x.png create mode 100644 browser/themes/shared/panic-panel/icons.png create mode 100644 browser/themes/shared/panic-panel/icons@2x.png create mode 100644 browser/themes/shared/places/bookmarksMenu.svg create mode 100644 browser/themes/shared/places/bookmarksToolbar.svg create mode 100644 browser/themes/shared/places/editBookmark.css create mode 100644 browser/themes/shared/places/editBookmarkPanel.css create mode 100644 browser/themes/shared/places/folder-smart.svg create mode 100644 browser/themes/shared/places/organizer-shared.css create mode 100644 browser/themes/shared/places/sidebar.css create mode 100644 browser/themes/shared/places/tag.svg create mode 100644 browser/themes/shared/places/tree-icons.css create mode 100644 browser/themes/shared/preferences/android-menu.svg create mode 100644 browser/themes/shared/preferences/category-general.svg create mode 100644 browser/themes/shared/preferences/category-privacy-security.svg create mode 100644 browser/themes/shared/preferences/category-search.svg create mode 100644 browser/themes/shared/preferences/category-sync.svg create mode 100644 browser/themes/shared/preferences/containers-dialog.css create mode 100644 browser/themes/shared/preferences/containers.css create mode 100644 browser/themes/shared/preferences/dialog.css create mode 100644 browser/themes/shared/preferences/fxaPairDevice.css create mode 100644 browser/themes/shared/preferences/ios-menu.svg create mode 100644 browser/themes/shared/preferences/monitor-logo.svg create mode 100644 browser/themes/shared/preferences/mozilla-logo.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.css create mode 100644 browser/themes/shared/preferences/siteDataSettings.css create mode 100644 browser/themes/shared/preferences/translations.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/sanitizeDialog_v2.css create mode 100644 browser/themes/shared/search/search-engine-placeholder.png create mode 100644 browser/themes/shared/search/search-engine-placeholder@2x.png create mode 100644 browser/themes/shared/search/search-indicator-badge-add.svg create mode 100644 browser/themes/shared/searchbar.css create mode 100644 browser/themes/shared/setDesktopBackground.css create mode 100644 browser/themes/shared/sidebar.css create mode 100644 browser/themes/shared/syncedtabs/sidebar.css create mode 100644 browser/themes/shared/tab-list-tree.css create mode 100644 browser/themes/shared/tabbrowser/connecting.png create mode 100644 browser/themes/shared/tabbrowser/connecting@2x.png create mode 100644 browser/themes/shared/tabbrowser/crashed.svg create mode 100644 browser/themes/shared/tabbrowser/hourglass.svg create mode 100644 browser/themes/shared/tabbrowser/loading-burst.svg create mode 100644 browser/themes/shared/tabbrowser/loading.svg create mode 100644 browser/themes/shared/tabbrowser/pendingpaint.png create mode 100644 browser/themes/shared/tabbrowser/tab-audio-blocked-small.svg create mode 100644 browser/themes/shared/tabbrowser/tab-audio-muted-small.svg create mode 100644 browser/themes/shared/tabbrowser/tab-audio-playing-small.svg create mode 100644 browser/themes/shared/tabbrowser/tab-connecting.png create mode 100644 browser/themes/shared/tabbrowser/tab-connecting@2x.png create mode 100644 browser/themes/shared/tabbrowser/tab-drag-indicator.svg create mode 100644 browser/themes/shared/tabbrowser/tab-loading-inverted.png create mode 100644 browser/themes/shared/tabbrowser/tab-loading-inverted@2x.png create mode 100644 browser/themes/shared/tabbrowser/tab-loading.png create mode 100644 browser/themes/shared/tabbrowser/tab-loading@2x.png create mode 100644 browser/themes/shared/tabs.css create mode 100644 browser/themes/shared/toolbar-drag-indicator.svg create mode 100644 browser/themes/shared/toolbarbutton-icons.css create mode 100644 browser/themes/shared/toolbarbuttons.css create mode 100644 browser/themes/shared/translations/beta.svg create mode 100644 browser/themes/shared/translations/panel.css create mode 100644 browser/themes/shared/update-badge.svg create mode 100644 browser/themes/shared/urlbar-dynamic-results.css create mode 100644 browser/themes/shared/urlbar-searchbar.css create mode 100644 browser/themes/shared/urlbarView.css create mode 100644 browser/themes/shared/weather/cloudy.svg create mode 100644 browser/themes/shared/weather/flurries.svg create mode 100644 browser/themes/shared/weather/fog.svg create mode 100644 browser/themes/shared/weather/freezing-rain.svg create mode 100644 browser/themes/shared/weather/hazy-sunshine.svg create mode 100644 browser/themes/shared/weather/hot.svg create mode 100644 browser/themes/shared/weather/ice.svg create mode 100644 browser/themes/shared/weather/mostly-cloudy-with-showers.svg create mode 100644 browser/themes/shared/weather/mostly-cloudy-with-thunderstorms.svg create mode 100644 browser/themes/shared/weather/mostly-sunny.svg create mode 100644 browser/themes/shared/weather/night-clear.svg create mode 100644 browser/themes/shared/weather/night-hazy-moonlight.svg create mode 100644 browser/themes/shared/weather/night-mostly-clear.svg create mode 100644 browser/themes/shared/weather/night-mostly-cloudy-with-flurries.svg create mode 100644 browser/themes/shared/weather/night-partly-cloudy-with-showers.svg create mode 100644 browser/themes/shared/weather/night-partly-cloudy-with-thunderstorms.svg create mode 100644 browser/themes/shared/weather/partly-sunny-with-flurries.svg create mode 100644 browser/themes/shared/weather/partly-sunny.svg create mode 100644 browser/themes/shared/weather/rain.svg create mode 100644 browser/themes/shared/weather/showers.svg create mode 100644 browser/themes/shared/weather/snow.svg create mode 100644 browser/themes/shared/weather/sunny.svg create mode 100644 browser/themes/shared/weather/thunderstorms.svg create mode 100644 browser/themes/shared/weather/windy.svg create mode 100644 browser/themes/shared/webRTC-indicator.css create mode 100644 browser/themes/shared/webRTC-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..cd8524017f --- /dev/null +++ b/browser/themes/shared/UITour.css @@ -0,0 +1,154 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* UI Tour */ + +#UITourHighlightContainer { + appearance: none; + + /* Resets the native styles in windows and macOS */ + border: none; + background-color: transparent; + -moz-window-shadow: none; + + --panel-border-color: transparent; + --panel-background: transparent; + /* This is a buffer to compensate for the movement in the "wobble" effect, + and for the box-shadow of #UITourHighlight. */ + --panel-padding: 4px; + /* Compensate the displacement caused by padding. */ + margin: -4px; +} + +#UITourHighlight { + background-color: rgba(0, 200, 215, 0.3); + min-height: 24px; + min-width: 24px; +} + +#UITourHighlight.rounded-highlight { + border-radius: 4px; +} + +#UITourTooltipBody { + align-items: flex-start; +} + +#UITourTooltipTitleContainer { + align-items: flex-start; + margin-bottom: 10px; +} + +#UITourTooltipIcon { + width: 48px; + height: 48px; + margin-inline-end: 10px; +} + +#UITourTooltipTitle, +#UITourTooltipDescription { + max-width: 20rem; +} + +#UITourTooltipTitle { + font-size: 1.45rem; + font-weight: bold; + margin: 0; +} + +#UITourTooltipDescription { + margin-inline: 0; + font-size: 1.15rem; + line-height: 1.8rem; + margin-bottom: 0; /* Override global.css */ +} + +#UITourTooltipClose { + position: relative; + appearance: none; + border: none; + background-color: transparent; + min-width: 0; + margin-inline-start: 4px; + margin-top: -2px; +} + +#UITourTooltipClose > .toolbarbutton-text { + display: none; +} + +#UITourTooltipButtons { + justify-content: flex-end; + background-color: var(--arrowpanel-dimmed); + border-top: 1px solid var(--panel-separator-color); + margin: 10px -16px -16px; + padding: 16px; +} + +#UITourTooltipButtons > label, +#UITourTooltipButtons > button { + margin: 0 15px; +} + +#UITourTooltipButtons > label:first-child, +#UITourTooltipButtons > button:first-child { + margin-inline-start: 0; +} + +#UITourTooltipButtons > label:last-child, +#UITourTooltipButtons > button:last-child { + margin-inline-end: 0; +} + +#UITourTooltipButtons > button[image] > .button-box > .button-icon { + width: 16px; + height: 16px; + margin-inline-end: 5px; +} + +#UITourTooltipButtons > label, +#UITourTooltipButtons > button .button-text { + font-size: 1.15rem; +} + +#UITourTooltipButtons > button:not(.button-link) { + appearance: none; + background-color: rgb(251,251,251); + border-radius: 3px; + border: 1px solid; + border-color: rgb(192,192,192); + color: rgb(71,71,71); + padding: 4px 30px; + transition-property: background-color, border-color; + transition-duration: 150ms; +} + +#UITourTooltipButtons > button:not(.button-link, :active):hover { + background-color: hsla(210,4%,10%,.15); + border-color: hsla(210,4%,10%,.15); + box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset; +} + +#UITourTooltipButtons > label, +#UITourTooltipButtons > button.button-link:not(:hover) { + appearance: none; + background: transparent; + border: none; + box-shadow: none; + color: var(--panel-disabled-color); + padding-inline: 10px; +} + +/* The primary button gets the same color as the customize button. */ +#UITourTooltipButtons > button.button-primary { + background-color: rgb(116,191,67); + color: white; + padding-inline: 30px; +} + +#UITourTooltipButtons > button.button-primary:not(:active):hover { + background-color: rgb(105,173,61); +} diff --git a/browser/themes/shared/aboutFrameCrashed.css b/browser/themes/shared/aboutFrameCrashed.css new file mode 100644 index 0000000000..f15a4cf10e --- /dev/null +++ b/browser/themes/shared/aboutFrameCrashed.css @@ -0,0 +1,12 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +body { + background-image: url("chrome://browser/skin/tab-crashed.svg"); + background-position: center, center; + background-repeat: no-repeat; + height: 100%; + width: 100%; + background-size: 1.6em; +} diff --git a/browser/themes/shared/aboutRestartRequired.css b/browser/themes/shared/aboutRestartRequired.css new file mode 100644 index 0000000000..1b7c0e595a --- /dev/null +++ b/browser/themes/shared/aboutRestartRequired.css @@ -0,0 +1,19 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/error-pages.css"); + +#header { + background: none; + padding-inline-start: 0; + margin-inline-start: 0; +} + +#text-container { + margin: auto; +} + +#restart { + margin-top: 1.2em; +} diff --git a/browser/themes/shared/aboutSessionRestore.css b/browser/themes/shared/aboutSessionRestore.css new file mode 100644 index 0000000000..7a18602b61 --- /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(--link-color); + -moz-context-properties: fill; + fill: currentColor; + border: none; + padding: 0; + margin: 0; + padding-inline-end: 45px; + position: relative; +} + +#tabsToggle::after { + content: ""; + position: absolute; + width: 100%; + height: 100%; + top: 0; + inset-inline-start: 0; + background-image: url("chrome://global/skin/icons/arrow-down.svg"); + background-repeat: no-repeat; + background-size: 20px; + background-position: right center; +} + +#tabsToggle:dir(rtl)::after { + background-position-x: left; +} + +#tabsToggle:not(.tabs-hidden)::after { + background-image: url("chrome://global/skin/icons/arrow-up.svg"); +} + +#tabsToggle.tabs-hidden > #hideTabs, +#tabsToggle:not(.tabs-hidden) > #showTabs { + display: none; +} + +#tabList { + flex: 1; + min-height: 12em; + margin-top: 1.2em; +} + +.button-container { + text-align: end; +} diff --git a/browser/themes/shared/aboutTabCrashed.css b/browser/themes/shared/aboutTabCrashed.css new file mode 100644 index 0000000000..264e064f6d --- /dev/null +++ b/browser/themes/shared/aboutTabCrashed.css @@ -0,0 +1,40 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +#reportSent { + font-weight: bold; +} + +#reportBox { + background-color: var(--in-content-box-info-background); + margin: 24px 0; + padding: 14px; + border: 1px solid var(--in-content-box-border-color); + border-radius: 2px; +} + +#reportBox > h2:first-child { + margin-top: 0; +} + +input[type="text"], +textarea { + width: 100%; + box-sizing: border-box; + resize: none; +} + +input[type="text"] { + margin-inline-start: 0; +} + +#options { + list-style: none; + margin-inline-start: 0; +} + +#options > li, +#email { + margin-top: 11px; +} diff --git a/browser/themes/shared/aboutWelcomeBack.css b/browser/themes/shared/aboutWelcomeBack.css new file mode 100644 index 0000000000..d9ac643c2a --- /dev/null +++ b/browser/themes/shared/aboutWelcomeBack.css @@ -0,0 +1,15 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://browser/skin/tab-list-tree.css"); + +.radioRestoreContainer:not(:last-child) { + margin-bottom: 0.3em; +} + +#tabList { + flex: 1; + min-height: 12em; + margin-top: 1.2em; +} diff --git a/browser/themes/shared/addon-notification.css b/browser/themes/shared/addon-notification.css new file mode 100644 index 0000000000..31d4e05fda --- /dev/null +++ b/browser/themes/shared/addon-notification.css @@ -0,0 +1,59 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +.popup-notification-body[popupid="addon-progress"], +.popup-notification-body[popupid="addon-install-confirmation"] { + width: 28em; + max-width: 28em; +} + +.addon-install-confirmation-name { + font-weight: bold; +} + +html|*.addon-webext-perm-list { + margin-block-end: 0; + padding-inline-start: 10px; +} + +.addon-webext-perm-single-entry { + margin-top: 11px; +} + +.addon-webext-perm-text, +.addon-webext-perm-single-entry { + margin-inline-start: 0; +} + +.addon-webext-perm-text-multiline { + margin-top: 1em; + white-space: pre-line; +} + +.popup-notification-description[popupid="addon-webext-permissions"], +.popup-notification-description[popupid="addon-webext-permissions-notification"] { + margin-inline-start: -1px; +} + +.addon-webext-perm-notification-content, +.addon-installed-notification-content { + margin-top: 0; +} + +.addon-installed-notification-content > checkbox { + margin: 8px 4px 2px; +} + +.addon-webext-name { + display: inline; + font-weight: bold; + margin: 0; +} + +.addon-warning-icon { + -moz-context-properties: fill; + fill: #FFBF00; +} diff --git a/browser/themes/shared/addons/addon-install-blocked.svg b/browser/themes/shared/addons/addon-install-blocked.svg new file mode 100644 index 0000000000..18188b93ef --- /dev/null +++ b/browser/themes/shared/addons/addon-install-blocked.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file 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..fd671e007d --- /dev/null +++ b/browser/themes/shared/addons/unified-extensions.css @@ -0,0 +1,234 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +:root { + /* uei = unified extensions item */ + --uei-icon-size: 32px; + --uei-attention-dot-size: 8px; + --uei-button-hover-bgcolor: var(--panel-item-hover-bgcolor); + --uei-button-hover-color: inherit; + --uei-button-active-bgcolor: var(--panel-item-active-bgcolor); + --uei-button-active-color: inherit; + --uei-button-attention-dot-color: var(--tab-attention-icon-color); +} + +:root[uidensity="compact"] { + --uei-icon-size: 24px; +} + +#unified-extensions-panel { + --uei-dot-horizontal-position-in-panel: calc(var(--uei-icon-size) / 2 + var(--arrowpanel-menuitem-padding-inline) - var(--uei-attention-dot-size) / 2); + --uei-dot-vertical-position-in-panel: max(0px, calc(var(--arrowpanel-menuitem-padding-block) / 2 - var(--uei-attention-dot-size) / 2)); +} + +#unified-extensions-view { + width: var(--menu-panel-width-wide); +} + +/* Align extensions rendered with custom elements. */ +unified-extensions-item { + display: flex; + align-items: center; +} + +unified-extensions-item > .subviewbutton { + flex-shrink: 1; +} + +#unified-extensions-panel .unified-extensions-item { + -moz-context-properties: fill; + fill: currentColor; + /* Have some spacing between items in the panel; mainly useful for when HCM is enabled. */ + margin-block: 2px !important; /* override panelUI-shared.css */ +} + +.unified-extensions-item > .subviewbutton { + margin: 0; +} + +/* The "attention UI" for the unified extensions is based on: + * https://searchfox.org/mozilla-central/rev/560b7b1b17/browser/themes/shared/tabs.css#624 */ + +/* On the main unified extensions button, we draw the attention on the icon element. */ +#unified-extensions-button[attention] > .toolbarbutton-icon, +/* For extension widgets placed in a toolbar, we use the stack element + * (containing the icon) of the action button to draw the attention dot. + * Otherwise (in the extensions panel), we use the action button itself. */ +.unified-extensions-item[attention] > .unified-extensions-item-action-button.toolbarbutton-1 > .toolbarbutton-badge-stack, +.unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton { + background-image: radial-gradient(circle, var(--uei-button-attention-dot-color), var(--uei-button-attention-dot-color) 2px, transparent 2px); + background-size: var(--uei-attention-dot-size) var(--uei-attention-dot-size); + background-repeat: no-repeat; +} + +/* Adjust attention dots position in the toolbar. */ +#unified-extensions-button[attention] > .toolbarbutton-icon, +.unified-extensions-item[attention] > .unified-extensions-item-action-button.toolbarbutton-1 > .toolbarbutton-badge-stack { + background-position: center bottom calc(var(--toolbarbutton-inner-padding) / 2 - var(--uei-attention-dot-size) / 2); +} + +/* Adjust attention dots position in the unified extensions panel. */ +.unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton { + background-position: left var(--uei-dot-horizontal-position-in-panel) bottom var(--uei-dot-vertical-position-in-panel); +} + +/* Adjust attention dots position in the unified extensions panel for RTL. */ +.unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton:-moz-locale-dir(rtl) { + background-position-x: right var(--uei-dot-horizontal-position-in-panel); +} + +.unified-extensions-item-action-button { + flex: 1; + overflow: hidden; +} + +/* The padding-block for menuitems is set to 0 in compact mode which, with the + * extension icon being 32px in this case, makes the item look crowded even for + * compact mode. */ +:root[uidensity="compact"] panel:not([touchmode]) .unified-extensions-item-action-button { + padding-block: 4px; +} + +.unified-extensions-item-icon, +.unified-extensions-item .webextension-browser-action.subviewbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon { + height: var(--uei-icon-size); + width: var(--uei-icon-size); +} + +/* The first selector is for the custom elements icon, which appears only in the UEP. */ +.unified-extensions-item-icon, +.unified-extensions-item .webextension-browser-action.subviewbutton > .toolbarbutton-badge-stack { + margin-inline-end: 6px; +} + +.unified-extensions-item-icon, +.unified-extensions-item-contents { + pointer-events: none; +} + +.unified-extensions-item-name, +.unified-extensions-item-message { + margin: 0; + padding-inline-start: .5em; + word-break: break-word; +} + +.unified-extensions-item-message { + color: var(--text-color-deemphasized); +} + +.unified-extensions-item-menu-button.subviewbutton { + list-style-image: url("chrome://global/skin/icons/settings.svg"); + /* subtract the child's ~1px border from the block padding */ + padding: calc(var(--arrowpanel-menuitem-margin-inline) - 1px) + var(--arrowpanel-menuitem-margin-inline); + padding-inline-end: 0; + border-radius: 0; + /* override panelUI-shared.css */ + background-color: transparent !important; + box-shadow: none !important; + outline: none !important; +} + +/* Hide subview label. */ +.unified-extensions-item .toolbarbutton-text { + display: none !important; /* override panelUI-shared.css */ +} + +.unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon { + box-sizing: content-box; + padding: var(--arrowpanel-menuitem-padding-inline); + border: 1px solid transparent; + border-radius: var(--arrowpanel-menuitem-border-radius); +} + +/* Background color, outline, and shadow on the icon to allow the clickable + * padding on the button to remain invisible */ +.unified-extensions-item-menu-button.subviewbutton:hover > .toolbarbutton-icon { + background-color: var(--uei-button-hover-bgcolor); +} + +.unified-extensions-item-menu-button.subviewbutton:hover:active > .toolbarbutton-icon { + background-color: var(--uei-button-active-bgcolor); + box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset; +} + +.unified-extensions-item-menu-button.subviewbutton:focus-visible > .toolbarbutton-icon { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +/* --- warning messages --- */ + +#unified-extensions-messages-container { + margin: var(--arrowpanel-menuitem-margin); +} + +.unified-extensions-message-bar { + margin-bottom: 2px; +} + +/* Hide the menu button and the unified extensions content when the extension + * item is placed on the toolbar. */ +.unified-extensions-item-menu-button.toolbarbutton-1, +.unified-extensions-item-action-button.toolbarbutton-1 > .unified-extensions-item-contents { + display: none; +} + +/* --- browser action CUI widget styles in the extensions panel --- */ + +@media (prefers-contrast) { + :root:not(:-moz-lwtheme) { + --uei-button-attention-dot-color: ButtonText; + } + + .unified-extensions-item-action-button.subviewbutton:not([disabled], :-moz-lwtheme), + .unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon:not(:-moz-lwtheme) { + border-color: currentColor; + background-color: ButtonFace; + color: ButtonText; + --uei-button-hover-bgcolor: SelectedItem; + --uei-button-hover-color: SelectedItemText; + --uei-button-active-bgcolor: ButtonFace; + --uei-button-active-color: ButtonText; + } + + .unified-extensions-item-action-button[disabled].subviewbutton:not(:-moz-lwtheme) { + background-color: Canvas; + color: GrayText !important; /* override panelUI-shared.css */ + opacity: 1 !important; /* override panelUI-shared.css */ + } + + .unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton:hover:not(:-moz-lwtheme) { + --uei-button-attention-dot-color: ButtonFace; + } + + .unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton:hover:active:not(:-moz-lwtheme) { + --uei-button-attention-dot-color: ButtonText; + } + + .unified-extensions-item-message:not(:-moz-lwtheme) { + color: inherit; + } + + .unified-extensions-item > .unified-extensions-item-action-button.subviewbutton:hover:not([disabled], :-moz-lwtheme), + .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:hover > .toolbarbutton-icon:not(:-moz-lwtheme) { + background-color: var(--uei-button-hover-bgcolor); + color: var(--uei-button-hover-color); + border-color: var(--uei-button-hover-bgcolor); + } + + .unified-extensions-item > .unified-extensions-item-action-button.subviewbutton:hover:active:not([disabled], :-moz-lwtheme), + .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:hover:active > .toolbarbutton-icon:not(:-moz-lwtheme) { + background-color: var(--uei-button-active-bgcolor); + color: var(--uei-button-active-color); + border-color: var(--uei-button-active-color); + } + + .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:focus-visible > .toolbarbutton-icon:not(:-moz-lwtheme) { + /* The border would otherwise overlap with the focus outline, causing an + * unsightly anti-aliasing artifact */ + border-color: transparent; + } +} diff --git a/browser/themes/shared/app-marketplace-icons/LICENSE b/browser/themes/shared/app-marketplace-icons/LICENSE new file mode 100644 index 0000000000..6efe8a3cc9 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/LICENSE @@ -0,0 +1 @@ +Files in this folder include material that may be protected as a trademark in some jurisdictions. diff --git a/browser/themes/shared/app-marketplace-icons/Makefile.in b/browser/themes/shared/app-marketplace-icons/Makefile.in new file mode 100644 index 0000000000..0e7114ca06 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/Makefile.in @@ -0,0 +1,26 @@ +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +include $(topsrcdir)/config/rules.mk + +# Note: `Makefile.in` is not allowed to modify `DEFINES`, so we modify +# `MAKE_JAR_FLAGS` directly. + +# Note: we use 'es-ES' badge for all Spanish locales like in Bedrock. +# See https://github.com/mozilla/bedrock/blob/67fd925b4d621dde0e48e27738c4b9c397ac5169/bedrock/mozorg/templatetags/misc.py#L58. + +# Note: it's probably possible to format these lists so they're easier to +# modify. + +ifneq (,$(filter es%,$(AB_CD))) +MAKE_JARS_FLAGS += -DANDROID_MARKETPLACE_AB_CD=es-ES +MAKE_JARS_FLAGS += -DIOS_MARKETPLACE_AB_CD=es-ES +else +ifneq (,$(filter $(AB_CD),af ar az be bg bn-BD bn-IN ca cs da de el es-ES et eu fa fi fr gl gu-IN he hi-IN hr hu hy-AM id is it ja ka kk km kn ko lo lt lv mk ml mr ms my nb-NO ne-NP nl nn-NO pa-IN pl pt-BR pt-PT ro ru si sk sl sq sr sv-SE sw ta te th tr uk ur uz vi zh-CN zh-TW zu)) +MAKE_JARS_FLAGS += -DANDROID_MARKETPLACE_AB_CD=$(AB_CD) +endif # Android, does not start with es. +ifneq (,$(filter $(AB_CD),ar az bg cs da de el es-ES et fi fr he hu id it ja ko lt lv ms mt nb-NO nl nn-NO pl pt-BR pt-PT ro ru sk sl sv-SE th tr vi zh-CN zh-TW)) +MAKE_JARS_FLAGS += -DIOS_MARKETPLACE_AB_CD=$(AB_CD) +endif # iOS, does not start with es. +endif # starts with es. diff --git a/browser/themes/shared/app-marketplace-icons/af/android.png b/browser/themes/shared/app-marketplace-icons/af/android.png new file mode 100644 index 0000000000..beb0f90228 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/af/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ar/android.png b/browser/themes/shared/app-marketplace-icons/ar/android.png new file mode 100644 index 0000000000..32541d672f Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ar/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ar/ios.svg b/browser/themes/shared/app-marketplace-icons/ar/ios.svg new file mode 100644 index 0000000000..8bcd76a996 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/ar/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/az/android.png b/browser/themes/shared/app-marketplace-icons/az/android.png new file mode 100644 index 0000000000..0f3a854c74 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/az/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/az/ios.svg b/browser/themes/shared/app-marketplace-icons/az/ios.svg new file mode 100644 index 0000000000..46bf593543 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/az/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/be/android.png b/browser/themes/shared/app-marketplace-icons/be/android.png new file mode 100644 index 0000000000..fc0ff894db Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/be/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/bg/android.png b/browser/themes/shared/app-marketplace-icons/bg/android.png new file mode 100644 index 0000000000..204b3e4303 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/bg/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/bg/ios.svg b/browser/themes/shared/app-marketplace-icons/bg/ios.svg new file mode 100644 index 0000000000..df80f3c5e1 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/bg/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/bn-BD/android.png b/browser/themes/shared/app-marketplace-icons/bn-BD/android.png new file mode 100644 index 0000000000..4e2b6da628 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/bn-BD/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/bn-IN/android.png b/browser/themes/shared/app-marketplace-icons/bn-IN/android.png new file mode 100644 index 0000000000..4e2b6da628 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/bn-IN/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ca/android.png b/browser/themes/shared/app-marketplace-icons/ca/android.png new file mode 100644 index 0000000000..a184cebc00 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ca/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/cs/android.png b/browser/themes/shared/app-marketplace-icons/cs/android.png new file mode 100644 index 0000000000..2fbe5e7e9d Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/cs/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/cs/ios.svg b/browser/themes/shared/app-marketplace-icons/cs/ios.svg new file mode 100644 index 0000000000..a3baabc173 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/cs/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/da/android.png b/browser/themes/shared/app-marketplace-icons/da/android.png new file mode 100644 index 0000000000..b6bab10959 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/da/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/da/ios.svg b/browser/themes/shared/app-marketplace-icons/da/ios.svg new file mode 100644 index 0000000000..1a47f8bca8 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/da/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/de/android.png b/browser/themes/shared/app-marketplace-icons/de/android.png new file mode 100644 index 0000000000..eef59de69a Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/de/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/de/ios.svg b/browser/themes/shared/app-marketplace-icons/de/ios.svg new file mode 100644 index 0000000000..523e8114b1 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/de/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/el/android.png b/browser/themes/shared/app-marketplace-icons/el/android.png new file mode 100644 index 0000000000..9161f086b6 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/el/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/el/ios.svg b/browser/themes/shared/app-marketplace-icons/el/ios.svg new file mode 100644 index 0000000000..82505aa3f4 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/el/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/en-US/android.png b/browser/themes/shared/app-marketplace-icons/en-US/android.png new file mode 100644 index 0000000000..ce3f0f4933 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/en-US/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/en-US/ios.svg b/browser/themes/shared/app-marketplace-icons/en-US/ios.svg new file mode 100644 index 0000000000..e525da53e4 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/en-US/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/es-ES/android.png b/browser/themes/shared/app-marketplace-icons/es-ES/android.png new file mode 100644 index 0000000000..7589829d5d Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/es-ES/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/es-ES/ios.svg b/browser/themes/shared/app-marketplace-icons/es-ES/ios.svg new file mode 100644 index 0000000000..8311e5e714 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/es-ES/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/et/android.png b/browser/themes/shared/app-marketplace-icons/et/android.png new file mode 100644 index 0000000000..1a65656d60 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/et/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/et/ios.svg b/browser/themes/shared/app-marketplace-icons/et/ios.svg new file mode 100644 index 0000000000..da2884ae78 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/et/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/eu/android.png b/browser/themes/shared/app-marketplace-icons/eu/android.png new file mode 100644 index 0000000000..db991b0ca8 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/eu/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/fa/android.png b/browser/themes/shared/app-marketplace-icons/fa/android.png new file mode 100644 index 0000000000..086832e42a Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/fa/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/fi/android.png b/browser/themes/shared/app-marketplace-icons/fi/android.png new file mode 100644 index 0000000000..ce3f0f4933 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/fi/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/fi/ios.svg b/browser/themes/shared/app-marketplace-icons/fi/ios.svg new file mode 100644 index 0000000000..b843470b72 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/fi/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/fr/android.png b/browser/themes/shared/app-marketplace-icons/fr/android.png new file mode 100644 index 0000000000..7b8372b203 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/fr/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/fr/ios.svg b/browser/themes/shared/app-marketplace-icons/fr/ios.svg new file mode 100644 index 0000000000..676e7cbc86 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/fr/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/gl/android.png b/browser/themes/shared/app-marketplace-icons/gl/android.png new file mode 100644 index 0000000000..0da16b89bb Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/gl/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/gu-IN/android.png b/browser/themes/shared/app-marketplace-icons/gu-IN/android.png new file mode 100644 index 0000000000..7dc446f58b Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/gu-IN/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/he/android.png b/browser/themes/shared/app-marketplace-icons/he/android.png new file mode 100644 index 0000000000..9177c5469f Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/he/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/he/ios.svg b/browser/themes/shared/app-marketplace-icons/he/ios.svg new file mode 100644 index 0000000000..4994a2682b --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/he/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/hi-IN/android.png b/browser/themes/shared/app-marketplace-icons/hi-IN/android.png new file mode 100644 index 0000000000..eafcb92ad7 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/hi-IN/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/hr/android.png b/browser/themes/shared/app-marketplace-icons/hr/android.png new file mode 100644 index 0000000000..3e8f2b5b84 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/hr/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/hu/android.png b/browser/themes/shared/app-marketplace-icons/hu/android.png new file mode 100644 index 0000000000..c965eaa058 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/hu/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/hu/ios.svg b/browser/themes/shared/app-marketplace-icons/hu/ios.svg new file mode 100644 index 0000000000..f01e689a1e --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/hu/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/hy-AM/android.png b/browser/themes/shared/app-marketplace-icons/hy-AM/android.png new file mode 100644 index 0000000000..c383a8ce9d Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/hy-AM/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/id/android.png b/browser/themes/shared/app-marketplace-icons/id/android.png new file mode 100644 index 0000000000..9f603f02a1 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/id/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/id/ios.svg b/browser/themes/shared/app-marketplace-icons/id/ios.svg new file mode 100644 index 0000000000..a6a69865cc --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/id/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/is/android.png b/browser/themes/shared/app-marketplace-icons/is/android.png new file mode 100644 index 0000000000..1e4d7478eb Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/is/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/it/android.png b/browser/themes/shared/app-marketplace-icons/it/android.png new file mode 100644 index 0000000000..85b5df99df Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/it/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/it/ios.svg b/browser/themes/shared/app-marketplace-icons/it/ios.svg new file mode 100644 index 0000000000..6e1e4394e5 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/it/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/ja/android.png b/browser/themes/shared/app-marketplace-icons/ja/android.png new file mode 100644 index 0000000000..5ed3cadd17 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ja/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ja/ios.svg b/browser/themes/shared/app-marketplace-icons/ja/ios.svg new file mode 100644 index 0000000000..2385a32c1c --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/ja/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/jar.mn b/browser/themes/shared/app-marketplace-icons/jar.mn new file mode 100644 index 0000000000..e201dad135 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/jar.mn @@ -0,0 +1,17 @@ +#filter substitution +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +browser.jar: +% locale app-marketplace-icons @AB_CD@ %locale/@AB_CD@/app-marketplace-icons/ +#if defined(ANDROID_MARKETPLACE_AB_CD) + locale/@AB_CD@/app-marketplace-icons/android.png (@ANDROID_MARKETPLACE_AB_CD@/android.png) +#else + locale/@AB_CD@/app-marketplace-icons/android.png (en-US/android.png) +#endif +#if defined(IOS_MARKETPLACE_AB_CD) + locale/@AB_CD@/app-marketplace-icons/ios.svg (@IOS_MARKETPLACE_AB_CD@/ios.svg) +#else + locale/@AB_CD@/app-marketplace-icons/ios.svg (en-US/ios.svg) +#endif diff --git a/browser/themes/shared/app-marketplace-icons/ka/android.png b/browser/themes/shared/app-marketplace-icons/ka/android.png new file mode 100644 index 0000000000..4717fffd19 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ka/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/kk/android.png b/browser/themes/shared/app-marketplace-icons/kk/android.png new file mode 100644 index 0000000000..36266d750c Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/kk/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/km/android.png b/browser/themes/shared/app-marketplace-icons/km/android.png new file mode 100644 index 0000000000..4529924e7d Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/km/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/kn/android.png b/browser/themes/shared/app-marketplace-icons/kn/android.png new file mode 100644 index 0000000000..0b57399581 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/kn/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ko/android.png b/browser/themes/shared/app-marketplace-icons/ko/android.png new file mode 100644 index 0000000000..b0c0c496bf Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ko/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ko/ios.svg b/browser/themes/shared/app-marketplace-icons/ko/ios.svg new file mode 100644 index 0000000000..aba6865915 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/ko/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/lo/android.png b/browser/themes/shared/app-marketplace-icons/lo/android.png new file mode 100644 index 0000000000..ea2eaa3ffb Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/lo/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/lt/android.png b/browser/themes/shared/app-marketplace-icons/lt/android.png new file mode 100644 index 0000000000..7ad323fb97 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/lt/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/lt/ios.svg b/browser/themes/shared/app-marketplace-icons/lt/ios.svg new file mode 100644 index 0000000000..dc3e080ee2 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/lt/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/lv/android.png b/browser/themes/shared/app-marketplace-icons/lv/android.png new file mode 100644 index 0000000000..828f6bd659 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/lv/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/lv/ios.svg b/browser/themes/shared/app-marketplace-icons/lv/ios.svg new file mode 100644 index 0000000000..45aa7eb35e --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/lv/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/mk/android.png b/browser/themes/shared/app-marketplace-icons/mk/android.png new file mode 100644 index 0000000000..e3f7f0a856 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/mk/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ml/android.png b/browser/themes/shared/app-marketplace-icons/ml/android.png new file mode 100644 index 0000000000..5debb8c1a1 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ml/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/moz.build b/browser/themes/shared/app-marketplace-icons/moz.build new file mode 100644 index 0000000000..d988c0ff9b --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/moz.build @@ -0,0 +1,7 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +JAR_MANIFESTS += ["jar.mn"] diff --git a/browser/themes/shared/app-marketplace-icons/mr/android.png b/browser/themes/shared/app-marketplace-icons/mr/android.png new file mode 100644 index 0000000000..ca00f14064 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/mr/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ms/android.png b/browser/themes/shared/app-marketplace-icons/ms/android.png new file mode 100644 index 0000000000..e6c25272c0 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ms/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ms/ios.svg b/browser/themes/shared/app-marketplace-icons/ms/ios.svg new file mode 100644 index 0000000000..b8e2904aa7 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/ms/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/mt/ios.svg b/browser/themes/shared/app-marketplace-icons/mt/ios.svg new file mode 100644 index 0000000000..3f68a2fe59 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/mt/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/my/android.png b/browser/themes/shared/app-marketplace-icons/my/android.png new file mode 100644 index 0000000000..0f90e2d8e4 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/my/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/nb-NO/android.png b/browser/themes/shared/app-marketplace-icons/nb-NO/android.png new file mode 100644 index 0000000000..1bf3d31a1e Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/nb-NO/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/nb-NO/ios.svg b/browser/themes/shared/app-marketplace-icons/nb-NO/ios.svg new file mode 100644 index 0000000000..5a3831467f --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/nb-NO/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/ne-NP/android.png b/browser/themes/shared/app-marketplace-icons/ne-NP/android.png new file mode 100644 index 0000000000..ac4d645359 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ne-NP/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/nl/android.png b/browser/themes/shared/app-marketplace-icons/nl/android.png new file mode 100644 index 0000000000..3521f86305 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/nl/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/nl/ios.svg b/browser/themes/shared/app-marketplace-icons/nl/ios.svg new file mode 100644 index 0000000000..1d11155096 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/nl/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/nn-NO/android.png b/browser/themes/shared/app-marketplace-icons/nn-NO/android.png new file mode 100644 index 0000000000..1bf3d31a1e Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/nn-NO/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/nn-NO/ios.svg b/browser/themes/shared/app-marketplace-icons/nn-NO/ios.svg new file mode 100644 index 0000000000..5a3831467f --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/nn-NO/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/pa-IN/android.png b/browser/themes/shared/app-marketplace-icons/pa-IN/android.png new file mode 100644 index 0000000000..12ccc49e4a Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/pa-IN/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/pl/android.png b/browser/themes/shared/app-marketplace-icons/pl/android.png new file mode 100644 index 0000000000..2229bade13 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/pl/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/pl/ios.svg b/browser/themes/shared/app-marketplace-icons/pl/ios.svg new file mode 100644 index 0000000000..1af1327869 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/pl/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/pt-BR/android.png b/browser/themes/shared/app-marketplace-icons/pt-BR/android.png new file mode 100644 index 0000000000..951cd7457f Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/pt-BR/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/pt-BR/ios.svg b/browser/themes/shared/app-marketplace-icons/pt-BR/ios.svg new file mode 100644 index 0000000000..6e27d3f95e --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/pt-BR/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/pt-PT/android.png b/browser/themes/shared/app-marketplace-icons/pt-PT/android.png new file mode 100644 index 0000000000..951cd7457f Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/pt-PT/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/pt-PT/ios.svg b/browser/themes/shared/app-marketplace-icons/pt-PT/ios.svg new file mode 100644 index 0000000000..685deb4e01 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/pt-PT/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/ro/android.png b/browser/themes/shared/app-marketplace-icons/ro/android.png new file mode 100644 index 0000000000..ee3b5be037 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ro/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ro/ios.svg b/browser/themes/shared/app-marketplace-icons/ro/ios.svg new file mode 100644 index 0000000000..a573bdd50d --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/ro/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/ru/android.png b/browser/themes/shared/app-marketplace-icons/ru/android.png new file mode 100644 index 0000000000..427d8701b4 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ru/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ru/ios.svg b/browser/themes/shared/app-marketplace-icons/ru/ios.svg new file mode 100644 index 0000000000..c7494a14d7 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/ru/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/si/android.png b/browser/themes/shared/app-marketplace-icons/si/android.png new file mode 100644 index 0000000000..397e9ff7c4 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/si/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/sk/android.png b/browser/themes/shared/app-marketplace-icons/sk/android.png new file mode 100644 index 0000000000..6efaf531f7 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/sk/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/sk/ios.svg b/browser/themes/shared/app-marketplace-icons/sk/ios.svg new file mode 100644 index 0000000000..bbb4c21551 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/sk/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/sl/android.png b/browser/themes/shared/app-marketplace-icons/sl/android.png new file mode 100644 index 0000000000..817e823f25 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/sl/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/sl/ios.svg b/browser/themes/shared/app-marketplace-icons/sl/ios.svg new file mode 100644 index 0000000000..854a63d4f1 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/sl/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/sq/android.png b/browser/themes/shared/app-marketplace-icons/sq/android.png new file mode 100644 index 0000000000..f3340e74aa Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/sq/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/sr/android.png b/browser/themes/shared/app-marketplace-icons/sr/android.png new file mode 100644 index 0000000000..b91d2c0749 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/sr/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/sv-SE/android.png b/browser/themes/shared/app-marketplace-icons/sv-SE/android.png new file mode 100644 index 0000000000..b6e1693169 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/sv-SE/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/sv-SE/ios.svg b/browser/themes/shared/app-marketplace-icons/sv-SE/ios.svg new file mode 100644 index 0000000000..243486903e --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/sv-SE/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/sw/android.png b/browser/themes/shared/app-marketplace-icons/sw/android.png new file mode 100644 index 0000000000..75cb4991fd Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/sw/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ta/android.png b/browser/themes/shared/app-marketplace-icons/ta/android.png new file mode 100644 index 0000000000..6f5f900b22 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ta/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/te/android.png b/browser/themes/shared/app-marketplace-icons/te/android.png new file mode 100644 index 0000000000..49a74c3082 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/te/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/th/android.png b/browser/themes/shared/app-marketplace-icons/th/android.png new file mode 100644 index 0000000000..81443611e6 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/th/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/th/ios.svg b/browser/themes/shared/app-marketplace-icons/th/ios.svg new file mode 100644 index 0000000000..ec16f437ca --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/th/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/tr/android.png b/browser/themes/shared/app-marketplace-icons/tr/android.png new file mode 100644 index 0000000000..93d6731d93 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/tr/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/tr/ios.svg b/browser/themes/shared/app-marketplace-icons/tr/ios.svg new file mode 100644 index 0000000000..ea44575d42 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/tr/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/uk/android.png b/browser/themes/shared/app-marketplace-icons/uk/android.png new file mode 100644 index 0000000000..5c113c3082 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/uk/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/ur/android.png b/browser/themes/shared/app-marketplace-icons/ur/android.png new file mode 100644 index 0000000000..2e8e12539b Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/ur/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/uz/android.png b/browser/themes/shared/app-marketplace-icons/uz/android.png new file mode 100644 index 0000000000..2cc63078d0 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/uz/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/vi/android.png b/browser/themes/shared/app-marketplace-icons/vi/android.png new file mode 100644 index 0000000000..c9db5debfb Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/vi/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/vi/ios.svg b/browser/themes/shared/app-marketplace-icons/vi/ios.svg new file mode 100644 index 0000000000..37b674202c --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/vi/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/zh-CN/android.png b/browser/themes/shared/app-marketplace-icons/zh-CN/android.png new file mode 100644 index 0000000000..02c6d7345c Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/zh-CN/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/zh-CN/ios.svg b/browser/themes/shared/app-marketplace-icons/zh-CN/ios.svg new file mode 100644 index 0000000000..d997375067 --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/zh-CN/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/zh-TW/android.png b/browser/themes/shared/app-marketplace-icons/zh-TW/android.png new file mode 100644 index 0000000000..d292082e96 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/zh-TW/android.png differ diff --git a/browser/themes/shared/app-marketplace-icons/zh-TW/ios.svg b/browser/themes/shared/app-marketplace-icons/zh-TW/ios.svg new file mode 100644 index 0000000000..b5956135de --- /dev/null +++ b/browser/themes/shared/app-marketplace-icons/zh-TW/ios.svg @@ -0,0 +1,2 @@ + + diff --git a/browser/themes/shared/app-marketplace-icons/zu/android.png b/browser/themes/shared/app-marketplace-icons/zu/android.png new file mode 100644 index 0000000000..3526174e04 Binary files /dev/null and b/browser/themes/shared/app-marketplace-icons/zu/android.png differ diff --git a/browser/themes/shared/autocomplete.css b/browser/themes/shared/autocomplete.css new file mode 100644 index 0000000000..5230700e38 --- /dev/null +++ b/browser/themes/shared/autocomplete.css @@ -0,0 +1,201 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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 { + padding: 0; +} + +#PopupAutoComplete > richlistbox > richlistitem { + min-height: 20px; + border: 0; + border-radius: 0; + padding: 0 1px; + + > .ac-site-icon { + margin-inline: 4px 0; + } + + > .ac-login-item { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + + > .ac-secondary-action { + visibility: hidden; + height: 16px; + width: 16px; + border: 0; + color: inherit; + -moz-context-properties: fill; + fill: currentColor; + margin-inline: 8px; + cursor: pointer; + background: url("chrome://global/skin/icons/settings.svg") center no-repeat; + } + } + + &:is(:hover, [selected]) > .ac-login-item > .ac-secondary-action { + visibility: visible; + } + + > .ac-title { + font: icon; + margin-inline-start: 4px; + } + + &[originaltype="importableLearnMore"] { + padding-bottom: 2px; + padding-inline-start: 21px; + } + + &[originaltype="login"] > .ac-site-icon, + &[originaltype="possible-username"] > .ac-site-icon, + > .two-line-wrapper > .ac-site-icon { + display: block; + margin-inline: 4px; + } + + &[originaltype="possible-username"] > .ac-site-icon { + visibility: hidden; + } + + /* Autocomplete richlistitem support for a two-line label display */ + + > .two-line-wrapper { + box-sizing: border-box; + display: flex; + flex-direction: row; + gap: 8px; + margin: 0; + min-width: 0; + + > .labels-wrapper { + /* The text should flex while the icon should not */ + flex: 1; + /* min-width is needed to get the text-overflow: ellipsis to work for the children */ + min-width: 0; + + > .label-row { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .line2-label { + padding-top: 2px !important; + opacity: .6; + } + } + } + + &[originaltype="generatedPassword"] > .two-line-wrapper > .labels-wrapper > .generated-password-autosave, + &[originaltype="importableLearnMore"] > .ac-title, + > .two-line-wrapper > .labels-wrapper > .line2-label { + padding-top: 2px !important; + opacity: .6; + } + + /* Login form autocompletion (with and without origin showing) and generated passwords */ + &[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon, + &[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon, + &[originaltype="login"] > .ac-site-icon { + fill: GrayText; + } + + &[originaltype="importableLogins"] > .two-line-wrapper > .ac-site-icon { + fill: GrayText; + list-style-image: url(chrome://browser/skin/import.svg); + } + + &[originaltype="generatedPassword"][selected] > .two-line-wrapper > .ac-site-icon, + &[originaltype="importableLogins"][selected] > .two-line-wrapper > .ac-site-icon, + &[originaltype="loginWithOrigin"][selected] > .two-line-wrapper > .ac-site-icon, + &[originaltype="login"] > .ac-site-icon[selected] { + fill: SelectedItemText; + } + + /* Login form autocompletion */ + > .two-line-wrapper { + padding: 4px; + padding-inline-start: 0; + } + + &[originaltype="generatedPassword"] { + &:not([collapsed="true"]) { + /* Workaround bug 451997 and/or bug 492645 */ + display: block; + } + + > .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; + } + + > .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; + } + } + } + + &[originaltype="login"] + richlistitem[originaltype="generatedPassword"], + &[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 */ + &[originaltype="insecureWarning"] { + background-color: var(--arrowpanel-dimmed); + border-bottom: 1px solid var(--panel-separator-color); + padding-block: 4px; + + &[selected] { + background-color: var(--arrowpanel-dimmed-further); + color: -moz-DialogText; + } + + > .ac-title { + color: var(--grey-60); + font-size: 1em; + } + + > .ac-title .ac-emphasize-text-title { + font-weight: 600; + } + + &[selected] > .ac-title { + color: inherit; + } + + > .ac-site-icon { + list-style-image: url(chrome://global/skin/icons/security-broken.svg); + -moz-context-properties: fill; + fill: var(--grey-60); + } + } +} + +/* Popup states */ +.autocomplete-richlistitem { + &:hover { + background-color: var(--arrowpanel-dimmed); + } + + &[selected] { + background-color: SelectedItem; + color: SelectedItemText; + } +} 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..d98d56690f --- /dev/null +++ b/browser/themes/shared/browser-custom-colors.css @@ -0,0 +1,92 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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: light-dark(rgb(0, 97, 224), rgb(0, 221, 255)); + --button-primary-hover-bgcolor: light-dark(rgb(2, 80, 187), rgb(128, 235, 255)); + --button-primary-active-bgcolor: light-dark(rgb(5, 62, 148), rgb(170, 242, 255)); + --button-primary-color: light-dark(rgb(251, 251, 254), rgb(43, 42, 51)); + --button-bgcolor: light-dark( + rgba(207, 207, 216, .33), + rgba(0, 0, 0, .33) + ); + --button-hover-bgcolor: light-dark( + rgba(207, 207, 216, .66), + rgba(207, 207, 216, .20) + ); + --button-active-bgcolor: light-dark( + rgb(207, 207, 216), + rgba(207, 207, 216, .40) + ); + --button-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); + + --focus-outline-color: var(--button-primary-bgcolor); + + --arrowpanel-background: light-dark(white, rgb(66, 65, 77)); + --arrowpanel-color: light-dark(black, rgb(251, 251, 254)); + --arrowpanel-border-color: light-dark(rgb(240, 240, 244), rgb(82,82,94)); + + --arrowpanel-dimmed: light-dark( + color-mix(in srgb, currentColor 12%, transparent), + color-mix(in srgb, currentColor 17%, transparent) + ); + --arrowpanel-dimmed-further: light-dark( + color-mix(in srgb, currentColor 20%, transparent), + color-mix(in srgb, currentColor 14%, transparent) + ); + + --input-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); + --input-bgcolor: light-dark(rgb(255, 255, 255), #42414d); + --input-border-color: light-dark(color-mix(in srgb, currentColor 41%, transparent), #8f8f9d); + + --tab-selected-bgcolor: light-dark(rgb(255, 255, 255), rgb(66, 65, 77)); + --tab-selected-textcolor: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); + --tab-icon-overlay-stroke: light-dark(rgb(255, 255, 255), rgb(66, 65, 77)); + --tab-icon-overlay-fill: light-dark(rgb(91, 91, 102), rgb(251, 251, 254)); + --tab-attention-icon-color: light-dark(rgb(42, 195, 162), rgb(84, 255, 189)); + --tabs-navbar-shadow-color: transparent; + + --toolbox-non-lwt-bgcolor: light-dark(rgb(240, 240, 244), rgb(28, 27, 34)); + --toolbox-non-lwt-textcolor: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); + --toolbox-non-lwt-bgcolor-inactive: var(--toolbox-non-lwt-bgcolor); + --toolbox-non-lwt-textcolor-inactive: var(--toolbox-non-lwt-textcolor); + + &:where([tabsintitlebar]) { + --toolbox-non-lwt-bgcolor-inactive: light-dark(rgb(235, 235, 239), rgb(31, 30, 37)); + } + + --toolbar-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); + --toolbar-non-lwt-bgcolor: light-dark(#f9f9fb, rgb(43, 42, 51)); + --toolbar-non-lwt-textcolor: var(--toolbar-color); + + --toolbarbutton-icon-fill: light-dark(rgb(91, 91, 102), rgb(251, 251, 254)); + --toolbarbutton-icon-fill-attention: light-dark(rgb(0, 97, 224), rgb(0, 221, 255)); + --toolbarbutton-icon-fill-attention-text: light-dark(rgb(240, 240, 244), rgb(28, 27, 34)); + + --toolbar-field-border-color: transparent; + --toolbar-field-background-color: light-dark(rgb(240, 240, 244), rgb(28, 27, 34)); + --toolbar-field-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); + --toolbar-field-focus-background-color: light-dark(white, rgb(66, 65, 77)); + --toolbar-field-focus-color: light-dark(black, rgb(251, 251, 254)); + + --urlbarView-action-color: light-dark(rgb(91, 91, 102), rgb(191, 191, 201)); + --urlbarView-separator-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94)); + --urlbarView-highlight-background: light-dark(#e0e0e6, rgb(43,42,51)); + --urlbarView-highlight-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); + --urlbarView-hover-background: light-dark(rgb(240, 240, 244), var(--arrowpanel-dimmed)); + + --urlbar-box-bgcolor: light-dark(white, rgb(66, 65, 77)); + --urlbar-icon-fill-opacity: 0.72; + @media (prefers-color-scheme: dark) { + --urlbar-icon-fill-opacity: 1; + } + + --chrome-content-separator-color: light-dark(rgb(204, 204, 204), hsl(240, 5%, 5%)); + + --link-color: light-dark(rgb(0, 97, 224), rgb(0, 221, 255)); + } +} diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css new file mode 100644 index 0000000000..164b54bd85 --- /dev/null +++ b/browser/themes/shared/browser-shared.css @@ -0,0 +1,1212 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://browser/skin/downloads/indicator.css"); +@import url("chrome://browser/skin/addons/extension-controlled.css"); +@import url("chrome://browser/skin/addons/unified-extensions.css"); +@import url("chrome://browser/skin/toolbarbuttons.css"); +@import url("chrome://browser/skin/toolbarbutton-icons.css"); +@import url("chrome://browser/skin/menupanel.css"); +@import url("chrome://browser/skin/urlbar-searchbar.css"); +@import url("chrome://browser/skin/identity-block/identity-block.css"); +@import url("chrome://browser/skin/notification-icons.css"); +@import url("chrome://browser/skin/addon-notification.css"); +@import url("chrome://browser/skin/identity-credential-notification.css"); +@import url("chrome://browser/skin/urlbarView.css"); +@import url("chrome://browser/skin/autocomplete.css"); +@import url("chrome://browser/skin/places/editBookmarkPanel.css"); +@import url("chrome://browser/skin/sidebar.css"); +@import url("chrome://browser/skin/tabs.css"); +@import url("chrome://browser/skin/fullscreen/warning.css"); +@import url("chrome://browser/skin/ctrlTab.css"); +@import url("chrome://browser/skin/customizableui/customizeMode.css"); +@import url("chrome://browser/skin/UITour.css"); +@import url("chrome://browser/skin/formautofill-notification.css"); + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + user-select: none; + color-scheme: light dark; + accent-color: var(--button-primary-bgcolor); + + --toolbox-non-lwt-bgcolor: -moz-headerbar; + --toolbox-non-lwt-textcolor: -moz-headerbartext; + --toolbox-non-lwt-bgcolor-inactive: -moz-headerbarinactive; + --toolbox-non-lwt-textcolor-inactive: -moz-headerbarinactivetext; + + --toolbarbutton-border-radius: 4px; + + --chrome-content-separator-color: ThreeDShadow; + + --tabs-navbar-shadow-size: 1px; + --tabs-navbar-shadow-color: ThreeDShadow; + + --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; + + --identity-box-margin-inline: 4px; + --urlbar-box-bgcolor: var(--button-bgcolor); + --urlbar-box-focus-bgcolor: var(--button-bgcolor); + --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor); + --urlbar-box-active-bgcolor: var(--button-active-bgcolor); + --urlbar-box-text-color: inherit; + --urlbar-box-hover-text-color: var(--urlbar-box-text-color); + --urlbar-min-height: max(32px, 1.4em); + --urlbar-icon-fill-opacity: 0.9; + --urlbar-icon-padding: calc((var(--urlbar-min-height) - 2px /* border */ - 2px /* padding */ - 16px /* icon */) / 2); + /* This should be used for icons and chiclets inside the input field. It makes + the gap around them more uniform when they are close to the field edges */ + --urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) - 1px); + + --pocket-icon-fill: #ef4056; + + --lwt-additional-images: none; + --lwt-background-alignment: right top; + --lwt-background-tiling: no-repeat; + + --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67); + --inactive-window-transition: 0.2s ease; + --inactive-titlebar-opacity: .6; + /** + * On macOS and Linux, fading the whole titlebar is the native behavior. + * + * On Windows there's no particular standard, but the default .6 opacity + * feels like too much, specially because Windows "fades" the titlebar of + * unresponsive applications. Fade substantially less the titlebar on windows + * to account for this platform difference. + */ + @media (-moz-platform: windows) { + --inactive-titlebar-opacity: .75; + } + + &:where([tabsintitlebar]) { + --toolbox-non-lwt-bgcolor: ActiveCaption; + --toolbox-non-lwt-textcolor: CaptionText; + --toolbox-non-lwt-bgcolor-inactive: InactiveCaption; + --toolbox-non-lwt-textcolor-inactive: InactiveCaptionText; + } + + &:-moz-lwtheme { + color: var(--lwt-text-color); + + --link-color: light-dark(rgb(0, 97, 224), rgb(0, 221, 255)); + --chrome-content-separator-color: rgba(0,0,0,.3); + --tabs-navbar-shadow-color: light-dark(rgba(0,0,0,.1), rgba(0,0,0,.3)); + + @media not (prefers-contrast) { + --focus-outline-color: light-dark(#0061E0, #00DDFF); + } + } + + @media (prefers-contrast) { + --urlbar-icon-fill-opacity: 1; + } + + &[uidensity=compact] { + --urlbar-min-height: max(26px, 1.4em); + } + + &[uidensity=touch] { + --urlbar-min-height: max(34px, 1.4em); + } + + @media (prefers-color-scheme: dark) { + /* Increase the contrast of urlbar boxes in dark mode. + In practice these are bumped-up --button(-hover)-bgcolor rules */ + --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 (prefers-reduced-motion) { + --inactive-window-transition: 0s; + } + + @media (min-resolution: 1.5dppx) { + --tabs-navbar-shadow-size: 0.5px; + } + + @media (min-resolution: 3dppx) { + --tabs-navbar-shadow-size: 0.33px; + } +} + +#navigator-toolbox { + appearance: none; + + /* Toolbar / content area border */ + border-bottom: 1px solid var(--chrome-content-separator-color); + + background-color: var(--toolbox-non-lwt-bgcolor); + color: var(--toolbox-non-lwt-textcolor); + + will-change: background-color; + transition: background-color var(--inactive-window-transition); + + &:-moz-window-inactive { + background-color: var(--toolbox-non-lwt-bgcolor-inactive); + color: var(--toolbox-non-lwt-textcolor-inactive); + } + + :root[customizing] & { + border-bottom-style: none; + } + + &:-moz-lwtheme { + background-image: var(--lwt-additional-images); + background-repeat: var(--lwt-background-tiling); + background-position: var(--lwt-background-alignment); + background-color: var(--lwt-accent-color); + color: inherit; + + &:-moz-window-inactive { + background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); + } + } + + /* When a theme defines both theme_frame and additional_backgrounds, show + the latter atop the former. */ + :root[lwtheme-image] & { + background-image: var(--lwt-header-image), var(--lwt-additional-images); + background-repeat: no-repeat, var(--lwt-background-tiling); + background-position: right top, var(--lwt-background-alignment); + } +} + +.browser-toolbar { + appearance: none; + /* Reset linux padding */ + padding: 0; + + &:not(.titlebar-color) { + background-color: var(--toolbar-bgcolor); + color: var(--toolbar-color); + border-style: none; + } +} + +:root[tabsintitlebar] #titlebar { + will-change: opacity; + transition: opacity var(--inactive-window-transition); + + &:-moz-window-inactive { + opacity: var(--inactive-titlebar-opacity); + } +} + +/* 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); +} + +#nav-bar:not([tabs-hidden="true"]) { + /* The toolbar buttons that animate are only visible when the #TabsToolbar is not collapsed. + The animations use position:absolute and require a positioned #nav-bar. */ + position: relative; + box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--tabs-navbar-shadow-color); +} + +/* Bookmarks toolbar */ + +#PersonalToolbar { + /* Make the toolbar not take any vertical space when it's empty, before + bookmarks load. Otherwise, showing the toolbar might resize the content + area twice. */ + min-height: 0; + padding-inline: 6px; + + :root[uidensity=compact] & { + padding-inline: 2px; + } + + /* Vertical sliding animation */ + + overflow: clip; + max-height: 4em; + + :root[sessionrestored] &:not(.instant) { + transition: min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition); + + &[collapsed=true] { + transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear; + } + } + + &[collapsed=true] { + max-height: 0; + + &.instant { + visibility: collapse; + } + } + + /* Bookmarks toolbar empty message */ + + &[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. + */ + &[collapsed=false] > #personal-toolbar-empty[nowidth] > #personal-toolbar-empty-description { + margin-inline: 0; + min-width: 0; + white-space: nowrap; + position: relative; + z-index: 1; + } + + /* Bookmarks toolbar in customize mode */ + + &[customizing] { + outline: 1px dashed; + outline-offset: -3px; + /* Avoid the toolbar having no height when there's no items in it */ + min-height: 22px; + } +} + +/* Bookmarks toolbar only-on-new-tab mode */ + +:root { + --bookmarks-toolbar-overlapping-browser-height: max(28px, 2em); +} + +:root[BookmarksToolbarOverlapsBrowser] { + #PersonalToolbar { + height: var(--bookmarks-toolbar-overlapping-browser-height); + } + + #navigator-toolbox { + /* Overlap the content area by the height of the bookmarks toolbar so that + temporarily showing the toolbar for new tabs doesn't resize the content + area for all tabs. */ + margin-bottom: calc(-1 * var(--bookmarks-toolbar-overlapping-browser-height)); + z-index: 1; + } + + .newTabBrowserPanel, + #sidebar-box { + /* Make room for the bookmarks toolbar so that it won't visibly overlap the + new tab page and sidebar contents. We do not put this padding on #browser + as that would resize the content area for all tabs including background + tabs, which is what we explicitly want to avoid doing here. */ + padding-top: var(--bookmarks-toolbar-overlapping-browser-height); + } +} + +/* Bookmarks toolbar drop indicator */ + +#PlacesToolbarDropIndicator { + list-style-image: url(chrome://browser/skin/toolbar-drag-indicator.svg); + pointer-events: none; +} + +/* Menupopup drop indicators */ + +menupopup::part(drop-indicator-container) { + /* TODO(emilio): When menupopups get ported to modern flex layout we can + * probably simplify this substantially, by making the indicator position: + * absolute or so (which was never properly supported in XUL). The container + * should become completely unnecessary then. */ + min-width: 0; + min-height: 0; + max-width: 100%; + max-height: 100%; +} + +menupopup::part(drop-indicator-bar) { + position: relative; + /* these two margins must together compensate the indicator's height */ + margin-block: -1px; +} + +menupopup::part(drop-indicator) { + list-style-image: none; + height: 2px; + margin-inline-end: -4em; + background-color: SelectedItem; + pointer-events: none; +} + +/* Back / Forward context menu */ + +.unified-nav-back, +.unified-nav-forward { + -moz-context-properties: fill; + fill: currentColor; +} + +.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr), +.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) { + list-style-image: url("chrome://browser/skin/back.svg") !important; +} + +.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr), +.unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) { + list-style-image: url("chrome://browser/skin/forward.svg") !important; +} + +/* Status panel */ + +#statuspanel { + &:not([hidden]) { + max-width: calc(100% - 5px); + pointer-events: none; + + /* Take a bit more space vertically for the mouse tracker to hit us more + * easily */ + padding-top: 2em; + + position: absolute; + bottom: 0; + left: 0; + } + + &:not([mirror]):-moz-locale-dir(rtl), + &[mirror]:-moz-locale-dir(ltr) { + left: auto; + right: 0; + } + + &[sizelimit] { + max-width: 50%; + } + + &[type=status] { + min-width: min(23em, 33%); + } + + &[type=overLink] { + transition: opacity 120ms ease-out, visibility 120ms; + } + + &:is([type=overLink], [inactive][previoustype=overLink]) { + direction: ltr; + } + + &[inactive], + :root[inDOMFullscreen] &:not([type=overLink]) { + transition: none; + opacity: 0; + visibility: hidden; + + &[previoustype=overLink] { + transition: opacity 200ms ease-out, visibility 200ms; + } + } + + /* stylelint-disable-next-line media-query-no-invalid */ + @media (-moz-bool-pref: "browser.tabs.hideStatusPanel") { + visibility: hidden; + } +} + +#statuspanel-label { + color-scheme: env(-moz-content-preferred-color-scheme); + margin: 0; + padding: 2px 4px; + background-color: -moz-dialog; + border: 1px none ThreeDShadow; + border-top-style: solid; + color: -moz-dialogText; + text-shadow: none; + + @media (not (prefers-contrast)) and (not (-moz-platform: linux)) { + background-color: light-dark(#f9f9fa, hsl(240,1%,20%)); + border-color: light-dark(#ddd, hsl(240,1%,40%)); + color: light-dark(#444, rgb(249,249,250)); + } + + #statuspanel:not([mirror]) > &:-moz-locale-dir(ltr), + #statuspanel[mirror] > &:-moz-locale-dir(rtl) { + border-right-style: solid; + /* disabled on Windows for triggering grayscale AA (bug 659213): */ + @media not (-moz-platform: windows) { + border-top-right-radius: .3em; + } + margin-right: 1em; + } + + #statuspanel:not([mirror]) > &:-moz-locale-dir(rtl), + #statuspanel[mirror] > &:-moz-locale-dir(ltr) { + border-left-style: solid; + /* disabled on Windows for triggering grayscale AA (bug 659213): */ + @media not (-moz-platform: windows) { + border-top-left-radius: .3em; + } + margin-left: 1em; + } +} + +/* Find bar */ + +.browserContainer > findbar { + background-color: var(--toolbar-bgcolor); + color: var(--toolbar-color); + color-scheme: var(--toolbar-color-scheme); + border-top-color: var(--chrome-content-separator-color, ThreeDShadow); + + &:-moz-lwtheme { + background-color: var(--lwt-accent-color); + background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images); + background-repeat: no-repeat, var(--lwt-background-tiling); + background-position: right bottom, var(--lwt-background-alignment); + background-position-y: bottom !important; + + :root:not([lwtheme-image]) &:-moz-window-inactive { + background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); + } + + :root[lwtheme-image] & { + background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image), var(--lwt-additional-images); + background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling); + background-position: center, right bottom, var(--lwt-background-alignment); + } + } +} + +/* Private browsing indicator */ + +#private-browsing-indicator-with-label { + align-items: center; + margin-inline: 7px; + + :root:not([privatebrowsingmode=temporary]) & { + display: none; + } +} + +.private-browsing-indicator-icon { + list-style-image: url("chrome://global/skin/icons/indicator-private-browsing.svg"); + width: 16px; + height: 16px; +} + +/* End private browsing indicator */ + +/* Override theme colors since the picker uses extra colors that + themes cannot set */ +#DateTimePickerPanel { + color-scheme: env(-moz-content-preferred-color-scheme); + --arrowpanel-background: Field; + --arrowpanel-color: FieldText; +} + +#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); + + &:hover { + background-color: hsla(0,0%,70%,.2); + border-radius: 2px; + } +} + +#contextual-feature-recommendation-notification { + width: 400px; + + .popup-notification-icon { + margin-inline-end: 4px; + } + + .cfr-doorhanger-large-icon { + width: 64px; + height: 64px; + margin-inline-end: 12px; + } + + .cfr-doorhanger-medium-icon { + width: 50px; + height: 50px; + margin-inline-end: 12px; + } + + .popup-notification-body-container { + width: 100%; + padding-bottom: 2px; + } + + popupnotificationcontent { + margin-top: 0; + } + + description { + margin-bottom: 0; + } + + &[data-notification-bucket="CFR_MILESTONE_MESSAGE"] { + &:not([hidden]) { + display: flex; + flex-direction: row; + align-items: center; + 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; + padding: 4px; + } + + &:-moz-locale-dir(rtl) { + background: radial-gradient(circle farthest-side at top left, var(--short-notification-gradient), var(--short-notification-background)); + } + + .popup-notification-body-container, + .popup-notification-footer-container, + #cfr-notification-header-link { + display: none; + } + + #cfr-notification-header { + box-shadow: none; + } + + description { + font-weight: 400; + margin: unset; + margin-inline: 12px; + } + + .panel-footer, + .popup-notification-header-container { + display: inline-flex; + } + + .panel-footer { + float: inline-end; + background-color: transparent; + flex-direction: row-reverse; + /* Override proton-doorhanger default styles that increase the size of the button */ + margin: 0; + } + + .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; + min-height: 22px; + + &::after { + content: url(chrome://global/skin/icons/arrow-left-12.svg); + -moz-context-properties: fill; + fill: currentColor; + transform: translateY(2px); + float: inline-end; + } + + &:-moz-locale-dir(ltr)::after { + content: url(chrome://global/skin/icons/arrow-right-12.svg); + } + + &:hover { + background-color: rgba(216, 216, 216, 0.4); + } + + &:hover:active { + background-color: rgba(216, 216, 216, 0.5); + } + } + + .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; + min-height: 22px; + width: 22px; + padding: 0; + align-self: center; + flex: none; + font-size: 0; + + &:hover { + background-color: rgba(216, 216, 216, 0.4); + } + } + + .popup-notification-header-container { + color: white; + max-width: unset; + } + } + + &[data-notification-bucket="CFR_SOCIAL_TRACKING_PROTECTION"] { + width: 386px; + } + + &[data-notification-category="addon_recommendation"] { + .popup-notification-description > b { + padding-inline-start: 5px; + } + + #cfr-notification-footer-learn-more-link { + margin-inline-start: 5px; + } + + #cfr-notification-feature-steps, + #cfr-notification-header-image { + display: none; + } + + #cfr-notification-header-label { + margin-block-end: 9px; + } + } + + &[data-notification-category="icon_and_message"] { + /* + * `icon_and_message` CFR doorhanger with: icon, title and subtitle. + * No panel header is shown + */ + #cfr-notification-header, + .popup-notification-footer-container { + display: none; + } + + .popup-notification-description { + font-weight: 600; + margin-bottom: 15px; + } + + popupnotificationcontent { + display: block; /* This forces the subtitle content to wrap */ + } + } +} + +#cfr-notification-footer-text-and-addon-info { + display: block; + padding: 10px var(--arrowpanel-padding); +} + +#cfr-notification-feature-steps { + display: flex; + flex-direction: column; + margin-top: 10px; + + li { + margin-inline-start: 10px; + position: relative; + display: list-item; + + &: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; +} + +/* nhnt11: Workaround to insert a linebreak after the DoH doorhanger's title. + * The title uses the inline 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"] > b:first-of-type { + display: block; + margin-bottom: 4px; /* matches the margin-bottom on description elements */ +} + +/* Sharing tabs warning */ + +#sharing-tabs-warning-panel { + max-width: 400px; + + > hbox[type="window"] > vbox > label > #sharing-warning-screen-panel-header { + display: none; + } + + > hbox[type="screen"] > vbox > label > #sharing-warning-window-panel-header { + display: none; + } +} + +#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; + + &:hover { + background-color: rgb(0,62,170); + } +} + +/* webRTC device sharing selector */ + +.webRTC-selectDevice-selector-container { + display: flex; + align-items: center; + + > menulist { + flex: 1; + min-width: 0; + } +} + +#webRTC-selectSpeaker-richlistbox { + flex: 1; + /* Keep the richlistbox small enough that a large number of devices doesn't + push the main and secondary action buttons off the bottom of the + popupnotification window when limited by screen size. Only enough + richlistitems need to be shown to indicate that there are options + available but give enough space for the common case of only a few + devices. */ + max-height: 600px; +} + +#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://browser/skin/notification-icons/speaker.svg"); +} + +/* TODO: move these to popupnotification.css */ + +popupnotificationcontent { + margin-block-start: 8px; +} + +.popup-notification-body menulist { + margin: 0; +} + +.popup-notification-checkbox { + margin-block: 12px 0; +} + +.popup-notification-body-container { + padding-block-end: 0; +} + +.popup-notification-body :is(description, label:not(.learnMore), checkbox, input) { + margin-inline: 0; +} + +.popup-notification-body :is(input, textarea) { + 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:focus-visible { + outline: 2px solid var(--focus-outline-color); +} + +.popup-notification-description { + font-weight: 600; + margin-top: 0; + + > b { + font-weight: inherit; + } +} + +/* Password Manager Doorhanger */ + +.ac-dropmarker { + appearance: none; + justify-self: end; + margin-inline-end: 8px; + align-self: center; + content: 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; +} + +.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; +} + +.password-notification-label { + margin-block-start: 16px; + + /** + * 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. + */ + &:first-of-type { + margin-block-start: 8px; + } +} + +#password-notification-visibilityToggle { + margin-block-start: 14px; + + > .checkbox-label-box > .checkbox-label { + opacity: 0.7; + } +} + +#tab-notification-deck { + display: block; +} + +/* Relay Integration */ + +.relay-integration-header { + display: flex; + align-items: center; + font-size: 2em; + + > div { + width: 32px; + height: 32px; + background-image: url("chrome://browser/content/logos/relay.svg"); + background-repeat: no-repeat; + } + + > span:first-of-type { + font-weight: bold; + margin-inline-start: 8px; + } + + > span:last-of-type { + font-weight: normal; + white-space: pre; + } +} + +.popup-notification-description[popupid="relay-integration-offer-notification"] > 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; + + > button { + padding: 4px; + margin: 4px; + display: flex; + flex-direction: row; + justify-content: space-between; + + > span:first-child { + margin-inline-end: 20px; + } + + > span:last-child { + opacity: 0.6; + } + } +} + +/* History swipe navigation animation */ + +#historySwipeAnimationPreviousArrow, +#historySwipeAnimationNextArrow { + --swipe-nav-icon-primary-color: SelectedItemText; + --swipe-nav-icon-accent-color: SelectedItem; + + will-change: transform; + + @media not (prefers-contrast) { + /* TODO: Should this be in browser-custom-colors to respect system theming on + * Linux? */ + --swipe-nav-icon-primary-color: light-dark(#0060DF, #00DDFF); + --swipe-nav-icon-accent-color: light-dark(#FFFFFF, #000000); + } + + > svg { + margin: auto 0; + } +} + +#historySwipeAnimationPreviousArrow:-moz-locale-dir(rtl), +#historySwipeAnimationNextArrow:-moz-locale-dir(ltr) { + transform: scaleX(-1); +} + +.swipe-nav-icon { + > path { + transition: fill 1s; + } + + @media not (-moz-platform: macos) { + /* + * Styles for the swipe navigation SVG icon. + * + * `will-navigate` class name is added to the element when the user's + * swipe gesture reached to the point where history navigation will be + * triggered. It's used for triggering three animations, an arrow color change, + * a circle color change and a glowing effect outer the circle. + */ + > circle { + fill: var(--swipe-nav-icon-accent-color); + stroke: var(--swipe-nav-icon-primary-color); + transition: fill 1s; + + &:first-of-type { + fill: var(--swipe-nav-icon-primary-color); + transition: opacity 1s; + will-change: opacity; /* a workaround for bug 1804189 */ + opacity: 0; + } + } + + &.will-navigate > circle:not(:first-of-type) { + fill: var(--swipe-nav-icon-primary-color); + } + + &.will-navigate > circle:first-of-type { + transition-delay: 0.2s; + opacity: 0.2; + } + + > path { + fill: var(--swipe-nav-icon-primary-color); + } + + &.will-navigate > path { + fill: var(--swipe-nav-icon-accent-color); + stroke: var(--swipe-nav-icon-accent-color); + } + } +} + +@media (-moz-platform: macos) { + /* + * Styles for the swipe navigation SVG icon. + * + * `will-navigate` class name is added to the element when the user's + * swipe gesture reached to the point where history navigation will be + * triggered. + */ + .swipe-nav-icon-circle-outline, + .swipe-nav-icon-arrow { + fill: var(--swipe-nav-icon-primary-color); + } + + .swipe-nav-icon-circle { + fill: var(--swipe-nav-icon-accent-color); + } + + .swipe-nav-icon.will-navigate { + > .swipe-nav-icon-circle-outline, + > .swipe-nav-icon-arrow { + fill: var(--swipe-nav-icon-accent-color); + } + + > .swipe-nav-icon-circle { + fill: var(--swipe-nav-icon-primary-color); + } + } +} + +/* TODO: move this to toolkit */ +panel toolbarseparator { + appearance: none; + min-height: 0; + border-top: 1px solid var(--panel-separator-color); + border-bottom: none; + margin: var(--panel-separator-margin); + padding: 0; +} + +/* Picture-in-Picture panel */ + +#PictureInPicturePanel { + width: var(--menu-panel-width-wide); + font: caption; +} + +#PictureInPicturePanelBody { + gap: 8px; + padding: 8px 16px; +} + +#PictureInPicturePanelFooter { + margin: 8px 16px 16px; +} + +/* Shopping sidebar */ + +shopping-sidebar { + border-inline-start: 1px solid var(--chrome-content-separator-color); + min-width: 16.92em; + max-width: 32.31em; + width: 320px; + box-sizing: content-box; +} diff --git a/browser/themes/shared/contextmenu.css b/browser/themes/shared/contextmenu.css new file mode 100644 index 0000000000..ae9d374288 --- /dev/null +++ b/browser/themes/shared/contextmenu.css @@ -0,0 +1,69 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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"); + +/* Combined context-menu items */ + +#context-navigation > .menuitem-iconic { + flex: 1; + justify-content: center; + align-items: center; + + > .menu-iconic-text, + > .menu-accel-container { + display: none; + } + + > .menu-iconic-left { + appearance: none; + margin: 0; + padding: 0; + + > .menu-iconic-icon { + width: auto; + height: auto; + padding: 7px; + margin: 0; + -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-blocked.svg b/browser/themes/shared/controlcenter/3rdpartycookies-blocked.svg new file mode 100644 index 0000000000..29ba08f7b6 --- /dev/null +++ b/browser/themes/shared/controlcenter/3rdpartycookies-blocked.svg @@ -0,0 +1,6 @@ + + + + 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..d7685cdc69 --- /dev/null +++ b/browser/themes/shared/controlcenter/panel.css @@ -0,0 +1,781 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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=associated] [when-connection~=associated], +#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 and HTTPS-First Mode */ +#identity-popup[httpsonlystatus=exception] [when-httpsonlystatus~=exception], +#identity-popup[httpsonlystatus=upgraded] [when-httpsonlystatus~=upgraded], +#identity-popup[httpsonlystatus=failed-top] [when-httpsonlystatus~=failed-top], +#identity-popup[httpsonlystatus=failed-sub] [when-httpsonlystatus~=failed-sub], +/* Show 'disable MCB' button always when there is mixed active content blocked. */ +#identity-popup-securityView-extended-info[mixedcontent~=active-blocked] > button[when-mixedcontent=active-blocked] { + display: revert; +} + +/* Hide 'not secure' message in subview when weak cipher or mixed content messages are shown. */ +#identity-popup-securityView-extended-info:is([mixedcontent],[ciphers]) > description[when-connection=not-secure], +/* Hide 'passive-loaded (only)' message when there is mixed passive content loaded and active blocked. */ +#identity-popup-securityView-extended-info[mixedcontent~=passive-loaded][mixedcontent~=active-blocked] > description[when-mixedcontent=passive-loaded] { + display: none; +} + +/* Make sure hidden elements don't accidentally become visible from one of the + above selectors (see Bug 1194258) */ +#identity-popup [hidden] { + display: none !important; +} + +#identity-popup-mainView, +#permission-popup-mainView, +#protections-popup-mainView { + min-width: var(--popup-width); + max-width: var(--popup-width); +} + +#protections-popup[toast] #protections-popup-mainView > :not(#protections-popup-mainView-panel-header-section), +#protections-popup[toast] #protections-popup-mainView-panel-header-section > :not(#protections-popup-mainView-panel-header), +#protections-popup[toast] #protections-popup-mainView-panel-header > :is(.panel-info-button, #protections-popup-main-header-label) { + /* Hide all elements in the panel except for the toast descriptions */ + display: none; +} + +#protections-popup[toast] #protections-popup-mainView-panel-header { + min-height: unset; /* revert panelUI-shared.css */ +} + +#identity-popup-security-description > description { + font-weight: 600; + margin-top: 0.5em; +} + +#identity-popup-security-httpsonlymode { + margin-top: 1em; +} + +#identity-popup-security-httpsonlymode-menulist { + width: 11em; + margin: 0.5em 0; +} + +#identity-popup-security-httpsonlymode-info { + font-size: 0.85em; + color: var(--text-color-deemphasized); +} + +#identity-popup-security-httpsonlymode-info > description { + margin-bottom: 0.5em; +} + +#permission-popup-permissions-content { + padding-inline: 1.25em; + min-width: 0; +} + +/* CONTENT */ + +:where(#protections-popup, #identity-popup) :is(description, label) { + margin: 0; +} + +#protections-popup .panel-header > h1 > span, +#permission-popup .panel-header > h1 > span, +#identity-popup .panel-header > h1 > span { + /* This is needed for the overflow-wrap to work correctly when the domain name is really long. */ + max-width: calc(var(--popup-width) - 2 * var(--arrowpanel-menuitem-margin-inline)); + overflow-wrap: break-word; +} + +#protections-popup .panel-header > h1 > span { + /* The protections popup panel header text needs a different calculation because it contains an info button. + * icon-full-width is included twice to compensate for the margin-inline-start of the text, + * used to center it even if the header includes a info button. See .panel-header-with-info-button */ + max-width: calc(var(--popup-width) + - var(--arrowpanel-menuitem-margin-inline) * 2 + - var(--arrowpanel-header-info-icon-full-width) * 2); +} + +#identity-popup .panel-header > .subviewbutton-back + h1 > span { + /* Same idea as above, but in the identity popup when there's a back button. */ + max-width: calc(var(--popup-width) + - var(--arrowpanel-menuitem-margin-inline) * 2 + - var(--arrowpanel-header-back-icon-full-width) * 2); +} + +#protections-popup:not([infoMessageShowing]) #protections-popup-mainView-panel-header-section + toolbarseparator { + display: none; +} + +#protections-popup-mainView-panel-header-section { + /* Don't display the info message on top of the panel content while it fades in and out */ + overflow: hidden; +} + +#permission-popup-permissions-content > description, +#protections-popup-content > description { + color: var(--text-color-deemphasized); +} + +/* This element needs the pre-wrap because we add newlines to it in the code. */ +#identity-popup-content-supplemental { + white-space: pre-wrap; +} + +/* SECURITY */ + +#identity-popup[mixedcontent~=active-loaded] .identity-popup-connection-not-secure, +#identity-popup:not([mixedcontent]) .identity-popup-connection-not-secure { + font-weight: bold; +} + +#identity-popup-mainView > .panel-subview-body { + padding-bottom: var(--panel-subview-body-padding-block); +} + +#identity-popup-mainView[footerVisible="true"] > .panel-subview-body { + padding-bottom: 0; +} + +.identity-popup-section { + margin-inline: var(--arrowpanel-menuitem-margin-inline); + padding-inline: var(--arrowpanel-menuitem-padding-inline); +} + +.identity-popup-section.indented { + /* Align with the text displayed following the lock icon, in the connection status button above. + 16px is the icon size and 8px is the inline-start padding of the text. */ + padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + 16px + 8px); +} + +.identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/security-broken.svg); + margin: var(--arrowpanel-menuitem-margin); + padding: var(--arrowpanel-menuitem-padding); + -moz-context-properties: fill; + min-height: 24px; +} + +#identity-popup[connection=chrome] .identity-popup-security-connection { + list-style-image: url(chrome://branding/content/icon48.png); +} + +#identity-popup[connection=file] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/page-portrait.svg); +} + +#identity-popup[connection=associated] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/info.svg); +} + +#identity-popup[connection^=secure] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/security.svg); +} + +/* Use [isbroken] to make sure we don't show a warning lock on an http page. See Bug 1192162. */ +#identity-popup[ciphers=weak] .identity-popup-security-connection, +#identity-popup[mixedcontent~=passive-loaded][isbroken] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/security-warning.svg); + -moz-context-properties: fill, fill-opacity; +} + +#identity-popup[connection=secure-cert-user-overridden] .identity-popup-security-connection, +#identity-popup[connection=cert-error-page] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/security-warning.svg); + fill: unset; +} + +#identity-popup[connection=net-error-page] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/info.svg); + fill: unset; +} + +#identity-popup[mixedcontent~=active-loaded][isbroken] .identity-popup-security-connection { + list-style-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg); +} + +#identity-popup[connection=extension] .identity-popup-security-connection { + list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); +} + +.identity-popup-security-connection-icon { + width: 16px; + height: 16px; +} + +.identity-popup-connection-secure.security-view, +.identity-popup-connection-secure.upgraded, +.identity-popup-connection-not-secure.security-view { + padding-inline-start: 8px; +} + +#identity-popup-securityView-extended-info > button, +#identity-popup-securityView-extended-info > hbox > .text-link, +#identity-popup-content-verifier, +#identity-popup-content-verifier ~ description, +#identity-popup-content-owner-label { + margin-block: 0.5em; +} + +#identity-popup-securityView-extended-info > .identity-popup-warning-box { + font-weight: 600; +} + +#identity-popup-securityView-extended-info > .identity-popup-warning-box > label { + display: inline-block; +} + +#identity-popup-securityView-extended-info > button { + margin-inline: 0; +} + +@media (-moz-platform: macos) { + #identity-popup-securityView-extended-info > button { + min-height: 30px; + } + + #identity-popup-securityView-extended-info > button:focus-visible { + outline: var(--focus-outline); + } +} + +#identity-popup-content-verifier-unknown > label { + display: inline; +} + +#protections-popup-sendReportView-description > label { + display: inline; +} + +/* CONTENT BLOCKING / TRACKING PROTECTION */ + +#protections-popup-sendReportView-heading, +#protections-popup-sendReportView-body, +#protections-popup-siteNotWorkingView-body { + padding: var(--vertical-section-padding) var(--horizontal-padding); +} + +.protections-popup-sendReportView-collection-section { + margin-bottom: 16px; +} + +#protections-popup-sendReportView-collection-url { + appearance: none; + border: none; + margin: 4px 0; +} + +#protections-popup-sendReportView-collection-comments { + height: 120px; + resize: vertical; +} + +.protections-popup-sendReportView-collection-section label { + margin-bottom: 2px; +} + +#protections-popup-sendReportView-report-error { + margin-bottom: 24px; + color: #d74345; +} + +#protections-popup-not-blocking-section-why:hover, +#protections-popup-show-report-stack:hover > .protections-popup-footer-button { + background-color: var(--panel-item-hover-bgcolor); +} + +#protections-popup-show-report-stack:hover:active > .protections-popup-footer-button { + background-color: var(--panel-item-active-bgcolor); +} + +/* This subview could get filled with a lot of trackers, set a maximum size + * and allow it to scroll vertically.*/ +#protections-popup-socialblockView, +#protections-popup-cookiesView, +#protections-popup-trackersView { + max-height: calc(600px + var(--height-offset)); +} + +#protections-popup-trackersView-list.empty { + align-items: center; + justify-content: center; +} + +.protections-popup-empty-label { + color: var(--text-color-deemphasized); +} + +.protections-popup-trackersView-empty-image { + width: 48px; + height: 48px; + -moz-context-properties: fill; + margin-bottom: 16px; +} + +#protections-popup-cookiesView .protections-popup-empty-label { + margin-inline-start: 24px; + margin-block: 2px 4px; +} + +.protections-popup-cookiesView-list-header { + color: var(--text-color-deemphasized); + margin: 5px 0; +} + +#protections-popup-cookiesView-list > .protections-popup-cookiesView-list-section:only-of-type > .protections-popup-cookiesView-list-header { + display: none; +} + +.protections-popup-list { + padding: 5px 16px !important; /* override panelUI-shared.css */ +} + +.protections-popup-list-item { + display: flex; + margin: 5px 0; +} + +.protections-popup-list-host-label { + direction: ltr; + text-align: match-parent; +} + +/* Special alignment for items which include a state label (e.g. "Allowed") */ +.protections-popup-list-item-with-state > label { + margin: auto 0; +} +.protections-popup-list-item-with-state { + justify-content: space-between; +} + +/* Content Blocking categories */ + +#protections-popup-no-trackers-found-description { + margin: 4.85em 7.25em; + font-size: 1.1em; + text-align: center; + color: var(--text-color-deemphasized); +} + +.protections-popup-section-header { + color: var(--text-color-deemphasized); +} + +:root[uidensity="compact"] .protections-popup-section-header { + margin-block: 4px; +} + +#tracking-protection-container > tooltip { + max-width: var(--popup-width); +} +/* + * The category list is split into two sections: "Blocking" and "Not Blocking", + * with five different category items distributed between them at runtime. + * To achieve this, we use a grid layout with 12 rows: one row for each header + * label and five rows in each section for the items. + * Items with the "blocked" class are assigned rows 2-6, and those without + * are assigned rows 8-12, with the headers taking rows 1 and 7. + */ + +#protections-popup-no-trackers-found-description:not([hidden]) ~ #protections-popup-content { + display: none; +} + +#protections-popup-not-blocking-section-why { + border-radius: 2px; +} + +#protections-popup-not-blocking-section-why:hover { + outline: 4px solid var(--panel-item-hover-bgcolor); +} + +.trackers-icon { + list-style-image: url(chrome://browser/skin/canvas.svg); +} + +.socialblock-icon { + list-style-image: url(chrome://browser/skin/thumb-down.svg); +} + +.thirdpartycookies-icon { + list-style-image: url(chrome://browser/skin/controlcenter/3rdpartycookies.svg); +} + +.cryptominers-icon { + list-style-image: url(chrome://browser/skin/controlcenter/cryptominers.svg); +} + +.fingerprinters-icon { + list-style-image: url(chrome://browser/skin/fingerprint.svg); +} + +/* PERMISSIONS */ + +.permission-popup-permission-item { + min-height: 24px; +} + +.protections-popup-category[uidisabled] { + display: none; +} + +#permission-popup-storage-access-permission-list-header { + padding-inline-end: 8px; +} + +.permission-popup-permission-item, +#permission-popup-storage-access-permission-list-header { + margin-block: 0.25em; +} + +#permission-popup-permission-reload-hint, +#permission-popup-permission-empty-hint { + margin-top: 8px; +} + +.permission-popup-permission-list-anchor[anchorfor="3rdPartyStorage"] > vbox:only-child { + display: none; +} + +#permission-popup-storage-access-permission-list-hint { + margin-top: 0.25em; + color: var(--text-color-deemphasized); +} + +#permission-popup-storage-access-permission-list-hint, +#permission-popup-storage-access-permission-learn-more { + /* Matches offset for items - 16px icon + 8px margin */ + margin-inline-start: calc(16px + 8px); +} + +.permission-popup-permission-icon { + width: 16px; + height: 16px; +} + +.permission-popup-permission-label, +.permission-popup-permission-header-label { + margin-inline-start: 8px; +} + +.permission-popup-permission-label-subitem { + /* Align label with other labels with icon. */ + /* icon width + icon inline margin + label inline margin */ + margin-inline-start: calc(16px + 3px + 10px); +} + +.permission-popup-permission-state-label { + margin-inline-end: 5px; + text-align: end; +} + +.permission-popup-permission-remove-button { + appearance: none; + min-width: auto; + margin: 0; + margin-inline-start: 2px; + border-width: 0; + padding: 2px; + padding-inline-end: 6px; + background-color: var(--button-bgcolor); + color: var(--button-color); + border-radius: 4px; +} + +.permission-popup-permission-remove-button > .button-box > .button-icon { + margin: 0; + width: 12px; + height: 12px; + list-style-image: url(chrome://global/skin/icons/close.svg); + -moz-context-properties: fill; + fill: currentColor; +} + +.permission-popup-permission-remove-button > .button-box > .button-text { + display: none; +} + +.permission-popup-permission-remove-button:not(:focus-visible):hover { + background-color: var(--button-hover-bgcolor); +} + +.permission-popup-permission-remove-button:not(:focus-visible):hover:active { + background-color: var(--button-active-bgcolor) +} + +#protections-popup-cookie-banner-section[hasException] .protections-popup-cookie-banner-switch-on-header, +#protections-popup-cookie-banner-section:not([hasException]) .protections-popup-cookie-banner-switch-off-header { + display: none; +} + +#protections-popup-toast-panel-tp-on-desc, +#protections-popup-toast-panel-tp-off-desc { + display: none; +} + +#protections-popup:not([hasException])[toast] #protections-popup-toast-panel-tp-on-desc, +#protections-popup[hasException][toast] #protections-popup-toast-panel-tp-off-desc { + display: revert; +} + +.protections-popup-switch-header { + font-weight: 600; +} + +#protections-popup-siteNotWorkingView-body-issue-list { + padding-inline-start: 1em; +} + +/* Protection popup footer categories */ + +#protections-popup-trackers-blocked-counter-box { + margin: var(--arrowpanel-menuitem-margin); + padding: var(--arrowpanel-menuitem-padding); + visibility: hidden; + opacity: 0; + transition: opacity 200ms linear; + justify-self: end; +} + +#protections-popup-trackers-blocked-counter-box[showing] { + visibility: visible; + opacity: 1; +} + +#protections-popup-trackers-blocked-counter-description, +#protections-popup-footer-protection-type-label { + color: var(--text-color-deemphasized); +} + +.protections-popup-description > description { + margin: 10px 16px; +} + +#protections-popup:not([milestone]) #protections-popup-milestones, +#protections-popup:not([milestone]) #protections-popup-milestones-separator { + display: none; +} + +#protections-popup-milestones-content { + background-color: var(--panel-banner-item-background-color); +} + +/* The padding-block for menuitems is set to 0 in compact mode which, with the + * shield icon being bigger than a usual menuitem, makes the item look crowded + * even for compact mode. */ +:root[uidensity="compact"] #protections-popup-milestones-content { + padding-block: 4px; +} + +#protections-popup-milestones-content:hover { + background-color: var(--panel-banner-item-hover-bgcolor); +} + +#protections-popup-milestones-content:hover:active { + background-color: var(--panel-banner-item-active-bgcolor); +} + +#protections-popup-milestones-text { + font-weight: 600; +} + +#protections-popup-milestones-illustration { + list-style-image: url(chrome://browser/skin/controlcenter/etp-milestone.svg); + -moz-context-properties: fill, stroke; + margin-inline-start: var(--horizontal-padding); + margin-inline-end: 4px; + height: 40px; + width: 32px; +} + +#protections-popup[milestone] #protections-popup-milestones-illustration { + fill: #45278d; + stroke: #321c64; +} + +#protections-popup[milestone="5000"] #protections-popup-milestones-illustration { + fill: #5a29cb; + stroke: #45278d; +} + +#protections-popup[milestone="10000"] #protections-popup-milestones-illustration { + fill: #7641e5; + stroke: #5a29cb; +} + +#protections-popup[milestone="25000"] #protections-popup-milestones-illustration { + fill: #e31587; + stroke: #c60084; +} + +#protections-popup[milestone="50000"] #protections-popup-milestones-illustration { + fill: #ff298a; + stroke: #e31587; +} + +#protections-popup[milestone="100000"] #protections-popup-milestones-illustration { + fill: #ffa436; + stroke: #e27f2e; +} + +#protections-popup[milestone="500000"] #protections-popup-milestones-illustration { + fill: #ffd567; + stroke: #ffbd4f; +} + +.permission-popup-section { + padding-bottom: 12px; +} + +#permission-popup-menulist { + padding-inline: 12px 6px; +} + +.protections-popup-section-header, +.protections-popup-switch-section-header, +#protections-popup-siteNotWorkingView-header { + padding: var(--arrowpanel-menuitem-padding); + margin: var(--arrowpanel-menuitem-margin); +} + +.identity-popup-expander:focus-visible, +.permission-popup-permission-remove-button:focus-visible { + outline: var(--focus-outline); +} + +@media (-moz-platform: linux) { + .identity-popup-expander > .button-box, + .permission-popup-permission-remove-button > .button-box { + appearance: none; + } +} + +#blocked-popup-indicator-item, +#geo-access-indicator-item { + margin-top: -2px; + margin-inline-start: 16px; +} + +#geo-access-indicator-item { + font-size: 0.8em; + color: var(--text-color-deemphasized); +} + +/** Shim-allow warning and indicator icons **/ + +.protections-popup-shim-allow-hint { + padding: 0 2em; + margin-block-end: 10px; +} + +.protections-popup-shim-allow-hint-icon, +.protections-popup-list-host-shim-allow-indicator { + -moz-context-properties: fill; + background-image: url("chrome://global/skin/icons/info-filled.svg"); + background-repeat: no-repeat; + background-position: center; + + fill: light-dark(#0090ED, #80EBFF); +} + +.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; +} + +.protections-popup-shim-allow-hint-icon { + margin-inline-end: 0.5em; +} + +.protections-popup-list-host-shim-allow-indicator { + margin-inline-start: 0.5em; + min-width: 16px; +} + +#cookieBannerView-disable-site, +#cookieBannerView-enable-site { + font-weight: 600; +} + +.protections-popup-cookieBannerView-footer { + margin-top: auto; +} + + +/* Cookie banner state toggles for the popup menu item */ + +#protections-popup-cookie-banner-section:not([data-state="detected"]) description#protections-popup-cookie-banner-detected, +#protections-popup-cookie-banner-section:not([data-state="undetected"]) description#protections-popup-cookie-banner-undetected, +#protections-popup-cookie-banner-section:not([data-state="site-disabled"]) description#protections-popup-cookie-banner-site-disabled { + display: none; +} + +/* Cookie banner state toggles for the subview: if the state is detected, show + * the disable controls; if the state is site-disabled, show the enable controls. */ +#protections-popup-cookieBannerView:not([data-state="detected"]) #protections-popup-cookieBannerView-disable-button, +#protections-popup-cookieBannerView:not([data-state="detected"]) description#cookieBannerView-disable-site, +#protections-popup-cookieBannerView:not([data-state="detected"]) description#cookieBannerView-disable-site-warning, +#protections-popup-cookieBannerView:not([data-state="site-disabled"]) #protections-popup-cookieBannerView-enable-button, +#protections-popup-cookieBannerView:not([data-state="site-disabled"]) description#cookieBannerView-enable-site, +#protections-popup-cookieBannerView:not([data-state="site-disabled"]) description#cookieBannerView-enable-site-description { + display: none; +} diff --git a/browser/themes/shared/controlcenter/tracking-protection.svg b/browser/themes/shared/controlcenter/tracking-protection.svg new file mode 100644 index 0000000000..341e44fa6d --- /dev/null +++ b/browser/themes/shared/controlcenter/tracking-protection.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/ctrlTab.css b/browser/themes/shared/ctrlTab.css new file mode 100644 index 0000000000..645467864d --- /dev/null +++ b/browser/themes/shared/ctrlTab.css @@ -0,0 +1,123 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* Ctrl-Tab */ + +#ctrlTab-panel { + appearance: none; + --panel-background: hsla(0,0%,40%,.85); + --panel-color: white; + --panel-border-color: transparent; + --panel-padding: 20px 10px 10px; +} + +@media (-moz-platform: macos) { + #ctrlTab-panel { + -moz-window-shadow: none; + } +} + +@media not (-moz-platform: macos) { + #ctrlTab-panel { + font-weight: bold; + } +} + +.ctrlTab-preview, +#ctrlTab-showAll { + appearance: none; + color: inherit; + /* remove the :-moz-focusring outline from button.css on Windows */ + outline: none !important; + margin: 0; + text-shadow: 0 0 1px hsl(0,0%,12%), 0 0 2px hsl(0,0%,12%); + border: none; + background-color: transparent; +} + +.ctrlTab-preview > .button-box { + display: none; +} + +.ctrlTab-canvas > html|img, +.ctrlTab-canvas > html|canvas { + min-width: inherit; + max-width: inherit; + min-height: inherit; + max-height: inherit; +} + +.ctrlTab-favicon-container { + position: relative; + justify-content: flex-end; +} + +.ctrlTab-favicon[src] { + width: 42px; + height: 42px; + margin-top: -44px; + margin-bottom: 2px; + margin-inline-end: -6px; + padding: 5px; + background-color: #F9F9FA; + border-radius: 6px; + box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); +} + +.ctrlTab-canvas { + color-scheme: light; + background-color: Canvas; + color: CanvasText; + box-shadow: 1px 1px 2px hsl(0,0%,12%); + margin-bottom: 8px; +} + +@media (-moz-content-prefers-color-scheme: dark) { + .ctrlTab-canvas { + /* Make the blank canvas match the default content background. */ + color-scheme: dark; + } +} + +.ctrlTab-preview:not([hidden]) .ctrlTab-canvas:empty::before { + content: ""; + display: block; + width: 100%; + height: 100%; + background: url("chrome://global/skin/icons/defaultFavicon.svg") center/20% no-repeat; + -moz-context-properties: fill; + fill: currentColor; + filter: drop-shadow(0 0 2px hsla(0,0%,0%,0.5)); +} + +.ctrlTab-preview-inner, +#ctrlTab-showAll { + padding: 8px; + border: 2px solid transparent; + border-radius: .5em; +} + +.ctrlTab-preview-inner { + margin-top: -10px; +} + +#ctrlTab-showAll { + background-color: rgba(255,255,255,.2); + margin-top: .5em; +} + +.ctrlTab-preview:focus > .ctrlTab-preview-inner, +#ctrlTab-showAll:focus { + background-color: rgba(0,0,0,.75); + text-shadow: none; + border-color: #45a1ff; +} + +.ctrlTab-label { + flex: 1; + justify-content: center; + contain: inline-size; +} diff --git a/browser/themes/shared/customizableui/customizeMode.css b/browser/themes/shared/customizableui/customizeMode.css new file mode 100644 index 0000000000..b3ee1ada6c --- /dev/null +++ b/browser/themes/shared/customizableui/customizeMode.css @@ -0,0 +1,549 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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); + color-scheme: var(--toolbar-color-scheme); +} + +#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; + + > .footer-button, + > .customization-checkbox, + > .customization-link { + margin-block: 0; + } +} + +#widget-overflow-fixed-list > toolbarpaletteitem:not([notransition])[place="panel"], +toolbarpaletteitem:not([notransition])[place="toolbar"] { + transition: border-width var(--drag-drop-transition-duration) ease-in-out; +} + +#widget-overflow-fixed-list > toolbarpaletteitem { + flex: none; +} + +toolbarpaletteitem[mousedown] { + cursor: -moz-grabbing; +} + +toolbarpaletteitem:not([notransition])[place="palette"], +toolbarpaletteitem:not([notransition])[place="panel"] { + transition: transform var(--drag-drop-transition-duration) ease-in-out; +} + +#customization-palette { + transition: opacity .3s ease-in-out; + opacity: 0; +} + +#customization-palette[showing="true"] { + opacity: 1; +} + +#customization-palette #firefox-view-button[attention] { + background-position: center bottom 8%; +} + +toolbarpaletteitem toolbarbutton[disabled] { + color: inherit !important; +} + +#PersonalToolbar toolbarpaletteitem toolbarbutton[checked="true"], +toolbar toolbarpaletteitem toolbarbutton[checked="true"] + > :where(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) { + background-color: revert !important; +} + +toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, +toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, +toolbarpaletteitem > #search-container, +toolbarpaletteitem > toolbaritem.toolbaritem-combined-buttons { + transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important; +} + +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon { + transform: scale(1.3); +} + +toolbarpaletteitem[mousedown] > #search-container, +toolbarpaletteitem[mousedown] > toolbaritem.toolbaritem-combined-buttons { + transform: scale(1.1); +} + +toolbarpaletteitem[mousedown] > #search-container > #searchbar, +toolbarpaletteitem[mousedown] > #urlbar-container > #urlbar > #urlbar-background +{ + outline: 1px solid color-mix(in srgb, currentColor 60%, transparent); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.13); +} + +/* Override the toolkit styling for items being dragged over. */ +toolbarpaletteitem[place="toolbar"] { + border-inline-width: 0; + margin-inline: 0; +} +#widget-overflow-fixed-list > toolbarpaletteitem[place="panel"] { + border-block: 0 solid transparent; +} + +#customization-palette:not([hidden]) { + margin-bottom: 20px; +} + + +toolbarpaletteitem[place="palette"]:-moz-focusring, +toolbarpaletteitem[place="panel"]:-moz-focusring, +toolbarpaletteitem[place="toolbar"]:-moz-focusring { + outline-width: 0; +} + +toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring, +toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring, +toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { + /* Delay adding the focusring back until after the transform transition completes. */ + transition: outline-width .01s linear var(--drag-drop-transition-duration); + outline: var(--default-focusring); +} + +toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { + outline-offset: calc(-1 * var(--default-focusring-width) - 4px); +} + +toolbarpaletteitem[place=palette]::after { + content: attr(title); + display: block; + text-align: center; +} + +toolbarpaletteitem[place=palette] > toolbarspring { + width: 7em; + min-width: 7em; + outline: 1px solid; + outline-offset: -8px; + opacity: .6; + min-height: 37px; + max-height: 37px; +} + +toolbarpaletteitem[place=toolbar] > toolbarspring { + outline: 1px solid; + outline-offset: -2px; + opacity: .6; + margin-block: 5px; +} + +toolbarpaletteitem > #search-container > #searchbar > .searchbar-textbox { + visibility: hidden; /* Hide searchbar placeholder text in customize mode */ +} + +#wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon { + opacity: 1; /* To ensure these buttons always look enabled in customize mode */ +} + +#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button, +#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator { + display: none; +} + +/* Squeeze together the multi-button toolbarpaletteitems: */ +#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-out-button, +#wrapper-edit-controls[place="palette"] > #edit-controls > #cut-button, +#wrapper-profiler-button[place="palette"] > #profiler-button > #profiler-button-button { + align-items: flex-end; +} +#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-in-button, +#wrapper-edit-controls[place="palette"] > #edit-controls > #paste-button, +#wrapper-profiler-button[place="palette"] > #profiler-button > #profiler-button-dropmarker { + align-items: flex-start; +} +#wrapper-edit-controls[place="palette"] > #edit-controls > #copy-button { + flex: none; +} + +#customization-uidensity-touch-spacer { + border-top: 1px solid var(--panel-separator-color); + margin: 6px calc(-1 * var(--arrowpanel-padding)) 9px; +} + +#customization-uidensity-autotouchmode-checkbox { + margin-bottom: var(--arrowpanel-padding); +} + +#customization-uidensity-menu { + font: menu; + + /* Make the panel padding uniform across all platforms due to the + styling of the section headers and footer. */ + --arrowpanel-padding: 8px; +} + +.customization-uidensity-menuitem > .menu-iconic-left > .menu-iconic-icon { + width: 32px; + height: 32px; + margin: 5px; +} + +.customization-uidensity-menuitem { + appearance: none; + color: inherit; + border: 1px solid transparent; + border-radius: 4px; + padding-block: 0; + padding-inline: 0 5px; + margin: 2px 0; +} + +#customization-uidensity-menuitem-normal { + list-style-image: url("chrome://browser/skin/customizableui/density-normal.svg"); +} + +#customization-uidensity-menuitem-compact { + list-style-image: url("chrome://browser/skin/customizableui/density-compact.svg"); +} + +#customization-uidensity-menuitem-touch { + list-style-image: url("chrome://browser/skin/customizableui/density-touch.svg"); +} + +.customization-uidensity-menuitem:is(:hover, :focus-visible) { + background-color: var(--button-hover-bgcolor); +} + +.customization-uidensity-menuitem:is(:hover:active, [active="true"]) { + background-color: var(--button-active-bgcolor); +} + +.customization-uidensity-menuitem > .menu-iconic-text { + text-align: start; +} + +.customization-uidensity-menuitem > .menu-iconic-left > .menu-iconic-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +#customization-uidensity-button > .box-inherit > .box-inherit > .button-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +#customization-panelWrapper > .panel-arrowcontent { + color: var(--arrowpanel-color); + background: var(--arrowpanel-background); + background-clip: padding-box; + max-width: 29em; +} + +@media (-moz-platform: macos) { + #customization-panelWrapper > .panel-arrowcontent { + /* Native styling adds more 'oompf' to the popup box-shadow, so simulate that + * as best as we can here: */ + box-shadow: 0 0 1px hsla(0,0%,0%,.3), 0 4px 10px hsla(0,0%,0%,.3); + appearance: none; + border-radius: var(--arrowpanel-border-radius); + } +} + +@media not (-moz-platform: macos) { + #customization-panelWrapper > .panel-arrowcontent { + border: 1px solid var(--arrowpanel-border-color); + margin: 0; + box-shadow: 0 0 4px hsla(0,0%,0%,.2); + } +} + +#customization-panelWrapper > .panel-arrowbox { + display: block; + position: relative; + height: 10px; + margin-bottom: -1px; +} + +/* Special-case the overflow and the hamburger button so they show up disabled + in customize mode. */ +:is(#nav-bar-overflow-button, #PanelUI-menu-button)[disabled] { + fill-opacity: var(--toolbarbutton-disabled-opacity); +} + +/* The overflow button should look both disabled and open. */ +#nav-bar[customizing] > #nav-bar-overflow-button > .toolbarbutton-icon { + background-color: var(--toolbarbutton-active-background); +} + +#customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] { + list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg"); + -moz-context-properties: fill, stroke; + fill: var(--arrowpanel-background); + stroke: var(--arrowpanel-border-color); + /* JS code sets --panel-arrow-offset to the distance between the middle of the + * overflow button and the end of the window. We subtract the padding of our + * container (#customization-panel-container) and half our own width: + */ + margin-inline-end: calc(var(--panel-arrow-offset) - var(--customization-panel-padding) - 10px); + vertical-align: top; +} + +@media (-moz-platform: macos) { + #customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] { + /* The OS X image is 2px narrower than the windows/linux one. + * Add padding to compensate: */ + padding: 0 1px; + /* specify width for hidpi image to fit correctly */ + width: 20px; + } +} + +#customization-panelDescription { + font-size: 1.1em; + padding: 2px 12px 10px; + margin: 0; +} + +#customization-panelHeader { + font-size: 1.3em; + font-weight: 600; + padding: 2px 12px; + margin: 0; +} + +#customization-panelHolder > #widget-overflow-fixed-list { + padding-top: 10px; +} + +/** + * We create a ::before pseudoelement that contains a background image to show the + * drop dragon. This element fades in and out depending on whether the containing + * panel list is empty and unhovered, or not. + */ +#customization-panelHolder > #widget-overflow-fixed-list:not(:empty) { + padding-bottom: 50px; /* Make sure there's always space to drop stuff. */ + border-top: 1px solid var(--panel-separator-color); +} + +#customization-panelHolder > #widget-overflow-fixed-list::before { + display: block; + content: ""; + background-image: image-set( + url("chrome://browser/skin/customizableui/empty-overflow-panel.png"), + url("chrome://browser/skin/customizableui/empty-overflow-panel@2x.png") 2x + ); + 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; +} + +#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..4f282b9d5a --- /dev/null +++ b/browser/themes/shared/customizableui/panelUI-shared.css @@ -0,0 +1,2213 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +:root { + --panel-item-hover-bgcolor: var(--button-hover-bgcolor); + --panel-item-active-bgcolor: var(--button-active-bgcolor); + --panel-banner-item-color: var(--button-color); + --panel-banner-item-background-color: var(--button-bgcolor); + --panel-banner-item-hover-bgcolor: var(--button-hover-bgcolor); + --panel-banner-item-active-bgcolor: var(--button-active-bgcolor); + --panel-banner-item-update-supported-bgcolor: #2AC3A2; + --panel-banner-item-info-icon-bgcolor: #0090ED; + + --menu-panel-width: 22.35em; + --menu-panel-width-wide: 29em; + + --arrowpanel-menuitem-margin-block: 0; + --arrowpanel-menuitem-margin-inline: 8px; + --arrowpanel-menuitem-margin: var(--arrowpanel-menuitem-margin-block) var(--arrowpanel-menuitem-margin-inline); + --arrowpanel-menuitem-padding-block: 8px; + --arrowpanel-menuitem-padding-inline: 8px; + --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline); + --arrowpanel-menuitem-border-radius: 4px; + --arrowpanel-header-info-icon-padding: 4px; + --arrowpanel-header-info-icon-full-width: calc(16px + (2 * var(--arrowpanel-header-info-icon-padding))); + --panel-separator-margin-vertical: 4px; + --panel-separator-margin-horizontal: 8px; + --panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal); + --panel-subview-body-padding-block: 8px; + --panel-subview-body-padding-inline: 0; + --panel-subview-body-padding: var(--panel-subview-body-padding-block) var(--panel-subview-body-padding-inline); + + --panel-and-palette-icon-size: 16px; + + &:not(:-moz-lwtheme) { + --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%); + } + + &[uidensity=compact] { + --arrowpanel-menuitem-margin-inline: 4px; + --arrowpanel-menuitem-padding-block: 0px; + --panel-separator-margin-horizontal: 4px; + --panel-subview-body-padding-block: 4px; + :is(panel, menupopup):not([touchmode]) { + --arrowpanel-header-back-icon-padding: 4px; + } + } +} + +/* The vars in this rule are not on the :root above so that they would + * work in conjunction with when touchmode attribute is set on the panels. */ +panel, +menupopup { + /* The value for the header back icon padding is selected in a way that the + * height of the header and its separator will be equal to the panel inner + * top padding plus standard menuitem, so that the header's separator will + * be located excatly where a normal toolbarseparator would be located after + * the first menuitem, in a menu without a header. */ + --arrowpanel-header-back-icon-padding: 6px; + --arrowpanel-header-back-icon-full-width: calc(16px + (2 * var(--arrowpanel-header-back-icon-padding))); + /* The min-height is calculated with the separator's horizontal margin rather + * than the vertical, to let the back icon have even spacing all around + * while being aligned with the separator. */ + --arrowpanel-header-min-height: calc(var(--arrowpanel-header-back-icon-full-width) + + (var(--panel-separator-margin-horizontal) * 2)); +} + +#PanelUI-menu-button { + &[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: flex; + height: 10px; + width: 10px; + background-size: contain; + border: none; + + &:-moz-window-inactive { + filter: grayscale(100%); + } + } + + &[badge-status="extension-new-tab"], + &[badge-status="download-success"] { + > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: none; + } + } + + &[badge-status="update-available"], + &[badge-status="update-downloading"], + &[badge-status="update-manual"], + &[badge-status="update-other-instance"], + &[badge-status="update-restart"], + &[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; + } + } + + &[badge-status="update-available"], + &[badge-status="update-downloading"], + &[badge-status="update-manual"], + &[badge-status="update-other-instance"], + &[badge-status="update-restart"] { + > .toolbarbutton-badge-stack > .toolbarbutton-badge { + fill: var(--panel-banner-item-update-supported-bgcolor); + } + } + + &[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"], + &[notificationid="update-downloading"], + &[notificationid="update-manual"], + &[notificationid="update-other-instance"], + &[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); + } + } + + &[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"], +#PanelUI-menu-button[badge-status="fxa-needs-authentication"], +#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, stroke; + fill: var(--warning-icon-bgcolor); + stroke: var(--toolbar-bgcolor); + } +} + +#fxa-toolbar-menu-button[badge-status="login_failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: flex; +} + +.cui-widget-panel, +#widget-overflow, +#unified-extensions-panel { + font: menu; +} + +panelview { + flex-direction: column; + background: var(--arrowpanel-background); + padding: 0; + + /* Prevent a scrollbar from appearing while the animation for transitioning from + one view to another runs, which would otherwise happen if the new view has + more height than the old one because that would mean that during the + animation the height of the multiview will be too short for the new view. */ + &[transitioning] > .panel-viewcontainer > .panel-viewstack > panelview > .panel-subview-body { + overflow-y: hidden; + } +} + +.panel-subview-body { + overflow-y: auto; + overflow-x: hidden; + flex: 1; + padding: var(--panel-subview-body-padding); + + &:not(:last-child) { + padding-bottom: 0; + } + + toolbarseparator + & { + padding-top: 0; + } +} + +.panel-view-body-unscrollable { + overflow: hidden; + flex: 1; +} + +.panel-info-button { + appearance: none; + color: inherit; + padding: 0; + border-radius: var(--toolbarbutton-border-radius); + flex-shrink: 0; + + &[disabled=true] { + visibility: hidden; + } + + &:hover { + background-color: var(--panel-item-hover-bgcolor); + } + + &:not(:hover)[checked], + &:hover:active { + background-color: var(--panel-item-active-bgcolor); + } + + &:focus-visible { + outline: var(--focus-outline); + } + + > 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); +} + +/* Tweaks for menupopups hanging off toolbar buttons to make them feel like panels */ + +.toolbar-menupopup { + &, + menupopup { + 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); + } + + menupopup { + /* 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)); + } + + :is(menu, menuitem) { + &[disabled] { + color: var(--panel-disabled-color); + } + + &:not([disabled])[_moz-menuactive] { + color: inherit; + background-color: var(--panel-item-hover-bgcolor); + + &:active { + color: inherit; + background-color: var(--panel-item-active-bgcolor); + } + } + + &::before, + &::after { + content: none; /* Reset's macOS' checkmark spacing */ + } + } + + .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; + padding: 0; + appearance: none; + } + + :is(.menu-iconic, .menuitem-iconic) > .menu-iconic-left { + margin-inline-end: 8px; + } + + .menu-accel, + .menu-iconic-accel { + margin-inline-start: 16px; + } + + 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; + + &:-moz-locale-dir(rtl) { + list-style-image: url(chrome://global/skin/icons/arrow-left.svg); + } + } + + menuseparator { + padding: var(--panel-separator-margin); + } +} + +#BMB_bookmarksPopup { + max-width: 30em; +} + +:is(.toolbar-menupopup, .toolbar-menupopup menupopup)[emptyplacesresult] > menuitem > .menu-accel-container > .menu-accel { + margin: 0; +} + +#confirmation-hint { + --arrowpanel-background: #0060df; + --arrowpanel-border-color: #0060df; + --arrowpanel-color: #fff; + --arrowpanel-padding: 6px 10px; + font-weight: 400; + font-size: 1.1rem; + + &::part(content) { + align-items: center; + } + + /* Don't show the checkmark if there is a description */ + &.with-description #confirmation-hint-checkmark-animation-container { + display: none; + } + + &[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 { + position: relative; + overflow: hidden; + width: 14px; + height: 14px; + + &[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; + + &:-moz-locale-dir(rtl) { + animation-name: confirmation-hint-checkmark-animation-rtl; + transform: translateX(288px); + } + + @media (prefers-reduced-motion: no-preference) { + 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 & { + 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] + & { + transform: scale(1); + opacity: 1; + } + } +} + +panelview[id^=PanelUI-webext-] { + overflow: hidden; +} + +.cui-widget-panel { + --arrowpanel-padding: var(--panel-subview-body-padding); +} + +#appMenu-popup panelview, +/* The Report Broken Site panel can be opened from the Help menu + * in the menubar, which isn't a descendant of #appMenu-popup. + * Target it specifically in this rule to make it the same width + * as if it was a standard panelview opened from the app menu. */ +#report-broken-site-popup-mainView[mainview], +#PanelUI-fxa { + width: 22.5em; +} + +:where(#customizationui-widget-multiview) panelview:not([extension]) { + min-width: var(--menu-panel-width); + max-width: 35em; +} + +#appMenu-libraryView, +#pageActionPanel panelview, +#widget-overflow panelview { + min-width: var(--menu-panel-width-wide); + max-width: var(--menu-panel-width-wide); +} + +/* Add 2 * 16px extra width for touch mode button padding. */ +#appMenu-popup[touchmode] panelview { + min-width: calc(var(--menu-panel-width) + 32px); +} + +.toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] +) > toolbarbutton > .toolbarbutton-icon { + min-width: 0; + min-height: 0; + margin: 0; +} + +.animate-out { + animation-name: widget-animate-out; + animation-fill-mode: forwards; + animation-duration: 500ms; + animation-timing-function: var(--animation-easing-function); +} + +@keyframes widget-animate-out { + 0% { + opacity: 1; + transform: scale(1); + } + 100% { + opacity: 0 ; + transform: scale(.5); + } +} + +toolbarpaletteitem { + &[place="panel"] > .toolbarbutton-1 { + flex: 1; + } +} + +/* Help webextension buttons fit in. */ +toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon, +toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon, +toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-icon, +toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { + height: var(--panel-and-palette-icon-size); + width: var(--panel-and-palette-icon-size); +} + +#customization-palette .toolbarbutton-1 { + appearance: none; + flex-direction: column; + padding: 12px 0 9px; + margin: 0; +} + +/* above we treat the container as the icon for the margins, that is so the +/* badge itself is positioned correctly. Here we make sure that the icon itself +/* has the minimum size we want, but no padding/margin. */ +.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon { + width: var(--panel-and-palette-icon-size); + height: var(--panel-and-palette-icon-size); + min-width: var(--panel-and-palette-icon-size); + min-height: var(--panel-and-palette-icon-size); + margin: 0; + padding: 0; +} + +#zoom-in-button > .toolbarbutton-text, +#zoom-out-button > .toolbarbutton-text, +#zoom-reset-button > .toolbarbutton-icon { + display: none; +} + +/* Main menu banner menuitems */ + +#appMenu-popup { + .panel-banner-item, + .addon-banner-item { + align-items: flex-start; + color: var(--panel-banner-item-color); + background-color: var(--panel-banner-item-background-color); + margin-bottom: 4px; + font-weight: 600; + } + + .panel-banner-item, + .addon-banner-item { + &:not([disabled]):hover { + background-color: var(--panel-banner-item-hover-bgcolor); + + &:active { + background-color: var(--panel-banner-item-active-bgcolor); + } + } + + > .toolbarbutton-text { + display: inline-block; + padding: 0; + } + } +} + +:root[uidensity="compact"] { + .panel-banner-item, + .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; + } +} + +.panel-banner-item > .toolbarbutton-icon { + width: 16px; + height: 16px; + /* Move the icon to appear after the text label. */ + order: 2; +} + +.addon-banner-item { + > .toolbarbutton-icon { + display: none; + } + + /* Addon banners use that one for the addon's icon and need a content element + added to put their generic notification in. */ + &::after { + content: ""; + display: flex; + background: url(chrome://global/skin/icons/warning.svg) no-repeat center; + width: 16px; + height: 16px; + -moz-context-properties: fill; + fill: var(--warning-icon-bgcolor); + margin-inline-start: 10px; + } +} + +/* FxAccount indicator bits. */ + +@keyframes syncRotate { + from { transform: rotate(0); } + to { transform: rotate(360deg); } +} + +@media (prefers-reduced-motion: no-preference) { + #PanelUI-fxa-menu-syncnow-button[syncstatus="active"] > .toolbarbutton-icon, + #PanelUI-remotetabs-syncnow[syncstatus="active"] > .toolbarbutton-icon, + .syncNowBtn[syncstatus="active"] { + animation: syncRotate 0.8s linear infinite; + -moz-context-properties: fill; + fill: var(--toolbarbutton-icon-fill-attention); + visibility: visible; + } +} + +.syncNowBtn { + -moz-context-properties: fill; + fill: currentColor; + height: 16px; + width: 16px; + list-style-image: url("chrome://browser/skin/sync.svg"); + visibility: collapse; + order: 2; +} + +#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; + + &[fxastatus] { + margin: 0; + padding: 0; + } + + &:not([fxastatus]) { + padding-block: 0 2px; + + > #appMenu-fxa-label2 { + padding: 6px 12px; + background-color: var(--button-bgcolor); + font-size: 0.8em; + font-weight: 600; + + &:hover { + background-color: var(--button-hover-bgcolor); + } + + &:hover:active { + background-color: var(--button-active-bgcolor); + } + } + } +} + +#appMenu-fxa-text, +#appMenu-fxa-status2[fxastatus] > #appMenu-fxa-label2 { + flex: 1; + align-self: center; +} + +#appMenu-fxa-status2[fxastatus] > #appMenu-fxa-label2 > vbox > #appMenu-header-description, +#appMenu-fxa-text { + font-weight: 600; +} + +:root[fxadisabled=true] #appMenu-fxa-status2, +:root[fxadisabled=true] #appMenu-fxa-separator { + display: none; +} + +#fxa-manage-account-button > vbox > label, +#PanelUI-fxa-menu-syncnow-button > hbox > label, +#PanelUI-remotetabs-syncnow > hbox > label, +#appMenu-fxa-label2 > vbox > label { + margin: 0; +} + +.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); + } + + &[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); + + &[fxastatus="not_configured"] { + --avatar-image-url: url(chrome://browser/skin/fxa/avatar-empty.svg); + } + + &:not([fxatoolbarmenu]) #fxa-toolbar-menu-button { + display: none; + } + + /* stylelint-disable-next-line media-query-no-invalid */ + @media not (-moz-bool-pref: "identity.fxaccounts.toolbar.defaultVisible") { + /* Hide the FxA toolbar button when its in the nav-bar, until in use */ + &[fxastatus="not_configured"] #widget-overflow-list > #fxa-toolbar-menu-button, + &[fxastatus="not_configured"] #nav-bar-customization-target > #fxa-toolbar-menu-button { + display: none; + } + } + + /* Non-signedin statuses icons are not totally round. */ + &[fxastatus="signedin"] #fxa-avatar-image { + border-radius: 50%; + } + + &:not([fxastatus="signedin"]) #PanelUI-fxa-menu-connect-device-button { + color: var(--panel-disabled-color); + } +} + +#fxa-avatar-image, +#PanelUI-fxa-menu-account-settings-button { + list-style-image: var(--avatar-image-url); +} + +.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) { + /* Use 300 on Linux because 100 is too light (lacks contrast with + * the background) for some fonts in combination with anti-aliasing. */ + font-weight: 300; + } +} + +#fxa-menu-header-title { + color: var(--arrowpanel-color); +} + +#fxa-menu-header-description { + color: var(--text-color-deemphasized); + font-weight: var(--font-weight-bold); +} + +#cta-menu-header-description { + color: var(--text-color-deemphasized); +} + +#PanelUI-appMenu-fxa-label-last-synced { + font-size: 10px; + font-style: italic; + color: var(--text-color-deemphasized); +} + +#PanelUI-fxa-menu-send-button { + list-style-image: url(chrome://browser/skin/fxa/send.svg); +} + +.ctaMenuLogo { + width: 16px; + height: 16px; + margin-inline-start: 5px; +} + +#PanelUI-fxa-menu-monitor-button { + list-style-image: url(chrome://browser/skin/fxa/monitor.svg); +} + +#PanelUI-fxa-menu-relay-button { + list-style-image: url(chrome://browser/content/logos/relay.svg); +} + +#PanelUI-fxa-menu-vpn-button { + list-style-image: url("chrome://browser/skin/preferences/vpn-logo.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +: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"); + } + + &[clientType=tablet] { + list-style-image: url("chrome://browser/skin/device-tablet.svg"); + } + + &[clientType=desktop] { + list-style-image: url("chrome://browser/skin/device-desktop.svg"); + } + + &[clientType=tv] { + list-style-image: url("chrome://browser/skin/device-tv.svg"); + } + + &[clientType=vr] { + list-style-image: url("chrome://browser/skin/device-vr.svg"); + } + + &.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; + 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; + text-shadow: none; + min-width: 200px; + padding: 1em; + + &:hover { + background-color: #003eaa; + + &:active { + background-color: #002275; + } + } +} + +.remotetabs-promo-link { + margin: 0; +} + +.PanelUI-remotetabs-notabsforclient-label { + color: var(--text-color-deemphasized); + /* This margin is to line this label up with the labels in toolbarbuttons. */ + margin-inline-start: 28px; +} + +.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; + + .PanelUI-remotetabs-notabsforclient-label { + margin-inline-start: 32px; + } + + /* Work around bug 1224412 - these boxes will cause scrollbars to appear when + the panel is anchored to a toolbar button. + */ + #PanelUI-remotetabs-setupsync, + #PanelUI-remotetabs-syncdisabled, + #PanelUI-remotetabs-reauthsync, + #PanelUI-remotetabs-unverified, + #PanelUI-remotetabs-nodevicespane, + #PanelUI-remotetabs-tabsdisabledpane { + min-height: calc(var(--panel-ui-sync-illustration-height) + + 15px + /* margin of .fxaSyncIllustration */ + 30px + /* margin of .PanelUI-remotetabs-button */ + 8px + /* padding of .PanelUI-remotetabs-button */ + 1em); + } +} + +.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] { + color: var(--text-color-deemphasized); +} + +/* Collapse the non-active vboxes in the remotetabs deck to use only the + height the active box needs */ +#PanelUI-remotetabs-deck { + &:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane, + &:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching, + &: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; +} + +.toolbar-menupopup :is(menu, menuitem), +.subview-subheader, +panelview .toolbarbutton-1, +.subviewbutton, +.widget-overflow-list .toolbarbutton-1 { + appearance: none; + margin: var(--arrowpanel-menuitem-margin); + min-height: 24px; + padding: var(--arrowpanel-menuitem-padding); + border-radius: var(--arrowpanel-menuitem-border-radius); + background-color: transparent; + flex-shrink: 0; +} + +.subview-subheader { + font-size: 11px; + font-weight: inherit; + color: var(--text-color-deemphasized); + padding-block: 4px; + box-sizing: border-box; +} + +.subviewbutton { + /* toolbarbuttons default to centered, but we don't want that for subviews. */ + justify-content: flex-start; + + &[disabled="true"] { + color: var(--panel-disabled-color); + } + + /* 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: + */ + > .toolbarbutton-icon { + margin: 0; + } + + > .toolbarbutton-text { + text-align: start; + display: block; + } + + &[shortcut]::after { + content: attr(shortcut); + display: flex; + } + + @media not (prefers-contrast) { + &[shortcut]:not([disabled])::after { + color: var(--panel-disabled-color); + } + } + + &[shortcut]::after, + .widget-overflow-list .subviewbutton-nav::after, + .PanelUI-subView .subviewbutton-nav::after { + margin-inline-start: 10px; + } + + &[checked="true"] { + list-style-image: url(chrome://global/skin/icons/check.svg); + -moz-context-properties: fill; + fill: currentColor; + color: inherit; + } + + &[type="open-to-new"]::after { + content: url(chrome://global/skin/icons/open-in-new.svg); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.6; + display: flex; + height: 12px; + width: 12px; + } + + &[type="open-to-new"]:-moz-locale-dir(rtl)::after { + transform: scaleX(-1); + } +} + +.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); + + > .subviewbutton { + margin-inline-start: 2px; + padding: 4px; + } + + /* hover and active color changes are applied to child elements not the button itself */ + > .subviewbutton:not([disabled]):is(:hover, :hover:active) { + color: unset; + background-color: unset; + } + + > .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-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]), +#appMenu-zoomEnlarge-button2:not([disabled]) { + &:hover { + > .toolbarbutton-icon { + stroke: var(--panel-item-hover-bgcolor); + } + } + + &: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; +} + +.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); +} + +#protections-popup-mainView .subviewbutton-nav:not(.notFound), +.widget-overflow-list .subviewbutton-nav, +.PanelUI-subView .subviewbutton-nav { + &::after { + -moz-context-properties: fill, fill-opacity; + content: url(chrome://global/skin/icons/arrow-right.svg); + fill: currentColor; + fill-opacity: 0.6; + display: flex; + } + + &:-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); + } + + .toolbaritem-combined-buttons > .subviewbutton { + flex: none; + height: auto; + margin-inline-start: 18px; + min-width: auto; + padding: 4px 5px; + } + + .toolbaritem-combined-buttons > .subviewbutton-iconic > .toolbarbutton-text, + .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-icon { + display: none; + } + + toolbarseparator.proton-zap { + border-image: var(--panel-separator-zap-gradient, none) 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; + + > .subviewbutton { + min-width: auto; + padding-inline: 5px; + } + + > .subviewbutton-iconic:not([flex]) > .toolbarbutton-text { + display: none; + } +} + +.toolbaritem-combined-buttons, +.toolbaritem-menu-buttons { + align-items: center; + flex-direction: row; + border: 0; + border-radius: 0; +} + +.toolbaritem-combined-buttons:not([widget-type="button-and-view"], [widget-type="custom"]), +.toolbaritem-menu-buttons { + margin-inline-end: 8px; +} + +panelmultiview .toolbaritem-combined-buttons > label { + flex: 1; + margin: 0; + padding: 4px 0; +} + +#appMenu-zoomReset-button2 > .toolbarbutton-text { + min-width: calc(4ch + 8px); + text-align: center; +} + +.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 */ + &:not([disabled]):hover { + color: inherit; + background-color: var(--panel-item-hover-bgcolor); + + /* hovered-and-active styles for not-disabled buttons */ + &:active { + color: inherit; + background-color: var(--panel-item-active-bgcolor); + box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset; + } + } +} + +.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; + } + + &[place="panel"], + &[place="panel"] > toolbaritem { + flex: 1; + } + + &[place="menu-panel"] > .subviewbutton-nav::after { + opacity: 0.5; + } +} + +.toolbaritem-combined-buttons { + &:where(:not(.unified-extensions-item)):is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] + ) > toolbarbutton { + border: 0; + margin: 0; + flex: 1; + padding-block: var(--arrowpanel-menuitem-padding-block); + flex-direction: row; + } + + &[cui-areatype="panel"] > .toolbarbutton-combined-buttons-dropmarker, + &[overflowedItem] > .toolbarbutton-combined-buttons-dropmarker { + display: none; + } + + &: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; + } + + &:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] + ) > separator { + appearance: none; + align-items: stretch; + margin: .5em 0; + width: 1px; + height: auto; + background: var(--panel-separator-color); + transition-property: margin; + transition-duration: 10ms; + transition-timing-function: ease; + } + + &:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] + ):hover > separator { + margin: 0; + } +} + +#zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text { + display: block; + /* 4 chars max, but `ch` is the width of the `0` glyph, so account for larger glyphs by adding 1ch */ + min-width: calc(5ch + var(--toolbarbutton-inner-padding) * 2); +} + +.widget-overflow-list { + .toolbarbutton-1 { + align-items: center; + flex-direction: row; + } + + .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; + list-style-image: image-set( + url(chrome://browser/skin/panic-panel/header.png), + url(chrome://browser/skin/panic-panel/header@2x.png) 2x + ); + max-height: 48px; + width: 48px; +} + +#panic-button-success-header { + align-items: center; + margin-bottom: 5px; +} + +#PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.subviewradio { + appearance: none; + align-items: center; + padding: 3px; + margin: 0 0 2px; + background-color: transparent; + border-radius: 4px; + border: 1px solid transparent; + + &:hover { + background-color: var(--button-hover-bgcolor); + } + + &:is([selected], [selected]:hover, :hover:active) { + background-color: var(--button-active-bgcolor); + } + + > .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); + } + + > .radio-check[selected] { + background-color: light-dark(#fff, transparent); + border: 4px solid light-dark(#177ee6, #00ddff); + } +} + +radiogroup:focus-visible > .subviewradio[focused="true"] { + outline: var(--focus-outline); + + > .radio-label-box { + outline: none; + } +} + +#PanelUI-panic-explanations { + padding: 10px 10px 0; +} + +#PanelUI-panic-actionlist-main-label { + color: var(--text-color-deemphasized); + font-size: 0.9em; +} + +.PanelUI-panic-actionlist { + padding: 2px 0; + + &::before { + display: inline-block; + content: ""; + width: 16px; + height: 16px; + margin-inline-end: 4px; + background-image: image-set( + url(chrome://browser/skin/panic-panel/icons.png), + url(chrome://browser/skin/panic-panel/icons@2x.png) 2x + ); + vertical-align: bottom; + } +} + +#PanelUI-panic-actionlist-history::before { + background-position-x: 16px; +} + +#PanelUI-panic-actionlist-windows::before { + background-position-x: 32px; +} + +#PanelUI-panic-actionlist-newwindow::before { + background-position-x: 48px; +} + +#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; + + &:hover { + background-color: var(--buttons-destructive-hover-bgcolor); + } + + &:hover:active { + background-color: var(--buttons-destructive-active-bgcolor); + } + + &:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); + } + + > .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; + + &:hover { + background-color: var(--button-hover-bgcolor); + &:active { + background-color: var(--button-active-bgcolor); + } + } +} + +.panel-header { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + /* Set the header's padding according to menuitems horizontal padding + to make sure they are even from all sides and aligned according to that padding. */ + padding: var(--arrowpanel-menuitem-margin-inline); + /* Calculate the header's height assuming it includes an icon even if it doesn't, + to make sure all headers are the same height (assuming their text is a one liner). */ + min-height: var(--arrowpanel-header-min-height); + + + toolbarseparator { + margin-top: 0 !important; + } + + > h1 { + flex: auto; + margin: 0; + } + + &.panel-header-with-info-button > h1 { + /* Add the size of the info button to center properly. */ + margin-inline-start: var(--arrowpanel-header-info-icon-full-width); + } + + &.panel-header-with-info-button > .subviewbutton-back + h1 { + margin-inline-start: 0; + margin-inline-end: calc(var(--arrowpanel-header-back-icon-full-width) + - var(--arrowpanel-header-info-icon-full-width)); + } + + &:not(.panel-header-with-additional-element) > .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-with-additional-element > .additional-element-on-inline-start + h1 { + /* This is for panels where the extra element is on the inline-start side like + * the Report Broken Site panel. + * The var needs to be set manually via CSS on the .panel-header element as we + * can't predict what icon (and thus its size) may be in use. */ + margin-inline-end: var(--arrowpanel-header-additional-element-width); + } + + > h1 > span { + display: inline-block; + white-space: pre-wrap; + } + + > .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); + } + + > .subviewbutton-back:-moz-locale-dir(rtl) { + list-style-image: url(chrome://global/skin/icons/arrow-right.svg); + } +} + +.subviewbutton-back { + margin: 0; + + > .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; + } + + #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; + } + + #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; + + &:-moz-locale-dir(rtl) { + background-position-x: left; + } + + .protections-popup-content { + display: block; + margin: 12px 0; + } + + .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; + } + + .text-link { + color: inherit; + font-weight: 600; + } +} + +panelview { + &[mainview] #PanelUI-whatsNew-content { + height: 43em; + } + + /* Hide the What's New header when the panel is a subview */ + &:not([mainview]) #PanelUI-whatsNew-title { + display: none; + } +} + +#PanelUI-whatsNew { + .panelMenu-toggleWhatsNew-checkbox { + padding-inline-start: 16px; + min-height: 41px; + } + + .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 + */ + .whatsNew-message-body::before { + content: ""; + display: block; + height: 1px; + width: 104%; + margin-inline-start: -2%; + background: var(--panel-separator-color); + } + + .has-icon::before { + /* the width of the icon + the grid margin */ + width: calc(104% + 40px); + } + + .whatsNew-message-date + .whatsNew-message-body::before { + display: none; + } + + .whatsNew-message-date { + font-size: .85em; + margin: -12px; + margin-top: 0; + margin-inline-start: 0; + padding: 6px 16px; + background: var(--arrowpanel-dimmed); + } + + .whatsNew-message-body { + padding: 5px 0 10px; + margin: 10px 16px; + text-align: inherit; + text-decoration: none; + color: inherit; + background: none; + border: none; + cursor: pointer; + } + + .whatsNew-message-body.has-icon { + display: grid; + grid-template-columns: auto 32px; + grid-template-rows: 0; + grid-gap: 0 8px; + } + + .whatsNew-message-icon { + height: 32px; + width: 32px; + margin: 14px auto; + display: grid; + grid-column-start: 2; + } + + .whatsNew-message-subtitle { + margin: 2px 0; + font-size: .8em; + color: #949494; + font-weight: normal; + grid-column-start: 1; + } + + .whatsNew-message-content { + display: grid; + margin: 5px 0 10px; + grid-column-start: 1; + } + + .text-link { + background: none; + border: 0; + color: #45a1ff; + cursor: pointer; + font-size: .9em; + grid-column-start: 1; + + &:hover { + color: #0a84ff; + text-decoration: underline; + + &:active { + color: #0060df; + } + } + } +} + +#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; +} + +#customizationui-widget-panel { + /* In the next two rules the panel's width is set according to the + * profiler backdrop image when not opened from the overflow panel. */ + #PanelUI-profiler { + min-width: 319px; + max-width: 319px; + } + + &[viewId="PanelUI-profiler"] { + --panel-width: 319px; + } + + /* Override themes for the Pocket panel, because the Pocket + panel currently only supports dark and light themes. */ + @media not (prefers-color-scheme: dark){ + &[viewId="PanelUI-savetopocket"] { + --arrowpanel-background: #fbfbfb; + } + } +} + +:where(#PanelUI-profiler) :is(description, label) { + margin: 0; +} + +#PanelUI-profiler-header { + &[isinfocollapsed="false"] { + background: radial-gradient(circle farthest-side at top right, #03b1f4, #0556cd); + color: #fff; + /* Set custom hover/focus/active states on the info button, + to make them more visible on the header background */ + --panel-item-hover-bgcolor: #0005; + --panel-item-active-bgcolor: #0007; + + &:-moz-locale-dir(rtl) { + background: radial-gradient(circle farthest-side at top left, #03b1f4, #0556cd); + } + + :is(button, toolbarbutton):focus-visible { + outline-color: currentColor; + } + + toolbarseparator { + border-color: #0003; + } + } + + &[isinfocollapsed="true"] #PanelUI-profiler-info { + opacity: 0; + pointer-events: none; + } + + /* 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. */ + &[animationready="true"] #PanelUI-profiler-info { + transition: margin-block-end 250ms, opacity 250ms; + } +} + +#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; +} + +#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; + + &:hover:active { + color: #fffc; + } +} + +#PanelUI-profiler-presets { + margin: 8px 0; + + &[disabled="true"]::part(label-box) { + opacity: 0.5; + } +} + +#PanelUI-profiler-content-edit-settings { + font-size: .9em; +} + +.PanelUI-profiler-content-label { + font-weight: 600; +} + +#PanelUI-profiler-content-description { + margin-block: 4px; + font-size: .9em; + color: var(--text-color-deemphasized); +} + +#PanelUI-profiler-content-recording:not([hidden]) { + display: flex; + place-items: center; + place-content: center; + gap: 13px; + padding-block: 28px; + font-size: 1.3em; +} + +.PanelUI-profiler-recording-icon { + width: 42px; + list-style-image: url(chrome://devtools/skin/images/tool-profiler.svg); + -moz-context-properties: fill; + fill: currentColor; + opacity: 0.3; +} + +.PanelUI-profiler-button { + appearance: none; + background-color: var(--button-bgcolor); + border-radius: 4px; + color: var(--button-color); + padding: 8px; + margin: 0 5px; + + &:hover { + background-color: var(--button-hover-bgcolor); + &:active { + background-color: var(--button-active-bgcolor); + } + } + + &: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); + + &:hover { + background-color: var(--button-primary-hover-bgcolor); + &: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; +} + +/* 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; +} + +/* Reset/Restart Private Browsing Panel */ + +#reset-pbm-panel { + max-width: var(--menu-panel-width-wide); +} + +#reset-pbm-panel-container { + padding: 16px 16px 0; + gap: 8px; +} + +#reset-pbm-panel-header > description { + margin-bottom: 0; +} + +#reset-pbm-panel-header > description, +#reset-pbm-panel-description, +#reset-pbm-panel-footer { + margin-inline: 0; +} + +#reset-pbm-panel-header > description { + font-weight: var(--font-weight-bold); +} + +#reset-pbm-panel-checkbox { + margin-inline: 0 8px; +} + +/* Report Broken Site panels */ + +/* Hide the Report Broken Site menu item that + * is on the App Menu's Help sub-menu. + */ +#appMenu_help_reportBrokenSite { + display: none; +} + +.report-broken-site-view { + description, + label, + menulist, + input, + textarea { + margin: 0; + } + + p { + line-height: 1.5; + } + + textarea { + resize: vertical; + } + + select { + /* copied/adapted from toolkit/themes/shared/menulist-shared.css */ + appearance: none; + background-color: var(--button-bgcolor, ButtonFace); + color: var(--button-color, ButtonText); + border-radius: 4px; + padding: 6px 16px; + margin: 5px 2px 3px; + + font: menu; + font-weight: 600; + border: none; + + background-image: url(chrome://global/skin/icons/arrow-down-12.svg); + background-position: right 10px center; + padding-inline-end: 32px; /* 2 * 10px padding + image's 12px width */ + background-repeat: no-repeat; + -moz-context-properties: fill; + fill: currentColor; + + &:-moz-locale-dir(rtl) { + background-position: left 10px center; + } + + &:hover { + background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace)); + } + + &:hover:active { + background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)); + } + + &:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); + } + } + + input, + textarea { + appearance: none; + background-color: var(--panel-background); + padding: 0.25em; + border: 1px solid var(--panel-separator-color); + border-radius: 4px; + + &:focus-visible { + border-color: transparent; + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); + } + } + + input:user-invalid:not(:focus-visible), + select:user-invalid:not(:focus-visible) { + border-color: transparent; + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); + outline-color: var(--color-error-outline); + } + + > .panel-subview-body > label { + margin-block: 1.5em 0.5em; + + &.invalid-message { + margin-block: 0.5em 0; + background-image: url("chrome://global/skin/icons/error.svg"); + background-position: left center; + background-repeat: no-repeat; + -moz-context-properties: fill; + fill: var(--icon-color-critical); + padding-inline-start: calc(16px + 0.25em); + + &:-moz-locale-dir(rtl) { + background-position-x: right; + } + + display: none; + + input:user-invalid + &, + select:user-invalid + & { + display: block; + } + } + } + + &.main-view { + p { + margin-block: 0; + } + + a { + margin-top: 1.5em; + } + } + + &.sent-view { + @media not (prefers-contrast) { + background-color: var(--color-background-success); + } + + > .panel-header { + --arrowpanel-header-additional-element-width: 16px; + + > .checkmark-icon { + list-style-image: url(chrome://global/skin/icons/check-filled.svg); + -moz-context-properties: fill; + fill: #2ac3a2; + } + } + + > .panel-subview-body { + /* Don't let the footer appear way down in the panel while there's + * almost no content above. */ + flex: 0 auto; + + > .subview-subheader { + font-size: inherit; + } + } + } +} + +#report-broken-site-panel-container { + padding: 8px 16px 16px; +} diff --git a/browser/themes/shared/customizableui/whimsy.png b/browser/themes/shared/customizableui/whimsy.png new file mode 100644 index 0000000000..ba53aa98ef Binary files /dev/null and b/browser/themes/shared/customizableui/whimsy.png differ diff --git a/browser/themes/shared/downloads/allDownloadsView.inc.css b/browser/themes/shared/downloads/allDownloadsView.inc.css new file mode 100644 index 0000000000..66b9c39c3f --- /dev/null +++ b/browser/themes/shared/downloads/allDownloadsView.inc.css @@ -0,0 +1,98 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import "chrome://browser/skin/downloads/progressmeter.css"; +@import "chrome://browser/skin/downloads/download-blockedStates.css"; + +/*** View and outer controls ***/ + +#downloadsListBox { + margin: 0; +} + +/*** List items ***/ + +#downloadsListBox > richlistitem { + min-height: 4.5em; +} + +.downloadTypeIcon { + margin: 8px 13px; + width: 32px; + height: 32px; +} + +.downloadTarget { + margin: 0; +} + +.downloadDetails { + opacity: 0.7; + font-size: 95%; + /* Use calc() to keep the height consistent with .downloadTarget, so that the + progress bar can be vertically centered. */ + margin: 4px 0 calc(1em / 0.95 - 1em); +} + +.downloadDetailsHover, +.downloadDetailsButtonHover { + display: none; +} + +.downloadButton { + appearance: none; + align-items: center; + background: transparent; + min-width: 0; + min-height: 0; + margin: 0; + border: none; + color: inherit; + padding: 0 12px; +} + +.downloadButton > .button-box { + padding: 8px; + border-radius: 4px; +} + +.downloadButton > .button-box > .button-icon { + width: 16px; + height: 16px; + margin: 0; + -moz-context-properties: fill; + fill: currentColor; +} + +.downloadButton > .button-box > .button-text { + display: none; +} + +.downloadButton:hover > .button-box { + background-color: color-mix(in srgb, currentColor 15%, transparent); +} + +.downloadButton:hover:active > .button-box { + background-color: color-mix(in srgb, currentColor 30%, transparent); +} + +/*** Button icons ***/ + +.downloadIconCancel > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/close.svg"); +} + +.downloadIconShow > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +@media (-moz-platform: macos) { + .downloadIconShow > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); + } +} + +.downloadIconRetry > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/reload.svg"); +} diff --git a/browser/themes/shared/downloads/contentAreaDownloadsView.css b/browser/themes/shared/downloads/contentAreaDownloadsView.css new file mode 100644 index 0000000000..22261ac7c3 --- /dev/null +++ b/browser/themes/shared/downloads/contentAreaDownloadsView.css @@ -0,0 +1,27 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/in-content/common.css"); + +#contentAreaDownloadsView { + padding: 18px; +} + +#downloadsListBox:empty { + border-color: transparent; + background-color: transparent; +} + +.downloadButton:not([disabled="true"]):hover, +.downloadButton:not([disabled="true"]):hover:active, +.downloadButton:not([disabled]):hover:active { + background: transparent; + border: none; +} + +#downloadsListEmptyDescription { + margin: 1em; + text-align: center; + color: var(--text-color-deemphasized); +} diff --git a/browser/themes/shared/downloads/download-blockedStates.css b/browser/themes/shared/downloads/download-blockedStates.css new file mode 100644 index 0000000000..ea762166d8 --- /dev/null +++ b/browser/themes/shared/downloads/download-blockedStates.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/. */ + +.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: light-dark(#e22850, #FF9AA2); +} + +#downloadsPanel-blockedSubview[verdict="Uncommon"] .downloadsPanel-blockedSubview-image, +#downloadsListBox > richlistitem[verdict="Uncommon"] .downloadBlockedBadge { + background-image: url("chrome://global/skin/icons/info-filled.svg"); + -moz-context-properties: fill; + fill: light-dark(#0090ED, #80EBFF); +} + +.downloadsPanel-blockedSubview-image { + width: 16px; + background-repeat: no-repeat; + margin-inline-end: 25px; +} + +.downloadsPanel-blockedSubview-title-box { + margin-block: 21.5px 0; +} + +#downloadsPanel-blockedSubview-title { + flex: 1; +} + +#downloadsPanel-blockedSubview[verdict="PotentiallyUnwanted"] .downloadsPanel-blockedSubview-image, +#downloadsPanel-blockedSubview[verdict="DownloadSpam"] .downloadsPanel-blockedSubview-image, +#downloadsListBox > richlistitem[verdict="PotentiallyUnwanted"] .downloadBlockedBadge, +#downloadsListBox > richlistitem[verdict="DownloadSpam"] .downloadBlockedBadge { + -moz-context-properties: fill; + fill: #ffbf00; + background-image: url("chrome://global/skin/icons/warning.svg"); +} diff --git a/browser/themes/shared/downloads/download-summary.svg b/browser/themes/shared/downloads/download-summary.svg new file mode 100644 index 0000000000..c10ee95fcb --- /dev/null +++ b/browser/themes/shared/downloads/download-summary.svg @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/browser/themes/shared/downloads/downloads.inc.css b/browser/themes/shared/downloads/downloads.inc.css new file mode 100644 index 0000000000..b835b1cac2 --- /dev/null +++ b/browser/themes/shared/downloads/downloads.inc.css @@ -0,0 +1,257 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import "chrome://browser/skin/downloads/progressmeter.css"; +@import "chrome://browser/skin/downloads/download-blockedStates.css"; + +/*** Panel and outer controls ***/ + +#downloadsListBox { + background: transparent; + color: inherit; + appearance: none; + border: 0; + margin: 0; + /* We have an explicit width set by l10n, but we still want to fill our + * container if it's wider. */ + min-width: 100%; +} + +@media not (prefers-contrast) { + #downloadsListBox[disabled] { + opacity: var(--downloads-item-disabled-opacity) !important; + } +} + +@media (prefers-contrast) { + #downloadsListBox[disabled] { + color: GrayText; + } +} + +#emptyDownloads { + padding: 1.5em 8px 2.1em; + margin: 0; + pointer-events: none; +} + +#downloadsListBox > richlistitem { + /* Leave space for the 32x32 icon with 16px vertical padding, and/or + * the text in the item, with the same padding, whichever is bigger: */ + min-height: max(48px, calc(16px + 2em)); + padding-inline-end: 4px; + margin: 0 0 8px; + border-radius: 4px; +} + +.downloadMainArea { + padding-block: 8px; + padding-inline-start: 4px; + border-radius: 4px; +} + +#downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover, +#downloadsListBox > richlistitem.openWhenFinished.hoveringMainArea:hover, +#downloadsListBox > richlistitem[verdict]:hover, +#downloadsListBox > richlistitem.openWhenFinished:hover, +.downloadsPanelFooterButton:hover { + background-color: var(--panel-item-hover-bgcolor); +} + +#downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover:active, +#downloadsListBox > richlistitem.openWhenFinished.hoveringMainArea:hover:active, +#downloadsListBox > richlistitem[verdict]:hover:active, +.downloadsPanelFooterButton[open="true"] { + background-color: var(--panel-item-active-bgcolor); +} + +#downloadsListBox:focus-visible > richlistitem[selected], +#downloadsListBox[force-focus-visible]:focus > richlistitem[selected], +.downloadButton:focus-visible, +#downloadsSummary:focus-visible, +.downloadsPanelFooterButton:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +#downloadsListBox > richlistitem[verdict="Insecure"] .downloadDetails, +#downloadsListBox > richlistitem[verdict="Malware"] .downloadDetails { + color: var(--text-color-error); + /* 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; +} + +.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: var(--link-color); +} + +/*** 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..788fcf15b1 --- /dev/null +++ b/browser/themes/shared/downloads/indicator.css @@ -0,0 +1,205 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/*** Status and progress indicator ***/ +#downloads-indicator-anchor { + min-width: 16px; + min-height: 16px; + -moz-context-properties: fill, fill-opacity; + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} + +#downloads-button[progress] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon, +#downloads-button[animate][notification] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon { + visibility: hidden; +} + +#wrapper-downloads-button > #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon { + visibility: visible; +} + +#downloads-button[attention="success"] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon { + fill: var(--toolbarbutton-icon-fill-attention); + fill-opacity: 1; +} + +#downloads-button > .toolbarbutton-badge-stack > .toolbarbutton-animatable-box { + pointer-events: none; + -moz-context-properties: fill, fill-opacity, stroke; + grid-area: initial; + top: calc(50% - 10px); /* Vertically center the 20px tall animatable image */ + left: calc(50% - 10px); /* Horizontally center the 20px wide animatable image */ + width: 20px; /* Width of each frame within the SVG sprite */ + height: 20px; /* Height of each frame within the SVG sprite */ + /* Animation is not directional and shouldn't be reversed in RTL */ + direction: ltr; + /* Revert to the xul.css user agent stylesheet's z-index value (auto) for + stack children, to ensure the badge (the last child of the stack) appears in + front of the animatable boxes */ + z-index: revert; +} + +/* Hide progress and state animations in customize mode */ +toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > .toolbarbutton-animatable-box, +toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer { + display: none; +} + +#downloads-indicator-start-box > .toolbarbutton-animatable-image, +#downloads-indicator-finish-box > .toolbarbutton-animatable-image { + visibility: hidden; +} + +/* Button progress indication */ +#downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer { + visibility: hidden; + top: calc(50% - 9px); /* Vertically center the 18px tall animatable image */ + left: calc(50% - 9px); /* Horizontally center the 18px wide animatable image */ + width: 18px; + height: 18px; + border-radius: 50%; + border: 1px solid currentColor; + display: flex; + align-items: center; + justify-content: center; +} + +#downloads-button[progress]:not([notification]) > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer { + visibility: visible; +} + +#downloads-indicator-progress-inner { + --download-progress-pcent: 0%; + + width: 14px; + height: 14px; + /* + From javascript side we update the --download-progress-pcent variable to show the current progress + */ + background: conic-gradient(var(--toolbarbutton-icon-fill-attention) var(--download-progress-pcent), transparent var(--download-progress-pcent)); + border-radius: 50%; +} + +/*** Status badges ***/ + +#downloads-button[attention="info"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: block; + box-shadow: none; + /* "!important" is necessary to override the rule in toolbarbutton.css */ + margin: -7px 0 0 !important; + margin-inline-end: -4px !important; + min-width: 12px; + min-height: 12px; + -moz-context-properties: fill; + background-size: 12px; +} + +#downloads-button[attention="info"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center; + fill: var(--panel-banner-item-info-icon-bgcolor); +} + +#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: url(chrome://global/skin/icons/warning-fill-12.svg) no-repeat center; + fill: var(--warning-icon-bgcolor); +} + +#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center; + fill: light-dark(rgb(226,40,80), 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..3184a63ed5 --- /dev/null +++ b/browser/themes/shared/downloads/progressmeter.css @@ -0,0 +1,87 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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, light-dark(rgb(0, 97, 224), rgb(0, 221, 255))); +} + +@media (prefers-color-scheme: dark) { + #contentAreaDownloadsView { + --download-progress-fill-color: var(--in-content-item-selected); + } +} + +/* + * Styling "html:progress" is limited by the fact that a number of properties + * are intentionally locked at the UA stylesheet level. We have to use a border + * instead of an outline because the latter would be drawn over the progress + * bar and we cannot change its z-index. This means we have to use a negative + * margin, except when the value is zero, and adjust the width calculation for + * the indeterminate state. + */ + +.downloadProgress { + appearance: none; + display: flex; + margin-block: 5px 1px; + /* This value is kinda odd, it's used to align with the edge of the badge, + * if shown, which is inside the edge of the image (the image gets 16px + * margin). */ + margin-inline-end: 18px; + border: none; + height: 4px; + border-radius: 2px; + background-color: color-mix(in srgb, currentColor 15%, transparent); +} + +/* Ensure we have contrast in selected download items */ +#downloadsListBox.allDownloadsListBox richlistitem[selected] .downloadProgress::-moz-progress-bar { + --download-progress-fill-color: currentColor; + --download-progress-flare-color: AccentColor; +} + +.downloadProgress::-moz-progress-bar { + appearance: none; + background-color: var(--download-progress-fill-color); + border-radius: 2px; +} + +.downloadProgress[paused]::-moz-progress-bar { + background-color: var(--download-progress-paused-color); +} + +.downloadProgress:indeterminate::-moz-progress-bar { + width: calc(100% + 2px); + /* Make a white reflecting animation. + Create a gradient with 2 identical patterns, and enlarge the size to 200%. + This allows us to animate background-position with percentage. */ + background-color: var(--download-progress-fill-color); + background-image: linear-gradient(90deg, transparent 0%, + var(--download-progress-flare-color) 25%, + transparent 50%, + var(--download-progress-flare-color) 75%, + transparent 100%); + background-blend-mode: normal; + background-size: 200% 100%; + animation: downloadProgressSlideX 1.5s linear infinite; +} + +@keyframes downloadProgressSlideX { + 0% { + background-position: 0 0; + } + 100% { + background-position: -100% 0; + } +} diff --git a/browser/themes/shared/drm-icon.svg b/browser/themes/shared/drm-icon.svg new file mode 100644 index 0000000000..8b510a1c53 --- /dev/null +++ b/browser/themes/shared/drm-icon.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/formautofill-notification.css b/browser/themes/shared/formautofill-notification.css new file mode 100644 index 0000000000..aefef93517 --- /dev/null +++ b/browser/themes/shared/formautofill-notification.css @@ -0,0 +1,209 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/** + * "address-capture" prefix is used for cases where the style should apply + * to "save address doorhanger", "update address doorhanger", and "edit address doorhanger" + * + * "address-save" prefix is used for "save address doorhanger" + * "address-update" prefix is used for "update address doorhanger" + * "address-edit" prefix is used for "edit address doorhanger" + * "address-save-update" prefix is used for "save address doorhanger" and "update address doorhanger" + */ + +.popup-notification-body[popupid="address-save-update"] { + width: 25.8em; +} + +.popup-notification-body[popupid="address-edit"] { + width: auto; +} + +.address-capture-notification { + /* Overwrite margin that we don't need */ + :is(popupnotificationcontent, .panel-footer) { + margin-top: 0; + } + + description { + margin: 0; + } + + .popup-notification-body-container { + padding-block: 0; + } + + /* define the default text format for the address capture doorhanger */ + :is(p, textarea) { + margin-block: 0; + line-height: 1.5; + overflow-wrap: anywhere; + } + + menulist { + padding-block: 6px; + padding-inline: 16px 12px; + } + + .address-capture-icon-button { + width: 32px; + height: 32px; + border: 0; + border-radius: 4px; + margin: 0; + padding: 0; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + -moz-context-properties: fill; + fill: currentColor; + margin-inline-start: auto; + + &:hover { + background-color: var(--panel-item-hover-bgcolor); + + &:active { + background-color: var(--panel-item-active-bgcolor); + } + } + + &:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); + border-radius: 1px; + } + + &#address-capture-edit-address-button { + background-image: url("chrome://browser/skin/formautofill/icon-address-edit.svg"); + } + + &#address-capture-menu-button { + background-image: url("chrome://browser/skin/formautofill/icon-doorhanger-menu.svg"); + } + } + + .popup-notification-primary-button { + color: var(--button-primary-color); + background-color: var(--button-primary-bgcolor); + + &:hover { + background-color: var(--button-primary-hover-bgcolor); + + &:active { + background-color: var(--button-primary-active-bgcolor); + } + } + } +} + +.address-capture-header { + margin-top: 8px; + margin-bottom: 12px; + display: flex; + flex-direction: row; + + > p { + padding-block: 8px 4px; + font-weight: var(--font-weight-bold); + } +} + +.address-save-update-notification-content > .address-capture-content { + padding-inline: 4px 0; +} + +.address-capture-description, +.address-save-update-row-container, +.address-edit-row-container { + margin-bottom: 16px; +} + +.address-save-update-row-container { + display: grid; + grid-template-columns: auto 1fr auto; + gap: 8px; + + > image { + width: 16px; + height: 16px; + margin-top: 2px; + } +} + +.address-update-text-diff-added, +.address-update-text-diff-removed { + font-weight: var(--font-weight-bold); + color: light-dark(rgba(2, 80, 187, 1), rgba(128, 235, 255, 1)); + background: light-dark(rgba(0, 96, 223, 0.08), rgba(0, 221, 255, 0.14)); +} + +.address-update-text-diff-removed { + text-decoration: line-through; +} + +.address-capture-img-address { + list-style-image: url("chrome://browser/skin/formautofill/icon-capture-address-fields.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +.address-capture-img-email { + list-style-image: url("chrome://browser/skin/formautofill/icon-capture-email-fields.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +.address-edit-row-container { + display: flex; + flex-direction: row; + gap: 10px; +} + +.address-edit-input-container { + display: flex; + flex-direction: column; + + > label { + line-height: 1.5; + margin-bottom: 4px; + } +} + + +/* Default size for input fields in address edit doorhanger */ +.address-edit-notification-content { + :is(input, textarea) { + width: 15.8em; + margin: 0; + } + + menulist { + width: 17em; + height: 2.46em; + margin: 0; + } +} + +#address-edit-street-address-input { + height: 4.6em; + resize: none; +} + +#address-edit-postal-code-input, +#address-edit-address-level2-input, +#address-edit-address-level3-input { + width: 6.87em; +} + +#address-edit-address-level1-input { + width: 8.1em; +} + +#address-edit-tel-input { + width: 10.6em; +} + +#address-edit-email-input { + width: 12em; +} diff --git a/browser/themes/shared/formautofill/icon-address-edit.svg b/browser/themes/shared/formautofill/icon-address-edit.svg new file mode 100644 index 0000000000..aef1625941 --- /dev/null +++ b/browser/themes/shared/formautofill/icon-address-edit.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/formautofill/icon-capture-address-fields.svg b/browser/themes/shared/formautofill/icon-capture-address-fields.svg new file mode 100644 index 0000000000..00be065720 --- /dev/null +++ b/browser/themes/shared/formautofill/icon-capture-address-fields.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/formautofill/icon-capture-email-fields.svg b/browser/themes/shared/formautofill/icon-capture-email-fields.svg new file mode 100644 index 0000000000..4be7c8b898 --- /dev/null +++ b/browser/themes/shared/formautofill/icon-capture-email-fields.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/formautofill/icon-doorhanger-menu.svg b/browser/themes/shared/formautofill/icon-doorhanger-menu.svg new file mode 100644 index 0000000000..3e1eb82349 --- /dev/null +++ b/browser/themes/shared/formautofill/icon-doorhanger-menu.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/fullscreen/warning.css b/browser/themes/shared/fullscreen/warning.css new file mode 100644 index 0000000000..cd463bee02 --- /dev/null +++ b/browser/themes/shared/fullscreen/warning.css @@ -0,0 +1,49 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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; + margin: 0 16px; +} + +html|*.pointerlockfswarning-domain { + font-weight: bold; + margin: 0; +} + +html|*#fullscreen-exit-button { + margin: 0; +} diff --git a/browser/themes/shared/fxa/avatar-color.svg b/browser/themes/shared/fxa/avatar-color.svg new file mode 100644 index 0000000000..5a87586b35 --- /dev/null +++ b/browser/themes/shared/fxa/avatar-color.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/browser/themes/shared/fxa/avatar-empty.svg b/browser/themes/shared/fxa/avatar-empty.svg new file mode 100644 index 0000000000..9f7a8266f7 --- /dev/null +++ b/browser/themes/shared/fxa/avatar-empty.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/fxa/avatar.svg b/browser/themes/shared/fxa/avatar.svg new file mode 100644 index 0000000000..9391f57540 --- /dev/null +++ b/browser/themes/shared/fxa/avatar.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/fxa/fxa-spinner.svg b/browser/themes/shared/fxa/fxa-spinner.svg new file mode 100644 index 0000000000..1c3c739cf5 --- /dev/null +++ b/browser/themes/shared/fxa/fxa-spinner.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/fxa/monitor.svg b/browser/themes/shared/fxa/monitor.svg new file mode 100644 index 0000000000..04df0e0029 --- /dev/null +++ b/browser/themes/shared/fxa/monitor.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/fxa/send-to-device.svg b/browser/themes/shared/fxa/send-to-device.svg new file mode 100644 index 0000000000..0d6e6a4253 --- /dev/null +++ b/browser/themes/shared/fxa/send-to-device.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/fxa/send.svg b/browser/themes/shared/fxa/send.svg new file mode 100644 index 0000000000..e5c36eace8 --- /dev/null +++ b/browser/themes/shared/fxa/send.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/fxa/sync-devices.svg b/browser/themes/shared/fxa/sync-devices.svg new file mode 100644 index 0000000000..9d4f3fb97d --- /dev/null +++ b/browser/themes/shared/fxa/sync-devices.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/fxa/sync-illustration-issue.svg b/browser/themes/shared/fxa/sync-illustration-issue.svg new file mode 100644 index 0000000000..9fdfb1e65d --- /dev/null +++ b/browser/themes/shared/fxa/sync-illustration-issue.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/fxa/sync-illustration.svg b/browser/themes/shared/fxa/sync-illustration.svg new file mode 100644 index 0000000000..155d2a4009 --- /dev/null +++ b/browser/themes/shared/fxa/sync-illustration.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/icons/add-circle-fill.svg b/browser/themes/shared/icons/add-circle-fill.svg new file mode 100644 index 0000000000..4732d4f63c --- /dev/null +++ b/browser/themes/shared/icons/add-circle-fill.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/back.svg b/browser/themes/shared/icons/back.svg new file mode 100644 index 0000000000..b52c06b776 --- /dev/null +++ b/browser/themes/shared/icons/back.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/bookmark-12.svg b/browser/themes/shared/icons/bookmark-12.svg new file mode 100644 index 0000000000..96a8f82355 --- /dev/null +++ b/browser/themes/shared/icons/bookmark-12.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/bookmark-hollow.svg b/browser/themes/shared/icons/bookmark-hollow.svg new file mode 100644 index 0000000000..23c8a48dd3 --- /dev/null +++ b/browser/themes/shared/icons/bookmark-hollow.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/bookmark-star-on-tray.svg b/browser/themes/shared/icons/bookmark-star-on-tray.svg new file mode 100644 index 0000000000..49b83232ca --- /dev/null +++ b/browser/themes/shared/icons/bookmark-star-on-tray.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/bookmark.svg b/browser/themes/shared/icons/bookmark.svg new file mode 100644 index 0000000000..47ba62c026 --- /dev/null +++ b/browser/themes/shared/icons/bookmark.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/bookmarks-toolbar.svg b/browser/themes/shared/icons/bookmarks-toolbar.svg new file mode 100644 index 0000000000..2840b5dffc --- /dev/null +++ b/browser/themes/shared/icons/bookmarks-toolbar.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/canvas-blocked.svg b/browser/themes/shared/icons/canvas-blocked.svg new file mode 100644 index 0000000000..636b6f8fa8 --- /dev/null +++ b/browser/themes/shared/icons/canvas-blocked.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/icons/canvas.svg b/browser/themes/shared/icons/canvas.svg new file mode 100644 index 0000000000..4a3e99094f --- /dev/null +++ b/browser/themes/shared/icons/canvas.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/icons/characterEncoding.svg b/browser/themes/shared/icons/characterEncoding.svg new file mode 100644 index 0000000000..6cd4f56dd1 --- /dev/null +++ b/browser/themes/shared/icons/characterEncoding.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/chevron-animation.svg b/browser/themes/shared/icons/chevron-animation.svg new file mode 100644 index 0000000000..0cf17dcc46 --- /dev/null +++ b/browser/themes/shared/icons/chevron-animation.svg @@ -0,0 +1,391 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/icons/customize.svg b/browser/themes/shared/icons/customize.svg new file mode 100644 index 0000000000..f0da3a385b --- /dev/null +++ b/browser/themes/shared/icons/customize.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/device-desktop.svg b/browser/themes/shared/icons/device-desktop.svg new file mode 100644 index 0000000000..51c7bf0a74 --- /dev/null +++ b/browser/themes/shared/icons/device-desktop.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/device-phone.svg b/browser/themes/shared/icons/device-phone.svg new file mode 100644 index 0000000000..81094ef961 --- /dev/null +++ b/browser/themes/shared/icons/device-phone.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/device-tablet.svg b/browser/themes/shared/icons/device-tablet.svg new file mode 100644 index 0000000000..58e61faa11 --- /dev/null +++ b/browser/themes/shared/icons/device-tablet.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/device-tv.svg b/browser/themes/shared/icons/device-tv.svg new file mode 100644 index 0000000000..ed65b4a229 --- /dev/null +++ b/browser/themes/shared/icons/device-tv.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/device-vr.svg b/browser/themes/shared/icons/device-vr.svg new file mode 100644 index 0000000000..1a60279c88 --- /dev/null +++ b/browser/themes/shared/icons/device-vr.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/edit-cut.svg b/browser/themes/shared/icons/edit-cut.svg new file mode 100644 index 0000000000..e0e685c4c1 --- /dev/null +++ b/browser/themes/shared/icons/edit-cut.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/edit-paste.svg b/browser/themes/shared/icons/edit-paste.svg new file mode 100644 index 0000000000..64b77646c8 --- /dev/null +++ b/browser/themes/shared/icons/edit-paste.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/fingerprint.svg b/browser/themes/shared/icons/fingerprint.svg new file mode 100644 index 0000000000..320d516b07 --- /dev/null +++ b/browser/themes/shared/icons/fingerprint.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/icons/firefox-view.svg b/browser/themes/shared/icons/firefox-view.svg new file mode 100644 index 0000000000..77d701d207 --- /dev/null +++ b/browser/themes/shared/icons/firefox-view.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/browser/themes/shared/icons/flame.svg b/browser/themes/shared/icons/flame.svg new file mode 100644 index 0000000000..8d6fb7782d --- /dev/null +++ b/browser/themes/shared/icons/flame.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/forget.svg b/browser/themes/shared/icons/forget.svg new file mode 100644 index 0000000000..8dc744849d --- /dev/null +++ b/browser/themes/shared/icons/forget.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/forward.svg b/browser/themes/shared/icons/forward.svg new file mode 100644 index 0000000000..2eac6f3ed7 --- /dev/null +++ b/browser/themes/shared/icons/forward.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/fullscreen-exit.svg b/browser/themes/shared/icons/fullscreen-exit.svg new file mode 100644 index 0000000000..227ba4229e --- /dev/null +++ b/browser/themes/shared/icons/fullscreen-exit.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/fullscreen.svg b/browser/themes/shared/icons/fullscreen.svg new file mode 100644 index 0000000000..b525df0668 --- /dev/null +++ b/browser/themes/shared/icons/fullscreen.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/history.svg b/browser/themes/shared/icons/history.svg new file mode 100644 index 0000000000..3772c8f76d --- /dev/null +++ b/browser/themes/shared/icons/history.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/home.svg b/browser/themes/shared/icons/home.svg new file mode 100644 index 0000000000..a9c2ced8e8 --- /dev/null +++ b/browser/themes/shared/icons/home.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/import-export.svg b/browser/themes/shared/icons/import-export.svg new file mode 100644 index 0000000000..b92beabc8d --- /dev/null +++ b/browser/themes/shared/icons/import-export.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/import.svg b/browser/themes/shared/icons/import.svg new file mode 100644 index 0000000000..cc6232af51 --- /dev/null +++ b/browser/themes/shared/icons/import.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/ion.svg b/browser/themes/shared/icons/ion.svg new file mode 100644 index 0000000000..870914287b --- /dev/null +++ b/browser/themes/shared/icons/ion.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/themes/shared/icons/library.svg b/browser/themes/shared/icons/library.svg new file mode 100644 index 0000000000..26bf1ef985 --- /dev/null +++ b/browser/themes/shared/icons/library.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/icons/login.svg b/browser/themes/shared/icons/login.svg new file mode 100644 index 0000000000..51a8f285fc --- /dev/null +++ b/browser/themes/shared/icons/login.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/logo-android.svg b/browser/themes/shared/icons/logo-android.svg new file mode 100644 index 0000000000..b8b0ab040b --- /dev/null +++ b/browser/themes/shared/icons/logo-android.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/logo-ios.svg b/browser/themes/shared/icons/logo-ios.svg new file mode 100644 index 0000000000..dcd70b5588 --- /dev/null +++ b/browser/themes/shared/icons/logo-ios.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/mail.svg b/browser/themes/shared/icons/mail.svg new file mode 100644 index 0000000000..62fd0e0875 --- /dev/null +++ b/browser/themes/shared/icons/mail.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/menu-badged.svg b/browser/themes/shared/icons/menu-badged.svg new file mode 100644 index 0000000000..bbfce72776 --- /dev/null +++ b/browser/themes/shared/icons/menu-badged.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/icons/menu.svg b/browser/themes/shared/icons/menu.svg new file mode 100644 index 0000000000..39628990ce --- /dev/null +++ b/browser/themes/shared/icons/menu.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/icons/new-tab.svg b/browser/themes/shared/icons/new-tab.svg new file mode 100644 index 0000000000..2d475aada0 --- /dev/null +++ b/browser/themes/shared/icons/new-tab.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/notification-fill-12.svg b/browser/themes/shared/icons/notification-fill-12.svg new file mode 100644 index 0000000000..6af8d91526 --- /dev/null +++ b/browser/themes/shared/icons/notification-fill-12.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/open.svg b/browser/themes/shared/icons/open.svg new file mode 100644 index 0000000000..b7682227bf --- /dev/null +++ b/browser/themes/shared/icons/open.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/pin-12.svg b/browser/themes/shared/icons/pin-12.svg new file mode 100644 index 0000000000..2c354bdfa4 --- /dev/null +++ b/browser/themes/shared/icons/pin-12.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/privateBrowsing.svg b/browser/themes/shared/icons/privateBrowsing.svg new file mode 100644 index 0000000000..c896922d7e --- /dev/null +++ b/browser/themes/shared/icons/privateBrowsing.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/quickactions.svg b/browser/themes/shared/icons/quickactions.svg new file mode 100644 index 0000000000..9631efd296 --- /dev/null +++ b/browser/themes/shared/icons/quickactions.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/browser/themes/shared/icons/reader-mode.svg b/browser/themes/shared/icons/reader-mode.svg new file mode 100644 index 0000000000..5454f63ad9 --- /dev/null +++ b/browser/themes/shared/icons/reader-mode.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/icons/reload-to-stop.svg b/browser/themes/shared/icons/reload-to-stop.svg new file mode 100644 index 0000000000..fe7635f1d9 --- /dev/null +++ b/browser/themes/shared/icons/reload-to-stop.svg @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/icons/save.svg b/browser/themes/shared/icons/save.svg new file mode 100644 index 0000000000..0207fb6045 --- /dev/null +++ b/browser/themes/shared/icons/save.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/screenshot.svg b/browser/themes/shared/icons/screenshot.svg new file mode 100644 index 0000000000..92b1473b61 --- /dev/null +++ b/browser/themes/shared/icons/screenshot.svg @@ -0,0 +1,4 @@ + + diff --git a/browser/themes/shared/icons/sidebars-right.svg b/browser/themes/shared/icons/sidebars-right.svg new file mode 100644 index 0000000000..5bf51e168b --- /dev/null +++ b/browser/themes/shared/icons/sidebars-right.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/icons/sidebars.svg b/browser/themes/shared/icons/sidebars.svg new file mode 100644 index 0000000000..e116c9e2d0 --- /dev/null +++ b/browser/themes/shared/icons/sidebars.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/icons/sort.svg b/browser/themes/shared/icons/sort.svg new file mode 100644 index 0000000000..15d68af6d5 --- /dev/null +++ b/browser/themes/shared/icons/sort.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/browser/themes/shared/icons/stop-to-reload.svg b/browser/themes/shared/icons/stop-to-reload.svg new file mode 100644 index 0000000000..fd9b30d86c --- /dev/null +++ b/browser/themes/shared/icons/stop-to-reload.svg @@ -0,0 +1,173 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/icons/subtract-circle-fill.svg b/browser/themes/shared/icons/subtract-circle-fill.svg new file mode 100644 index 0000000000..63a30033f8 --- /dev/null +++ b/browser/themes/shared/icons/subtract-circle-fill.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/success-animation.svg b/browser/themes/shared/icons/success-animation.svg new file mode 100644 index 0000000000..1faa6eb7e6 --- /dev/null +++ b/browser/themes/shared/icons/success-animation.svg @@ -0,0 +1,107 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/icons/sync.svg b/browser/themes/shared/icons/sync.svg new file mode 100644 index 0000000000..888e593abf --- /dev/null +++ b/browser/themes/shared/icons/sync.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/synced-tabs.svg b/browser/themes/shared/icons/synced-tabs.svg new file mode 100644 index 0000000000..deea09780b --- /dev/null +++ b/browser/themes/shared/icons/synced-tabs.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/browser/themes/shared/icons/tab.svg b/browser/themes/shared/icons/tab.svg new file mode 100644 index 0000000000..7585b1987f --- /dev/null +++ b/browser/themes/shared/icons/tab.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/icons/thumb-down.svg b/browser/themes/shared/icons/thumb-down.svg new file mode 100644 index 0000000000..f110985fc0 --- /dev/null +++ b/browser/themes/shared/icons/thumb-down.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/icons/topsites.svg b/browser/themes/shared/icons/topsites.svg new file mode 100644 index 0000000000..6381606fb2 --- /dev/null +++ b/browser/themes/shared/icons/topsites.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/icons/translations.svg b/browser/themes/shared/icons/translations.svg new file mode 100644 index 0000000000..a5c9a71a68 --- /dev/null +++ b/browser/themes/shared/icons/translations.svg @@ -0,0 +1,10 @@ + + + + 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..39cf7c917a --- /dev/null +++ b/browser/themes/shared/identity-block/identity-block.css @@ -0,0 +1,273 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +#identity-box { + margin-inline-end: var(--identity-box-margin-inline); +} + +#identity-box, +#tracking-protection-icon-container { + /* Set default fill for icons in the identity block. + Individual icons can override this. */ + fill: currentColor; + fill-opacity: var(--urlbar-icon-fill-opacity); +} + +#urlbar.searchButton > #urlbar-input-container > #identity-box[pageproxystate="invalid"], +#identity-box[pageproxystate="invalid"] > #identity-permission-box, +#identity-box[pageproxystate="invalid"] > #notification-popup-box, +#identity-box[pageproxystate="invalid"] #identity-icon-label { + display: none; +} + +#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"] { + pointer-events: none; + -moz-user-focus: ignore; +} + +.identity-box-button:hover:not([open=true]), +#tracking-protection-icon-container:hover:not([open=true]) { + background-color: var(--urlbar-box-hover-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +.identity-box-button:hover:active, +.identity-box-button[open=true], +#tracking-protection-icon-container:hover:active, +#tracking-protection-icon-container[open=true] { + background-color: var(--urlbar-box-active-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +.identity-box-button:focus-visible, +#tracking-protection-icon-container:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +.identity-box-button { + padding-inline: var(--urlbar-icon-padding); + border-radius: var(--urlbar-icon-border-radius); +} + +#identity-icon-label { + padding-inline-start: 4px; +} + +#identity-box[pageproxystate="valid"].notSecureText, +#identity-box[pageproxystate="valid"].chromeUI, +#identity-box[pageproxystate="valid"].extensionPage, +#urlbar-label-box { + margin-inline-end: 8px; +} + +#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button, +#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button, +#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button, +#urlbar-label-box { + background-color: var(--urlbar-box-bgcolor); + color: var(--urlbar-box-text-color); + padding-inline: 8px; + border-radius: var(--urlbar-icon-border-radius); +} + +#urlbar[focused="true"] #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:not(:hover, [open=true]), +#urlbar[focused="true"] #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:not(:hover, [open=true]), +#urlbar[focused="true"] #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:not(:hover, [open=true]), +#urlbar[focused="true"] #urlbar-label-box { + background-color: var(--urlbar-box-focus-bgcolor); +} + +#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:hover:not([open]), +#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:hover:not([open]), +#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:hover:not([open]) { + background-color: var(--urlbar-box-hover-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:hover:active, +#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button[open=true], +#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:hover:active, +#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button[open=true], +#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:hover:active, +#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button[open=true] { + background-color: var(--urlbar-box-active-bgcolor); + color: var(--urlbar-box-hover-text-color); +} + +#urlbar[searchmode]:not([focused="true"]) > #urlbar-input-container > #urlbar-search-mode-indicator, +#urlbar[searchmode]:not([focused="true"]) > #urlbar-input-container > #urlbar-label-box { + pointer-events: none; +} + +#urlbar[searchmode]:not([focused="true"]) > #urlbar-input-container > #urlbar-search-mode-indicator > #urlbar-search-mode-indicator-close { + pointer-events: initial; +} + +.urlbar-label { + margin: 0; +} + +.sharing-icon, +#identity-icon, +#permissions-granted-icon, +#tracking-protection-icon, +.notification-anchor-icon, +#blocked-permissions-container > .blocked-permission-icon { + -moz-context-properties: fill, fill-opacity; +} + +.sharing-icon, +#identity-icon, +#permissions-granted-icon, +#tracking-protection-icon, +#blocked-permissions-container > .blocked-permission-icon { + width: 16px; + height: 16px; +} + +.sharing-icon, +#identity-icon, +#tracking-protection-icon, +#blocked-permissions-container > .blocked-permission-icon { + margin-inline-start: 4px; +} + +#tracking-protection-icon { + margin-inline-start: 0; +} + +/* MAIN IDENTITY ICON */ +#identity-icon { + margin-inline-start: 0; + list-style-image: url(chrome://global/skin/icons/info.svg); +} + +#identity-box[pageproxystate="valid"].chromeUI #identity-icon { + list-style-image: url(chrome://branding/content/icon16.png); +} +@media (min-resolution: 1.1dppx) { + #identity-box[pageproxystate="valid"].chromeUI #identity-icon { + list-style-image: url(chrome://branding/content/icon32.png); + } +} + +#identity-box[pageproxystate="valid"].localResource #identity-icon { + list-style-image: url(chrome://global/skin/icons/page-portrait.svg); +} + +#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"] #identity-icon { + list-style-image: url(chrome://global/skin/icons/search-glass.svg); +} + +#urlbar[actiontype="extension"] > #urlbar-input-container > #identity-box #identity-icon { + list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); +} + +#identity-box[pageproxystate="valid"].extensionPage #identity-icon { + list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); +} + +#identity-box[pageproxystate="valid"].verifiedDomain #identity-icon, +#identity-box[pageproxystate="valid"].mixedActiveBlocked #identity-icon { + list-style-image: url(chrome://global/skin/icons/security.svg); +} + +#identity-box[pageproxystate="valid"].weakCipher #identity-icon, +#identity-box[pageproxystate="valid"].mixedDisplayContent #identity-icon, +#identity-box[pageproxystate="valid"].mixedDisplayContentLoadedActiveBlocked #identity-icon, +#identity-box[pageproxystate="valid"].certUserOverridden #identity-icon, +#identity-box[pageproxystate="valid"].certErrorPage #identity-icon { + list-style-image: url(chrome://global/skin/icons/security-warning.svg); + fill: unset; +} + + +#identity-box[pageproxystate="valid"].notSecure #identity-icon, +#identity-box[pageproxystate="valid"].mixedActiveContent #identity-icon, +#identity-box[pageproxystate="valid"].httpsOnlyErrorPage #identity-icon { + list-style-image: url(chrome://global/skin/icons/security-broken.svg); +} + +#permissions-granted-icon { + list-style-image: url(chrome://browser/skin/permissions.svg); +} + +#identity-permission-box { + display: none; +} + +#identity-permission-box[open=true], +#identity-permission-box[hasPermissions], +#identity-permission-box[hasSharingIcon] { + display: flex; +} + +/* SHARING ICON */ + +#webrtc-sharing-icon[sharing="camera"] { + list-style-image: url("chrome://browser/skin/notification-icons/camera.svg"); +} + +#webrtc-sharing-icon[sharing="microphone"] { + list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg"); +} + +#webrtc-sharing-icon[sharing="screen"] { + list-style-image: url("chrome://browser/skin/notification-icons/screen.svg"); +} + +#geo-sharing-icon[sharing] { + list-style-image: url("chrome://browser/skin/notification-icons/geo.svg"); +} + +.sharing-icon:not([sharing]) { + display: none; +} + +#webrtc-sharing-icon[sharing]:not([paused]) { + -moz-context-properties: fill; + fill: rgb(224, 41, 29); +} + +/* TRACKING PROTECTION ICON */ + +#tracking-protection-icon-container { + padding-inline: var(--urlbar-icon-padding); + border-radius: var(--urlbar-icon-border-radius); + /* This is needed in order to position the blue dot indicator. */ + position: relative; +} + +#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container.chromeUI { + display: none; +} + +#tracking-protection-icon-box { + overflow: hidden; + width: 16px; + height: 16px; +} + +#tracking-protection-icon-tooltip { + max-width: 500px; +} + +#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box { + list-style-image: url(chrome://browser/skin/tracking-protection.svg); + + &[active] { + list-style-image: url(chrome://browser/skin/tracking-protection-active.svg); + } + + &[hasException] { + list-style-image: url(chrome://browser/skin/tracking-protection-disabled.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.svg b/browser/themes/shared/identity-block/tracking-protection-active.svg new file mode 100644 index 0000000000..fd7069d8e0 --- /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..769361c067 --- /dev/null +++ b/browser/themes/shared/identity-credential-notification.css @@ -0,0 +1,86 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +#identity-credential-notification { + --list-item-border: color-mix(in srgb, currentColor 10%, transparent); + --list-item-checked-bgcolor: color-mix(in srgb, var(--button-primary-bgcolor) 6%, transparent); + --list-item-checked-border: color-mix(in srgb, var(--button-primary-bgcolor) 20%, transparent); +} + +@media (prefers-contrast) { + #identity-credential-notification { + --list-item-border: ThreeDShadow; + --list-item-checked-bgcolor: transparent; + --list-item-checked-border: AccentColor; + } +} + +#identity-credential-provider-selector-container, +#identity-credential-account-selector-container { + display: flex; + flex-direction: column; + gap: 12px; + max-height: 540px; + overflow: auto; +} + +#identity-credential-header-text { + font-weight: 600; +} + +.identity-credential-header-container { + margin: 16px 16px -16px 16px; + display: flex; +} + +.identity-credential-header-icon { + width: 16px; + height: 16px; + margin-inline-end: 8px; +} + +.identity-credential-list-item { + display: flex; + gap: 10px; + padding-block: max(calc(var(--arrowpanel-menuitem-padding-block) * 2), 4px); + padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) * 2); + border: 2px solid var(--list-item-border); + border-radius: 4px; +} + +.identity-credential-list-item.checked { + background-color: var(--list-item-checked-bgcolor); + border-color: var(--list-item-checked-border); +} + +.identity-credential-list-item-icon { + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.6; + clip-path: circle(50%); + width: 32px; + height: 32px; +} + +.identity-credential-list-item > .identity-credential-list-item-info { + display: flex; + flex-direction: column; + justify-content: center; + gap: 4px; +} + +.identity-credential-list-item .identity-credential-list-item-label-primary { + font-weight: 600; +} + +.identity-credential-list-item .identity-credential-list-item-label-secondary { + font-size: 80%; +} + +.identity-credential-list-item > .identity-credential-list-item-label-stack { + display: flex; + flex-direction: column; + justify-content: center; + gap: 4px; +} diff --git a/browser/themes/shared/incontent-icons/tab-crashed.svg b/browser/themes/shared/incontent-icons/tab-crashed.svg new file mode 100644 index 0000000000..db19117370 --- /dev/null +++ b/browser/themes/shared/incontent-icons/tab-crashed.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + diff --git a/browser/themes/shared/jar.inc.mn b/browser/themes/shared/jar.inc.mn new file mode 100644 index 0000000000..37b5f04cdd --- /dev/null +++ b/browser/themes/shared/jar.inc.mn @@ -0,0 +1,287 @@ +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.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/formautofill-notification.css (../shared/formautofill-notification.css) + skin/classic/browser/identity-credential-notification.css (../shared/identity-credential-notification.css) + skin/classic/browser/light-dark-overrides.css (../shared/light-dark-overrides.css) + skin/classic/browser/menupanel.css (../shared/menupanel.css) + skin/classic/browser/notification-icons.css (../shared/notification-icons.css) + skin/classic/browser/pageInfo.css (../shared/pageInfo.css) + skin/classic/browser/sanitizeDialog_v2.css (../shared/sanitizeDialog_v2.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/3rdpartycookies-blocked.svg (../shared/controlcenter/3rdpartycookies-blocked.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/formautofill/icon-address-edit.svg (../shared/formautofill/icon-address-edit.svg) + skin/classic/browser/formautofill/icon-capture-address-fields.svg (../shared/formautofill/icon-capture-address-fields.svg) + skin/classic/browser/formautofill/icon-capture-email-fields.svg (../shared/formautofill/icon-capture-email-fields.svg) + skin/classic/browser/formautofill/icon-doorhanger-menu.svg (../shared/formautofill/icon-doorhanger-menu.svg) + skin/classic/browser/identity-block/identity-block.css (../shared/identity-block/identity-block.css) + skin/classic/browser/permissions.svg (../shared/identity-block/permissions.svg) + skin/classic/browser/migration/migration-dialog-window.css (../shared/migration/migration-dialog-window.css) + skin/classic/browser/migration/migration-wizard.css (../shared/migration/migration-wizard.css) + skin/classic/browser/migration/success.svg (../shared/migration/success.svg) + skin/classic/browser/migration/progress-mask.svg (../shared/migration/progress-mask.svg) + skin/classic/browser/migration/safari-icon-3dots.svg (../shared/migration/safari-icon-3dots.svg) + skin/classic/browser/notification-icons/autoplay-media.svg (../shared/notification-icons/autoplay-media.svg) + skin/classic/browser/notification-icons/autoplay-media-blocked.svg (../shared/notification-icons/autoplay-media-blocked.svg) + skin/classic/browser/notification-icons/camera-blocked.svg (../shared/notification-icons/camera-blocked.svg) + skin/classic/browser/notification-icons/camera.svg (../shared/notification-icons/camera.svg) + skin/classic/browser/notification-icons/desktop-notification-blocked.svg (../shared/notification-icons/desktop-notification-blocked.svg) + skin/classic/browser/notification-icons/desktop-notification.svg (../shared/notification-icons/desktop-notification.svg) + skin/classic/browser/notification-icons/drag-indicator.svg (../shared/notification-icons/drag-indicator.svg) + skin/classic/browser/notification-icons/geo.svg (../shared/notification-icons/geo.svg) + skin/classic/browser/notification-icons/geo-blocked.svg (../shared/notification-icons/geo-blocked.svg) + skin/classic/browser/notification-icons/microphone-blocked.svg (../shared/notification-icons/microphone-blocked.svg) + skin/classic/browser/notification-icons/microphone.svg (../shared/notification-icons/microphone.svg) + skin/classic/browser/notification-icons/minimize.svg (../shared/notification-icons/minimize.svg) + skin/classic/browser/notification-icons/persistent-storage-blocked.svg (../shared/notification-icons/persistent-storage-blocked.svg) + skin/classic/browser/notification-icons/persistent-storage.svg (../shared/notification-icons/persistent-storage.svg) + skin/classic/browser/notification-icons/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/speaker.svg (../shared/notification-icons/speaker.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/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/translations.css (../shared/preferences/translations.css) + skin/classic/browser/preferences/containers-dialog.css (../shared/preferences/containers-dialog.css) + skin/classic/browser/preferences/dialog.css (../shared/preferences/dialog.css) + skin/classic/browser/preferences/fxaPairDevice.css (../shared/preferences/fxaPairDevice.css) + skin/classic/browser/preferences/ios-menu.svg (../shared/preferences/ios-menu.svg) + skin/classic/browser/preferences/monitor-logo.svg (../shared/preferences/monitor-logo.svg) + skin/classic/browser/preferences/mozilla-logo.svg (../shared/preferences/mozilla-logo.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/vpn-logo.svg (../shared/preferences/vpn-logo.svg) + skin/classic/browser/preferences/search.css (../shared/preferences/search.css) + skin/classic/browser/preferences/siteDataSettings.css (../shared/preferences/siteDataSettings.css) + skin/classic/browser/translations/panel.css (../shared/translations/panel.css) + skin/classic/browser/fxa/fxa-spinner.svg (../shared/fxa/fxa-spinner.svg) + skin/classic/browser/fxa/sync-illustration.svg (../shared/fxa/sync-illustration.svg) + skin/classic/browser/fxa/sync-illustration-issue.svg (../shared/fxa/sync-illustration-issue.svg) + skin/classic/browser/fxa/send-to-device.svg (../shared/fxa/send-to-device.svg) + + skin/classic/browser/fxa/avatar.svg (../shared/fxa/avatar.svg) + skin/classic/browser/fxa/avatar-color.svg (../shared/fxa/avatar-color.svg) + skin/classic/browser/fxa/avatar-empty.svg (../shared/fxa/avatar-empty.svg) + skin/classic/browser/fxa/sync-devices.svg (../shared/fxa/sync-devices.svg) + skin/classic/browser/fxa/send.svg (../shared/fxa/send.svg) + skin/classic/browser/fxa/monitor.svg (../shared/fxa/monitor.svg) + + skin/classic/browser/fullscreen/warning.css (../shared/fullscreen/warning.css) + + skin/classic/browser/add-circle-fill.svg (../shared/icons/add-circle-fill.svg) + skin/classic/browser/back.svg (../shared/icons/back.svg) + skin/classic/browser/bookmark.svg (../shared/icons/bookmark.svg) + skin/classic/browser/bookmark-12.svg (../shared/icons/bookmark-12.svg) + skin/classic/browser/bookmark-hollow.svg (../shared/icons/bookmark-hollow.svg) + skin/classic/browser/bookmark-star-on-tray.svg (../shared/icons/bookmark-star-on-tray.svg) + skin/classic/browser/bookmarks-toolbar.svg (../shared/icons/bookmarks-toolbar.svg) + skin/classic/browser/canvas.svg (../shared/icons/canvas.svg) + skin/classic/browser/canvas-blocked.svg (../shared/icons/canvas-blocked.svg) + skin/classic/browser/characterEncoding.svg (../shared/icons/characterEncoding.svg) + skin/classic/browser/chevron-animation.svg (../shared/icons/chevron-animation.svg) + skin/classic/browser/customize.svg (../shared/icons/customize.svg) + skin/classic/browser/device-phone.svg (../shared/icons/device-phone.svg) + skin/classic/browser/device-tablet.svg (../shared/icons/device-tablet.svg) + skin/classic/browser/device-desktop.svg (../shared/icons/device-desktop.svg) + skin/classic/browser/device-tv.svg (../shared/icons/device-tv.svg) + skin/classic/browser/device-vr.svg (../shared/icons/device-vr.svg) + skin/classic/browser/edit-cut.svg (../shared/icons/edit-cut.svg) + skin/classic/browser/edit-paste.svg (../shared/icons/edit-paste.svg) + skin/classic/browser/fingerprint.svg (../shared/icons/fingerprint.svg) + skin/classic/browser/firefox-view.svg (../shared/icons/firefox-view.svg) + skin/classic/browser/flame.svg (../shared/icons/flame.svg) + skin/classic/browser/forget.svg (../shared/icons/forget.svg) + skin/classic/browser/forward.svg (../shared/icons/forward.svg) + skin/classic/browser/fullscreen.svg (../shared/icons/fullscreen.svg) + skin/classic/browser/fullscreen-exit.svg (../shared/icons/fullscreen-exit.svg) + skin/classic/browser/history.svg (../shared/icons/history.svg) + skin/classic/browser/home.svg (../shared/icons/home.svg) + skin/classic/browser/import.svg (../shared/icons/import.svg) +#ifndef MOZ_WIDGET_GTK + skin/classic/browser/import-export.svg (../shared/icons/import-export.svg) +#endif + skin/classic/browser/library.svg (../shared/icons/library.svg) + skin/classic/browser/login.svg (../shared/icons/login.svg) + skin/classic/browser/logo-android.svg (../shared/icons/logo-android.svg) + skin/classic/browser/logo-ios.svg (../shared/icons/logo-ios.svg) + skin/classic/browser/mail.svg (../shared/icons/mail.svg) + skin/classic/browser/menu.svg (../shared/icons/menu.svg) + skin/classic/browser/menu-badged.svg (../shared/icons/menu-badged.svg) + skin/classic/browser/new-tab.svg (../shared/icons/new-tab.svg) + skin/classic/browser/notification-fill-12.svg (../shared/icons/notification-fill-12.svg) + skin/classic/browser/open.svg (../shared/icons/open.svg) + skin/classic/browser/pin-12.svg (../shared/icons/pin-12.svg) + skin/classic/browser/privateBrowsing.svg (../shared/icons/privateBrowsing.svg) + skin/classic/browser/quickactions.svg (../shared/icons/quickactions.svg) + skin/classic/browser/reader-mode.svg (../shared/icons/reader-mode.svg) + skin/classic/browser/reload-to-stop.svg (../shared/icons/reload-to-stop.svg) + skin/classic/browser/save.svg (../shared/icons/save.svg) + skin/classic/browser/screenshot.svg (../shared/icons/screenshot.svg) + skin/classic/browser/sidebars.svg (../shared/icons/sidebars.svg) + skin/classic/browser/sidebars-right.svg (../shared/icons/sidebars-right.svg) +#ifndef MOZ_WIDGET_GTK + skin/classic/browser/sort.svg (../shared/icons/sort.svg) +#endif + skin/classic/browser/stop-to-reload.svg (../shared/icons/stop-to-reload.svg) + skin/classic/browser/subtract-circle-fill.svg (../shared/icons/subtract-circle-fill.svg) + skin/classic/browser/success-animation.svg (../shared/icons/success-animation.svg) + skin/classic/browser/sync.svg (../shared/icons/sync.svg) + skin/classic/browser/synced-tabs.svg (../shared/icons/synced-tabs.svg) + skin/classic/browser/tab.svg (../shared/icons/tab.svg) + skin/classic/browser/translations.svg (../shared/icons/translations.svg) + skin/classic/browser/thumb-down.svg (../shared/icons/thumb-down.svg) + skin/classic/browser/topsites.svg (../shared/icons/topsites.svg) + skin/classic/browser/trending.svg (../shared/icons/trending.svg) + skin/classic/browser/window.svg (../shared/icons/window.svg) + skin/classic/browser/zoom-out.svg (../shared/icons/zoom-out.svg) + skin/classic/browser/ion.svg (../shared/icons/ion.svg) + + + skin/classic/browser/search-engine-placeholder.png (../shared/search/search-engine-placeholder.png) + skin/classic/browser/search-engine-placeholder@2x.png (../shared/search/search-engine-placeholder@2x.png) + skin/classic/browser/search-indicator-badge-add.svg (../shared/search/search-indicator-badge-add.svg) + + skin/classic/browser/tabbrowser/crashed.svg (../shared/tabbrowser/crashed.svg) + skin/classic/browser/tabbrowser/hourglass.svg (../shared/tabbrowser/hourglass.svg) + skin/classic/browser/tabbrowser/loading.svg (../shared/tabbrowser/loading.svg) + skin/classic/browser/tabbrowser/loading-burst.svg (../shared/tabbrowser/loading-burst.svg) + skin/classic/browser/tabbrowser/pendingpaint.png (../shared/tabbrowser/pendingpaint.png) + skin/classic/browser/tabbrowser/tab-audio-playing-small.svg (../shared/tabbrowser/tab-audio-playing-small.svg) + skin/classic/browser/tabbrowser/tab-audio-muted-small.svg (../shared/tabbrowser/tab-audio-muted-small.svg) + skin/classic/browser/tabbrowser/tab-audio-blocked-small.svg (../shared/tabbrowser/tab-audio-blocked-small.svg) + skin/classic/browser/tabbrowser/tab-connecting.png (../shared/tabbrowser/tab-connecting.png) + skin/classic/browser/tabbrowser/tab-connecting@2x.png (../shared/tabbrowser/tab-connecting@2x.png) + skin/classic/browser/tabbrowser/tab-drag-indicator.svg (../shared/tabbrowser/tab-drag-indicator.svg) + skin/classic/browser/tabbrowser/tab-loading.png (../shared/tabbrowser/tab-loading.png) + skin/classic/browser/tabbrowser/tab-loading@2x.png (../shared/tabbrowser/tab-loading@2x.png) + skin/classic/browser/tabbrowser/tab-loading-inverted.png (../shared/tabbrowser/tab-loading-inverted.png) + skin/classic/browser/tabbrowser/tab-loading-inverted@2x.png (../shared/tabbrowser/tab-loading-inverted@2x.png) + + skin/classic/browser/translations/beta.svg (../shared/translations/beta.svg) + + skin/classic/browser/update-badge.svg (../shared/update-badge.svg) + skin/classic/browser/profiler-popup-backdrop.png (../shared/profiler-popup-backdrop.png) + skin/classic/browser/tab-crashed.svg (../shared/incontent-icons/tab-crashed.svg) + skin/classic/browser/panic-panel/header.png (../shared/panic-panel/header.png) + skin/classic/browser/panic-panel/header@2x.png (../shared/panic-panel/header@2x.png) + skin/classic/browser/panic-panel/icons.png (../shared/panic-panel/icons.png) + skin/classic/browser/panic-panel/icons@2x.png (../shared/panic-panel/icons@2x.png) + skin/classic/browser/places/organizer-shared.css (../shared/places/organizer-shared.css) + skin/classic/browser/places/sidebar.css (../shared/places/sidebar.css) + skin/classic/browser/places/bookmarksMenu.svg (../shared/places/bookmarksMenu.svg) + skin/classic/browser/places/bookmarksToolbar.svg (../shared/places/bookmarksToolbar.svg) + skin/classic/browser/places/editBookmark.css (../shared/places/editBookmark.css) + skin/classic/browser/places/editBookmarkPanel.css (../shared/places/editBookmarkPanel.css) + skin/classic/browser/places/folder-smart.svg (../shared/places/folder-smart.svg) + skin/classic/browser/places/tag.svg (../shared/places/tag.svg) + skin/classic/browser/places/tree-icons.css (../shared/places/tree-icons.css) + skin/classic/browser/privatebrowsing/aboutPrivateBrowsing.css (../shared/privatebrowsing/aboutPrivateBrowsing.css) + skin/classic/browser/privatebrowsing/favicon.svg (../shared/privatebrowsing/favicon.svg) + + skin/classic/browser/syncedtabs/sidebar.css (../shared/syncedtabs/sidebar.css) + + skin/classic/browser/weather/sunny.svg (../shared/weather/sunny.svg) + skin/classic/browser/weather/mostly-sunny.svg (../shared/weather/mostly-sunny.svg) + skin/classic/browser/weather/partly-sunny.svg (../shared/weather/partly-sunny.svg) + skin/classic/browser/weather/hazy-sunshine.svg (../shared/weather/hazy-sunshine.svg) + skin/classic/browser/weather/cloudy.svg (../shared/weather/cloudy.svg) + skin/classic/browser/weather/fog.svg (../shared/weather/fog.svg) + skin/classic/browser/weather/showers.svg (../shared/weather/showers.svg) + skin/classic/browser/weather/mostly-cloudy-with-showers.svg (../shared/weather/mostly-cloudy-with-showers.svg) + skin/classic/browser/weather/thunderstorms.svg (../shared/weather/thunderstorms.svg) + skin/classic/browser/weather/mostly-cloudy-with-thunderstorms.svg (../shared/weather/mostly-cloudy-with-thunderstorms.svg) + skin/classic/browser/weather/rain.svg (../shared/weather/rain.svg) + skin/classic/browser/weather/flurries.svg (../shared/weather/flurries.svg) + skin/classic/browser/weather/partly-sunny-with-flurries.svg (../shared/weather/partly-sunny-with-flurries.svg) + skin/classic/browser/weather/snow.svg (../shared/weather/snow.svg) + skin/classic/browser/weather/ice.svg (../shared/weather/ice.svg) + skin/classic/browser/weather/freezing-rain.svg (../shared/weather/freezing-rain.svg) + skin/classic/browser/weather/hot.svg (../shared/weather/hot.svg) + skin/classic/browser/weather/windy.svg (../shared/weather/windy.svg) + skin/classic/browser/weather/night-clear.svg (../shared/weather/night-clear.svg) + skin/classic/browser/weather/night-mostly-clear.svg (../shared/weather/night-mostly-clear.svg) + skin/classic/browser/weather/night-hazy-moonlight.svg (../shared/weather/night-hazy-moonlight.svg) + skin/classic/browser/weather/night-partly-cloudy-with-showers.svg (../shared/weather/night-partly-cloudy-with-showers.svg) + skin/classic/browser/weather/night-partly-cloudy-with-thunderstorms.svg (../shared/weather/night-partly-cloudy-with-thunderstorms.svg) + skin/classic/browser/weather/night-mostly-cloudy-with-flurries.svg (../shared/weather/night-mostly-cloudy-with-flurries.svg) diff --git a/browser/themes/shared/light-dark-overrides.css b/browser/themes/shared/light-dark-overrides.css new file mode 100644 index 0000000000..87d56a5055 --- /dev/null +++ b/browser/themes/shared/light-dark-overrides.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/. */ + +#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); +} diff --git a/browser/themes/shared/menupanel.css b/browser/themes/shared/menupanel.css new file mode 100644 index 0000000000..e20b3cfaa4 --- /dev/null +++ b/browser/themes/shared/menupanel.css @@ -0,0 +1,27 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* Menu panel and palette styles */ + +/** + * These are placeholder icons until we get the proper Proton + * assets for zoom/fullscreen/sync. + */ +#appMenu-zoomEnlarge-button2 { + list-style-image: url(chrome://browser/skin/add-circle-fill.svg); +} + +#appMenu-zoomReduce-button2 { + list-style-image: url(chrome://browser/skin/subtract-circle-fill.svg); +} + +#appMenu-fullscreen-button2 { + list-style-image: url(chrome://browser/skin/fullscreen.svg); +} + +#appMenu-fullscreen-button2[checked] { + list-style-image: url(chrome://browser/skin/fullscreen-exit.svg); +} diff --git a/browser/themes/shared/migration/migration-dialog-window.css b/browser/themes/shared/migration/migration-dialog-window.css new file mode 100644 index 0000000000..686f6cfe9c --- /dev/null +++ b/browser/themes/shared/migration/migration-dialog-window.css @@ -0,0 +1,9 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/in-content/common.css"); + +body { + padding: 24px; +} diff --git a/browser/themes/shared/migration/migration-wizard.css b/browser/themes/shared/migration/migration-wizard.css new file mode 100644 index 0000000000..457af1f66e --- /dev/null +++ b/browser/themes/shared/migration/migration-wizard.css @@ -0,0 +1,384 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/global.css"); +@import url("chrome://global/skin/in-content/common.css"); + +:host { + display: flex; + flex-direction: column; + text-align: start; + width: 22.34em; +} + +h1 { + font-size: 1.30em; + font-weight: normal; + margin-block: 0 16px; + min-height: 1em; +} + +ol { + padding-inline-start: 24px; + margin-block: 16px 0; +} + +li:not(:last-child) { + margin-block-end: 16px; +} + +input[type="checkbox"] { + margin-block: 0; +} + +div[name="page-loading"] > .buttons > button { + color: transparent; +} + +.loading-block { + background-color: var(--in-content-button-background); + border-radius: 4px; + opacity: 0.4; + margin-block-start: 16px; +} + +.loading-block.large { + height: 36px; +} + +.loading-block.small { + height: 16px; +} + +.buttons { + margin-block-start: 16px; +} + +.deemphasized-text { + font-size: 0.84em; +} + +@media not (prefers-contrast) { + .deemphasized-text { + color: var(--text-color-deemphasized); + } +} + +fieldset { + border: 0; +} + +label:not([hidden]) { + display: flex; + align-items: center; + width: fit-content; +} + +#wizard-deck > div { + display: flex; + flex-direction: column; +} + +#browser-profile-selector { + display: flex; + align-items: center; + padding: 8px; + margin: 0; + font-weight: unset; +} + +.migrator-icon { + content: url(chrome://global/skin/icons/defaultFavicon.svg); + height: 32px; + width: 32px; + -moz-context-properties: fill; + fill: currentColor; +} + +.migrator-icon, +.migrator-description, +.dropdown-icon { + pointer-events: none; +} + +.dropdown-icon { + content: url("chrome://global/skin/icons/arrow-down.svg"); + -moz-context-properties: fill; + fill: currentColor; + height: 16px; + width: 16px; +} + +.migrator-description { + display: flex; + flex: 1; + flex-direction: column; + justify-content: center; + align-items: start; + margin-inline-start: 11px; +} + +#profile-name:empty { + display: none; +} + +#profile-name { + font-size: 0.73em; + text-transform: uppercase; +} + +/** + * When the panel-list is embedded in a XUL panel, we don't want the default + * padding that a XUL panel gets. + */ +panel { + --panel-padding: 0; +} + +panel-item::part(button) { + min-height: 40px; +} + +panel-item[type="file"]::part(button) { + background-size: 20px; + background-position: 6px center; +} + +panel-item[type="file"]:-moz-locale-dir(rtl)::part(button), +panel-item[type="file"]:dir(rtl)::part(button) { + background-position-x: right 6px; +} + +div[name="page-selection"]:not([show-import-all]) #select-all, +div[name="page-selection"][show-import-all][single-item] #select-all, +div[name="page-selection"]:not([show-import-all]) summary { + display: none; +} + +div[name="page-selection"][show-import-all]:not([single-item]) label:not(#select-all) { + margin-inline-start: 24px; +} + +div[name="page-selection"][show-import-all] #select-all { + display: flex; +} + +div[name="page-selection"][migrator-type="browser"] > .buttons > #import-from-file, +div[name="page-selection"][migrator-type="browser"][no-permissions] > .buttons > #import, +div[name="page-selection"][migrator-type="browser"]:not([no-permissions]) > .buttons > #get-permissions, +div[name="page-selection"][migrator-type="file"] > .buttons > #get-permissions, +div[name="page-selection"][migrator-type="file"] > .buttons > #import, +div[name="page-selection"][migrator-type="file"] > .resource-selection-details, +div[name="page-selection"][migrator-type="file"] > .resource-selection-preamble, +div[name="page-selection"][show-import-all] .resource-selection-preamble { + display: none; +} + +/** + * We're using to ease legibility for paths on + * the user's system, but intentionally reduce the font + * size to more closely match the surrounding text. + */ +.migration-no-permissions-instructions-step2 > code { + font-size: 0.94em; +} + +.resource-selection-preamble { + margin-block-start: 16px; +} + +details[open] .expand-collapse-icon { + content: url("chrome://browser/skin/zoom-out.svg"); +} + +.expand-collapse-icon { + display: inline-block; + width: 16px; + height: 16px; + content: url("chrome://global/skin/icons/plus.svg"); + grid-area: b; + -moz-context-properties: fill; + fill: currentColor; + justify-self: end; + margin-inline-end: 8px; +} + +details:not([open]) summary { + margin-block-end: 16px; +} + +summary { + cursor: pointer; +} + +#resource-type-list { + padding: 0; +} + +#resource-type-list > label { + margin-block-start: 16px; +} + +:host(:not([dialog-mode])) .cancel-close, +:host(:not([dialog-mode])) .done-button, +:host([dialog-mode]) .continue-button { + display: none; +} + +.resource-progress { + display: grid; + gap: 16px; +} + +.resource-progress-group { + display: grid; + grid-template-columns: min-content auto; + grid-template-areas: "icon type" + "icon status" + "icon support"; + align-items: center; + justify-items: start; +} + +.resource-progress-group[hidden] { + display: none; +} + +.message-text, +.error-text { + grid-area: status; +} + +.support-text { + grid-area: support; +} + +/** + * Workaround for bug 1671784, which shows a slight outline around the + * rotating masked element. + */ +.progress-icon-parent { + border-radius: 0.01px; + overflow: hidden; + display: flex; + align-items: center; +} + +.progress-icon { + display: inline-block; + width: 16px; + height: 16px; + -moz-context-properties: fill; + margin-inline-end: 8px; +} + +/** + * For now, both the success and info icon states appear the same. + */ +.progress-icon[state="success"], +.progress-icon[state="info"] { + content: url("chrome://browser/skin/migration/success.svg"); + fill: var(--in-content-success-icon-color); +} + +.progress-icon[state="warning"] { + content: url("chrome://global/skin/icons/warning.svg"); + fill: var(--in-content-warning-icon-color); +} + +@media (prefers-reduced-motion: reduce) { + .progress-icon[state="loading"] { + content: url("chrome://browser/skin/tabbrowser/hourglass.svg"); + fill: var(--text-color-deemphasized); + } +} + +@media (prefers-reduced-motion: no-preference) { + .progress-icon[state="loading"] { + content: ""; + background-image: conic-gradient(rgba(255, 255, 255, 0.31) 0%, rgba(255, 189, 79, 0.57) 38%, rgba(255, 74, 162, 0.79) 70%, rgb(144, 89, 255) 100%); + mask: url("chrome://browser/skin/migration/progress-mask.svg"); + mask-composite: exclude; + animation-name: rotate; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-timing-function: linear; + } +} + +@keyframes rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.error-icon { + content: url("chrome://global/skin/icons/error.svg"); + -moz-context-properties: fill; + fill: var(--in-content-danger-button-background); + margin-block: 0; + margin-inline: 0 8px; + width: 16px; + height: 16px; +} + +.page-portrait-icon { + width: 16px; + height: 16px; + content: url("chrome://global/skin/icons/page-portrait.svg"); + -moz-context-properties: fill; + fill: currentColor; + vertical-align: middle; +} + +.safari-icon-3dots { + width: 16px; + height: 16px; + vertical-align: middle; + content: url("chrome://browser/skin/migration/safari-icon-3dots.svg"); + -moz-context-properties: fill, stroke; + fill: currentColor; + stroke: color-mix(in srgb, currentColor 10%, transparent 90%); +} + +.no-browsers-found-message { + display: flex; +} + +.error-message { + display: flex; + align-items: start; +} + +.file-import-error, +.no-resources-found { + font-size: 0.84em; + margin-block-start: 16px; +} + +.file-import-error { + margin-inline-start: 8px; +} + +div[name="page-selection"]:not([no-resources]) .no-resources-found, +div[name="page-selection"]:not([no-permissions]) .no-permissions-message, +div[name="page-selection"]:is([no-resources],[no-permissions]) .hide-on-error, +div[name="page-selection"]:not([file-import-error]) .file-import-error { + display: none; +} + +div[name="page-selection"][show-import-all] .resource-selection-details { + padding-inline-start: 8px; +} + +.resource-selection-details > summary { + list-style: none; + display: grid; + grid-template-areas: "a b" + "c b"; + margin-block: 16px 0; +} diff --git a/browser/themes/shared/migration/progress-mask.svg b/browser/themes/shared/migration/progress-mask.svg new file mode 100644 index 0000000000..41cf8f3805 --- /dev/null +++ b/browser/themes/shared/migration/progress-mask.svg @@ -0,0 +1,7 @@ + + + + diff --git a/browser/themes/shared/migration/safari-icon-3dots.svg b/browser/themes/shared/migration/safari-icon-3dots.svg new file mode 100644 index 0000000000..df255b184f --- /dev/null +++ b/browser/themes/shared/migration/safari-icon-3dots.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/migration/success.svg b/browser/themes/shared/migration/success.svg new file mode 100644 index 0000000000..09f624dd65 --- /dev/null +++ b/browser/themes/shared/migration/success.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/notification-icons.css b/browser/themes/shared/notification-icons.css new file mode 100644 index 0000000000..92466732f6 --- /dev/null +++ b/browser/themes/shared/notification-icons.css @@ -0,0 +1,317 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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: LinkText; +} + +.storage-access-notification-content .text-link:hover { + text-decoration: underline; +} + +#storage-access-notification .popup-notification-body-container { + padding: 20px; +} + +.indexedDB-icon { + list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage.svg); +} + +#password-notification-icon { + list-style-image: url(chrome://browser/skin/login.svg); +} + +#password-notification-icon[extraAttr="attention"] { + fill: var(--toolbarbutton-icon-fill-attention); + fill-opacity: 1; +} + +.camera-icon { + list-style-image: url(chrome://browser/skin/notification-icons/camera.svg); +} + +.camera-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons/camera.svg); +} + +.camera-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/camera-blocked.svg); +} + +.microphone-icon { + list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); +} + +.microphone-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); +} + +.microphone-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/microphone-blocked.svg); +} + +.popup-notification-icon.microphone-icon { + list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); +} + +.screen-icon { + list-style-image: url(chrome://browser/skin/notification-icons/screen.svg); +} + +.screen-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons/screen.svg); +} + +.screen-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/screen-blocked.svg); +} + +.speaker-icon { + list-style-image: url(chrome://browser/skin/notification-icons/speaker.svg); +} + +.midi-icon, +.midi-sysex-icon { + list-style-image: url(chrome://browser/skin/notification-icons/midi.svg); +} + +#canvas-notification-icon, +.canvas-icon { + list-style-image: url(chrome://browser/skin/canvas.svg); +} + +.canvas-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/canvas-blocked.svg); +} + +#webauthn-notification-icon, +.popup-notification-icon[popupid^="webauthn-prompt-"] { + list-style-image: url(chrome://browser/skin/fingerprint.svg); +} + +#identity-credential-notification-icon { + list-style-image: url(chrome://browser/skin/login.svg); +} + +#permission-popup-menulist { + margin-inline-end: 0; +} + +#webRTC-preview:not([hidden]) { + flex-direction: column; +} + +#webRTC-previewVideo { + border-radius: 4px; + border: 1px solid var(--panel-separator-color); + min-width: 0; + min-height: 10em; + max-height: 250px; +} + +#webRTC-all-windows-shared, +#webRTC-previewWarning { + font-size: 0.8em; +} + +@media not (prefers-contrast) { + #webRTC-all-windows-shared, + #webRTC-previewWarning { + opacity: 0.6; + } +} + +#webRTC-previewWarning { + margin-block-start: 14px; +} + +/** + * All learn-more links tend to have an !important margin-top, but + * the small one below the WebRTC preview warning is special and + * doesn't have one by design. + */ +#webRTC-previewWarning-learnMore { + margin-top: 0 !important; + font-size: 0.75em; +} + +#webRTC-previewWarningBox:-moz-locale-dir(rtl) { + background-position: calc(100% - .75em) .75em; +} + +#webRTC-previewWarning > .text-link { + margin-inline-start: 0; +} + +/* This icon has a block sign in it, so we don't need a blocked version. */ +.popup-icon { + list-style-image: url("chrome://browser/skin/notification-icons/popup.svg"); +} + +/** + * Bug 1708716: The blocked popup icon is just slightly vertically offset from + * the other icons that can appear alongside it in the URL bar due to how it's + * placed in the SVG file. We nudge it a little here to make it line up in a + * more aesthetically pleasing way. + */ +#blocked-permissions-container > .popup-icon { + transform: translateY(1px); +} + +#permission-popup-menulist, +#permission-popup-menulist > menupopup { + min-width: 6.5em; +} + +/* EME */ + +.drm-icon { + list-style-image: url("chrome://browser/skin/drm-icon.svg"); +} + +.notification-anchor-icon[animate=true], +#eme-notification-icon[firstplay=true] { + animation: emeTeachingMoment 0.2s linear 0s 5 normal; +} + +@keyframes emeTeachingMoment { + 0% {transform: translateX(0); } + 25% {transform: translateX(3px) } + 75% {transform: translateX(-3px) } + 100% { transform: translateX(0); } +} + +/* INSTALL ADDONS */ + +.install-icon { + list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); +} + +.install-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); +} + +/* 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/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/speaker.svg b/browser/themes/shared/notification-icons/speaker.svg new file mode 100644 index 0000000000..5458b91bd2 --- /dev/null +++ b/browser/themes/shared/notification-icons/speaker.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/notification-icons/xr-blocked.svg b/browser/themes/shared/notification-icons/xr-blocked.svg new file mode 100644 index 0000000000..a023bb46d2 --- /dev/null +++ b/browser/themes/shared/notification-icons/xr-blocked.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/notification-icons/xr.svg b/browser/themes/shared/notification-icons/xr.svg new file mode 100644 index 0000000000..d9a870902f --- /dev/null +++ b/browser/themes/shared/notification-icons/xr.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/pageInfo.css b/browser/themes/shared/pageInfo.css new file mode 100644 index 0000000000..7d777c3cc4 --- /dev/null +++ b/browser/themes/shared/pageInfo.css @@ -0,0 +1,242 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/global.css"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +@media (-moz-platform: macos) { + :root { + -moz-default-appearance: -moz-mac-unified-toolbar-window; + appearance: auto; + } + + #topBar { + appearance: auto; + -moz-default-appearance: toolbar; + -moz-window-dragging: drag; + align-items: center; + justify-content: center; + } +} + +@media not (-moz-platform: macos) { + #topBar { + border-bottom: 1px solid ThreeDShadow; + padding-inline-start: 10px; + background-color: Field; + color: FieldText; + } +} + +/* View buttons */ +@media not (-moz-platform: macos) { + #viewGroup > radio { + appearance: none; + list-style-image: none; + min-width: 4.5em; + margin: 0; + padding: 3px; + } + + #viewGroup > radio > .radio-label-box { + margin: 0; + padding: 0 6px; + } + + #viewGroup:focus-visible > radio[focused="true"] > .radio-label-box { + outline: var(--default-focusring); + } + + #viewGroup .radio-icon { + background-image: url("chrome://browser/skin/pageInfo.png"); + width: 32px; + height: 32px; + /* Avoid anti-aliasing seams in HiDPI */ + image-rendering: crisp-edges; + } + + #generalTab .radio-icon { + background-position-x: 0; + } + + #mediaTab .radio-icon { + background-position-x: -32px; + } + + #permTab .radio-icon { + background-position-x: -96px; + } + + #securityTab .radio-icon { + background-position-x: -128px; + } +} + +@media (-moz-platform: linux) { + #viewGroup > radio { + color: FieldText; + } + + #viewGroup > radio[selected="true"] { + background-color: SelectedItem; + color: SelectedItemText; + } +} + +@media (-moz-platform: windows) { + #viewGroup { + padding-inline-start: 10px; + } + + #viewGroup > radio:hover { + background-color: #E0E8F6; + color: black; + } + + #viewGroup > radio[selected="true"] { + background-color: #C1D2EE; + color: black; + } + + #viewGroup > radio:is(:hover, [selected="true"]) .radio-icon { + background-position-y: -32px; + } +} + +@media (-moz-platform: macos) { + #viewGroup { + margin: 4px 0 9px; + } + + #viewGroup > radio, + #viewGroup > toolbarbutton { + flex-direction: column; + align-items: center; + appearance: auto; + -moz-default-appearance: toolbarbutton; + font: menu; + margin: 0; + padding: 0 6px; + height: 22px; + } + + @media (-moz-mac-big-sur-theme: 0) { + #viewGroup > radio[selected=true], + #viewGroup > toolbarbutton[checked=true] { + color: #FFF !important; + text-shadow: rgba(0, 0, 0, 0.4) 0 1px; + } + } +} + +/* Misc */ +tree { + margin: .5em; +} + +html|input { + background: transparent; + border: none; + padding: 0; +} + +html|input.header { + margin-inline-start: 0; +} + +#imagecontainerbox { + margin: .5em; + background: white; + overflow: auto; + border: 1px solid ThreeDLightShadow; +} + +html|input:disabled { + font-style: italic; +} + +@media (-moz-platform: macos) { + .help-button { + appearance: auto; + -moz-default-appearance: -moz-mac-help-button; + } +} + +/* General Tab */ + +@media (-moz-platform: linux) { + #generalPanel > #titletext { + margin-inline-start: 5px; + } +} + +#securityBox description { + margin-inline-start: 10px; +} + +#general-security-identity { + white-space: pre-wrap; + line-height: 2em; +} + +/* Media Tab */ +#imagetree { + min-height: 10em; + margin-block: 2px 0; +} + +#mediaSplitter { + background: none; + appearance: none; + border-style: none; +} + +@media not (-moz-platform: macos) { + #mediaSplitter { + height: .8em; + } +} + +#mediaTable { + margin-bottom: 2em; +} + +#mediaLabelColumn { + min-width: 10em; +} + +treechildren::-moz-tree-cell-text(broken) { + font-style: italic; + color: graytext; +} + +/* Permissions Tab */ + +#permList { + appearance: auto; + -moz-default-appearance: listbox; + margin: .5em; + overflow: auto; + color: FieldText; +} + +.permission { + padding: 6px 7px; + border-bottom: 1px dotted ThreeDShadow; +} + +.permissionLabel { + font-weight: bold; +} + +.permission:hover { + background-color: -moz-dialog; + color: -moz-DialogText; +} + +/* Security Tab */ + +#securityPanel table { + margin-bottom: 1em; +} diff --git a/browser/themes/shared/panic-panel/header.png b/browser/themes/shared/panic-panel/header.png new file mode 100644 index 0000000000..1646804e43 Binary files /dev/null and b/browser/themes/shared/panic-panel/header.png differ diff --git a/browser/themes/shared/panic-panel/header@2x.png b/browser/themes/shared/panic-panel/header@2x.png new file mode 100644 index 0000000000..dd1d07087e Binary files /dev/null and b/browser/themes/shared/panic-panel/header@2x.png differ diff --git a/browser/themes/shared/panic-panel/icons.png b/browser/themes/shared/panic-panel/icons.png new file mode 100644 index 0000000000..436ce8e7d6 Binary files /dev/null and b/browser/themes/shared/panic-panel/icons.png differ diff --git a/browser/themes/shared/panic-panel/icons@2x.png b/browser/themes/shared/panic-panel/icons@2x.png new file mode 100644 index 0000000000..99b33184dd Binary files /dev/null and b/browser/themes/shared/panic-panel/icons@2x.png differ diff --git a/browser/themes/shared/places/bookmarksMenu.svg b/browser/themes/shared/places/bookmarksMenu.svg new file mode 100644 index 0000000000..97154aadb6 --- /dev/null +++ b/browser/themes/shared/places/bookmarksMenu.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/shared/places/bookmarksToolbar.svg b/browser/themes/shared/places/bookmarksToolbar.svg new file mode 100644 index 0000000000..2b031295be --- /dev/null +++ b/browser/themes/shared/places/bookmarksToolbar.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/places/editBookmark.css b/browser/themes/shared/places/editBookmark.css new file mode 100644 index 0000000000..4c00982e62 --- /dev/null +++ b/browser/themes/shared/places/editBookmark.css @@ -0,0 +1,160 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +#editBookmarkPanelContent { + display: grid; + grid-template-columns: auto; +} + +#editBMPanel_folderTree, +#editBMPanel_tagsSelector { + margin: 0; + height: 12.5em; + flex: 1 auto; + border: 1px solid ThreeDShadow; + border-radius: 4px; +} + +#editBMPanel_folderTree { + appearance: none; + overflow: hidden; +} + +#editBMPanel_folderMenuList::part(icon) { + width: 16px; + height: 16px; +} + +@media (-moz-platform: macos) { + /* FIXME(emilio): Is this rule needed at all? */ + .folder-icon > .menu-iconic-left > .menu-iconic-icon { + width: 16px; + height: 16px; + } +} + +.folder-icon > .menu-iconic-left { + display: flex; +} + +.folder-icon { + list-style-image: url("chrome://global/skin/icons/folder.svg") !important; + -moz-context-properties: fill; + fill: currentColor; +} + +#editBMPanel_tagsSelector > richlistitem > image { + appearance: auto; + -moz-default-appearance: checkbox; + align-items: center; + margin: 0 2px; + min-width: 13px; + min-height: 13px; +} + +@media (-moz-platform: windows) { + #editBMPanel_tagsSelector > richlistitem > image { + border: 1px solid -moz-DialogText; + background: Field no-repeat 50% 50%; + } +} + +#bookmarkpropertiesdialog #editBMPanel_tagsSelector { + border-color: var(--in-content-border-color); + padding: 12px; +} + +/* Reset default margins for tags so we can apply custom ones */ +#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem > image, +#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem > label { + margin: 0; +} + +/* Set spacing between tags */ +#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem:not(:last-child) { + margin-bottom: 8px; +} + +#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem > image { + margin-inline-end: 8px; +} + +/* Bookmark panel dropdown icons */ + +#editBMPanel_folderMenuList[selectedGuid="toolbar_____"], +#editBMPanel_toolbarFolderItem { + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important; +} + +#editBMPanel_folderMenuList[selectedGuid="menu________"], +#editBMPanel_bmRootItem { + list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important; +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent > label:not(.editBMPanel_nameRow), +#bookmarkpropertiesdialog #editBookmarkPanelContent > #editBMPanel_folderTreeRow, +#bookmarkpropertiesdialog #editBookmarkPanelContent > #editBMPanel_tagsSelectorRow { + padding-block: var(--editbookmarkdialog-padding) 0; +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent label[control] { + margin-inline-start: 0; + margin-block: 0 4px; +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent { + padding: calc(var(--editbookmarkdialog-padding) / 2) var(--editbookmarkdialog-padding) var(--editbookmarkdialog-padding); +} + +#bookmarkpropertiesdialog .expander-up, +#bookmarkpropertiesdialog .expander-down { + appearance: none; + -moz-context-properties: fill; + fill: currentColor; + margin: 0; + min-width: 32px; + min-height: 32px; + padding: 0; +} + +#bookmarkpropertiesdialog .expander-up { + list-style-image: url("chrome://global/skin/icons/arrow-up.svg"); +} + +#bookmarkpropertiesdialog .expander-down { + list-style-image: url("chrome://global/skin/icons/arrow-down.svg"); +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent > input, +#bookmarkpropertiesdialog #editBookmarkPanelContent > hbox > input, +#bookmarkpropertiesdialog #editBMPanel_folderMenuList { + margin: 0; +} + +/* dialog-specific #editBookmarkPanel styles */ + +#bookmarkpropertiesdialog #editBookmarkPanelContent { + padding-inline: 0; + margin-inline: 4px; +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent, +#bookmarkpropertiesdialog vbox#editBMPanel_nameRow { + padding-top: 0; +} + +#bookmarkpropertiesdialog #editBookmarkPanelContent #editBMPanel_tagsField, +#bookmarkpropertiesdialog #editBookmarkPanelContent #editBMPanel_folderMenuList { + margin-inline-end: 16px; +} + +#bookmarkpropertiesdialog .caption-label { + margin: 4px; + color: var(--text-color-deemphasized); +} + +.caption-label { + font-size: 0.9em; + margin: 2px 4px; +} diff --git a/browser/themes/shared/places/editBookmarkPanel.css b/browser/themes/shared/places/editBookmarkPanel.css new file mode 100644 index 0000000000..64840f1cf1 --- /dev/null +++ b/browser/themes/shared/places/editBookmarkPanel.css @@ -0,0 +1,156 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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"); + +#editBookmarkPanel > .panel-subview-body { + padding-bottom: 0; +} + +#editBMPanel_newFolderButton { + appearance: none; + margin: 0; + border: 0; + border-radius: 4px; + background-color: var(--button-bgcolor); + color: var(--button-color, inherit); + font-weight: 600; + min-width: 0; + padding: 8px 16px; + + /* This button is deeper in the visual hierarchy than others (notably the + buttons at the bottom of the panel), so it should be slightly smaller. */ + font-size: 90%; +} + +#editBMPanel_newFolderButton:hover { + background-color: var(--button-hover-bgcolor); +} + +#editBMPanel_newFolderButton:hover:active { + background-color: var(--button-active-bgcolor); +} + +#editBookmarkPanel > #editBookmarkHeaderSeparator { + margin-bottom: 0; + margin-inline: 16px; +} + +#editBookmarkPanel { + font: caption; +} + +#editBookmarkPanelContent > label:not(.editBMPanel_nameRow) { + padding-top: var(--arrowpanel-padding); +} + +#editBookmarkPanelContent > #editBMPanel_folderTreeRow, +#editBookmarkPanelContent > #editBMPanel_folderTreeRow > #editBMPanel_newFolderBox, +#editBookmarkPanelContent > #editBMPanel_tagsSelectorRow { + padding-top: 4px; +} + +#editBookmarkPanelContent label[control] { + margin: 0; + margin-bottom: 4px; +} + +#editBookmarkPanel .caption-label { + display: none; +} + +#editBookmarkPanelContent { + padding: 0.8em var(--arrowpanel-padding) var(--arrowpanel-padding); +} + +#editBMPanel_selectionCount { + padding-top: 0.8em; +} + +#editBookmarkPanelBottomContent { + padding: 0 var(--arrowpanel-padding) calc(var(--arrowpanel-padding) / 2); +} + +#editBookmarkPanelBottomContent > checkbox { + margin-inline-start: 0; +} + +#editBookmarkPanel_showForNewBookmarks > .checkbox-label-box > .checkbox-label { + opacity: 0.7; +} + +#editBookmarkPanel .expander-up > .button-box > .button-text, +#editBookmarkPanel .expander-down > .button-box > .button-text { + display: none; +} + +#editBookmarkPanel .expander-up, +#editBookmarkPanel .expander-down { + appearance: none; /* override button.css */ + -moz-context-properties: fill; + fill: currentColor; + margin: 0; + margin-inline-start: 4px; + min-width: 32px; + min-height: 32px; + color: var(--button-color); + background-color: var(--button-bgcolor); + border-radius: 4px; +} + +#editBookmarkPanel .expander-up:hover, +#editBookmarkPanel .expander-down:hover { + background-color: var(--button-hover-bgcolor); +} + +#editBookmarkPanel .expander-up:hover:active, +#editBookmarkPanel .expander-down:hover:active { + /** + * We override the colour here because on macOS, buttons default to + * having :hover:active buttons have color -moz-buttonactivetext + */ + color: var(--button-color); + background-color: var(--button-active-bgcolor); +} + +#editBookmarkPanel .expander-up { + list-style-image: url("chrome://global/skin/icons/arrow-up.svg"); +} + +#editBookmarkPanel .expander-down { + list-style-image: url("chrome://global/skin/icons/arrow-down.svg"); +} + +#editBMPanel_folderMenuList { + margin: 0; +} + +#editBookmarkPanelContent > html|input, +#editBookmarkPanelContent > hbox > html|input { + appearance: none; + padding: 8px; + border-radius: 4px; + border: 1px solid var(--input-border-color, ThreeDShadow); + background-color: var(--input-bgcolor, Field); + color: var(--input-color, FieldText); + margin: 0; +} + +/* Focus outlines */ + +#editBookmarkPanel .expander-up:focus-visible, +#editBookmarkPanel .expander-down:focus-visible, +#editBMPanel_newFolderButton:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +#editBMPanel_folderTree:focus-visible, +#editBMPanel_tagsSelector:focus-visible, +#editBookmarkPanelContent > html|input:focus-visible, +#editBookmarkPanelContent > hbox > html|input:focus-visible { + border-color: transparent; + outline: var(--focus-outline); + outline-offset: -1px; +} diff --git a/browser/themes/shared/places/folder-smart.svg b/browser/themes/shared/places/folder-smart.svg new file mode 100644 index 0000000000..c38c606efc --- /dev/null +++ b/browser/themes/shared/places/folder-smart.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/places/organizer-shared.css b/browser/themes/shared/places/organizer-shared.css new file mode 100644 index 0000000000..f0563e695c --- /dev/null +++ b/browser/themes/shared/places/organizer-shared.css @@ -0,0 +1,19 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +#contentView { + flex: 4 4; +} + +#contentView, +#placesView, +#placesViewsBox { + min-width: 0; + min-height: 0; +} + +#placesViewsBox { + min-height: 5em; + overflow: clip; +} diff --git a/browser/themes/shared/places/sidebar.css b/browser/themes/shared/places/sidebar.css new file mode 100644 index 0000000000..d8bb12e241 --- /dev/null +++ b/browser/themes/shared/places/sidebar.css @@ -0,0 +1,210 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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); + color-scheme: light; + + scrollbar-color: + light-dark( + rgba(204,204,204,.5), + rgba(249,249,250,.4) + ) + light-dark( + rgba(230,230,235,.5), + rgba(20,20,25,.3) + ); +} + +.sidebar-panel[lwt-sidebar="dark"] { + color-scheme: dark; +} + +.sidebar-panel[lwt-sidebar] .sidebar-placesTreechildren::-moz-tree-row(selected) { + background-color: light-dark(hsla(0,0%,80%,.3), rgba(249,249,250,.1)); +} + +.sidebar-panel[lwt-sidebar="dark"] .sidebar-placesTreechildren { + &::-moz-tree-image(selected), + &::-moz-tree-twisty(selected), + &::-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); + } + + &::-moz-tree-image(selected, focus), + &::-moz-tree-twisty(selected, focus), + &::-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; + display: flex; + content: url("chrome://global/skin/icons/arrow-down-12.svg"); + -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 not (prefers-contrast) { + .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-placesTreechildren::-moz-tree-cell-text { + margin-inline-end: 6px; + } + + #sidebar-search-container { + /* Native searchbar styling already adds 4px margin on Mac, so + * adding 4px padding results in 8px of total whitespace. */ + padding: 4px; + } + + #viewButton { + margin: 4px 0; + margin-inline-end: 4px; + /* Default font size is 11px on mac, so this is 12px */ + font-size: 1.0909rem; + } +} diff --git a/browser/themes/shared/places/tag.svg b/browser/themes/shared/places/tag.svg new file mode 100644 index 0000000000..3be1d0e1be --- /dev/null +++ b/browser/themes/shared/places/tag.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/browser/themes/shared/places/tree-icons.css b/browser/themes/shared/places/tree-icons.css new file mode 100644 index 0000000000..38df3ea4d1 --- /dev/null +++ b/browser/themes/shared/places/tree-icons.css @@ -0,0 +1,95 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +treechildren::-moz-tree-image { + -moz-context-properties: fill, fill-opacity; + fill-opacity: 0.7; +} + +treechildren::-moz-tree-image(title) { + list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); + padding-inline-end: 2px; + margin: 0 2px; + width: 16px; + height: 16px; +} + +treechildren::-moz-tree-image(title, container), +treechildren::-moz-tree-image(title, open) { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +treechildren::-moz-tree-image(title, separator) { + list-style-image: none; + width: 0 !important; + height: 0 !important; + margin: 0; +} + +treechildren::-moz-tree-image(container, queryFolder_toolbar_____) { + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg"); +} + +treechildren::-moz-tree-image(container, queryFolder_menu________) { + list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg"); +} + +/* query-nodes should be styled even if they're not expandable */ +treechildren::-moz-tree-image(query) { + list-style-image: url("chrome://browser/skin/places/folder-smart.svg"); +} + +treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) { + list-style-image: url("chrome://browser/skin/bookmark.svg"); +} + +treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) { + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} + +treechildren::-moz-tree-image(title, query, tagContainer), +treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) { + list-style-image: url("chrome://browser/skin/places/tag.svg"); +} + +/* calendar icon for folders grouping items by date */ +treechildren::-moz-tree-image(title, query, dayContainer) { + list-style-image: url("chrome://browser/skin/history.svg"); +} + +treechildren::-moz-tree-image(title, query, hostContainer) { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +treechildren::-moz-tree-image(query, OrganizerQuery_history____v) { + list-style-image: url("chrome://browser/skin/history.svg"); +} + +/* We want some queries to look like ordinary folders. This must come + after the (title, query) selector, or it would get overridden. */ +treechildren::-moz-tree-image(title, query, folder) { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +treechildren::-moz-tree-cell-text(title, separator) { + color: ThreeDShadow; + margin: 0 5px; +} + +treechildren::-moz-tree-cell-text(title, separator, selected, focus) { + color: SelectedItemText; +} + +/* Remove tiny spacing in separators appearing after the twisty column */ +treechildren::-moz-tree-twisty(title, separator) { + padding: 0; +} + +treechildren::-moz-tree-image(cutting) { + opacity: 0.5; +} + +treechildren::-moz-tree-cell-text(cutting) { + opacity: 0.7; +} diff --git a/browser/themes/shared/preferences/android-menu.svg b/browser/themes/shared/preferences/android-menu.svg new file mode 100644 index 0000000000..1084f264a8 --- /dev/null +++ b/browser/themes/shared/preferences/android-menu.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/preferences/category-general.svg b/browser/themes/shared/preferences/category-general.svg new file mode 100644 index 0000000000..952164e863 --- /dev/null +++ b/browser/themes/shared/preferences/category-general.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/preferences/category-privacy-security.svg b/browser/themes/shared/preferences/category-privacy-security.svg new file mode 100644 index 0000000000..deecf8702f --- /dev/null +++ b/browser/themes/shared/preferences/category-privacy-security.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/preferences/category-search.svg b/browser/themes/shared/preferences/category-search.svg new file mode 100644 index 0000000000..942846b673 --- /dev/null +++ b/browser/themes/shared/preferences/category-search.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/preferences/category-sync.svg b/browser/themes/shared/preferences/category-sync.svg new file mode 100644 index 0000000000..0af29ec1e1 --- /dev/null +++ b/browser/themes/shared/preferences/category-sync.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/browser/themes/shared/preferences/containers-dialog.css b/browser/themes/shared/preferences/containers-dialog.css new file mode 100644 index 0000000000..36e8dfd8f2 --- /dev/null +++ b/browser/themes/shared/preferences/containers-dialog.css @@ -0,0 +1,50 @@ +/* Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://browser/content/usercontext/usercontext.css"); + +#name { + flex: 1; +} + +.radio-buttons { + flex-direction: row; + margin-inline-start: 0.35rem; +} + +.radio-buttons > radio { + user-select: none; + outline: 2px solid transparent; + outline-offset: 4px; + min-block-size: 24px; + min-inline-size: 24px; + border-radius: 50%; + padding: 2px; + margin: 9px; +} + +.icon-buttons > radio > .userContext-icon { + fill: var(--in-content-text-color); +} + +.radio-buttons > radio { + padding-inline-start: 2px; +} + +radio > .userContext-icon { + inline-size: 22px; + block-size: 22px; +} + +.radio-buttons > radio[selected=true] { + outline-color: var(--in-content-text-color); +} + +.radio-buttons > radio[focused=true] { + outline-color: var(--in-content-accent-color); +} + +.radio-buttons > radio:hover:active { + outline-color: var(--in-content-accent-color-active); +} diff --git a/browser/themes/shared/preferences/containers.css b/browser/themes/shared/preferences/containers.css new file mode 100644 index 0000000000..99eec279f8 --- /dev/null +++ b/browser/themes/shared/preferences/containers.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"); + +.container-header-links { + margin-block-end: 15px; +} + +[data-identity-icon] { + margin: 0; + margin-inline-end: 16px; +} + +#containersView { + border: 0; + background: transparent; + margin-block-end: 8px; +} + +#containersView richlistitem { + padding-block: 4px; + border-block-end: 1px solid var(--in-content-border-color); +} + +#containersView richlistitem > .container-buttons { + margin-inline-end: 4px; +} + +/* Crop the label at the end using CSS. This isn't using XUL crop + * and a value attribute because those labels cannot be highlighted + * by the prefs' find-in-page feature. + */ +.userContext-label-inprefs { + display: flex; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.userContext-icon-inprefs { + margin-inline: 4px 10px; + width: 24px; + height: 24px; +} + +#containersView richlistitem:last-of-type { + border-block-end: 0; +} diff --git a/browser/themes/shared/preferences/dialog.css b/browser/themes/shared/preferences/dialog.css new file mode 100644 index 0000000000..92704439bc --- /dev/null +++ b/browser/themes/shared/preferences/dialog.css @@ -0,0 +1,42 @@ +/* - This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this file, + - You can obtain one at http://mozilla.org/MPL/2.0/. */ + +window, +dialog { + appearance: none; + background-color: var(--in-content-page-background); + color: var(--in-content-page-color); + margin: 0; + padding: 0; +} + +/* Add some padding around the contents of the dialog */ +dialog { + padding: 6px; +} + +.contentPane, +dialog::part(content-box) { + flex: 1; + /* This allows the focus ring to display fully when scrolling is enabled. */ + padding: 4px; +} + +.contentPane.doScroll, +dialog.doScroll::part(content-box) { + overflow-y: auto; + contain: size; +} + +tree:not(#rejectsTree) { + min-height: 15em; +} + +.actionButtons { + margin: 3px 0 0; +} + +menulist label { + font-weight: unset; +} diff --git a/browser/themes/shared/preferences/fxaPairDevice.css b/browser/themes/shared/preferences/fxaPairDevice.css new file mode 100644 index 0000000000..51183b84c7 --- /dev/null +++ b/browser/themes/shared/preferences/fxaPairDevice.css @@ -0,0 +1,122 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +#fxaPairDeviceDialog { + padding-bottom: 2em; +} + +#pairTitle { + font-size: 2.1rem; + font-weight: bold; + padding-top: 12px; + text-align: center; +} + +.pairHeading { + font-size: 1.08em; +} + +.menu-icon { + width: 20px; + height: 20px; + vertical-align: middle; + -moz-context-properties: fill; + fill: currentColor; +} + +#qrCodeDisplay { + width: 450px; + margin: auto; +} + +#qrWrapper { + position: relative; + width: 200px; + height: 200px; + margin: auto; + margin-top: 28px; +} + +#qrContainer { + height: 200px; + width: 200px; + background-size: contain; + image-rendering: -moz-crisp-edges; + transition: filter 250ms cubic-bezier(.07,.95,0,1); +} + +#qrWrapper:not([pairing-status="ready"]) #qrContainer { + opacity: 0.05; + filter: blur(3px); +} + +#qrWrapper:not([pairing-status="loading"]) #qrSpinner { + opacity: 0; +} + +#qrSpinner { + display: block; + position: absolute; + height: 250px; + width: 250px; +} + +#qrSpinner::before { + background-image: url("chrome://browser/skin/fxa/fxa-spinner.svg"); + animation: 0.9s spin infinite linear; + background-size: 36px; + background-repeat: no-repeat; + background-position: center; + display: block; + position: absolute; + height: 200px; + width: 200px; + content: ""; + transition: opacity 250ms cubic-bezier(.07,.95,0,1); + will-change: transform; + margin-inline: auto; +} + +#qrWrapper:not([pairing-status="error"]) #qrError { + display: none; +} + +#qrError { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 200px; /* Same as #qrContainer */ + position: absolute; + inset: 0; + margin-inline: auto; + transition: opacity 250ms cubic-bezier(.07,.95,0,1); + cursor: pointer; +} + +.qr-error-text { + text-align: center; + user-select: none; + display: block; + color: #2484C6; + cursor: pointer; +} + +#refresh-qr { + width: 36px; + height: 36px; + background-image: url("chrome://global/skin/icons/reload.svg"); + background-size: contain; + -moz-context-properties: fill; + fill: #2484C6; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/browser/themes/shared/preferences/ios-menu.svg b/browser/themes/shared/preferences/ios-menu.svg new file mode 100644 index 0000000000..15183a814d --- /dev/null +++ b/browser/themes/shared/preferences/ios-menu.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/shared/preferences/monitor-logo.svg b/browser/themes/shared/preferences/monitor-logo.svg new file mode 100644 index 0000000000..090e957395 --- /dev/null +++ b/browser/themes/shared/preferences/monitor-logo.svg @@ -0,0 +1,4 @@ + + 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/preferences.css b/browser/themes/shared/preferences/preferences.css new file mode 100644 index 0000000000..2461212bba --- /dev/null +++ b/browser/themes/shared/preferences/preferences.css @@ -0,0 +1,1528 @@ +/* - This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this file, + - You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html "http://www.w3.org/1999/xhtml"; + +/* Global rules */ +:root { + user-select: text; +} + +#preferences-root { + text-rendering: optimizeLegibility; +} + +@media not print { + #preferences-root, + #preferences-body { + height: 100%; + overflow: hidden; + } +} + +#preferences-root, +#preferences-body { + margin: 0; + padding: 0; + width: 100%; +} + +#preferences-body { + vertical-align: top; /* See bug 1606130 */ + display: flex; + flex-direction: column; + + --main-pane-width: 664px; +} + +/* + The stack has some very tall content but it shouldn't be taller than the + viewport (and we know the tall content will still be accessible via scrollbars + regardless if the stack has a shorter height). So we use min-height: 0 to allow + the stack to be smaller than its content height so it can fit the viewport size. +*/ +#preferences-stack { + min-height: 0; +} + +.main-content { + padding-top: 0; + /* the 32px min-height, plus 20+30px margin below, plus some leeway: */ + scroll-padding-top: 90px; + contain: inline-size; +} + +.pane-container { + /* A workaround to keep the container always float on the `top: 0` (Bug 1377009) */ + display: block; + width: min(100%, var(--main-pane-width)); + min-width: min-content; +} + +#mainPrefPane { + width: 100%; + padding: 0; +} + +groupbox[data-category] { + margin: 0 0 32px; +} + +html|h1 { + font-size: var(--font-size-xlarge); + margin: 0 0 var(--space-small); +} + +html|h2 { + font-size: var(--font-size-large); + margin: var(--space-small) 0 var(--space-xxsmall) 0; +} + +description.indent, +.indent:not(#browserPrivateEngineSelection) > description { + color: var(--text-color-deemphasized); + + /* Ensures margin on checkboxes, radios, and description don't create a big gap between the input and indented description */ + margin-top: calc(var(--space-xsmall) * -1); +} + +button, +treecol, +menulist, +html|select { + /* override the root rule */ + user-select: none; +} + +/* Buttons get a default min-width in XUL. When they also have flex, they will + * be large enough anyway, and we don't want them to become smaller than their inner + * text which would then overflow the button. Set min-width back to auto for that: + */ +button[flex] { + min-width: auto; +} + +description, +label { + margin: var(--space-xxsmall) 0; +} + +label { + margin: var(--space-xxsmall) 0; + + &.tail-with-learn-more + a { + margin-block: var(--space-xxsmall); + margin-inline: var(--space-small) 0; + } +} + +.description-deemphasized { + color: var(--text-color-deemphasized); +} + +.tip-caption { + font-size: .9em; + color: var(--text-color-deemphasized); +} + +menulist::part(label), +menuitem > label, +button > hbox > label { + line-height: unset; +} + +.indent { + margin-inline-start: calc(var(--checkbox-size) + var(--checkbox-margin-inline)) !important; +} + +checkbox, +radio { + margin: var(--space-small) 0; + + &.tail-with-learn-more + a { + margin-block: var(--space-small); + margin-inline: var(--space-small) 0; + } +} + +/* Add a bit of space to the end of descriptions to + * leave margin with e.g. additional buttons on the side. */ +.description-with-side-element { + margin-inline-end: 10px !important; +} + +.learnMore { + margin-inline-start: 0; + font-weight: normal; + white-space: nowrap; +} + +.accessory-button { + min-width: 150px; + margin: 4px 0; +} + +.spotlight { + background-color: color-mix(in srgb, var(--in-content-accent-color) 15%, transparent); + outline: var(--in-content-accent-color) 1px dotted; + animation: fade-out 0.5s ease-out 2s forwards; + /* Show the border to spotlight the components in high-contrast mode. */ + border: 1px solid transparent; + border-radius: 2px; +} + +@keyframes fade-out { + 100% { + background-color: transparent; + outline-color: transparent; + } +} + +[data-subcategory] { + margin-inline: -4px; + padding-inline: 4px; +} + +.ac-site-icon { + display: flex; +} + +/* Subcategory title */ + +/** + * The first subcategory title for each category should not have margin-top. + */ + +.subcategory:not([hidden]) ~ .subcategory { + padding-top: var(--space-xlarge); + border-top: 1px solid var(--in-content-border-color); +} + +/* Category List */ + +#categories { + overflow: visible; + min-height: auto; + padding: 1px; /* Adding padding around richlistitem in order to make entire keyboard focusing outline visible */ +} + +#category-general > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/category-general.svg"); +} + +#category-home > .category-icon { + list-style-image: url("chrome://browser/skin/home.svg"); +} + +#category-search > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/category-search.svg"); +} + +#category-privacy > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/category-privacy-security.svg"); +} + +#category-sync > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/category-sync.svg"); +} + +#category-experimental > .category-icon { + list-style-image: url("chrome://global/skin/icons/experiments.svg"); +} + +#category-more-from-mozilla > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/mozilla-logo.svg"); +} + +/* All panes */ + +.info-icon, +.androidIcon, +.iOSIcon { + -moz-context-properties: fill; + fill: currentColor; +} + +/* General Pane */ + +.is-default > #isNotDefaultPane, +:not(.is-default) > #isDefaultPane { + visibility: hidden; +} + +#isDefaultLabel, +#isNotDefaultLabel { + font-weight: var(--font-weight-bold); +} + +/* stylelint-disable-next-line media-query-no-invalid */ +@media not (-moz-bool-pref: "browser.migrate.preferences-entrypoint.enabled") { + #dataMigrationGroup { + display: none; + } +} + +#dataMigration { + /* This should really be using baseline, but that doesn't work properly with + * the and XUL