From 5f8de423f190bbb79a62f804151bc24824fa32d8 Mon Sep 17 00:00:00 2001 From: "Matt A. Tobin" Date: Fri, 2 Feb 2018 04:16:08 -0500 Subject: Add m-esr52 at 52.6.0 --- browser/themes/shared/UITour.inc.css | 293 ++++ browser/themes/shared/aboutNetError.css | 169 ++ browser/themes/shared/aboutProviderDirectory.css | 30 + browser/themes/shared/aboutSessionRestore.css | 38 + browser/themes/shared/aboutSocialError.css | 40 + browser/themes/shared/aboutTabCrashed.css | 101 ++ browser/themes/shared/aboutWelcomeBack.css | 47 + .../themes/shared/addons/addon-install-anchor.svg | 13 + .../themes/shared/addons/addon-install-blocked.svg | 38 + .../themes/shared/addons/addon-install-confirm.svg | 19 + .../shared/addons/addon-install-downloading.svg | 38 + .../themes/shared/addons/addon-install-error.svg | 38 + .../shared/addons/addon-install-installed.svg | 38 + .../themes/shared/addons/addon-install-restart.svg | 46 + .../themes/shared/addons/addon-install-warning.svg | 38 + browser/themes/shared/autocomplete.inc.css | 65 + browser/themes/shared/blockedSite.css | 65 + browser/themes/shared/browser.inc | 13 + browser/themes/shared/content-contextmenu.svg | 18 + browser/themes/shared/contextmenu.inc.css | 51 + .../shared/controlcenter/arrow-subview-back.svg | 8 + .../themes/shared/controlcenter/arrow-subview.svg | 8 + .../shared/controlcenter/conn-not-secure.svg | 15 + browser/themes/shared/controlcenter/connection.svg | 37 + .../themes/shared/controlcenter/mcb-disabled.svg | 34 + browser/themes/shared/controlcenter/panel.inc.css | 445 +++++ .../themes/shared/controlcenter/permissions.svg | 20 + .../shared/controlcenter/tracking-protection.svg | 43 + .../themes/shared/controlcenter/warning-gray.svg | 9 + .../themes/shared/controlcenter/warning-yellow.svg | 9 + browser/themes/shared/ctrlTab.inc.css | 63 + .../customizableui/customize-illustration-rtl.png | Bin 0 -> 7592 bytes .../customize-illustration-rtl@2x.png | Bin 0 -> 16521 bytes .../customizableui/customize-illustration.png | Bin 0 -> 7609 bytes .../customizableui/customize-illustration@2x.png | Bin 0 -> 16465 bytes .../shared/customizableui/customizeFavicon.ico | Bin 0 -> 1084 bytes .../shared/customizableui/customizeMode.inc.css | 461 +++++ .../shared/customizableui/customizeTip.inc.css | 77 + .../customizableui/info-icon-customizeTip.png | Bin 0 -> 286 bytes .../customizableui/info-icon-customizeTip@2x.png | Bin 0 -> 501 bytes .../customizableui/menuPanel-customizeFinish.png | Bin 0 -> 337 bytes .../menuPanel-customizeFinish@2x.png | Bin 0 -> 625 bytes .../themes/shared/customizableui/panelUI.inc.css | 1769 ++++++++++++++++++++ .../customizableui/panelarrow-customizeTip.png | Bin 0 -> 243 bytes .../customizableui/panelarrow-customizeTip@2x.png | Bin 0 -> 260 bytes .../subView-arrow-back-inverted-rtl.png | Bin 0 -> 190 bytes .../subView-arrow-back-inverted-rtl@2x.png | Bin 0 -> 465 bytes .../customizableui/subView-arrow-back-inverted.png | Bin 0 -> 307 bytes .../subView-arrow-back-inverted@2x.png | Bin 0 -> 667 bytes browser/themes/shared/customizableui/whimsy.png | Bin 0 -> 6639 bytes browser/themes/shared/customizableui/whimsy@2x.png | Bin 0 -> 18370 bytes browser/themes/shared/devedition.inc.css | 311 ++++ .../devedition/urlbar-history-dropmarker.svg | 22 + .../downloads/allDownloadsViewOverlay.inc.css | 131 ++ .../shared/downloads/contentAreaDownloadsView.css | 31 + .../themes/shared/downloads/download-blocked.svg | 17 + .../themes/shared/downloads/download-summary.svg | 11 + browser/themes/shared/downloads/downloads.inc.css | 372 ++++ .../shared/downloads/menubutton-dropmarker.svg | 8 + .../themes/shared/downloads/progressmeter.inc.css | 70 + browser/themes/shared/drm-icon.svg | 38 + browser/themes/shared/e10s-64@2x.png | Bin 0 -> 20737 bytes browser/themes/shared/error-pages.css | 81 + browser/themes/shared/favicon-search-16.svg | 10 + browser/themes/shared/filters.svg | 9 + browser/themes/shared/fullscreen/insecure.svg | 39 + browser/themes/shared/fullscreen/secure.svg | 26 + browser/themes/shared/fullscreen/warning.inc.css | 51 + browser/themes/shared/fxa/android.png | Bin 0 -> 468 bytes browser/themes/shared/fxa/android@2x.png | Bin 0 -> 719 bytes browser/themes/shared/fxa/default-avatar.svg | 8 + browser/themes/shared/fxa/ios.png | Bin 0 -> 711 bytes browser/themes/shared/fxa/ios@2x.png | Bin 0 -> 1156 bytes browser/themes/shared/fxa/logo.png | Bin 0 -> 1728 bytes browser/themes/shared/fxa/logo@2x.png | Bin 0 -> 3190 bytes browser/themes/shared/fxa/sync-illustration.png | Bin 0 -> 2420 bytes browser/themes/shared/fxa/sync-illustration.svg | 16 + browser/themes/shared/fxa/sync-illustration@2x.png | Bin 0 -> 6016 bytes browser/themes/shared/heartbeat-icon.svg | 13 + browser/themes/shared/heartbeat-star-lit.svg | 7 + browser/themes/shared/heartbeat-star-off.svg | 7 + browser/themes/shared/icon-colors.inc.svg | 39 + browser/themes/shared/icon.png | Bin 0 -> 2084 bytes .../connection-mixed-active-loaded.svg | 54 + .../connection-mixed-passive-loaded.svg | 52 + .../shared/identity-block/connection-secure.svg | 27 + browser/themes/shared/identity-block/icons.inc.css | 62 + .../shared/identity-block/identity-block.inc.css | 163 ++ .../themes/shared/identity-block/identity-icon.svg | 39 + .../identity-block/tracking-protection-16.svg | 59 + .../themes/shared/incontent-icons/cert-error.svg | 42 + .../shared/incontent-icons/icon-search-64.svg | 12 + .../shared/incontent-icons/session-restore.svg | 13 + .../themes/shared/incontent-icons/tab-crashed.svg | 13 + .../themes/shared/incontent-icons/welcome-back.svg | 13 + browser/themes/shared/incontent-icons/wifi.svg | 30 + .../themes/shared/incontentprefs/containers.css | 32 + .../themes/shared/incontentprefs/dialog.inc.css | 68 + browser/themes/shared/incontentprefs/favicon.ico | Bin 0 -> 933 bytes browser/themes/shared/incontentprefs/icons.svg | 63 + .../shared/incontentprefs/preferences.inc.css | 591 +++++++ browser/themes/shared/incontentprefs/search.css | 49 + browser/themes/shared/info.svg | 9 + browser/themes/shared/jar.inc.mn | 154 ++ browser/themes/shared/menuPanel-small.svg | 16 + browser/themes/shared/menuPanel.svg | 42 + browser/themes/shared/menupanel.inc.css | 183 ++ browser/themes/shared/newtab/close.png | Bin 0 -> 931 bytes browser/themes/shared/newtab/controls.svg | 85 + browser/themes/shared/newtab/newTab.inc.css | 344 ++++ browser/themes/shared/newtab/whimsycorn.png | Bin 0 -> 3875 bytes browser/themes/shared/notification-icons.inc.css | 318 ++++ browser/themes/shared/notification-icons.svg | 104 ++ browser/themes/shared/panel-icons.svg | 18 + browser/themes/shared/panic-panel/header-small.png | Bin 0 -> 1333 bytes .../themes/shared/panic-panel/header-small@2x.png | Bin 0 -> 2966 bytes browser/themes/shared/panic-panel/header.png | Bin 0 -> 1952 bytes browser/themes/shared/panic-panel/header@2x.png | Bin 0 -> 4369 bytes browser/themes/shared/panic-panel/icons.png | Bin 0 -> 679 bytes browser/themes/shared/panic-panel/icons@2x.png | Bin 0 -> 1388 bytes browser/themes/shared/plugin-doorhanger.inc.css | 65 + browser/themes/shared/preferences/containers.css | 53 + .../privatebrowsing/aboutPrivateBrowsing.css | 227 +++ .../themes/shared/privatebrowsing/attention.png | Bin 0 -> 602 bytes .../themes/shared/privatebrowsing/attention@2x.png | Bin 0 -> 902 bytes browser/themes/shared/privatebrowsing/check.png | Bin 0 -> 338 bytes browser/themes/shared/privatebrowsing/check.svg | 8 + browser/themes/shared/privatebrowsing/check@2x.png | Bin 0 -> 370 bytes browser/themes/shared/privatebrowsing/favicon.svg | 11 + .../shared/privatebrowsing/private-browsing.svg | 12 + .../themes/shared/privatebrowsing/shield-page.png | Bin 0 -> 4257 bytes .../shared/privatebrowsing/shield-page@2x.png | Bin 0 -> 9367 bytes .../privatebrowsing/tracking-protection-off.svg | 15 + .../shared/privatebrowsing/tracking-protection.svg | 12 + browser/themes/shared/reader/reader-mode-16.png | Bin 0 -> 502 bytes browser/themes/shared/reader/reader-mode-16@2x.png | Bin 0 -> 1063 bytes browser/themes/shared/reader/reader-tour.png | Bin 0 -> 2672 bytes browser/themes/shared/reader/reader-tour@2x.png | Bin 0 -> 6426 bytes browser/themes/shared/reader/readerMode.svg | 29 + browser/themes/shared/search/badge-add-engine.png | Bin 0 -> 425 bytes .../themes/shared/search/badge-add-engine@2x.png | Bin 0 -> 888 bytes browser/themes/shared/search/gear.svg | 7 + browser/themes/shared/search/history-icon.svg | 22 + browser/themes/shared/search/search-arrow-go.svg | 24 + .../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.png | Bin 0 -> 1000 bytes .../search/search-indicator-badge-add@2x.png | Bin 0 -> 2263 bytes .../search/search-indicator-magnifying-glass.svg | 7 + browser/themes/shared/search/search-indicator.png | Bin 0 -> 344 bytes .../themes/shared/search/search-indicator@2x.png | Bin 0 -> 694 bytes browser/themes/shared/searchReset.css | 22 + browser/themes/shared/social/gear_clicked.png | Bin 0 -> 1262 bytes browser/themes/shared/social/gear_default.png | Bin 0 -> 1271 bytes browser/themes/shared/social/social.inc.css | 23 + browser/themes/shared/sync-desktopIcon.svg | 22 + browser/themes/shared/sync-mobileIcon.svg | 22 + browser/themes/shared/syncedtabs/sidebar.inc.css | 234 +++ browser/themes/shared/tab-selected.svg | 36 + 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/pendingpaint.png | Bin 0 -> 10133 bytes .../themes/shared/tabbrowser/tab-audio-small.svg | 58 + browser/themes/shared/tabbrowser/tab-audio.svg | 18 + .../shared/tabbrowser/tab-overflow-indicator.png | Bin 0 -> 578 bytes browser/themes/shared/tabs.inc.css | 566 +++++++ browser/themes/shared/theme-switcher-icon.png | Bin 0 -> 2084 bytes browser/themes/shared/theme-switcher-icon@2x.png | Bin 0 -> 5595 bytes .../themes/shared/toolbarbutton-dropdown-arrow.png | Bin 0 -> 91 bytes browser/themes/shared/toolbarbuttons.inc.css | 347 ++++ browser/themes/shared/translation/infobar.inc.css | 95 ++ .../themes/shared/translation/translating-16.png | Bin 0 -> 21270 bytes .../shared/translation/translating-16@2x.png | Bin 0 -> 29889 bytes .../themes/shared/translation/translation-16.png | Bin 0 -> 889 bytes .../shared/translation/translation-16@2x.png | Bin 0 -> 2076 bytes browser/themes/shared/undoCloseTab.png | Bin 0 -> 1606 bytes browser/themes/shared/undoCloseTab@2x.png | Bin 0 -> 2413 bytes browser/themes/shared/update-badge-failed.svg | 6 + browser/themes/shared/update-badge.svg | 6 + browser/themes/shared/urlbar-star.svg | 20 + browser/themes/shared/urlbar-tab.svg | 21 + .../urlbarSearchSuggestionsNotification.inc.css | 54 + browser/themes/shared/warning-white.svg | 6 + browser/themes/shared/warning.svg | 7 + browser/themes/shared/webrtc/camera-white-16.png | Bin 0 -> 3781 bytes .../themes/shared/webrtc/camera-white-16@2x.png | Bin 0 -> 3887 bytes .../themes/shared/webrtc/microphone-white-16.png | Bin 0 -> 3794 bytes .../shared/webrtc/microphone-white-16@2x.png | Bin 0 -> 3978 bytes browser/themes/shared/webrtc/screen-white-16.png | Bin 0 -> 3769 bytes .../themes/shared/webrtc/screen-white-16@2x.png | Bin 0 -> 3864 bytes 191 files changed, 10237 insertions(+) create mode 100644 browser/themes/shared/UITour.inc.css create mode 100644 browser/themes/shared/aboutNetError.css create mode 100644 browser/themes/shared/aboutProviderDirectory.css create mode 100644 browser/themes/shared/aboutSessionRestore.css create mode 100644 browser/themes/shared/aboutSocialError.css create mode 100644 browser/themes/shared/aboutTabCrashed.css create mode 100644 browser/themes/shared/aboutWelcomeBack.css create mode 100644 browser/themes/shared/addons/addon-install-anchor.svg create mode 100644 browser/themes/shared/addons/addon-install-blocked.svg create mode 100644 browser/themes/shared/addons/addon-install-confirm.svg create mode 100644 browser/themes/shared/addons/addon-install-downloading.svg create mode 100644 browser/themes/shared/addons/addon-install-error.svg create mode 100644 browser/themes/shared/addons/addon-install-installed.svg create mode 100644 browser/themes/shared/addons/addon-install-restart.svg create mode 100644 browser/themes/shared/addons/addon-install-warning.svg create mode 100644 browser/themes/shared/autocomplete.inc.css create mode 100644 browser/themes/shared/blockedSite.css create mode 100644 browser/themes/shared/browser.inc create mode 100644 browser/themes/shared/content-contextmenu.svg create mode 100644 browser/themes/shared/contextmenu.inc.css create mode 100644 browser/themes/shared/controlcenter/arrow-subview-back.svg create mode 100644 browser/themes/shared/controlcenter/arrow-subview.svg create mode 100644 browser/themes/shared/controlcenter/conn-not-secure.svg create mode 100644 browser/themes/shared/controlcenter/connection.svg create mode 100644 browser/themes/shared/controlcenter/mcb-disabled.svg create mode 100644 browser/themes/shared/controlcenter/panel.inc.css create mode 100644 browser/themes/shared/controlcenter/permissions.svg create mode 100644 browser/themes/shared/controlcenter/tracking-protection.svg create mode 100644 browser/themes/shared/controlcenter/warning-gray.svg create mode 100644 browser/themes/shared/controlcenter/warning-yellow.svg create mode 100644 browser/themes/shared/ctrlTab.inc.css create mode 100644 browser/themes/shared/customizableui/customize-illustration-rtl.png create mode 100644 browser/themes/shared/customizableui/customize-illustration-rtl@2x.png create mode 100644 browser/themes/shared/customizableui/customize-illustration.png create mode 100644 browser/themes/shared/customizableui/customize-illustration@2x.png create mode 100644 browser/themes/shared/customizableui/customizeFavicon.ico create mode 100644 browser/themes/shared/customizableui/customizeMode.inc.css create mode 100644 browser/themes/shared/customizableui/customizeTip.inc.css create mode 100644 browser/themes/shared/customizableui/info-icon-customizeTip.png create mode 100644 browser/themes/shared/customizableui/info-icon-customizeTip@2x.png create mode 100644 browser/themes/shared/customizableui/menuPanel-customizeFinish.png create mode 100644 browser/themes/shared/customizableui/menuPanel-customizeFinish@2x.png create mode 100644 browser/themes/shared/customizableui/panelUI.inc.css create mode 100644 browser/themes/shared/customizableui/panelarrow-customizeTip.png create mode 100644 browser/themes/shared/customizableui/panelarrow-customizeTip@2x.png create mode 100644 browser/themes/shared/customizableui/subView-arrow-back-inverted-rtl.png create mode 100644 browser/themes/shared/customizableui/subView-arrow-back-inverted-rtl@2x.png create mode 100644 browser/themes/shared/customizableui/subView-arrow-back-inverted.png create mode 100644 browser/themes/shared/customizableui/subView-arrow-back-inverted@2x.png create mode 100644 browser/themes/shared/customizableui/whimsy.png create mode 100644 browser/themes/shared/customizableui/whimsy@2x.png create mode 100644 browser/themes/shared/devedition.inc.css create mode 100644 browser/themes/shared/devedition/urlbar-history-dropmarker.svg create mode 100644 browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css create mode 100644 browser/themes/shared/downloads/contentAreaDownloadsView.css create mode 100644 browser/themes/shared/downloads/download-blocked.svg 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/menubutton-dropmarker.svg create mode 100644 browser/themes/shared/downloads/progressmeter.inc.css create mode 100644 browser/themes/shared/drm-icon.svg create mode 100644 browser/themes/shared/e10s-64@2x.png create mode 100644 browser/themes/shared/error-pages.css create mode 100644 browser/themes/shared/favicon-search-16.svg create mode 100644 browser/themes/shared/filters.svg create mode 100644 browser/themes/shared/fullscreen/insecure.svg create mode 100644 browser/themes/shared/fullscreen/secure.svg create mode 100644 browser/themes/shared/fullscreen/warning.inc.css create mode 100644 browser/themes/shared/fxa/android.png create mode 100644 browser/themes/shared/fxa/android@2x.png create mode 100644 browser/themes/shared/fxa/default-avatar.svg create mode 100644 browser/themes/shared/fxa/ios.png create mode 100644 browser/themes/shared/fxa/ios@2x.png create mode 100644 browser/themes/shared/fxa/logo.png create mode 100644 browser/themes/shared/fxa/logo@2x.png create mode 100644 browser/themes/shared/fxa/sync-illustration.png create mode 100644 browser/themes/shared/fxa/sync-illustration.svg create mode 100644 browser/themes/shared/fxa/sync-illustration@2x.png create mode 100644 browser/themes/shared/heartbeat-icon.svg create mode 100644 browser/themes/shared/heartbeat-star-lit.svg create mode 100644 browser/themes/shared/heartbeat-star-off.svg create mode 100644 browser/themes/shared/icon-colors.inc.svg create mode 100644 browser/themes/shared/icon.png create mode 100644 browser/themes/shared/identity-block/connection-mixed-active-loaded.svg create mode 100644 browser/themes/shared/identity-block/connection-mixed-passive-loaded.svg create mode 100644 browser/themes/shared/identity-block/connection-secure.svg create mode 100644 browser/themes/shared/identity-block/icons.inc.css create mode 100644 browser/themes/shared/identity-block/identity-block.inc.css create mode 100755 browser/themes/shared/identity-block/identity-icon.svg create mode 100755 browser/themes/shared/identity-block/tracking-protection-16.svg create mode 100644 browser/themes/shared/incontent-icons/cert-error.svg create mode 100644 browser/themes/shared/incontent-icons/icon-search-64.svg create mode 100644 browser/themes/shared/incontent-icons/session-restore.svg create mode 100644 browser/themes/shared/incontent-icons/tab-crashed.svg create mode 100644 browser/themes/shared/incontent-icons/welcome-back.svg create mode 100644 browser/themes/shared/incontent-icons/wifi.svg create mode 100644 browser/themes/shared/incontentprefs/containers.css create mode 100644 browser/themes/shared/incontentprefs/dialog.inc.css create mode 100644 browser/themes/shared/incontentprefs/favicon.ico create mode 100644 browser/themes/shared/incontentprefs/icons.svg create mode 100644 browser/themes/shared/incontentprefs/preferences.inc.css create mode 100644 browser/themes/shared/incontentprefs/search.css create mode 100644 browser/themes/shared/info.svg create mode 100644 browser/themes/shared/jar.inc.mn create mode 100644 browser/themes/shared/menuPanel-small.svg create mode 100644 browser/themes/shared/menuPanel.svg create mode 100644 browser/themes/shared/menupanel.inc.css create mode 100644 browser/themes/shared/newtab/close.png create mode 100644 browser/themes/shared/newtab/controls.svg create mode 100644 browser/themes/shared/newtab/newTab.inc.css create mode 100644 browser/themes/shared/newtab/whimsycorn.png create mode 100644 browser/themes/shared/notification-icons.inc.css create mode 100644 browser/themes/shared/notification-icons.svg create mode 100644 browser/themes/shared/panel-icons.svg create mode 100644 browser/themes/shared/panic-panel/header-small.png create mode 100644 browser/themes/shared/panic-panel/header-small@2x.png 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/plugin-doorhanger.inc.css create mode 100644 browser/themes/shared/preferences/containers.css create mode 100644 browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css create mode 100755 browser/themes/shared/privatebrowsing/attention.png create mode 100755 browser/themes/shared/privatebrowsing/attention@2x.png create mode 100755 browser/themes/shared/privatebrowsing/check.png create mode 100644 browser/themes/shared/privatebrowsing/check.svg create mode 100755 browser/themes/shared/privatebrowsing/check@2x.png create mode 100644 browser/themes/shared/privatebrowsing/favicon.svg create mode 100644 browser/themes/shared/privatebrowsing/private-browsing.svg create mode 100755 browser/themes/shared/privatebrowsing/shield-page.png create mode 100755 browser/themes/shared/privatebrowsing/shield-page@2x.png create mode 100644 browser/themes/shared/privatebrowsing/tracking-protection-off.svg create mode 100644 browser/themes/shared/privatebrowsing/tracking-protection.svg create mode 100644 browser/themes/shared/reader/reader-mode-16.png create mode 100644 browser/themes/shared/reader/reader-mode-16@2x.png create mode 100644 browser/themes/shared/reader/reader-tour.png create mode 100644 browser/themes/shared/reader/reader-tour@2x.png create mode 100644 browser/themes/shared/reader/readerMode.svg create mode 100644 browser/themes/shared/search/badge-add-engine.png create mode 100644 browser/themes/shared/search/badge-add-engine@2x.png create mode 100755 browser/themes/shared/search/gear.svg create mode 100644 browser/themes/shared/search/history-icon.svg create mode 100644 browser/themes/shared/search/search-arrow-go.svg create mode 100644 browser/themes/shared/search/search-engine-placeholder.png create mode 100644 browser/themes/shared/search/search-engine-placeholder@2x.png create mode 100644 browser/themes/shared/search/search-indicator-badge-add.png create mode 100644 browser/themes/shared/search/search-indicator-badge-add@2x.png create mode 100644 browser/themes/shared/search/search-indicator-magnifying-glass.svg create mode 100644 browser/themes/shared/search/search-indicator.png create mode 100644 browser/themes/shared/search/search-indicator@2x.png create mode 100644 browser/themes/shared/searchReset.css create mode 100644 browser/themes/shared/social/gear_clicked.png create mode 100644 browser/themes/shared/social/gear_default.png create mode 100644 browser/themes/shared/social/social.inc.css create mode 100644 browser/themes/shared/sync-desktopIcon.svg create mode 100644 browser/themes/shared/sync-mobileIcon.svg create mode 100644 browser/themes/shared/syncedtabs/sidebar.inc.css create mode 100644 browser/themes/shared/tab-selected.svg 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/pendingpaint.png create mode 100644 browser/themes/shared/tabbrowser/tab-audio-small.svg create mode 100644 browser/themes/shared/tabbrowser/tab-audio.svg create mode 100644 browser/themes/shared/tabbrowser/tab-overflow-indicator.png create mode 100644 browser/themes/shared/tabs.inc.css create mode 100644 browser/themes/shared/theme-switcher-icon.png create mode 100644 browser/themes/shared/theme-switcher-icon@2x.png create mode 100644 browser/themes/shared/toolbarbutton-dropdown-arrow.png create mode 100644 browser/themes/shared/toolbarbuttons.inc.css create mode 100644 browser/themes/shared/translation/infobar.inc.css create mode 100644 browser/themes/shared/translation/translating-16.png create mode 100644 browser/themes/shared/translation/translating-16@2x.png create mode 100644 browser/themes/shared/translation/translation-16.png create mode 100644 browser/themes/shared/translation/translation-16@2x.png create mode 100644 browser/themes/shared/undoCloseTab.png create mode 100644 browser/themes/shared/undoCloseTab@2x.png create mode 100644 browser/themes/shared/update-badge-failed.svg create mode 100644 browser/themes/shared/update-badge.svg create mode 100644 browser/themes/shared/urlbar-star.svg create mode 100644 browser/themes/shared/urlbar-tab.svg create mode 100644 browser/themes/shared/urlbarSearchSuggestionsNotification.inc.css create mode 100644 browser/themes/shared/warning-white.svg create mode 100644 browser/themes/shared/warning.svg create mode 100644 browser/themes/shared/webrtc/camera-white-16.png create mode 100644 browser/themes/shared/webrtc/camera-white-16@2x.png create mode 100644 browser/themes/shared/webrtc/microphone-white-16.png create mode 100644 browser/themes/shared/webrtc/microphone-white-16@2x.png create mode 100644 browser/themes/shared/webrtc/screen-white-16.png create mode 100644 browser/themes/shared/webrtc/screen-white-16@2x.png (limited to 'browser/themes/shared') diff --git a/browser/themes/shared/UITour.inc.css b/browser/themes/shared/UITour.inc.css new file mode 100644 index 000000000..bc89ade76 --- /dev/null +++ b/browser/themes/shared/UITour.inc.css @@ -0,0 +1,293 @@ +%if 0 +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +%endif + +/* UI Tour */ + +#UITourHighlightContainer { + -moz-appearance: none; + -moz-window-shadow: none; + border: none; + background-color: transparent; + /* This is a buffer to compensate for the movement in the "wobble" effect, + and for the box-shadow of #UITourHighlight. */ + padding: 4px; +} + +#UITourHighlight { + background-image: radial-gradient(50% 100%, rgba(0,149,220,0.4) 50%, rgba(0,149,220,0.6) 100%); + border-radius: 40px; + border: 1px solid white; + /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity + on Linux without an X compositor where opacity is either 0 or 1. */ + box-shadow: 0 0 3px 0 rgba(0,0,0,0.49); + min-height: 32px; + min-width: 32px; +} + +#UITourTooltipBody { + -moz-box-align: start; +} + +#UITourTooltipTitleContainer { + -moz-box-align: start; + margin-bottom: 10px; +} + +#UITourTooltipIcon { + width: 48px; + height: 48px; + margin-inline-end: 10px; +} + +#UITourTooltipTitle, +#UITourTooltipDescription { + max-width: 20rem; +} + +#UITourTooltipTitle { + font-size: 1.45rem; + font-weight: bold; + margin: 0; +} + +#UITourTooltipDescription { + margin-inline-start: 0; + margin-inline-end: 0; + font-size: 1.15rem; + line-height: 1.8rem; + margin-bottom: 0; /* Override global.css */ +} + +#UITourTooltipClose { + position: relative; + -moz-appearance: none; + border: none; + background-color: transparent; + min-width: 0; + margin-inline-start: 4px; + margin-top: -2px; +} + +#UITourTooltipClose > .toolbarbutton-text { + display: none; +} + +#UITourTooltipButtons { + -moz-box-pack: end; + background-color: hsla(210,4%,10%,.07); + border-top: 1px solid hsla(210,4%,10%,.14); + 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) { + -moz-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):not(: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 { + -moz-appearance: none; + background: transparent; + border: none; + box-shadow: none; + color: rgba(0,0,0,0.35); + padding-left: 10px; + padding-right: 10px; +} + +#UITourTooltipButtons > button.button-link:hover { + color: black; +} + +/* The primary button gets the same color as the customize button. */ +#UITourTooltipButtons > button.button-primary { + background-color: rgb(116,191,67); + color: white; + padding-left: 30px; + padding-right: 30px; +} + +#UITourTooltipButtons > button.button-primary:not(:active):hover { + background-color: rgb(105,173,61); +} + +/* Notification overrides for Heartbeat UI */ + +notification.heartbeat { +%ifdef XP_MACOSX + background-image: linear-gradient(-179deg, #FBFBFB 0%, #EBEBEB 100%); +%else + background-color: #F1F1F1; +%endif + border-bottom: 1px solid #C1C1C1; + height: 40px; +} + +/* In themes/osx/global/notification.css the close icon is inverted because notifications + on OSX are usually dark. Heartbeat is light, so override that behaviour. */ + +%ifdef XP_MACOSX +notification.heartbeat[type="info"] .close-icon:not(:hover) { + -moz-image-region: rect(0, 16px, 16px, 0px) !important; +} +@media (min-resolution: 2dppx) { + notification.heartbeat[type="info"] .close-icon:not(:hover) { + -moz-image-region: rect(0, 32px, 32px, 0px) !important; + } +} +%endif + +@keyframes pulse-onshow { + 0% { + opacity: 0; + transform: scale(1.0); + } + 25% { + opacity: 1; + transform: scale(1.1); + } + 50% { + transform: scale(1.0); + } + 75% { + transform: scale(1.1); + } + 100% { + transform: scale(1.0); + } +} + +@keyframes pulse-twice { + 0% { + transform: scale(1.1); + } + 50% { + transform: scale(0.8); + } + 100% { + transform: scale(1); + } +} + +.messageText.heartbeat { + color: #333333; + text-shadow: none; + margin-inline-start: 0px; + /* The !important is required to override OSX default style. */ + margin-inline-end: 12px !important; +} + +.messageImage.heartbeat { + width: 24px; + height: 24px; + margin-inline-start: 8px; + margin-inline-end: 8px; +} + +.messageImage.heartbeat.pulse-onshow { + animation-name: pulse-onshow; + animation-duration: 1.5s; + animation-iteration-count: 1; + animation-timing-function: cubic-bezier(.7,1.8,.9,1.1); +} + +.messageImage.heartbeat.pulse-twice { + animation-name: pulse-twice; + animation-duration: 1s; + animation-iteration-count: 2; + animation-timing-function: linear; +} + +/* Learn More link styles */ +.heartbeat > .text-link { + color: #0095DD; + margin-inline-start: 0px; +} + +.heartbeat > .text-link:hover { + color: #008ACB; + text-decoration: none; +} + +.heartbeat > .text-link:hover:active { + color: #006B9D; +} + +/* Heartbeat UI Rating Star Classes */ +.heartbeat > #star-rating-container { + display: -moz-box; + margin-bottom: 4px; +} + +.heartbeat > #star-rating-container > #star5 { + -moz-box-ordinal-group: 5; +} + +.heartbeat > #star-rating-container > #star4 { + -moz-box-ordinal-group: 4; +} + +.heartbeat > #star-rating-container > #star3 { + -moz-box-ordinal-group: 3; +} + +.heartbeat > #star-rating-container > #star2 { + -moz-box-ordinal-group: 2; +} + +.heartbeat > #star-rating-container > .star-x { + background: url("chrome://browser/skin/heartbeat-star-off.svg"); + cursor: pointer; + /* Overrides the margin-inline-end for all platforms defined in the .plain class */ + margin-inline-end: 4px !important; + width: 16px; + height: 16px; +} + +.heartbeat > #star-rating-container > .star-x:hover, +.heartbeat > #star-rating-container > .star-x:hover ~ .star-x { + background: url("chrome://browser/skin/heartbeat-star-lit.svg"); +} diff --git a/browser/themes/shared/aboutNetError.css b/browser/themes/shared/aboutNetError.css new file mode 100644 index 000000000..c0b76aa47 --- /dev/null +++ b/browser/themes/shared/aboutNetError.css @@ -0,0 +1,169 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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/error-pages.css"); + +body { + background-image: linear-gradient(-45deg, #eeeeee, #eeeeee 33%, + #fbfbfb 33%, #fbfbfb 66%, + #eeeeee 66%, #eeeeee); +} + +body.certerror { + background-image: linear-gradient(-45deg, #f0d000, #f0d000 33%, + #fedc00 33%, #fedc00 66%, + #f0d000 66%, #f0d000); +} + +body.captiveportal .title { + background-image: url("wifi.svg"); +} + +body.certerror .title { + background-image: url("cert-error.svg"); +} + +#errorContainer { + display: none; +} + +/* Pressing the retry button will cause the cursor to flicker from a pointer to + * not-allowed. Override the disabled cursor behaviour since we will never show + * the button disabled as the initial state. */ +button:disabled { + cursor: pointer; +} + +#prefChangeContainer { + display: none; +} + +#learnMoreContainer { + display: none; +} + +#certErrorAndCaptivePortalButtonContainer { + display: none; +} + +body:not(.neterror) #certErrorAndCaptivePortalButtonContainer { + display: flex; +} + +body:not(.neterror) #netErrorButtonContainer { + display: none; +} + +#errorTryAgain { + margin-top: 1.2em; + min-width: 150px; +} + +#returnButton { + min-width: 250px; +} + +#advancedButton { + display: none; +} + +body.captiveportal #returnButton { + display: none; +} + +body:not(.captiveportal) #openPortalLoginPageButton { + display: none; +} + +#openPortalLoginPageButton { + margin-inline-start: 0; +} + +body:not(.neterror) #advancedButton { + display: block; +} + +#certificateErrorReporting { + display: none; +} + +.container { + position: relative; +} + +#advancedPanelContainer { + position: absolute; + padding: 24px 0; + width: 100%; +} + +.advanced-panel { + /* Hidden until the link is clicked */ + display: none; + background-color: white; + border: 1px lightgray solid; + /* Don't use top padding because the default p style has top padding, and it + * makes the overall div look uneven */ + padding: 0 12px 12px 12px; + box-shadow: 0 0 4px #ddd; + font-size: 0.9em; +} + +#overrideWeakCryptoPanel { + display: none; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-content: space-between; + align-items: flex-start; + margin-top: 1em; +} + +span#hostname { + font-weight: bold; +} + +#automaticallyReportInFuture { + cursor: pointer; + display: inline-block; + padding-inline-start: 2.3em; + text-indent: -2.3em; + line-height: 16px +} + +#errorCode:not([href]) { + color: var(--in-content-page-color); + cursor: text; + text-decoration: none; +} + +#errorCode[href] { + white-space: nowrap; +} + +#badCertTechnicalInfo { + overflow: auto; + white-space: pre-wrap; +} + +#certificateErrorReporting { + display: none; +} + +#certificateErrorDebugInformation { + display: none; + background-color: var(--in-content-box-background-hover) !important; + border-top: 1px solid var(--in-content-border-color); + position: absolute; + left: 0%; + top: 100%; + width: 65%; + padding: 1em 17.5%; +} + +#certificateErrorText { + font-family: monospace; + white-space: pre-wrap; + padding: 1em 0; +} diff --git a/browser/themes/shared/aboutProviderDirectory.css b/browser/themes/shared/aboutProviderDirectory.css new file mode 100644 index 000000000..73e570aad --- /dev/null +++ b/browser/themes/shared/aboutProviderDirectory.css @@ -0,0 +1,30 @@ +%include aboutSocialError.css + +body { + width: 310px; + margin: 1em auto; +} + +#message-box { + margin-top: 2em; + background: url('chrome://global/skin/icons/information-24.png') no-repeat left 4px; + padding-inline-start: 30px; +} + +#activation-frame { + border: none; + margin: 0; + width: 310px; + height: 200px; +} +#activation > p { + width: 100%; + text-align: center; + margin: 0; + line-height: 2em; +} +.link { + text-decoration: none; + color: -moz-nativehyperlinktext; + cursor: pointer; +} diff --git a/browser/themes/shared/aboutSessionRestore.css b/browser/themes/shared/aboutSessionRestore.css new file mode 100644 index 000000000..52488af40 --- /dev/null +++ b/browser/themes/shared/aboutSessionRestore.css @@ -0,0 +1,38 @@ +%if 0 +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +%endif + +.title { + background-image: url("chrome://browser/skin/session-restore.svg"); +} + +treechildren::-moz-tree-image(icon), +treechildren::-moz-tree-image(noicon) { + padding-right: 2px; + margin: 0 2px; + width: 16px; + height: 16px; +} + +treechildren::-moz-tree-image(noicon) { + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); +} +treechildren::-moz-tree-image(container, noicon) { + list-style-image: url("chrome://browser/skin/aboutSessionRestore-window-icon.png"); +} + +treechildren::-moz-tree-image(checked) { + list-style-image: url("chrome://global/skin/in-content/check.svg#check"); +} +treechildren::-moz-tree-image(checked, selected) { + list-style-image: url("chrome://global/skin/in-content/check.svg#check-inverted"); +} + +treechildren::-moz-tree-image(partial) { + list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial"); +} +treechildren::-moz-tree-image(partial, selected) { + list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial-inverted"); +} diff --git a/browser/themes/shared/aboutSocialError.css b/browser/themes/shared/aboutSocialError.css new file mode 100644 index 000000000..f5a922ff4 --- /dev/null +++ b/browser/themes/shared/aboutSocialError.css @@ -0,0 +1,40 @@ +@import url("chrome://global/skin/in-content/common.css"); + +#errorPageContainer { + min-width: 50%; +} + +#errorTitle { + background: url("chrome://global/skin/icons/info.svg") left 0 no-repeat; + background-size: 2em; + padding-inline-start: 3em; +} + +#button-box { + text-align: center; + width: 75%; + margin: 0 auto; +} + +button { + width: auto !important; + min-width: 150px; +} + +@media all and (max-width: 300px) { + body { + padding: 0px 10px; + } + #errorPageContainer { + min-width: 100%; + } + #errorTitle { + background: none; + padding-inline-start: 0 !important; + } + button { + width: auto !important; + min-width: auto !important; + } +} + diff --git a/browser/themes/shared/aboutTabCrashed.css b/browser/themes/shared/aboutTabCrashed.css new file mode 100644 index 000000000..264fb4275 --- /dev/null +++ b/browser/themes/shared/aboutTabCrashed.css @@ -0,0 +1,101 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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 { + font-size: 1.25rem; +} + +.title { + background-image: url("chrome://browser/skin/tab-crashed.svg"); +} + +.title > h1, +.offers { + margin-left: 14px; +} + +.title > h1 { + /** + * Add commentary? + */ + padding-right: 14px; +} + +.container { + width: 45%; +} + +#reportSent { + font-weight: bold; +} + +#reportBox { + background-color: var(--in-content-box-background-hover); + margin: 24px 0; + padding: 14px; + border: 1px solid var(--in-content-box-border-color); + border-radius: 2px; +} + +#reportBox > h2:first-child { + margin-top: 0; +} + +#crash-reporter-title { + font-weight: bold; + margin: 0 0 14px 0; +} + +input[type="text"], +textarea { + width: 100%; + box-sizing: border-box; + resize: none; +} + +input[type="text"], +input[type="checkbox"] { + -moz-margin-start: 0px; +} + +#options { + list-style: none; + margin-inline-start: 0; +} + +#options > li, +#email { + margin-top: 14px; +} + +.checkbox-with-label { + display: flex; +} + +.checkbox-with-label > label { + margin-top: auto; + margin-bottom: auto; +} + +/** + * Hack alert: the #autoSubmit checkbox has a long label, which means + * it often wraps, at least in en-US. Bug 418833 and bug 1317795 allows + * us to fix this properly, but bug 418833 didn't uplift in time for this + * release. We use some hackery here to make sure that this label wraps + * properly, and doesn't end up underneath the checkbox pseudoelement. + * We do this by setting a negative margin on the pseudoelement, and then + * a positive equivalent margin on the label itself. + * + * The magic number of 35px is derived from the total width of the checkbox. + * The checkbox width is explicitly set at 23px. This, plus the 1px border on either + * side gives us 25px. Then there's the 10px margin-inline-end, which gives us 35px. + */ +#autoSubmit + label:before { + margin-inline-start: -35px; +} + +#autoSubmit + label { + margin-inline-start: 35px; + line-height: 1.75em; +} \ No newline at end of file diff --git a/browser/themes/shared/aboutWelcomeBack.css b/browser/themes/shared/aboutWelcomeBack.css new file mode 100644 index 000000000..815ad462e --- /dev/null +++ b/browser/themes/shared/aboutWelcomeBack.css @@ -0,0 +1,47 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +.title { + background-image: url("chrome://browser/skin/welcome-back.svg"); +} + +.radioRestoreContainer:not(:last-child) { + margin-bottom: 0.2em; +} + +/* tablist starts out hidden, but JS may make it visible in response to + clicks on the radio buttons by setting an "available" attribute. +*/ +.tree-container:not([available]) { + display: none; +} + +treechildren::-moz-tree-image(icon), +treechildren::-moz-tree-image(noicon) { + padding-right: 2px; + margin: 0 2px; + width: 16px; + height: 16px; +} + +treechildren::-moz-tree-image(noicon) { + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); +} +treechildren::-moz-tree-image(container, noicon) { + list-style-image: url("chrome://browser/skin/aboutSessionRestore-window-icon.png"); +} + +treechildren::-moz-tree-image(checked) { + list-style-image: url("chrome://global/skin/in-content/check.svg#check"); +} +treechildren::-moz-tree-image(checked, selected) { + list-style-image: url("chrome://global/skin/in-content/check.svg#check-inverted"); +} + +treechildren::-moz-tree-image(partial) { + list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial"); +} +treechildren::-moz-tree-image(partial, selected) { + list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial-inverted"); +} diff --git a/browser/themes/shared/addons/addon-install-anchor.svg b/browser/themes/shared/addons/addon-install-anchor.svg new file mode 100644 index 000000000..1ee69ca0d --- /dev/null +++ b/browser/themes/shared/addons/addon-install-anchor.svg @@ -0,0 +1,13 @@ + + + +#include ../icon-colors.inc.svg + + + + + 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 000000000..caaaa466b --- /dev/null +++ b/browser/themes/shared/addons/addon-install-blocked.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/addons/addon-install-confirm.svg b/browser/themes/shared/addons/addon-install-confirm.svg new file mode 100644 index 000000000..a16455253 --- /dev/null +++ b/browser/themes/shared/addons/addon-install-confirm.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + 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 000000000..9dcc8069c --- /dev/null +++ b/browser/themes/shared/addons/addon-install-downloading.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/addons/addon-install-error.svg b/browser/themes/shared/addons/addon-install-error.svg new file mode 100644 index 000000000..e25950f25 --- /dev/null +++ b/browser/themes/shared/addons/addon-install-error.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + 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 000000000..3b352c21d --- /dev/null +++ b/browser/themes/shared/addons/addon-install-installed.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/addons/addon-install-restart.svg b/browser/themes/shared/addons/addon-install-restart.svg new file mode 100644 index 000000000..e3269c3b1 --- /dev/null +++ b/browser/themes/shared/addons/addon-install-restart.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/addons/addon-install-warning.svg b/browser/themes/shared/addons/addon-install-warning.svg new file mode 100644 index 000000000..bac1903c6 --- /dev/null +++ b/browser/themes/shared/addons/addon-install-warning.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/autocomplete.inc.css b/browser/themes/shared/autocomplete.inc.css new file mode 100644 index 000000000..d9923a7e7 --- /dev/null +++ b/browser/themes/shared/autocomplete.inc.css @@ -0,0 +1,65 @@ +%if 0 +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +%endif + +#PopupAutoComplete > richlistbox > richlistitem { + height: 20px; + min-height: 20px; + border: 0; + border-radius: 0; + padding: 0px 1px 0px 1px; +} + +#PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon { + margin-inline-start: 4px; + margin-inline-end: 0; +} + +#PopupAutoComplete > richlistbox > richlistitem > .ac-title { + font: icon; + margin-inline-start: 4px; +} + +#PopupAutoComplete > richlistbox { + padding: 0; +} + + +/* Login form autocompletion */ +#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon { + display: initial; + list-style-image: url(chrome://browser/skin/notification-icons.svg#login); +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] { + list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted); +} + + +/* Insecure field warning */ +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] { + background-color: var(--arrowpanel-dimmed); + border-bottom: 1px solid var(--panel-separator-color); + padding-bottom: 4px; + padding-top: 4px; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] { + background-color: var(--arrowpanel-dimmed-further); + color: -moz-DialogText; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title { + color: GrayText; + font-size: 1em; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title { + color: inherit; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon { + list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon); +} diff --git a/browser/themes/shared/blockedSite.css b/browser/themes/shared/blockedSite.css new file mode 100644 index 000000000..49846ee89 --- /dev/null +++ b/browser/themes/shared/blockedSite.css @@ -0,0 +1,65 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.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/error-pages.css"); + +body { + background-image: linear-gradient(-45deg, #9b2e2e, #9b2e2e 33%, + #a83232 33%, #a83232 66%, + #9b2e2e 66%, #9b2e2e); + background-color: #b14646; + color: white; +} + +.title { + background-image: url("chrome://global/skin/icons/blocked.svg"); +} + +.title-text { + color: white; +} + +.button-container button:not(.primary) { + background-color: transparent; + color: white; + border: 1px solid #9b2e2e; + margin-inline-end: 0; +} + +.button-container button:not(.primary):hover { + background-color: #a83232; +} + +.button-container button:not(.primary):active { + background-color: #9b2e2e; +} + +.button-container button { + margin-top: 1.2em; +} + +/* Style warning button to look like a small text link in the + bottom right. This is preferable to just using a text link + since there is already a mechanism in browser.js for trapping + oncommand events from unprivileged chrome pages (BrowserOnCommand).*/ +#ignoreWarningButton { + -moz-appearance: none; + background: transparent; + border: none; + color: white; + text-decoration: underline; + margin: 4px 0 0 0; + padding: 0; + font-size: smaller; + min-width: 0; +} + +#ignoreWarningButton:hover { + cursor: pointer; +} + +#ignoreWarning { + margin-top: 1.2em; + text-align: end; +} diff --git a/browser/themes/shared/browser.inc b/browser/themes/shared/browser.inc new file mode 100644 index 000000000..c57b59237 --- /dev/null +++ b/browser/themes/shared/browser.inc @@ -0,0 +1,13 @@ +%filter substitution + +% Note that zoom-reset-button is a bit different since it doesn't use an image and thus has the image with display: none. +%define nestedButtons #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button +%define primaryToolbarButtons #back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, @nestedButtons@, #e10s-button, #panic-button, #webide-button, #containers-panelmenu + +%ifdef XP_MACOSX +% Prior to 10.7 there wasn't a native fullscreen button so we use #restore-button to exit fullscreen +% and want it to behave like other toolbar buttons. +%define primaryToolbarButtons @primaryToolbarButtons@, #restore-button +%endif + +%define inAnyPanel :-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) diff --git a/browser/themes/shared/content-contextmenu.svg b/browser/themes/shared/content-contextmenu.svg new file mode 100644 index 000000000..6b53c13d9 --- /dev/null +++ b/browser/themes/shared/content-contextmenu.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + diff --git a/browser/themes/shared/contextmenu.inc.css b/browser/themes/shared/contextmenu.inc.css new file mode 100644 index 000000000..2ec60b55b --- /dev/null +++ b/browser/themes/shared/contextmenu.inc.css @@ -0,0 +1,51 @@ +#context-navigation > .menuitem-iconic { + -moz-box-flex: 1; + -moz-box-pack: center; + -moz-box-align: center; +} + +#context-navigation > .menuitem-iconic > .menu-iconic-left { + -moz-appearance: none; +} + +#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { + width: 16px; + height: 16px; + margin: 7px; + filter: url(chrome://browser/skin/filters.svg#fill); + fill: currentColor; +} + +#context-back { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); +} + +#context-forward { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); +} + +#context-reload { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); +} + +#context-stop { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); +} + +#context-bookmarkpage { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); +} + +#context-bookmarkpage[starred=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); +} + +#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#chains"); +} diff --git a/browser/themes/shared/controlcenter/arrow-subview-back.svg b/browser/themes/shared/controlcenter/arrow-subview-back.svg new file mode 100644 index 000000000..9f681207c --- /dev/null +++ b/browser/themes/shared/controlcenter/arrow-subview-back.svg @@ -0,0 +1,8 @@ + + + +#include ../icon-colors.inc.svg + + diff --git a/browser/themes/shared/controlcenter/arrow-subview.svg b/browser/themes/shared/controlcenter/arrow-subview.svg new file mode 100644 index 000000000..2802fa055 --- /dev/null +++ b/browser/themes/shared/controlcenter/arrow-subview.svg @@ -0,0 +1,8 @@ + + + +#include ../icon-colors.inc.svg + + diff --git a/browser/themes/shared/controlcenter/conn-not-secure.svg b/browser/themes/shared/controlcenter/conn-not-secure.svg new file mode 100644 index 000000000..ef2df7c69 --- /dev/null +++ b/browser/themes/shared/controlcenter/conn-not-secure.svg @@ -0,0 +1,15 @@ + + + +#include ../icon-colors.inc.svg + + + + + + + + + diff --git a/browser/themes/shared/controlcenter/connection.svg b/browser/themes/shared/controlcenter/connection.svg new file mode 100644 index 000000000..85396d68f --- /dev/null +++ b/browser/themes/shared/controlcenter/connection.svg @@ -0,0 +1,37 @@ + + + +#include ../icon-colors.inc.svg + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/controlcenter/mcb-disabled.svg b/browser/themes/shared/controlcenter/mcb-disabled.svg new file mode 100644 index 000000000..76bad47ee --- /dev/null +++ b/browser/themes/shared/controlcenter/mcb-disabled.svg @@ -0,0 +1,34 @@ + + + +#include ../icon-colors.inc.svg + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/controlcenter/panel.inc.css b/browser/themes/shared/controlcenter/panel.inc.css new file mode 100644 index 000000000..a0f3aa854 --- /dev/null +++ b/browser/themes/shared/controlcenter/panel.inc.css @@ -0,0 +1,445 @@ +%if 0 +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +%endif + +/* Hide all conditional elements by default. */ +:-moz-any([when-connection],[when-mixedcontent],[when-ciphers],[when-loginforms]) { + display: none; +} + +/* Show the right elements for the right connection states. */ +#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], +/* Show insecure login forms messages when needed. */ +#identity-popup[loginforms=insecure] [when-loginforms=insecure], +/* 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], +/* Show 'disable MCB' button always when there is mixed active content blocked. */ +#identity-popup-securityView-body[mixedcontent~=active-blocked] > button[when-mixedcontent=active-blocked] { + display: inherit; +} + +/* Hide redundant messages based on insecure login forms presence. */ +#identity-popup[loginforms=secure] [and-when-loginforms=insecure] { + display: none; +} +#identity-popup[loginforms=insecure] [and-when-loginforms=secure] { + display: none; +} + +/* Hide 'not secure' message in subview when weak cipher or mixed content messages are shown. */ +#identity-popup-securityView-body:-moz-any([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-body[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, +#identity-popup:not([panelopen]) .panel-viewstack[viewtype="main"]:not([transitioning]) #identity-popup-mainView { + /* Tiny hack to ensure the panel shrinks back to its original + size after closing a subview that is bigger than the main view. */ + max-height: 0; +} + +.panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView menulist, +.panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView button:not([panel-multiview-anchor]) { + -moz-user-focus: ignore; +} + +#identity-popup > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; +} + +.panel-mainview[panelid=identity-popup] { + min-width: 30em; +} + +#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews { + transform: translateX(100%); + box-shadow: none; +} + +#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) { + transform: translateX(-100%); +} + +#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews { + background: var(--arrowpanel-background); + padding: 0; +} + +.identity-popup-section:not(:first-child) { + border-top: 1px solid var(--panel-separator-color); +} + +#identity-popup-securityView, +#identity-popup-security-content, +#identity-popup-permissions-content, +#tracking-protection-content { + background-repeat: no-repeat; + background-position: 1em 1em; + background-size: 24px auto; +} + +#identity-popup-security-content, +#identity-popup-permissions-content, +#tracking-protection-content { + padding: 0.5em 0 1em; + /* .identity-popup-headline.host depends on this width */ + padding-inline-start: calc(2em + 24px); + padding-inline-end: 1em; +} + +#identity-popup-securityView:-moz-locale-dir(rtl), +#identity-popup-security-content:-moz-locale-dir(rtl), +#identity-popup-permissions-content:-moz-locale-dir(rtl), +#tracking-protection-content:-moz-locale-dir(rtl) { + background-position: calc(100% - 1em) 1em; +} + +/* EXPAND BUTTON */ + +.identity-popup-expander { + margin: 0; + padding: 4px 0; + min-width: auto; + width: var(--identity-popup-expander-width); + border: 0 none; + -moz-appearance: none; + background: url("chrome://browser/skin/controlcenter/arrow-subview.svg") center no-repeat; + background-size: 16px, auto; +} + +.identity-popup-expander:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.identity-popup-expander[panel-multiview-anchor] { + transition: background-color 250ms ease-in; + background-color: Highlight; + background-image: url("chrome://browser/skin/controlcenter/arrow-subview-back.svg"), + linear-gradient(rgba(255,255,255,0.3), transparent); +} + +.identity-popup-expander > .button-box { + padding: 0; + -moz-appearance: none; + border-style: none; + border-left: 1px solid var(--panel-separator-color); +} + +.identity-popup-expander:-moz-focusring > .button-box, +.identity-popup-expander[panel-multiview-anchor] > .button-box { + border-style: none; +} + +.identity-popup-expander:hover { + background-color: var(--arrowpanel-dimmed); + background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg"), + linear-gradient(rgba(255,255,255,0.3), transparent); +} + +.identity-popup-expander:hover:active { + background-color: var(--arrowpanel-dimmed-further); + box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; +} + +/* CONTENT */ + +.identity-popup-permission-label, +.identity-popup-permission-state-label, +#identity-popup-security-content > description, +#identity-popup-security-descriptions > description, +#identity-popup-securityView-header > description, +#identity-popup-securityView-body > description, +#identity-popup-permissions-content > description, +#tracking-protection-content > label { + white-space: pre-wrap; + font-size: 110%; + margin: 0; +} + +.identity-popup-headline { + margin: 3px 0 4px; + font-size: 150%; +} + +.identity-popup-headline.host { + word-wrap: break-word; + /* 1em + 2em + 24px is #identity-popup-security-content padding + * 30em is .panel-mainview:not([panelid="PanelUI-popup"]) width */ + max-width: calc(30rem - 3rem - 24px - var(--identity-popup-expander-width)) +} + +.identity-popup-warning-gray { + padding-inline-start: 24px; + background: url(chrome://browser/skin/controlcenter/warning-gray.svg) no-repeat 0 50%; +} + +.identity-popup-warning-yellow { + padding-inline-start: 24px; + background: url(chrome://browser/skin/controlcenter/warning-yellow.svg) no-repeat 0 50%; +} + +.identity-popup-warning-gray:-moz-locale-dir(rtl), +.identity-popup-warning-yellow:-moz-locale-dir(rtl) { + background-position: 100% 50%; +} + +/* SECURITY */ + +.identity-popup-connection-secure { + color: #418220; +} + +.identity-popup-connection-not-secure { + color: #d74345; +} + +#identity-popup-securityView { + overflow: hidden; +} + +#identity-popup-securityView, +#identity-popup-security-content { + background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg); +} + +#identity-popup[connection=chrome] #identity-popup-securityView, +#identity-popup[connection=chrome] #identity-popup-security-content { + background-image: url(chrome://branding/content/icon48.png); +} + +#identity-popup[connection^=secure] #identity-popup-securityView, +#identity-popup[connection^=secure] #identity-popup-security-content { + background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-secure); +} + +/* Use [isbroken] to make sure we don't show a lock on an http page. See Bug 1192162. */ +#identity-popup[ciphers=weak] #identity-popup-securityView, +#identity-popup[ciphers=weak] #identity-popup-security-content, +#identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-securityView, +#identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-security-content { + background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-degraded); +} + +#identity-popup[connection=secure-cert-user-overridden] #identity-popup-securityView, +#identity-popup[connection=secure-cert-user-overridden] #identity-popup-security-content { + background-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon); +} + +#identity-popup[loginforms=insecure] #identity-popup-securityView, +#identity-popup[loginforms=insecure] #identity-popup-security-content, +#identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-securityView, +#identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-security-content { + background-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg); +} + +#identity-popup-security-descriptions > description { + margin-top: 6px; + color: Graytext; +} + +#identity-popup-securityView-header, +#identity-popup-securityView-body { + margin-inline-start: calc(2em + 24px); + margin-inline-end: 1em; +} + +#identity-popup-securityView-header { + margin-top: 0.5em; + border-bottom: 1px solid var(--panel-separator-color); + padding-bottom: 1em; +} + +#identity-popup-securityView-body { + padding-inline-end: 1em; +} + +#identity-popup-securityView-footer { + margin-top: 1em; + background-color: var(--arrowpanel-dimmed); +} + +#identity-popup-securityView-footer > button { + -moz-appearance: none; + margin: 0; + border: none; + border-top: 1px solid var(--panel-separator-color); + padding: 8px 20px; + color: inherit; + background-color: transparent; +} + +#identity-popup-securityView-footer > button:hover, +#identity-popup-securityView-footer > button:focus { + background-color: var(--arrowpanel-dimmed); +} + +#identity-popup-securityView-footer > button:hover:active { + background-color: var(--arrowpanel-dimmed-further); +} + +#identity-popup-content-verifier ~ description { + margin-top: 1em; + color: Graytext; +} + +description#identity-popup-content-verified-by, +description#identity-popup-content-owner, +description#identity-popup-content-verifier, +#identity-popup-securityView-body > button { + margin-top: 1em; +} + +#identity-popup-securityView-body > button { + margin-inline-start: 0; + margin-inline-end: 0; +} + +/* TRACKING PROTECTION */ + +#tracking-protection-content { + background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#enabled"); +} + +#tracking-protection-content[state="loaded-tracking-content"] { + background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#disabled"); +} + +#tracking-action-block, +#tracking-action-unblock, +#tracking-action-unblock-private { + margin: 1em 0 0; +} + +#tracking-protection-content[state] > #tracking-not-detected, +#tracking-protection-content:not([state="blocked-tracking-content"]) > #tracking-blocked, +#main-window[privatebrowsingmode] #tracking-action-unblock, +#main-window:not([privatebrowsingmode]) #tracking-action-unblock-private, +#tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock, +#tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock-private, +#tracking-protection-content:not([state="loaded-tracking-content"]) > #tracking-loaded, +#tracking-protection-content:not([state="loaded-tracking-content"]) #tracking-action-block, +#tracking-protection-content:not([state]) > #tracking-actions { + display: none; +} + +/* PERMISSIONS */ + +#identity-popup-permissions-content { + background-image: url(chrome://browser/skin/controlcenter/permissions.svg); +} + +#identity-popup-permissions-headline { + /* Make sure the label is as tall as the icon so that the permission list + which is aligned with the icon doesn't cover it up. */ + min-height: 24px; +} + +#identity-popup-permission-list { + /* Offset the padding set on #identity-popup-permissions-content so that it + shows up just below the section. The permission icons are 16px wide and + should be right aligned with the section icon. */ + margin-inline-start: calc(-1em - 16px); +} + +.identity-popup-permission-item { + min-height: 24px; +} + +#identity-popup-permission-list:not(:empty) { + margin-top: 5px; +} + +.identity-popup-permission-icon { + width: 16px; + height: 16px; +} + +.identity-popup-permission-icon.in-use { + animation: 1.5s ease in-use-blink infinite; +} + +@keyframes in-use-blink { + 50% { opacity: 0; } +} + +.identity-popup-permission-label, +.identity-popup-permission-state-label { + /* We need to align the action buttons and permission icons with the text. + This is tricky because the icon height is defined in pixels, while the + font height can vary with platform and system settings, and at least on + Windows the default font metrics reserve more extra space for accents. + This value is a good compromise for different platforms and font sizes. */ + margin-top: -0.1em; +} + +.identity-popup-permission-label { + margin-inline-start: 1em; +} + +.identity-popup-permission-state-label { + margin-inline-end: 5px; + text-align: end; + color: graytext; +} + +.identity-popup-permission-remove-button { + -moz-appearance: none; + margin: 0; + border-width: 0; + border-radius: 50%; + min-width: 0; + padding: 2px; + background-color: transparent; +} + +.identity-popup-permission-remove-button > .button-box { + padding: 0; + -moz-appearance: none; +} + +.identity-popup-permission-remove-button > .button-box > .button-icon { + margin: 0; + width: 16px; + height: 16px; + list-style-image: url(chrome://browser/skin/panel-icons.svg#cancel); + filter: url(chrome://browser/skin/filters.svg#fill); + fill: graytext; +} + +.identity-popup-permission-remove-button > .button-box > .button-text { + display: none; +} + +/* swap foreground / background colors on hover */ +.identity-popup-permission-remove-button:not(:-moz-focusring):hover { + background-color: graytext; +} + +.identity-popup-permission-remove-button:not(:-moz-focusring):hover > .button-box > .button-icon { + fill: -moz-field; +} + +.identity-popup-permission-remove-button:not(:-moz-focusring):hover:active { + background-color: -moz-fieldtext; +} diff --git a/browser/themes/shared/controlcenter/permissions.svg b/browser/themes/shared/controlcenter/permissions.svg new file mode 100644 index 000000000..77f0f3e50 --- /dev/null +++ b/browser/themes/shared/controlcenter/permissions.svg @@ -0,0 +1,20 @@ + + + +#include ../icon-colors.inc.svg + + + + + + + + + + + + + diff --git a/browser/themes/shared/controlcenter/tracking-protection.svg b/browser/themes/shared/controlcenter/tracking-protection.svg new file mode 100644 index 000000000..1779378c1 --- /dev/null +++ b/browser/themes/shared/controlcenter/tracking-protection.svg @@ -0,0 +1,43 @@ + + + +#include ../icon-colors.inc.svg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/controlcenter/warning-gray.svg b/browser/themes/shared/controlcenter/warning-gray.svg new file mode 100644 index 000000000..5f122c3ee --- /dev/null +++ b/browser/themes/shared/controlcenter/warning-gray.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/browser/themes/shared/controlcenter/warning-yellow.svg b/browser/themes/shared/controlcenter/warning-yellow.svg new file mode 100644 index 000000000..e2d3a3664 --- /dev/null +++ b/browser/themes/shared/controlcenter/warning-yellow.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/browser/themes/shared/ctrlTab.inc.css b/browser/themes/shared/ctrlTab.inc.css new file mode 100644 index 000000000..1205d0499 --- /dev/null +++ b/browser/themes/shared/ctrlTab.inc.css @@ -0,0 +1,63 @@ +%if 0 +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +%endif + +/* Ctrl-Tab */ + +#ctrlTab-panel { + -moz-appearance: none; +%ifdef XP_MACOSX + -moz-window-shadow: none; +%endif + background: hsla(0,0%,33%,.85); + color: white; + border-style: none; + padding: 20px 10px 10px; +%ifndef XP_MACOSX + font-weight: bold; +%endif + text-shadow: 0 0 1px hsl(0,0%,12%), 0 0 2px hsl(0,0%,12%); +} + +.ctrlTab-favicon[src] { + background-color: white; + width: 20px; + height: 20px; + padding: 2px; +} + +.ctrlTab-preview-inner > .tabPreview-canvas { + box-shadow: 1px 1px 2px hsl(0,0%,12%); +} + +.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas { + margin-bottom: 2px; +} + +.ctrlTab-preview-inner { + padding: 8px; + border: 2px solid transparent; + border-radius: .5em; +} + +.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner { + margin: -10px -10px 0; +} + +#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner { + background-color: rgba(255,255,255,.2); +} + +.ctrlTab-preview:focus > * > .ctrlTab-preview-inner { + color: white; + background-color: rgba(0,0,0,.6); + text-shadow: none; + border-color: white; +} + +#ctrlTab-showAll { + margin-top: .5em; +} + diff --git a/browser/themes/shared/customizableui/customize-illustration-rtl.png b/browser/themes/shared/customizableui/customize-illustration-rtl.png new file mode 100644 index 000000000..12005095c Binary files /dev/null and b/browser/themes/shared/customizableui/customize-illustration-rtl.png differ diff --git a/browser/themes/shared/customizableui/customize-illustration-rtl@2x.png b/browser/themes/shared/customizableui/customize-illustration-rtl@2x.png new file mode 100644 index 000000000..c1af12990 Binary files /dev/null and b/browser/themes/shared/customizableui/customize-illustration-rtl@2x.png differ diff --git a/browser/themes/shared/customizableui/customize-illustration.png b/browser/themes/shared/customizableui/customize-illustration.png new file mode 100644 index 000000000..9131951b0 Binary files /dev/null and b/browser/themes/shared/customizableui/customize-illustration.png differ diff --git a/browser/themes/shared/customizableui/customize-illustration@2x.png b/browser/themes/shared/customizableui/customize-illustration@2x.png new file mode 100644 index 000000000..50c0d1949 Binary files /dev/null and b/browser/themes/shared/customizableui/customize-illustration@2x.png differ diff --git a/browser/themes/shared/customizableui/customizeFavicon.ico b/browser/themes/shared/customizableui/customizeFavicon.ico new file mode 100644 index 000000000..c7bd84339 Binary files /dev/null and b/browser/themes/shared/customizableui/customizeFavicon.ico differ diff --git a/browser/themes/shared/customizableui/customizeMode.inc.css b/browser/themes/shared/customizableui/customizeMode.inc.css new file mode 100644 index 000000000..48681d9f3 --- /dev/null +++ b/browser/themes/shared/customizableui/customizeMode.inc.css @@ -0,0 +1,461 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* Customization mode */ + +:root { + --drag-drop-transition-duration: .3s; +} + +#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox { + margin-bottom: 2em; +} + +#main-window:-moz-any([customize-entering],[customize-entered]) #content-deck, +#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox, +#main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox { + margin-left: 2em; + margin-right: 2em; +} + +#main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck { + pointer-events: none; +} + +#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before, +#PanelUI-contents > .panel-customization-placeholder { + -moz-outline-radius: 2.5px; + outline: 1px dashed transparent; +} + +#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before { + /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */ + -moz-box-ordinal-group: 0; + content: ""; + display: -moz-box; + height: 100%; + left: 0; + outline-offset: -2px; + pointer-events: none; + position: absolute; + top: 0; + width: 100%; +} + +/* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the + #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the + offset from the bottom effectively the same as other targets (-2px). */ +#main-window[customize-entered] #TabsToolbar.customization-target::before { + top: -2px; +} + +/* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */ +#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover, +#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)), +#main-window[customize-entered] #nav-bar-customization-target.customization-target { + position: relative; +} + +/* Most target outlines are shown on hover and drag over but the panel menu uses + placeholders instead. */ +#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before, +#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before, +/* nav-bar and panel outlines are always shown */ +#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { + outline-color: currentColor; +} + +#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { + transition: outline-color 250ms linear; +} + +#PanelUI-contents[showoutline=true] > .panel-customization-placeholder { + transition: outline-color 250ms linear; + outline-color: var(--panel-separator-color); +} + +#PanelUI-contents > .panel-customization-placeholder { + cursor: auto; + outline-offset: -5px; +} + +#main-window[customizing] .customization-target:not(#PanelUI-contents) { + min-width: 100px; + padding-left: 10px; + padding-right: 10px; +} + +#customization-container { + background-color: -moz-field; + color: -moz-fieldText; + text-shadow: none; +} + +#customization-palette, +#customization-empty { + padding: 5px 25px 25px; +} + +#customization-header { + font-size: 1.75em; + line-height: 1.75em; + color: GrayText; + font-weight: 200; + margin: 25px 25px 12px; + padding-bottom: 12px; + border-bottom: 1px solid ThreeDLightShadow; +} + +#customization-panel-container { + padding: 15px 25px 25px; + background-image: linear-gradient(to bottom, #3e86ce, #3878ba); +} + +#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox, +#customization-footer { + background-color: -moz-dialog; +} + +#customization-footer { + border-top: 1px solid ThreeDLightShadow; + padding: 10px; +} + +%if defined(XP_MACOSX) || defined(XP_WIN) +%ifdef XP_WIN +@media (-moz-windows-default-theme) { +%endif + +.customizationmode-button { + border: 1px solid rgb(192,192,192); + border-radius: 3px; + margin: 5px; + padding: 2px 10px; + background-color: rgb(251,251,251); + color: rgb(71,71,71); + box-shadow: 0 1px rgba(255, 255, 255, 0.5), + inset 0 1px rgba(255, 255, 255, 0.5); + -moz-appearance: none; +} + +.customizationmode-button > .box-inherit { + border-width: 0; + padding-inline-start: 0; + padding-inline-end: 0; +} + +.customizationmode-button > .button-icon { + margin-inline-start: 0; +} + +.customizationmode-button:not([type=menu]) > .button-text { + margin-inline-end: 0; +} + +.customizationmode-button > .button-menu-dropmarker { + margin-inline-end: 0; + padding-inline-end: 0; +} + +.customizationmode-button:hover:active:not([disabled]), +.customizationmode-button[open], +.customizationmode-button[checked] { + background-color: rgb(218, 218, 218); + border-color: rgb(168, 168, 168); + text-shadow: 0 1px rgb(236, 236, 236); + box-shadow: 0 1px rgba(255, 255, 255, 0.5), + inset 0 1px rgb(196, 196, 196); +} + +.customizationmode-button[disabled="true"] { + opacity: .5; +} + +%ifdef XP_WIN +} /* @media (-moz-windows-default-theme) */ +%endif +%endif /* defined(XP_MACOSX) || defined(XP_WIN) */ + +.customizationmode-button > .box-inherit > .box-inherit > .button-icon, +.customizationmode-button > .button-box > .button-icon { + height: 24px; +} + +%ifdef CAN_DRAW_IN_TITLEBAR +#customization-titlebar-visibility-button > .button-box > .button-text, +%endif +#customization-lwtheme-button > .box-inherit > .box-inherit > .button-text { + /* Sadly, button.css thinks its margins are perfect for everyone. */ + margin-inline-start: 6px !important; +} + +#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon { + width: 20px; + height: 20px; + border-radius: 2px; + background-image: url("chrome://browser/skin/theme-switcher-icon.png"); + background-size: contain; +} + +%ifdef CAN_DRAW_IN_TITLEBAR +#customization-titlebar-visibility-button { + list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png"); + -moz-image-region: rect(0, 24px, 24px, 0); +} + +#customization-titlebar-visibility-button > .button-box > .button-icon { + vertical-align: middle; +} + +#customization-titlebar-visibility-button[checked] { + -moz-image-region: rect(0, 48px, 24px, 24px); +} + +@media (min-resolution: 1.1dppx) { + #customization-titlebar-visibility-button { + list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png"); + -moz-image-region: rect(0, 48px, 48px, 0); + } + + #customization-titlebar-visibility-button[checked] { + -moz-image-region: rect(0, 96px, 48px, 48px); + } +} +%endif /* CAN_DRAW_IN_TITLEBAR */ + +#main-window[customize-entered] #customization-panel-container { + background-image: url("chrome://browser/skin/customizableui/customizeMode-separatorHorizontal.png"), + url("chrome://browser/skin/customizableui/customizeMode-separatorVertical.png"), + url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"), + url("chrome://browser/skin/customizableui/background-noise-toolbar.png"), + linear-gradient(to bottom, #3e86ce, #3878ba); + background-position: center top, left center, left top, left top, left top; + background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat; + background-size: auto 12px, 12px 100%, auto, auto, auto; + background-attachment: scroll, scroll, fixed, fixed, scroll; +} + +toolbarpaletteitem[place="toolbar"] { + transition: border-width 250ms ease-in-out; +} + +toolbarpaletteitem[mousedown] { + cursor: -moz-grabbing; +} + +.panel-customization-placeholder, +toolbarpaletteitem[place="palette"], +toolbarpaletteitem[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; +} + +toolbarpaletteitem toolbarbutton[disabled] { + color: inherit !important; +} + +toolbarpaletteitem[notransition].panel-customization-placeholder, +toolbarpaletteitem[notransition][place="toolbar"], +toolbarpaletteitem[notransition][place="palette"], +toolbarpaletteitem[notransition][place="panel"] { + transition: none; +} + +toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, +toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, +toolbarpaletteitem > toolbaritem.panel-wide-item, +toolbarpaletteitem > toolbarbutton[type="menu-button"] { + 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] > toolbaritem.panel-wide-item, +toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] { + transform: scale(1.1); +} + +/* Override the toolkit styling for items being dragged over. */ +toolbarpaletteitem[place="toolbar"] { + border-left-width: 0; + border-right-width: 0; + margin-right: 0; + margin-left: 0; +} + +#customization-palette:not([hidden]) { + margin-bottom: 25px; +} + +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: 1px dotted; + -moz-outline-radius: 2.5px; +} + +toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { + outline-offset: -5px; +} + +#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, +#wrapper-edit-controls[place="palette"] > #edit-controls > separator, +#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton, +#wrapper-zoom-controls[place="palette"] > #zoom-controls > separator { + margin-top: 20px; +} + +#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, +#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton { + margin-left: 0; + margin-right: 0; + max-width: 24px; + min-width: 24px; + max-height: 24px; + min-height: 24px; + padding: 4px; +} + +#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, +#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { + width: 16px; +} + +#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; +} + +#wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks { + -moz-box-pack: center; + min-height: 48px; +} + +#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon { + margin-inline-end: 5px; +} + +#customization-palette > toolbarpaletteitem > label { + text-align: center; + margin-left: 0; + margin-right: 0; +} + +#customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent { + -moz-box-orient: vertical; + /* Make the panel padding uniform across all platforms due to the + styling of the section headers and footer. */ + padding: 10px; +} + +.customization-lwtheme-menu-theme > .toolbarbutton-icon { + width: 32px; + height: 32px; +} + +.customization-lwtheme-menu-theme { + -moz-appearance: none; + border: 1px solid transparent; + margin: 0 -5px 5px; + padding-top: 0; + padding-inline-end: 5px; + padding-bottom: 0; + padding-inline-start: 0; +} + +.customization-lwtheme-menu-theme[defaulttheme] { + list-style-image: url(chrome://browser/skin/theme-switcher-icon.png); +} + +.customization-lwtheme-menu-theme[active="true"], +.customization-lwtheme-menu-theme:hover { + background-color: var(--arrowpanel-dimmed); + border-color: var(--panel-separator-color); +} + +.customization-lwtheme-menu-theme[active="true"], +.customization-lwtheme-menu-theme:hover:active { + background-color: var(--arrowpanel-dimmed-further); +} + +.customization-lwtheme-menu-theme > .toolbarbutton-icon { + margin: 5px; +} + +.customization-lwtheme-menu-theme > .toolbarbutton-text { + text-align: start; +} + +#customization-lwtheme-menu-header, +#customization-lwtheme-menu-recommended { + padding: 10px; + margin-bottom: 5px; +} + +#customization-lwtheme-menu-header, +#customization-lwtheme-menu-recommended, +#customization-lwtheme-menu-footer { + background-color: var(--arrowpanel-dimmed); + margin-right: -10px; + margin-left: -10px; +} + +#customization-lwtheme-menu-header { + margin-top: -10px; + border-bottom: 1px solid var(--arrowpanel-dimmed); +} + +#customization-lwtheme-menu-recommended { + border-top: 1px solid var(--arrowpanel-dimmed); + border-bottom: 1px solid var(--arrowpanel-dimmed); +} + +#customization-lwtheme-menu-footer { + background: linear-gradient(var(--arrowpanel-dimmed) 60%, transparent) border-box; + border-top: 1px solid var(--arrowpanel-dimmed); + margin-bottom: -10px; +} + +.customization-lwtheme-menu-footeritem { + -moz-appearance: none; + -moz-box-flex: 1; + color: inherit; + border-style: none; + padding: 10px; + margin-left: 0; + margin-right: 0; +} + +.customization-lwtheme-menu-footeritem:hover { + background: linear-gradient(var(--arrowpanel-dimmed) 40%, transparent) padding-box; +} + +.customization-lwtheme-menu-footeritem:first-child { + border-inline-end: 1px solid var(--panel-separator-color); +} + +%include customizeTip.inc.css diff --git a/browser/themes/shared/customizableui/customizeTip.inc.css b/browser/themes/shared/customizableui/customizeTip.inc.css new file mode 100644 index 000000000..26c6ee1ea --- /dev/null +++ b/browser/themes/shared/customizableui/customizeTip.inc.css @@ -0,0 +1,77 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; + margin: 0; + min-width: 400px; + max-width: 1000px; + min-height: 200px; + border-radius: 3px; + background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%); + border: 0px solid rgba(0,148,221,.5); + box-shadow: 0 1px 5px 0 rgba(0,0,0,.5), inset 0 1px 1px 0 #fff; + color: rgb(51,51,51); +} + +#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) { + background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%); +} + +.customization-tipPanel-infoBox { + margin: 20px 25px 25px; + width: 25px; + background-image: url(chrome://browser/skin/customizableui/info-icon-customizeTip.png); + background-repeat: no-repeat; +} + +.customization-tipPanel-content { + margin: 25px 0; + font-size: 12px; + line-height: 18px; +} + +.customization-tipPanel-em { + margin: 0; + font-weight: bold; +} + +.customization-tipPanel-contentImage { + margin-top: 25px; + list-style-image: url(chrome://browser/skin/customizableui/customize-illustration.png); + min-width: 300px; + max-width: 300px; + min-height: 190px; + max-height: 190px; + display: -moz-box; +} + +.customization-tipPanel-contentImage:-moz-locale-dir(rtl) { + list-style-image: url(chrome://browser/skin/customizableui/customize-illustration-rtl.png); +} + +.customization-tipPanel-link { + -moz-appearance: none; + background: transparent; + border: none; + box-shadow: none; + color: rgb(25,82,171); + margin: 0; + cursor: pointer; +} + +.customization-tipPanel-link > .button-box > .button-text { + margin: 0 !important; +} + +.customization-tipPanel-closeBox > .close-icon { + -moz-appearance: none; + border: 0; + margin-inline-end: -25px; +} + +#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"], +#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] { + list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png"); +} diff --git a/browser/themes/shared/customizableui/info-icon-customizeTip.png b/browser/themes/shared/customizableui/info-icon-customizeTip.png new file mode 100644 index 000000000..0dfbbce5d Binary files /dev/null and b/browser/themes/shared/customizableui/info-icon-customizeTip.png differ diff --git a/browser/themes/shared/customizableui/info-icon-customizeTip@2x.png b/browser/themes/shared/customizableui/info-icon-customizeTip@2x.png new file mode 100644 index 000000000..7a87fac20 Binary files /dev/null and b/browser/themes/shared/customizableui/info-icon-customizeTip@2x.png differ diff --git a/browser/themes/shared/customizableui/menuPanel-customizeFinish.png b/browser/themes/shared/customizableui/menuPanel-customizeFinish.png new file mode 100644 index 000000000..07be6a76a Binary files /dev/null and b/browser/themes/shared/customizableui/menuPanel-customizeFinish.png differ diff --git a/browser/themes/shared/customizableui/menuPanel-customizeFinish@2x.png b/browser/themes/shared/customizableui/menuPanel-customizeFinish@2x.png new file mode 100644 index 000000000..7562e138c Binary files /dev/null and b/browser/themes/shared/customizableui/menuPanel-customizeFinish@2x.png differ diff --git a/browser/themes/shared/customizableui/panelUI.inc.css b/browser/themes/shared/customizableui/panelUI.inc.css new file mode 100644 index 000000000..b46110ab5 --- /dev/null +++ b/browser/themes/shared/customizableui/panelUI.inc.css @@ -0,0 +1,1769 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +%filter substitution + +%define menuPanelWidth 22.35em +%define standaloneSubviewWidth 30em +% XXXgijs This is the ugliest bit of code I think I've ever written for Mozilla. +% Basically, the 0.1px is there to avoid CSS rounding errors causing buttons to wrap. +% For gory details, refer to https://bugzilla.mozilla.org/show_bug.cgi?id=963365#c11 +% There's no calc() here (and therefore lots of calc() where this is used) because +% we don't support nested calc(): https://bugzilla.mozilla.org/show_bug.cgi?id=968761 +%define menuPanelButtonWidth (@menuPanelWidth@ / 3 - 0.1px) +%define buttonStateHover :not(:-moz-any([disabled],[open],:active)):hover +%define menuStateHover :not(:-moz-any([disabled],:active))[_moz-menuactive] +%define buttonStateActive :not([disabled]):-moz-any([open],:hover:active) +%define menuStateActive :not([disabled])[_moz-menuactive]:active +%define menuStateMenuActive :not([disabled])[_moz-menuactive] + +%include ../browser.inc + +:root { + --panel-ui-exit-subview-gutter-width: 38px; +} + +#PanelUI-popup #PanelUI-contents:empty { + height: 128px; +} + +#PanelUI-popup #PanelUI-contents:empty::before { + content: ""; + background-image: url(chrome://browser/skin/customizableui/whimsy.png); + background-size: 64px 64px; + display: block; + width: 64px; + height: 64px; + position: absolute; + transition: transform 1s ease-out; + animation: whimsyMoveX 3.05s linear 0s infinite alternate, + whimsyMoveY 3.4s linear 0s infinite alternate; +} + +#PanelUI-popup #PanelUI-contents:not(:hover):empty::before { + filter: grayscale(100%); +} + +#PanelUI-popup #PanelUI-contents:active:empty::before { + animation: whimsyMoveX 3.05s linear 0s infinite alternate, + whimsyMoveY 3.4s linear 0s infinite alternate, + whimsyRotate 1s linear 0s infinite normal; +} + +#PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before { + animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate, + whimsyMoveY 3.4s linear 0s infinite alternate; +} + +#PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):active:empty::before { + animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate, + whimsyMoveY 3.4s linear 0s infinite alternate, + whimsyRotate 1s linear 0s infinite normal; +} + +@media (min-resolution: 2dppx) { + #PanelUI-popup #PanelUI-contents:empty::before { + background-image: url(chrome://browser/skin/customizableui/whimsy@2x.png); + } +} + +@keyframes whimsyMoveX { + /* These values are adjusted for the padding on the panel. */ + from { margin-left: -15px; } to { margin-left: calc(100% - 49px); } +} + +@keyframes whimsyMoveXRTL { + /* These values are adjusted for the padding on the panel. */ + from { margin-right: -15px; } to { margin-right: calc(100% - 49px); } +} + +@keyframes whimsyMoveY { + /* These values are adjusted for the padding and height of the panel. */ + from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); } +} + +@keyframes whimsyRotate { + to { transform: perspective(5000px) rotateY(360deg); } +} + +#PanelUI-button { + margin-inline-start: 2px; + border-inline-start: 1px solid; + border-image: linear-gradient(transparent, rgba(0,0,0,.1) 20%, rgba(0,0,0,.1) 80%, transparent); + border-image-slice: 1; +} + +#nav-bar[brighttext] > #PanelUI-button { + border-image-source: linear-gradient(transparent, rgba(100%,100%,100%,.2) 20%, rgba(100%,100%,100%,.2) 80%, transparent); +} + +#PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: -moz-box; + height: 10px; + width: 10px; + background-size: contain; + border: none; +} + +#PanelUI-menu-button[badge-status="download-success"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: none; +} + +#PanelUI-menu-button[badge-status="update-succeeded"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #74BF43 url(chrome://browser/skin/update-badge.svg) no-repeat center; + height: 13px; +} + +#PanelUI-menu-button[badge-status="update-failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #D90000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; + height: 13px; +} + +#PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + box-shadow: none; + filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15)); +} + +#PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + width: 7px; + height: 7px; + min-width: 0; + border-radius: 50%; + /* "!important" is necessary to override the rule in toolbarbutton.css */ + margin-top: -1px !important; + margin-right: -2px !important; +} + +#PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #FFBF00; +} + +#PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #D90000; +} + +#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + height: 13px; + background: transparent url(chrome://browser/skin/warning.svg) no-repeat center; +} + +#PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive, +#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive { + filter: none; +} + +.panel-subviews { + padding: 4px; + background-clip: padding-box; + border-left: 1px solid var(--arrowpanel-border-color); + box-shadow: 0 3px 5px hsla(210,4%,10%,.1), + 0 0 7px hsla(210,4%,10%,.1); + margin-inline-start: var(--panel-ui-exit-subview-gutter-width); +} + +.panel-viewstack[viewtype="main"] > .panel-subviews { + transform: translateX(@menuPanelWidth@); +} + +.panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) { + transform: translateX(-@menuPanelWidth@); +} + +panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews { + display: none; +} + +.panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView { + -moz-box-flex: 1; +} + +.panel-subview-body { + overflow-y: auto; + overflow-x: hidden; + -moz-box-flex: 1; +} + +#PanelUI-popup .panel-subview-body { + margin: -4px; + padding: 4px 4px; +} + +.panel-subview-header, +.subviewbutton.panel-subview-footer { + box-sizing: border-box; + min-height: 41px; + padding: 11px 12px; +} + +.panel-subview-header { + margin: -4px -4px 4px; + border-bottom: 1px solid var(--panel-separator-color); + color: GrayText; + font-variant: small-caps; +} + +.cui-widget-panelview .panel-subview-header { + display: none; +} + +.cui-widget-panelview .subviewbutton.panel-subview-footer { + margin: 4px 0 0; + -moz-box-pack: center; +} + +#PanelUI-mainView { + display: flex; + flex-direction: column; +} + +#PanelUI-popup > arrowscrollbox > autorepeatbutton { + display: none; +} +#PanelUI-popup > arrowscrollbox > scrollbox { + overflow: visible; +} + +#PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent { + overflow: hidden; +} + +#PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent, +.cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box { + padding: 0; +} + +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text, +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text { + line-height: 1.2; + max-height: 2.4em; +} + +.panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text, +.panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text { + -moz-hyphens: auto; +} + +.panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text, +.panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text { + position: absolute; + clip: rect(-0.1em, auto, 2.6em, auto); +} + +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-text, +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text { + text-align: center; + /* Need to override toolkit theming which sets margin: 0 !important; */ + margin: 2px 0 0 !important; +} + +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text { + text-align: center; + margin: -1px 0 0; +} + +#wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls, +#wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls { + margin-inline-start: 0; +} + +#PanelUI-contents { + max-width: @menuPanelWidth@; +} + +#BMB_bookmarksPopup, +.panel-mainview:not([panelid="PanelUI-popup"]) { + max-width: @standaloneSubviewWidth@; +} + +/* Give WebExtension stand-alone panels extra width for Chrome compatibility */ +.cui-widget-panel[viewId^=PanelUI-webext-] .panel-mainview { + max-width: 800px; +} + +.cui-widget-panel[viewId^=PanelUI-webext-] > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; +} + +panelview[id^=PanelUI-webext-] { + overflow: hidden; +} + +panelview:not([mainview]) .toolbarbutton-text, +.cui-widget-panel toolbarbutton > .toolbarbutton-text { + text-align: start; + display: -moz-box; +} + +.cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 4px 0; +} + +.cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent { + padding-bottom: 0; +} + +#PanelUI-contents { + display: block; + flex: 1 0 auto; + margin-left: auto; + margin-right: auto; + padding: .5em 0; + max-width: @menuPanelWidth@; +} + +#PanelUI-contents-scroller { + overflow-y: auto; + overflow-x: hidden; + width: @menuPanelWidth@; + padding-left: 5px; + padding-right: 5px; + flex: auto; +} + +.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon { + min-width: 0; + min-height: 0; + margin: 0; +} + +toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item), +.panelUI-grid .toolbarbutton-1, +.panel-customization-placeholder-child { + -moz-appearance: none; + -moz-box-orient: vertical; + width: calc(@menuPanelButtonWidth@); + height: calc(51px + 2.2em); +} + +/* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem + * should have a min-width set so they abide by the width set above (which they do outside of + * customize mode because they're in a flexed container) */ +toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 { + min-width: 0.01px; +} + +/* Help SDK 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="menu-panel"] > .toolbarbutton-icon, +toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { + height: 32px; + width: 32px; +} + +toolbarpaletteitem:-moz-any([place="palette"], [place="panel"]) > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-1 > .toolbarbutton-icon { + width: 32px; + height: 32px; +} + +.customization-palette .toolbarbutton-1 { + -moz-appearance: none; + -moz-box-orient: vertical; +} + +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button { + -moz-appearance: none; + -moz-box-orient: vertical; + width: calc(@menuPanelButtonWidth@ - 2px); + height: calc(49px + 2.2em); + border: 0; +} + +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text, +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text { + margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */ +} + +.panel-customization-placeholder-child { + margin: 6px 0 0; + padding: 2px 6px; + border: 1px solid transparent; +} + +.panelUI-grid .toolbarbutton-1[type="menu"] { + background-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png"); + background-position: right 3px top 16px; + background-repeat: no-repeat; +} + +.panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) { + background-position: left 3px top 16px; +} + +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker { + display: none; +} + +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { + -moz-box-align: center; + width: 16px; + margin-inline-start: -16px; + height: 51px; + margin-bottom: 2.2em; + padding: 0; +} + +.panelUI-grid .toolbarbutton-1:not([buttonover])@buttonStateHover@ > .toolbarbutton-menubutton-dropmarker { + background-color: var(--arrowpanel-dimmed) !important; + border-radius: 0 0 0 2px; +} + +.panelUI-grid .toolbarbutton-1:not([buttonover])@buttonStateHover@ > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) { + border-radius: 0 0 2px 0; +} + +#main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon { + opacity: .5; +} + +toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) { + width: calc(@menuPanelButtonWidth@); + margin: 0 !important; +} + +toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) { + -moz-box-align: center; + -moz-box-pack: center; +} + +toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe { + margin: 4px auto; +} + +#PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView { + background-color: var(--arrowpanel-dimmed); +} + +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item, +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]), +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status, +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar, +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label, +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon, +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator, +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize, +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) { + opacity: .5; +} + +/* + * XXXgijs: this is a workaround for a layout issue that was caused by these iframes, + * which was affecting subview display. Because of this, we're hiding the iframe *only* + * when displaying a subview. The discerning user might notice this, but it's not nearly + * as bad as the brokenness. + * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375 + * is addressed. + */ +#PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe { + visibility: hidden; +} + +toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text { + text-align: center; +} + +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon, +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack, +.customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, +.customization-palette .toolbarbutton-1 > .toolbarbutton-icon, +.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack, +.panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon, +.customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon, +.panel-customization-placeholder-child > .toolbarbutton-icon { + width: 32px; + height: 32px; + min-width: 32px; + min-height: 32px; + /* Explanation for the below formula (A / B - C) + A + Each button is @menuPanelButtonWidth@ wide + B + Each button has two margins. + C (46px / 2 = 23px) + The button icon is 32 pixels wide. + The button has 12px of horizontal padding (6 on each side). + The button has 2px of horizontal border (1 on each side). + Total width of button's icon + button padding should therefore be 46px, + which means each horizontal margin should be the half the button's width - (46/2) px. + */ + margin: 4px calc(@menuPanelButtonWidth@ / 2 - 23px); +} + +/* 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. */ +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon, +.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon { + width: 32px; + height: 32px; + min-width: 32px; + min-height: 32px; + margin: 0; + padding: 0; +} + +toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { + -moz-box-flex: 1; +} + +#personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder { + -moz-box-flex: 1; +} + +#personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon { + margin-inline-end: 2px; +} + +#edit-controls@inAnyPanel@ > #copy-button, +#zoom-controls@inAnyPanel@ > #zoom-reset-button { + border-left: none; + border-right: none; + border-radius: 0; +} + +#zoom-in-button > .toolbarbutton-text, +#zoom-out-button > .toolbarbutton-text, +#zoom-reset-button > .toolbarbutton-icon { + display: none; +} + +#PanelUI-footer { + display: flex; + flex-shrink: 0; + flex-direction: column; + background-color: var(--arrowpanel-dimmed); + padding: 0; + margin: 0; +} + +#main-window[customizing] #PanelUI-footer-fxa { + display: none; +} + +#PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator, +#PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon, +#PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar { + display: none; +} + +#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status::after { + content: url(chrome://browser/skin/warning.svg); + filter: drop-shadow(0 1px 0 hsla(206,50%,10%,.15)); + width: 47px; + padding-top: 1px; + display: block; + text-align: center; + position: relative; + top: 25%; +} + +#PanelUI-update-status[update-status]::after { + content: ""; + width: 14px; + height: 14px; + margin-inline-end: 16.5px; + box-shadow: 0px 1px 0px rgba(255,255,255,.2) inset, 0px -1px 0px rgba(0,0,0,.1) inset, 0px 1px 0px rgba(12,27,38,.2); + border-radius: 2px; + background-size: contain; + display: -moz-box; +} + +#PanelUI-update-status[update-status="succeeded"]::after { + background-image: url(chrome://browser/skin/update-badge.svg); + background-color: #74BF43; +} + +#PanelUI-update-status[update-status="failed"]::after { + background-image: url(chrome://browser/skin/update-badge-failed.svg); + background-color: #D90000; +} + +#PanelUI-fxa-status { + display: flex; + flex: 1 1 0%; + width: 1px; +} + +#PanelUI-footer-inner, +#PanelUI-footer-fxa:not([hidden]) { + display: flex; + border-top: 1px solid var(--panel-separator-color); +} + +#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner, +#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa { + position: relative; +} + +#PanelUI-footer-inner > toolbarseparator, +#PanelUI-footer-fxa > toolbarseparator { + border: 0; + border-left: 1px solid var(--panel-separator-color); + margin: 7px 0 7px; + -moz-appearance: none; +} + +#PanelUI-footer-inner:hover > toolbarseparator, +#PanelUI-footer-fxa:hover > toolbarseparator { + margin: 0; +} + +#PanelUI-update-status, +#PanelUI-help, +#PanelUI-fxa-label, +#PanelUI-fxa-icon, +#PanelUI-customize, +#PanelUI-quit { + margin: 0; + padding: 11px 0; + box-sizing: border-box; + min-height: 40px; + -moz-appearance: none; + box-shadow: none; + border: none; + border-radius: 0; + transition: background-color; + -moz-box-orient: horizontal; +} + +#PanelUI-update-status { + border-top: 1px solid var(--panel-separator-color); +} + +#PanelUI-update-status { + border-bottom: 1px solid transparent; + margin-bottom: -1px; +} + +#PanelUI-update-status > .toolbarbutton-text { + width: 0; /* Fancy cropping solution for flexbox. */ +} + +#PanelUI-help, +#PanelUI-quit { + min-width: 46px; +} + +#PanelUI-update-status > .toolbarbutton-text, +#PanelUI-fxa-label > .toolbarbutton-text, +#PanelUI-customize > .toolbarbutton-text { + margin: 0; + padding: 0 6px; + text-align: start; +} + +#PanelUI-help > .toolbarbutton-text, +#PanelUI-quit > .toolbarbutton-text, +#PanelUI-fxa-avatar > .toolbarbutton-text { + display: none; +} + +#PanelUI-update-status > .toolbarbutton-icon, +#PanelUI-fxa-label > .toolbarbutton-icon, +#PanelUI-fxa-icon > .toolbarbutton-icon, +#PanelUI-customize > .toolbarbutton-icon, +#PanelUI-help > .toolbarbutton-icon, +#PanelUI-quit > .toolbarbutton-icon { + margin-inline-end: 0; +} + +#PanelUI-fxa-icon { + padding-inline-start: 15px; + padding-inline-end: 15px; +} + +#PanelUI-fxa-label, +#PanelUI-customize { + flex: 1; + padding-inline-start: 15px; + border-inline-start-style: none; +} + +#PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label, +#PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label { + padding-inline-start: 0px; +} + +#PanelUI-update-status { + width: calc(@menuPanelWidth@ + 30px); + padding-inline-start: 15px; + border-inline-start-style: none; +} + +#PanelUI-update-status { + list-style-image: url(chrome://branding/content/icon16.png); +} + +#PanelUI-fxa-label, +#PanelUI-fxa-icon { + list-style-image: url(chrome://browser/skin/sync-horizontalbar.png); +} + +#PanelUI-remotetabs { + --panel-ui-sync-illustration-height: 157.5px; +} + +.PanelUI-remotetabs-instruction-title, +.PanelUI-remotetabs-instruction-label, +#PanelUI-remotetabs-mobile-promo { + /* 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: 15px; + text-align: center; + text-shadow: none; + max-width: 15em; + color: GrayText; +} + +.PanelUI-remotetabs-instruction-title { + font-size: 1.3em; +} + +/* The boxes with "instructions" get extra top and bottom padding for space + around the illustration and buttons */ +.PanelUI-remotetabs-instruction-box { + /* If you change the padding here, the min-height of the synced tabs panel + (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may + need adjusting (see bug 1248506) */ + padding-bottom: 30px; + padding-top: 15px; +} + +.PanelUI-remotetabs-prefs-button { + -moz-appearance: none; + background-color: #0096dd; + /* !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-top: 10px; + margin-bottom: 10px; + padding: 8px; + text-shadow: none; + min-width: 200px; +} + +.PanelUI-remotetabs-prefs-button:hover, +.PanelUI-remotetabs-prefs-button:hover:active { + background-color: #018acb; +} + +.remotetabs-promo-link { + margin: 0; +} + +.PanelUI-remotetabs-notabsforclient-label { + color: GrayText; + /* This margin is to line this label up with the labels in toolbarbuttons. */ + margin-left: 28px; +} + +.fxaSyncIllustration { + height: var(--panel-ui-sync-illustration-height); + list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg); +} + +.PanelUI-remotetabs-prefs-button > .toolbarbutton-text { + /* !important to override ".cui-widget-panel toolbarbutton > .toolbarbutton-text" above. */ + text-align: center !important; + text-shadow: none; +} + +#PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */ + min-width: 19em; +} + +/* Work around bug 1224412 - these boxes will cause scrollbars to appear when + the panel is anchored to a toolbar button. +*/ +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane { + min-height: calc(var(--panel-ui-sync-illustration-height) + + 20px + /* margin of .PanelUI-remotetabs-prefs-button */ + 16px + /* padding of .PanelUI-remotetabs-prefs-button */ + 30px + /* margin of .PanelUI-remotetabs-instruction-label */ + 30px + 15px + /* padding of .PanelUI-remotetabs-instruction-box */ + 11em); +} + +#PanelUI-remotetabs-tabslist > label[itemtype="client"] { + color: GrayText; +} + +/* Collapse the non-active vboxes in the remotetabs deck to use only the + height the active box needs */ +#PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane, +#PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching, +#PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane { + visibility: collapse; +} + +#PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons { + display: none; +} + +#PanelUI-fxa-icon[syncstatus="active"]:not([disabled]) { + list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar.png); +} + +#PanelUI-footer-fxa[fxastatus="migrate-signup"] > #PanelUI-fxa-status > #PanelUI-fxa-label, +#PanelUI-footer-fxa[fxastatus="migrate-verify"] > #PanelUI-fxa-status > #PanelUI-fxa-label { + list-style-image: url(chrome://browser/skin/warning.svg); + -moz-image-region: auto; +} + +#PanelUI-customize { + list-style-image: url(chrome://browser/skin/menuPanel-customize.png); +} + +#customization-panelHolder #PanelUI-customize { + list-style-image: url(chrome://browser/skin/customizableui/menuPanel-customizeFinish.png); +} + +#PanelUI-help { + list-style-image: url(chrome://browser/skin/menuPanel-help.png); +} + +#PanelUI-quit { + border-inline-end-style: none; + list-style-image: url(chrome://browser/skin/menuPanel-exit.png); +} + +#PanelUI-fxa-label, +#PanelUI-fxa-icon, +#PanelUI-customize, +#PanelUI-help, +#PanelUI-quit { + -moz-image-region: rect(0, 16px, 16px, 0); +} + +#PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon, +#PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon { + display: none; +} + +#PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar { + display: none; +} + +#PanelUI-fxa-status[disabled], +#PanelUI-fxa-icon[disabled] { + pointer-events: none; +} + +#PanelUI-fxa-avatar { + width: 32px; + height: 32px; + border-radius: 50%; + background-repeat: no-repeat; + background-position: 0 0; + background-size: contain; + align-self: center; + margin: 0px 7px; + padding: 0px; + border: 0px none; + margin-inline-end: 0; +} + +#PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar { + list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg); +} + +#PanelUI-customize:hover, +#PanelUI-help:not([disabled]):hover, +#PanelUI-quit:not([disabled]):hover { + -moz-image-region: rect(0, 32px, 16px, 16px); +} + +#PanelUI-customize:hover:active, +#PanelUI-help:not([disabled]):hover:active, +#PanelUI-quit:not([disabled]):hover:active { + -moz-image-region: rect(0, 48px, 16px, 32px); +} + +#PanelUI-help[panel-multiview-anchor="true"] { + -moz-image-region: rect(0, 64px, 16px, 48px); +} + +#PanelUI-help[disabled], +#PanelUI-quit[disabled], +#PanelUI-fxa-icon[disabled], +#PanelUI-fxa-avatar[disabled], +#PanelUI-fxa-label[disabled] > .toolbarbutton-icon, +#PanelUI-fxa-status::after { + opacity: 0.4; +} + +#PanelUI-fxa-status:not([disabled]):hover, +#PanelUI-fxa-icon:not([disabled]):hover, +#PanelUI-help:not([disabled]):hover, +#PanelUI-customize:hover, +#PanelUI-quit:not([disabled]):hover { + outline: 1px solid var(--arrowpanel-dimmed); + background-color: var(--arrowpanel-dimmed); +} + +#PanelUI-fxa-status:not([disabled]):hover:active, +#PanelUI-fxa-icon:not([disabled]):hover:active, +#PanelUI-help:not([disabled]):hover:active, +#PanelUI-customize:hover:active, +#PanelUI-quit:not([disabled]):hover:active { + outline: 1px solid var(--arrowpanel-dimmed-further); + background-color: var(--arrowpanel-dimmed-further); + box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; +} + +#PanelUI-fxa-status:not([disabled]):hover, +#PanelUI-fxa-status:not([disabled]):hover:active, +#PanelUI-fxa-icon:not([disabled]):hover, +#PanelUI-fxa-icon:not([disabled]):hover:active { + outline: none; +} + +#PanelUI-footer-fxa[fxastatus="error"] { + background-color: hsl(42,94%,88%); + border-top: 1px solid hsl(42,94%,70%); +} + +#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover { + background-color: hsl(42,94%,85%); +} + +#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active { + background-color: hsl(42,94%,82%); + box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; +} + +#PanelUI-update-status { + color: black; +} + +#PanelUI-update-status[update-status="succeeded"] { + background-color: hsla(96,65%,75%,.5); +} + +#PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover { + background-color: hsla(96,65%,75%,.8); +} + +#PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active { + background-color: hsl(96,65%,75%); +} + +#PanelUI-update-status[update-status="failed"] { + background-color: hsla(359,69%,84%,.5); +} + +#PanelUI-update-status[update-status="failed"]:not([disabled]):hover { + background-color: hsla(359,69%,84%,.8); +} + +#PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active { + background-color: hsl(359,69%,84%); +} + +#PanelUI-quit:not([disabled]):hover { + background-color: #d94141; + outline-color: #c23a3a; +} + +#PanelUI-quit:not([disabled]):hover:active { + background-color: #ad3434; + outline-color: #992e2e; +} + +#customization-panelHolder #PanelUI-customize { + color: white; + background-color: hsl(108,66%,30%); + text-shadow: none; + margin-top: -1px; +} + +#customization-panelHolder #PanelUI-customize + toolbarseparator { + display: none; +} + +#customization-panelHolder #PanelUI-customize:hover { + background-color: hsl(109,65%,26%); +} + +#customization-panelHolder #PanelUI-customize:hover:active { + background-color: hsl(109,65%,22%); +} + +#customization-palette .toolbarbutton-multiline-text, +#customization-palette .toolbarbutton-text { + display: none; +} + +panelview .toolbarbutton-1, +.subviewbutton, +.widget-overflow-list .toolbarbutton-1, +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button, +.share-provider-button, +.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton { + -moz-appearance: none; + padding: 0 6px; + background-color: transparent; + border-radius: 2px; + border-style: solid; + border-color: transparent; +} + +panelview .toolbarbutton-1, +.subviewbutton, +.widget-overflow-list .toolbarbutton-1, +.share-provider-button, +.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton { + border-width: 1px; +} + +.subviewbutton.panel-subview-footer { + border-radius: 0; + border: none; +} + +.subviewbutton.panel-subview-footer > .menu-text { + -moz-appearance: none; + margin-inline-start: 0px !important; + padding-inline-start: 6px; + padding-inline-end: 6px; + -moz-box-flex: 0; + text-align: center; +} + +.subviewbutton.panel-subview-footer > .toolbarbutton-icon { + margin: 0; +} + +.subviewbutton.panel-subview-footer > .toolbarbutton-text { + text-align: center; + padding: 0; +} + +.subviewbutton.panel-subview-footer > .menu-accel-container { + padding-inline-start: 6px; +} + +.subviewbutton:not(.panel-subview-footer) { + margin: 0; +} + +.subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text, +/* Bookmark items need a more specific selector. */ +.PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text, +.PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text { + font: menu; +} + +.PanelUI-subView .subviewbutton[shortcut]::after { + content: attr(shortcut); + float: right; + color: GrayText; +} + +.PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after { + margin-inline-start: 10px; +} + +/* This is a